/*
 * Раздел «Услуги и цены» (плагин plg_content_p5price).
 *
 * Оформление опирается на переменные шаблона cassiopeia_v2 (css/chrome.css), но у
 * каждой стоит запасное значение: в оболочке инфомата этих переменных может не быть,
 * и раздел должен выглядеть прилично сам по себе.
 *
 * Страница - список отделений в свёрнутых карточках. Раскрытая карточка выделена
 * заливкой заголовка и повёрнутым шевроном, чтобы всегда было видно, что открыто.
 *
 * Строки услуг намеренно без классов (см. Render\Catalog::item): на несколько тысяч
 * строк это заметная разница в весе страницы. Оформление держится на порядке
 * элементов: первый span - название, второй - коды, <b> - цена.
 */

.pcat {
    max-width: var(--container, 1200px);
    /* Боковые поля обязательны: без них карточки отделений упираются в край
       экрана на узких окнах и на телефоне. */
    margin: 0 auto;
    padding: 0 var(--sp-4, 16px);
    font-family: var(--font-body, inherit);
    color: var(--slate, #404757);
    text-align: left;
}

/* ---------- оговорка из материала ---------- */

.p5price-lead {
    max-width: var(--container, 1200px);
    margin: 0 auto var(--sp-4, 16px);
    padding: 0 var(--sp-4, 16px);
    font-size: var(--text-sm, .8125rem);
    line-height: 1.5;
    color: var(--slate-light, #5d6478);
    text-align: left;
}

.p5price-lead p {
    margin: 0;
}

.p5price-lead a {
    color: var(--brand-blue, #005faa);
    white-space: nowrap;
}

/*
 * Служебный класс на шапку САЙТА (не на раздел). Шапка сжимается при прокрутке
 * плавно, за треть секунды, и пока она едет, мерить её высоту бесполезно:
 * переход к подразделу считал по ней отступ и потом доводил страницу второй раз
 * - получалось дёрганье. Скрипт раздела на один кадр гасит переходы, приводит
 * шапку сразу к конечному виду, меряет и снимает класс. Правило намеренно с
 * !important и со звёздочкой: переходы у шапки объявлены на её внутренних
 * элементах (строка телефонов, сама полоса меню), а не на ней самой.
 */
.site-header.p5-no-anim,
.site-header.p5-no-anim * {
    transition: none !important;
}

/* ---------- поиск ---------- */

.pcat__panel {
    margin: 0 0 var(--sp-5, 20px);
}

.pcat__field {
    position: relative;
    display: block;
}

.pcat__ico,
.pcat__clear svg {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--slate-pale, #8b91a0);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.pcat__ico {
    left: 18px;
}

.pcat__input {
    width: 100%;
    height: 52px;
    padding: 0 48px;
    font: inherit;
    font-size: var(--text-md, 1rem);
    color: var(--slate, #404757);
    background: var(--white, #fff);
    border: 1px solid var(--border, #e2e4ed);
    border-radius: var(--radius-pill, 9999px);
    outline: none;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(36, 76, 138, .05));
    -webkit-appearance: none;
    appearance: none;
}

.pcat__input::-webkit-search-cancel-button {
    display: none;
}

.pcat__input:focus {
    border-color: var(--cyan, #1aacd1);
    box-shadow: 0 0 0 4px var(--mode-glow, rgba(26, 172, 209, .15));
}

.pcat__clear {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.pcat__clear svg {
    left: 6px;
    stroke: var(--slate-light, #5d6478);
}

.pcat__clear:hover {
    background: var(--bg-section, #f6f7fb);
}

/* Подсказка вида «показана одна услуга» - появляется редко и не мешает. */
.pcat__note {
    margin: var(--sp-2, 8px) 0 0;
    padding: 0 18px;
    font-size: var(--text-sm, .8125rem);
    color: var(--slate-light, #5d6478);
}

.pcat__note:empty {
    display: none;
}

.pcat__note button {
    margin-left: 6px;
    padding: 0;
    font: inherit;
    color: var(--brand-blue, #005faa);
    background: none;
    border: 0;
    border-bottom: 1px dashed currentColor;
    cursor: pointer;
}

/* ---------- карточка отделения ---------- */

.pcat__accs {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
}

/* Атрибут hidden сам по себе проигрывает display:flex - помогаем ему явно. */
.pcat__accs[hidden] {
    display: none;
}

/*
 * content-visibility: auto у карточек БЫЛ и убран 24.08.2026. Пользы от него
 * тут почти не было (у закрытого отделения тело и так display: none, скрывать
 * нечего), а вреда много: браузер считал содержимое «пропущенным», у потомков
 * getBoundingClientRect() отдавал нули, высота секции подменялась на
 * contain-intrinsic-size - и прокрутка к выбранному подразделу либо уезжала в
 * ноль, либо промахивалась, потому что секции выше по ходу прокрутки меняли
 * высоту с заглушечной на настоящую. Не возвращать.
 */
.pacc {
    position: relative;   /* якорь для .pacc__subs поверх шапки */
    background: var(--white, #fff);
    border: 1px solid var(--border-light, #eef0f6);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(36, 76, 138, .05));
    overflow: hidden;
    contain: layout style;
}

.pacc.is-hidden {
    display: none;
}

/*
 * Шапка отделения - контейнер, а не кнопка: кнопки подразделов стоят в её
 * потоке, и когда они переносятся на вторую строку, шапка (а с ней и вся
 * плашка) плавно подрастает. Роль переключателя играет .pacc__toggle -
 * прозрачный слой на всю шапку под кнопками подразделов.
 */
.pacc__head {
    position: relative;
    display: flex;
    align-items: flex-start;   /* название остаётся у первой строки, когда плашка растёт */
    flex-wrap: wrap;
    gap: var(--sp-4, 16px);
    width: 100%;
    padding: 18px var(--sp-6, 24px);
    font-family: var(--font-heading, inherit);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    color: var(--navy, #244c8a);
    text-align: left;
}

/* Название и шеврон выравниваем по высоте первой строки кнопок (--h1 меряет JS),
   иначе при росте плашки они уезжали бы к её середине. */
.pacc__t {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: var(--h1, 28px);
}

.pacc__toggle {
    position: absolute;
    inset: 0;
    z-index: 0;      /* под кнопками подразделов - они перехватывают свои нажатия */
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.pacc__head:hover {
    background: var(--bg-warm, #fafbfe);
}

.pacc__toggle:focus-visible {
    outline: 2px solid var(--cyan, #1aacd1);
    outline-offset: -2px;
}

/*
 * ПОДЗАГОЛОВКИ У ШАПКИ ОТДЕЛЕНИЯ
 *
 * Справа от названия отделения в шапке пустует полстроки. Наведение мышью - и
 * оттуда выезжает ряд кнопок с названиями подразделов: нажатие открывает
 * отделение сразу на нужном, не заставляя листать весь список.
 *
 * Блок абсолютный и лежит ПОВЕРХ шапки-кнопки (вложить кнопки в кнопку нельзя).
 * Пустые промежутки между кнопками пропускают клик насквозь - на самой шапке
 * pointer-events включён только у кнопок. Левую границу выставляет JS по
 * фактической ширине названия: оно у отделений разной длины.
 *
 * Пока отделение закрыто, .pacc по высоте равна шапке, поэтому top/bottom: 0
 * дают ровно её. У раскрытого отделения блок не нужен - настоящие заголовки уже
 * видны, и он полностью выключается.
 */
/*
 * Два шага. Первый: при наведении кнопки проявляются справа от названия -
 * ровно столько, сколько влезло в строку. Второй, с задержкой: высота блока
 * растёт до полной, и не поместившиеся кнопки выезжают снизу вместе с плашкой.
 * Курсор ушёл - порядок обратный: сначала схлопывается высота, потом гаснут
 * кнопки. Разные задержки для «туда» и «обратно» заданы тем, что переход
 * описан и в базовом правиле, и в правиле для :hover.
 *
 * Высоту одной строки (--h1) и полную (--hall) меряет JS: подразделов бывает
 * до пятнадцати, названия - до полусотни символов, никакой формулой это не
 * считается. Пока JS не померил, действуют запасные значения.
 */
.pacc__subs {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    max-height: var(--h1, 28px);
    overflow: hidden;
    opacity: 0;
    transform: translateX(-14px);
    /*
     * z-index обязателен. .pacc__toggle - прозрачная кнопка-переключатель на всю
     * шапку - позиционирована, а кнопки подзаголовков идут обычным потоком, и по
     * правилам отрисовки позиционированный элемент рисуется ПОВЕРХ них. Без этой
     * строки переключатель перехватывал и наведение, и нажатие: обводка не
     * появлялась, а по нажатию на подзаголовок отделение просто раскрывалось с
     * начала. Ловилось только живым курсором - синтетическое событие, посланное
     * прямо на кнопку, проверку попадания не проходит и работало «правильно».
     */
    position: relative;
    z-index: 1;
    /* Сам блок нажатий не ловит - промежутки между кнопками должны пропускать
       нажатие на шапку. Ловят только сами кнопки, и только пока видны. */
    pointer-events: none;
    /* Уход курсора: сначала схлопывается высота, потом кнопки уезжают влево */
    transition: max-height 320ms var(--ease-out, ease),
                opacity 200ms var(--ease-out, ease) 260ms,
                transform 200ms var(--ease-out, ease) 260ms;
}

.pacc:hover .pacc__subs {
    max-height: var(--hall, 28px);
    opacity: 1;
    transform: none;
    /* Наведение: кнопки выезжают вправо, пауза, и только потом растёт высота */
    transition: opacity 260ms var(--ease-out, ease),
                transform 260ms var(--ease-out, ease),
                max-height 550ms var(--ease-out, ease) 700ms;
}

.pacc.is-open .pacc__subs {
    display: none;
}


.pacc:hover .pacc__chip {
    pointer-events: auto;
}

.pacc__chip {
    flex: 0 0 auto;
    /* Хватает на самое длинное название (53 символа): при обрезке «Ультразвуковые
       исследования сосудов» и «Ультразвуковые исследования» выглядели одинаково. */
    max-width: 360px;
    padding: 5px 11px;
    overflow: hidden;
    font: inherit;
    font-size: var(--text-xs, .75rem);
    /*
     * Высота кнопки должна быть ЦЕЛОЙ и кратной четырём пикселям:
     * 5 + 5 отступов, 1 + 1 рамки и 16 строки дают ровно 28. Пока строка
     * задавалась множителем (1.3 от 12px = 15,6), высота выходила 27,6 - и на
     * экранах с масштабом 125% нижняя рамка попадала на половину пикселя,
     * бледнея втрое против верхней (замер: 1,25 сверху против 0,21 снизу).
     * Кратность четырём переводит высоту в целое число точек экрана при всех
     * ходовых масштабах (125, 150, 175, 200 процентов), и обе рамки получают
     * одинаковую долю пикселя. На вид строка не изменилась: 16 вместо 15,6.
     */
    line-height: 16px;
    color: var(--slate-light, #5d6478);
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-section, #f6f7fb);
    border: 1px solid var(--border-light, #eef0f6);
    border-radius: var(--radius-pill, 9999px);
    cursor: pointer;
    transition: color var(--t-fast, 150ms) var(--ease-out, ease),
                background-color var(--t-fast, 150ms) var(--ease-out, ease),
                border-color var(--t-fast, 150ms) var(--ease-out, ease);
}

/* Атрибут hidden проигрывает элементу flex-контейнера - гасим явно. */
.pacc__chip[hidden] {
    display: none;
}

/*
 * Наведение обводит кнопку сине-голубым, не заливая её: заливка спорила бы с
 * такими же таблетками цен в строках ниже.
 *
 * Обводка - ТОЛЬКО рамка, никакого кольца box-shadow вдобавок. До 25.08.2026
 * здесь стояли оба слоя разом (border 1px плюс box-shadow 0 0 0 1px), и линия
 * выходила неровной по трём причинам сразу. Кольцо тени лежит СНАРУЖИ кнопки, а
 * .pacc__subs обрезает всё, что за его края (overflow: hidden при max-height в
 * одну строку) - сверху, снизу и у левого края тень срезалась, справа оставалась
 * целиком: замер кадра давал 1 пиксель сверху и снизу против 2 справа. Дальше
 * рамку браузер подгоняет к целому пикселю экрана, а тень рисует со сглаживанием,
 * поэтому при дробном системном масштабе (те же 150%) их края расходятся по
 * долям пикселя - отсюда 2,76 сверху против 3,00 снизу. И наконец два слоя
 * вместе дают вдвое больше задуманного. Одна рамка ложится ровно в один пиксель
 * со всех сторон - проверено кадрами при 100% и 150%.
 */
.pacc__chip:hover {
    color: var(--brand-blue, #005faa);
    background: var(--white, #fff);
    border-color: var(--cyan, #1aacd1);
}

/* Пункт «открыть отделение целиком» нужен только там, где список раскрывается
   по нажатию, то есть на узком экране. */
.pacc__chip--all {
    display: none;
}

.pacc__ch {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: calc((var(--h1, 28px) - 18px) / 2);
    margin-left: auto;   /* шеврон всегда у правого края шапки */
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--slate-light, #5d6478);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--t-fast, 150ms) var(--ease-out, ease);
}

/* Раскрытое отделение видно сразу: заливка заголовка и перевёрнутый шеврон. */
.pacc[open] > .pacc__head,
.pacc.is-open > .pacc__head {
    background: var(--cyan-pale, #e6f6fb);
    box-shadow: inset 3px 0 0 var(--cyan, #1aacd1);
}

.pacc.is-open .pacc__ch {
    transform: rotate(180deg);
    stroke: var(--navy, #244c8a);
}

.pacc__body {
    padding: var(--sp-2, 8px) var(--sp-6, 24px) var(--sp-5, 20px);
    border-top: 1px solid var(--border-light, #eef0f6);
}

.pacc__body[hidden] {
    display: none;
}

.pacc__link {
    display: inline-block;
    margin-top: var(--sp-4, 16px);
    font-size: var(--text-sm, .8125rem);
    color: var(--brand-blue, #005faa);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}

/* ---------- подраздел ---------- */

.psub + .psub {
    margin-top: var(--sp-5, 20px);
}

/* Подраздел, в котором поиск ничего не нашёл, скрывается вместе с заголовком. */
.psub.is-hidden {
    display: none;
}

/*
 * Заголовок подраздела не должен спорить с ценами: они справа зелёными
 * таблетками, поэтому заголовок уводим в фирменный синий и делаем плотнее.
 * Слева - короткая засечка (тот же приём отмечает раскрытое отделение),
 * справа - волосяная линия, которая гаснет к краю: она заполняет пустое место
 * и отбивает заголовок от строк услуг под ним.
 */
.psub__t {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    margin: var(--sp-5, 20px) 0 var(--sp-2, 8px);
    font-family: var(--font-heading, inherit);
    font-size: var(--text-base, .9375rem);
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--navy, #244c8a);
    text-transform: none;
}

.psub__t::before {
    content: '';
    flex: 0 0 auto;
    align-self: stretch;
    width: 3px;
    min-height: 1.1em;
    background: linear-gradient(180deg, var(--cyan, #1aacd1), var(--brand-blue, #005faa));
    border-radius: 3px;
}

.psub__t::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--border, #e2e4ed), rgba(226, 228, 237, 0));
}

/*
 * Выбранный в шапке подраздел. Он показывается в общем списке отделения, а не
 * вместо него, поэтому нужна метка, за которую цепляется глаз: акцентная
 * засечка, синий заголовок и короткая вспышка фона в момент выбора - её
 * достаточно, чтобы понять, куда именно приехала страница.
 */
.psub.is-picked .psub__t {
    color: var(--brand-blue, #005faa);
    animation: pcat-pick 1.8s var(--ease-out, ease);
}

.psub.is-picked .psub__t::before {
    width: 4px;
    background: var(--accent, #f6107d);
}

.psub.is-picked .psub__t::after {
    background: linear-gradient(90deg, var(--accent, #f6107d), rgba(246, 16, 125, 0));
    opacity: .45;
}

@keyframes pcat-pick {
    from {
        background: rgba(246, 16, 125, .16);
    }
}

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

.psub__more {
    margin-top: var(--sp-3, 12px);
    padding: 0;
    font: inherit;
    font-size: var(--text-sm, .8125rem);
    color: var(--brand-blue, #005faa);
    background: none;
    border: 0;
    border-bottom: 1px dashed currentColor;
    cursor: pointer;
}

/* ---------- строка услуги ---------- */

.psub__list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 118px;
    grid-template-areas:
        'name price act'
        'code price act'
        'depts price act';
    align-items: baseline;
    gap: 0 var(--sp-4, 16px);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light, #eef0f6);
}

.psub__list > li:last-child {
    border-bottom: 0;
}

/*
 * Строка под курсором. Заливка идёт слева направо и гаснет к краю - так она не
 * спорит с зелёной таблеткой цены; слева выезжает засечка, как у заголовка
 * подраздела и у раскрытого отделения, а название темнеет до фирменного синего.
 * Вместе с кнопкой «Записаться», которую JS вставляет в эту же строку, получается
 * дорожка от названия услуги к цене - в длинном списке это главное.
 *
 * Прежний фон --bg-warm (#fafbfe) на белом не читался вовсе. Селектор с .pcat в
 * начале намеренно: на страницах направлений вокруг раздела лежит старая вёрстка
 * вкладок со своими правилами, и короткий селектор ей проигрывает.
 *
 * Без обёртки @media (hover: hover) намеренно: остальные ховеры этого файла тоже
 * без неё, а кнопку «Записаться» JS вставляет по mouseover, который на тач-экранах
 * срабатывает и по тапу. Так нажатая строка подсвечивается заодно с кнопкой - это
 * читается как «выбрана», а не как залипший ховер.
 */
.pcat .psub__list > li {
    position: relative;
    transition: background-color var(--t-fast, 150ms) var(--ease-out, ease);
}

.pcat .psub__list > li::before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: -12px;
    width: 3px;
    background: linear-gradient(180deg, var(--cyan, #1aacd1), var(--brand-blue, #005faa));
    border-radius: 3px;
    opacity: 0;
    transform: scaleY(.35);
    transition: opacity var(--t-fast, 150ms) var(--ease-out, ease),
                transform var(--t-fast, 150ms) var(--ease-out, ease);
}

.pcat .psub__list > li:hover {
    background: linear-gradient(90deg,
        var(--cyan-pale, #e6f6fb) 0%,
        var(--bg-section, #f6f7fb) 45%,
        rgba(255, 255, 255, 0) 100%);
}

.pcat .psub__list > li:hover::before {
    opacity: 1;
    transform: none;
}

.pcat .psub__list > li:hover > span:nth-child(1) {
    color: var(--navy, #244c8a);
}

.psub__list > li.is-hidden,
.psub__list > li.is-folded {
    display: none;
}

/*
 * Развёрнутый подраздел показывает и «свёрнутый хвост», но только те строки,
 * которые не отсеял поиск: без :not(.is-hidden) это правило перебивало скрытие по
 * весу селектора, и в выдаче оказывались лишние услуги.
 */
.psub.is-full > .psub__list > li.is-folded:not(.is-hidden) {
    display: grid;
}

.psub__list > li > span:nth-child(1) {
    grid-area: name;
    font-size: var(--text-base, .9375rem);
    line-height: 1.4;
    color: var(--slate, #404757);
}

.psub__list > li > span:nth-child(2) {
    grid-area: code;
    font-size: var(--text-xs, .75rem);
    color: var(--slate-pale, #8b91a0);
    font-variant-numeric: tabular-nums;
}

/*
 * Цена - таблеткой, как в подсказках поиска по сайту. Селектор с .pcat в начале
 * намеренно: на страницах направлений вокруг раздела лежит старая вёрстка вкладок
 * со своими правилами, и короткий селектор ей проигрывал.
 */
.pcat .psub__list > li > b {
    grid-area: price;
    align-self: center;
    padding: 4px 10px;
    font-size: var(--text-sm, .8125rem);
    font-weight: 600;
    color: #0f7a55;
    white-space: nowrap;
    background: #e4f5ee;
    border-radius: var(--radius-pill, 9999px);
    font-variant-numeric: tabular-nums;
}

/*
 * Место под кнопку записи зарезервировано всегда, а сама кнопка появляется
 * только в строке под курсором: раньше она всплывала поверх цены и перекрывала её.
 */
/*
 * Кнопку «Записаться» JS переносит в строку под курсором - она одна на весь
 * раздел. Появление анимируем: при переносе в другую строку браузер считает
 * элемент вставленным заново, и анимация проигрывается снова, так что кнопка
 * не «телепортируется», а мягко выезжает.
 *
 * fill-mode намеренно НЕ указан: с ним конечный кадр анимации остался бы
 * заперт на элементе и перебил бы состояния наведения.
 *
 * Теней у кнопки нет ни в покое, ни под курсором, заливка ровная. Наведение
 * показывает обводку (::after) - ширина при этом не меняется: под кнопку в сетке
 * строки отведено ровно 118px, любое расширение полезло бы на колонку цены, а
 * обводка лежит вне потока.
 */
.pcat__book {
    position: relative;
    grid-area: act;
    justify-self: end;
    align-self: center;
    padding: 6px 15px;
    font: inherit;
    font-size: var(--text-xs, .75rem);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--white, #fff);
    white-space: nowrap;
    /* Ровная заливка - светлый край прежнего градиента. Градиент убран: отклик на
       наведение даёт обводка, а двойной эффект был лишним. */
    background: var(--cyan-dark, #148ba8);
    border: 0;
    border-radius: var(--radius-pill, 9999px);
    cursor: pointer;
    animation: pcat-book-in 360ms var(--ease-out, ease);
}

/*
 * Кнопка выплывает справа и туда же уходит, когда курсор покинул строки: сдвиг
 * вправо плюс прозрачность. Размытие пробовали - лишнее, да и filter заставлял
 * бы браузер держать отдельный слой на каждую перерисовку строки, а строк тут
 * три тысячи.
 */
@keyframes pcat-book-in {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
}

@keyframes pcat-book-out {
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

/* Длительность продублирована в JS константой BOOK_OUT_MS - держать в согласии. */
.pcat__book.is-leaving {
    animation: pcat-book-out 280ms var(--ease-out, ease) forwards;
    pointer-events: none;
}

/*
 * Обводка вокруг кнопки. Кольцо приходит СНАРУЖИ - широко, с 22px, - неспешно
 * сходится вплотную к краю кнопки и остаётся там полупрозрачным, пока курсор на
 * кнопке. Уводим курсор - так же плавно тает.
 *
 * Толщина 2px: на 1,5px край ложился на дробные пиксели экрана и линия читалась
 * неровной. Анимируем отступы, а не transform - у кнопки скруглённые торцы, и
 * при масштабировании радиус вместе с толщиной линии плыл.
 */
.pcat__book::after {
    content: '';
    position: absolute;
    top: -22px;
    right: -22px;
    bottom: -22px;
    left: -22px;
    border: 2px solid var(--cyan, #1aacd1);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: top 620ms var(--ease-out, ease),
                right 620ms var(--ease-out, ease),
                bottom 620ms var(--ease-out, ease),
                left 620ms var(--ease-out, ease),
                opacity 420ms var(--ease-out, ease);
}

.pcat__book:hover::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .55;
}

/* С клавиатуры кольцо не полупрозрачное, а в полную силу: это единственная
   отметка фокуса, и её должно быть видно однозначно. */
.pcat__book:focus-visible::after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
}

.pcat__book:focus-visible {
    outline: none;   /* роль кольца фокуса играет та же обводка */
}

.psub__list > li mark {
    padding: 0 1px;
    color: inherit;
    background: rgba(109, 209, 233, .45);
    border-radius: 3px;
}

/* ---------- результаты поиска ---------- */

.pfound {
    padding: var(--sp-2, 8px) var(--sp-6, 24px) var(--sp-4, 16px);
    background: var(--white, #fff);
    border: 1px solid var(--border-light, #eef0f6);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(36, 76, 138, .05));
}

.pfound[hidden] {
    display: none;
}

.pfound__more {
    margin-top: var(--sp-3, 12px);
    padding: 0;
    font: inherit;
    font-size: var(--text-sm, .8125rem);
    color: var(--brand-blue, #005faa);
    background: none;
    border: 0;
    border-bottom: 1px dashed currentColor;
    cursor: pointer;
}

.pfound__more[hidden] {
    display: none;
}

/* Отделения, в которых оказывают услугу: сразу видно, куда идти. */
.pdepts {
    grid-area: depts;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.pdept {
    padding: 3px 10px;
    font: inherit;
    font-size: var(--text-xs, .75rem);
    color: var(--navy, #244c8a);
    background: var(--cyan-pale, #e6f6fb);
    border: 0;
    border-radius: var(--radius-pill, 9999px);
    cursor: pointer;
}

.pdept:hover {
    background: var(--sky, #6dd1e9);
}

/* ---------- шапка отделения на вкладке направления ---------- */

.pcat__deptbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3, 12px);
    margin: 0 0 var(--sp-4, 16px);
}

.pcat__all {
    font-size: var(--text-sm, .8125rem);
    color: var(--brand-blue, #005faa);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}

.pcat__docs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3, 12px);
}

.pdoc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs, .75rem);
    color: var(--slate-light, #5d6478);
    text-decoration: none;
}

.pdoc__ph {
    width: 36px;
    height: 36px;
    object-fit: cover;
    object-position: center top;
    background: var(--cyan-pale, #e6f6fb);
    border-radius: 50%;
}

.pdoc:hover .pdoc__n {
    color: var(--navy, #244c8a);
}

.pdoc--more {
    color: var(--brand-blue, #005faa);
}

/* На вкладке направления гармошки нет - услуги идут списком. */
.pcat__accs--plain .psub:first-child .psub__t {
    margin-top: 0;
}

/*
 * Внутри отделения строки лежат в .pacc__body с отступом 24px, и засечке слева
 * есть куда встать. На вкладке направления такой обёртки нет - выделяем место
 * здесь, иначе засечка вылезет за край списка.
 */
.pcat__accs--plain {
    padding-left: 14px;
    padding-right: 22px;   /* справа - под обводку кнопки «Записаться» в начале анимации */
}

/* ---------- пустое состояние ---------- */

.pcat__empty {
    padding: var(--sp-8, 32px) var(--sp-4, 16px);
    text-align: center;
}

.pcat__empty-t {
    margin: 0 0 8px;
    font-family: var(--font-heading, inherit);
    font-size: var(--text-lg, 1.125rem);
    color: var(--navy, #244c8a);
}

.pcat__empty-x {
    margin: 0;
    font-size: var(--text-sm, .8125rem);
    color: var(--slate-light, #5d6478);
}

.pcat__fallback {
    padding: var(--sp-4, 16px);
    background: var(--cyan-pale, #e6f6fb);
    border-radius: var(--radius-md, 10px);
}

/* ---------- окно записи ---------- */

.pmodal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 400);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4, 16px);
}

.pmodal[hidden] {
    display: none;
}

.pmodal__ov {
    position: absolute;
    inset: 0;
    background: rgba(26, 42, 74, .55);
}

.pmodal__box {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--sp-6, 24px);
    background: var(--white, #fff);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-xl, 0 16px 48px rgba(36, 76, 138, .16));
}

.pmodal__x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.pmodal__x svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--slate-light, #5d6478);
    stroke-width: 2;
    stroke-linecap: round;
}

.pmodal__t {
    margin: 0 0 6px;
    font-family: var(--font-heading, inherit);
    font-size: var(--text-xl, 1.25rem);
    color: var(--navy, #244c8a);
}

.pmodal__srv {
    margin: 0 0 var(--sp-4, 16px);
    font-size: var(--text-sm, .8125rem);
    line-height: 1.4;
    color: var(--navy, #244c8a);
}

.pmodal__lab {
    display: block;
    margin-bottom: var(--sp-3, 12px);
    font-size: var(--text-xs, .75rem);
    color: var(--slate-light, #5d6478);
}

.pmodal__lab input,
.pmodal__lab textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    font: inherit;
    font-size: var(--text-base, .9375rem);
    color: var(--slate, #404757);
    background: var(--bg-section, #f6f7fb);
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    outline: none;
}

.pmodal__lab input:focus,
.pmodal__lab textarea:focus {
    background: var(--white, #fff);
    border-color: var(--cyan, #1aacd1);
}

/*
 * Лекало телефона (js/phone-mask.js шаблона). Скрипт оборачивает поле в
 * .phone-mask и кладёт поверх подсказку-двойник: набранная часть в ней
 * невидима, видно только серый хвост «___) ___-__-__» после курсора.
 * Отступы и размер шрифта обязаны совпадать с самим полем, иначе хвост
 * разъедется с набранными цифрами - поэтому 10px сверху и 13px сбоку
 * (12px отступа поля плюс его рамка).
 */
.pcat .phone-mask,
.pmodal .phone-mask {
    position: relative;
    display: block;
}

.pcat .phone-mask__ghost,
.pmodal .phone-mask__ghost {
    position: absolute;
    inset: 4px 0 0;   /* поле отступает от подписи на те же 4px */
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 13px;
    font-family: inherit;
    font-size: var(--text-base, .9375rem);
    white-space: pre;
    color: var(--slate-pale, #8b91a0);
    pointer-events: none;
}

.pcat .phone-mask__typed,
.pmodal .phone-mask__typed {
    visibility: hidden;
}

.pmodal__chk {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: var(--sp-4, 16px);
    font-size: var(--text-xs, .75rem);
    color: var(--slate-light, #5d6478);
}

.pmodal__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pmodal__go {
    width: 100%;
    padding: 12px 16px;
    font: inherit;
    font-size: var(--text-base, .9375rem);
    font-weight: 600;
    color: var(--white, #fff);
    background: var(--brand-blue, #005faa);
    border: 0;
    border-radius: var(--radius-pill, 9999px);
    cursor: pointer;
}

.pmodal__go:hover {
    background: var(--navy, #244c8a);
}

.pmodal__go[disabled] {
    opacity: .6;
    cursor: default;
}

.pmodal__msg {
    margin: var(--sp-3, 12px) 0 0;
    font-size: var(--text-sm, .8125rem);
    text-align: center;
}

.pmodal__msg.is-ok {
    color: #12a36e;
}

.pmodal__msg.is-bad {
    color: var(--accent-dark, #c40d64);
}

/* ---------- телефон ---------- */

/*
 * УЗКИЙ ЭКРАН: подразделы не строкой поверх шапки, а списком под ней.
 *
 * С телефона наведения нет, а прокручивать сотни строк ради нужного подраздела
 * мучительно. Поэтому первое нажатие на отделение раскрывает список подразделов
 * (плавно, по max-height), второе - нажатие на подраздел - открывает прайс сразу
 * на нём. Порог 900px повторён в JS, в isNarrow().
 *
 * Правила стоят ПОСЛЕ .pacc:hover .pacc__subs и при равной специфичности
 * побеждают: на тач-экранах ховер срабатывает по тапу, и без этого список
 * приоткрывался бы сам.
 */
@media (max-width: 900px) {
    .pacc__t {
        flex: 1 1 auto;
    }

    /*
     * Список подразделов уезжает на свою строку во всю ширину карточки.
     * Ширину задаём явно: flex-basis: 100% меряется по содержимому шапки и
     * отрицательные поля не учитывает - список не доставал до правого края.
     */
    .pacc__subs {
        flex: 0 0 auto;
        width: calc(100% + var(--sp-6, 24px) * 2);
        order: 3;
        display: block;
        margin: 0 calc(var(--sp-6, 24px) * -1);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        border-top: 1px solid transparent;
        transition: max-height var(--t-slow, 320ms) var(--ease-out, ease),
                    opacity var(--t-med, 220ms) var(--ease-out, ease);
    }

    /* Ховер на тач-экранах срабатывает по тапу - высоту он менять не должен. */
    .pacc:hover .pacc__subs {
        max-height: 0;
        opacity: 0;
        transition: max-height var(--t-slow, 320ms) var(--ease-out, ease),
                    opacity var(--t-med, 220ms) var(--ease-out, ease);
    }

    .pacc.is-picking .pacc__subs,
    .pacc.is-picking:hover .pacc__subs {
        max-height: 70vh;
        overflow: auto;
        opacity: 1;
        border-top-color: var(--border-light, #eef0f6);
    }

    /* На тач-экранах ховера нет - кнопки оживают, когда список раскрыт. */
    .pacc.is-picking .pacc__chip {
        pointer-events: auto;
    }

    /* Шеврон разворачивается и на выборе подраздела - состояние читается сразу. */
    .pacc.is-picking .pacc__ch {
        transform: rotate(180deg);
    }

    .pacc__chip {
        display: block;
        width: 100%;
        max-width: none;
        padding: 14px var(--sp-4, 16px);
        font-size: var(--text-sm, .8125rem);
        /* Здесь кнопка - строка списка без обводки, и высота ни к чему не
           привязана: возвращаем множитель, чтобы длинные названия переносились
           так же просторно, как раньше. */
        line-height: 1.3;
        color: var(--navy, #244c8a);
        text-align: left;
        white-space: normal;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .pacc__chip + .pacc__chip {
        border-top: 1px solid var(--border-light, #eef0f6);
    }

    .pacc__chip:hover {
        color: var(--navy, #244c8a);
        background: var(--bg-section, #f6f7fb);
        border-color: transparent;
    }

    .pacc__chip--all {
        display: block;
        font-weight: 600;
        color: var(--brand-blue, #005faa);
    }
}

@media (max-width: 640px) {
    .pcat {
        padding: 0 var(--sp-3, 12px);
    }

    .pfound {
        padding: var(--sp-2, 8px) var(--sp-4, 16px) var(--sp-4, 16px);
    }

    .pacc__head {
        padding: 14px var(--sp-4, 16px);
        font-size: var(--text-base, .9375rem);
    }

    .pacc__body {
        padding: var(--sp-2, 8px) var(--sp-4, 16px) var(--sp-4, 16px);
    }

    /* У шапки здесь отступы по 16px - подгоняем под них вынос списка. */
    .pacc__subs {
        width: calc(100% + var(--sp-4, 16px) * 2);
        margin: 0 calc(var(--sp-4, 16px) * -1);
    }

    .pcat__input {
        height: 46px;
        padding: 0 44px;
    }

    /* Цена уходит под название, кнопка - в тот же ряд: в три колонки не влезает. */
    .psub__list > li {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            'name name'
            'code code'
            'depts depts'
            'price act';
        gap: 4px var(--sp-3, 12px);
        padding: 12px 0;
    }

    .pcat .psub__list > li > b {
        justify-self: start;
        margin-top: 4px;
    }

    .pcat__book {
        align-self: center;
        margin-top: 4px;
    }
}

/* ---------- киоск ---------- */

.pcat--kiosk .pcat__input {
    height: 62px;
    font-size: var(--text-lg, 1.125rem);
}

.pcat--kiosk .pacc__head {
    padding: 22px var(--sp-6, 24px);
    font-size: var(--text-xl, 1.25rem);
}

.pcat--kiosk .psub__list > li {
    padding: 14px 0;
}

.pcat--kiosk .psub__list > li > span:nth-child(1) {
    font-size: var(--text-lg, 1.125rem);
}

/* ---------- печать ---------- */

@media print {
    .pcat__panel,
    .pcat__deptbar,
    .pcat__empty,
    .pmodal,
    .pcat__book,
    .pacc__ch,
    .psub__more {
        display: none !important;
    }

    .pacc,
    .psub__list > li {
        break-inside: avoid;
    }

    .pacc__body[hidden] {
        display: block !important;
    }

    .psub__list > li.is-folded {
        display: grid !important;
    }
}

/* ---------- бережный режим ---------- */

@media (prefers-reduced-motion: reduce) {
    .pacc__ch,
    .pacc__subs,
    .pacc__chip,
    .pacc:hover .pacc__subs,
    .pcat .psub__list > li,
    .pcat .psub__list > li::before,
    .pcat__book,
    .pcat__book::after {
        transition: none;
    }

    .pcat__book,
    .pcat__book.is-leaving,
    .psub.is-picked .psub__t {
        animation: none;
    }

    .pcat__book::after {
        transition: none;
    }

    /* Засечку не выращиваем, просто показываем. */
    .pcat .psub__list > li::before {
        transform: none;
    }
}