/* ТОМОКО — слой компонентов.
   Сведён 27.08.2026 из UI-kit файла Figma U5M0ihzdUI9upBTwUAHZ42.
   Спорные размеры не подбирались, а замерены на компонентах напрямую:
   кнопка 49px / паддинг 16-32, малая 33px / 9-14-9-16, чип 27px / 7-14,
   поле 52px / радиус 12 / обводка 1px, обложка радиус 20.
   Подключать после tokens.css и base.css. */

/* ═══ Кнопки ═══════════════════════════════════════════
   Три размера — не три компонента. В макете встречаются
   58px (герой), 49px (основная линейка) и 33px (поверх фото
   и в карточках). Вариант задаёт цвет, размер задаёт геометрию. */

.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);          /* 16 / 32 → высота 49 */
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: var(--t-label-14-size);
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-label-14-ls);
  line-height: 1.2;                        /* в макете «normal», не токен 1.59 */
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.tk-btn--lg { padding: 18px var(--s-10); }                    /* высота 58, герой */
.tk-btn--sm {
  padding: 9px 14px 9px var(--s-4);                           /* высота 33 */
  font-size: var(--t-label-12-size);
  letter-spacing: var(--t-label-12-ls);
}

/* Варианты по цвету */
.tk-btn--primary { background: var(--c-brand-green); color: var(--c-paper); }
.tk-btn--primary:hover  { background: var(--c-green-deep); }
.tk-btn--primary:active { background: var(--c-forest); }

.tk-btn--accent { background: var(--c-orange); color: var(--c-ink-green); }
.tk-btn--accent:hover  { background: color-mix(in srgb, var(--c-orange) 88%, var(--c-ink-green)); }
.tk-btn--accent:active { background: color-mix(in srgb, var(--c-orange) 78%, var(--c-ink-green)); }

.tk-btn--light { background: var(--c-paper); color: var(--c-ink-green); }
.tk-btn--light:hover  { background: var(--c-mist); }
.tk-btn--light:active { background: var(--c-mist); color: var(--c-brand-green); }
.tk-btn--light:focus-visible { outline-color: var(--c-paper); }

.tk-btn--mist { background: var(--c-mist); color: var(--c-ink-green); }
.tk-btn--mist:hover { background: var(--c-hairline); }

/* Обводочная. Обводка внутренняя (1.5px), поэтому вычитается
   из паддингов — иначе кнопка станет на 3px выше соседних. */
.tk-btn--secondary {
  background: transparent;
  color: var(--c-ink-green);
  border: var(--bw-outline) solid var(--c-hairline);
  padding: calc(var(--s-4) - var(--bw-outline)) calc(var(--s-8) - var(--bw-outline));
}
.tk-btn--secondary.tk-btn--lg { padding: calc(18px - var(--bw-outline)) calc(var(--s-10) - var(--bw-outline)); }
.tk-btn--secondary:hover  { border-color: var(--c-brand-green); color: var(--c-brand-green); }
.tk-btn--secondary:active { border-color: var(--c-green-deep); color: var(--c-green-deep); background: var(--c-mist); }

/* Поверх фотографии: полупрозрачная подложка и белая обводка.
   Прозрачности в палитре нет — значения замерены на макете. */
.tk-btn--on-photo {
  background: var(--c-paper-14);
  border: 1px solid var(--c-paper-75);
  color: var(--c-paper);
  padding: 8px 13px 8px calc(var(--s-4) - 1px);
}
.tk-btn--on-photo:hover  { background: color-mix(in srgb, var(--c-paper) 24%, transparent); border-color: var(--c-paper); }
.tk-btn--on-photo:active { background: var(--c-paper); color: var(--c-ink-green); }
.tk-btn--on-photo:focus-visible { outline-color: var(--c-paper); }

.tk-btn:disabled,
.tk-btn[aria-disabled="true"] {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
  border-color: transparent;
  cursor: not-allowed;
}

/* ═══ Чипы и метки ════════════════════════════════════
   Высота 27, паддинг 7/14. Не кнопки — не кликаются. */

.tk-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: var(--t-label-12-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.tk-chip--accent { background: var(--c-orange); color: var(--c-ink-green); }
.tk-chip--paper  { background: var(--c-paper);  color: var(--c-ink-green); }
.tk-chip--mist   { background: var(--c-mist);   color: var(--c-ink-green); }
.tk-chip--green  { background: var(--c-brand-green); color: var(--c-paper); }

/* ═══ Поля формы ══════════════════════════════════════
   Высота 52, радиус 12, обводка 1px --c-field-border. */

.tk-field { display: flex; flex-direction: column; gap: var(--s-2); }

.tk-field__label {
  font-size: var(--t-label-12-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  text-transform: uppercase;
  color: var(--c-fog);
}

.tk-field__input,
.tk-field__area,
.tk-field__select {
  width: 100%;
  padding: var(--s-4) 18px var(--s-4) var(--s-5);
  background: var(--c-paper);
  border: 1px solid var(--c-field-border);
  border-radius: var(--r-input);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--c-ink-green);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tk-field__area { min-height: 120px; resize: vertical; }

.tk-field__input::placeholder,
.tk-field__area::placeholder { color: var(--c-ash); }

.tk-field__input:focus,
.tk-field__area:focus,
.tk-field__select:focus {
  outline: none;
  border-color: var(--c-brand-green);
  box-shadow: inset 0 0 0 1px var(--c-brand-green);
}

.tk-field--error .tk-field__input,
.tk-field--error .tk-field__area { border-color: var(--c-error); }
.tk-field__error {
  font-size: var(--t-label-12-size);
  color: var(--c-error);
}

.tk-field__input:disabled,
.tk-field__area:disabled {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
  cursor: not-allowed;
}

/* Согласие на обработку персональных данных — обязательный чекбокс.
   Без него форму записи в клинику публиковать нельзя. */
/* Звёздочка у обязательных полей и подпись «необязательно» у сообщения:
   без пометок человек не знает, что можно пропустить, и бросает форму
   на самом длинном поле. Звёздочка спрятана от скринридеров — им про
   обязательность говорит атрибут required у самого поля. */
.tk-field__req {
  color: var(--c-error);
  margin-left: 2px;
}
.tk-field__opt {
  margin-left: var(--s-2);
  color: var(--c-fog);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.tk-field__input--area {
  /* Три строки текста, не больше: поле растягивается само, если человеку
     нужно написать длиннее. Пустая высокая рамка только удлиняет форму. */
  min-height: 78px;
  resize: vertical;
  font: inherit;
}

/* Приписка про код ОМС под формой: важная, но служебная — поэтому мельче
   основного текста и на подложке, чтобы не спорила с полями за внимание. */
.tk-form__note {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-small);
  background: var(--c-mist);
  color: var(--c-fog);
}
.tk-form__note strong { color: var(--c-ink-green); }

.tk-check { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }
.tk-check input {
  flex: none;
  width: 20px; height: 20px; margin: 0;
  accent-color: var(--c-brand-green);
  cursor: pointer;
}
.tk-check__text { font-size: var(--t-label-12-size); line-height: 1.5; color: var(--c-fog); }
.tk-check__text a { color: var(--c-brand-green); text-decoration: underline; }

/* ═══ Форма на зелёной поверхности ════════════════════
   Поля формы записи стоят в блоке «Начните с диагностики» — он залит
   фирменным зелёным. Компонентные цвета рассчитаны на светлый фон:
   подписи полей и текст согласия приходили серым #555f59 по зелёному,
   а ссылка на политику — зелёным по зелёному, то есть не видна вовсе.
   На цветной поверхности весь текст формы белый.
   Правило общее, не только мобильное: на десктопе было то же самое. */
.tk-final__cta .tk-field__label,
.tk-section--green .tk-field__label,
.tk-section--forest .tk-field__label {
  color: var(--c-paper);
}

.tk-final__cta .tk-check__text,
.tk-section--green .tk-check__text,
.tk-section--forest .tk-check__text {
  color: var(--c-paper);
}

/* Ссылку оставляем подчёркнутой — на одноцветном фоне подчёркивание
   единственное, что отличает её от обычного текста. */
.tk-final__cta .tk-check__text a,
.tk-section--green .tk-check__text a,
.tk-section--forest .tk-check__text a {
  color: var(--c-paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Подсказка под полем и текст ошибки — там же и по той же причине. */
.tk-final__cta .tk-field__hint,
.tk-section--green .tk-field__hint { color: var(--c-paper-75); }
.tk-final__cta .tk-field__error,
.tk-section--green .tk-field__error { color: var(--c-paper); font-weight: var(--w-semibold); }

/* Лид блока: был белым на 66%, это 2.9:1 на зелёном. Поднимаем до 85%,
   чтобы прошёл AA и при этом остался тише заголовка. */
.tk-final__cta .tk-final__cta-text .c-muted { color: var(--c-paper-85); }

/* ═══ Окно записи ═════════════════════════════════════
   Нативный <dialog>: модальность, ловушку фокуса, Esc и затемнение
   даёт браузер. Своего оверлея и своего перехвата фокуса не пишем —
   ручные реализации почти всегда теряют то или другое. */
.tk-modal {
  /* Было 440. Расширено 04.09.2026, когда в форму добавились сообщение
     и приписка про ОМС: на 440 заголовок ломался на две строки, лид на две,
     приписка на три — и панель переставала помещаться в экран ноутбука,
     появлялся ползунок. На 560 всё это встаёт в строку короче и форма
     влезает целиком. Шире не делаем: строка длиннее ~70 знаков читается
     тяжелее, а поля растягивать незачем. */
  width: min(560px, calc(100vw - var(--s-8)));
  /* Поле по краю 24, а не 40: ограничение бьёт только на низком экране,
     и там каждый пиксель решает, поедет ползунок или нет. На высоком
     окно всё равно короче предела и центрируется автоматическими полями.
     Тот же предел стоит у панели ниже — ограничивает именно она. */
  max-height: calc(100dvh - var(--s-6));
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-paper);
  color: var(--c-ink-green);
  overflow: visible;
}
.tk-modal::backdrop {
  background: color-mix(in srgb, var(--c-ink-green) 62%, transparent);
}
/* Просветы и поля уплотнены 04.09.2026 вместе с расширением окна: форма
   выросла на поле сообщения и приписку про ОМС, и на ноутбуке перестала
   помещаться. Просветы между блоками формы 12 вместо 16 — при семи блоках
   это 24 лишних пикселя, а на глаз разницы нет. */
.tk-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-6) var(--s-6);
  max-height: calc(100dvh - var(--s-6));
  overflow-y: auto;
}
.tk-modal__title { margin: 0; padding-right: var(--s-8); }
.tk-modal__lead  { margin: 0; }

/* Строка «Врач — Раднаева Оюна Евгеньевна» под заголовком окна: пациент
   видит, к кому записывается, до того как оставит телефон. Плашкой, а не
   обычным абзацем, — иначе сливается с пояснением ниже. На страницах без
   контекста сниппет tkZapis не отдаёт её вовсе, и лишнего отступа не будет. */
.tk-modal__detail {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-small);
  background: var(--c-mist);
  color: var(--c-ink-green);
  font-weight: 600;
}
.tk-modal__phone { margin: 0; }
.tk-modal__phone a { color: var(--c-green-deep); }

.tk-modal__close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: grid;
  place-items: center;
  width: 44px;               /* тап-цель, значок внутри меньше */
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--c-fog);
  transition: color .16s ease, background-color .16s ease;
}
.tk-modal__close:hover { color: var(--c-ink-green); background: var(--c-mist); }

/* Окно открывается без резкости, но только если человек не просил
   убрать движение. */
@media (prefers-reduced-motion: no-preference) {
  .tk-modal[open] { animation: tk-modal-poyavlenie .18s ease-out; }
  @keyframes tk-modal-poyavlenie {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Пока окно открыто, страница под ним не прокручивается. */
body.is-modal-open { overflow: hidden; }

@media (max-width: 680px) {
  /* На телефоне окну отдаём почти весь экран: поля 12 вместо 40 сверху
     и снизу. Форма записи с сообщением и припиской длинная, и эти 28
     пикселей — ровно разница между «влезло» и «поехал ползунок». */
  .tk-modal {
    width: calc(100vw - var(--s-6));
    max-height: calc(100dvh - var(--s-6));
  }
  .tk-modal__panel { padding: var(--s-5); }
}

/* ═══ Вкладки ═════════════════════════════════════════ */

.tk-tabs {
  display: flex;
  gap: var(--s-2);
  list-style: none; margin: 0; padding: 0;
}
.tk-tab {
  padding: calc(13px - var(--bw-outline)) calc(var(--s-6) - var(--bw-outline));
  border: var(--bw-outline) solid var(--c-hairline);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--t-label-12-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  text-transform: uppercase;
  color: var(--c-fog);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.tk-tab:hover { border-color: var(--c-brand-green); color: var(--c-brand-green); }
.tk-tab[aria-selected="true"] {
  background: var(--c-brand-green);
  border-color: var(--c-brand-green);
  color: var(--c-paper);
}

/* Вкладок прайса семь — на узких экранах едут вбок, не переносятся. */
.tk-tabs--scroll {
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--s-1);
}
.tk-tabs--scroll::-webkit-scrollbar { display: none; }

/* ═══ Карточки ════════════════════════════════════════ */

/* Услуга: фото 282×376, затемнение снизу, подпись и кнопка поверх. */
.tk-card-service {
  position: relative;
  display: block;
  aspect-ratio: 282 / 376;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-mist);
}
.tk-card-service img { width: 100%; height: 100%; object-fit: cover; }
/* Затемнение под кнопкой «ПОДРОБНЕЕ».
   Нижний скрим (::after) закрывает 62% карточки снизу, а кнопка стоит
   СВЕРХУ справа — на светлых фотографиях белая пилюля давала контраст
   1,3:1 и просто пропадала. Верхний скрим слабее нижнего: он должен
   вытянуть кнопку, а не затемнить снимок. */
.tk-card-service::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 34%;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--c-ink-green) 52%, transparent) 0%,
    transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.tk-card-service::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top,
    var(--c-ink-green) 0%,
    color-mix(in srgb, var(--c-ink-green) 55%, transparent) 45%,
    transparent 100%);
}
.tk-card-service__body {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: var(--s-6);
  color: var(--c-paper);
}
.tk-card-service__title { font-size: var(--t-body-lg-size); line-height: 1.2; font-weight: var(--w-medium); }
.tk-card-service__action { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 1; }

/* Врач: портрет 282×322, фамилия зелёная, кнопка «К врачу». */
.tk-card-doctor { display: flex; flex-direction: column; gap: var(--s-4); }
.tk-card-doctor__photo {
  aspect-ratio: 282 / 322;
  border-radius: var(--r-image);
  overflow: hidden;
  background: var(--c-mist);
}
.tk-card-doctor__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tk-card-doctor__name { font-size: var(--t-body-lg-size); line-height: 1.2; }
.tk-card-doctor__surname { display: block; color: var(--c-brand-green); font-weight: var(--w-medium); }
.tk-card-doctor__role { font-size: var(--t-label-12-size); color: var(--c-fog); text-transform: uppercase;
                        letter-spacing: var(--t-label-12-ls); }

/* Статья: обложка радиус 20, чип даты поверх. */
.tk-card-post { display: flex; flex-direction: column; gap: var(--s-4); }
.tk-card-post__cover {
  position: relative;
  aspect-ratio: 282 / 190;
  border-radius: var(--r-image);
  overflow: hidden;
  background: var(--c-mist);
}
.tk-card-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.tk-card-post__date { position: absolute; top: var(--s-3); left: var(--s-3); }
.tk-card-post__title { font-size: var(--t-body-lg-size); line-height: 1.2; }
.tk-card-post:hover .tk-card-post__title { color: var(--c-brand-green); }

/* Ценность: иконка-бейдж, заголовок, текст. Плитки под иконкой нет. */
.tk-card-value { display: flex; flex-direction: column; gap: var(--s-4); }
.tk-card-value__icon { width: 88px; height: 88px; }

/* Отзыв: подложка mist, оценка, текст, автор. */
.tk-card-review {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-card);
  background: var(--c-mist);
  border-radius: var(--r-card);
}
.tk-card-review__rating { display: flex; align-items: center; gap: var(--s-2);
                          font-weight: var(--w-semibold); }
.tk-card-review__text { font-size: var(--t-body-size); line-height: 1.5; }
.tk-card-review__author { font-size: var(--t-label-12-size); color: var(--c-fog);
                          text-transform: uppercase; letter-spacing: var(--t-label-12-ls); }

/* ═══ Блоки страницы ══════════════════════════════════ */

/* Полоса-анонс: оранжевая, 48px, код ОМС слева и ссылка справа. */
.tk-announce {
  background: var(--c-orange);
  color: var(--c-ink-green);
}
.tk-announce__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 48px;
}

/* Шапка. На главной лежит поверх видео и прозрачна. */
.tk-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
  min-height: 88px;
}
.tk-header--overlay {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  background: transparent;
  color: var(--c-paper);
}

.tk-nav { display: flex; gap: var(--s-8); list-style: none; margin: 0; padding: 0; }
.tk-nav__link {
  font-size: var(--t-label-12-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  text-transform: uppercase;
  padding-block: var(--s-2);
  transition: color .16s ease;
}
/* Пункты меню не подчёркиваются — реагируют только цветом.
   На светлой шапке это фирменный зелёный; на главной шапка лежит поверх
   тёмного видео, там зелёный не читается, поэтому оранжевый акцент.
   Когда под раскрытым меню шапка белеет, возвращается зелёный. */
.tk-nav__link:hover,
.tk-nav__link:focus-visible { color: var(--c-brand-green); }
.tk-nav__link[aria-current="page"] { color: var(--c-brand-green); }

.tk-header--overlay .tk-nav__link:hover,
.tk-header--overlay .tk-nav__link:focus-visible,
.tk-header--overlay .tk-nav__link[aria-current="page"] { color: var(--c-orange); }

.tk-header--overlay.is-drop-open .tk-nav__link:hover,
.tk-header--overlay.is-drop-open .tk-nav__link:focus-visible,
.tk-header--overlay.is-drop-open .tk-nav__link[aria-current="page"] { color: var(--c-brand-green); }

/* Хлебные крошки */
.tk-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0;
                  font-size: var(--t-label-12-size); color: var(--c-fog); }
.tk-breadcrumbs li + li::before { content: "—"; margin-right: var(--s-2); color: var(--c-ash); }
.tk-breadcrumbs a:hover { color: var(--c-brand-green); }

/* Заголовок секции: надстрочный лейбл + заголовок + действие справа. */
.tk-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-8);
  margin-bottom: var(--s-12);
}
.tk-sec-head__label { color: var(--c-orange); margin-bottom: var(--s-4); }
@media (max-width: 680px) {
  .tk-sec-head { flex-direction: column; align-items: flex-start; gap: var(--s-6); }
}

/* Строка прайса: код, наименование, цена. Цифры выравниваются по разряду. */
.tk-price-row {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  gap: var(--s-6);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-hairline);
}
.tk-price-row__code  { font-size: var(--t-label-12-size); color: var(--c-ash);
                       font-variant-numeric: tabular-nums; }
.tk-price-row__price { font-weight: var(--w-semibold); white-space: nowrap;
                       font-variant-numeric: tabular-nums; }
/* Вкладка ОМС — без цен, две колонки вместо трёх. */
.tk-price-row--oms { grid-template-columns: 148px 1fr; }

/* Подзаголовок внутри вкладки: там, где в одну вкладку сведено несколько
   разделов прайса — анализы, лазерное лечение, ортокератология. Это не
   строка услуги: своей сетки и своей границы ему не нужно, нижнюю линию
   несёт следующая за ним строка. Воздуха сверху заметно больше, чем снизу,
   иначе заголовок читается как подпись к предыдущему разделу. */
.tk-price-group {
  padding-top: var(--s-8);
  padding-bottom: var(--s-2);
}
.tk-price-group:first-child { padding-top: 0; }
@media (max-width: 680px) {
  .tk-price-row { grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); }
  .tk-price-row__code { grid-column: 1 / -1; }
}

/* Точки галереи */
.tk-dots { display: flex; gap: var(--s-2); }
.tk-dots button {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--c-hairline);
  transition: width .2s ease, background-color .2s ease;
}
.tk-dots button[aria-current="true"] { width: 28px; background: var(--c-brand-green); }

/* Аккордеон */
.tk-acc__item { border-bottom: 1px solid var(--c-hairline); }
.tk-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%; padding-block: var(--s-5); text-align: left;
  font-size: var(--t-body-lg-size);
}
.tk-acc__btn::after { content: "+"; font-size: 24px; color: var(--c-brand-green); flex: none; }
.tk-acc__btn[aria-expanded="true"]::after { content: "–"; }
.tk-acc__panel { padding-bottom: var(--s-5); color: var(--c-fog); }
.tk-acc__panel[hidden] { display: none; }

/* Пагинация */
.tk-pager { display: flex; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.tk-pager a, .tk-pager span {
  display: grid; place-items: center;
  min-width: 44px; height: 44px; padding-inline: var(--s-3);
  border: 1px solid var(--c-hairline); border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.tk-pager [aria-current="page"] { background: var(--c-brand-green); border-color: var(--c-brand-green);
                                  color: var(--c-paper); }

/* Круглая кнопка-иконка (пауза видео, стрелки слайдера) */
.tk-icon-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-hairline);
  background: var(--c-paper);
  transition: background-color .16s ease, border-color .16s ease;
}
.tk-icon-btn:hover { border-color: var(--c-brand-green); color: var(--c-brand-green); }
.tk-icon-btn--on-photo {
  background: var(--c-paper-14);
  border-color: var(--c-paper-75);
  color: var(--c-paper);
}

/* Поверх фотографии зелёный ховер не годится: базовое правило
   .tk-icon-btn:hover красит значок в --c-brand-green, и на тёмном кадре
   он почти пропадает. Особенно заметно после клика — курсор остаётся
   на кнопке, и значок так и висит зелёным. Здесь значок остаётся белым,
   а отклик даём фоном и рамкой. */
.tk-icon-btn--on-photo:hover,
.tk-icon-btn--on-photo:focus-visible {
  color: var(--c-paper);
  background: var(--c-paper-28);
  border-color: var(--c-paper);
}

/* Финальный блок: CTA и подвал одной градиентной поверхностью,
   разделённые белым швом. Градиент замерен на макете. */
.tk-final {
  background: var(--g-green);
  color: var(--c-paper);
}
.tk-final__seam { height: 1px; background: var(--c-paper-28); }

.tk-footer__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8);
  padding-block: var(--s-16);
}
@media (max-width: 1100px) { .tk-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .tk-footer__cols { grid-template-columns: 1fr; gap: var(--s-10); } }

.tk-footer__title {
  font-size: var(--t-label-12-size); font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls); text-transform: uppercase;
  color: var(--c-paper-55);
  margin-bottom: var(--s-4);
}
.tk-footer__list { display: flex; flex-direction: column; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.tk-footer__list a:hover { color: var(--c-orange); }

/* Тап-цель ссылок подвала. В строке они высотой 19 пикселей — это ниже
   нормы WCAG 2.5.8 (24), и на телефоне в них тяжело попасть: двадцать
   четыре ссылки из тридцати были меньше нормы. Просвет колонки уменьшаем
   на ту же величину, чтобы визуальный ритм подвала из макета не разъехался. */
.tk-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Ссылка на политику в нижней строке подвала стоит сама по себе, поэтому
   исключение WCAG 2.5.8 для ссылок внутри предложения на неё не действует:
   17 пикселей высоты — это меньше нормы в 24. Почта и второй телефон
   выше по подвалу набраны внутри абзацев, они под исключение попадают
   и остаются как есть. */
.tk-final__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Кегль полей ввода. Safari на iOS приближает страницу, если при фокусе
   в поле кегль меньше 16 пикселей, и обратно уже не отдаляет. Ставим ровно
   16 на мобильных, не трогая --t-body-size для остального текста. */
@media (max-width: 680px) {
  .tk-field__input,
  .tk-field__area,
  .tk-field__select,
  .tk-pricelist__input { font-size: 16px; }
}

/* Соцсети в подвале. Скруглённая рамка нарисована ВНУТРИ самих SVG
   (два <rect>: полупрозрачная заливка и обводка) — по макету 413:11478
   она там и должна быть, поэтому в CSS фона нет намеренно.
   Правил здесь только размер знака внутри рамки: в исходных файлах
   глиф занимал меньше половины и терялся. Ссылка 48×48 — и рамка
   в натуральную величину, и тап-цель с запасом. */
.tk-social { display: flex; gap: var(--s-3); }
.tk-social a {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-input);
  transition: opacity .16s ease;
}
.tk-social a:hover,
.tk-social a:focus-visible { opacity: .8; }
.tk-social img { width: 48px; height: 48px; }

/* Последняя строка прайса без разделителя — иначе линия висит
   в нижнем краю плашки. Правило компонентное, в секциях не дублировать. */
.tk-price-row:last-child { border-bottom: 0; }

/* На узких экранах подпись кнопки переносится: длинные названия
   услуг иначе выпирают за край. Тоже свойство компонента, а не секции. */
@media (max-width: 680px) {
  .tk-btn { white-space: normal; }
}

/* Цель ссылок «записаться» со всех страниц. Запас сверху — чтобы после
   перехода заголовок не упирался в край окна. */
#zapis { scroll-margin-top: var(--s-10); }

/* ═══ Хрома внутренних страниц ═════════════════════════
   Светлая шапка и крошки со слэшем одинаковы на всех внутренних
   страницах. Раньше каждый page-*.css объявлял их заново — шесть
   одинаковых копий. Место им здесь, в общем слое. */
.tk-header--solid .tk-burger { color: var(--c-ink-green); }
.tk-breadcrumbs--slash li + li::before {
  content: "/";
  color: var(--c-field-border);
}
.tk-breadcrumbs--slash [aria-current="page"] {
  color: var(--c-brand-green);
  font-weight: var(--w-medium);
}

/* Светлая шапка внутренних страниц: на главной она прозрачная
   поверх видео (--overlay), здесь — на бумаге с волосяной линией. */
.tk-header--solid {
  background: var(--c-paper);
  color: var(--c-ink-green);
  border-bottom: 1px solid var(--c-hairline); /* волосяная линия: токена толщины нет */
}

/* Отбивка крошек от шапки. Одинакова на всех внутренних страницах;
   раньше каждый page-*.css объявлял её заново — 36 копий, причём пять
   страниц вовсе не имели своей и держались на правиле соседней. */
.tk-crumbs { padding-top: calc(var(--s-12) + var(--s-2)); }  /* 56 из макета */
@media (max-width: 680px) {
  .tk-crumbs { padding-top: var(--s-8); }
}

/* ═══ Выпадающие меню шапки ═══════════════════════════
   Figma 400:2 (услуги), 400:73 (о центре), 400:128 (пациенту).
   Панель во всю ширину под шапкой: белая, поля 40/120/44/120.
   Ниже 1100 не показываются — там работает бургер. */

.tk-nav__item { position: static; }          /* панель тянется на всю ширину, не на пункт */
.tk-nav__caret { display: inline-block; transition: transform .16s ease; }
.tk-nav__link[aria-expanded="true"] { color: var(--c-brand-green); }
.tk-nav__link[aria-expanded="true"] .tk-nav__caret { transform: rotate(180deg); }

/* Панель — обычный блок в потоке внутри <header>, а не абсолют под ним.
   Своего фона у неё НЕТ: красит шапка, одним фоном на всё. Иначе панель
   появляется мгновенно, а фон шапки переходит за 180 мс — и в этот момент
   они разного цвета, то есть выглядят двумя плитами. */
.tk-drop { color: inherit; }
.tk-drop[hidden] { display: none; }

.tk-drop__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
  gap: var(--s-10);
  padding-block: var(--s-10) 44px;   /* 40 сверху и 44 снизу — замер макета */
  align-items: start;
}
/* «О центре» и «Пациенту» короче: колонки не растягиваем на всю ширину */
.tk-drop__inner--narrow { grid-template-columns: repeat(2, minmax(0, 280px)) 1fr; }

.tk-drop__label {
  font-size: var(--t-label-12-size);   /* в макете 11 — ступени 11 в шкале нет */
  font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls);
  text-transform: uppercase;
  color: var(--c-fog);
  margin-bottom: var(--s-4);
}
.tk-drop__list { display: flex; flex-direction: column; gap: var(--s-3); }
.tk-drop__list a {
  display: inline-block;
  font-size: var(--t-body-size);
  line-height: 1.3;
  transition: color .16s ease;
}
/* Пункты выпадающего меню — тоже только цветом, без подчёркивания. */
.tk-drop__list a:hover,
.tk-drop__list a:focus-visible { color: var(--c-brand-green); }

/* Зелёная плашка «Все цены» справа */
.tk-drop__promo {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-6);
  background: var(--c-brand-green);
  color: var(--c-paper);
  border-radius: var(--r-card);
  transition: background-color .16s ease;
}
.tk-drop__promo:hover { background: var(--c-green-deep); }
.tk-drop__promo-label {
  font-size: var(--t-label-12-size); font-weight: var(--w-medium);
  letter-spacing: var(--t-label-12-ls); text-transform: uppercase;
  color: var(--c-paper-75);
}
.tk-drop__promo-title { font-size: var(--t-body-lg-size); line-height: 1.25; }
.tk-drop__promo-go {
  margin-top: var(--s-2);
  font-size: var(--t-label-14-size); font-weight: var(--w-semibold);
  letter-spacing: var(--t-label-14-ls); text-transform: uppercase;
}

/* Шапка на главной лежит поверх видео и прозрачна, но раскрытая панель
   белая — иначе текст меню лёг бы на кадр. */


@media (max-width: 1100px) {
  .tk-drop { display: none !important; }   /* ниже — бургер */
}

/* ═══ Шапка главной под раскрытым меню ════════════════
   На главной шапка прозрачная поверх видео. Когда раскрывается
   выпадающее меню, панель белая — и шапка над ней тоже должна стать
   белой, иначе тёмная полоса и белая панель читаются двумя разными
   плитами вместо одной. Класс вешает js/menu.js. */

.tk-header--overlay .tk-logo--dark { display: none; }
.tk-header--overlay .tk-logo--light { display: block; }

.tk-header--overlay.is-drop-open {
  background: var(--c-paper);
  color: var(--c-ink-green);
  border-bottom: 1px solid var(--c-hairline);
}
/* Шапка переключается МГНОВЕННО, без переходов. Панель раскрывается сразу,
   поэтому любая плавность рассинхронизирует их: при переходе фона видна
   тёмная шапка над белой панелью, при переходе цвета — белый текст на
   белом фоне. Оба состояния красятся одним кадром. */
.tk-header--overlay.is-drop-open .tk-logo--light { display: none; }
.tk-header--overlay.is-drop-open .tk-logo--dark  { display: block; }

/* Кнопка записи в герое оранжевая; на белом ей место зелёной,
   как на внутренних страницах. Переопределение под состоянием
   шапки, базовый .tk-btn не трогается. */
.tk-header--overlay.is-drop-open .tk-btn--accent {
  background: var(--c-brand-green);
  color: var(--c-paper);
}
.tk-header--overlay.is-drop-open .tk-btn--accent:hover {
  background: var(--c-green-deep);
}

/* Переход мягкий, но только по цвету: геометрию не двигаем,
   иначе шапка «дышит» при каждом проходе курсора. */
.tk-header--overlay .tk-btn--accent {
  transition: background-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .tk-header--overlay,
  .tk-header--overlay .tk-btn--accent { transition: none; }
}

/* ═══ Уведомление о cookie ═══════════════════════════════════════════════
   Карточка в левом нижнем углу, а не полоса во всю ширину: полоса на
   телефоне съедает треть экрана и закрывает первый экран страницы,
   а карточка держится ровно того размера, которого требует текст.

   Слева, а не справа: справа внизу на внутренних страницах ничего нет,
   но на телефоне туда попадает большой палец, и человек закрывает
   уведомление, не прочитав.

   z-index 90 — НИЖЕ мобильного меню (100) и ссылки «к содержанию» (200),
   но выше содержимого. Открытое меню должно перекрывать карточку, иначе
   она висит поверх списка разделов. Окно записи модальное и лежит в
   верхнем слое браузера, поэтому со слоями не спорит вовсе.
   ═══════════════════════════════════════════════════════════════════════ */
.tk-cookie {
  position: fixed;
  z-index: 90;
  left: var(--s-5);
  bottom: var(--s-5);
  width: min(420px, calc(100vw - var(--s-5) * 2));
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--c-paper);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--c-ink-green) 18%, transparent);
}

/* Появляется снизу и с задержкой: карточка, которая выпрыгивает
   одновременно с загрузкой страницы, читается как ошибка вёрстки.
   Класс вешает menu.js — до него карточка стоит с hidden. */
.tk-cookie {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .32s ease, transform .32s ease;
}
.tk-cookie.is-shown { opacity: 1; transform: none; }

/* Атрибут hidden сам по себе тут НЕ работает: правило .tk-cookie с
   display:flex из авторского листа перебивает браузерное [hidden]
   { display:none }. Без этой строки карточка после «ХОРОШО» остаётся
   в потоке — прозрачной, но кликабельной, и ловит нажатия по ссылкам
   под собой. Ровно на это и напоролись при первой проверке. */
.tk-cookie[hidden] { display: none; }

.tk-cookie__text { margin: 0; color: var(--c-fog); }
/* Без подчёркивания, одним цветом: текст короткий, ссылка в нём одна,
   и зелёного на белом достаточно, чтобы её заметить. */
.tk-cookie__text a { color: var(--c-brand-green); text-decoration: none; }
.tk-cookie__text a:hover { text-decoration: underline; }
.tk-cookie__ok { align-self: flex-start; }

@media (max-width: 680px) {
  .tk-cookie {
    left: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-4);
    width: auto;
    padding: var(--s-4);
  }
  /* На узком экране кнопка во всю ширину: рядом с текстом ей места нет,
     а мелкую кнопку в углу пальцем не поймать. */
  .tk-cookie__ok { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-cookie { transition: none; opacity: 1; transform: none; }
}

/* ═══ Кнопка «версия для слабовидящих» ═══════════════════════════════════
   Значок глаза в шапке рядом с телефоном. Цвет не задаём своим значением:
   берём currentColor от шапки — на главной она прозрачная поверх видео
   и текст белый, на внутренних страницах светлая и текст тёмный. Одно
   правило работает в обоих случаях, как у бургера рядом.

   Библиотека BVI добавляет этой же кнопке свой класс bvi-open, когда
   подгружается. Её собственное оформление (.bvi-shortcode) мы не трогаем
   и не подключаем — кнопку рисуем сами, чтобы она жила в нашей сетке. */
.tk-bvi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.tk-bvi-btn:hover { color: var(--c-orange); }

/* На светлой шапке подложка при наведении: на белом фоне одна лишь смена
   цвета значка читается слабее, чем на видео. */
.tk-header--solid .tk-bvi-btn:hover { background: var(--c-mist); }

/* На ГЛАВНОЙ значок из шапки убран: там же, в полосе-анонсе над шапкой,
   стоит кнопка «ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ» — два входа в один и тот же
   режим в двадцати пикселях друг от друга. Оставляем полосу: надпись
   говорит, что это, а значок сам по себе — нет.

   Зацепка — модификатор шапки: tk-header--overlay шаблон главной передаёт
   в чанк tk.header единственный на сайте, на всех прочих страницах шапка
   приходит с умолчанием tk-header--solid и значок остаётся (полосы-анонса
   там нет, и другого входа в режим не было бы вовсе).

   display: none, а не visibility: скрытая кнопка иначе осталась бы
   в дереве доступности, и скринридер объявлял бы на главной две
   одинаковые команды подряд. На мобильной вёрстке потери тоже нет:
   полоса-анонс до 680 остаётся и лишь укорачивает подпись
   до «СЛАБОВИДЯЩИМ». */
.tk-header--overlay .tk-bvi-btn { display: none; }

/* Пока библиотека грузится, повторное нажатие ничего не даёт — показываем
   это курсором, иначе человек жмёт ещё раз и думает, что кнопка мёртвая. */
.tk-bvi-btn.bvi-open:active { transform: scale(.94); }

/* На узких экранах телефон из шапки уходит (см. sections.css), а значок
   остаётся: версия для слабовидящих нужнее всего как раз на телефоне.
   Там места свободнее, поэтому цель для пальца крупнее. */
@media (max-width: 680px) {
  .tk-bvi-btn { width: 40px; height: 40px; }
}

/* Самые узкие телефоны (360 и уже). Замерено: на 360 шапка с логотипом,
   значком, кнопкой записи и бургером вылезала за экран на 7 px — появлялась
   горизонтальная прокрутка всей страницы. Ужимаем значок и просветы блока
   действий. 32 px остаётся приемлемой целью для пальца (WCAG 2.5.8 требует
   минимум 24). */
@media (max-width: 400px) {
  .tk-bvi-btn { width: 32px; height: 32px; }
  .tk-header__inner .tk-hero__actions { gap: var(--s-2); }
}

/* Шапка забита ровно под край: поля по 120, содержимому остаётся 1200,
   и логотип с меню и правым блоком занимали эти 1200 без остатка.
   Кнопка версии для слабовидящих добавила 64 пикселя, меню сжалось
   на 17 — и подписи разорвались на две строки («ПРАЙС-» / «ЛИСТ»).
   Возвращаем место просветами правого блока: 24 → 16. Вместе с кнопкой
   32 вместо 40 это отдаёт меню 24 пикселя, на 7 больше нужного. */
.tk-header__inner .tk-hero__actions { gap: var(--s-4); }

/* И страховка на будущее: подписи пунктов не переносятся. Если шапке
   опять станет тесно, это будет видно сразу, а не превратится тихо
   в двухстрочное меню. «О ЦЕНТРЕ» уже держится неразрывным пробелом
   в разметке, «ПРАЙС-ЛИСТ» ломался по дефису. */
.tk-nav__link { white-space: nowrap; }

/* ═══ Шапка в узкой полосе 1101–1300 ═════════════════════════════════════
   Здесь меню ещё не ушло в бургер (он включается ниже 1100), телефон ещё
   показывается, а поля страницы всё ещё 120. Содержимому остаётся меньше,
   чем ему нужно, и до 09.09.2026 это гасилось тем, что подписи меню молча
   ломались на две строки: «ПРАЙС-» и отдельно «ЛИСТ». Выглядело как брак,
   но перелива не давало, поэтому никто не замечал.

   Запретив переносы, мы сделали тесноту видимой — она полезла горизонтальной
   прокруткой. Лечим по существу: в этой полосе убираем телефон (он есть
   в подвале и в блоке записи) и ужимаем поля шапки до 48, как на планшете.
   Просветы меню оставляем макетные 32 — их трогать не пришлось.

   Замерено: на 1200 не хватало 129 px, на 1101 — 188. Эти две правки дают
   ровно ноль перелива на 1366, 1200 и 1101. */
/* Порог найден замером, а не на глаз: своими силами шапка перестаёт
   переливаться на 1330. Поэтому две полосы, а не одна.

   1301–1329 — не хватает совсем чуть-чуть (от 9 до 28 px), и достаточно
   ужать поля. Телефон остаётся. */
@media (min-width: 1101px) and (max-width: 1329px) {
  /* Полоса-анонс — вместе с шапкой: у неё свой контейнер с теми же полями
     120, и её содержимое (код ОМС слева, «версия для слабовидящих» справа,
     оба неразрывные) в 960 не укладывалось. Проявлялось только на главной,
     потому что полоса есть лишь там. */
  .tk-header__inner,
  .tk-announce__inner { padding-inline: var(--s-12); }
}

/* 1101–1300 — одних полей мало (на 1101 не хватало 188 px), поэтому здесь
   убираем ещё и телефон. Он есть в подвале, в блоке записи и в мобильном
   меню, так что из шапки его можно снять без потери. */
@media (min-width: 1101px) and (max-width: 1300px) {
  .tk-hero__phone { display: none; }
}

/* ═══ Вход в версию для слабовидящих в полосе-анонсе (главная) ════════════
   Раньше справа в полосе стояла ссылка «КАК ЗАПИСАТЬСЯ →». Теперь кнопка,
   и ей нужен сброс: браузер рисует кнопкам свой фон, рамку и шрифт, а она
   должна выглядеть ровно как соседний текст полосы. Цвет берём от полосы
   через inherit — полоса оранжевая, текст на ней тёмно-зелёный. */
.tk-announce__bvi {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;

  /* Шрифт НЕ сбрасываем в inherit: класс t-label на самой кнопке задаёт
     ровно ту же гарнитуру, что у строки про ОМС слева (14 / 500 / 1.4),
     а `font: inherit` перебивал его и подтягивал 16 / 600 от родителя —
     подпись выглядела крупнее и жирнее соседней. Браузерную гарнитуру
     кнопки снимаем только по семейству. */
  font-family: inherit;

  /* Класс tk-announce__link, который кнопка носит ради мобильных правил
     (nowrap и flex: none), заодно тянет вес 600 и подчёркивание — они
     достались ему от прежней ссылки «КАК ЗАПИСАТЬСЯ». Гасим оба: подпись
     должна выглядеть ровно как строка про ОМС слева. */
  font-weight: var(--w-medium);
  text-decoration: none;
}

/* При наведении подпись белеет, а не подчёркивается: полоса оранжевая,
   белый на ней читается и держит тот же вес, а подчёркивание в строке
   капсом выглядит грязно. */
.tk-announce__bvi:hover { color: var(--c-paper); text-decoration: none; }
.tk-announce__bvi svg { flex: none; }

/* Длинную и короткую подпись переключают готовые классы полосы
   (.tk-announce__full / __short): на десктопе «ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ»,
   на телефоне «СЛАБОВИДЯЩИМ». Своих правил под это не заводим.

   А вот чужое правило .tk-announce__link span { margin-left: .35em }
   здесь мешает: оно ставилось под стрелку «→» у прежней ссылки, а у нас
   просвет уже задан через gap, и отступ удваивался. */
.tk-announce__bvi span { margin-left: 0; }