/*
Theme Name: СТОМА-Н
Theme URI: https://стоматология-тамбов.рф/
Author: Webtex
Author URI: https://web-tex.pro/
Description: Корпоративная тема стоматологических клиник СТОМА-Н. Контент управляется через ACF, услуги, специалисты, клиники, прайс и документы вынесены в отдельные разделы.
Version: 1.0.0
Text Domain: stoman
Requires at least: 6.4
Requires PHP: 8.0
*/

.form-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.wide-editorial-image{display:block;width:100%;max-height:620px;object-fit:cover;border-radius:14px}
.footer-dev{margin-left:auto}
a,a:hover,a:focus,a:active{text-decoration:none!important}

/* Content-led motion system. JS only adds these classes when motion is allowed. */
.motion-ready .motion-reveal{opacity:0;transform:translate3d(0,38px,0);filter:blur(5px);transition:opacity .75s cubic-bezier(.2,.72,.2,1),transform .9s cubic-bezier(.2,.72,.2,1),filter .7s ease;transition-delay:var(--motion-delay,0ms)}
.motion-ready .motion-reveal.motion-from-left{transform:translate3d(-46px,0,0)}
.motion-ready .motion-reveal.motion-from-right{transform:translate3d(46px,0,0)}
.motion-ready .motion-reveal.is-visible{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.motion-ready .motion-image{clip-path:inset(0 0 100% 0 round 14px);transition:clip-path 1.05s cubic-bezier(.22,.8,.2,1);transition-delay:var(--motion-delay,0ms)}
.motion-ready .motion-image.is-visible{clip-path:inset(0 0 0 0 round 14px)}
.motion-ready .motion-line{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.72,.2,1);transition-delay:var(--motion-delay,0ms)}
.motion-ready .motion-line.is-visible{transform:scaleX(1)}
.motion-ready .hero-photo{transform:scale(1.035) translate3d(0,var(--parallax-y,0px),0);will-change:transform}
.motion-ready .journey-section.is-story-active .route-progress{stroke-dashoffset:360}
.motion-ready .journey-section.is-story-active .route circle{animation:route-node .55s cubic-bezier(.2,.72,.2,1) both;animation-delay:calc(var(--node-index,0) * 180ms + 350ms)}
.motion-ready .doctor-photo img,.motion-ready .catalog-card__media img{transition:transform .75s cubic-bezier(.2,.72,.2,1),filter .5s ease}
.motion-ready .doctor:hover .doctor-photo img,.motion-ready .catalog-card:hover .catalog-card__media img{transform:scale(1.035)}
@keyframes route-node{0%{opacity:.25;transform:scale(.35);transform-origin:center}70%{transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.motion-reveal,.motion-image,.motion-line,.hero-photo,.route circle{animation:none!important;transition:none!important;transform:none!important;filter:none!important;clip-path:none!important;opacity:1!important}}

/* Раскрытие снимка идёт по самому изображению. Если обрезать контейнер, его
   площадь становится нулевой и IntersectionObserver перестаёт его замечать —
   картинка остаётся скрытой навсегда. */
.motion-ready .motion-image{clip-path:none}
.motion-image{--reveal-radius:14px}

/* Срезанный верхний левый угол снимка заменён на ровное скругление. */
.hero-visual{border-radius:16px;--reveal-radius:16px}
.hero-photo{animation:none}
@media(max-width:800px){.hero-visual{border-top-left-radius:16px}}
@media(max-width:560px){.hero-visual{border-top-left-radius:16px}}

.motion-ready .motion-image>img{animation:none;clip-path:inset(0 0 100% 0 round var(--reveal-radius));transition:clip-path 1.05s cubic-bezier(.22,.8,.2,1);transition-delay:var(--motion-delay,0ms)}
.motion-ready .motion-image.is-visible>img{clip-path:inset(0 0 0 0 round var(--reveal-radius))}

/* Кнопки и ссылки читались мельче окружающего текста. */
.button{font-size:16px}
.button.small{font-size:14px}
.button.light{font-size:15px}
.text-link{font-size:15px}
.hero-secondary{font-size:15px}
.nav{font-size:15px}
.mobile-nav a{font-size:16px}
.header-phone{font-size:16px}
.topbar{font-size:13px}
.documents a,.document-row a,.footer-columns a,.footer-columns p,.side-panel__links a{font-size:15px}
.footer-links{font-size:13px}
.breadcrumbs{font-size:14px}
@media(max-width:800px){
  .button{font-size:15px}
  .button.small{font-size:13px}
  .text-link,.hero-secondary{font-size:14px}
  .topbar{font-size:12px}
}
@media(max-width:560px){
  .button{font-size:15px}
  .mainbar>.button{font-size:12px}
  .hero-secondary{font-size:13px}
}

/* ===== Модальные окна ===== */
html.has-modal{overflow:hidden;padding-right:var(--scrollbar-width,0px)}
html.has-modal .cookie-notice{right:calc(20px + var(--scrollbar-width,0px))}
dialog.modal{border:0;padding:0;max-width:min(560px,calc(100vw - 32px));width:100%;background:transparent;color:var(--ink);overflow:visible}
dialog.modal::backdrop{background:#0d1b33cc;backdrop-filter:blur(3px)}
dialog.modal .modal__inner{position:relative;background:var(--white,#fff);border-radius:18px;padding:38px 38px 32px;box-shadow:0 28px 70px #0b1a3340;max-height:calc(100vh - 48px);overflow-y:auto}
dialog.modal .modal__title{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.2;padding-right:40px}
dialog.modal .modal__text{font-size:16px;color:var(--muted);margin-top:14px;max-width:none}
dialog.modal .appointment-form{margin-top:24px}
/* Safari у кнопки оставляет собственные отступы (padding:1px 6px) и не
   применяет к её содержимому выравнивание grid-контейнера, поэтому крестик
   уезжал вбок. Сбрасываем оформление кнопки и центрируем через flex. */
dialog.modal .modal__close{position:absolute;top:18px;right:18px;width:42px;height:42px;padding:0;-webkit-appearance:none;appearance:none;display:flex;align-items:center;justify-content:center;line-height:0;border:1px solid var(--line);border-radius:50%;background:var(--white,#fff);color:var(--muted)}
dialog.modal .modal__close svg{display:block;width:22px;height:22px}
dialog.modal .modal__close:hover{color:var(--blue);border-color:var(--blue)}
dialog.modal--compact{max-width:min(440px,calc(100vw - 32px));text-align:center}
dialog.modal--compact .modal__title{padding-right:0}
dialog.modal--compact .modal__text{margin-inline:auto}
dialog.modal--compact .button{margin-top:26px;width:100%;justify-content:center;gap:0}
dialog.modal .modal__mark{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:var(--pale);color:var(--blue);margin:0 auto 18px}
dialog.modal--media{max-width:min(760px,calc(100vw - 32px))}
dialog.modal .modal__figure{margin:20px 0 16px}
dialog.modal .modal__figure img{width:100%;border-radius:12px;border:1px solid var(--line)}
@media(max-width:560px){
  dialog.modal .modal__inner{padding:28px 22px 24px;border-radius:14px}
  dialog.modal .modal__title{font-size:25px}
}

/* ===== Уведомление о cookie ===== */
.cookie-notice{position:fixed;right:20px;bottom:20px;left:auto;z-index:60;width:min(600px,calc(100vw - 40px));display:flex;align-items:center;gap:24px;background:var(--white,#fff);border:1px solid var(--line);border-radius:14px;padding:20px 24px;box-shadow:0 18px 44px #0b1a3326}
.cookie-notice p{font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:none;flex:1 1 auto}
.cookie-notice a{color:var(--blue);text-decoration:underline!important;text-underline-offset:3px}
.cookie-notice .button{flex:0 0 auto;gap:0}
@media(max-width:560px){.cookie-notice{right:16px;bottom:16px;width:calc(100vw - 32px);padding:16px;flex-direction:column;align-items:stretch;gap:14px}.cookie-notice .button{justify-content:center}}

/* ===== Поиск =====
   Раньше это были белое поле и квадратная кнопка с одной иконкой на белом фоне:
   форма терялась и не читалась как поиск. Теперь это одна строка-таблетка. */
.search-form{display:flex;align-items:center;gap:10px;max-width:560px;margin-top:28px;padding:6px 6px 6px 18px;background:var(--white,#fff);border:1px solid var(--line);border-radius:999px;transition:border-color .2s,box-shadow .2s}
.search-form:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--focus-ring)}
.search-form__icon{display:grid;place-items:center;flex:0 0 auto;color:var(--muted)}
.search-form__icon svg{width:20px;height:20px}
.search-form__input{flex:1 1 auto;min-width:0;min-height:44px;padding:0;border:0;background:none;font-size:16px;color:var(--ink)}
.search-form__input:focus,.search-form__input:focus-visible{outline:none;box-shadow:none;border:0}
.search-form__input::placeholder{color:#65748a}
.search-form__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-form__submit{flex:0 0 auto;min-height:44px;padding:0 24px;border:0;border-radius:999px;background:var(--blue);color:#fff;font-size:15px;font-weight:650;transition:background .2s,box-shadow .2s}
.search-form__submit:hover{background:#103c9f;box-shadow:0 7px 18px #164bc125}
@media(max-width:560px){
  .search-form{padding-left:14px;gap:8px}
  .search-form__submit{padding:0 18px;font-size:14px}
}

/* ===== Кнопка версии для слабовидящих (плагин BVI) ===== */
.vision{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;border:1px solid var(--line);border-radius:999px;background:var(--white,#fff);color:var(--ink);font-size:12px;font-weight:600;line-height:1;transition:border-color .2s,color .2s,background .2s}
.vision:hover{border-color:var(--blue);color:var(--blue);background:var(--pale)}
.vision__icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pale);color:var(--blue);flex:0 0 auto}
.vision:hover .vision__icon{background:var(--blue);color:#fff}
.vision__icon svg{width:16px;height:16px;stroke-width:1.8}
.vision-note{display:none}
@media(max-width:1150px){.vision__label{display:none}.vision{padding:6px}}
@media(max-width:800px){.topbar .vision{display:inline-flex;margin-left:auto}}

/* ===== Списки фактов, таблицы и надзорные органы ===== */
.fact-list{display:grid;gap:14px;margin:22px 0}
.fact-list>div{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:10px 24px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.fact-list dt{color:var(--muted);font-size:15px;margin:0}
.fact-list dd{margin:0;font-weight:600}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll table{min-width:520px}
.price-table__value{white-space:nowrap;font-weight:650}
.authority-list{display:grid;gap:22px}
.authority-card{border:1px solid var(--line);border-radius:var(--radius,16px);padding:28px}
.authority-card h2{font-size:24px}
.authority-card__scope{color:var(--muted);font-size:15px;margin-top:8px}
.authority-card__links{display:flex;gap:24px;flex-wrap:wrap}
.archive-text{margin-top:48px;max-width:78ch}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.filter-chip{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:14px}
.filter-chip:hover{border-color:var(--blue);color:var(--blue)}
.clinic-card__actions{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.catalog-card__kind{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.article-meta{font-size:14px;color:var(--muted);margin-top:16px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:560px){.fact-list>div{grid-template-columns:1fr;gap:4px}}

/* ===== Поля формы: подсказки об ошибке (паттерн rezina) ===== */
.form__field{position:relative;display:block;margin-bottom:22px}
.form__label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}
.form__label i{font-style:normal;color:#a82c2c}
.form__input.is-error{border-color:#a82c2c}
.form__consent{position:relative}
/* Сообщения об ошибке — абсолютные: появление не сдвигает соседние поля */
.form__notice,.form__consent-notice{position:absolute;left:0;bottom:-18px;font-size:12px;line-height:1.4;color:#a82c2c;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,visibility .2s,transform .2s}
.form__notice.is-visible,.form__consent-notice.is-visible{opacity:1;visibility:visible;transform:none}
.appointment-form .form-row{margin-top:0}
.appointment-form .form-row .form__field{margin-bottom:26px}
.form__error{margin:0 0 16px;padding:12px 16px;border:1px solid #a82c2c59;border-radius:8px;background:#a82c2c0f;color:#a82c2c;font-size:14px;line-height:1.4}
.form__error[hidden]{display:none}

/* ===== Фокус клавиатуры в цветах проекта =====
   Базовая тема давала оранжевый контур с отступом 5px: он выпадал из палитры
   и разрывал плотные блоки. Теперь это синее кольцо с мягким ореолом. */
:root{--focus:var(--blue);--focus-ring:#164bc133}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,details:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* Поля ввода подсвечиваются рамкой и ореолом вместо внешнего контура */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0;border-color:var(--focus);box-shadow:0 0 0 3px var(--focus-ring)}
.form__input.is-error:focus-visible{outline-color:#a82c2c;border-color:#a82c2c;box-shadow:0 0 0 3px #a82c2c26}

/* Кнопки: кольцо снаружи заливки, чтобы читалось на синем и на белом */
.button:focus-visible{outline-offset:3px;box-shadow:0 0 0 5px var(--focus-ring)}
.button.light:focus-visible,.journey-section .button:focus-visible{outline-color:var(--white);box-shadow:0 0 0 5px #ffffff40}
.menu-toggle:focus-visible,.modal__close:focus-visible,.photo-caption a:focus-visible{outline-offset:3px;border-radius:50%}

/* Ссылки в тексте получают подчёркивание, а не только контур */
.text-link:focus-visible,.prose a:focus-visible,.footer-links a:focus-visible,.cookie-notice a:focus-visible{text-decoration:underline!important;text-underline-offset:4px}
.nav a:focus-visible,.mobile-nav a:focus-visible,.filter-chip:focus-visible{outline-offset:4px}
.vision:focus-visible{outline-offset:3px;border-color:var(--blue)}
.checkbox input:focus-visible{outline-offset:3px}

/* Тёмные секции: контур белый, иначе синий по синему не виден */
.journey-section a:focus-visible,.journey-section button:focus-visible,.site-cta a:focus-visible{outline-color:var(--white)}

/* Переход к содержанию виден только с клавиатуры, но должен быть заметен */
.skip:focus{outline:2px solid var(--white);outline-offset:-6px;border-radius:8px}

/* ===== Выпадающие списки ===== */
/* Нативный select виден, пока скрипт не построил свою разметку, поэтому
   у него тоже убрана системная стрелка и нарисована своя. */
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353647c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:20px;cursor:pointer}
select::-ms-expand{display:none}

.form__select{position:relative;display:block}
.form__select-chevron{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted);pointer-events:none;transition:transform .25s var(--ease),color .2s}

/* Кнопка повторяет геометрию поля ввода, чтобы форма читалась одним рядом */
.form__select-button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:14px 46px 14px 15px;background:var(--white,#fff);border:1px solid #bccddd;border-radius:7px;color:var(--ink);font-size:16px;text-align:left;line-height:1.4}
.form__select-button:hover{border-color:#98b2cd}
.form__select.is-open .form__select-button{border-color:var(--blue);box-shadow:0 0 0 3px var(--focus-ring)}
.form__select.is-open .form__select-chevron{transform:translateY(-50%) rotate(180deg);color:var(--blue)}
.form__select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.form__select-list{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:260px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:var(--white,#fff);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px #0b1a3324}
.form__select-list[hidden]{display:none}
.form__select-option{padding:12px 14px;border-radius:7px;font-size:15px;line-height:1.4;cursor:pointer}
.form__select-option.is-active{background:var(--pale);color:var(--blue)}
.form__select-option[aria-selected="true"]{font-weight:650;color:var(--blue)}
.form__select-option[aria-selected="true"].is-active{background:var(--pale)}

/* В модальном окне список не должен обрезаться прокруткой карточки */
dialog.modal .form__select-list{max-height:220px}

@media(max-width:560px){
  .form__select-button{font-size:15px;min-height:50px}
  .form__select-option{padding:11px 12px;font-size:14px}
}

/* Ссылки в согласии подчёркнуты: общий сброс подчёркиваний их снимал */
.form__consent a,.checkbox a{text-decoration:underline!important;text-underline-offset:3px;color:inherit}
.form__consent a:hover,.checkbox a:hover{color:var(--blue)}

/* Ритм формы: раньше отступ поля, отступ ряда и собственный отступ чекбокса
   складывались и оставляли между телефоном и согласием почти полсотни пикселей.
   Подсказка об ошибке переехала под само поле, поэтому запас можно сократить. */
.form__notice,.form__consent-notice{top:100%;bottom:auto;margin-top:4px}
.appointment-form .form__field{margin-bottom:22px}
.appointment-form .form-row{margin-top:0}
.appointment-form .form-row .form__field{margin-bottom:0}
.appointment-form .form__consent{margin:22px 0 24px}
.appointment-form .checkbox{margin:0}

/* ===== Чекбокс согласия =====
   Нативный квадрат с accent-color нельзя было аккуратно подсветить ошибкой:
   рамка и outline на замещаемом элементе выглядели грубо. Поле остаётся в
   разметке и доступно с клавиатуры, а видимый квадрат рисует соседний span. */
.checkbox{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.checkbox input[type="checkbox"]{position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0;pointer-events:none}
.checkbox__box{position:relative;flex:0 0 auto;width:22px;height:22px;margin-top:1px;border:1px solid #bccddd;border-radius:6px;background:var(--white,#fff);transition:background .18s,border-color .18s,box-shadow .18s}
.checkbox__box::after{content:'';position:absolute;left:50%;top:46%;width:11px;height:6px;border-left:2px solid var(--white,#fff);border-bottom:2px solid var(--white,#fff);border-radius:1px;transform:translate(-50%,-50%) rotate(-45deg) scale(.5);opacity:0;transition:opacity .16s,transform .18s var(--ease)}
.checkbox:hover .checkbox__box{border-color:#98b2cd}
.checkbox input:checked+.checkbox__box{background:var(--blue);border-color:var(--blue)}
.checkbox input:checked+.checkbox__box::after{opacity:1;transform:translate(-50%,-50%) rotate(-45deg) scale(1)}
.checkbox input:focus-visible+.checkbox__box{outline:2px solid var(--blue);outline-offset:2px;box-shadow:0 0 0 3px var(--focus-ring)}
.checkbox input:disabled+.checkbox__box{opacity:.55;cursor:not-allowed}
.checkbox__text{font-size:12px;line-height:1.7;color:var(--muted)}

/* Ошибка: подсвечиваем сам квадрат, а не рисуем поверх него вторую рамку */
.form__consent:has(.form__consent-notice.is-visible) .checkbox__box{border-color:#a82c2c;background:#a82c2c0a;box-shadow:0 0 0 3px #a82c2c1f}
.form__consent:has(.form__consent-notice.is-visible) .checkbox__text{color:var(--ink)}

/* ===== Просмотр изображений (Fancybox) в цветах проекта ===== */
.fancybox__container{--f-spinner-color-1:#ffffff33;--f-spinner-color-2:var(--blue);--f-button-hover-bg:var(--blue);--f-button-active-bg:var(--blue);--f-button-color:#fff;--f-button-hover-color:#fff}
.fancybox__backdrop{background:#0d1b33e6}
.fancybox__caption{font:14px/1.6 Manrope,sans-serif;letter-spacing:-.01em;max-width:70ch;margin-inline:auto}
.fancybox__slide .fancybox__content{border-radius:14px;overflow:hidden}
.fancybox__toolbar{--f-button-border-radius:50%}

/* ===== Фиксированная шапка =====
   Полная высота при загрузке, сжатая при прокрутке, скрытая при движении вниз.
   Место под шапку держит отступ body: без него содержимое прыгало бы вверх. */
.header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--white,#fff);transition:transform .35s var(--ease),box-shadow .25s ease}
body{padding-top:var(--header-offset,146px)}
html{scroll-padding-top:calc(var(--header-height,104px) + 20px)}

.header .topbar{overflow:hidden;transition:max-height .28s var(--ease),opacity .2s ease}
.header .mainbar{transition:min-height .28s var(--ease)}

.header.is-scrolled{box-shadow:0 6px 24px #0b1a3314}
.header.is-compact .topbar{max-height:0;min-height:0;opacity:0;pointer-events:none}
.header.is-compact .topbar:after{opacity:0}
.header.is-compact .mainbar{min-height:74px}
.header.is-compact .brand>svg{width:36px;height:41px}
.header.is-compact .brand>span{font-size:23px}

/* Шапка уезжает только вниз по странице и возвращается от первого движения вверх */
.header.is-hidden{transform:translateY(-100%);box-shadow:none}

/* Панель администратора сама фиксирована, шапка встаёт под неё */
body.admin-bar .header{top:32px}
@media screen and (max-width:782px){body.admin-bar .header{top:46px}}
@media screen and (max-width:600px){body.admin-bar .header{top:0}}

/* При открытом меню или модальном окне шапку не прячем */
.header.is-menu-open{transform:none!important}

@media(prefers-reduced-motion:reduce){
  .header{transition:none}
  .header.is-hidden{transform:none}
}
/* Запасная высота до того, как скрипт измерит шапку */
@media(max-width:800px){body{padding-top:var(--header-offset,116px)}}

/* ===== Страница статьи ===== */
.article-hero .article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:26px;font-size:14px;color:var(--muted)}
.article-hero .article-meta span{display:inline-flex;align-items:center;gap:8px}
.article-hero .article-meta svg{width:17px;height:17px;color:var(--blue)}
.article-hero .article-meta time{color:inherit}

/* Кто подтвердил материал. Блок появляется только после медицинской проверки */
.article-review{display:flex;align-items:center;gap:16px;margin:0 0 34px;padding:18px 22px;background:var(--pale);border-radius:14px;font-size:15px;line-height:1.55;color:var(--muted)}
.article-review strong{display:block;font-weight:650;color:var(--ink);font-size:16px;margin-bottom:2px}
.article-review a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.article-review a:hover{color:var(--blue)}
.article-review__photo{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--white,#fff)}
.article-review__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}

/* Оглавление собирается на сервере, работает и без скрипта */
.article-toc{margin:0 0 40px;padding:24px 26px;border:1px solid var(--line);border-radius:14px}
.article-toc h2{font-size:15px!important;margin:0 0 14px!important;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.article-toc ol{margin:0;padding-left:20px;display:grid;gap:9px}
.article-toc li{margin:0;font-size:16px}
.article-toc a{color:var(--ink);text-decoration:none}
.article-toc a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px}

.prose h2{scroll-margin-top:calc(var(--header-height,104px) + 24px)}
.article-sources{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.article-sources h2{font-size:22px!important;margin:0 0 14px!important}
.article-sources ul{font-size:15px;color:var(--muted)}

@media(max-width:560px){
  .article-review{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .article-toc{padding:20px}
}

/* Блок записи на главной — карточка без собственного нижнего отступа,
   из-за чего следующая секция начиналась вплотную к ней. */
section.appointment-section{margin-bottom:100px}
@media(max-width:800px){section.appointment-section{margin-bottom:65px}}
@media(max-width:560px){section.appointment-section{margin-bottom:55px}}

/* ===== Подпись разработчика ===== */
.footer-dev{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:inherit;transition:color .2s ease}
.footer-dev__logo{width:69px;height:16px;flex-shrink:0;fill:none;stroke:none;color:var(--muted);transition:color .2s ease}
.footer-dev:hover,.footer-dev:hover .footer-dev__logo{color:#e7220c}

/* Правая карточка стояла слишком далеко от текста */
.article-layout{gap:56px}
@media(max-width:1150px){.article-layout{gap:40px}}

/* Оглавление раздела «Пациентам»: второй уровень с отступом */
/* Второй уровень отличается только отступом. Приглушённый цвет делал весь
   список нечитаемым там, где все заголовки одного уровня. */
.article-toc__level-3{margin-left:16px;font-size:16px}
.article-toc__level-3 a{color:var(--ink)}
.content-section--pale .article-toc{background:var(--white,#fff)}
/* Длинный юридический текст в одну колонку читался во всю ширину контейнера */
.content-section > .wrap > .prose,.content-section > .wrap > div > .prose{max-width:78ch}

/* ===== Страница контактов ===== */
.contact-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.contact-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius,16px);overflow:hidden;background:var(--white,#fff)}
.contact-card__photo{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--pale)}
.contact-card__photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.contact-card__photo:hover img{transform:scale(1.04)}
.contact-card__photo-note{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#ffffffee;color:var(--ink);font-size:13px;font-weight:600}
.contact-card__photo-note svg{width:16px;height:16px;color:var(--blue)}
/* Тело карточки растягивается на всю высоту, иначе margin-top:auto у кнопок
   прижимал бы их к низу текста, а не к низу самой карточки. */
.contact-card__body{display:flex;flex-direction:column;flex:1;padding:28px 30px 30px}
.contact-card__body h2{font-size:30px;margin-bottom:20px}
.contact-card__facts{display:grid;gap:14px;margin:0 0 22px}
.contact-card__facts>div{display:grid;gap:4px}
.contact-card__facts dt{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.contact-card__facts dt svg{width:16px;height:16px;color:var(--blue)}
.contact-card__facts dd{margin:0;font-size:16px;line-height:1.5}
.contact-card__phone{display:inline-block;font-size:27px;font-weight:650;letter-spacing:-.02em;margin-bottom:10px}
.contact-card__phone:hover{color:var(--blue)}
.contact-card__phones{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.contact-card__phones li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:16px}
.contact-card__phones a:hover{color:var(--blue)}
.contact-card__phones span{font-size:13px;color:var(--muted)}
.contact-card__email{margin:0 0 18px;font-size:15px}
.contact-card__email a{color:var(--blue);text-decoration:underline!important;text-underline-offset:3px}
.contact-card__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.contact-extra{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
@media(max-width:1150px){.contact-cards{gap:24px}.contact-extra{gap:40px}}
@media(max-width:900px){.contact-cards,.contact-extra{grid-template-columns:1fr}}
@media(max-width:560px){
  .contact-card__body{padding:22px 20px 24px}
  .contact-card__body h2{font-size:26px}
  .contact-card__phone{font-size:24px}
}

/* Секция сразу за шапкой страницы: собственный верхний отступ складывался
   с нижним отступом шапки и давал провал почти в двести пикселей. */
.inner-hero + .section,.inner-hero + .content-section{padding-top:12px}
@media(max-width:800px){.inner-hero + .section,.inner-hero + .content-section{padding-top:8px}}

/* ===== Документы: сетка миниатюр ===== */
.document-intro{max-width:78ch;margin-bottom:44px}
.document-group{margin-bottom:56px}
.document-group h2{font-size:26px;margin-bottom:24px}
.document-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px}
.document-card{margin:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white,#fff);transition:border-color .2s,box-shadow .2s}
.document-card:hover{border-color:#b6c8dc;box-shadow:0 14px 32px #0b1a3314}
/* Сканы формата A4: показываем верх листа, где расположены реквизиты */
.document-card__preview{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--pale)}
.document-card__preview img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease)}
.document-card:hover .document-card__preview img{transform:scale(1.03)}
.document-card__preview--file{display:grid;place-items:center;color:var(--blue)}
.document-card__preview--file>svg{width:56px;height:56px}
.document-card__zoom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#ffffffee;color:var(--ink);font-size:13px;font-weight:600;opacity:0;transition:opacity .2s,transform .25s var(--ease)}
.document-card__zoom svg{width:16px;height:16px;color:var(--blue)}
.document-card:hover .document-card__zoom,.document-card__preview:focus-visible .document-card__zoom{opacity:1}
.document-card__body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.document-card__body h3{font-size:17px;line-height:1.4}
.document-card__date{font-size:14px;color:var(--muted);margin:0}
.document-card__flag{margin:0;font-size:12px;line-height:1.5;color:#8a6d1f;background:#fff7e8;border-radius:8px;padding:8px 10px}
.document-card__body .text-link{margin-top:auto;padding-top:6px;font-size:14px;gap:10px}
@media(max-width:560px){
  .document-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
  .document-card__body{padding:14px 14px 16px}
  .document-card__body h3{font-size:15px}
  .document-card__zoom{opacity:1;font-size:12px;padding:6px 12px}
}

/* Первый элемент текста не должен добавлять свой верхний отступ к отступу
   секции: у заголовков в прозе он равен 60px и давал двойной провал. */
.prose > :first-child{margin-top:0}
.side-panel > :first-child{margin-top:0}

/* Боковая карточка липнет к верху под фиксированной шапкой. Ограничение по
   высоте нужно на случай длинной карточки: без него sticky перестаёт работать. */
.side-panel{align-self:start;top:calc(var(--header-height,104px) + 20px);max-height:calc(100vh - var(--header-height,104px) - 40px);overflow-y:auto}
@media(max-width:900px){.side-panel{position:static;max-height:none;overflow:visible}}

/* Карточка поднимается на уровень заголовка страницы. Правая колонка шапки
   пуста, если в ней нет изображения, поэтому наложения не возникает. */
.article-layout{--panel-lift:190px}
/* Между шапкой и текстом может стоять предупреждение о противопоказаниях,
   поэтому смотрим на всю страницу, а не на соседний элемент. */
main:has(.inner-hero:not(:has(.inner-hero__media))) .article-layout > .side-panel{margin-top:calc(-1 * var(--panel-lift))}
@media(max-width:1150px){.article-layout{--panel-lift:150px}}
@media(max-width:900px){main .article-layout > .side-panel{margin-top:0}}

/* Второе действие в шапке страницы было просто ссылкой и терялось рядом с
   заливной кнопкой. Даём ему рамку и одинаковую с ней высоту. */
.inner-hero__actions .text-link{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:60px;padding:18px 26px;border:1px solid var(--line);border-radius:8px;background:var(--white,#fff);color:var(--blue);font-size:16px;font-weight:650;transition:border-color .2s,background .2s,box-shadow .2s}
.inner-hero__actions .text-link:hover{border-color:var(--blue);background:var(--pale)}
.inner-hero__actions .text-link svg{width:20px;height:20px}
@media(max-width:560px){
  .inner-hero__actions{flex-direction:column;align-items:stretch}
  .inner-hero__actions .text-link,.inner-hero__actions .button{width:100%;justify-content:center;min-height:54px;padding-inline:20px}
}

/* Липкие блоки держат зазор под шапкой, пока она на экране. Когда шапка
   уезжает вверх, скрипт обнуляет её вклад в отступ. */
.side-panel{top:var(--sticky-offset,calc(var(--header-height,104px) + 20px));max-height:calc(100vh - var(--sticky-offset,124px) - 20px)}

/* Телефоны в боковой карточке были без реакции на курсор */
.side-panel__links a{transition:color .2s,border-color .2s}
.side-panel__links a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.side-panel__links a:last-child{border-bottom:1px solid var(--line)}

/* Соседние секции на одном фоне складывали свои отступы: 85px снизу плюс
   85px сверху. Фоновые полосы не трогаем, там разделение нужно. */
.content-section:not(.content-section--pale):not(.content-section--blue) + .content-section:not(.content-section--pale):not(.content-section--blue),
.section + .content-section:not(.content-section--pale):not(.content-section--blue),
.content-section:not(.content-section--pale):not(.content-section--blue) + .section{padding-top:0}

/* Карточки каталога залиты тем же светлым тоном, что и секция, поэтому на
   светлом фоне они пропадали. Даём границу, а на светлых полосах — белый фон. */
.catalog-card{border:1px solid var(--line)}
.catalog-card:hover{border-color:#b6c8dc}
.content-section--pale .catalog-card,.clinic-section .catalog-card{background:var(--white,#fff)}
.content-section--pale .catalog-card:hover,.clinic-section .catalog-card:hover{background:var(--white,#fff);border-color:var(--blue)}

/* Боковая карточка залита тем же тоном, что и светлая секция, и на ней
   пропадала. Даём границу, а на светлых полосах — белый фон. */
.side-panel{border:1px solid var(--line)}
.content-section--pale .side-panel{background:var(--white,#fff)}

/* Если в шапке есть изображение, поднимать карточку к заголовку нельзя —
   она наедет на снимок. Но зазор до неё был лишним, подтягиваем под изображение. */
.article-layout{--panel-lift-media:110px}
main:has(.inner-hero:has(.inner-hero__media)) .article-layout > .side-panel{margin-top:calc(-1 * var(--panel-lift-media))}
@media(max-width:1150px){.article-layout{--panel-lift-media:80px}}
@media(max-width:900px){main .article-layout > .side-panel{margin-top:0}}

/* Подписи кнопок в шапке рвались на две строки. Запрещаем перенос внутри
   кнопки, переносим сам ряд. */
.inner-hero__actions{flex-wrap:wrap;row-gap:14px}
.inner-hero__actions .button,.inner-hero__actions .text-link{white-space:nowrap;gap:18px;justify-content:center}
@media(max-width:560px){.inner-hero__actions .button,.inner-hero__actions .text-link{white-space:normal}}

/* ===== Галерея клиники ===== */
.clinic-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.clinic-gallery a{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--pale)}
.clinic-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.clinic-gallery a:hover img{transform:scale(1.04)}
.clinic-gallery a::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#0d1b3352);opacity:0;transition:opacity .25s}
.clinic-gallery a:hover::after,.clinic-gallery a:focus-visible::after{opacity:1}
@media(max-width:900px){.clinic-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:560px){.clinic-gallery{gap:12px}}

/* ===== Галереи внутри перенесённого текста =====
   Блоки старого редактора несли инлайновый градиент и круглую обрезку.
   Приводим их к обычной сетке. */
.prose .wp-block-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0;padding:0;background:none!important}
.prose .wp-block-gallery figure,.prose .wp-block-image{margin:0}
.prose .wp-block-gallery a,.prose .wp-block-image a{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--pale)}
.prose .wp-block-gallery img,.prose .wp-block-image img{width:100%;height:100%;object-fit:cover;border-radius:0!important;transition:transform .5s var(--ease)}
.prose .wp-block-gallery a:hover img,.prose .wp-block-image a:hover img{transform:scale(1.04)}
.prose .wp-block-gallery figcaption,.prose .wp-block-image figcaption{font-size:13px;color:var(--muted);margin-top:8px}
/* Одиночная картинка в тексте не должна тянуться во всю ширину колонки */
.prose > p > img,.prose > img{border-radius:14px;border:1px solid var(--line)}
@media(max-width:900px){.prose .wp-block-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:560px){.prose .wp-block-gallery{gap:12px}}

/* Занятость в карточке вакансии */
.vacancy-card__employment{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-size:14px;color:var(--muted)}
.vacancy-card__employment svg{width:17px;height:17px;color:var(--blue)}

/* Линия у последней ссылки описана ниже правила наведения, поэтому при
   одинаковой специфичности перебивала подсветку. Возвращаем её явно. */
.side-panel__links a:last-child:hover{border-bottom-color:var(--blue)}

/* Ссылки-действия в карточке надзорного органа: рамка вместо голого текста */
.authority-card__links .text-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:8px;background:var(--white,#fff);font-size:15px;transition:border-color .2s,background .2s}
.authority-card__links .text-link:hover{border-color:var(--blue);background:var(--pale)}

/* ===== Юридические страницы =====
   Кегль основного текста обычный, как в остальной прозе. Меньше только
   заголовки: разделов много и в базовом размере они рвут документ. */
.page-legal .prose h2{font-size:26px;margin:48px 0 16px}
.page-legal .prose h3{font-size:20px;margin:32px 0 12px}
.page-legal .prose p,.page-legal .prose ul,.page-legal .prose ol{margin:0 0 20px}
.page-legal .prose li{margin:8px 0}
.page-legal .prose strong{color:var(--ink)}
@media(max-width:800px){
  .page-legal .prose h2{font-size:23px;margin:38px 0 14px}
}

/* Отступ липкой карточки меняется при сжатии и скрытии шапки. Переход той же
   длительности, что и у самой шапки, иначе она успевает уехать раньше. */
.side-panel{transition:top .3s var(--ease),max-height .3s var(--ease),border-color .2s,background .2s}
@media(prefers-reduced-motion:reduce){.side-panel{transition:none}}

/* Вступление раздела: чуть крупнее прозы, ограничено по длине строки */
.patients-intro{max-width:78ch;font-size:19px;line-height:1.8}
.patients-intro p{margin:0 0 18px}
.patients-intro p:last-child{margin-bottom:0}
@media(max-width:800px){.patients-intro{font-size:17px}}

/* Телефон в шапке не реагировал на курсор */
.header-phone{transition:color .2s}
.header-phone small{transition:color .2s}
.header-phone:hover,.header-phone:hover small{color:var(--blue)}

/* Нижний отступ шапки страницы в 72px складывался с отступом первой секции.
   Сокращаем: разделение читается и при меньшем значении. */
.inner-hero{padding-bottom:44px}
@media(max-width:800px){.inner-hero{padding-bottom:32px}}

/* Компактная сетка документов там, где их немного */
.document-grid--compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-width:760px}

/* Телефоны и почта в списках фактов не реагировали на курсор */
.fact-list a,.contact-card__facts a{color:var(--blue);transition:color .2s,text-decoration-color .2s}
.fact-list a:hover,.contact-card__facts a:hover{color:#103c9f;text-decoration:underline!important;text-underline-offset:4px}

/* Развёрнутый подзаголовок раздела: ограничиваем длину строки */
.inner-hero__lead{max-width:70ch}

/* Колонка текста ближе к липкой карточке: документ длинный, строка не должна рваться */
.page-legal .article-layout{gap:40px}
@media(max-width:1150px){.page-legal .article-layout{gap:32px}}

/* ===== Страница «не найдено» =====
   В ряду цифр на месте нуля — контур зуба: пробел вместо страницы. */
.notfound{padding:70px 0 20px;text-align:center}
.notfound__art{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:34px;line-height:1}
.notfound__code{font-size:clamp(96px,14vw,180px);font-weight:600;letter-spacing:-.06em;color:var(--ink)}
.notfound__gap{display:grid;place-items:center;width:clamp(96px,14vw,180px);height:clamp(96px,14vw,180px);border-radius:50%;background:var(--pale)}
.notfound__tooth{width:56%;height:56%;color:var(--blue);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.notfound__tooth--missing{stroke-dasharray:7 8;opacity:.65;animation:notfound-pulse 3.2s ease-in-out infinite}
@keyframes notfound-pulse{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:.9;transform:translateY(-4px)}}
.notfound h1{font-size:clamp(34px,4vw,52px)}
.notfound__lead{max-width:60ch;margin:20px auto 0;font-size:18px;color:var(--muted)}
.notfound .search-form{margin-inline:auto}
.notfound__actions{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:32px}
@media(prefers-reduced-motion:reduce){.notfound__tooth--missing{animation:none}}
@media(max-width:560px){
  .notfound{padding-top:46px}
  .notfound__art{gap:2px;margin-bottom:26px}
  .notfound__lead{font-size:16px}
  .notfound__actions{gap:18px}
}

/* ===== Блок зуботехнической лаборатории ===== */
.lab-block{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.lab-block__text h2{font-size:34px;line-height:1.22;margin-bottom:16px}
.lab-block__text p{font-size:17px;color:var(--muted);margin-bottom:20px;max-width:46ch}
.lab-block__media{border-radius:16px;overflow:hidden;aspect-ratio:8/7;background:var(--white,#fff)}
.lab-block__media img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .lab-block{grid-template-columns:1fr;gap:26px}
  .lab-block__text h2{font-size:29px}
  .lab-block__media{aspect-ratio:4/3}
}

/* Куки-уведомление выезжает снизу и так же уходит при согласии.
   Стартовое состояние задано на самом блоке, класс включает конечное. */
.cookie-notice{opacity:0;transform:translateY(28px) scale(.98);pointer-events:none;transition:opacity .35s ease,transform .45s var(--ease)}
.cookie-notice.is-visible{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.cookie-notice{transition:none;transform:none}}

/* Просмотрщик убирает полосу прокрутки и сдвигает содержимое отступом у body.
   Фиксированные элементы отсчитываются от окна и этот отступ не получают,
   поэтому шапка и уведомление разъезжались с контентом. Сдвигаем их сами. */
body.hide-scrollbar .header{right:calc(var(--f-scrollbar-compensate, 0px) + var(--f-body-margin, 0px))}
body.hide-scrollbar .cookie-notice{right:calc(20px + var(--f-scrollbar-compensate, 0px) + var(--f-body-margin, 0px))}
@media(max-width:560px){body.hide-scrollbar .cookie-notice{right:calc(16px + var(--f-scrollbar-compensate, 0px) + var(--f-body-margin, 0px))}}

/* Таблицы внутри текстовых страниц: тот же язык, что у прайса, но спокойнее. */
.prose .table-scroll{margin:24px 0}
.prose table{width:100%;border-collapse:collapse;font-size:.94em}
.prose th,.prose td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{background:var(--pale);font-weight:600;border-bottom-color:var(--line-strong,var(--line))}
.prose tbody tr:last-child td{border-bottom:none}

/* ===== Прайс-лист =====
   Переключатель клиник: наборы услуг и цены в Тамбове и Уварово разные. */
.price-switch{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.price-switch__item{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:11px 20px;border:1px solid var(--line);border-radius:999px;background:var(--white,#fff);color:var(--ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.price-switch__item:hover{border-color:var(--blue);color:var(--blue)}
.price-switch__item.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.price-switch__count{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--pale);color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.price-switch__item.is-active .price-switch__count{background:#ffffff2e;color:#fff}

/* Прайс читают построчно, поэтому кегль крупнее обычной таблицы.
   Ширины колонок заданы жёстко: разделы идут отдельными таблицами и должны
   совпадать по сетке. */
.price-table{font-size:17px;table-layout:fixed}
.price-table th{font-size:13px}
.price-table__code{width:170px;font-size:15px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.price-table__code span{display:block;white-space:nowrap}
.price-table__code span + span{margin-top:2px}
.price-table th.price-table__code{color:var(--muted)}
.price-table__note{display:block;margin-top:6px;font-size:15px;color:var(--muted)}
.price-table th.price-table__value,.price-table td.price-table__value{width:150px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-table td.price-table__value{font-size:20px;font-weight:600}
.price-board .table-scroll table{min-width:720px}
.price-table__empty{color:var(--muted)}
.price-table [hidden]{display:none}
.price-source{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--muted)}


/* ===== Появление модальных окон =====
   Открытие и закрытие идут через discrete-переходы: окно всплывает,
   подложка проявляется. Браузеры без поддержки показывают окно сразу. */
dialog.modal{opacity:0;transform:translateY(14px) scale(.98);transition:opacity .3s var(--ease),transform .3s var(--ease),overlay .3s allow-discrete,display .3s allow-discrete}
dialog.modal[open]{opacity:1;transform:none}
@starting-style{dialog.modal[open]{opacity:0;transform:translateY(14px) scale(.98)}}
dialog.modal::backdrop{opacity:0;transition:opacity .3s ease,overlay .3s allow-discrete,display .3s allow-discrete}
dialog.modal[open]::backdrop{opacity:1}
@starting-style{dialog.modal[open]::backdrop{opacity:0}}
@media(prefers-reduced-motion:reduce){
  dialog.modal,dialog.modal::backdrop{transition:none}
  dialog.modal{transform:none}
}

/* Ссылка на соцсети в подвале */
.footer-social{display:inline-flex;align-items:center;gap:9px;color:inherit}
.footer-social__icon{width:22px;height:22px;color:var(--blue)}
.footer-social:hover{color:var(--blue)}
.prose .text-link svg{width:20px;height:20px;vertical-align:-4px}

/* ===== Правки футера, хиро-кнопки, сетки услуг, модалки ===== */
/* Футер: первая строка — навигация (Услуги/Клиника/Пациентам), вторая — адреса. */
.footer-columns--nav{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:none;padding-bottom:0}
.footer-columns--clinics{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:28px}
@media(max-width:760px){
  .footer-columns--nav{grid-template-columns:1fr 1fr}
  .footer-columns--clinics{grid-template-columns:1fr}
}
@media(max-width:460px){.footer-columns--nav{grid-template-columns:1fr}}
/* Нижняя строка: противопоказания слева, подпись разработчика справа. */
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px 30px;flex-wrap:wrap;padding-top:22px}
.footer-bottom .footer-disclaimer{margin:0;text-align:left;flex:1 1 auto}
.footer-bottom .footer-dev{flex:0 0 auto;margin:0}
@media(max-width:640px){
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-bottom .footer-disclaimer{text-align:left}
}

/* Вторичная кнопка хиро — с видимой границей. */
.hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:16px 26px;border:1.5px solid var(--line-strong,#c9d6ea);border-radius:8px;text-decoration:none;font-weight:600;transition:border-color .2s,color .2s,background .2s}
.hero-secondary:hover{border-color:var(--blue);color:var(--blue);background:var(--pale)}

/* Блок «Что вас беспокоит» — четыре колонки. */
.catalog-grid--services{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.catalog-grid--services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.catalog-grid--services{grid-template-columns:1fr}}

/* Модалка: html получает padding-right на ширину полосы прокрутки — фиксированную
   шапку сдвигаем на ту же величину, чтобы она не съезжала. */
html.has-modal .header{right:var(--scrollbar-width,0px)}

/* Страница цен: короткий вводный текст не должен оставлять большой пробел под шапкой. */
.content-section--tight{padding-top:36px}
.content-section--tight > .wrap > .prose{margin-bottom:22px}
.content-section--tight > .wrap > .prose:empty{display:none}

/* Селект клиники: значение в одну строку, кнопка постоянной высоты —
   форма не прыгает при смене адреса. */
.form__select-value{min-width:0}
.form__select-button{height:52px}

/* Модалка выровнена по верху с внутренней прокруткой: изменение содержимого
   больше не сдвигает окно по вертикали. */
dialog.modal{margin-top:max(4vh,20px);margin-bottom:max(4vh,20px)}
dialog.modal .modal__inner{overscroll-behavior:contain}

/* ===== Адаптив: планшет и мобильный ===== */

/* Этапы лечения: три колонки тесны уже на планшете. */
@media(max-width:900px){.process-list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.process-list{grid-template-columns:1fr}}

/* Обычные карточные сетки (статьи, «другие услуги») сворачиваются.
   Сетку «Что вас беспокоит» не трогаем — у неё свои правила. */
@media(max-width:980px){.catalog-grid:not(.catalog-grid--services){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.catalog-grid:not(.catalog-grid--services){grid-template-columns:1fr}}

/* Карточки специалистов: на узком экране в одну колонку. Фотографии
   портретные, поэтому вместо фиксированной высоты задаём пропорцию —
   иначе узкая карточка режет кадр по грудь. */
@media(max-width:560px){
  .doctor-photo{height:auto;aspect-ratio:4/5}
  /* В каталоге специалистов карточка на всю ширину — там кадр квадратный. */
  .post-type-archive-doctor .catalog-card--image .catalog-card__media{height:auto;aspect-ratio:1/1}
}

/* Портреты сотрудников кадрируются от верха: на общем плане лицо занимает
   верхнюю часть снимка и при обрезке по центру макушка уходит за край. */
.doctor-photo img,
.post-type-archive-doctor .catalog-card--image img{object-position:center top}

/* На широких экранах область под фото выше — портрет помещается целиком,
   а не узкой полосой. */
@media(min-width:561px){.post-type-archive-doctor .catalog-card--image .catalog-card__media{height:340px}}
@media(min-width:801px){.doctor-photo{height:340px}}
@media(min-width:1151px){.doctor-photo{height:410px}}
@media(max-width:480px){.doctors{grid-template-columns:1fr}.doctor-photo{aspect-ratio:1/1}}

/* Прайс на телефоне: таблица не помещается по ширине даже в сжатом виде,
   поэтому строка разворачивается в карточку — код, услуга, цена друг под
   другом. Горизонтальная прокрутка не нужна. */
@media(max-width:560px){
  .price-switch__item{padding:9px 15px;font-size:14px}
  .price-board .table-scroll{overflow:visible}
  .price-board .table-scroll table{min-width:0}
  .price-table{margin:18px 0}
  .price-table,.price-table tbody,.price-table tr,.price-table td{display:block;width:auto}
  .price-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .price-table tr{padding:15px 0;border-bottom:1px solid var(--line)}
  .price-table tr:last-child{border-bottom:0;padding-bottom:0}
  .price-table td{padding:0;border:0;text-align:left}
  .price-table td.price-table__code{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:13px;color:var(--muted)}
  .price-table td.price-table__code span + span{margin-top:0}
  .price-table td:nth-child(2){margin-top:5px;font-size:16px;line-height:1.5}
  .price-table__note{font-size:14px}
  .price-table td.price-table__value{margin-top:7px;font-size:19px;text-align:left}
}

/* Контролирующие органы: карточка компактнее на мобильном. */
@media(max-width:560px){
  .authority-card{padding:20px}
  .authority-card__links{gap:12px}
}

/* Длинные слова и ссылки не должны растягивать страницу. */
.prose{overflow-wrap:break-word}
.prose a{word-break:break-word}

/* Страховка от горизонтальной прокрутки на мобильных. */
@media(max-width:560px){
  .footer-top{row-gap:12px}
  .inner-hero__lead,.hero-copy>p{max-width:100%}
}

/* Двухколоночные раскладки со сжатой боковой колонкой обязаны стекаться,
   иначе на планшете и телефоне контент и сайд-панель наезжают друг на друга. */
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
}
@media(max-width:820px){
  .inner-hero__grid{grid-template-columns:1fr;gap:28px}
  .inner-hero__grid .inner-hero__media{order:2}
  .doctor-profile{grid-template-columns:1fr;gap:28px}
}
@media(max-width:820px){
  .inner-hero__media img{width:100%;height:auto}
}

/* ===== Десктоп/планшет/мобильный: доработки ===== */

/* Бургер появляется раньше — на планшете в книжной ориентации навигация не влезает. */
@media(max-width:1000px){
  .nav{display:none}
  .menu-toggle{display:flex}
  .header-phone{display:none}
}
@media(max-width:560px){
  .mainbar>.button{display:none}
  .menu-toggle{margin-left:auto}
}

/* ===== Мобильное меню ===== */
.mobile-nav{position:fixed;left:0;right:0;top:0;z-index:30;height:100vh;height:100dvh;background:var(--white,#fff);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:block}
.mobile-nav[hidden]{display:none}
/* Шапка остаётся поверх меню: логотип и крестик видны и кликабельны. */
.header.is-menu-open .topbar,.header.is-menu-open .mainbar{position:relative;z-index:35;background:var(--white,#fff)}
.mobile-nav__inner{min-height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:calc(var(--header-offset,116px) + 6px) 20px max(22px,env(safe-area-inset-bottom))}

.mobile-nav__links{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--line)}
.mobile-nav__links li,.mobile-nav__links ul{list-style:none;margin:0;padding:0;display:block}
.mobile-nav__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 2px;font-size:17px;font-weight:600;line-height:1.2;color:var(--ink);border-bottom:1px solid var(--line);transition:color .2s}
.mobile-nav__links a::after{content:'';flex:0 0 auto;width:9px;height:9px;margin-right:5px;border-right:1.6px solid #9db0c9;border-top:1.6px solid #9db0c9;transform:rotate(45deg);transition:border-color .2s,transform .2s}
.mobile-nav__links a:hover,.mobile-nav__links .current-menu-item > a{color:var(--blue)}
.mobile-nav__links a:hover::after{border-color:var(--blue);transform:rotate(45deg) translate(2px,-2px)}

.mobile-nav__label{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mobile-nav__contacts{display:grid;gap:8px}
.mobile-nav .mobile-nav__phone,.mobile-nav .mobile-nav__link{display:flex;align-items:center;gap:16px;min-height:58px;padding:10px 18px;border:1px solid var(--line);border-radius:12px;background:var(--pale);transition:border-color .2s,background .2s}
.mobile-nav .mobile-nav__phone:hover,.mobile-nav .mobile-nav__link:hover{border-color:var(--blue);background:var(--white,#fff)}
.mobile-nav__phone svg,.mobile-nav__link svg{width:20px;height:20px;color:var(--blue);flex:0 0 auto}
.mobile-nav__phone span{display:flex;flex-direction:column;font-size:17px;font-weight:700;line-height:1.25;color:var(--ink)}
.mobile-nav__phone small{font-size:12px;font-weight:400;color:var(--muted)}
.mobile-nav__link span{font-size:15px;font-weight:600;color:var(--ink)}
.mobile-nav .button{width:100%;justify-content:center;margin:20px 0 0;min-height:56px}
html.nav-open{overflow:hidden}
html.nav-open body{overflow:hidden}

/* Этапы лечения: при сворачивании вертикальная граница между колонками ломается. */
@media(max-width:900px){
  .process-list{gap:0}
  .process-item+.process-item{border-left:none}
  .process-item{border-top:1px solid #ffffff4d}
}

/* Форма записи на планшете и уже — в одну колонку: заголовок, подзаголовок, поля. */
@media(max-width:980px){
  .appointment-section{grid-template-columns:1fr;gap:32px}
}
@media(max-width:620px){
  .form-row{grid-template-columns:1fr}
}


/* Нижний CTA-блок: на планшете и телефоне в колонку, иначе кнопка вылезает за экран. */
@media(max-width:820px){
  .site-cta__grid{flex-direction:column;align-items:flex-start;gap:24px}
  .site-cta h2{font-size:30px}
  .site-cta .button{width:100%;justify-content:center}
}
@media(max-width:560px){
  .site-cta{padding:40px 0}
  .site-cta h2{font-size:25px}
}

/* ===== Мобильные фиксы: переполнение формы и кнопки хиро ===== */
/* Грид/флекс-элементы должны сжиматься: иначе длинный текст в селекте
   клиники (nowrap) задаёт минимальную ширину всей странице. */
.appointment-section > *{min-width:0}
.appointment-form{min-width:0}
.form-row{min-width:0}
.form-row > *{min-width:0}
.form__field{min-width:0}
.form__select{min-width:0;max-width:100%}
.form__select-button{min-width:0;max-width:100%}
.form__select-value{min-width:0;max-width:100%}

/* Кнопки в хиро на мобильном: обе на всю ширину, одинаковой высоты, с отступом. */
@media(max-width:560px){
  .hero-copy > .button{display:flex;width:100%;margin:26px 0 0;height:58px;min-height:0;box-sizing:border-box;font-size:15px;font-weight:650}
  .hero-secondary{display:flex;width:100%;margin:12px 0 0;height:58px;min-height:0;box-sizing:border-box;font-size:15px;font-weight:650}
}

/* Дочерние элементы грид-раскладок должны сжиматься — иначе широкий контент
   (таблицы, длинные ссылки) раздувает колонку и появляется скролл. */
.article-layout > *{min-width:0}
.doctor-profile > *{min-width:0}
.inner-hero__grid > *{min-width:0}
.contacts-grid > *{min-width:0}
.doctors > *{min-width:0}
.catalog-grid > *{min-width:0}
.prose{overflow-wrap:anywhere}

/* Заголовок секции (title + подпись в две колонки) сворачивается на планшете. */
@media(max-width:820px){
  .content-section__head{grid-template-columns:1fr;gap:14px;margin-bottom:28px}
}
.content-section__head > *{min-width:0}

/* ===== Правки по пошаблонному аудиту адаптива ===== */

/* Бургер между 800 и 1000px показывался без размеров и схлопывался в полоску. */
@media(max-width:1000px){
  .menu-toggle{display:flex;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:12px;background:var(--white,#fff)}
  .menu-toggle span{display:block;height:2px;width:22px;background:var(--ink);border-radius:1px}
  /* Кнопка записи и бургер прижаты к правому краю контейнера. */
  .mainbar > .button{margin-left:auto}
}

/* Заголовки внутренних страниц: длинные слова не влезали на узком экране. */
@media(max-width:820px){
  .inner-hero h1{font-size:34px;line-height:1.15}
}
@media(max-width:560px){
  .inner-hero h1{font-size:28px;line-height:1.18;overflow-wrap:break-word;hyphens:auto}
  .inner-hero__lead{font-size:15px}
}

/* Каталог клиник: две колонки по 144px на телефоне нечитаемы. */
@media(max-width:700px){
  .clinics-list{grid-template-columns:1fr}
}

/* Предупреждение о противопоказаниях читаемого размера. */
@media(max-width:560px){
  .medical-notice{font-size:13px}
}

/* ===== Бургер: три линии и анимация в крестик ===== */
.menu-toggle{position:relative;padding:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s}
.menu-toggle:hover{border-color:var(--blue)}
.menu-toggle span{width:22px;height:2px;flex:0 0 auto;border-radius:1px;transform-origin:center;transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .18s ease,background .2s}
.menu-toggle:hover span{background:var(--blue)}
/* открытое меню: верх и низ сходятся в крест, середина исчезает */
.header.is-menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header.is-menu-open .menu-toggle span:nth-child(2){opacity:0;transform:scaleX(.2)}
.header.is-menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.menu-toggle span{transition:none}}

/* Карточки услуг на мобильном: убираем пустоту от фиксированной высоты. */
@media(max-width:560px){
  .catalog-card{min-height:0;padding:22px 20px}
  .catalog-card h2,.catalog-card h3{font-size:21px;margin-top:18px}
  .catalog-card p{margin-top:10px}
  .catalog-card .text-link{padding-top:16px}
  .catalog-card__icon{width:42px;height:42px}
  .catalog-card__icon svg{width:20px}
  .doctor .text-link{padding-top:14px}
}

/* На мобильном уменьшённый вариант кнопки не нужен: карточки во всю ширину. */
@media(max-width:560px){
  .button.small{font-size:15px}
}

/* Карточка специалиста: секции шли вплотную, без отступов между блоками. */
.doctor-profile__block{margin-top:48px}
.doctor-profile__block > h2,.timeline > h2{margin-bottom:18px}
.doctor-profile__block + .doctor-profile__block{margin-top:40px}
@media(max-width:800px){
  .doctor-profile__block{margin-top:38px}
  .doctor-profile__block + .doctor-profile__block{margin-top:32px}
  .timeline{margin-top:38px}
}
@media(max-width:560px){
  .doctor-profile__block > h2,.timeline > h2{font-size:24px;margin-bottom:14px}
  .doctor-profile__role{font-size:16px}
  .doctor-profile__intro{margin-top:18px}
}

/* Подпись в верхней строке на мобильном была 9px — нечитаемо.
   Линия-разделитель переведена на border, иначе она не совпадает с высотой строки. */
@media(max-width:800px){
  .topbar{font-size:12px;min-height:40px;border-bottom:1px solid var(--line)}
  .topbar:after{display:none}
  .topbar > span{font-size:12px;line-height:1.35}
}
@media(max-width:560px){
  .topbar{min-height:42px}
  .topbar > span{font-size:12px}
}

/* Шапка внутренней страницы: на мобильном блок с картинкой не должен
   оставлять пустой фон под ней — высота по изображению. */
@media(max-width:820px){
  .inner-hero__media{height:auto}
  .inner-hero__media img{width:100%;height:auto;display:block}
}

/* Хлебные крошки переносятся, если не помещаются в строку. */
.breadcrumbs ol{flex-wrap:wrap;row-gap:4px}
.breadcrumbs li{min-width:0;flex-wrap:wrap;row-gap:2px}
.breadcrumbs li > *{overflow-wrap:anywhere}

/* Карточка специалиста: сокращённое padding в теме обнуляло боковые отступы
   контейнера, из-за чего контент прилипал к краям экрана. Возвращаем их
   по тем же брейкпоинтам, что и у .wrap. */
.wrap.doctor-profile{padding-inline:40px}
@media(max-width:1150px){.wrap.doctor-profile{padding-inline:30px}}
@media(max-width:800px){.wrap.doctor-profile{padding-inline:24px}}
@media(max-width:560px){.wrap.doctor-profile{padding-inline:21px}}

/* ===== Отзывы ===== */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.reviews > *{min-width:0}
.review{display:flex;flex-direction:column;padding:28px;background:var(--pale);border-radius:var(--radius,16px)}
.review__rating{display:flex;gap:3px;margin:0 0 14px;font-size:18px;line-height:1}
.review__star{color:#c8d6e6}
.review__star.is-on{color:#f4b63f}
.review__text{color:var(--ink);font-size:16px;line-height:1.65}
.review__text p{margin:0 0 12px}
.review__text p:last-child{margin-bottom:0}
.review__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:auto;padding-top:20px;font-size:13px;color:var(--muted)}
.review__author{font-weight:650;color:var(--ink)}
.review__clinic::before,.review__meta time::before,.review__source::before{content:'';display:inline-block;width:3px;height:3px;margin-right:9px;border-radius:50%;background:#b3c3d6;vertical-align:middle}
.review__source{color:var(--blue)}
.review__source:hover{text-decoration:underline;text-underline-offset:3px}
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:9px;font-size:15px;color:var(--ink)}
.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:980px){.reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .reviews{grid-template-columns:1fr;gap:14px}
  .review{padding:20px 18px}
  .review__text{font-size:15px}
}

/* ===== Акции ===== */
.promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.promos > *{min-width:0}
.promo{display:flex;flex-direction:column;overflow:hidden;background:var(--white,#fff);border:1px solid var(--line);border-radius:var(--radius,16px);transition:border-color .2s,box-shadow .2s}
.promo:hover{border-color:var(--blue);box-shadow:0 12px 28px #0b1a331a}
.promo__media{display:block;aspect-ratio:2/1;overflow:hidden;background:var(--pale)}
.promo__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.promo:hover .promo__media img{transform:scale(1.04)}
.promo__body{display:flex;flex-direction:column;flex:1;padding:22px}
.promo__title{font-size:20px;line-height:1.25;margin:0}
.promo__title a{color:var(--ink)}
.promo__title a:hover{color:var(--blue)}
.promo__price{display:flex;align-items:baseline;gap:10px;margin:12px 0 0}
.promo__price-now{font-size:24px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.promo__price-old{font-size:15px;color:var(--muted)}
.promo__price--hero{margin-top:18px}
.promo__price--hero .promo__price-now{font-size:32px}
.promo__text{margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.6}
.promo__until{margin:12px 0 0;font-size:13px;color:var(--muted)}
.promo__more{margin-top:auto;padding-top:18px}
@media(max-width:980px){.promos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .promos{grid-template-columns:1fr;gap:14px}
  .promo__body{padding:18px}
  .promo__title{font-size:18px}
  .promo__price-now{font-size:22px}
}

/* Ссылка «Все…» в заголовке секции прижимается к правому краю контейнера. */
.section-heading > p.section-heading__aside,
.section-heading > p:has(> .text-link:only-child){display:flex;justify-content:flex-end;align-items:flex-end;margin:0}
@media(max-width:800px){
  .section-heading > p.section-heading__aside,
  .section-heading > p:has(> .text-link:only-child){justify-content:flex-start;margin-top:12px}
}

/* ===== Выпадающее подменю в шапке ===== */
.nav .nav-list > li{position:relative}
.nav .menu-item-has-children > a{display:inline-flex;align-items:center;gap:6px}
.nav .menu-item-has-children > a::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav .menu-item-has-children:hover > a::after,
.nav .menu-item-has-children:focus-within > a::after{transform:translateY(1px) rotate(225deg)}
.nav .sub-menu{position:absolute;top:100%;left:-18px;z-index:40;min-width:270px;margin:0;padding:8px;list-style:none;background:var(--white,#fff);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px #0b1a3324;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu li{display:block}
.nav .sub-menu a{display:block;padding:10px 14px;border-radius:8px;font-size:15px;line-height:1.35;color:var(--ink);white-space:normal}
.nav .sub-menu a:hover{background:var(--pale);color:var(--blue)}

/* Восемь пунктов должны помещаться: поджимаем шаг и кегль на средних экранах. */
@media(max-width:1320px){
  .mainbar{gap:20px}
  .nav .nav-list{gap:18px}
  .nav{font-size:14px}
}
@media(max-width:1150px){
  .nav .nav-list{gap:14px}
  .nav{font-size:13px}
  .mainbar{gap:14px}
}

/* Подменю в мобильном меню — вложенным списком. */
.mobile-nav__links .sub-menu{list-style:none;margin:0 0 4px;padding:0 0 6px 14px;border-bottom:1px solid var(--line)}
.mobile-nav__links .sub-menu li{display:block}
.mobile-nav__links .sub-menu a{min-height:44px;padding:0 2px;font-size:15px;font-weight:500;color:var(--muted);border-bottom:none}
.mobile-nav__links .sub-menu a::after{display:none}
.mobile-nav__links .menu-item-has-children > a{border-bottom:none}

/* Подпись и ссылка в списке фактов должны стоять на одной строке: ссылка —
   кнопка высотой 44px с центрированным текстом, подпись прижата к верху,
   поэтому выравниваем по базовой линии первой строки. */
.fact-list > div{align-items:baseline}