/* ТОМОКО — раскладка секций главной и стили общего подвала.
   Генерится из .build/{верх,услуги,люди,низ}.css — руками не править. */

/* ═══════════ верх ═══════════ */
/* ТОМОКО — раскладка секций верха главной:
   полоса-анонс, герой с видео, «Новые возможности».
   Подключать после tokens.css → base.css → components.css.

   Здесь ТОЛЬКО раскладка этих трёх секций. Кнопки, чипы, шапка, навигация,
   круглая кнопка-иконка и сама полоса-анонс описаны в components.css
   и не переопределяются: где компонент не дотягивал, дописан модификатор.
   Теней нет нигде — вся элевация цветом и градиентом. */


/* ═══ 1. Полоса-анонс (Figma 345:33475, 1440×48) ═══════════════════════════
   .tk-announce и .tk-announce__inner живут в components.css:
   оранжевый фон, флекс со space-between, min-height 48.
   Ниже — только поведение двух строк внутри полосы. */

.tk-announce__text,
.tk-announce__link { white-space: nowrap; }

/* ОТКЛОНЕНИЕ МАКЕТА: правая надпись набрана SemiBold,
   тогда как ступень label-14 задаёт Medium. */
.tk-announce__link { font-weight: var(--w-semibold); }
.tk-announce__link:hover,
.tk-announce__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px; /* оптический отступ подчёркивания, токена нет */
}

/* Кнопка версии для слабовидящих носит класс tk-announce__link ради
   мобильных правил (nowrap, flex: none), но выглядеть должна как строка
   про ОМС слева, а не как прежняя ссылка «КАК ЗАПИСАТЬСЯ». Поэтому здесь,
   а не в components.css: тот подключается РАНЬШЕ, и при равной силе
   селекторов побеждали правила отсюда — вес оставался 600, подчёркивание
   возвращалось. Решение заказчика 09.09.2026: при наведении белеет. */
/* Переход на прежний сайт — левая половина полосы. Выглядит как обычный
   текст полосы, а не как ссылка: полоса и так одна строка на оранжевом,
   и подчёркивание с другим цветом дробили бы её надвое. Отличие даём
   стрелкой и поведением при наведении — тем же, что у кнопки справа
   (решение заказчика 09.09.2026: не подчёркивание, а побеление).

   Стрелка через ::after, а не в разметке: она декоративная, и на телефоне
   строка ужимается многоточием — лишний узел там только мешал бы. */
.tk-announce__out {
  color: inherit;
  text-decoration: none;
}
.tk-announce__out::after {
  content: " →";
  white-space: nowrap;   /* стрелка не отрывается от последнего слова */
}
.tk-announce__out:hover,
.tk-announce__out:focus-visible {
  color: var(--c-paper);
  text-decoration: none;
}

.tk-announce__bvi { font-weight: var(--w-medium); }
.tk-announce__bvi:hover,
.tk-announce__bvi:focus-visible {
  color: var(--c-paper);
  text-decoration: none;
}

@media (max-width: 1100px) {
  .tk-announce__text,
  .tk-announce__link { white-space: normal; }
}

/* Модификатор к компоненту: на мобильных полоса разворачивается
   в две строки. Базовый .tk-announce__inner не трогаем. */
@media (max-width: 680px) {
  .tk-announce--stack .tk-announce__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding-block: var(--s-3);
  }
}


/* ═══ 2. Герой с видео (Figma 345:33478, 1440×860) ═════════════════════════
   Раскладка колонкой: шапка лежит поверх абсолютом (.tk-header--overlay),
   текст центрируется в свободном пространстве, нижний ряд прижат к низу.
   Абсолютные координаты макета (текст x=115 y=300, кнопки y=746/764)
   в поток переведены намеренно — см. отчёт. */

.tk-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 860px; /* высота кадра героя в макете; токена высоты нет */
  overflow: hidden;
  background: var(--c-ink-green);
  color: var(--c-paper);
}

/* ── Подложка: видео на весь кадр ───────────────────────────────────────── */
.tk-hero__media { position: absolute; inset: 0; z-index: 0; }
.tk-hero__media video,
.tk-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tk-hero__fallback { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tk-hero__video { display: none; }
  .tk-hero__fallback { display: block; }
}

/* ── Вуаль (345:33479) и градиент под шапкой (345:33480) ────────────────────
   Теней в системе нет — затемнение собрано из градиентов.
   Токенов прозрачности тоже нет, поэтому альфа берётся от --c-ink-green
   через color-mix; проценты замерены на макете, сырой hex не пишем. */
.tk-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-ink-green) 30%, transparent) 0%,
      color-mix(in srgb, var(--c-ink-green)  5%, transparent) 50%,
      color-mix(in srgb, var(--c-ink-green) 72%, transparent) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--c-ink-green) 72%, transparent) 0%,
      color-mix(in srgb, var(--c-ink-green) 22%, transparent) 50%,
      color-mix(in srgb, var(--c-ink-green)  5%, transparent) 100%),
    color-mix(in srgb, var(--c-ink-green) 40%, transparent);
}
.tk-hero__veil::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 22%; /* 190 из 860 в макете — переведено в долю, чтобы жило на адаптиве */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-ink-green) 68%, transparent) 0%,
    transparent 100%);
}

/* ── Шапка поверх видео (345:33489) ─────────────────────────────────────────
   .tk-header--overlay и .tk-header__inner — components.css (высота 88).
   Здесь только три её блока. */
.tk-hero__logo { flex: none; } /* размеры логотипа держат атрибуты width/height */

.tk-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.tk-hero__phone {
  font-weight: var(--w-semibold);
  white-space: nowrap;
}
.tk-hero__phone:hover { color: var(--c-orange); }

/* ── Текст героя (345:33481) ────────────────────────────────────────────── */
.tk-hero__body {
  position: relative;
  z-index: 2;
  margin-block: auto; /* центрируется в свободном пространстве над нижним рядом */
  padding-top: calc(var(--s-20) + var(--s-2)); /* 88 = высота .tk-header__inner */
}
.tk-hero__eyebrow {
  margin-bottom: var(--s-6);
  opacity: .82; /* замерено на надстрочнике 345:33486, токена прозрачности нет */
  white-space: nowrap;
}
/* Разделитель между частями надстрочника рисуется здесь, а не пишется
   в тексте: на телефоне первая часть скрыта, и «·» из текста повис бы
   перед строкой доверия сиротой. Через ::before у второй части он
   исчезает вместе с ней. */
.tk-hero__eyebrow-part + .tk-hero__eyebrow-part::before {
  content: "·";
  margin: 0 .5em;
}
.tk-hero__title {
  /* Была ступень display-md: 92px / 0.79, замерена на артборде героя
     345:33478 под короткую фразу «Точность, которая возвращает зрение».
     06.09.2026 заголовок сменили на «Офтальмологический центр для взрослых
     и детей в Томске» — втрое длиннее, и на 92px он занимал три строки
     и 218px против прежних 145.

     Сначала спустили на ступень шкалы display-sm (76 / 0.92), но в тот же
     день опустили ещё — до 68 / 1.05. Причины замерены, не на глаз:
     • на 76px строка занимала 1140 из 1200, справа оставалось 60px —
       заголовок упирался в край колонки;
     • и он был НЕУСТОЙЧИВ по ширинам: на 1440 ложился в две строки,
       а на 1366 (колонка 1126) ломался уже в три. На 68px две строки
       и там, и там;
     • 0.92 для описательного заголовка всё ещё плакатный интерлиньяж —
       на 1.05 строки задышали.
     Высота блока при этом 143px против прежних 145 — то есть первый экран
     не поехал вовсе.

     06.09.2026, следующим шагом: с 68 опустили до 64 — заказчик выбрал
     из сравнения вариант D. Две строки остаются и на 1440, и на 1366;
     блок 134px, воздуха справа 236px против 181 на 68px.

     Ступени 64 в шкале нет и заводить её ради одного заголовка не будем:
     это тот же случай, что с 56px у заголовка статьи, — плодить шкалу
     ради одной страницы дороже, чем объяснить число здесь. */
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
  margin-bottom: var(--s-10); /* в макете 44, ближайший шаг сетки 40 */
}
.tk-hero__lead {
  display: grid;
  gap: var(--s-2);
  max-width: 664px; /* мера строки из макета, токена ширины текста нет */
}

/* ── Нижний ряд: кнопка по центру полотна, пауза по правому полю ─────────── */
.tk-hero__foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-bottom: var(--s-16);
}
.tk-hero__cta { grid-column: 2; }
.tk-hero__player { grid-column: 3; justify-self: end; }

/* Значки лежат в одной ячейке грид-кнопки, показан всегда один.
   Состояние держит aria-pressed: false — видео идёт, показываем паузу;
   true — остановлено, показываем треугольник. Значок белый, потому что
   fill="currentColor", а у .tk-icon-btn--on-photo color: var(--c-paper). */
.tk-hero__player-icon { grid-area: 1 / 1; }
.tk-hero__player-icon--play { display: none; }
.tk-hero__player[aria-pressed="true"] .tk-hero__player-icon--pause { display: none; }
.tk-hero__player[aria-pressed="true"] .tk-hero__player-icon--play  { display: block; }

/* Треугольник оптически смещён влево из-за пустоты справа —
   сдвигаем на пиксель, чтобы он стоял по центру кнопки. */
.tk-hero__player-icon--play { transform: translateX(1px); }

/* Короткая подпись метрики — только на узком экране. */
.tk-stat__label-short { display: none; }

/* Короткий вариант строки существует только на узком экране. */
.tk-announce__short { display: none; }

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* Было 100svh — и герой ГАРАНТИРОВАННО не влезал в экран телефона.
     svh считает только окно, а над героем в потоке стоит полоса-анонс
     48px (её .tk-announce__inner{min-height:48px}, на телефоне столько же
     выходит из паддингов). Итого экран + 48, и низ героя всегда уезжал
     за край: на 390×844 низ приходился на 824 при экране 844, а на
     невысоких телефонах вроде 390×664 — на 688 при экране 664.
     Вычитаем полосу. Поменяется её высота — поменять и здесь. */
  .tk-hero { min-height: calc(100svh - 48px); }
  /* Кегль героя на планшете раньше приходил из токена сам: заголовок был
     набран var(--t-display-sm-size), а ниже 1100 токен становится 52px.
     06.09.2026 кегль на десктопе пришлось задать числом (68), и планшет
     вместе с ним застрял на 68 — три строки и 214px вместо двух и 96.
     Поэтому ступень здесь теперь задаётся явно, тем же значением 52,
     что давал токен. Интерлиньяж 1.05 — как на десктопе. */
  .tk-hero__title { font-size: 52px; line-height: 1.05; }
  .tk-hero__nav { display: none; } /* уходит в бургер */
}

@media (max-width: 680px) {
  .tk-hero__title { font-size: 40px; letter-spacing: -0.04em; }
  .tk-hero__eyebrow { white-space: normal; }
  .tk-hero__phone { display: none; }
  .tk-hero__foot {
    grid-template-columns: 1fr auto;
    gap: var(--s-4);
    padding-bottom: var(--s-10);
  }
  .tk-hero__cta    { grid-column: 1; }
  .tk-hero__player { grid-column: 2; }
}


/* ═══ 3. Новые возможности (Figma 345:33537, 1440×958) ═════════════════════
   Отбивки секции держит .tk-section (--s-section сверху и снизу),
   контейнер и поля — .tk-container. Фон бумажный, как у полотна. */

.tk-newops__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-10); /* 40 — точное значение макета */
}

/* ── Заголовок (345:33540) ──────────────────────────────────────────────── */
.tk-newops__title {
  /* Была ступень display-sm: 76 / 0.92 / -0.0395em, замерена на макете.
     Пока герой держал 92px, шаг вниз читался. 06.09.2026 герой опустили
     до 68 — и этот заголовок стал КРУПНЕЕ главного H1 страницы, то есть
     иерархия перевернулась.

     Выровнен по герою: 68 / 1.05, решение заказчика. Остальные заголовки
     секций на главной набраны t-heading-lg (50px), так что «Новые
     возможности» остаются выделенным крупным заголовком под первым
     экраном — просто больше не перебивают H1.

     Трекинг оставлен токеном: он в em и от кегля не зависит.

     06.09.2026 следом за героем опущен до 64 — они держатся вровень
     намеренно, и разводить их при смене кегля не нужно. */
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: var(--t-display-sm-ls);
  font-weight: var(--w-regular);
  text-wrap: balance;
}

/* ── Лид и действия (345:33541) ─────────────────────────────────────────── */
.tk-newops__intro {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}
.tk-newops__lead {
  flex: none;
  width: 560px; /* мера строки из макета, токена ширины текста нет */
}
.tk-newops__cta {
  display: flex;
  gap: var(--s-4); /* в макете 15, ближайший шаг сетки 16 */
}

/* ── Макро радужки (345:33548) ──────────────────────────────────────────── */
.tk-newops__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 1200 / 470;
  background: var(--c-mist); /* подложка до загрузки кадра */
}
.tk-newops__figure img,
.tk-newops__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Снимки в слотах трёх разных пропорций. Оси object-position тут независимы:
   по вертикали кадр режется ТОЛЬКО на десктопе (1200/470 уже, чем 16/9),
   по горизонтали — только на планшете и телефоне (3/2 и 335/240 шире
   по высоте). Поэтому одна пара значений закрывает все ширины.
   18% сверху — чтобы на десктопе целиком помещалась вывеска «ТомОко Оптика»;
   80% слева — чтобы на телефоне она же не обрезалась по букве. */
.tk-newops__still { object-position: 80% 18%; }

/* ── Карусель ───────────────────────────────────────────────────────────── */
/* Слайдер занимает фигуру целиком, слайды лежат стопкой друг на друге
   и меняются прозрачностью. Не сдвигом: сдвиг пришлось бы считать
   в пикселях, а ширина слота разная на трёх брейкпоинтах, и на смене
   ориентации телефона карусель уезжала бы в середину кадра. */
.tk-newops__slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.tk-newops__slides {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tk-newops__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* Плавность включается ОТДЕЛЬНЫМ атрибутом и на кадр позже готовности.
   Иначе первый слайд, который и так на месте, проявляется теми же 700 мс
   при каждой загрузке страницы — выглядит как подтормаживание. */
[data-newops-plavno] .tk-newops__slide { transition: opacity 700ms ease; }
/* До того как отработает скрипт, виден первый слайд: без JS карусель
   не работает, но кадр в блоке должен быть. Как только menu.js поставит
   data-newops-ready, правило снимается и порядок задаёт .is-current. */
.tk-newops__slide:first-child { opacity: 1; }
[data-newops-ready] .tk-newops__slide:first-child { opacity: 0; }
[data-newops-ready] .tk-newops__slide.is-current  { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-newops-plavno] .tk-newops__slide { transition: none; }
}

/* ── Точки ──────────────────────────────────────────────────────────────── */
/* Справа внизу, напротив метрик: те прижаты влево, и на самой узкой ширине,
   где метрики идут колонкой, точки всё равно с ними не встречаются.
   z-index 2 — чтобы лежать поверх затемнения .tk-newops__figure::after;
   у слайдера своего контекста наложения нет, поэтому значение сравнивается
   с псевдоэлементом напрямую. */
.tk-newops__dots {
  position: absolute;
  z-index: 2;
  /* Кнопка шире точки, поэтому у крайней остаётся мёртвое поле в 8 px —
     вычитаем его, иначе точки визуально не дотягивают до края кадра. */
  right: calc(var(--s-card) - 8px);
  bottom: var(--s-card);
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tk-newops__dot {
  /* Точка видимая 10 px, а кликается 26×32 — цель крупнее минимальных
     24×24 из WCAG 2.2. Поэтому кнопка прозрачная, а кружок рисует ::after.
     Промежуток между точками задаётся шириной кнопки, а не gap: так поля
     остаются частью цели, и точки при этом стоят близко — 16 px просвета. */
  width: 26px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.tk-newops__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-paper) 45%, transparent);
  /* Тень, а не обводка и не подложка. На десктопе точки лежат на затемнении
     и читались бы и без неё, но на телефоне затемнение выключено, и они
     ложатся прямо на кадр: белый потолок операционной, светлый пол, зелёные
     тумбы. Тень даёт кромку на любом фоне, а сам кружок остаётся ровной
     заливкой — правило общее, чтобы схема была одна на обе ширины. */
  filter: drop-shadow(0 1px 3px rgb(11 26 16 / 0.55));
  transition: background 200ms ease, transform 200ms ease;
}
.tk-newops__dot[aria-current="true"]::after {
  background: var(--c-paper);
  transform: scale(1.15);
}
@media (hover: hover) and (pointer: fine) {
  .tk-newops__dot:hover::after { background: color-mix(in srgb, var(--c-paper) 75%, transparent); }
}
.tk-newops__dot:focus-visible { outline: 2px solid var(--c-paper); outline-offset: -6px; border-radius: 50%; }

/* Затемнение под метрики (345:33549). Не тень, а градиент;
   альфа берётся от токена через color-mix. В макете здесь #0a1a0f 0.85 —
   на единицу по каналу мимо --c-ink-green, беру токен. */
.tk-newops__figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%; /* 260 из 470 — доля, чтобы пережить смену пропорции на адаптиве */
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--c-ink-green) 85%, transparent) 100%);
  pointer-events: none;
}

/* ── Метрики (345:33550) ────────────────────────────────────────────────── */
.tk-newops__stats {
  position: absolute;
  z-index: 1; /* поверх ::after */
  left: var(--s-card);
  bottom: var(--s-card);
  display: flex;
  gap: var(--s-16); /* в макете 56, ближайшие шаги 48 и 64 */
  color: var(--c-paper);
  white-space: nowrap;
}
.tk-newops__stats li {
  display: flex;
  flex-direction: column;
  gap: var(--s-2); /* в макете 6, ближайшие шаги 4 и 8 */
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* Кегль 52 совпадает с героем на этой ширине, интерлиньяж подтянут
     к тому же 1.05: раньше он приходил токеном (0.92) и после правки
     героя расходился с ним на глаз. */
  .tk-newops__title { font-size: 52px; line-height: 1.05; }
  .tk-newops__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-8);
  }
  .tk-newops__lead { width: auto; max-width: 560px; }
  .tk-newops__figure { aspect-ratio: 3 / 2; }
  .tk-newops__stats { gap: var(--s-10); }
}

@media (max-width: 680px) {
  .tk-newops__title { font-size: 34px; letter-spacing: -0.03em; }
  .tk-newops__cta { flex-direction: column; align-items: stretch; }
  .tk-newops__figure { aspect-ratio: 4 / 5; }
  .tk-newops__figure::after { height: 60%; }
  .tk-newops__stats {
    flex-direction: column;
    gap: var(--s-4);
    left: var(--s-5);
    bottom: var(--s-5);
  }
}


/* ═══ Отступы между блоками главной ════════════════════════════════════════
   Канонический .tk-section даёт --s-section и сверху, и снизу, поэтому между
   двумя соседними блоками выходило 92 + 92 = 184. В макете (413:10697)
   у секций padding-top: 0 и padding-bottom: 92 — кадры стоят вплотную,
   и просвет между блоками ровно 92. Замерено по всем одиннадцати секциям.

   Правило заужено до главной классом .tk-home на <main>: на внутренних
   страницах секций одна-две, и симметричные поля там уместны.

   Просвет между блоками — 120 по решению заказчика (в макете 92).
   Исключение одно: у «Новых возможностей» сверху 72 — это первый блок
   после героя, там макетное значение оставлено.

   В макете перед «Прайс-листом» просвет был двойной: ему предшествует
   тёмная карточка оборудования, и вплотную они читались бы как одна
   секция. При общем просвете 120 двойной дал бы 240 — снято, теперь
   везде одинаково. Вернуть — одна строка: .tk-home .tk-price { padding-top: 120px }. */
.tk-home .tk-section { padding-top: 0; padding-bottom: 120px; }
.tk-home .tk-newops  { padding-top: 72px; }

/* На телефоне макет (413:3484) даёт симметричные 44 сверху и снизу —
   между блоками 88. Токен --s-section на этой ширине равен 56, то есть
   давал 112. Заказчик выбрал 50 — середину между макетными 44 и прежними 56;
   между блоками получается 100. */
@media (max-width: 680px) {
  .tk-home .tk-section,
  .tk-home .tk-newops,
  .tk-home .tk-price { padding-block: 50px; }
}


/* ═══════════ услуги ═══════════ */
/* ТОМОКО — раскладка секций «Услуги», «Новое оборудование», «Прайс».
   Подключать строго после tokens.css, base.css, components.css.

   Здесь ТОЛЬКО раскладка этих трёх секций. Кнопки, вкладки, чипы,
   карточки услуг и строки прайса берутся из components.css как есть
   и не переопределяются: если компонент не совпал с макетом, здесь
   стоит модификатор с префиксом секции, а не правка базового класса.
   Теней нет ни одной — элевация только цветом. */


/* ══ Услуги ═══════════════════════════════════════════════════
   Секция: .tk-section (92/92). В Figma у кадра верхнего поля нет
   (заголовок на y=0, отбивку давала секция выше) — приведено
   к каноническому ритму секций, ради него отклонение принято. */

/* Кикер под названием услуги. В компоненте .tk-card-service такого
   элемента нет — это содержимое конкретно этой секции. */
.tk-services__kicker {
  margin-top: var(--s-2);           /* макет 7px → ближайший шаг сетки 8 */
  color: var(--c-paper-75);   /* --c-paper с альфой 0.75, замер Figma 345:33567;
                                       токена под белый с прозрачностью нет */
}

/* Кнопка догрузки под рядом карточек: просвет 24, как в макете. */
/* ══ Раскрытие списка услуг ═══════════════════════════════════
   В разметке лежат все карточки, видны первые четыре. Прячем nth-child,
   а не отдельным классом на каждой: класс пришлось бы проставлять
   в чанке карточки, а он общий с каталогом /uslugi/, где скрывать нечего.
   Открывает menu.js, переключая .is-open на самом списке. */
.tk-services__list > li:nth-child(n+5) { display: none; }
.tk-services__list.is-open > li { display: revert; }

/* Стрелку меняет menu.js, подставляя ▼ или ▲. Поворота здесь БЫТЬ НЕ ДОЛЖНО:
   с ним подмена символа и rotate(180deg) складывались, и в раскрытом
   состоянии «СВЕРНУТЬ СПИСОК ▲» снова смотрел вниз. */
.tk-services__caret { display: inline-block; }

.tk-services__more {
  margin-top: var(--s-gutter);
  display: flex;
  justify-content: center;
}


/* ══ Новое оборудование ═══════════════════════════════════════ */

/* Зелёная плашка на всю ширину контейнера. Градиент тот же, что
   у .tk-final в components.css, только развёрнут по горизонтали
   (замер Figma 345:33603). Крайние стопы #268034 и #17532a в палитре
   отсутствуют, конечная точка — токен --c-forest. */
.tk-equipment__card {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12);
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--c-paper);
  background: var(--g-green-x);
}

.tk-equipment__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);                  /* 24 между всеми блоками колонки, как в макете */
}

/* Показания. Маркер рисуется псевдоэлементом: SVG-эллипс из макета
   не нужен, это обычный белый круг. */
.tk-equipment__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);                  /* макет 10px → ближайший шаг сетки 12 */
  width: 100%;
}
.tk-equipment__list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.tk-equipment__list li::before {
  content: "";
  flex: none;
  /* Диаметр 6 — точное значение макета. Шаг сетки 8 здесь давал маркер
     заметно крупнее нарисованного, а у круглой точки округление видно. */
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  /* Было currentColor: список набран белым по зелёному, и маркеры выходили
     белыми. В макете они оранжевые — это единственный акцент в блоке. */
  background: var(--c-orange);
}

/* Сноска про ОМС набрана метрикой label-12, но это предложение,
   а не лейбл: капс с .t-label-sm снимаем, иначе ломается правило
   «капс только на лейблах и кнопках». */
.tk-equipment__note {
  max-width: 616px;                 /* замер Figma; токена ширины текстовой колонки нет */
  text-transform: none;
}

/* Фото 440×400, скругление --r-image (20) — мельче карточного. */
.tk-equipment__media {
  flex: 0 0 440px;                  /* замер Figma; токена ширины медиаколонки нет */
  max-width: 440px;
}
.tk-equipment__media img {
  width: 100%;
  aspect-ratio: 440 / 400;
  object-fit: cover;
  border-radius: var(--r-image);
}


/* ══ Прайс ════════════════════════════════════════════════════ */

/* Просвет вкладки → таблица → сноска. В макете везде 28px,
   приведено к шагу сетки 24 (--s-6). */
.tk-price__panel { margin-top: var(--s-6); }
.tk-price__panel[hidden] { display: none; }

/* Плашка под таблицей: подложка --c-mist, скругление карточное.
   Паддинги 8 / 32 / 20 из макета, все попадают в токены. */
.tk-price__box {
  background: var(--c-mist);
  border-radius: var(--r-card);
  padding: var(--s-2) var(--s-card) var(--s-5);
}

/* Строка-шапка колонок использует ту же сетку .tk-price-row,
   поэтому колонки совпадают с данными до пикселя. На мобильном
   .tk-price-row переезжает в две колонки и шапка теряет смысл. */
@media (max-width: 680px) {
  .tk-price__cols { display: none; }
}

/* У последней строки разделитель убираем: он упирался бы
   в нижний край плашки. Правило локальное, .tk-price-row не трогаем. */

.tk-price__footnote {
  margin-top: var(--s-6);           /* макет 28px → шаг сетки 24 */
  max-width: 809px;                 /* замер Figma; токена под ширину сноски нет */
  text-transform: none;             /* .t-label-sm даёт капс, а это предложение */
}


/* ══ Адаптив ══════════════════════════════════════════════════
   Сетка карточек 4→2→1 и перестроение строки прайса уже описаны
   в base.css и components.css. Здесь только то, что специфично
   для этих секций. */

@media (max-width: 1100px) {
  .tk-equipment__card { gap: var(--s-8); padding: var(--s-8); }
  .tk-equipment__media { flex-basis: 340px; }   /* пропорционально сжатая медиаколонка, токена нет */
}

@media (max-width: 680px) {
  /* Карточка оборудования разворачивается в колонку, фото уходит
     наверх, кнопка растягивается на всю ширину. */
  .tk-equipment__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-6);
    padding: var(--s-card);
  }
  .tk-equipment__media { order: -1; flex-basis: auto; max-width: none; }
  .tk-equipment__text .tk-btn { width: 100%; }
  /* Принудительный перенос в заголовке нужен только на широком экране. */
  .tk-equipment__br { display: none; }
}


/* ══ Прайс: раздел ОМС ════════════════════════════════════════
   Услуги по ОМС бесплатны, колонки «Стоимость» у них нет.
   Сетка строки задана в components.css на три колонки — здесь
   переопределяем на две, иначе название висит в узкой средней
   колонке, а справа зияет пустое место под цену. */
.tk-price__box--oms .tk-price__cols {
  grid-template-columns: var(--l-price-code, 160px) 1fr;
}

/* ═══════════ люди ═══════════ */
/* ТОМОКО — раскладка секций «Врачи», «Ценности», «Отзывы».
   Подключать строго после tokens.css, base.css, components.css:
   часть правил ниже — модификаторы поверх канонических компонентов,
   они работают только при таком порядке (специфичность равная,
   выигрывает то, что объявлено позже).

   Здесь ТОЛЬКО раскладка этих трёх секций. Кнопки, карточка врача,
   карточка ценности, карточка отзыва, точки слайдера и круглые
   кнопки-иконки берутся из components.css как есть и не
   переопределяются: где макет расходится с компонентом, рядом стоит
   модификатор с префиксом секции.
   Теней нет ни одной — элевация только цветом. */


/* ══ Врачи · 345:33678 ════════════════════════════════════════
   Секция обёрнута в канонический .tk-section (92/92). В Figma
   у кадра верхнего поля нет — отбивку сверху давала предыдущая
   секция; приведено к общему ритму страницы, как в «Услугах».
   Сетка карточек — .tk-grid.tk-grid--4, просвет 24 по обеим осям
   уже задан в base.css, отдельного класса ряда не нужно. */

/* Окно портрета становится системой координат для пилюли «К ВРАЧУ»:
   сам .tk-card-doctor__photo позиционирование не задаёт. */
.tk-doctors__photo { position: relative; }

/* Пилюля «К ВРАЧУ» — 16 от правого и нижнего края окна (345:33684).
   Кнопка каноническая (.tk-btn.tk-btn--sm.tk-btn--mist), модификатор
   добавляет только положение и зелёную надпись из макета:
   у .tk-btn--mist текст чернильный. */
.tk-doctors__cta {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  color: var(--c-brand-green);
}

/* Ховера в макете нет — состояние собрано по логике кита:
   заливка --c-brand-green, надпись --c-paper. Согласовать. */
.tk-card-doctor:hover .tk-doctors__cta,
.tk-card-doctor:focus-visible .tk-doctors__cta {
  background: var(--c-brand-green);
  color: var(--c-paper);
}


/* ══ Ценности · 345:33765 ═════════════════════════════════════ */

/* Плитка карточки: в макете 384×336 с заливкой --c-mist, полями 32
   и радиусом 24. Канонический .tk-card-value описывает только колонку
   «иконка → номер → заголовок → текст» с просветом 16, плитки в нём
   нет — она добавлена здесь, базовый класс не трогаем.
   Поля на мобильных сжимаются сами: --s-card в tokens.css 32 → 20. */
.tk-values__card {
  padding: var(--s-card);
  background: var(--c-mist);
  border-radius: var(--r-card);
}


/* ══ Отзывы · 345:33783 ═══════════════════════════════════════ */

/* Карточка площадки (588×103): готового компонента под неё в ките
   нет, это раскладка конкретной секции. Плоская, белая, с волосяной
   рамкой — тени нет, отделяется только обводкой.
   Толщина 1.5px взята из кита (.tk-btn--secondary, .tk-tab). */
.tk-reviews__platform {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-card);      /* макет 26/32 → ближайший шаг 24 */
  border: var(--bw-outline) solid var(--c-hairline);
  border-radius: var(--r-card);
}

.tk-reviews__logo {
  flex: none;
  width: var(--s-12);                     /* 48 — размер логотипа в макете */
  height: var(--s-12);
}
.tk-reviews__logo img { width: 100%; height: 100%; }

.tk-reviews__platform-data {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.tk-reviews__rating {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  white-space: nowrap;
}

/* Отбивка блоков секции: в макете 28, шага 28 в ритме нет — берём 24. */
.tk-reviews__slider { margin-top: var(--s-6); }

/* ══ Лента отзывов ════════════════════════════════════════════
   Горизонтальная прокрутка с привязкой. Ничего не «сдвигаем»
   трансформами: браузер сам даёт свайп, инерцию и клавиатуру,
   а стрелки и точки просто вызывают scrollTo.
   Полосу прокрутки прячем — листают точками и стрелками. */
.tk-reviews__track {
  /* position ОБЯЗАТЕЛЕН, не для позиционирования.
     Без него лента, будучи контейнером прокрутки, всё равно отдавала
     своё переполнение документу: при экране 1440 страница получала
     ширину 3824 и её можно было утащить вбок на 800 px.
     Проверено перебором: snap и max-width не влияют, помогает только
     position (или contain: paint на обёртке). */
  position: relative;

  /* Явную сетку от .tk-grid--3 снимаем: с grid-auto-flow: column её три
     колонки остаются первыми и сжимаются по содержимому (211 px вместо
     384), а нужную ширину получают только карточки с четвёртой. */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--s-6) * 2) / 3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: var(--s-1);
}
.tk-reviews__track::-webkit-scrollbar { display: none; }
.tk-reviews__track > li { scroll-snap-align: start; }
.tk-reviews__track:focus-visible { outline: 2px solid var(--c-brand-green); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tk-reviews__track { scroll-behavior: auto; }
}

/* Точки строит menu.js. Активная — вытянутая пилюля, как в макете. */
.tk-dots button {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-hairline);
  transition: width .18s ease, background-color .18s ease;
}
.tk-dots button[aria-selected="true"] {
  width: 28px;
  background: var(--c-brand-green);
}
.tk-dots button:focus-visible { outline: 2px solid var(--c-brand-green); outline-offset: 3px; }

/* Стрелка недоступна, когда листать в эту сторону некуда. */
.tk-reviews__arrows button[disabled] { opacity: .35; cursor: default; }

/* Карточка отзыва тянется до высоты ряда: звёзды сверху, автор снизу.
   Заливку, поля и радиус даёт .tk-card-review. */
.tk-reviews__card {
  height: 100%;
  justify-content: space-between;
}

/* Имя автора внутри .tk-card-review__author: компонент капитализирует
   подпись целиком, а в макете имя — отдельная строка в обычном
   регистре, площадка под ним капсом. Ступень имени — body. */
.tk-reviews__author-name {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  text-transform: none;
  color: var(--c-ink-green);
}

/* Управление слайдером: точки по центру полосы, стрелки справа.
   В макете центр держала фиктивная распорка слева — здесь её роль
   играет пустая первая колонка сетки. */
.tk-reviews__controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: var(--s-6);
}
.tk-reviews__controls .tk-dots { grid-column: 2; justify-content: center; }

.tk-reviews__arrows {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: var(--s-3);
}

/* «Вперёд» — активная стрелка с зелёной заливкой (345:33846).
   У .tk-icon-btn залитого варианта в ките нет; если такая стрелка
   появится ещё где-нибудь, вариант стоит завести в components.css. */
.tk-reviews__next {
  background: var(--c-brand-green);
  border-color: var(--c-brand-green);
  color: var(--c-paper);
}
.tk-reviews__next:hover {
  background: var(--c-green-deep);
  border-color: var(--c-green-deep);
  color: var(--c-paper);
}


/* ══ Адаптив ══════════════════════════════════════════════════
   Сетки 4→2→1 и 3→2→1, поля контейнера и типографическая шкала
   уже перестраиваются в base.css и tokens.css. Здесь только то,
   что специфично для этих секций. */

@media (max-width: 1100px) {
  /* Карточка площадки сужается: название и адрес переезжают
     в отдельную строку над рейтингом и кнопкой. */
  .tk-reviews__platform { flex-wrap: wrap; row-gap: var(--s-4); }
  .tk-reviews__platform-data { flex-basis: 100%; order: -1; }
}

@media (max-width: 680px) {
  /* Кнопка «ЧИТАТЬ» занимает всю ширину карточки площадки. */
  .tk-reviews__platform .tk-btn { flex: 1 1 100%; }

  /* Полоса управления в две колонки: точки слева, стрелки справа. */
  .tk-reviews__controls { grid-template-columns: 1fr auto; }
  .tk-reviews__controls .tk-dots { grid-column: 1; justify-content: flex-start; }
  .tk-reviews__arrows { grid-column: 2; }
}

/* ═══════════ низ ═══════════ */
/* ТОМОКО — раскладка секций низа главной:
   «Акции», «Новости и события», «Оптика», финальный блок (CTA + подвал).
   Подключать строго после tokens.css → base.css → components.css.

   Здесь ТОЛЬКО раскладка этих четырёх секций. Кнопки, чипы, карточка статьи,
   градиентная поверхность финала, колонки и списки подвала, соцкнопки берутся
   из components.css как есть. Где компонент не совпал с макетом, стоит
   модификатор с префиксом секции, а не правка базового класса.
   Теней нет ни одной — элевация только цветом. */


/* ══ Акции · Figma 345:33848 ══════════════════════════════════
   Сетка 3×384 и просвет 24 — это .tk-grid.tk-grid--3.
   Карточка — .tk-card-post: обложка с чипом поверх и заголовок.
   Отличие макета: карточка положена в белую коробку с обводкой. */

.tk-promos__list > li { display: flex; }

.tk-promos__card {
  width: 100%;
  gap: 0;                          /* просвет даёт паддинг коробки, не .tk-card-post */
  background: var(--c-paper);
  border: var(--bw-outline) solid var(--c-hairline);   /* та же толщина, что у .tk-btn--secondary; токена обводки нет */
  border-radius: var(--r-card);
  overflow: hidden;
  transition: background-color .18s ease, border-color .18s ease;
}
.tk-promos__card:hover,
.tk-promos__card:focus-visible {
  background: var(--c-mist);
  border-color: var(--c-brand-green);
}

/* Обложка внутри коробки: собственных скруглений не имеет — углы режет
   карточка, — и кадр здесь шире карточного, 384×230 вместо 282×190. */
.tk-promos__card .tk-card-post__cover {
  border-radius: 0;
  aspect-ratio: 384 / 230;
}

.tk-promos__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-card);          /* макет 26×28 → канонический отступ карточки 32 */
}

/* Бейдж «АКЦИЯ» — оранжевый чип, посаженный на обложку.
   Позиция своя: 20/20 вместо 12/12 у .tk-card-post__date. */
.tk-promos__badge {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
}

.tk-promos__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.tk-promos__card:hover .tk-promos__meta .c-brand { color: var(--c-green-deep); }


/* ══ Новости и события · Figma 345:33881 ══════════════════════
   Сетка 4×282 и карточка статьи совпали с китом полностью:
   обложка --r-image, чип даты в левом верхнем углу, заголовок body-lg.
   Здесь только выравнивание карточек по высоте ряда. */

.tk-blog__list > li { display: flex; }

.tk-blog__card { width: 100%; height: 100%; }

/* «ЧИТАТЬ →» прижимается к низу, чтобы у карточек с разной длиной
   заголовка нижняя строка стояла на одной линии. */
.tk-blog__more { margin-top: auto; }
.tk-blog__card:hover .tk-blog__more { color: var(--c-green-deep); }


/* ══ Оптика · Figma 345:33915 ═════════════════════════════════
   Плашка mist с фото слева. Плоская элевация цветом, тени нет. */

.tk-optics__card {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-6) var(--s-10) var(--s-6) var(--s-6);
  background: var(--c-mist);
  border-radius: var(--r-card);
}

.tk-optics__media { flex: none; width: 420px; }   /* замер Figma; токена ширины медиаколонки нет */
.tk-optics__media img {
  width: 100%;
  aspect-ratio: 420 / 280;
  object-fit: cover;
  border-radius: var(--r-card);
}

.tk-optics__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;         /* кнопка не растягивается на ширину колонки */
  gap: var(--s-4);
  min-width: 0;
}


/* ══ Финальный блок · Figma 345:33924 ═════════════════════════
   Градиент и шов — .tk-final и .tk-final__seam из components.css.
   Ниже только раскладка CTA, подвала и плашек партнёров. */

/* На градиенте приглушённый текст не может быть --c-fog: base.css
   переключает .c-muted на белый с прозрачностью только внутри
   .tk-section--green/--forest. Здесь поверхность та же, правило то же. */
.tk-final .c-muted { color: var(--c-paper-66); }

/* ══ Окно записи внутри подвала ═══════════════════════════════
   Разметка окна лежит в подвале, потому что подвал общий для всех
   страниц. Но панель окна БЕЛАЯ, а правило выше красит весь
   приглушённый текст подвала в белый — подзаголовок «Оставьте
   контактные данные…» пропадал совсем, белым по белому.
   Место правила именно здесь: components.css подключается раньше
   sections.css и проигрывает ему при равной специфичности. */
.tk-final .tk-modal .c-muted,
.tk-final .tk-modal .tk-check__text { color: var(--c-fog); }
.tk-final .tk-modal,
.tk-final .tk-modal .tk-field__label { color: var(--c-ink-green); }
.tk-final .tk-modal .tk-check__text a,
.tk-final .tk-modal__phone a { color: var(--c-green-deep); }

/* ── CTA · 345:33925 ── */
.tk-final__cta-inner {
  display: flex;
  align-items: center;
  gap: var(--s-12);                /* макет 56 → шаг сетки 48 */
  /* Вертикальный отступ живёт только на .tk-final__cta (--s-16 = 64).
     Здесь он стоял вторым слоем и в сумме давал 160 пикселей: под
     фотографией зияла пустота почти в полтора её роста. */
}
.tk-final__cta-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
}
.tk-final__cta-media { flex: none; width: 520px; }   /* замер Figma; токена нет */
.tk-final__cta-media img {
  width: 100%;
  aspect-ratio: 520 / 380;
  object-fit: cover;
  border-radius: var(--r-card);
}

/* ── Подвал · 345:33934 ──
   Верхнее поле даёт .tk-footer__cols (padding-block --s-16). */
.tk-final__footer { padding-bottom: var(--s-10); }

.tk-final__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}
.tk-final__address a:hover,
.tk-final__contacts a:hover { color: var(--c-orange); }

.tk-final__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
/* .tk-footer__title несёт margin-bottom 16 — внутри колонки контактов
   просветы задаёт gap, поэтому собственный отступ заголовка снимаем. */
.tk-final__contacts .tk-footer__title { margin-bottom: 0; }
.tk-final__hours { line-height: 1.5; }   /* три строки режима работы, плотность body 1.33 слишком тесная */

/* Плашки партнёров и карты — ряд под колонками. */
.tk-final__marks {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  flex-wrap: wrap;
  padding-bottom: var(--s-12);
}
.tk-final__plates {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.tk-final__plates img {
  border-radius: var(--r-image);   /* макет 16 → ближайший токен 20 */
  object-fit: contain;
  /* Высоту задаём явно: исходники пришли разного размера, и плашка
     ПроДокторов стояла 74 пикселя против 100 у двух соседних —
     в ряду это читалось как съехавшая вёрстка.
     object-fit: contain уже стоит, пропорции не поедут. */
  height: 100px;
  width: auto;
}

.tk-final__maps {
  margin-left: auto;
  text-align: right;
}
.tk-final__maps .tk-footer__title { margin-bottom: var(--s-2); }
/* Модификатор к .tk-footer__list: карты стоят строкой через точку,
   а не колонкой. Базовый список не трогаем. */
.tk-final__maps-list {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
}
.tk-final__maps-list li + li::before {
  content: "·";
  margin-right: var(--s-2);
  color: var(--c-paper-40);   /* тот же приём, что у разделителей подвала; токена нет */
}

.tk-final__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-top: var(--s-6);
}
/* Копирайт набран метрикой label-12, но это предложение с номером
   лицензии, а не лейбл: капс снимаем. */
.tk-final__copy {
  max-width: 700px;                /* замер Figma; токена ширины строки нет */
  text-transform: none;
  line-height: 1.5;
}


/* ══ Адаптив ══════════════════════════════════════════════════
   Сетки 3→2→1, 4→2→1, колонки подвала 4→2→1 и перенос .tk-sec-head
   описаны в base.css и components.css. Здесь только своё. */

@media (max-width: 1100px) {
  .tk-optics__card { gap: var(--s-8); padding: var(--s-6); }
  .tk-optics__media { width: 340px; }   /* пропорционально сжатая медиаколонка, токена нет */

  .tk-final__cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-10);
    padding-block: var(--s-20);
  }
  .tk-final__cta-media { width: 100%; }

  .tk-final__maps { margin-left: 0; text-align: left; width: 100%; }
  .tk-final__maps-list { justify-content: flex-start; }
}

@media (max-width: 680px) {
  /* Плашка оптики разворачивается в колонку, фото уходит наверх. */
  .tk-optics__card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-card);
  }
  .tk-optics__media { width: 100%; order: -1; }
  .tk-optics__body .tk-btn { align-self: stretch; }

  .tk-final__cta-text .tk-btn { align-self: stretch; }
  .tk-final__marks { gap: var(--s-6); padding-bottom: var(--s-8); }
  .tk-final__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

/* Секция CTA внутри финального блока. Своей заливки не имеет — градиент
   даёт .tk-final; здесь только вертикальный ритм и цель якоря #zapis. */
.tk-final__cta { padding-block: var(--s-16); }
@media (max-width: 680px) {
  .tk-final__cta { padding-block: var(--s-12); }
}


/* ══ Перенесено из собранного sections.css ════════════════════
   Правило было дописано прямо в css/sections.css в обход .build,
   и первая же пересборка стёрла бы его молча. Место ему здесь. */
.tk-top { position: relative; }


/* ══ Хвостовое действие секции ════════════════════════════════
   В мобильном макете кнопка «ко всему разделу» стоит под
   карточками во всю ширину колонки (413:3648 прайс, 413:3713
   врачи, 413:3788 акции, 413:3819 блог), а не в шапке секции.
   Перенести её медиазапросом нельзя — это чужой ребёнок,
   поэтому в разметке два элемента, и здесь оба выключены:
   на десктопе действие остаётся в шапке. Включает их
   mobile-m2/m3 поимённо, секция за секцией. */
.tk-sec-more,
.tk-sec-head__link { display: none; }