/* ============================================================================
   Страница услуги: блоки, которых нет в t123 — хедер, описание, вопросы, CTA.
   Значения только из assets/tokens.css. Литералов цвета здесь быть не должно.
   Чередование фонов секций по стандарту: #fff → --air → #fff → --tint.
   ========================================================================== */

.dkH, .dkC, .dkQ, .dkT {
  font-family: var(--font-body);
  color: var(--body);
  padding: var(--section-y) 0;
}

.dkH__wrap, .dkC__wrap, .dkQ__wrap, .dkT__wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.dkH { background: #fff; }
.dkC { background: var(--air); }
.dkQ { background: var(--air); }
.dkT { background: var(--tint); }

/* --- Общие роли текста (§1.2) ------------------------------------------- */
.dkH__eyebrow, .dkQ__eyebrow, .dkT__eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 12px;
}

.dkH__h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--ink);
  margin: 0 0 12px;
}

.dkC__h2, .dkQ__h2, .dkT__h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h2);
  line-height: var(--lh-h2);
  color: var(--ink);
  margin: 0 0 12px;
}

.dkH__sub, .dkT__sub {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-sub);
  line-height: var(--lh-sub);
  color: var(--blue);
  margin: 0 0 16px;
}

.dkH__lead {
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  max-width: 640px;
  margin: 0 0 24px;
}

.dkC__h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-h3);
  line-height: var(--lh-h3);
  color: var(--ink);
  margin: 0 0 12px;
}

/* --- Факты в хедере ----------------------------------------------------- */
.dkH__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.dkH__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  background: var(--air);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.dkH__fact--key { background: var(--tint); border-color: var(--blue); }

.dkH__factLabel { font-size: var(--fz-meta); color: var(--muted); }

/* service_duration/service_anesthesia часто приходят целым предложением
   (1-3 шт.) — значение по умолчанию оформлено как обычный абзац.
   Числовой "чип" (800/20px/tabular-nums) остаётся только у --key (цена). */
.dkH__factVal {
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  color: var(--body);
  font-weight: 600;
}

.dkH__fact--key .dkH__factVal {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* --- Кнопки ------------------------------------------------------------- */
.dkH__cta, .dkT__btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.dkH__cta, .dkT__btn--main {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--sh1);
}

.dkT__btn--ghost {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
}

.dkH__cta:hover, .dkT__btn:hover { transform: translateY(-3px); box-shadow: var(--sh2); }

/* --- Быстрые ссылки ----------------------------------------------------- */
.dkH__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }

.dkH__navLink {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--air);
  border: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none;
}

.dkH__navLink:hover { border-color: var(--blue); background: var(--tint); }

/* --- Описание ----------------------------------------------------------- */
.dkC__text { font-size: var(--fz-body); line-height: var(--lh-body); max-width: 720px; }
.dkC__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin-top: 40px; }

.dkC__col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh1);
}

.dkC__list { margin: 0; padding: 0; list-style: none; }
.dkC__list li { position: relative; padding-left: 22px; margin-bottom: 8px; line-height: var(--lh-body); }

/* Ромб вместо галочки — единственный маркёр списка в системе (§1.4). */
.dkC__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--cyan);
}

.dkC__list--contra li::before { background: var(--muted); }

.dkC__note { font-size: var(--fz-meta); color: var(--muted); margin: 16px 0 0; }

.dkC__steps { counter-reset: dkstep; list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }

.dkC__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 4px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 20px;
}

.dkC__stepNum {
  grid-row: span 2;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.dkC__stepTitle { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.dkC__stepText { font-size: var(--fz-meta); line-height: var(--lh-body); }

/* --- Вопросы и ответы --------------------------------------------------- */
.dkQ__list { display: grid; gap: 8px; margin-top: 24px; }

.dkQ__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }

.dkQ__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.dkQ__ic { position: relative; width: 12px; height: 12px; flex: 0 0 12px; }
.dkQ__ic::before, .dkQ__ic::after {
  content: "";
  position: absolute;
  background: var(--cyan);
  transition: transform var(--dur) var(--ease);
}
.dkQ__ic::before { inset: 5px 0; height: 2px; }
.dkQ__ic::after  { inset: 0 5px; width: 2px; }

.dkQ__panel { padding: 0 20px 18px; }
.dkQ__a { margin: 0; line-height: var(--lh-body); }

/* --- CTA ---------------------------------------------------------------- */
.dkT { text-align: center; }
.dkT__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 24px 0 16px; }
.dkT__note { font-size: var(--fz-meta); color: var(--muted); max-width: 640px; margin: 0 auto; }

@media (max-width: 640px) {
  .dkC__cols { grid-template-columns: 1fr; }
  .dkH__facts { flex-direction: column; }
}

/* ============================================================================
   @override — всё ниже сознательно перекрывает стили, перенесённые из макетов
   t123 (service.css). Мы не правим чужой файл, а переопределяем поверх него;
   самопроверка знает про этот маркер и не считает такие дубли ошибкой.
   ==========================================================================

   Блоки v2, шаг 1: интерактив без JS.
   Аккордеоны — нативный <details>, фильтр отзывов — радиокнопки и :has().
   Шаг 2: container queries — карточка подстраивается под свой контейнер,
   а не под ширину экрана.
   ========================================================================== */

/* --- Нативные аккордеоны ------------------------------------------------- */
.dkP__item > summary,
.dkQ__item > summary { list-style: none; cursor: pointer; }

.dkP__item > summary::-webkit-details-marker,
.dkQ__item > summary::-webkit-details-marker { display: none; }

.dkP__item > summary:focus-visible,
.dkQ__item > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Крест превращается в минус, когда панель открыта. */
.dkQ__item[open] .dkQ__ic::after { transform: scaleY(0); }
.dkP__item[open] .dkP__ic { transform: rotate(45deg); }
.dkP__ic { transition: transform var(--dur) var(--ease); }

/* Плавное раскрытие там, где браузер умеет анимировать высоту до auto.
   Где не умеет — раскрывается мгновенно, и это нормально. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .dkP__item, .dkQ__item { transition: height var(--dur) var(--ease); }
  .dkP__item::details-content,
  .dkQ__item::details-content {
    height: 0;
    overflow: hidden;
    transition: height var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
  }
  .dkP__item[open]::details-content,
  .dkQ__item[open]::details-content { height: auto; }
}

/* --- Фильтр отзывов без JS ---------------------------------------------- */
.dkR__filters { border: 0; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* Заголовок группы нужен скринридеру, но не нужен глазу. */
.dkR__legend {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.dkR__radio { position: absolute; opacity: 0; pointer-events: none; }

.dkR__chip {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.dkR__chip:hover { border-color: var(--blue); }
.dkR__radio:checked + .dkR__chip { background: var(--tint); border-color: var(--blue); color: var(--navy); }
.dkR__radio:focus-visible + .dkR__chip { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* --- Container queries: карточка отвечает за себя сама ------------------- */
.dkR__grid, .dkA__grid { container-type: inline-size; }

@container (max-width: 520px) {
  .dkR__top { flex-wrap: wrap; }
  .dkA__card { grid-template-columns: 1fr; }
}

/* --- Не рендерим то, что за экраном ------------------------------------- */
.dkR, .dkP__acc {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* --- Состав услуги под строкой прайса ----------------------------------- */
.dkP__what { margin: 4px 0 14px; padding: 0 0 0 18px; list-style: none; }
.dkP__what li {
  position: relative;
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 2px;
}
.dkP__what li::before {
  content: "";
  position: absolute;
  left: -12px; top: .55em;
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--line);
}
/* «Не входит» не прячем мелким шрифтом — это работает против доверия. */
.dkP__what li:last-child { color: var(--body); }
.dkP__aList li { line-height: 1.5; }

/* --- Крошки на самостоятельной странице цен (page-prays-list.php) -------
   На главной и на странице услуги .dkP — секция без своих крошек, здесь же
   .dkP используется как целая страница, поэтому крошки нужны. Класс свой,
   .dkP__crumbs, а не переиспользованный .dkPg__crumbs: тот стилизован под
   родителя .dkPg (site.css), и вне его отдаёт ссылки без цвета — та же
   причина, по которой у .dkAb, .dkK, .dkD, .dkR--page есть свои __crumbs. */
.dkP__crumbs { font-size: var(--fz-meta); color: var(--muted); margin-bottom: 16px; }
.dkP .dkP__crumbs a { color: var(--navy); text-decoration: none; }
.dkP .dkP__crumbs a:hover { text-decoration: underline; }

/* ============================================================================
   Доработка по диагностике 01.08.2026. Порядок подключения делает этот файл
   последним, поэтому правила ниже перекрывают перенесённые из t123.
   ========================================================================== */

/* --- Ритм: единый вертикальный шаг и чередование фонов (§5.1) ------------ */
.dkH, .dkC, .dkP, .dkR, .dkA, .dkQ, .dkT { padding: var(--section-y) 0; }

.dkH { background: #fff; }
.dkC { background: var(--air); }
.dkP { background: #fff; }
.dkR { background: var(--tint); }
.dkA { background: #fff; }
.dkQ { background: var(--air); }
.dkT { background: var(--tint); }

/* Якоря: у нелипкой шапки запас не нужен, но появится она — не поедет. */
[id^="dk-"] { scroll-margin-top: 24px; }

/* --- Контраст: белый текст на голубом градиенте давал 2:1 ---------------- */
.dkH__cta,
.dkT__btn--main,
.dkP__aBtn,
.dkP__btn--main,
.dkA__cta,
.dkR__btn {
  background: var(--navy);
  background-image: none;
  color: #fff;
  border: 1px solid var(--navy);
  box-shadow: var(--sh1);
}

.dkH__cta:hover,
.dkT__btn--main:hover,
.dkP__aBtn:hover,
.dkP__btn--main:hover,
.dkA__cta:hover,
.dkR__btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Плашка-герой тёмная: на ней кнопка наоборот светлая. */
.dkP__anchor--hero .dkP__aBtn { background: #fff; color: var(--navy); border-color: #fff; }
.dkP__anchor--hero .dkP__aBtn:hover { background: var(--tint); color: var(--ink); border-color: var(--tint); }

/* Подзаголовки: --blue на белом = 2.03:1. */
.dkH__sub, .dkT__sub, .dkP__sub, .dkA__sub, .dkR__sub { color: var(--navy); }

/* Обязательный дисклеймер и сноски не набираем цветом, который не читается. */
.dkT__note, .dkC__note, .dkP__note, .dkA__note, .dkR__note { color: var(--body); }

/* Ярлык плашки: белый на --cyan давал 2.31:1. */
.dkP__flag { background: var(--navy); color: #fff; }

/* Фокус виден: --cyan на белом — 2.31:1, ниже нормы для индикатора. */
:is(.dkH__cta, .dkH__navLink, .dkT__btn, .dkA__cta, .dkA__proof, .dkP__aBtn, .dkP__btn,
    .dkR__more, .dkP__head, .dkQ__head, .dkR__toggle):focus-visible,
.dkR__radio:focus-visible + .dkR__chip {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* --- Хедер с изображением ------------------------------------------------ */
.dkH--media .dkH__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--grid-gap);
  /* start, не center — при длинной левой колонке (2-3 тарифа + факты)
     картинка иначе "плавает" по центру строки, оторвавшись от H1. */
  align-items: start;
}

.dkH__media { position: relative; }

.dkH__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-xl);
  box-shadow: var(--sh2);
}

/* --- Отзывы: карточки одной высоты -------------------------------------- */
.dkR__grid { grid-auto-rows: 1fr; align-items: stretch; }

.dkR__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dkR__spacer { flex: 1 1 auto; }

/* Длинный текст обрезаем, а не даём ему рвать сетку. */
.dkR__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

.dkR__exp { margin-top: 8px; }
.dkR__exp > summary { list-style: none; cursor: pointer; }
.dkR__exp > summary::-webkit-details-marker { display: none; }

.dkR__toggle {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--navy);
  text-decoration: underline;
}

.dkR__toggleClose { display: none; }
.dkR__exp[open] .dkR__toggleOpen { display: none; }
.dkR__exp[open] .dkR__toggleClose { display: inline; }

/* Раскрытие снимает обрезку у текста той же карточки. */
.dkR__card:has(.dkR__exp[open]) .dkR__text {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* Раскрытая карточка перестаёт быть заложницей общей высоты строки. */
.dkR__grid:has(.dkR__exp[open]) { grid-auto-rows: auto; }

/* --- Только для скринридера --------------------------------------------- */
.dkR__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Мобильный: цели нажатия ≥44px -------------------------------------- */
@media (max-width: 640px) {
  .dkH--media .dkH__wrap { grid-template-columns: 1fr; }
  .dkH__media { order: -1; }
  .dkH__img { aspect-ratio: 3 / 2; }

  .dkR__chip, .dkH__navLink { padding-block: 14px; }
  .dkR__more, .dkR__toggle { display: inline-block; padding-block: 10px; }
  .dkP__aBtn, .dkA__cta, .dkT__btn, .dkH__cta { padding-block: 18px; }
}

/* --- Уважаем «уменьшить движение» во всех блоках ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .dkH *, .dkC *, .dkP *, .dkR *, .dkA *, .dkQ *, .dkT * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .dkP__anchor:hover, .dkA__card:hover, .dkR__card:hover,
  .dkH__cta:hover, .dkT__btn:hover { transform: none !important; }
}

/* --- Сетка отзывов: колонки → грид ---------------------------------------
   В макете t123 стоял `columns:3` — многоколоночный поток. Он раскладывает
   карточки по высоте текста, поэтому колонки заканчиваются на разных уровнях,
   а под короткой остаётся дыра. Гриду это не свойственно, и высота строки
   выравнивается сама. */
.dkR__grid {
  columns: auto;
  column-gap: normal;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.dkR__card { margin: 0; background: #fff; }
.dkR__card:hover { background: #fff; }

@media (max-width: 1199px) { .dkR__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .dkR__grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }

/* ============================================================================
   Правки по замечаниям владельца 01.08.2026 (вторая итерация).
   ========================================================================== */

/* --- 1. Заголовок «Как проходит лечение» прилипал к карточкам выше -------- */
.dkC__h2 { margin-top: 48px; }
.dkC__cols + .dkC__h2 { margin-top: 64px; }
.dkC__text + .dkC__cols { margin-top: 32px; }

/* --- 5. Акцентные кнопки: фон --accent, текст белый --------------------- */
.dkH__cta,
.dkT__btn--main,
.dkP__aBtn,
.dkP__btn--main,
.dkA__cta,
.dkR__btn {
  background: var(--accent);
  background-image: none;
  color: #fff;
  border: 1px solid var(--accent);
}

.dkH__cta:hover,
.dkT__btn--main:hover,
.dkP__aBtn:hover,
.dkP__btn--main:hover,
.dkA__cta:hover,
.dkR__btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* На тёмной плашке акцент читается, оставляем его же. */
.dkP__anchor--hero .dkP__aBtn { background: var(--accent); color: #fff; border-color: var(--accent); }
.dkP__anchor--hero .dkP__aBtn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* --- 3. Блок отзывов: воздух между заголовком, фильтрами и карточками ---- */
.dkR__sub { margin-bottom: 32px; }

.dkR__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 40px;
  border: 0;
  padding: 0;
}

.dkR__grid { margin-top: 8px; }

/* Три раскрывающиеся группы вместо стены чипов. */
.dkR__fgroup { position: relative; }

.dkR__fhead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  white-space: nowrap;
}

.dkR__fhead::-webkit-details-marker { display: none; }
.dkR__fhead::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.dkR__fgroup[open] .dkR__fhead::after { transform: rotate(-135deg) translate(-2px, -2px); }

.dkR__fcount {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Выбранное внутри группы видно по самой группе — иначе, свернув её,
   пользователь не понимает, какой фильтр сейчас активен. */
.dkR__fgroup:has(.dkR__radio:checked) > .dkR__fhead {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.dkR__fgroup:has(.dkR__radio:checked) .dkR__fcount { color: rgba(255, 255, 255, .7); }

.dkR__flist {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-width: min(420px, 90vw);
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh2);
}

.dkR__chip--all { padding: 12px 18px; }

/* --- 4. Чип врача в карточке отзыва: ровные отступы ---------------------- */
.dkR__svc {
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--air);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: normal;
}

@media (max-width: 640px) {
  .dkR__flist { position: static; max-width: none; box-shadow: none; margin-top: 8px; }
  .dkC__h2 { margin-top: 32px; }
  .dkC__cols + .dkC__h2 { margin-top: 40px; }
}

/* --- Цвет текста кнопок против стилей Elementor -------------------------
   Kit Elementor красит ссылки правилом вида `.elementor-kit-N a` — это класс
   плюс тег, специфичнее нашего одиночного класса, поэтому белый текст кнопок
   молча заменялся голубым из глобальной палитры конструктора. Поднимаем
   специфичность до двух классов: секция + элемент. Без !important — он бы
   так же молча ломался при следующем конфликте, только уже в нашу сторону.
   Правило уйдёт вместе с Elementor на этапе 4. */
.dkH .dkH__cta,
.dkT .dkT__btn--main,
.dkP .dkP__aBtn,
.dkP .dkP__btn--main,
.dkA .dkA__cta,
.dkR .dkR__btn,
.dkH .dkH__cta:hover,
.dkT .dkT__btn--main:hover,
.dkP .dkP__aBtn:hover,
.dkP .dkP__btn--main:hover,
.dkA .dkA__cta:hover,
.dkR .dkR__btn:hover { color: #fff; }

.dkT .dkT__btn--ghost,
.dkP .dkP__btn--ghost { color: var(--navy); }

.dkH .dkH__navLink { color: var(--navy); }
.dkR .dkR__more,
.dkR .dkR__toggle { color: var(--navy); }
.dkA .dkA__proof { color: var(--navy); }

/* ============================================================================
   Блоки v2, вторая половина плана (del-kam-blocks-v2.md, пункты 4–7).
   Сводка отзывов · раскрытие карточки врача · этапы лентой · вилка цены
   в шапке · липкая полоска записи на мобильном.
   Всё ниже — после маркера @override, перекрытия t123 здесь ожидаемы.
   ========================================================================== */



/* --- Врачи: раскрытие карточки на месте ---------------------------------- */
.dkA__more { margin: 16px 0 0; }

.dkA__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--navy);
  padding: 6px 0;
}

.dkA__more > summary::-webkit-details-marker { display: none; }

.dkA__more > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}

.dkA__more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dkA__more > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.dkA__moreClose { display: none; }
.dkA__more[open] .dkA__moreOpen { display: none; }
.dkA__more[open] .dkA__moreClose { display: inline; }

.dkA__moreBody {
  margin-top: 8px;
  padding: 16px 18px;
  background: var(--air);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.dkA__moreTitle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 8px;
}

.dkA__moreList + .dkA__moreTitle { margin-top: 16px; }

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

.dkA__moreList li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--body);
}

.dkA__moreList li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--cyan);
}

.dkA__moreList--edu li::before { background: var(--line); }

/* Раскрытие снимает выравнивание высот: иначе одна открытая карточка
   растягивает всю строку сетки. */
.dkA__grid:has(.dkA__more[open]) { align-items: start; }

/* --- Хедер: двухуровневая вилка цены ------------------------------------ */
.dkH__price {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px;
  margin: 0 0 16px;
  max-width: 640px;
}

/* Ровно 3 тарифа (Гнатология, Хирургия) — форсируем 3 равные колонки: auto-fit
   с порогом 220px в max-width:640px физически даёт только 2 колонки, третья
   проваливается одна в новую строку. При 4+ тарифах это правило не встречается
   ни на одной из 7 услуг — если появится, потребует отдельного порога. */
.dkH__price:has(.dkH__tier:nth-child(3)) {
  grid-template-columns: repeat(3, 1fr);
}

.dkH__tier {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.dkH__tier:first-child { border-color: var(--blue); }

.dkH__tierLabel {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-meta);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  /* Лейблы разной длины (1 строка vs 2) иначе сдвигают цифру цены на разную
     высоту в соседних карточках одного ряда. */
  min-height: 2.6em;
}

.dkH__tierVal {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* В узкой колонке (3 тарифа в ряд) 34px не влезает в одну строку — меньше
   кегль вместо переноса "₽" на вторую строку. */
.dkH__price:has(.dkH__tier:nth-child(3)) .dkH__tierVal {
  font-size: clamp(20px, 2.2vw, 26px);
}

.dkH__tierFrom {
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
  margin-right: 6px;
}

.dkH__tierUnit { font-size: var(--fz-meta); color: var(--body); }
.dkH__tierNote { font-size: var(--fz-meta); line-height: 1.45; color: var(--body); }

/* --- Длинные факты (duration/anesthesia) сворачиваются в <details>, чтобы не
   раздувать высоту hero на страницах с многопредложенческим текстом (см.
   mb_strlen(...) > 80 в hero.php). Идиома та же, что уже используется у
   отзывов (.dkR__exp/.dkR__toggle*) — новые имена классов, тот же механизм. */
.dkH__more { margin: 0; }
.dkH__more__summary { cursor: pointer; list-style: none; }
.dkH__more__summary::-webkit-details-marker { display: none; }

.dkH__factVal--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.dkH__more[open] .dkH__factVal--clamp {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.dkH__more__toggle {
  display: block;
  margin-top: 4px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-meta);
  color: var(--navy);
  text-decoration: underline;
}

.dkH__more__close { display: none; }
.dkH__more[open] .dkH__more__open { display: none; }
.dkH__more[open] .dkH__more__close { display: inline; }

/* --- Этапы: таймлайн на десктопе ---------------------------------------- */
.dkC__steps {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.dkC__step {
  position: relative;
  display: block;
  padding: 18px 22px 18px 76px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.dkC__stepNum {
  position: absolute;
  left: 18px;
  top: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--tint);
  border: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Линия между кружками — то, что делает список таймлайном. */
.dkC__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 37px;
  top: 58px;
  bottom: -13px;
  width: 2px;
  background: var(--line);
}

.dkC__stepHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 4px;
}

.dkC__stepTitle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.dkC__stepTerm {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--air);
  border: 1px solid var(--line);
  color: var(--navy);
  white-space: nowrap;
}

.dkC__stepText {
  display: block;
  font-size: var(--fz-meta);
  line-height: var(--lh-body);
  color: var(--body);
}

/* --- Липкая полоска записи (только мобильный) ---------------------------- */
.dkS { display: none; }

.dkS__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh2);
}

.dkS__price {
  flex: 1;
  min-width: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.dkS__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--body);
}

.dkS .dkS__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  text-decoration: none;
}

.dkS .dkS__btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.dkS .dkS__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

@media (max-width: 640px) {
  /* Полоска приклеена к низу, пока открыт отрезок «цены → вопросы»,
     и уходит сама перед главным призывом. Никакого JS. */
  .dkS {
    display: block;
    position: sticky;
    bottom: 8px;
    z-index: 30;
    margin: 0 var(--gutter) 8px;
  }

  /* Этапы: горизонтальная лента с прокруткой. Шесть карточек столбиком
     на телефоне — это экран с половиной страницы, который пролистывают не читая. */
  .dkC__steps {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 0 8px;
    scrollbar-width: none;
  }

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

  .dkC__step {
    flex: 0 0 78%;
    scroll-snap-align: start;
    padding: 18px 20px;
  }

  .dkC__step::before { display: none; }

  .dkC__stepNum {
    position: static;
    margin-bottom: 10px;
  }

}

/* --- Оговорка к блоку цен ------------------------------------------------ */
.dkP__extra {
  margin: 28px 0 0;
  padding: 18px 22px;
  background: var(--air);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-md);
}

.dkP__extraLine {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: var(--lh-body);
  color: var(--body);
}

.dkP__extraLine:last-child { margin-bottom: 0; }

/* ============================================================================
   Правки по замерам на мобильном (375×812), 01.08.2026.
   Всё ниже — не «на всякий случай», а то, что показал замер в браузере.
   ========================================================================== */

/* Жёсткий минимум в auto-fit-сетке исправлен там, где объявлен (строки выше):
   `minmax(220px, 1fr)` не сжимается ниже 220px, и на экране 375 вилка цены
   разложилась в два столбца по 220, растянув шапку до 452px — страница ехала
   по горизонтали. Перекрывать это правилом ниже было нельзя: рядом с живым
   осталось бы мёртвое объявление, а на них проект уже обжигался. */

/* Элемент грида по умолчанию не сжимается меньше своего содержимого.
   Без этого широкий потомок так же растянет колонку. */
.dkH__main, .dkH__media { min-width: 0; }

@media (max-width: 640px) {
  /* Цели нажатия: замер показал 39px у чипов фильтра, 36px у «Читать целиком»
     и 28px у «Подробнее о враче». Норма — 44px, и правило padding-block:14px
     выше по файлу до них не доходило. */
  .dkR__chip,
  .dkR__fhead {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .dkR .dkR__more,
  .dkR .dkR__toggle,
  .dkA__more > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Блоки t123 (.dkP/.dkA/.dkR) объявляют box-sizing сами, а наши — нет:
   их держало правило `*{box-sizing:border-box}` из hello-elementor. На этапе 5
   родительская тема уйдёт вместе с Elementor, и шапка вопроса с `width:100%`
   и боковыми padding вылезет за карточку. Замер в реплике без чужого CSS это
   и показал: .dkQ__head торчал на 39px. Объявляем сами, пока не забылось. */
:is(.dkH, .dkC, .dkQ, .dkT, .dkS),
:is(.dkH, .dkC, .dkQ, .dkT, .dkS) *,
:is(.dkH, .dkC, .dkQ, .dkT, .dkS) *::before,
:is(.dkH, .dkC, .dkQ, .dkT, .dkS) *::after { box-sizing: border-box; }

/* --- Карточка отзыва: кто написал и где ---------------------------------
   Имя автора и название площадки стояли двумя строками одного начертания,
   и «Яндекс Карты» читалось как вторая строка имени. Автор остаётся именем,
   площадка становится ярлыком с подписью «отзыв с», дата — мелким текстом. */
.dkR__author { font-size: 16px; line-height: 1.25; }

.dkR__srcline {
  margin-top: 2px;
  font-size: var(--fz-meta);
  color: var(--muted);
}

.dkR__plat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  /* Карточка отзыва белая, поэтому белый ярлык держался бы на одной рамке. */
  background: var(--air);
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
}

.dkR__platLabel {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
}

.dkR__platName {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
}