/* Start:/local/templates/darmed/css/_price-list.css?179045463744173*/
/*
 * Прайс-лист /prays-list/ — список анализов, разделы-фильтр, поиск и сводка
 * корзины (US-IT-07-21).
 *
 * Подключается САМОЙ страницей (`src/prays-list/index.php`), как и
 * `_cart-page.css` у оформления: других потребителей у этих стилей нет, а общий
 * шаблон грузится на каждой странице сайта.
 *
 * Размеры — в шкале страницы (`calc(N * var(--width-multiplier))`), а не в
 * токенах дизайн-системы: прайс свёрстан легаси-стилями лендинга, и смешение
 * двух шкал даёт разъезжающиеся отступы при изменении ширины окна.
 *
 * Оформление принято 22.09.2026 после двух кругов прототипов и разбора
 * конкурентов — см. spec-2026-09-22-price-list-redesign.
 */

/* Палитра страницы. Зелёный остаётся ОДНИМ акцентом и достаётся только цене и
 * выбранной позиции; розовый и жёлтый бренда на этой странице не участвуют.
 * Раньше на одном экране жили четыре ярких цвета без иерархии — мутно-зелёная
 * заливка карточек, тёмно-зелёная кнопка в каждой строке, розовая клякса-декор
 * и жёлтая кнопка шапки, — и «важным» выглядело всё сразу.
 */
.price-list {
  --p-bg: #FFFFFF;
  --p-surface: #F7F8F7;
  --p-surface-2: #FFFFFF;
  --p-line: rgba(2, 3, 4, 0.10);
  --p-line-soft: rgba(2, 3, 4, 0.06);
  --p-text: #1C252E;
  --p-text-2: #62707E;
  --p-accent: #225E2E;
  --p-accent-soft: #EAF2D2;
  --p-accent-line: rgba(34, 94, 46, 0.35);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Каркас страницы
 * ───────────────────────────────────────────────────────────────────────── */
.price-list {
  color: var(--p-text);
}

/* ДЕФЕКТ, из-за которого ломалась липкая панель — и который жил тут всё время.
 *
 * `.services-page` стартует с `transform: translateY(40px)` и ждёт класса
 * `section-visible` от IntersectionObserver в `_main.js`. Порог там — 0.15, а
 * секция прайса высотой 10 675 пикселей: пятнадцать процентов это 1 600, столько
 * секции в экран не помещается никогда. Класс не ставится, и страница прайса
 * ВСЕГДА сдвинута вниз на 40 пикселей.
 *
 * Для панели это смертельно: трансформированный предок становится системой
 * отсчёта для `position: sticky`, и панель липнет не к 102 пикселям от верха
 * окна, а к 142 — над ней остаётся сорокапиксельная щель, в которой едут строки
 * списка. Именно её видно на скриншотах.
 *
 * Здесь просто снимаем анимацию появления: на странице-справочнике ей нечего
 * делать. В чистовой версии правится в `_main.js` — порог наблюдателя или сам
 * список наблюдаемых секций.
 */
.price-list .services-page__title {
  margin-bottom: calc(8 * var(--width-multiplier));
}

/* Шапка страницы несла 46 пикселей отступа снизу, рассчитанных на то, что под
   ней сразу поиск. Поиск уехал в липкую панель со своими полями, и два отступа
   сложились в провал почти в сотню пикселей. */
.price-list .services-page__top {
  margin-bottom: calc(12 * var(--width-multiplier));
}

/* Подзаголовок страницы — объясняет, что это за список и что цена без забора.
   У invivo то же примечание висит отдельным блоком: человек узнаёт про
   доплату здесь, а не на оформлении. */
.price-list .price-lead {
  max-width: calc(620 * var(--width-multiplier));
  margin: 0 0 calc(28 * var(--width-multiplier));
  font-size: calc(16 * var(--width-multiplier));
  line-height: 1.5;
  color: var(--p-text-2);
}

/* Между разделами — воздух, а не рамки. */
.price-list .services-page__box {
  gap: calc(56 * var(--width-multiplier));
}

@media (min-width: 1025px) {
  .price-list .services-page__wrap {
    grid-template-columns: calc(248 * var(--width-multiplier)) minmax(0, 1fr);
    gap: calc(40 * var(--width-multiplier));
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Липкая панель: поиск и сводка корзины.
 *
 * Плашка корзины раньше липла сама по себе посреди потока и наезжала на
 * карточки; поиск не липнул вовсе и на третьем экране становился недоступен.
 * Теперь оба в одной полосе под шапкой; полоса во всю ширину окна, поэтому
 * контент уходит под неё, как под шапку.
 * ───────────────────────────────────────────────────────────────────────── */
.price-list .price-bar {
  position: sticky;
  top: var(--price-header-h, 102px);
  z-index: 5;
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  width: 100%;
  gap: calc(12 * var(--width-multiplier));
  /* Тянем на поля `.container` (50 шкалы), иначе по краям щели, сквозь которые
     видно проезжающие строки. */
  margin: 0 calc(-50 * var(--width-multiplier)) calc(28 * var(--width-multiplier));
  padding: calc(14 * var(--width-multiplier)) calc(50 * var(--width-multiplier));
  background: var(--p-bg);
  transition: box-shadow 0.25s ease;
}

.price-list .price-bar--stuck {
  box-shadow: 0 calc(6 * var(--width-multiplier)) calc(20 * var(--width-multiplier)) rgba(2, 3, 4, 0.07);
}

.price-list .price-bar__sentinel {
  height: 1px;
}

.price-list .price-bar .services-page__search {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
}

.price-list .price-bar .services-page__search input {
  height: calc(48 * var(--width-multiplier));
  padding: 0 calc(76 * var(--width-multiplier)) 0 calc(18 * var(--width-multiplier));
  border: 1px solid var(--p-line);
  border-radius: calc(12 * var(--width-multiplier));
  background-color: var(--p-surface);
  font-size: calc(15 * var(--width-multiplier));
  color: var(--p-text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.price-list .price-bar .services-page__search input:focus {
  border-color: var(--p-accent-line);
  background-color: var(--p-surface-2);
  outline: none;
}

/* У `input[type=search]` WebKit рисует собственный крестик очистки — рядом с
   нашим их получалось два. Свой оставляем: он крупнее, попадает пальцем и
   выглядит как остальной интерфейс. */
.price-list .price-bar .services-page__search input::-webkit-search-cancel-button,
.price-list .price-bar .services-page__search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.price-list .price-search__clear {
  position: absolute;
  top: 50%;
  right: calc(46 * var(--width-multiplier));
  transform: translateY(-50%) scale(1);
  width: calc(22 * var(--width-multiplier));
  height: calc(22 * var(--width-multiplier));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--p-line);
  font-size: calc(15 * var(--width-multiplier));
  line-height: 1;
  color: var(--p-text-2);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.price-list .price-search__clear:hover {
  background: var(--p-line);
  transform: translateY(-50%) scale(1.1);
}

/* Счётчик найденного — строкой над списком, в колонке результатов. В панели он
   уезжал к правому краю страницы и читался как подпись к корзине. */
.price-list .price-status {
  /* Колонка списка разведена по разделам на 56 пикселей, и строка-счётчик как
     первый её элемент получала тот же интервал — до заголовка оставалась
     дыра. Отрицательным полем возвращаем расстояние к 16. */
  margin: calc(-8 * var(--width-multiplier)) 0 calc(-40 * var(--width-multiplier));
  font-size: calc(14 * var(--width-multiplier));
  color: var(--p-text-2);
}

.price-list .price-status[hidden] {
  display: none;
}

/* Сводка корзины. Появляется с первой позицией: пустая она только занимала
   место и сообщала «пусто». В шапке сайта корзина показывается по тому же
   правилу — там значок, здесь набранная сумма и путь к оформлению.
 *
 * Фон нейтральный, а не зелёный: салатовая заливка тянула на себя внимание
 * сильнее цен и спорила с кнопками добавления — на странице снова оказывалось
 * два зелёных пятна разного смысла. Зелёной остаётся только сумма. */
.price-list .price-bar .services-page__basket {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  gap: calc(10 * var(--width-multiplier));
  padding: calc(12 * var(--width-multiplier)) calc(18 * var(--width-multiplier));
  border: 1px solid var(--p-line);
  border-radius: calc(12 * var(--width-multiplier));
  background: var(--p-surface-2);
  font-size: calc(15 * var(--width-multiplier));
  color: var(--p-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.price-list .price-bar .services-page__basket:hover {
  border-color: var(--p-accent-line);
  box-shadow: 0 calc(2 * var(--width-multiplier)) calc(8 * var(--width-multiplier)) rgba(2, 3, 4, 0.06);
}

.price-list .services-page__basket svg path {
  fill: var(--p-text-2);
}

.price-list .services-page__basket[hidden] {
  display: none !important;
}

.price-list .price-basket__sum {
  font-weight: 600;
  color: var(--p-accent);
}

.price-list .price-basket__count:not(:empty)::after {
  content: "·";
  margin: 0 calc(6 * var(--width-multiplier));
  color: var(--p-text-2);
}

.price-list .services-page__basket [data-cart-badge] {
  display: none;
}

/* Кнопка «Разделы» — для узкого экрана, где колонки сбоку нет. */
.price-list .price-bar__sections {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: calc(6 * var(--width-multiplier));
  height: calc(48 * var(--width-multiplier));
  padding: 0 calc(16 * var(--width-multiplier));
  border: 1px solid var(--p-line);
  border-radius: calc(12 * var(--width-multiplier));
  background: var(--p-surface-2);
  font-size: calc(15 * var(--width-multiplier));
  line-height: 1;
  color: var(--p-text);
  cursor: pointer;
}

.price-list .price-bar__sections::after {
  content: "";
  width: calc(8 * var(--width-multiplier));
  height: calc(8 * var(--width-multiplier));
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}

.price-list .price-bar__sections[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

.price-list .price-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 6;
  max-height: 60vh;
  overflow-y: auto;
  padding: calc(12 * var(--width-multiplier)) calc(16 * var(--width-multiplier)) calc(20 * var(--width-multiplier));
  background: var(--p-bg);
  box-shadow: 0 calc(12 * var(--width-multiplier)) calc(28 * var(--width-multiplier)) rgba(2, 3, 4, 0.14);
}

.price-list .price-sheet[hidden] {
  display: none;
}

.price-list .price-sheet__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(2 * var(--width-multiplier)) calc(12 * var(--width-multiplier));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1024px) {
  .price-list .price-bar {
    top: var(--price-header-h, 76px);
    flex-wrap: wrap;
    margin: 0 calc(-16 * var(--width-multiplier)) calc(20 * var(--width-multiplier));
    padding: calc(10 * var(--width-multiplier)) calc(16 * var(--width-multiplier));
  }

  .price-list .price-bar__sections {
    display: inline-flex;
    order: 2;
  }

  .price-list .price-bar .services-page__search {
    order: 1;
    flex: 1 1 100%;
  }

  .price-list .price-bar .services-page__basket {
    order: 3;
    flex: 1 1 auto;
    justify-content: space-between;
    height: calc(48 * var(--width-multiplier));
    padding: 0 calc(16 * var(--width-multiplier));
  }

  .price-list .price-status {
    order: 4;
    flex: 1 1 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Табы «Чекапы / Анализы» — развилка до списка.
 *
 * Сейчас чекапы лежат шестнадцатым разделом в самом низу, и найти их можно
 * только прокруткой. Между «купить готовый набор» и «добрать один анализ»
 * разницы на экране нет.
 * ───────────────────────────────────────────────────────────────────────── */
.price-list .price-tabs {
  display: inline-flex;
  gap: calc(4 * var(--width-multiplier));
  margin-bottom: calc(28 * var(--width-multiplier));
  padding: calc(4 * var(--width-multiplier));
  border-radius: calc(14 * var(--width-multiplier));
  background: var(--p-surface);
}

.price-list .price-tab {
  display: inline-flex;
  align-items: baseline;
  gap: calc(8 * var(--width-multiplier));
  padding: calc(10 * var(--width-multiplier)) calc(20 * var(--width-multiplier));
  border: 0;
  border-radius: calc(10 * var(--width-multiplier));
  background: transparent;
  font-family: inherit;
  font-size: calc(15 * var(--width-multiplier));
  font-weight: 500;
  line-height: 1.2;
  color: var(--p-text-2);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.price-list .price-tab:hover {
  color: var(--p-text);
}

.price-list .price-tab--active {
  background: var(--p-surface-2);
  color: var(--p-text);
  box-shadow: 0 1px calc(3 * var(--width-multiplier)) rgba(2, 3, 4, 0.10);
}

.price-list .price-tab__count {
  font-size: calc(13 * var(--width-multiplier));
  color: var(--p-text-2);
}

.price-list .price-tab--active .price-tab__count {
  color: var(--p-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Колонка разделов. Не рамка с прокруткой, а просто список: выбор раздела
 * СОКРАЩАЕТ список позиций, а не прокручивает к нему (приём invivo). На сотне
 * с лишним позиций это разница между «листать» и «смотреть».
 * ───────────────────────────────────────────────────────────────────────── */
.price-list .services-page__aside {
  padding: 0;
  border: 0;
  background: transparent;
  top: calc(var(--price-header-h, 102px) + 96 * var(--width-multiplier));
  max-height: calc(100vh - var(--price-header-h, 102px) - 120 * var(--width-multiplier));
  overflow-y: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.price-list .services-page__aside::-webkit-scrollbar {
  display: none;
}

.price-list .price-nav__title {
  margin: 0 0 calc(12 * var(--width-multiplier));
  padding-left: calc(10 * var(--width-multiplier));
  font-size: calc(13 * var(--width-multiplier));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-text-2);
}

.price-list .services-page__list a,
.price-list .price-sheet__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--width-multiplier));
  padding: calc(7 * var(--width-multiplier)) calc(10 * var(--width-multiplier));
  border-radius: calc(8 * var(--width-multiplier));
  font-size: calc(15 * var(--width-multiplier));
  line-height: 1.3;
  color: var(--p-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.price-list .services-page__list a:hover,
.price-list .price-sheet__list a:hover {
  background: var(--p-surface);
}

.price-list .services-page__list a.active,
.price-list .price-sheet__list a.active {
  background: var(--p-accent-soft);
  color: var(--p-accent);
  font-weight: 600;
}

.price-list .price-nav__count {
  flex: 0 0 auto;
  font-size: calc(13 * var(--width-multiplier));
  font-weight: 400;
  color: var(--p-text-2);
}

@media (max-width: 1024px) {
  .price-list .services-page__aside {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Разделы и строки.
 *
 * Заголовок раздела со счётчиком, как «Heart(15)» у Function Health, и плоский
 * список под ним. Ни карточек, ни заливок: у позиции нет картинки, и плитка
 * только изображала товар, которого не видно.
 * ───────────────────────────────────────────────────────────────────────── */
.price-list .services-page__group[hidden] {
  display: none;
}

.price-list .services-page__caption {
  display: flex;
  align-items: baseline;
  gap: calc(10 * var(--width-multiplier));
  margin-bottom: calc(4 * var(--width-multiplier));
  padding-bottom: calc(12 * var(--width-multiplier));
  border-bottom: 1px solid var(--p-line);
  font-size: calc(22 * var(--width-multiplier));
  font-weight: 600;
  line-height: 1.3;
  color: var(--p-text);
  scroll-margin-top: calc(var(--price-header-h, 102px) + 96 * var(--width-multiplier));
}

.price-list .price-group__count {
  font-size: calc(14 * var(--width-multiplier));
  font-weight: 400;
  color: var(--p-text-2);
}

.price-list .services-page__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.price-list .services-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(20 * var(--width-multiplier));
  padding: calc(18 * var(--width-multiplier)) calc(12 * var(--width-multiplier));
  border: 0;
  border-bottom: 1px solid var(--p-line-soft);
  border-radius: calc(10 * var(--width-multiplier));
  background: transparent;
  transition: background-color 0.2s ease;
}

.price-list .services-card:hover {
  background: var(--p-surface);
}

.price-list .services-card[hidden] {
  display: none;
}

.price-list .services-card__txt {
  margin: 0;
  align-items: center;
  justify-content: flex-start;
  gap: calc(8 * var(--width-multiplier));
}

.price-list .services-card__name {
  font-size: calc(16 * var(--width-multiplier));
  line-height: 1.4;
  font-weight: 400;
  color: var(--p-text);
}

.price-list .services-card__date {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: calc(14 * var(--width-multiplier));
  line-height: 1.3;
  color: var(--p-text-2);
  white-space: nowrap;
}

/* Цена и кнопка держатся первой строки сетки. Состав чекапа раскрывается под
   названием и занимает всю ширину — без явного `grid-row` он выдавливал цену
   на вторую строку, и та уезжала под раскрывашку. */
.price-list .services-card__bottom {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  gap: calc(20 * var(--width-multiplier));
}

.price-list .services-card__price {
  grid-row: 1;
}

.price-list .services-card__price {
  min-width: calc(104 * var(--width-multiplier));
  text-align: right;
  font-size: calc(17 * var(--width-multiplier));
  font-weight: 600;
  line-height: 1.2;
  color: var(--p-text);
}

/* Состав чекапа — раскрывашкой под названием, во всю ширину строки. */
.price-list .services-card__checkup {
  grid-column: 1 / -1;
  margin-top: calc(6 * var(--width-multiplier));
  font-size: calc(14 * var(--width-multiplier));
  color: var(--p-text-2);
}

.price-list .services-card__checkup-summary {
  color: var(--p-accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--p-accent-line);
  width: max-content;
}

.price-list .services-card__checkup-list {
  columns: 2;
  column-gap: calc(24 * var(--width-multiplier));
  margin-top: calc(10 * var(--width-multiplier));
}

/* «Уже входит в выбранный чекап» — метка под названием, а не отдельный ряд:
   рядом отдельной строкой она читалась как пустая позиция между анализами. */
.price-list .services-card__in-checkup {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin: calc(4 * var(--width-multiplier)) 0 0;
  padding: calc(3 * var(--width-multiplier)) calc(9 * var(--width-multiplier));
  border-radius: calc(6 * var(--width-multiplier));
  background: var(--secondary-lighter, #FFF5CC);
  font-size: calc(12 * var(--width-multiplier));
  line-height: 1.4;
  color: #7A4100;
}

/* На телефоне три колонки в строку не встают: название занимает строку
   целиком, цена и кнопка — вторую, кнопка прижата к правому краю, чтобы палец
   попадал в привычное место. */
@media (max-width: 1024px) {
  /* Горизонтальный отступ строки: при наведении и фокусе подсветка иначе
     прилегает к тексту вплотную и читается как обрезанная. Строку при этом
     растягиваем на поля контейнера, чтобы подсветка шла от края до края. */
  .price-list .services-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(10 * var(--width-multiplier));
    margin: 0 calc(-12 * var(--width-multiplier));
    padding: calc(16 * var(--width-multiplier)) calc(12 * var(--width-multiplier));
  }

  .price-list .services-card__txt {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .price-list .services-card__date {
    grid-column: 1;
    grid-row: 2;
  }

  .price-list .services-card__price {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    text-align: left;
  }

  .price-list .services-card__bottom {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-end;
  }

  .price-list .services-card__checkup,
  .price-list .services-card__in-checkup {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .price-list .services-card__checkup-list {
    columns: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Кнопка и её превращение.
 *
 * Было: залитая зелёным кнопка в каждой из ста четырнадцати строк и
 * `disabled`-«Добавлено» без пути назад. Стало: спокойная обводка, при
 * добавлении — заливка и галочка, которая прорисовывается; повторное нажатие
 * убирает позицию.
 * ───────────────────────────────────────────────────────────────────────── */
.price-list .services-card__button.button-green {
  position: relative;
  min-width: calc(132 * var(--width-multiplier));
  height: calc(40 * var(--width-multiplier));
  padding: 0 calc(18 * var(--width-multiplier));
  border: 1px solid var(--p-accent-line);
  border-radius: calc(10 * var(--width-multiplier));
  background: transparent;
  font-size: calc(14 * var(--width-multiplier));
  font-weight: 500;
  line-height: 1;
  color: var(--p-accent);
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.price-list .services-card__button.button-green:hover {
  border-color: var(--p-accent);
  background: var(--p-accent-soft);
}

.price-list .services-card--added .services-card__button.button-green {
  border-color: var(--p-accent);
  background: var(--p-accent);
  color: #FFFFFF;
}

.price-list .services-card--added .services-card__button.button-green:hover {
  background: var(--p-accent);
  border-color: var(--p-accent);
}

/* Галочка: рисуется обводкой, а не появляется целиком — это и есть та самая
   плавность. Под `prefers-reduced-motion` анимация выключается ниже. */
.price-list .price-tick {
  width: calc(16 * var(--width-multiplier));
  height: calc(16 * var(--width-multiplier));
  margin-right: calc(8 * var(--width-multiplier));
  overflow: visible;
}

.price-list .price-tick path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}

/* Галочка стоит нарисованной, а анимация включается только классом, который
   скрипт вешает на полсекунды в ответ на нажатие. Пока анимация висела на
   состоянии «в корзине», она перезапускалась каждый раз, когда курсор уходил с
   кнопки и подпись возвращалась на место. */
.price-list .price-tick path {
  stroke-dashoffset: 0;
}

.price-list .services-card__button.price-btn--drawing .price-tick path {
  animation: price-tick-draw 0.35s ease forwards;
}

@keyframes price-tick-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Подпись кнопки добавленной позиции: «В корзине» в покое, «Убрать» под
   курсором и в фокусе. Без второй подписи состояние читается как тупик — за
   удалением человек идёт в модалку, хотя кнопка и есть переключатель.
 *
 * Подписи лежат друг на друге и сменяются прозрачностью: `display` давал
 * рывок и дёргал ширину кнопки. Кнопка держит обе на одном месте, поэтому
 * размер при наведении не меняется. */
.price-list .services-card__button.button-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.price-list .price-btn__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease;
}

.price-list .services-card--added .services-card__button .price-btn__face {
  grid-area: 1 / 1;
}

.price-list .services-card--added .services-card__button {
  display: inline-grid;
  place-items: center;
}

.price-list .price-btn__undo {
  opacity: 0;
}

.price-list .services-card--added .services-card__button:hover .price-btn__state,
.price-list .services-card--added .services-card__button:focus-visible .price-btn__state {
  opacity: 0;
}

.price-list .services-card--added .services-card__button:hover .price-btn__undo,
.price-list .services-card--added .services-card__button:focus-visible .price-btn__undo {
  opacity: 1;
}

/* Цвет удаления — приглушённый кирпичный, не сигнальный красный: убрать анализ
   из корзины не авария, а обычное действие, и алое пятно в спокойном списке
   било по глазам. */
.price-list .services-card--added .services-card__button.button-green:hover,
.price-list .services-card--added .services-card__button.button-green:focus-visible {
  border-color: #B4796E;
  background: #FBF3F1;
  color: #9C5245;
}

/* Строка, в которую только что добавили позицию, коротко подсвечивается — глаз
   успевает заметить, что действие случилось именно здесь. */
@keyframes price-row-flash {
  from {
    background-color: var(--p-accent-soft);
  }
  to {
    background-color: transparent;
  }
}

.price-list .services-card--just-added {
  animation: price-row-flash 0.9s ease;
}

/* Появление отфильтрованного списка. Без этого переключение таба или раздела
   выглядит рывком: было сто строк — стало восемь. */
@keyframes price-fade-in {
  from {
    opacity: 0;
    transform: translateY(calc(6 * var(--width-multiplier)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.price-list .services-page__group:not([hidden]) {
  animation: price-fade-in 0.28s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .price-list *,
  .price-list *::before,
  .price-list *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Подсказка «как подготовиться».
 *
 * ДЕФЕКТ 1: открывалась только по :hover, то есть на телефоне никак, а
 * подготовка есть у 81 карточки из 114.
 * ДЕФЕКТ 2: `width: 435px; left: -180px` поверх `translateX(-50%)` уносил её за
 * край экрана — при ширине окна 1009 у 39 из 60 проверенных.
 * ───────────────────────────────────────────────────────────────────────── */
.price-list .services-card .tooltip {
  position: static;
}

.price-list .services-card .tooltip svg {
  width: calc(18 * var(--width-multiplier));
  height: calc(18 * var(--width-multiplier));
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.price-list .services-card .tooltip svg rect,
.price-list .services-card .tooltip svg path {
  stroke: var(--p-text-2);
  fill: var(--p-text-2);
}

.price-list .services-card .tooltip svg rect {
  fill: none;
}

.price-list .services-card .tooltip:hover svg,
.price-list .services-card .tooltip--open svg {
  opacity: 1;
}

.price-list .services-card .tooltip-text,
.price-list .services-page__card .tooltip-text {
  left: calc(12 * var(--width-multiplier));
  right: calc(12 * var(--width-multiplier));
  bottom: auto;
  top: calc(100% - 4 * var(--width-multiplier));
  width: auto;
  max-width: none;
  transform: translateY(calc(-4 * var(--width-multiplier)));
  white-space: normal;
  text-align: left;
  padding: calc(14 * var(--width-multiplier));
  border-radius: calc(10 * var(--width-multiplier));
  background: #2B3138;
  font-size: calc(14 * var(--width-multiplier));
  line-height: 1.45;
  box-shadow: 0 calc(10 * var(--width-multiplier)) calc(28 * var(--width-multiplier)) rgba(2, 3, 4, 0.2);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Правила подготовки редакторы ведут двумя способами: где-то маркированным
   списком в HTML, где-то — простым текстом, в котором пункты разделены
   переносами строк. Второй случай слипался в абзац (так было и до этой
   переделки): `white-space: normal` схлопывает переносы в пробелы. Включаем
   `pre-line`, но только там, где разметки нет, — иначе пробелы между тегами
   списка превратились бы в пустые строки. */
.price-list .services-card .tooltip-text {
  white-space: pre-line;
}

.price-list .services-card .tooltip-text:has(ul, ol, p) {
  white-space: normal;
}

.price-list .services-card .tooltip-text ul,
.price-list .services-card .tooltip-text ol {
  margin: 0;
  padding-left: calc(18 * var(--width-multiplier));
  list-style: disc outside;
}

.price-list .services-card .tooltip-text li {
  display: list-item;
}

.price-list .services-card .tooltip-text li + li {
  margin-top: calc(4 * var(--width-multiplier));
}

.price-list .services-card .tooltip-text p {
  margin: 0;
}

/* Редакторский HTML часто приносит пустые абзацы вокруг списка — они добавляли
   подсказке два пустых ряда. */
.price-list .services-card .tooltip-text p:empty {
  display: none;
}

.price-list .services-card .tooltip:hover .tooltip-text {
  visibility: hidden;
  opacity: 0;
}

.price-list .services-card .tooltip--open .tooltip-text,
.price-list .services-card .tooltip.tooltip--open:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  z-index: 20;
}

.price-list .services-card:has(.tooltip--open) {
  z-index: 21;
}

/* Розовые кляксы-декор. Перехватывали нажатия поверх крошек и панели, а на
   спокойной палитре остались единственным кричащим пятном. Приглушение до
   прозрачности не помогло: это два огромных SVG на пол-страницы, и бледными
   они превращаются в розовые диагонали поперёк списка. На странице-справочнике
   убираем; на лендинге они остаются — там им и место. */
.page-services .back {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Пустой результат поиска.
 * ───────────────────────────────────────────────────────────────────────── */
/* Пустой результат стоит ТАМ, где должны были появиться строки, — в колонке
   списка и по центру. Блоком сбоку он читался как примечание к странице, а не
   как ответ на запрос. */
.price-list .price-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--width-multiplier));
  padding: calc(64 * var(--width-multiplier)) calc(24 * var(--width-multiplier));
  text-align: center;
}

.price-list .price-empty[hidden] {
  display: none;
}

.price-list .price-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(76 * var(--width-multiplier));
  height: calc(76 * var(--width-multiplier));
  margin-bottom: calc(4 * var(--width-multiplier));
  border-radius: 50%;
  background: var(--p-surface);
  color: var(--p-text-2);
}

.price-list .price-empty__lead {
  margin: 0;
  font-size: calc(20 * var(--width-multiplier));
  font-weight: 600;
}

.price-list .price-empty__hint {
  max-width: calc(460 * var(--width-multiplier));
  margin: 0;
  font-size: calc(15 * var(--width-multiplier));
  line-height: 1.5;
  color: var(--p-text-2);
}

/* «Показать в чекапах» — не подсказка, а действие: поиск смотрит весь каталог,
   таб остаётся фильтром, и переключить его можно отсюда. */
.price-list .price-empty__jump {
  margin-top: calc(6 * var(--width-multiplier));
  padding: calc(10 * var(--width-multiplier)) calc(18 * var(--width-multiplier));
  border: 1px solid var(--p-accent-line);
  border-radius: calc(10 * var(--width-multiplier));
  background: transparent;
  font-family: inherit;
  font-size: calc(14 * var(--width-multiplier));
  font-weight: 500;
  color: var(--p-accent);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.price-list .price-empty__jump:hover {
  background: var(--p-accent-soft);
}

.price-list .price-empty__jump[hidden] {
  display: none;
}

/* Таб, в котором по запросу ничего нет, приглушаем: ноль рядом с названием
   иначе выглядит как поломка, а не как «ищите в соседнем». */
.price-list .price-tab--empty:not(.price-tab--active) {
  opacity: 0.45;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Модалка корзины.
 *
 * Было: каждая строка собрана из трёх отдельных серых плиток (название, цена,
 * корзина), между ними зазоры — список рассыпался на пятнадцать прямоугольников
 * и занимал вдвое больше места, чем несёт смысла. Итог при этом считался только
 * по позициям, а на оформлении к нему добавлялся забор биоматериала: человек
 * видел два разных числа подряд и шёл спрашивать, откуда разница.
 *
 * Стало: строки одного списка с разделителями, цена справа, удаление — тихая
 * иконка. Забор считается здесь же и показан отдельной строкой.
 * ───────────────────────────────────────────────────────────────────────── */
.page-services .modal-basket .modal__container {
  border-radius: calc(16 * var(--width-multiplier));
}

.page-services .modal-basket .modal__caption {
  text-align: left;
  font-size: calc(22 * var(--width-multiplier));
}

.page-services .modal-basket .modal__row {
  align-items: center;
  gap: calc(16 * var(--width-multiplier));
  padding: calc(14 * var(--width-multiplier)) 0;
  border-bottom: 1px solid rgba(2, 3, 4, 0.08);
}

.page-services .modal-basket .modal__row div {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.page-services .modal-basket .modal__row .name {
  display: block;
  font-size: calc(15 * var(--width-multiplier));
  line-height: 1.4;
}

.page-services .modal-basket .modal__row .price {
  font-size: calc(16 * var(--width-multiplier));
  font-weight: 600;
}

.page-services .modal-basket .modal__row .delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--width-multiplier));
  height: calc(36 * var(--width-multiplier));
  padding: 0;
  border-radius: calc(10 * var(--width-multiplier));
  color: #8F8F8F;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.page-services .modal-basket .modal__row .delete:hover {
  background: rgba(216, 81, 75, 0.10);
  color: #D8514B;
}

.page-services .modal-basket .modal__row .delete svg {
  min-width: 0;
  width: calc(18 * var(--width-multiplier));
  height: calc(18 * var(--width-multiplier));
}

/* Строка забора: та же сумма, что посчитает оформление. Подпись объясняет, за
   что платят, — иначе строка выглядит наценкой из ниоткуда. */
.page-services .modal-basket .price-modal__fee .name {
  color: #62707E;
}

.page-services .modal-basket .price-modal__note {
  display: block;
  margin-top: calc(2 * var(--width-multiplier));
  font-size: calc(13 * var(--width-multiplier));
  color: #8F8F8F;
}

.page-services .modal-basket .price-modal__fee .price {
  color: #62707E;
  font-weight: 500;
}

.page-services .modal-basket .modal__total {
  margin-top: calc(6 * var(--width-multiplier));
  padding: calc(16 * var(--width-multiplier)) calc(18 * var(--width-multiplier));
  border-bottom: 0;
  border-radius: calc(12 * var(--width-multiplier));
  background: #EAF2D2;
}

.page-services .modal-basket .modal__total .name {
  font-size: calc(16 * var(--width-multiplier));
  font-weight: 600;
}

.page-services .modal-basket .modal__total .price {
  font-size: calc(20 * var(--width-multiplier));
  font-weight: 700;
  color: #225E2E;
}

.page-services .modal-basket .modal__button {
  margin-top: calc(16 * var(--width-multiplier));
  border-radius: calc(12 * var(--width-multiplier));
}

/* End */


/* Start:/local/templates/darmed/components/bitrix/breadcrumb/template1/style.min.css?1778869528467*/
.bx-breadcrumb{margin:10px 0}.bx-breadcrumb i{color:#b5bdc2;line-height:13px;font-size:12px;vertical-align:middle;margin-right:5px}.bx-breadcrumb .bx-breadcrumb-item{float:left;margin-bottom:10px;white-space:nowrap;line-height:13px;vertical-align:middle;margin-right:10px}.bx-breadcrumb .bx-breadcrumb-item span{font-family:"Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;white-space:normal}.bx-breadcrumb .bx-breadcrumb-item a{border-bottom:0}
/* End */


/* Start:/local/templates/darmed/components/bitrix/news.list/price-list/style.css?1778869528150*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}

/* End */


/* Start:/local/templates/darmed/components/bitrix/news.list/cities-list/style.css?1778869528150*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}

/* End */
/* /local/templates/darmed/css/_price-list.css?179045463744173 */
/* /local/templates/darmed/components/bitrix/breadcrumb/template1/style.min.css?1778869528467 */
/* /local/templates/darmed/components/bitrix/news.list/price-list/style.css?1778869528150 */
/* /local/templates/darmed/components/bitrix/news.list/cities-list/style.css?1778869528150 */