/*
 * Dharma Clinic — оформление публичных страниц компонента (сейчас: страница врача и блок отзывов).
 *
 * Раскладка и отступы — классы Bootstrap 5 из шаблона (сетка, утилиты, card); здесь только то, чего в нём нет:
 * цвета карточек из переменных шаблона (--clinic-*, запасные значения для чужого шаблона), иконки, линия времени и
 * мягкий декор. Иконки и ветка встроены как маски (цвет из currentColor), картинок нет. Режим для слабовидящих
 * подменяет --clinic-*; декор, тени и тонировка в нём отключаются. Отключается параметром «Подключать стили компонента».
 */

:is(:is(#dharma_clinic, .dc-scope), .dc-modal) {
    --dc-primary: var(--clinic-green, #028a4a);
    --dc-btn-radius: var(--clinic-radius, .375rem);
    --dc-primary-rgb: var(--clinic-green-rgb, 2, 138, 74);
    --dc-deep: var(--clinic-deep, #005346);
    --dc-deep-rgb: var(--clinic-deep-rgb, 0, 83, 70);
    --dc-white: var(--clinic-white, #fff);
    --dc-surface: var(--clinic-surface, #f5f8f6);
    --dc-line: var(--clinic-border, #e1e9e4);
    --dc-muted: var(--clinic-muted, #63736d);
    /* Подзаголовки страниц — одно значение на все страницы компонента. */
    --dc-lead-size: 1.125rem;
    --dc-lead-color: var(--dc-muted);
    --dc-lead-gap: .75rem;
    --dc-tint: rgba(var(--dc-primary-rgb), .08);
    --dc-tint-strong: rgba(var(--dc-primary-rgb), .14);
    --dc-shadow: 0 .5rem 1.75rem rgba(var(--dc-deep-rgb), .08);

    --dc-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
    --dc-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
    --dc-i-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
    --dc-i-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
    --dc-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
    --dc-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --dc-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 3H5a2 2 0 0 0-2 2.2 18 18 0 0 0 15.8 15.8A2 2 0 0 0 21 19v-3.4a1 1 0 0 0-.8-1l-3.6-.7a1 1 0 0 0-1 .3l-1.5 1.5a14 14 0 0 1-5.8-5.8l1.5-1.5a1 1 0 0 0 .3-1l-.7-3.6a1 1 0 0 0-1-.8Z'/%3E%3C/svg%3E");
    --dc-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    --dc-i-stethoscope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2v2'/%3E%3Cpath d='M5 2v2'/%3E%3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E");
    --dc-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
    --dc-i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1'/%3E%3C/svg%3E");
    --dc-i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --dc-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
    --dc-i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --dc-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --dc-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    --dc-i-reset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
    --dc-i-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 14h6'/%3E%3Cpath d='M12 17v-6'/%3E%3C/svg%3E");
    --dc-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
    --dc-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    --dc-i-ban: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E");
    --dc-i-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E");
    --dc-i-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --dc-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    --dc-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --dc-leaf-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'%3E%3Cpath d='M100 318C98 240 104 150 140 6' fill='none' stroke='black' stroke-width='3'/%3E%3Cpath d='M101 270C60 262 30 236 22 196c42 4 74 30 79 74z'/%3E%3Cpath d='M104 232c40-6 70-30 80-66-42 0-74 24-80 66z'/%3E%3Cpath d='M110 186C72 176 46 150 40 112c40 4 68 30 70 74z'/%3E%3Cpath d='M118 142c36-8 62-32 70-66-38 2-66 26-70 66z'/%3E%3Cpath d='M126 98C94 86 74 62 70 28c34 6 56 30 56 70z'/%3E%3Cpath d='M134 58c26-8 44-26 50-52-30 2-48 20-50 52z'/%3E%3C/svg%3E");
}

:is(#dharma_clinic, .dc-scope) :is(h1, h2, h3, h4, h5) {
    color: var(--dc-deep);
}

/* Карточки: настраиваются переменными самой карточки Bootstrap. */
:is(#dharma_clinic, .dc-scope) .card {
    --card-border-color: var(--dc-line);
    --card-border-radius: 1.25rem;
    --card-box-shadow: var(--dc-shadow);
    --card-bg: var(--dc-white);
    overflow: hidden;
}

:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-surface {
    background: var(--dc-surface);
}

/* ---------- иконки ---------- */

:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--dc-primary);
    -webkit-mask: var(--dc-ico) center / contain no-repeat;
    mask: var(--dc-ico) center / contain no-repeat;
}

:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--calendar { --dc-ico: var(--dc-i-calendar); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--user { --dc-ico: var(--dc-i-user); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--cap { --dc-ico: var(--dc-i-cap); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--award { --dc-ico: var(--dc-i-award); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--star { --dc-ico: var(--dc-i-star); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--pin { --dc-ico: var(--dc-i-pin); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--phone { --dc-ico: var(--dc-i-phone); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--arrow { --dc-ico: var(--dc-i-arrow); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--stethoscope { --dc-ico: var(--dc-i-stethoscope); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--doc { --dc-ico: var(--dc-i-doc); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--tag { --dc-ico: var(--dc-i-tag); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--mail { --dc-ico: var(--dc-i-mail); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--help { --dc-ico: var(--dc-i-help); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--users { --dc-ico: var(--dc-i-users); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--chevron { --dc-ico: var(--dc-i-chevron); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--search { --dc-ico: var(--dc-i-search); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--reset { --dc-ico: var(--dc-i-reset); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--clipboard { --dc-ico: var(--dc-i-clipboard); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--download { --dc-ico: var(--dc-i-download); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--alert { --dc-ico: var(--dc-i-alert); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--clock { --dc-ico: var(--dc-i-clock); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--check { --dc-ico: var(--dc-i-check); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--ban { --dc-ico: var(--dc-i-ban); }
:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-ico--image { --dc-ico: var(--dc-i-image); }

:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-circle {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--dc-white);
    box-shadow: 0 0 0 1px var(--dc-line);
}

:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-circle .dc-ico {
    width: 1.125rem;
    height: 1.125rem;
}

/* ---------- страница врача: верх ---------- */

:is(#dharma_clinic, .dc-scope) .dc-photo {
    max-width: 20rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border-radius: 1.25rem;
    background: var(--dc-surface);
    box-shadow: .75rem .75rem 0 var(--dc-tint-strong);
}

/* Длинные названия («оториноларинголога») не должны вылезать за экран телефона. */
:is(#dharma_clinic, .dc-scope) .dc-top h1 {
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    :is(#dharma_clinic, .dc-scope) .dc-top h1 {
        hyphens: auto;
    }
}

:is(#dharma_clinic, .dc-scope) .dc-chip {
    background: var(--dc-tint);
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-chip:hover,
:is(#dharma_clinic, .dc-scope) .dc-chip:focus-visible {
    background: var(--dc-tint-strong);
}

/* Значок ПроДокторов в цветах их логотипа; в режиме для слабовидящих — цвет текста. */
:is(#dharma_clinic, .dc-scope) .dc-brand {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
}

:is(#dharma_clinic, .dc-scope) .dc-brand__a {
    fill: #ee5c3f;
}

:is(#dharma_clinic, .dc-scope) .dc-brand__b {
    fill: #4e80eb;
}

:is(#dharma_clinic, .dc-scope) .dc-dot::before {
    content: "";
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .625rem;
    border-radius: 50%;
    background: var(--dc-primary);
    vertical-align: .125em;
}

:is(#dharma_clinic, .dc-scope) .dc-top .dc-ico {
    width: 1.375rem;
    height: 1.375rem;
}

/* Меню разделов: липнет под шапкой при прокрутке, подсвечивает текущий раздел; на узком экране — выпадающий список. */
:is(#dharma_clinic, .dc-scope) {
    --dc-sticky-top: 5.75rem;
}

:is(#dharma_clinic, .dc-scope) .dc-nav {
    box-shadow: 0 -.75rem 0 var(--dc-white), var(--dc-shadow);
    position: sticky;
    top: var(--dc-sticky-top);
    z-index: 2;
}

:is(#dharma_clinic, .dc-scope) :is(.dc-top, section[id]) {
    scroll-margin-top: calc(var(--dc-sticky-top) + 4.5rem);
}

:is(#dharma_clinic, .dc-scope) .dc-nav-link {
    border-radius: var(--dc-btn-radius);
    color: var(--dc-deep);
    transition: background-color .25s ease, color .25s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-nav-link:hover,
:is(#dharma_clinic, .dc-scope) .dc-nav-link:focus-visible {
    background: var(--dc-tint);
}

:is(#dharma_clinic, .dc-scope) .dc-nav-link.is-active {
    background: var(--dc-tint-strong);
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-nav__toggle {
    display: none;
}

@media (max-width: 991.98px) {
    :is(#dharma_clinic, .dc-scope) {
        --dc-sticky-top: 6rem;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav.is-ready .dc-nav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        width: 100%;
        padding: .75rem 1rem;
        border: 0;
        background: transparent;
        color: var(--dc-deep);
        font-weight: 600;
        text-align: left;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav__current {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav__chevron {
        transition: transform .3s ease;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav.is-open .dc-nav__chevron {
        transform: rotate(180deg);
    }

    /* Список открывается поверх страницы (позиция absolute), поэтому высота самого меню не меняется и страница не сдвигается.
       Высота списка плавно растёт от 0 до своей (grid 0fr → 1fr); закрытый список не доступен с клавиатуры. */
    :is(#dharma_clinic, .dc-scope) .dc-nav.is-ready {
        overflow: visible;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav.is-ready .dc-nav__panel {
        position: absolute;
        top: calc(100% + .5rem);
        right: 0;
        left: 0;
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        border: 1px solid var(--dc-line);
        border-radius: var(--card-border-radius);
        background: var(--dc-white);
        box-shadow: var(--dc-shadow);
        opacity: 0;
        overflow: hidden;
        transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s .3s;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav.is-open .dc-nav__panel {
        grid-template-rows: 1fr;
        visibility: visible;
        opacity: 1;
        transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav.is-ready .dc-nav__list {
        flex-direction: column;
        flex-wrap: nowrap !important;
        min-height: 0;
        margin: 0;
        padding-block: 0 !important;
        overflow: hidden;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav.is-ready .dc-nav__list > :first-child {
        padding-top: .5rem;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav.is-ready .dc-nav__list > :last-child {
        padding-bottom: .5rem;
    }

    :is(#dharma_clinic, .dc-scope) .dc-nav.is-ready .dc-nav__list .nav-link {
        width: 100%;
        padding-block: .625rem;
    }
}

/* Длинное меню (больше семи разделов, например на странице услуги) сворачивается в список на любой ширине. */
:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-ready .dc-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .75rem 1rem;
    border: 0;
    background: transparent;
    color: var(--dc-deep);
    font-weight: 600;
    text-align: left;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long .dc-nav__current {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long .dc-nav__chevron {
    transition: transform .3s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-open .dc-nav__chevron {
    transform: rotate(180deg);
}

/* Список открывается поверх страницы (позиция absolute), поэтому высота самого меню не меняется и страница не сдвигается.
   Высота списка плавно растёт от 0 до своей (grid 0fr → 1fr); закрытый список не доступен с клавиатуры. */
:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-ready {
    overflow: visible;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-ready .dc-nav__panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    left: 0;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    border: 1px solid var(--dc-line);
    border-radius: var(--card-border-radius);
    background: var(--dc-white);
    box-shadow: var(--dc-shadow);
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s .3s;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-open .dc-nav__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    transition: grid-template-rows .3s ease, opacity .3s ease, visibility 0s;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-ready .dc-nav__list {
    flex-direction: column;
    flex-wrap: nowrap !important;
    min-height: 0;
    margin: 0;
    padding-block: 0 !important;
    overflow: hidden;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-ready .dc-nav__list > :first-child {
    padding-top: .5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-ready .dc-nav__list > :last-child {
    padding-bottom: .5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-nav--long.is-ready .dc-nav__list .nav-link {
    width: 100%;
    padding-block: .625rem;
}

:is(#dharma_clinic, .dc-scope) .dc-tile {
    color: var(--dc-deep);
    transition: border-color .2s ease, box-shadow .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-tile:hover,
:is(#dharma_clinic, .dc-scope) .dc-tile:focus-visible {
    border-color: var(--dc-primary) !important;
    box-shadow: var(--dc-shadow);
}

/* Кнопка «Задать вопрос»: вместо стрелки шаблона знак вопроса, без поворота при наведении. */
.ar-arrow.dc-btn-icon--question::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
    transform: none !important;
}

/* ---------- образование и опыт ---------- */

:is(#dharma_clinic, .dc-scope) .dc-timeline {
    position: relative;
    padding-left: 1.75rem;
}

:is(#dharma_clinic, .dc-scope) .dc-timeline::before {
    content: "";
    position: absolute;
    top: .75rem;
    bottom: .75rem;
    left: .5rem;
    width: 2px;
    background: var(--dc-line);
}

:is(#dharma_clinic, .dc-scope) .dc-timeline > li {
    position: relative;
}

:is(#dharma_clinic, .dc-scope) .dc-timeline > li::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: -1.375rem;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--dc-primary);
    box-shadow: 0 0 0 .25rem var(--dc-white), 0 0 0 .3125rem var(--dc-line);
}

/* Колонка текста может быть уже самого длинного слова (крупный шрифт, разрядка): слово переносится, а не режется. */
:is(#dharma_clinic, .dc-scope) .dc-timeline > li > .col {
    min-width: 0;
    overflow-wrap: anywhere;
}

:is(#dharma_clinic, .dc-scope) .dc-year {
    flex: 0 0 5rem;
    align-self: flex-start;
    padding: .25rem .5rem;
    border-radius: .75rem;
    background: var(--dc-tint);
    color: var(--dc-deep);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ---------- отзывы ---------- */

:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-stars {
    color: var(--dc-primary);
    letter-spacing: .1em;
}

:is(:is(#dharma_clinic, .dc-scope), .dc-modal) .dc-reply {
    border-left-color: var(--dc-primary) !important;
}

/* ---------- страница услуги ---------- */

/* Фото услуги: на телефоне вертикальный кадр 4:5, на широком экране тянется на всю высоту правой колонки
   (само фото лежит поверх, чтобы не раздувать колонку своей высотой). */
:is(#dharma_clinic, .dc-scope) .dc-service-photo {
    position: relative;
    align-self: flex-start;
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 4 / 5;
}

:is(#dharma_clinic, .dc-scope) .dc-service-photo .dc-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
}

@media (min-width: 768px) {
    :is(#dharma_clinic, .dc-scope) .dc-service-photo {
        align-self: stretch;
        max-width: none;
        aspect-ratio: auto;
        min-height: 18rem;
    }
}

/* Показания: плитки без ссылки, тот же вид, что у плиток-ссылок. */
:is(#dharma_clinic, .dc-scope) .dc-point {
    color: var(--dc-deep);
    background: var(--dc-surface);
}

:is(#dharma_clinic, .dc-scope) .dc-point .dc-circle .dc-ico {
    background: var(--dc-primary);
}

/* Галерея фото (макет photos.php): слайдер Swiper; без плагина — сетка. Кадры одного размера, по клику — Fancybox. */
:is(#dharma_clinic, .dc-scope) .dc-photos .swiper-slide {
    height: auto;
}

:is(#dharma_clinic, .dc-scope) .dc-photos:not(.has-swiper) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

:is(#dharma_clinic, .dc-scope) .dc-shot {
    position: relative;
}

:is(#dharma_clinic, .dc-scope) .dc-shot__link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--dc-surface);
    cursor: zoom-in;
}

:is(#dharma_clinic, .dc-scope) .dc-shot img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transform: translateZ(0);
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* Наведение: фото плавно приближается; рамка (overflow + isolation) держит скругление без рывка. */
:is(#dharma_clinic, .dc-scope) .dc-shot__link:hover img,
:is(#dharma_clinic, .dc-scope) .dc-shot__link:focus-visible img {
    transform: scale(1.05) translateZ(0);
}

:is(#dharma_clinic, .dc-scope) .dc-shot__link:focus-visible {
    outline: 2px solid var(--dc-deep);
    outline-offset: 2px;
}

/* Подпись — на самом фото, в прозрачной плашке; клик проходит сквозь неё на фото. */
:is(#dharma_clinic, .dc-scope) .dc-shot__caption {
    position: absolute;
    bottom: .75rem;
    left: .75rem;
    z-index: 1;
    max-width: calc(100% - 4.5rem);
    padding: .375rem .75rem;
    border-radius: .75rem;
    background: color-mix(in srgb, var(--dc-white) 78%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--dc-deep);
    font-size: .875rem;
    line-height: 1.3;
    pointer-events: none;
}

/* Значок лупы появляется при наведении и фокусе. */
:is(#dharma_clinic, .dc-scope) .dc-shot__zoom {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--dc-white);
    color: var(--dc-deep);
    box-shadow: var(--dc-shadow);
    opacity: 0;
    transition: opacity .25s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-shot__link:hover .dc-shot__zoom,
:is(#dharma_clinic, .dc-scope) .dc-shot__link:focus-visible .dc-shot__zoom {
    opacity: 1;
}

:is(#dharma_clinic, .dc-scope) .dc-shot__zoom .dc-ico {
    width: 1.25rem;
    height: 1.25rem;
}

@media (hover: none) {
    :is(#dharma_clinic, .dc-scope) .dc-shot__zoom {
        opacity: 1;
    }
}

/* Вопросы и ответы: каждый вопрос — отдельная раскрывающаяся плашка. */
:is(#dharma_clinic, .dc-scope) .dc-faq > summary {
    border-radius: 1rem;
}

:is(#dharma_clinic, .dc-scope) .dc-faq[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--dc-tint);
}

:is(#dharma_clinic, .dc-scope) .dc-faq__answer {
    padding: .875rem 1rem 1rem;
    border: 1px solid var(--dc-line);
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
}

/* Подзаголовки внутри текста раздела: спокойнее заголовка самой карточки. */
:is(#dharma_clinic, .dc-scope) .dc-text :is(h2, h3, h4) {
    margin: 1.5rem 0 .75rem;
    font-size: 1.125rem;
    font-weight: 700;
}

/* Маркированный список в тексте раздела: галочка в круге вместо чёрных точек. */
:is(#dharma_clinic, .dc-scope) .dc-text ul {
    padding-left: 0;
    list-style: none;
}

:is(#dharma_clinic, .dc-scope) .dc-text ul > li {
    position: relative;
    margin-bottom: .625rem;
    padding-left: 2.25rem;
}

:is(#dharma_clinic, .dc-scope) .dc-text ul > li::before,
:is(#dharma_clinic, .dc-scope) .dc-text ul > li::after {
    content: "";
    position: absolute;
    top: .2em;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-text ul > li::before {
    border-radius: 50%;
    background: var(--dc-tint-strong);
}

:is(#dharma_clinic, .dc-scope) .dc-text ul > li::after {
    background: var(--dc-primary);
    -webkit-mask: var(--dc-i-tick) center / 62% no-repeat;
    mask: var(--dc-i-tick) center / 62% no-repeat;
}

:is(#dharma_clinic, .dc-scope) .dc-text ul ul {
    margin-top: .625rem;
}

/* Нумерованный список в тексте раздела — шаги: цифра в кружке. */
:is(#dharma_clinic, .dc-scope) .dc-text ol {
    padding-left: 0;
    list-style: none;
    counter-reset: dc-step;
}

:is(#dharma_clinic, .dc-scope) .dc-text ol > li {
    position: relative;
    min-height: 2.25rem;
    margin-bottom: .875rem;
    padding-left: 3.25rem;
    counter-increment: dc-step;
}

:is(#dharma_clinic, .dc-scope) .dc-text ol > li::before {
    content: counter(dc-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--dc-tint-strong);
    color: var(--dc-deep);
    font-weight: 700;
}

/* ---------- страница направления ---------- */

/* Верх без фото: тонированная панель с листом справа. */
:is(#dharma_clinic, .dc-scope) .dc-hero {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.25rem;
    border-radius: 1.5rem;
    background: var(--dc-tint);
}

@media (min-width: 768px) {
    :is(#dharma_clinic, .dc-scope) .dc-hero {
        padding: 2.75rem 2.5rem;
    }
}

:is(#dharma_clinic, .dc-scope) .dc-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 2rem;
    bottom: 0;
    width: 14rem;
    background: var(--dc-primary);
    opacity: .08;
    -webkit-mask: var(--dc-leaf-art) center / contain no-repeat;
    mask: var(--dc-leaf-art) center / contain no-repeat;
    pointer-events: none;
}

:is(#dharma_clinic, .dc-scope) .dc-hero__body {
    position: relative;
    z-index: 1;
    max-width: 52rem;
}

/* Верх с фото: на телефоне фото сверху, на широком экране справа и во всю высоту панели (лист не нужен). */
:is(#dharma_clinic, .dc-scope) .dc-hero--photo {
    display: grid;
    gap: 1.5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-hero--photo::after {
    display: none;
}

:is(#dharma_clinic, .dc-scope) .dc-hero__photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--dc-surface);
}

:is(#dharma_clinic, .dc-scope) .dc-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

@media (min-width: 992px) {
    :is(#dharma_clinic, .dc-scope) .dc-hero--photo {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
        align-items: stretch;
    }

    :is(#dharma_clinic, .dc-scope) .dc-hero--photo .dc-hero__photo {
        order: 2;
        aspect-ratio: auto;
        min-height: 18rem;
    }

    :is(#dharma_clinic, .dc-scope) .dc-hero--photo .dc-hero__body {
        align-self: center;
    }
}

:is(#dharma_clinic, .dc-scope) .dc-hero__lead {
    max-width: 44rem;
    color: var(--dc-lead-color);
    font-size: var(--dc-lead-size);
}

/* В теме у вложенного списка без маркеров есть левый отступ (`.list-unstyled .list-unstyled`): карточки лежат в списке сетки,
   поэтому у их рядов значков отступ сбрасываем. */
:is(#dharma_clinic, .dc-scope) :is(.dc-scard, .dc-dcard, .dc-acard) .list-unstyled {
    padding-left: 0;
}

/* Страница заболевания: выделенный блок «Когда обращаться к врачу» и пояснение внизу. */
:is(#dharma_clinic, .dc-scope) .dc-note {
    --card-bg: var(--dc-tint);
    --card-border-color: rgba(var(--dc-primary-rgb), .35);
}

:is(#dharma_clinic, .dc-scope) .dc-note .dc-circle {
    background: var(--dc-white);
}

:is(#dharma_clinic, .dc-scope) .dc-disclaimer {
    padding-inline: .5rem;
}

/* Список заболеваний: алфавит и группы по буквам. */
:is(#dharma_clinic, .dc-scope) .dc-alpha__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: .5rem;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-btn-radius);
    background: var(--dc-white);
    color: var(--dc-deep);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-alpha__item--all {
    padding-inline: 1rem;
}

:is(#dharma_clinic, .dc-scope) .dc-alpha__item:hover,
:is(#dharma_clinic, .dc-scope) .dc-alpha__item:focus-visible {
    border-color: var(--dc-primary);
    background: var(--dc-tint);
}

:is(#dharma_clinic, .dc-scope) .dc-alpha__item.is-active {
    border-color: var(--dc-primary);
    background: var(--dc-primary);
    color: var(--dc-white);
}

:is(#dharma_clinic, .dc-scope) .dc-letter__mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--dc-tint-strong);
    color: var(--dc-deep);
    font-size: 1.25rem;
    font-weight: 700;
}

:is(#dharma_clinic, .dc-scope) .dc-letter__line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--dc-line);
}

:is(#dharma_clinic, .dc-scope) .dc-dtile__code {
    padding: .125rem .5rem;
    border-radius: .5rem;
    background: var(--dc-tint);
    color: var(--dc-deep);
    font-size: .8125rem;
    font-weight: 600;
}

/* Карточка услуги: вся карточка — ссылка. */
:is(#dharma_clinic, .dc-scope) .dc-scard__intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    color: var(--dc-muted);
}

:is(#dharma_clinic, .dc-scope) .dc-scard,
:is(#dharma_clinic, .dc-scope) .dc-acard {
    transition: border-color .2s ease, box-shadow .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-scard:hover,
:is(#dharma_clinic, .dc-scope) .dc-scard:focus-within,
:is(#dharma_clinic, .dc-scope) .dc-acard:hover,
:is(#dharma_clinic, .dc-scope) .dc-acard:focus-within {
    border-color: var(--dc-primary);
    box-shadow: var(--dc-shadow);
}

:is(#dharma_clinic, .dc-scope) .dc-more-link {
    color: var(--dc-primary);
    font-weight: 600;
}

:is(#dharma_clinic, .dc-scope) .dc-more-link .dc-ico {
    width: 1.125rem;
    height: 1.125rem;
}

/* Карточка статьи или акции: картинка 16:9, значок «Акция». */
:is(#dharma_clinic, .dc-scope) .dc-acard__img {
    position: relative;
    overflow: hidden;
    background: var(--dc-surface);
}

:is(#dharma_clinic, .dc-scope) .dc-acard__img img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

:is(#dharma_clinic, .dc-scope) .dc-acard__badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: var(--dc-primary);
    color: var(--dc-white);
    font-size: .8125rem;
    font-weight: 700;
}

:is(#dharma_clinic, .dc-scope) .dc-acard__badge--inline {
    position: static;
    display: inline-block;
}

/* ---------- текст из редактора ---------- */

:is(#dharma_clinic, .dc-scope) .dc-text > :first-child {
    margin-top: 0;
}

:is(#dharma_clinic, .dc-scope) .dc-text > :last-child {
    margin-bottom: 0;
}

:is(#dharma_clinic, .dc-scope) .dc-text img {
    max-width: 100%;
    height: auto;
}

/* ---------- сворачиваемые группы (прайс врача) ---------- */

:is(#dharma_clinic, .dc-scope) .dc-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--dc-line);
    background: var(--dc-surface);
    color: var(--dc-deep);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

:is(#dharma_clinic, .dc-scope) .dc-acc > summary::-webkit-details-marker {
    display: none;
}

:is(#dharma_clinic, .dc-scope) .dc-acc > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--dc-primary);
    -webkit-mask: var(--dc-i-arrow) center / contain no-repeat;
    mask: var(--dc-i-arrow) center / contain no-repeat;
    transform: rotate(90deg);
    transition: transform .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-acc[open] > summary::after {
    transform: rotate(-90deg);
}

:is(#dharma_clinic, .dc-scope) .dc-acc > summary:focus-visible {
    outline: 2px solid var(--dc-deep);
    outline-offset: 2px;
}

:is(#dharma_clinic, .dc-scope) .dc-acc > .dc-price-list {
    margin-top: .5rem;
}

/* «Показать ещё» внутри группы прайса: обычный спойлер, после открытия кнопка исчезает. */
:is(#dharma_clinic, .dc-scope) .dc-more > summary {
    padding: .625rem 1rem;
    border: 1px dashed var(--dc-line);
    color: var(--dc-primary);
    font-weight: 600;
    list-style: none;
    text-align: center;
    cursor: pointer;
}

:is(#dharma_clinic, .dc-scope) .dc-more > summary::-webkit-details-marker {
    display: none;
}

:is(#dharma_clinic, .dc-scope) .dc-more > summary:hover,
:is(#dharma_clinic, .dc-scope) .dc-more > summary:focus-visible {
    border-color: var(--dc-primary);
    background: var(--dc-tint);
}

:is(#dharma_clinic, .dc-scope) .dc-more[open] > summary {
    display: none;
}

/* ---------- блок «Клиника»: запись и контакты одной конструкцией на общем фоне ---------- */

:is(#dharma_clinic, .dc-scope) .dc-clinic {
    background: linear-gradient(100deg, var(--dc-white) 0%, var(--dc-tint) 55%, var(--dc-tint-strong) 100%);
}

:is(#dharma_clinic, .dc-scope) .dc-clinic::after {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: -2rem;
    width: 8rem;
    aspect-ratio: 200 / 320;
    background: var(--dc-tint-strong);
    -webkit-mask: var(--dc-leaf-art) center / contain no-repeat;
    mask: var(--dc-leaf-art) center / contain no-repeat;
    transform: rotate(-12deg);
    pointer-events: none;
}

:is(#dharma_clinic, .dc-scope) .dc-clinic .card-body {
    position: relative;
    z-index: 1;
}

:is(#dharma_clinic, .dc-scope) .dc-clinic__lead {
    max-width: 40rem;
}

:is(#dharma_clinic, .dc-scope) .dc-clinic__line {
    margin-block: 1rem;
    border: 0;
    border-top: 1px solid rgba(var(--dc-primary-rgb), .2);
    opacity: 1;
}

/* ---------- страница «Врачи»: заголовок, фильтр, страницы ---------- */

/* Заголовок страницы (общий для страниц компонента, макет `dharmaclinic.page-head`): крупный заголовок, за ним тонкая
   линия с точкой на конце, ниже подзаголовок приглушённым цветом. Цвета из палитры, в режиме для слабовидящих то же. */
:is(#dharma_clinic, .dc-scope) .dc-pagehead {
    margin-bottom: 1.5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-pagehead__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-pagehead__actions {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Заголовок раздела внутри страницы: тот же вид (линия с точкой), только меньше и с меньшим отступом. */
:is(#dharma_clinic, .dc-scope) .dc-pagehead--section {
    margin-bottom: 1.25rem;
}

:is(#dharma_clinic, .dc-scope) .dc-pagehead__title {
    flex: 0 1 auto;
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-pagehead--section .dc-pagehead__title {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
}

:is(#dharma_clinic, .dc-scope) .dc-pagehead__title span {
    color: #3f9a1f;
}

:is(#dharma_clinic, .dc-scope) .dc-pagehead__line {
    position: relative;
    flex: 1 1 3rem;
    min-width: 2rem;
    max-width: 30rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--dc-primary-rgb), .45));
}

:is(#dharma_clinic, .dc-scope) .dc-pagehead__line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--dc-primary);
    transform: translateY(-50%);
}

:is(#dharma_clinic, .dc-scope) .dc-pagehead__lead {
    margin: var(--dc-lead-gap) 0 0;
    color: var(--dc-lead-color);
    font-size: var(--dc-lead-size);
}

/* Карточки площадок с рейтингом (Яндекс Карты, ПроДокторов): тонированный фон, знак площадки, плитка рейтинга, ветка. */
:is(#dharma_clinic, .dc-scope) .dc-widget {
    position: relative;
    background: linear-gradient(120deg, var(--dc-white) 0%, var(--dc-tint) 60%, var(--dc-tint-strong) 100%);
}

:is(#dharma_clinic, .dc-scope) .dc-widget .card-body {
    position: relative;
    z-index: 1;
}

:is(#dharma_clinic, .dc-scope) .dc-widget::before,
:is(#dharma_clinic, .dc-scope) .dc-widget::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: var(--dc-tint-strong);
    -webkit-mask: var(--dc-widget-art) center / contain no-repeat;
    mask: var(--dc-widget-art) center / contain no-repeat;
}

/* Крупный знак площадки справа вверху и ветка справа внизу. */
:is(#dharma_clinic, .dc-scope) .dc-widget::before {
    top: 1.5rem;
    right: 2rem;
    width: 5.5rem;
    aspect-ratio: 1;
}

:is(#dharma_clinic, .dc-scope) .dc-widget::after {
    --dc-widget-art: var(--dc-leaf-art);
    right: 1rem;
    bottom: -2rem;
    width: 7rem;
    aspect-ratio: 200 / 320;
    transform: rotate(-12deg);
}

:is(#dharma_clinic, .dc-scope) .dc-widget--yandex {
    --dc-widget-art: var(--dc-i-pin);
}

:is(#dharma_clinic, .dc-scope) .dc-widget--prodoctorov {
    --dc-widget-art: var(--dc-i-clipboard);
}

:is(#dharma_clinic, .dc-scope) .dc-widget--2gis {
    --dc-widget-art: var(--dc-i-pin);
}

:is(#dharma_clinic, .dc-scope) .dc-widget__mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .75rem;
    background: rgba(255, 82, 34, .1);
}

:is(#dharma_clinic, .dc-scope) .dc-widget__mark .dc-ico {
    width: 1.75rem;
    height: 1.75rem;
    background: #ff5222;
}

:is(#dharma_clinic, .dc-scope) .dc-widget__mark .dc-brand {
    width: 1.875rem;
    height: 1.875rem;
}

:is(#dharma_clinic, .dc-scope) .dc-widget__mark--pd {
    background: rgba(33, 111, 255, .1);
}

:is(#dharma_clinic, .dc-scope) .dc-widget__mark--dg {
    background: rgba(25, 170, 30, .1);
}

/* Плитка с виджетом рейтинга: код площадки лежит в ней как есть. */
:is(#dharma_clinic, .dc-scope) .dc-widget__rating {
    display: flex;
    align-items: center;
    align-self: flex-start;
    min-width: 0;
    max-width: 100%;
    min-height: 3.5rem;
    padding: .25rem;
    border-radius: .75rem;
    background: var(--dc-surface);
    overflow: hidden;
}

:is(#dharma_clinic, .dc-scope) .dc-widget__rating iframe {
    display: block;
    width: 150px;
    max-width: 100%;
    height: 50px;
    border: 0;
}

:is(#dharma_clinic, .dc-scope) .dc-widget__code {
    overflow-x: auto;
}

:is(#dharma_clinic, .dc-scope) .dc-widget__code:empty {
    display: none;
}

:is(#dharma_clinic, .dc-scope) .dc-widget__text {
    max-width: 24rem;
    color: var(--dc-lead-color);
}

:is(#dharma_clinic, .dc-scope) .dc-filter__search {
    min-height: 3rem;
    border: 1px solid var(--dc-line);
    background: var(--dc-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-filter__search:focus-within,
:is(#dharma_clinic, .dc-scope) .dc-filter .form-select:focus {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--dc-primary-rgb), .15);
}

/* Стрелка списка рисуется маской (цвет из палитры, видна и в режиме для слабовидящих). */
:is(#dharma_clinic, .dc-scope) .dc-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--dc-deep);
    -webkit-mask: var(--dc-i-chevron) center / contain no-repeat;
    mask: var(--dc-i-chevron) center / contain no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Выпадающий список специальностей выходит за карточку фильтра, поэтому обрезка у неё выключена. */
:is(#dharma_clinic, .dc-scope) .dc-filter.card {
    overflow: visible;
}

/* Списки фильтра: значок слева внутри поля, подписи нет (у поля есть скрытая подпись для скринридеров). */
:is(#dharma_clinic, .dc-scope) .dc-select .dc-ico {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 2;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    pointer-events: none;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .form-select,
:is(#dharma_clinic, .dc-scope) .dc-filter .choices__inner {
    min-height: 3rem;
    padding: .5rem 2.75rem .5rem 3rem;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-btn-radius);
    background-color: var(--dc-white);
    background-image: none;
    color: var(--dc-deep);
    font-weight: 600;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .form-select {
    -webkit-appearance: none;
    appearance: none;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .form-select:focus,
:is(#dharma_clinic, .dc-scope) .dc-filter .choices.is-focused .choices__inner,
:is(#dharma_clinic, .dc-scope) .dc-filter .choices.is-open .choices__inner {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--dc-primary-rgb), .15);
}

/* Joomla рисует рамку и у обёртки .choices (двойная рамка), у нас она только у самого поля. */
:is(#dharma_clinic, .dc-scope) .dc-filter .choices,
:is(#dharma_clinic, .dc-scope) .dc-filter .choices[data-type*="select-one"] {
    margin: 0;
    border: 0;
    border-radius: 0;
    outline: 0 !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    background: transparent;
    font-size: 1rem;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices[data-type*="select-one"]::after {
    display: none;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices select {
    display: none !important;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__inner {
    display: flex;
    align-items: center;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__list--single {
    padding: 0;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__list--single .choices__item {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__list--dropdown {
    z-index: 5;
    margin-top: .25rem;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-btn-radius);
    background: var(--dc-white);
    box-shadow: var(--dc-shadow);
    overflow: hidden;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__list--dropdown .choices__input {
    margin: 0;
    padding: .75rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--dc-line);
    border-radius: 0;
    background: transparent;
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__list--dropdown .choices__item {
    padding: .625rem 1rem;
    color: var(--dc-deep);
    font-size: 1rem;
    font-weight: 500;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--dc-tint);
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__list--dropdown .choices__item.is-selected {
    font-weight: 700;
}

:is(#dharma_clinic, .dc-scope) .dc-filter .choices__list--dropdown .choices__item--selectable::after {
    display: none;
}

:is(#dharma_clinic, .dc-scope) .dc-seg {
    min-width: 0;
    margin: 0;
    padding: .25rem;
    gap: .25rem;
    border: 0;
    border-radius: var(--dc-btn-radius);
    background: var(--dc-tint);
}

/* Длинный переключатель (четыре пункта) на узком экране переносится в две строки. */
@media (max-width: 575.98px) {
    :is(#dharma_clinic, .dc-scope) .dc-seg--wrap {
        flex-wrap: wrap;
    }

    :is(#dharma_clinic, .dc-scope) .dc-seg--wrap .dc-seg__option {
        flex: 1 1 calc(50% - .25rem);
    }
}

:is(#dharma_clinic, .dc-scope) .dc-seg__option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

:is(#dharma_clinic, .dc-scope) .dc-seg__option span {
    display: block;
    padding: .6rem 1.25rem;
    border-radius: var(--dc-btn-radius);
    color: var(--dc-deep);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s ease, box-shadow .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-seg__option input:checked + span {
    background: var(--dc-white);
    box-shadow: 0 0 0 1px var(--dc-line), var(--dc-shadow);
}

:is(#dharma_clinic, .dc-scope) .dc-seg__option input:focus-visible + span {
    outline: 2px solid var(--dc-primary);
    outline-offset: 1px;
}

:is(#dharma_clinic, .dc-scope) .dc-filter__count {
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-filter__reset {
    color: var(--dc-primary);
    font-weight: 600;
    text-decoration: none;
}

:is(#dharma_clinic, .dc-scope) .dc-filter__reset.is-idle {
    opacity: .45;
    pointer-events: none;
}

:is(#dharma_clinic, .dc-scope) .dc-filter__reset:hover {
    text-decoration: underline;
}

:is(#dharma_clinic, .dc-scope) .dc-filter__reset .dc-ico {
    width: 1.125rem;
    height: 1.125rem;
}

/* Кнопка «Показать» нужна только без JS: с ним список обновляется сам. */
:is(#dharma_clinic, .dc-scope) .dc-filter.is-ready .dc-filter__submit {
    display: none;
}

:is(#dharma_clinic, .dc-scope) [data-dc-list],
:is(#dharma_clinic, .dc-scope) [data-dc-foot] {
    transition: opacity .2s ease;
}

:is(#dharma_clinic, .dc-scope) [data-dc-listing].is-loading :is([data-dc-list], [data-dc-foot]) {
    opacity: .45;
    pointer-events: none;
}

:is(#dharma_clinic, .dc-scope) .dc-pager__item {
    display: grid;
    place-items: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding-inline: .5rem;
    border: 1px solid var(--dc-line);
    border-radius: .75rem;
    background: var(--dc-white);
    color: var(--dc-deep);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}

:is(#dharma_clinic, .dc-scope) a.dc-pager__item:hover,
:is(#dharma_clinic, .dc-scope) a.dc-pager__item:focus-visible {
    border-color: var(--dc-primary);
    background: var(--dc-tint);
}

:is(#dharma_clinic, .dc-scope) .dc-pager__item.is-current {
    border-color: var(--dc-primary);
    background: var(--dc-primary);
    color: var(--dc-white);
}

:is(#dharma_clinic, .dc-scope) .dc-pager__item .dc-ico {
    width: 1.25rem;
    height: 1.25rem;
    background: currentColor;
}

:is(#dharma_clinic, .dc-scope) .dc-pager__item--prev .dc-ico {
    transform: rotate(90deg);
}

:is(#dharma_clinic, .dc-scope) .dc-pager__item--next .dc-ico {
    transform: rotate(-90deg);
}

:is(#dharma_clinic, .dc-scope) .dc-pager__gap {
    display: grid;
    place-items: center;
    min-width: 1.5rem;
    height: 2.5rem;
    color: var(--dc-deep);
}

/* ---------- карточка врача (список врачей, «Врачи этой специальности») ---------- */

:is(#dharma_clinic, .dc-scope) .dc-dcard {
    --card-border-radius: var(--border-radius-lg, .375rem);
    --card-inner-border-radius: var(--border-radius-lg, .375rem);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard:hover,
:is(#dharma_clinic, .dc-scope) .dc-dcard:focus-within {
    border-color: var(--dc-primary);
    box-shadow: var(--dc-shadow);
}

/* Светлая подложка под фото: у фотографий без вырезанного фона она не видна, у портретов на прозрачном — смотрится. */
:is(#dharma_clinic, .dc-scope) .dc-dcard__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(160deg, var(--dc-tint), var(--dc-tint-strong));
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__empty .dc-ico {
    width: 4rem;
    height: 4rem;
    opacity: .45;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__more {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    border-radius: var(--border-radius-lg, .375rem);
    background: var(--dc-white);
    box-shadow: var(--dc-shadow);
    color: var(--dc-deep);
    font-size: var(--dc-font-sm);
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__more .dc-ico {
    width: 1rem;
    height: 1rem;
    transition: background-color .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard:hover .dc-dcard__more,
:is(#dharma_clinic, .dc-scope) .dc-dcard:focus-within .dc-dcard__more {
    background: var(--dc-primary);
    color: var(--dc-white);
}

:is(#dharma_clinic, .dc-scope) .dc-dcard:hover .dc-dcard__more .dc-ico,
:is(#dharma_clinic, .dc-scope) .dc-dcard:focus-within .dc-dcard__more .dc-ico {
    background: var(--dc-white);
}

/* Вложенный .list-unstyled в Bootstrap получает отступ слева (карточка лежит внутри списка): убираем, чтобы строки шли по краю. */
:is(#dharma_clinic, .dc-scope) .dc-dcard ul {
    padding-left: 0;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__spec {
    color: var(--dc-primary);
    font-weight: 500;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard .dc-ico {
    width: 1.125rem;
    height: 1.125rem;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__more .dc-ico {
    width: 1rem;
    height: 1rem;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__price {
    padding: .5rem .75rem;
    border-radius: var(--border-radius-lg, .375rem);
    background: var(--dc-tint);
    font-size: var(--dc-font-sm);
    text-align: center;
}

:is(#dharma_clinic, .dc-scope) .dc-dcard__price strong {
    color: var(--dc-deep);
}

/* Кнопка выше растянутой ссылки на всю карточку. */
:is(#dharma_clinic, .dc-scope) .dc-dcard__act {
    position: relative;
    z-index: 2;
}

/* ---------- строки прайса ---------- */

:is(#dharma_clinic, .dc-scope) .dc-price-list {
    display: grid;
    gap: .5rem;
}

/* Название, цена, кнопка: на узком экране название на всю ширину, ниже цена и кнопка. */
:is(#dharma_clinic, .dc-scope) .dc-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .75rem 1rem;
    background: var(--dc-white);
    transition: border-color .2s ease, box-shadow .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-price-row:hover,
:is(#dharma_clinic, .dc-scope) .dc-price-row:focus-within {
    border-color: var(--dc-primary) !important;
    box-shadow: var(--dc-shadow);
}

:is(#dharma_clinic, .dc-scope) .dc-price-row__price {
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

:is(#dharma_clinic, .dc-scope) .dc-price-row__act:empty {
    display: none;
}

@media (max-width: 575.98px) {
    :is(#dharma_clinic, .dc-scope) .dc-price-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    :is(#dharma_clinic, .dc-scope) .dc-price-row__name {
        grid-column: 1 / -1;
    }

    :is(#dharma_clinic, .dc-scope) .dc-price-row__price {
        text-align: left;
    }
}

/* Блок «Услуги» на главной (D51): строки как на странице «Прайс», в две колонки на широком экране — по выбору. */
:is(#dharma_clinic, .dc-scope) .dc-price-list--cols2 {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    :is(#dharma_clinic, .dc-scope) .dc-price-list--cols2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem 1rem;
    }
}

:is(#dharma_clinic, .dc-scope) .dc-services-home__all {
    margin: 1.5rem 0 0;
}

/* Значок «?»: описание позиции показывается при наведении и при фокусе (клавиатура, касание). */
:is(#dharma_clinic, .dc-scope) .dc-hint {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: .25rem;
}

:is(#dharma_clinic, .dc-scope) .dc-hint__btn {
    display: inline-grid;
    place-items: center;
    padding: .125rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dc-primary);
    line-height: 0;
    cursor: help;
}

:is(#dharma_clinic, .dc-scope) .dc-hint__btn .dc-ico {
    width: 1.125rem;
    height: 1.125rem;
}

:is(#dharma_clinic, .dc-scope) .dc-hint__btn:focus-visible {
    outline: 2px solid var(--dc-deep);
    outline-offset: 1px;
}

:is(#dharma_clinic, .dc-scope) .dc-hint__tip {
    position: absolute;
    z-index: 5;
    top: calc(100% + .375rem);
    left: 50%;
    width: min(22rem, 80vw);
    max-width: none;
    padding: .625rem .875rem;
    border: 1px solid var(--dc-line);
    border-radius: var(--border-radius-lg, .375rem);
    background: var(--dc-white);
    box-shadow: var(--dc-shadow);
    color: var(--dc-ink);
    font-size: var(--dc-font-sm);
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    transform: translateX(-12%);
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s ease, visibility .15s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-hint:hover .dc-hint__tip,
:is(#dharma_clinic, .dc-scope) .dc-hint:focus-within .dc-hint__tip {
    visibility: visible;
    opacity: 1;
}

/* ---------- слайдер отзывов (Swiper из плагина WT JSwiper) ---------- */

:is(#dharma_clinic, .dc-scope) .dc-reviews-slider .swiper-slide,
:is(#dharma_clinic, .dc-scope) .dc-cslider .swiper-slide {
    height: auto;
}

/* Текст урезается только когда скрипт готов; без JS отзыв виден целиком. */
:is(#dharma_clinic, .dc-scope) [data-dc-reviews].is-ready .dc-review__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

:is(#dharma_clinic, .dc-scope) .dc-review__more {
    --link-color: var(--dc-deep);
    --link-hover-color: var(--dc-primary);
    text-align: left;
}

:is(#dharma_clinic, .dc-scope) :is(.dc-reviews-dots, .dc-photos-dots, .dc-cslider-dots) {
    --swiper-pagination-bullet-inactive-color: var(--dc-line);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-theme-color: var(--dc-primary);
    --swiper-pagination-bullet-horizontal-gap: 0;
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    width: auto;
}

:is(#dharma_clinic, .dc-scope) :is(.dc-reviews-dots, .dc-photos-dots, .dc-cslider-dots) .swiper-pagination-bullet {
    width: .625rem;
    height: .625rem;
    margin: 0;
}

:is(#dharma_clinic, .dc-scope) .dc-round {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--dc-line);
    border-radius: 50%;
    background: var(--dc-white);
    color: var(--dc-deep);
    cursor: pointer;
    transition: border-color .2s ease;
}

:is(#dharma_clinic, .dc-scope) .dc-round:hover,
:is(#dharma_clinic, .dc-scope) .dc-round:focus-visible {
    border-color: var(--dc-primary);
}

:is(#dharma_clinic, .dc-scope) .dc-round .dc-ico {
    width: 1.25rem;
    height: 1.25rem;
}

:is(#dharma_clinic, .dc-scope) :is(.dc-reviews-prev, .dc-photos-prev, .dc-cslider-prev) .dc-ico {
    transform: rotate(180deg);
}

:is(#dharma_clinic, .dc-scope) .dc-round.swiper-button-disabled {
    opacity: .4;
    cursor: default;
}

:is(#dharma_clinic, .dc-scope) .dc-round.swiper-button-lock,
:is(#dharma_clinic, .dc-scope) :is(.dc-reviews-dots, .dc-photos-dots, .dc-cslider-dots).swiper-pagination-lock {
    display: none;
}

/* ---------- режим для слабовидящих: без декора, теней и тонировки ---------- */

html[data-lowvision]:not([data-lowvision="original"]) :is(#dharma_clinic, .dc-scope) {
    --dc-tint: var(--dc-surface);
    --dc-tint-strong: var(--dc-surface);
    --dc-shadow: none;
}

html[data-lowvision]:not([data-lowvision="original"]) :is(#dharma_clinic, .dc-scope) :is(.dc-clinic, .dc-widget)::after,
html[data-lowvision]:not([data-lowvision="original"]) :is(#dharma_clinic, .dc-scope) .dc-widget::before {
    display: none;
}

html[data-lowvision] :is(#dharma_clinic, .dc-scope) .dc-nav {
    position: static;
}

html[data-lowvision]:not([data-lowvision="original"]) :is(#dharma_clinic, .dc-scope) .dc-photo {
    box-shadow: none;
}

html[data-lowvision]:not([data-lowvision="original"]) :is(#dharma_clinic, .dc-scope) .dc-brand path {
    fill: currentColor;
}

/* Крупный шрифт: колонки Bootstrap считаются по ширине окна, поэтому, как и в шаблоне, ставим их друг под другом. */
html:is([data-lv-size="150"], [data-lv-size="200"]) :is(#dharma_clinic, .dc-scope) .row > * {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    :is(#dharma_clinic, .dc-scope) .dc-tile,
    :is(#dharma_clinic, .dc-scope) .dc-htile,
    :is(#dharma_clinic, .dc-scope) .dc-dcard,
    :is(#dharma_clinic, .dc-scope) .dc-dcard__more,
    :is(#dharma_clinic, .dc-scope) .dc-price-row,
    :is(#dharma_clinic, .dc-scope) .dc-hint__tip {
        transition: none;
    }
}

/* ---------- плитки направлений на главной (D49) ---------- */

:is(#dharma_clinic, .dc-scope) .dc-bhead {
    margin-bottom: 1.5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-bhead__eyebrow {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-bhead__eyebrow::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--dc-primary);
}

:is(#dharma_clinic, .dc-scope) .dc-bhead__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
}

/* Кнопка справа в строке заголовка (например, «Все врачи»), прижата к правому краю. */
:is(#dharma_clinic, .dc-scope) .dc-bhead__actions {
    flex: 0 0 auto;
    margin-left: auto;
}

:is(#dharma_clinic, .dc-scope) .dc-bhead__title {
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-bhead__title span {
    color: #3f9a1f;
}

:is(#dharma_clinic, .dc-scope) .dc-bhead__line {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    max-width: 30rem;
    background: linear-gradient(90deg, transparent, rgba(var(--dc-primary-rgb), .45));
}

:is(#dharma_clinic, .dc-scope) .dc-bhead__line::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--dc-primary);
    transform: translateY(-50%);
}

:is(#dharma_clinic, .dc-scope) .dc-bhead__lead {
    margin: .75rem 0 0;
    font-size: 1.125rem;
    color: var(--dc-muted);
}

:is(#dharma_clinic, .dc-scope) .dc-tiles__nav,
:is(#dharma_clinic, .dc-scope) .dc-tiles__pick {
    margin-bottom: 1.5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-tiles__nav {
    --bs-nav-link-padding-x: 1.25rem;
    --bs-nav-link-padding-y: .625rem;
    flex-wrap: wrap;
    gap: .625rem;
}

:is(#dharma_clinic, .dc-scope) .dc-tiles__nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-btn-radius);
    background: var(--dc-white);
    color: var(--dc-deep);
    font-size: .9375rem;
    line-height: 1.25;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}

:is(#dharma_clinic, .dc-scope) .dc-tiles__nav .nav-link:hover {
    border-color: var(--dc-primary);
}

:is(#dharma_clinic, .dc-scope) .dc-tiles__nav .nav-link.active {
    border-color: var(--dc-deep);
    background: linear-gradient(135deg, #0a6b52, var(--dc-deep));
    color: var(--dc-white);
    box-shadow: 0 .5rem 1.25rem rgba(var(--dc-deep-rgb), .22);
}

:is(#dharma_clinic, .dc-scope) .dc-tiles__pillico {
    width: 1.375rem;
    height: 1.375rem;
    background: currentColor;
    -webkit-mask: var(--dc-tile-icon) center / contain no-repeat;
    mask: var(--dc-tile-icon) center / contain no-repeat;
}

:is(#dharma_clinic, .dc-scope) .dc-tiles__select {
    min-height: 3rem;
    padding-inline: 1.25rem 2.5rem;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-btn-radius);
    background-color: var(--dc-white);
    color: var(--dc-deep);
    font-size: 1rem;
    font-weight: 500;
}

:is(#dharma_clinic, .dc-scope) .dc-tiles__select:focus {
    border-color: var(--dc-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--dc-primary-rgb), .15);
}

/* Плитка: слева текст, справа картинка-тизер с округлой левой кромкой (нет картинки — крупный бледный значок). */
:is(#dharma_clinic, .dc-scope) .dc-htile {
    position: relative;
    min-height: 14.5rem;
    border: 1px solid var(--dc-line);
    border-radius: 1.25rem;
    background: var(--dc-white);
    box-shadow: 0 .25rem 1rem rgba(var(--dc-deep-rgb), .05);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

:is(#dharma_clinic, .dc-scope) .dc-htile:hover,
:is(#dharma_clinic, .dc-scope) .dc-htile:focus-within {
    border-color: rgba(var(--dc-primary-rgb), .55);
    box-shadow: 0 .75rem 1.75rem rgba(var(--dc-deep-rgb), .12);
    transform: translateY(-2px);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__body {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    width: 50%;
    height: 100%;
    min-height: inherit;
    padding: 1.25rem 0 1.25rem 1.25rem;
}

/* Картинка: правая часть плитки, левая кромка — пологая дуга; поверх две полупрозрачные полосы по дуге, как в слайдере. */
:is(#dharma_clinic, .dc-scope) .dc-tile__art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 50%;
    border-radius: 30% 0 0 80% / 100% 0 0 100%;
    background: var(--dc-tint) right / cover no-repeat;
    overflow: hidden;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__art:not(.dc-tile__art--icon) {
    opacity: .82;
    transition: opacity .25s;
}

:is(#dharma_clinic, .dc-scope) .dc-htile:hover .dc-tile__art:not(.dc-tile__art--icon),
:is(#dharma_clinic, .dc-scope) .dc-htile:focus-within .dc-tile__art:not(.dc-tile__art--icon) {
    opacity: 1;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__art::before,
:is(#dharma_clinic, .dc-scope) .dc-tile__art::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: inherit;
    pointer-events: none;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__art::before {
    border-left: 1.125rem solid rgba(255, 255, 255, .4);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__art::after {
    left: 1.5rem;
    border-left: .5rem solid rgba(255, 255, 255, .28);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__art--icon {
    background:
        linear-gradient(135deg, rgba(var(--dc-primary-rgb), .10), rgba(var(--dc-primary-rgb), .04)),
        var(--dc-tint);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__bigicon {
    position: absolute;
    inset: 18% 10% 18% 36%;
    background: rgba(var(--dc-primary-rgb), .22);
    -webkit-mask: var(--dc-tile-icon) center / contain no-repeat;
    mask: var(--dc-tile-icon) center / contain no-repeat;
}

/* Значок: маска из файла (набор или свой значок направления), цвет задаёт оформление. */
:is(#dharma_clinic, .dc-scope) .dc-tile__icon {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .375rem;
    border-radius: .75rem;
    background: var(--dc-tint-strong);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__icon::after {
    content: "";
    position: absolute;
    inset: .5rem;
    background: var(--dc-deep);
    -webkit-mask: var(--dc-tile-icon) center / contain no-repeat;
    mask: var(--dc-tile-icon) center / contain no-repeat;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__title {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__title a {
    color: inherit;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__icon,
:is(#dharma_clinic, .dc-scope) .dc-tile__meta,
:is(#dharma_clinic, .dc-scope) .dc-tile__foot {
    position: relative;
    z-index: 2;
}

/* Кликабельна вся плитка: растянутая ссылка заголовка лежит выше текста и картинки. */
:is(#dharma_clinic, .dc-scope) .dc-htile .stretched-link::after {
    z-index: 3;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__meta {
    margin: 0;
    font-size: .875rem;
    color: var(--dc-muted);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: auto;
    padding-top: .75rem;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__price {
    font-weight: 700;
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__go {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    background: var(--dc-tint-strong);
    transition: background-color .2s, transform .2s;
}

:is(#dharma_clinic, .dc-scope) .dc-htile:hover .dc-tile__go {
    background: rgba(var(--dc-primary-rgb), .22);
    transform: translateX(.125rem);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__go .dc-ico {
    width: 1.25rem;
    height: 1.25rem;
}

/* Последняя плитка: тёмная, с переходом ко всем направлениям. */
:is(#dharma_clinic, .dc-scope) .dc-tile--all {
    display: flex;
    min-height: 14.5rem;
    border-color: transparent;
    background: linear-gradient(135deg, #0a6b52, var(--dc-deep));
    box-shadow: 0 .5rem 1.5rem rgba(var(--dc-deep-rgb), .25);
}

:is(#dharma_clinic, .dc-scope) .dc-tile__flower,
:is(#dharma_clinic, .dc-scope) .dc-tile__leaf {
    position: absolute;
    right: -12%;
    bottom: -26%;
    width: 92%;
    height: auto;
    opacity: .9;
    filter: invert(1);
    pointer-events: none;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__leaf {
    aspect-ratio: 200 / 320;
    width: 46%;
    right: 4%;
    bottom: -6%;
    background: #fff;
    -webkit-mask: var(--dc-leaf-art) center / contain no-repeat;
    mask: var(--dc-leaf-art) center / contain no-repeat;
    filter: none;
    opacity: .14;
}

:is(#dharma_clinic, .dc-scope) .dc-tile--all .dc-tile__body {
    position: relative;
    z-index: 2;
    width: 100%;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-tile--all .dc-tile__title {
    font-size: 1.625rem;
    color: #fff;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__button {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .75rem;
    margin: 0;
    padding: .625rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--dc-btn-radius);
    color: #fff;
    font-size: .9375rem;
}

:is(#dharma_clinic, .dc-scope) .dc-tile__button .dc-ico {
    width: 1.125rem;
    height: 1.125rem;
    background: #fff;
}

/* Телефон и узкий планшет (до 768 px, одна колонка): плитка — строка (значок слева, стрелка справа) без картинки, чтобы список не растягивался на несколько экранов. */
@media (max-width: 767.98px) {
    :is(#dharma_clinic, .dc-scope) .dc-htile {
        min-height: 0;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__art {
        display: none;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__body {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: .875rem;
        row-gap: .125rem;
        width: auto;
        padding: 1rem;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__icon {
        grid-row: 1 / span 3;
        margin: 0;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__title,
    :is(#dharma_clinic, .dc-scope) .dc-tile__meta,
    :is(#dharma_clinic, .dc-scope) .dc-tile__price {
        grid-column: 2;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__foot {
        display: contents;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__price {
        white-space: nowrap;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__go {
        grid-column: 3;
        grid-row: 1 / span 3;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile--all .dc-tile__body {
        display: flex;
        padding: 1.25rem;
    }
}

/* Планшет и небольшой ноутбук (768–1199 px, плитки уже): картинка уже, текст мельче, цена в одну строку. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :is(#dharma_clinic, .dc-scope) .dc-tile__art {
        width: 40%;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__body {
        width: 58%;
        padding-left: 1rem;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__title {
        font-size: 1.0625rem;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__price {
        white-space: nowrap;
    }

    :is(#dharma_clinic, .dc-scope) .dc-tile__go {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ---------- отзывы на главной: полоса с оценкой и кнопками над слайдером (D50) ---------- */

:is(#dharma_clinic, .dc-scope) .dc-revbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-bottom: 1.5rem;
}

:is(#dharma_clinic, .dc-scope) .dc-revbar__score {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0;
}

:is(#dharma_clinic, .dc-scope) .dc-revbar__score strong {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--dc-deep);
}

:is(#dharma_clinic, .dc-scope) .dc-revbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-left: auto;
}

:is(#dharma_clinic, .dc-scope) .dc-reviews-home .dc-widgets {
    margin-top: 3rem !important;
}

.dc-scope.dc-services-home .dc-price-row__name a {
    font-weight: 600;
    color: var(--dc-deep);
    text-decoration: none;
}

.dc-scope.dc-services-home .dc-price-row__name a:hover,
.dc-scope.dc-services-home .dc-price-row__name a:focus-visible {
    text-decoration: underline;
}

/* Блок главной с лёгким фоном на всю ширину страницы: подложка выходит за контейнер тенью, обрезка не даёт горизонтальной прокрутки. Отступы блока — его собственные (`dharma-section`). */
:is(#dharma_clinic, .dc-scope).dc-band {
    background: var(--dc-surface);
    box-shadow: 0 0 0 100vmax var(--dc-surface);
    clip-path: inset(0 -100vmax);
}

/* Волна между фото и текстом карточки статьи и акции — как у слайда на главной: три полосы цвета карточки (прозрачность .18, .38 и сплошная). */
:is(#dharma_clinic, .dc-scope) .dc-acard__curve {
    position: absolute;
    inset: auto 0 -1px 0;
    display: block;
    width: 100%;
    height: 3rem;
    fill: var(--bs-card-bg, var(--dc-white));
    transform: scaleY(-1);
    pointer-events: none;
}

/* Низ карточки статьи и акции: «Читать» и небольшая кнопка-стрелка справа, как у плиток направлений; вся карточка — ссылка. */
:is(#dharma_clinic, .dc-scope) .dc-acard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

:is(#dharma_clinic, .dc-scope) .dc-acard__read {
    color: var(--dc-primary);
    font-weight: 600;
}

:is(#dharma_clinic, .dc-scope) .dc-acard:is(:hover, :focus-within) .dc-tile__go {
    background: rgba(var(--dc-primary-rgb), .22);
    transform: translateX(.125rem);
}