/* PP — стили шаблона pp. Загружается после theme.css.
   Правила собраны по компонентам; внутри разделов сохранён исходный порядок.
   Все @media находятся в конце в исходном порядке.
   Не добавлять reset/Bootstrap grid; использовать компонентные BEM-префиксы. */


/* ОГЛАВЛЕНИЕ — разделы расположены ниже в этом порядке.
   1. Основы: токены, шрифты, типографика и каркас
   2. Навигация, заголовки, хлебные крошки и пагинация
   3. Шапка и подвал
   4. Кнопки и действия виджетов
   5. Анимации
   6. Формы, поля и фильтры
   7. Отзывы и комментарии
   8. Статьи и медиаматериалы
   9. Эксперты
   10. Школы
   11. Главная страница и общие контентные карточки
   12. Календарь и события
   13. Контакты
   14. Курсы и цены
   15. Панель отладки
   16. Модальные окна и авторизация
   17. Пользователи
   18. Промокоды
   19. Общие утилиты и совместимость
   20. Социальные кнопки
   21. Адаптивные стили — исходный порядок условий и правил
   Внутри разделов ищите комментарии «Блок:», в конце — «Адаптив:».
   Повторные подписи блока обозначают продолжение его правил в исходном порядке.
*/
/* ======================================================================
   Основы: токены, шрифты, типографика и каркас
   ====================================================================== */

/* Блок: Переменные темы: цвета, шрифты, отступы, радиусы и уровни наложения. */
:root {
    --color-accent-soft: #a0b7d9;
    --color-bg-accent: #e1ecf9;
    --color-bg-card-soft: #f5f5f7;
    --color-bg-input: #fafcff;
    --color-bg-light: #fafafc;
    --color-bg-section: #ecf3fb;
    --color-bg-white: #fff;
    --color-border: #b8bfd8;
    --color-border-light: #d4d4d4;
    --color-border-placeholder: #d9d9d9;
    --color-fav: #cadbf2;
    --color-icon-muted: #c4c4c4;
    --color-modal-backdrop: #0006;
    --color-notify: #ff2d2d;
    --color-primary: #2047cf;
    --color-primary-hover: #1235b3;
    --color-primary-soft: #e9edfa;
    --color-primary-soft-active: #dbe1f7;
    --color-shadow: #00000014;
    --color-shadow-accent: #11305f33;
    --color-shadow-dark: #00000026;
    --color-star: #fbc500;
    --color-text-accent: #4e77b5;
    --color-text-accent-soft: #5a7fb7;
    --color-text-caption: #8f8f8f;
    --color-text-inverse: #fff;
    --color-text-muted: #6b7280;
    --color-text-primary: #333336;
    --color-text-secondary: #202020;
    --color-text-soft: #b8bfd8;
    --color-warning: #f59e0b;
    --dbg-color-bg-card-soft: #f5f5f7;
    --dbg-color-bg-input: #fafcff;
    --dbg-color-bg-light: #fafafc;
    --dbg-color-bg-section: #ecf3fb;
    --dbg-color-bg-white: #fff;
    --dbg-color-border: #b8bfd8;
    --dbg-color-border-light: #d4d4d4;
    --dbg-color-border-placeholder: #d9d9d9;
    --dbg-color-primary: #2047cf;
    --dbg-color-primary-soft: #e9edfa;
    --dbg-color-shadow-dark: #00000026;
    --dbg-color-text-accent-soft: #5a7fb7;
    --dbg-color-text-caption: #8f8f8f;
    --dbg-color-text-inverse: #fff;
    --dbg-color-text-muted: #6b7280;
    --dbg-color-text-primary: #333336;
    --dbg-color-text-secondary: #202020;
    --dbg-color-warning: #f59e0b;
    --dbg-radius-full: 9999px;
    --dbg-radius-sm: 4px;
    --dbg-spacing-0-5: 4px;
    --dbg-spacing-0-75: 6px;
    --dbg-spacing-1: 4px;
    --dbg-spacing-1-5: 12px;
    --dbg-spacing-2: 8px;
    --dbg-spacing-3: 12px;
    --dbg-spacing-4: 16px;
    --dbg-transition-fast: .15s ease;
    --font-family-sans-serif: InterVariable, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pp-field-bg: #fafcff;
    --pp-field-border: #b8bfd8;
    --pp-field-border-focus: #869ae3;
    --pp-field-border-hover: #869ae3;
    --pp-field-color: #333336;
    --pp-field-error: #ff5150;
    --pp-field-font-size: 16px;
    --pp-field-font-weight: 400;
    --pp-field-h: 44px;
    --pp-field-line-height: 20px;
    --pp-field-padding-x: 16px;
    --pp-field-padding-y: 10px;
    --pp-field-placeholder: #b8bfd8;
    --pp-field-radius: 16px;
    --radius-full: 9999px;
    --radius-lg: 16px;
    --radius-md: 8px;
    --radius-sm: 4px;
    --radius-xl: 24px;
    --spacing-0-25: 2px;
    --spacing-0-5: 4px;
    --spacing-0-75: 6px;
    --spacing-1: 4px;
    --spacing-1-25: 10px;
    --spacing-1-5: 12px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-15: 60px;
    --spacing-2: 8px;
    --spacing-2-25: 18px;
    --spacing-2-75: 22px;
    --spacing-20: 80px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-5-5: 44px;
    --spacing-6: 24px;
    --spacing-6-25: 50px;
    --spacing-8: 32px;
    --transition-base: .25s ease;
    --transition-fast: .15s ease;
    --z-modal: 300;
    --z-sticky: 200;
    --z-tooltip: 400;
}

/* Подробный рейтинг отзывов: Figma 736:10061. */
.widget_ireviews_rates.ireviews-rates {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    font-family: Manrope, sans-serif;
}

.ireviews-rates__card {
    min-width: 0;
    min-height: 226px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333336;
    border: 0;
    border-radius: 24px;
    background: #ecf3fb;
}

.ireviews-rates__card--summary {
    padding-right: 24px;
    padding-left: 24px;
    gap: 16px;
}

.ireviews-rates__summary,
.ireviews-rates__overall,
.ireviews-rates__stats,
.ireviews-rates__distribution {
    display: flex;
    flex-direction: column;
}

.ireviews-rates__summary {
    align-items: center;
    gap: 10px;
}

.ireviews-rates__overall {
    align-items: center;
    gap: 2px;
}

.ireviews-rates__headline,
.ireviews-rates__score,
.ireviews-rates__row {
    display: flex;
    align-items: center;
}

.ireviews-rates__headline {
    justify-content: center;
    gap: 8px;
    color: #333336;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.ireviews-rates__score {
    gap: 4px;
}

.ireviews-rates__score strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
}

.ireviews-rates__star,
.ireviews-rates__star svg {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
}

.ireviews-rates__star {
    display: inline-flex;
    color: #fbc500;
}

.ireviews-rates__reviews-link {
    color: #333336;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ireviews-rates__stats {
    align-items: center;
    gap: 3px;
    color: #333336;
    font-size: 14px;
    line-height: 18px;
}

.ireviews-rates__stats strong {
    font-weight: 600;
}

.ireviews-rates__action .btn {
    min-width: 168px;
    min-height: 36px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 40px;
    background: #2047cf;
    font-family: Montserrat, Manrope, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.ireviews-rates__card--detail {
    gap: 10px;
}

.ireviews-rates__distribution {
    width: 118px;
    gap: 4px;
}

.ireviews-rates__row {
    min-height: 21px;
    gap: 8px;
    white-space: nowrap;
}

.ireviews-rates__row > strong {
    width: 14px;
    flex: 0 0 14px;
    font-size: 17px;
    font-weight: 600;
    line-height: 21px;
}

.ireviews-rates__row > a,
.ireviews-rates__row > span:last-child {
    color: #333336;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.ireviews-rates__row > a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 1023.98px) {
    .widget_ireviews_rates.ireviews-rates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .widget_ireviews_rates.ireviews-rates {
        grid-template-columns: 1fr;
    }

    .ireviews-rates__card {
        min-height: 210px;
    }
}

/* Блок: Подключение локальных шрифтов Inter и Montserrat. */
@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Inter/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
    font-family: MontserratVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
}

/* Блок: Базовая типографика: шрифты текста, заголовки и абзацы. */
body,
button,
input,
optgroup,
select,
textarea {
    font-family: InterVariable, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Блок: Кнопки — Montserrat для всех стилов кнопок и ссылок с кнопочными классами
   (button/input-кнопки + любой класс, содержащий "btn": .btn, .btn--primary,
   *-btn, __btn и т.п.). Обычные ссылки и поля ввода остаются на Inter. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[class*="btn"],
[class*="__card-title"] {
    font-family: MontserratVariable, "Montserrat", sans-serif;
}

h1, h2, h3 {
    font-family: MontserratVariable, "Montserrat", sans-serif;
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1em 0;
}

h4, h5, h6 {
    font-family: InterVariable, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--color-text-primary);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75em 0;
}

h1 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.15;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin: 0 0 1em 0;
}

/* Блок: Каркас страницы: фон, основные контейнеры и области шаблона. */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: InterVariable, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    /* Страховка от горизонтальной прокрутки full-bleed элементов (см. .full-width).
       clip не создаёт скролл-контейнер, поэтому sticky-шапка продолжает работать. */
    overflow-x: clip;
}

body.__gray {
    background: var(--color-bg-card-soft);
}

.icms-widget.main-page {
    padding: 25px 0 60px !important;
}

body > header,
body > footer {
    flex: 0 0 auto;
}

body > #page-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-top: 30px;
    /* clip, а не hidden: при overflow-x:hidden браузер переводит overflow-y
       из visible в auto — появляется внутренний скроллбар страницы. */
    overflow-x: clip;
}

#page-wrapper.frontpage {
    padding-top: 0;
}

#page-wrapper > main {
    flex: 1 0 auto;
    padding-top: 25px;
}

#page-wrapper > main:empty {
    display: none;
}

.site-header {
    margin-bottom: 40px;
}

/* Блок: Общие состояния ссылок и оформление подчёркивания. */
a,
a:hover,
a:focus,
a:focus-visible,
a:active,
a:visited {
    text-decoration: none;
}

/* ======================================================================
   Навигация, заголовки, хлебные крошки и пагинация
   ====================================================================== */

/* Блок: Заголовок страницы. Ориентир: h1. */
h1 {
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
    color: var(--color-text-primary);
}

/* Заголовок виджета — стили идентичны h1.
   Перекрывает лишнее из theme.css: размеры 54/50/40/25px, text-align: center,
   margin 0 0 40px, font-weight 600. */
.widget .widget__title {
    font-family: MontserratVariable, "Montserrat", sans-serif;
    color: var(--color-text-primary);
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Отступ шапки виджета снизу (перебивает 40px из theme.css). */
.widget__header {
    margin-bottom: 20px;
}

/* Блок: Подписка рядом с заголовком страницы. Ориентир: .subscribe_wrap. */
.subscribe_wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.subscribe_wrap .subscribe-btn .icms-svg-icon,
.subscribe_wrap .subscribe-btn .icon,
.subscribe_wrap .subscribe-btn .icon-bell,
.subscribe_wrap .subscribe-btn .icon-bell-slash {
    display: none;
}

.subscribe_wrap .count-subscribers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    background: #eaeaea;
    border: 0;
    border-radius: 24px;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, font-weight .2s ease;
    margin: 0 !important;
    position: relative;
}

.subscribe_wrap .count-subscribers:hover,
.subscribe_wrap .count-subscribers:focus-visible,
.subscribe_wrap .count-subscribers:active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
}

.subscribe_wrap .count-subscribers:active {
    background: var(--color-primary-soft-active);
}

.subscribe_wrap .count-subscribers::after {
    display: none;
}

/* Блок: Хлебные крошки: цепочка навигации и разделители. Ориентир: .pp-breadcrumbs. */
.pp-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
}

.pp-header {
    margin-bottom: 15px;
}

.pp-breadcrumbs__item {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-base);
}

.pp-breadcrumbs__item:hover,
.pp-breadcrumbs__item:focus-visible {
    color: var(--color-primary);
}

.pp-breadcrumbs__item--current {
    text-decoration: none;
    color: var(--color-text-secondary);
}

.pp-breadcrumbs__sep {
    color: var(--color-text-soft);
    user-select: none;
}

/* Блок: Постраничная навигация pp: номера и кнопки переходов. Ориентир: .pp-pagination. */
.pp-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    margin-bottom: 60px;
}

.pp-pagination__pages {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pp-pagination__page + .pp-pagination__page,
.pp-pagination__page + .pp-pagination__page--gap,
.pp-pagination__page--gap + .pp-pagination__page {
    margin-left: -6px;
}

.pp-pagination__page,
.pp-pagination__page-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-radius .2s ease, opacity .2s ease, box-shadow .2s ease;
    text-decoration: none;
}

.pp-pagination a,
.pp-pagination a:hover,
.pp-pagination a:focus,
.pp-pagination a:focus-visible {
    text-decoration: none;
}

.pp-pagination__page {
    width: 38px;
    height: 38px;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 12px;
    color: var(--color-accent-soft);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.pp-pagination__page:hover:not(.is-active):not(.pp-pagination__page--gap),
.pp-pagination__page:focus-visible:not(.is-active):not(.pp-pagination__page--gap) {
    color: #6e87ac;
}

.pp-pagination__page:active:not(.is-active):not(.pp-pagination__page--gap),
.pp-pagination__page.is-active {
    color: #6e87ac;
    background: #eff5fc;
    border-color: transparent;
    border-radius: 40px;
    font-weight: 800;
}

.pp-pagination__page:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(32, 71, 207, 0.2);
}

.pp-pagination__page--gap {
    color: var(--color-accent-soft);
    cursor: default;
    pointer-events: none;
}

.pp-pagination__page-arrow {
    width: 24px;
    height: 24px;
    color: var(--color-accent-soft);
}

.pp-pagination__page-arrow:hover,
.pp-pagination__page-arrow:focus-visible {
    color: #6e87ac;
}

.pp-pagination__page-arrow[aria-disabled="true"] {
    opacity: .3;
    pointer-events: none;
    cursor: default;
}

.pp-pagination__counter {
    margin: 0;
    color: var(--color-border);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}

.pp-pagination svg.icms-svg-icon {
    width: 24px;
    height: 24px;
}

/* Блок: Ссылки на подкатегории в виде плашек. Ориентир: .icms-content-subcats-pills. */
.icms-content-subcats-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.icms-content-subcats-pills .btn--outline {
    min-height: 34px;
    padding: 8px 16px;
    border: 1.5px solid var(--color-primary);
    border-radius: 40px;
    background: transparent;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.icms-content-subcats-pills .btn--outline:hover,
.icms-content-subcats-pills .btn--outline:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.icms-content-subcats-pills .btn--outline sup,
.icms-content-subcats-pills .btn--outline .icms-content-subcats__count {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #6e87ac;
}

/* Блок: Компонент пагинации страниц. Ориентир: .page-pagination. */
.page-pagination {
    align-items: center;
    gap: var(--spacing-1-25);
    padding-top: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.page-pagination__bar {
    align-items: center;
    gap: var(--spacing-1-25);
    display: flex;
}

.page-pagination__arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-accent-soft);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.page-pagination__arrow svg {
    color: currentColor;
    width: .5rem;
    height: .875rem;
}

.page-pagination__arrow:hover:not(:disabled), .page-pagination__arrow:focus-visible {
    color: var(--color-primary);
}

.page-pagination__page {
    width: 2.375rem;
    height: 2.375rem;
    padding: var(--spacing-0-75);
    color: var(--color-accent-soft);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: .75rem;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.375rem;
    display: inline-flex;
}

.page-pagination__page:hover:not([aria-current=page],:disabled) {
    background: var(--color-bg-section);
}

.page-pagination__page--active {
    color: #6e87ac;
    background: #eff5fc;
    border-radius: 40px;
    font-weight: 800;
}

.page-pagination__info {
    color: var(--color-border);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

/* Блок: Вкладки страницы. Ориентир: .page-tabs. */
.page-tabs {
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.page-tabs__tab {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    background: 0 0;
    border-radius: 40px;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.page-tabs__tab:hover, .page-tabs__tab:focus-visible, .page-tabs__tab.is-active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* Блок: Заголовок страницы. Ориентир: .page-title. */
.page-title {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.page-title__title-row {
    gap: var(--spacing-3);
    flex-direction: column;
    display: flex;
}

.page-title__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.page-title__actions {
    align-items: center;
    gap: var(--spacing-1);
    order: -1;
    display: flex;
}

.page-title__btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border: 1.5px solid #0000;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.page-title__btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.page-title__btn--primary:hover, .page-title__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.page-title__notify {
    min-width: 2.125rem;
    height: 2.125rem;
    padding: 0 var(--spacing-2);
    color: var(--color-text-secondary);
    background: #eaeaea;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.page-title__description {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

/* Блок: Верхняя панель страницы: заголовок и действия. Ориентир: .page-topbar. */
.page-topbar {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.page-topbar__breadcrumbs {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.page-topbar__breadcrumb {
    color: var(--color-text-secondary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.page-topbar__breadcrumb:hover, .page-topbar__breadcrumb:focus-visible {
    color: var(--color-primary);
}

.page-topbar__breadcrumb--current {
    text-decoration: none;
}

.page-topbar__breadcrumb-sep {
    color: var(--color-text-secondary);
}

.page-topbar__actions {
    width: 100%;
}

.page-topbar__action-btn {
    width: 100%;
    min-height: 44px;
    padding: 13px 24px;
}

.page-topbar__actions-menu {
    min-width: 14rem;
}

.page-topbar__action {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-base);
    background: 0 0;
    border: none;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.page-topbar__action:hover, .page-topbar__action:focus-visible {
    background: var(--color-bg-section);
}

/* Блок: Индикаторы страниц слайдера Swiper. Ориентир: .swiper-pagination-fraction. */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
    width: auto;
}

.swiper-pagination-bullet {
    cursor: pointer;
    opacity: 1;
    width: 13px;
    height: 13px;
    transition: width var(--transition-base), background-color var(--transition-base);
    background: var(--color-bg-section);
    border: none;
    border-radius: 16px;
    padding: 0;
    display: block;
}

.swiper-pagination-bullet-active {
    background: var(--color-accent-soft);
    width: 63px;
}

/* ---------- menu-item-menu (expert/courses tabs) ---------- */

/* Блок: Навигационные вкладки внутри страницы материала. Ориентир: .content_item .menu-item-menu. */
.content_item .menu-item-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    border-bottom: 1.5px solid var(--color-border-light);
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    list-style: none;
}

.content_item .menu-item-menu.nav.nav-tabs {
    border-bottom: 1.5px solid var(--color-border-light);
}

.content_item .menu-item-menu .nav-item {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-bottom: 0;
    margin-bottom: -1.5px;
}

.content_item .menu-item-menu .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--color-text-secondary) !important;
    font-family: Manrope, sans-serif;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 18px;
    transition: color 0.2s ease;
}

.content_item .menu-item-menu .nav-link:hover {
    color: var(--color-text-primary) !important;
}

.content_item .menu-item-menu .nav-item.is-active,
.content_item .menu-item-menu .nav-item:has(.nav-link.active) {
    border-bottom: 1.5px solid var(--color-primary);
}

.content_item .menu-item-menu .nav-item.is-active .nav-link,
.content_item .menu-item-menu .nav-link.active {
    color: var(--color-primary) !important;
    font-weight: 500;
}

.content_item .menu-item-menu .nav-item-text {
    display: inline-block;
}

.content_item .menu-item-menu .counter.badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0 !important;
    background: var(--color-bg-section) !important;
    color: var(--color-text-secondary) !important;
    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    border-radius: 24px;
    vertical-align: middle;
}

.content_item .menu-item-menu .nav-item.is-active .nav-link .counter.badge,
.content_item .menu-item-menu .nav-link.active .counter.badge {
    color: var(--color-primary) !important;
}

/* ======================================================================
   Шапка и подвал
   ====================================================================== */

/* Блок: Общая оболочка шапки. Ориентир: .header. */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background: var(--color-text-inverse);
}

/* Блок: Верхняя полоса шапки: бренд, меню и профиль. Ориентир: .header-top. */
.header-top {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.header-top__brand {
    background: var(--color-text-inverse);
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
    transition: opacity 0.25s ease, transform 0.25s ease;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
    flex-shrink: 0;
}

.header-top__brand:hover,
.header-top__brand:focus-visible {
    opacity: 1;
    background: var(--color-primary-soft);
    transform: none;
}

.header-top__brand-icon {
    width: var(--spacing-4, 16px);
    height: var(--spacing-4, 16px);
}

.header-top__inner {
    min-height: 56px;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.header-top__right {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-left: auto;
}

.header-top__nav {
    display: block;
}

.header-top__menu {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-top__menu-link {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    color: var(--color-text-inverse);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 24px;
    transition: border-color .25s ease, background-color .25s ease;
}

.header-top__menu-link:hover,
.header-top__menu-link:focus-visible {
    color: var(--color-text-inverse);
    border-color: #869ae3;
}

.header-top__actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-top__notify-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.header-top__notify {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-inverse);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity .25s ease;
    position: relative;
}

.header-top__notify:hover,
.header-top__notify:focus-visible {
    background: #fff;
    color: var(--color-primary);
    border-radius: 50%;
    opacity: 1;
}

.header-top__notify-icon {
    width: 24px;
    height: 24px;
}

.header-top__notify-dot {
    position: absolute;
    top: 1px;
    right: 0;
    width: 8px;
    height: 8px;
    background: #ff2d2d;
    border: 1px solid var(--color-bg-light);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.header-top__wallet {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: opacity .25s ease;
}

.header-top__wallet:hover,
.header-top__wallet:focus-visible,
.header-top__wallet:active {
    color: var(--color-text-inverse);
    opacity: .75;
    text-decoration: none;
}

.header-top__wallet-amount {
    position: relative;
    z-index: 10;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 39px;
    height: 12px;
    padding: 1px 3px;
    background: #ff2d2d;
    color: var(--color-text-inverse);
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    border-radius: 9999px;
}

.header-top__wallet-icon {
    width: 24px;
    height: 24px;
    margin-left: 4px;
}

.header-top__profile {
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px 0 0;
    background: var(--color-text-inverse);
    color: var(--color-primary);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color .25s ease, box-shadow .25s ease;
    border: none;
    flex-shrink: 0;
    display: inline-flex;
}

.header-top__profile:hover,
.header-top__profile:focus-visible,
.header-top__profile[aria-expanded="true"] {
    box-shadow: none;
    background: var(--color-primary-soft-active);
}

.header-top__profile[aria-expanded="true"] .header-top__profile-arrow {
    transform: rotate(180deg);
}

.header-top__profile-avatar {
    background: var(--color-bg-light);
    border-radius: 50%;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: block;
    overflow: hidden;
}

.header-top__profile-avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.header-top__profile-avatar {
    border: 1.5px solid var(--color-text-inverse);
    transition: border-color .25s ease;
    flex-shrink: 0;
}

.header-top__profile:hover .header-top__profile-avatar,
.header-top__profile:focus-visible .header-top__profile-avatar,
.header-top__profile[aria-expanded="true"] .header-top__profile-avatar {
    border-color: var(--color-primary-soft-active);
}

.header-top__profile-name {
    max-width: 140px;
    color: var(--color-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    overflow: hidden;
}

.header-top__profile-arrow {
    width: 16px;
    height: 8px;
    color: var(--color-primary);
    transition: transform .25s ease;
    flex-shrink: 0;
}

/* Блок: Выпадающие меню: панель, пункты и состояния открытия. Ориентир: .dropdown-menu. */
.dropdown-menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    border: 1px solid #b8bfd8;
    padding: 8px 0;
    min-width: 168px;
    background: #ffffff;
}

.dropdown-item {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 16px;
    color: #4e4e4e;
    min-height: 36px;
    align-items: center;
    gap: 10px;
}

.dropdown-item.text-danger {
    border-top: 1px solid var(--color-border-light);
    margin-top: 4px;
}

/* Блок: Основная полоса шапки: логотип, навигация, поиск и подменю. Ориентир: .header-bottom__inner. */
.header-bottom__inner {
    min-height: 50px;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 120px;
}

.header-bottom__brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.header-bottom__logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: inherit;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity .25s ease;
}

.header-bottom__logo:hover,
.header-bottom__logo:focus-visible {
    opacity: .75;
}

.header-bottom__tagline {
    display: block;
    max-width: 143px;
    margin: 0;
    color: var(--color-text-caption);
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
}

.header-bottom__right {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-left: auto;
    position: relative;
}

.header-bottom__burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    position: relative;
}

.header-bottom__burger-line {
    display: block;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .25s ease, opacity .25s ease, width .25s ease;
}

.header-bottom__burger-line--top,
.header-bottom__burger-line--bottom {
    align-self: flex-start;
    width: 20px;
}

.header-bottom__burger-line--middle {
    width: 28px;
}

.header-bottom__burger[aria-expanded="true"] .header-bottom__burger-line--top {
    transform: translateY(7.5px) rotate(45deg);
}

.header-bottom__burger[aria-expanded="true"] .header-bottom__burger-line--middle {
    opacity: 0;
}

.header-bottom__burger[aria-expanded="true"] .header-bottom__burger-line--bottom {
    width: 24px;
    transform: translateY(-7.5px) rotate(-45deg);
}

.header-bottom__nav {
    display: block;
}

.header-bottom__menu {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-bottom__menu-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 24px;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.header-bottom__menu-link:hover,
.header-bottom__menu-link:focus-visible {
    border-color: #869ae3;
}

.header-bottom__menu-link[aria-expanded="true"] {
    color: var(--color-primary);
}

.header-bottom__menu-link[aria-expanded="true"] .header-bottom__menu-arrow {
    transform: rotate(180deg);
}

.header-bottom__menu-arrow {
    flex-shrink: 0;
    width: 8px;
    height: 4px;
    color: currentColor;
    transition: transform .25s ease;
}

.header-bottom__search {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
    z-index: 2;
    position: relative;
    transition: opacity .25s ease;
}

.header-bottom__search-icon {
    width: 32px;
    height: 32px;
}

.header-bottom__search-panel {
    position: absolute;
    top: 50%;
    left: 0;
    right: 30px;
    z-index: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 8px 16px;
    background: var(--color-text-inverse);
    border: 1.5px solid var(--color-border);
    border-radius: 40px;
    opacity: 0;
    visibility: hidden;
    transform: translate(24px, -50%) scaleX(0);
    transform-origin: 100%;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

input.header-bottom__search-input,
form input.header-bottom__search-input,
.header-bottom__search-panel input.header-bottom__search-input {
    flex: 1;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    color: var(--color-text-primary);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

.header-bottom__search-input::-webkit-search-cancel-button,
.header-bottom__search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.header-bottom__search-input::placeholder {
    color: rgba(0, 10, 38, 0.27);
}

.header-bottom__submenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1;
    min-width: 200px;
    margin: 0;
    padding: 8px 0;
    background: var(--color-text-inverse);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    list-style: none;
}

.header-bottom__submenu-link {
    display: block;
    width: 100%;
    padding: 8px 16px;
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    transition: background-color .25s ease;
}

.header-bottom__submenu-link:hover,
.header-bottom__submenu-link:focus-visible {
    background: var(--color-bg-section);
}

/* Блок: Подвал: бренд, ссылки, соцсети и платёжные значки. Ориентир: .footer. */
.footer {
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    margin-top: 60px;
    padding: 24px 0 16px;
}

.container.main-page {
    margin-bottom: 50px;
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
}

.footer__logo {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: opacity .25s ease;
}

.footer__logo:hover,
.footer__logo:focus-visible {
    opacity: .85;
}

.footer__nav {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex: auto;
}

.footer__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
}

.footer__subgroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__column-title {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
}

.footer__column-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer__column-item {
    line-height: 1;
}

.footer__column-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    transition: color .25s ease;
}

.footer__column-link:hover,
.footer__column-link:focus-visible {
    color: var(--color-primary);
}

.footer__column-arrow {
    flex-shrink: 0;
    width: 8px;
    height: 4px;
    color: currentColor;
    transition: transform .25s ease;
}

.footer__social {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
}

.footer__social-link {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
    width: 32px;
    height: 32px;
    background: var(--color-text-inverse);
    color: var(--color-primary);
    border-radius: 50%;
    text-decoration: none;
    transition: opacity .25s ease, transform .25s ease;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
    opacity: .85;
    transform: scale(1.04);
}

.footer__divider {
    width: 100%;
    height: 1.5px;
    background: var(--color-border-light);
}

.footer__bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.footer__legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 750px;
}

.footer__legal-text {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}

.footer__legal-link {
    color: var(--color-text-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    transition: color .25s ease;
}

.footer__legal-link:hover,
.footer__legal-link:focus-visible {
    color: var(--color-primary);
}

.footer__payments {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    opacity: .52;
    flex-wrap: nowrap;
}

.footer__payment {
    display: block;
    width: auto;
    height: auto;
    max-height: 27px;
    object-fit: contain;
    filter: grayscale();
}

/* Блок: Выпадающие меню: панель, пункты и состояния открытия. Ориентир: .dropdown__menu. */
.dropdown__menu {
    z-index: 10;
    min-width: 14rem;
    padding: var(--spacing-2) 0;
    background: var(--color-bg-white);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    border-radius: .75rem;
    position: absolute;
    top: calc(100% + 4px);
    left: auto;
    right: 0;
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.5rem #0000001f;
}

.dropdown.show .dropdown__menu,
.dropdown__menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Блок: Подвал: бренд, ссылки, соцсети и платёжные значки. Ориентир: .widget-footer. */
.widget-footer {
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    padding: var(--spacing-6) 0 var(--spacing-4);
}

.footer {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.footer__top {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.footer__brand {
    flex-shrink: 0;
}

.footer__logo {
    color: var(--color-text-primary);
    transition: opacity var(--transition-base);
    align-items: center;
    text-decoration: none;
    display: inline-flex;
}

.footer__logo:hover, .footer__logo:focus-visible {
    opacity: .85;
}

.footer__logo-icon {
    width: 135px;
    height: 22px;
}

.footer__nav {
    gap: var(--spacing-8);
    flex-direction: column;
    flex: auto;
    display: flex;
}

/* Меню подвала всегда раскрыто. Виджет выводится как navbar с navbar-expand-lg,
   из-за чего Bootstrap прятал список ссылок в мобильный коллапс под кнопку.
   По макету подвал — простое меню без сворачивания на любых ширинах. */
.footer .navbar-toggler {
    display: none !important;
}

.footer .navbar-collapse {
    display: flex !important;
}

.footer__column {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.footer__subgroup {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.footer__column-title {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.footer__column-list {
    gap: var(--spacing-1);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.footer__column-link {
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.footer__column-link:hover, .footer__column-link:focus-visible {
    color: var(--color-primary);
}

.footer__column-arrow {
    color: currentColor;
    width: 8px;
    height: 4px;
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.footer__social {
    flex-shrink: 0;
    align-items: flex-start;
    display: flex;
}

.footer__social-link {
    background: var(--color-bg-white);
    width: 32px;
    height: 32px;
    color: var(--color-primary);
    transition: opacity var(--transition-base), transform var(--transition-base);
    border-radius: 50%;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
    text-decoration: none;
    display: inline-flex;
}

.footer__social-link:hover, .footer__social-link:focus-visible {
    opacity: .85;
    transform: scale(1.04);
}

.footer__social-link-icon {
    width: 17px;
    height: 16px;
}

.footer__divider {
    background: var(--color-border-light);
    width: 100%;
    height: 1.5px;
}

.footer__bottom {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.footer__legal {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.footer__legal-text {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.footer__legal-link {
    color: var(--color-text-primary);
    transition: color var(--transition-base);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
}

.footer__legal-link:hover, .footer__legal-link:focus-visible {
    color: var(--color-primary);
}

.footer__payments {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    opacity: .52;
    flex-wrap: nowrap;
    display: flex;
}

.footer__payment {
    -o-object-fit: contain;
    object-fit: contain;
    filter: grayscale();
    width: auto;
    height: auto;
    max-height: 27px;
    display: block;
}

/* Блок: Общая оболочка шапки. Ориентир: .header. */
/* Шапка всегда поверх остального контента (и на десктопе, и на мобильных),
   поэтому значение задано явно, вне шкалы --z-*. */
.header {
    z-index: 999999;
    position: sticky;
    top: 0;
}

/* Блок: Верхняя полоса шапки: бренд, меню и профиль. Ориентир: .header-top. */
.header-top {
    background: var(--color-primary);
    color: var(--color-bg-white);
}

/* Выпадающие меню верхней полосы должны быть выше нижней полосы шапки.
   На экранах <=1023.98px .header-bottom получает z-index 1030 и иначе
   перекрывает верхние пункты меню (например, «Мой профиль»). */
.header-top .dropdown-menu {
    z-index: 1040;
}

.header-top__inner {
    min-height: 50px;
    padding: var(--spacing-2) 0;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.header-top__brand {
    background: var(--color-bg-white);
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
    transition: opacity var(--transition-base), transform var(--transition-base);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
}

.header-top__brand:hover, .header-top__brand:focus-visible {
    opacity: .85;
    transform: scale(1.04);
}

.header-top__brand {
    background: var(--color-bg-white);
    color: var(--color-primary);
    transition: background-color var(--transition-base);
    flex-shrink: 0;
}

.header-top__brand-icon {
    width: var(--spacing-4);
    height: var(--spacing-4);
}

.header-top__brand:hover, .header-top__brand:focus-visible {
    opacity: 1;
    background: var(--color-primary-soft);
    transform: none;
}

.header-top__brand:active {
    opacity: 1;
    background: var(--color-primary-soft-active);
    transform: none;
}

.header-top__right {
    align-items: center;
    gap: 16px;
    margin-left: auto;
    display: flex;
}

.header-top__nav {
    display: none;
}

.header-top__menu {
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.header-top__menu-item {
    display: flex;
}

.header-top__menu-link {
    white-space: nowrap;
    color: var(--color-bg-white);
    transition: background-color var(--transition-base), border-color var(--transition-base);
    border: 1px solid #0000;
    border-radius: 24px;
    align-items: center;
    padding: 4px 14px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.header-top__menu-link:hover, .header-top__menu-link:focus-visible {
    opacity: 1;
    border-color: #869ae3;
}

.header-top__menu-link:active {
    background-color: #3659d4;
    border-color: #869ae3;
}

.header-top__actions {
    align-items: center;
    gap: var(--spacing-3);
    display: flex;
}

.header-top__notify-group {
    align-items: center;
    gap: var(--spacing-1-25);
    display: none;
}

.header-top__notify {
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
}

.header-top__notify:hover, .header-top__notify:focus-visible {
    opacity: .75;
}

.header-top__notify {
    color: var(--color-bg-white);
    position: relative;
}

.header-top__notify-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.header-top__notify-dot {
    z-index: 1;
    width: var(--spacing-2);
    height: var(--spacing-2);
    background: var(--color-notify);
    border: 1px solid var(--color-bg-light);
    pointer-events: none;
    box-shadow: 0 0 6px 0 var(--color-notify);
    border-radius: 50%;
    position: absolute;
    top: 1px;
    right: 0;
}

.header-top__notify-dot:after {
    content: "";
    background: var(--color-notify);
    border-radius: 50%;
    animation: 2.4s cubic-bezier(0, 0, .2, 1) infinite notify-ping;
    position: absolute;
    inset: 0;
}

.header-top__wallet {
    color: var(--color-bg-white);
    align-items: center;
    display: inline-flex;
}

.header-top__wallet-amount {
    z-index: 10;
    background: var(--color-notify);
    min-width: 39px;
    height: 12px;
    color: var(--color-bg-white);
    border-radius: var(--radius-full);
    justify-content: center;
    align-items: center;
    padding: 1px 3px;
    font-size: .625rem;
    font-weight: 700;
    line-height: .625rem;
    display: inline-flex;
    position: relative;
}

.header-top__wallet-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: -10px;
}

.header-top__profile {
    align-items: center;
    gap: var(--spacing-2);
    height: 34px;
    padding: 0 var(--spacing-4) 0 0;
    background: var(--color-bg-white);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
    border: none;
    flex-shrink: 0;
    display: inline-flex;
}

.header-top__profile:hover, .header-top__profile:focus-visible, .header-top__profile[aria-expanded=true] {
    box-shadow: none;
    background: var(--color-primary-soft-active);
}

.header-top__profile[aria-expanded=true] .header-top__profile-arrow {
    transform: rotate(180deg);
}

.header-top__profile-avatar {
    background: var(--color-bg-light);
    border-radius: 50%;
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    display: block;
    overflow: hidden;
}

.header-top__profile-avatar img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.header-top__profile-avatar {
    border: 1.5px solid var(--color-bg-white);
    transition: border-color var(--transition-base);
    flex-shrink: 0;
}

.header-top__profile:hover .header-top__profile-avatar, .header-top__profile:focus-visible .header-top__profile-avatar, .header-top__profile[aria-expanded=true] .header-top__profile-avatar {
    border-color: var(--color-primary-soft-active);
}

.header-top__profile-name {
    max-width: 140px;
    color: var(--color-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    overflow: hidden;
}

.header-top__profile-arrow {
    width: 16px;
    height: 6px;
    color: var(--color-primary);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.header-top__profile-wrap {
    position: relative;
}

/* Блок: Выпадающие меню: панель, пункты и состояния открытия. Ориентир: .dropdown-menu. */
.dropdown-menu {
    box-shadow: 0 .5rem 1.5rem #0000001f;
    border-radius: .375rem;
    border: 1px solid #b8bfd8;
    padding: .5rem 0;
    min-width: 10.5rem;
    background: #fff;
}

.dropdown-item {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
    padding: .5rem 1rem;
    color: #4e4e4e;
    min-height: 2.25rem;
    align-items: center;
    gap: .625rem;
}

.dropdown-item:hover,
.dropdown-item:focus-visible,
.dropdown-item.active {
    background: var(--color-bg-section);
    color: #4e4e4e;
}

.dropdown-item.text-danger {
    border-top: 1px solid var(--color-border-light);
    margin-top: .25rem;
}

/* Блок: Основная полоса шапки: логотип, навигация, поиск и подменю. Ориентир: .header-bottom. */
.header-bottom {
    background: var(--color-bg-light);
    color: var(--color-text-primary);
}

.header-bottom__inner {
    min-height: 50px;
    padding: var(--spacing-1-25) 0;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-6);
    display: flex;
}

.header-bottom__brand {
    align-items: center;
    gap: var(--spacing-4);
    flex-shrink: 0;
    display: inline-flex;
}

.header-bottom__logo {
    color: inherit;
    transition: opacity var(--transition-base);
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    display: inline-flex;
}

.header-bottom__logo:hover, .header-bottom__logo:focus-visible {
    opacity: .75;
}

.header-bottom__logo-icon {
    width: 135px;
    height: 22px;
}

.header-bottom__tagline {
    max-width: 143px;
    color: var(--color-text-caption);
    margin: 0;
    font-size: .625rem;
    font-weight: 500;
    line-height: .75rem;
    display: none;
}

.header-bottom__right {
    align-items: center;
    gap: 16px;
    margin-left: auto;
    display: flex;
    position: relative;
}

.header-bottom__burger {
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
    background: 0 0;
    border: none;
    display: none;
    position: relative;
}

.header-bottom__burger[aria-expanded=true] .header-bottom__burger-line--top {
    transform: translateY(7.5px) rotate(45deg);
}

.header-bottom__burger[aria-expanded=true] .header-bottom__burger-line--middle {
    opacity: 0;
}

.header-bottom__burger[aria-expanded=true] .header-bottom__burger-line--bottom {
    width: 24px;
    transform: translateY(-7.5px) rotate(-45deg);
}

.header-bottom__burger-line {
    height: 1.5px;
    transition: transform var(--transition-base), opacity var(--transition-base), width var(--transition-base);
    background: currentColor;
    border-radius: 1px;
    display: block;
}

.header-bottom__burger-line--top, .header-bottom__burger-line--bottom {
    align-self: flex-start;
    width: 18px;
}

.header-bottom__burger-line--middle {
    width: 24px;
}

.header-bottom__nav {
    display: none;
}

.header-bottom__nav--mobile {
    display: none !important;
}

.header-bottom__menu {
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.header-bottom__menu-item {
    display: flex;
}

.header-bottom__menu-item--has-dropdown {
    position: relative;
}

/* Меню открывается по клику (Bootstrap добавляет .show), не по наведению. */
.header-bottom__submenu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-bottom__menu-link {
    white-space: nowrap;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-primary);
    transition: background-color var(--transition-base), border-color var(--transition-base);
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 24px;
    padding: 4px 14px;
    /* Триггер дропдауна — <button>, а для button в базе задан Montserrat.
       Весь пункт меню (и ссылки, и кнопки) должен быть на Inter, как body. */
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.header-bottom__menu-link:hover, .header-bottom__menu-link:focus-visible {
    color: var(--color-text-primary);
    border-color: #869ae3;
}

.header-bottom__menu-link:active {
    background-color: var(--color-primary-soft);
    border-color: #869ae3;
}

.header-bottom__menu-link--button {
    cursor: pointer;
}

.header-bottom__menu-link[aria-expanded=true] {
    color: var(--color-primary);
}

.header-bottom__menu-link[aria-expanded=true] .header-bottom__menu-arrow {
    transform: rotate(180deg);
}

.header-bottom__menu-arrow {
    width: var(--spacing-2);
    height: var(--spacing-1);
    color: currentColor;
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.header-bottom__search {
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
}

.header-bottom__search:hover, .header-bottom__search:focus-visible {
    opacity: 1;
}

.header-bottom__search {
    z-index: 2;
    color: var(--color-primary);
    transition: background-color var(--transition-base), opacity var(--transition-base);
    position: relative;
}

/* Лупа (макет 1051:6395): на hover / on click / active линза заливается #e9edfa,
   обводка остаётся --color-primary. */
.header-bottom__search:hover .header-bottom__search-lens,
.header-bottom__search:focus-visible .header-bottom__search-lens,
.header-bottom__search.is-active .header-bottom__search-lens {
    fill: var(--color-primary-soft);
}

.header-bottom__search-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.header-bottom__search-icon .header-bottom__search-lens {
    transition: fill var(--transition-base);
}

.header-bottom__search-wrap {
    position: relative;
}

.header-bottom__search-panel {
    z-index: 1;
    height: 36px;
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    opacity: 0;
    visibility: hidden;
    transform-origin: 100%;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base), border-color var(--transition-base);
    border-radius: 40px;
    align-items: center;
    margin: 0;
    padding: 0 16px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 0;
    right: 30px;
    transform: translate(24px, -50%) scaleX(0);
}

/* Поле (макет 1051:6396): default и открытый поиск #b8bfd8, голубая #869ae3 — только hover / фокус. */
.header-bottom__search-panel:hover,
.header-bottom__search-panel:focus-within {
    border-color: #869ae3;
}

.header-bottom__search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scaleX(1);
}

.header-bottom__search-input {
    min-width: 0;
    color: var(--color-text-primary);
    background: 0 0;
    border: none;
    outline: none;
    flex: 1;
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.header-bottom__search-input::placeholder {
    color: #000a2645;
}

.header-bottom__submenu {
    z-index: 1;
    min-width: 12.5rem;
    padding: var(--spacing-2) 0;
    background: var(--color-bg-white);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    border-radius: .75rem;
    margin: 0;
    list-style: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.5rem #0000001f;
}

.header-bottom__submenu-item {
    display: block;
}

.header-bottom__submenu-link {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-text-primary);
    transition: background-color var(--transition-base);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
    display: block;
}

.header-bottom__submenu-link:hover, .header-bottom__submenu-link:focus-visible {
    background: var(--color-bg-section);
}

/* Десктопное выпадающее меню: оформление как у персонального меню в шапке
   (Figma «Меню 1900-1024» 1382:17532 и «2 уровень выпадашки» 1402:28047):
   белая панель, рамка 1px #b8bfd8, скругление 6px, строки 36px без разделителей. */
@media (width >= 1024px) {
    .header-bottom__submenu {
        top: 100%;
        width: 215px;
        min-width: 215px;
        margin: 8px 0 0;
        padding: 8px 0;
        background: #fff;
        border: 1px solid #b8bfd8;
        border-radius: 6px;
        box-shadow: none;
    }

    /* Пункт подменю: строка 36px (8/24, Inter 16/20 400, #4e4e4e). */
    .header-bottom__submenu .header-bottom__menu-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 36px;
        margin: 0;
        padding: 8px 24px;
        color: #4e4e4e;
        background: transparent;
        border: 0;
        border-radius: 0;
        font-family: Inter, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        white-space: nowrap;
    }

    .header-bottom__submenu .header-bottom__menu-link:hover,
    .header-bottom__submenu .header-bottom__menu-link:focus-visible {
        color: #4e4e4e;
        background: #ecf3fb;
    }
}

/* ======================================================================
   Кнопки и действия виджетов
   ====================================================================== */

/* Блок: Кнопки: базовое оформление, варианты, размеры и состояния. Ориентир: .btn. */
.btn {
    min-height: 34px;
    padding: 8px 16px;
    border: 1.5px solid transparent;
    border-radius: 40px;
    background: transparent;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    vertical-align: middle;
}

.btn:hover,
.btn:focus-visible {
    text-decoration: none;
}

.btn:focus,
.btn.focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(32, 71, 207, 0.2);
}

.btn:disabled,
.btn.disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none;
}

.btn--primary {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.btn--primary:hover,
.btn--primary:focus,
.btn--primary:focus-visible {
    background: #1235b3;
    border-color: transparent;
    color: var(--color-text-inverse);
}

.btn--primary:active,
.btn--primary.active {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.btn--primary:disabled,
.btn--primary.disabled,
.btn--primary[disabled] {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.btn--outline {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:hover,
.btn--outline:focus,
.btn--outline:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:active,
.btn--outline.active {
    background: var(--color-primary-soft-active);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Блок: Кнопки управления отзывом. Ориентир: .review-controls .btn. */
.review-controls  {
    margin-top: 15px!important;
}
.review-controls .btn,
.reviews-more .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    height: 36px;
    padding: 8px 16px;
    margin: 0 8px 8px 0;
    background: transparent !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: 40px;
    color: var(--color-primary) !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.review-controls .btn:hover,
.review-controls .btn:focus,
.review-controls .btn:focus-visible,
.reviews-more .btn:hover,
.reviews-more .btn:focus,
.reviews-more .btn:focus-visible {
    background: var(--color-primary-soft) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: none;
}

.review-controls .btn:active,
.review-controls .btn.active,
.reviews-more .btn:active,
.reviews-more .btn.active {
    background: var(--color-primary-soft-active) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.review-controls .btn svg,
.review-controls .btn .icms-svg-icon {
    width: 16px;
    height: 16px;
}

.reviews-more .btn {
    margin: 0;
}

/* Блок: Статусы отзыва — бейджи approved / pending / rejected. Ориентир: .user_approved .badge. */
.user_approved .badge,
.hide_approved .badge,
.review-status-badge--rejected {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid currentColor;
    color: #43ac6a;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}

.user_approved .badge::before,
.hide_approved .badge::before,
.review-status-badge--rejected::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: center center / contain no-repeat;
}

.user_approved .badge {
    border-radius: 20px;
}

.user_approved .badge::before {
    background-image: url(../images/review-approved.svg);
}

.hide_approved .badge {
    border-radius: 26px;
    color: #ebac00;
}

.hide_approved .badge::before {
    background-image: url(../images/review-pending.svg);
}

.review-status-badge--rejected {
    border-radius: 26px;
    color: #ff5150;
}

.review-status-badge--rejected::before {
    background-image: url(../images/review-rejected.svg);
}

.btn-secondary {
    background: var(--color-text-inverse) !important;
    border-color: transparent !important;
    color: var(--color-primary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible {
    background: var(--color-primary-soft-active) !important;
    border-color: transparent !important;
    color: var(--color-primary) !important;
}

.btn-secondary:active,
.btn-secondary.active {
    background: var(--color-primary-soft-active) !important;
    border-color: transparent !important;
    color: var(--color-primary) !important;
}

.btn-outline-secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background: var(--color-primary-soft-active);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-success {
    background: #10b981;
    border-color: #10b981;
    color: var(--color-text-inverse);
}

.btn-success:hover {
    background: #059669;
    border-color: #059669;
    color: var(--color-text-inverse);
}

.btn-danger {
    background: #ef4444;
    border-color: #ef4444;
    color: var(--color-text-inverse);
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: var(--color-text-inverse);
}

.btn-warning {
    background: #f59e0b;
    border-color: #f59e0b;
    color: var(--color-text-inverse);
}

.btn-warning:hover {
    background: #d97706;
    border-color: #d97706;
    color: var(--color-text-inverse);
}

.btn-light {
    background: var(--color-bg-light);
    border-color: var(--color-bg-light);
    color: var(--color-text-secondary);
}

.btn-light:hover {
    background: #eaeaea;
    border-color: #eaeaea;
    color: var(--color-text-secondary);
}

.btn-dark {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: var(--color-text-inverse);
}

.btn-dark:hover {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: var(--color-text-inverse);
}

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--color-primary);
    text-decoration: none;
    padding-left: 8px;
    padding-right: 8px;
    font-weight: 500;
}

.btn-link:hover,
.btn-link:focus-visible {
    background: transparent;
    border-color: transparent;
    color: #1235b3;
    text-decoration: underline;
}

.btn-lg {
    min-height: 44px;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 20px;
}

.btn-sm {
    min-height: 28px;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 16px;
    border-radius: 24px;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn .icon,
.btn svg {
    flex-shrink: 0;
}

.btn.is-loading,
.btn.is-loading:hover,
.btn.is-loading:focus,
.btn.is-loading:active {
    position: relative;
    cursor: wait;
    pointer-events: none;
    opacity: 1;
}

.btn.is-loading > * {
    visibility: hidden;
}

.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pp-btn-spinner .8s linear infinite;
}

.btn-sm.is-loading::after {
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
    border-width: 1.5px;
}

.btn-lg.is-loading::after {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-width: 2.5px;
}

.btn-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    flex-shrink: 0;
}

.btn-icon.btn-sm {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

.btn-icon.btn-lg {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
}

.btn-icon .icon,
.btn-icon svg {
    width: 18px;
    height: 18px;
}

.btn-icon.btn-sm .icon,
.btn-icon.btn-sm svg {
    width: 14px;
    height: 14px;
}

.btn-icon.btn-lg .icon,
.btn-icon.btn-lg svg {
    width: 22px;
    height: 22px;
}

.btn.dropdown-toggle {
    position: relative;
}

.btn.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-left: 6px;
    margin-bottom: 3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
}

.btn.dropdown-toggle[aria-expanded="true"]::after,
.btn.dropdown-toggle.is-open::after {
    transform: rotate(-135deg) translateY(1px);
}

.btn-close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s ease, background-color .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover,
.btn-close:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-secondary);
}

.btn-close::before,
.btn-close::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}

.btn-close::before {
    transform: rotate(45deg);
}

.btn-close::after {
    transform: rotate(-45deg);
}

.btn-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-group.btn-group-vertical {
    flex-direction: column;
    align-items: stretch;
}

.btn-group-justified {
    display: flex;
    width: 100%;
}

.btn-group-justified .btn {
    flex: 1 1 0;
}

.btn-social {
    gap: 8px;
}

.btn-vk,
.btn-social-vk {
    background: #0077ff;
    border-color: #0077ff;
    color: var(--color-text-inverse);
}

.btn-vk:hover,
.btn-vk:focus-visible,
.btn-social-vk:hover,
.btn-social-vk:focus-visible {
    background: #0061cc;
    border-color: #0061cc;
    color: var(--color-text-inverse);
}

.btn-telegram,
.btn-social-telegram {
    background: #0088cc;
    border-color: #0088cc;
    color: var(--color-text-inverse);
}

.btn-telegram:hover,
.btn-telegram:focus-visible,
.btn-social-telegram:hover,
.btn-social-telegram:focus-visible {
    background: #006d9e;
    border-color: #006d9e;
    color: var(--color-text-inverse);
}

.btn-whatsapp,
.btn-social-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: var(--color-text-inverse);
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible,
.btn-social-whatsapp:hover,
.btn-social-whatsapp:focus-visible {
    background: #1ebe57;
    border-color: #1ebe57;
    color: var(--color-text-inverse);
}

.btn-facebook,
.btn-social-facebook {
    background: #1877f2;
    border-color: #1877f2;
    color: var(--color-text-inverse);
}

.btn-facebook:hover,
.btn-facebook:focus-visible,
.btn-social-facebook:hover,
.btn-social-facebook:focus-visible {
    background: #0e5fc7;
    border-color: #0e5fc7;
    color: var(--color-text-inverse);
}

.btn-instagram,
.btn-social-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.btn-instagram:hover,
.btn-instagram:focus-visible,
.btn-social-instagram:hover,
.btn-social-instagram:focus-visible {
    color: var(--color-text-inverse);
    filter: brightness(1.08);
}

.btn-youtube,
.btn-social-youtube {
    background: #ff0000;
    border-color: #ff0000;
    color: var(--color-text-inverse);
}

.btn-youtube:hover,
.btn-youtube:focus-visible,
.btn-social-youtube:hover,
.btn-social-youtube:focus-visible {
    background: #cc0000;
    border-color: #cc0000;
    color: var(--color-text-inverse);
}

.btn-twitter,
.btn-twitter-x,
.btn-social-twitter,
.btn-social-twitter-x {
    background: #000000;
    border-color: #000000;
    color: var(--color-text-inverse);
}

.btn-twitter:hover,
.btn-twitter:focus-visible,
.btn-twitter-x:hover,
.btn-twitter-x:focus-visible,
.btn-social-twitter:hover,
.btn-social-twitter:focus-visible,
.btn-social-twitter-x:hover,
.btn-social-twitter-x:focus-visible {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: var(--color-text-inverse);
}

.btn-google,
.btn-social-google {
    background: var(--color-text-inverse);
    border-color: var(--color-border-light);
    color: var(--color-text-secondary);
}

.btn-google:hover,
.btn-google:focus-visible,
.btn-social-google:hover,
.btn-social-google:focus-visible {
    background: var(--color-bg-light);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* Блок: Кнопки действий с материалами. Ориентир: .btn-actions. */
.btn-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

.btn-actions > .dropdown {
    position: relative;
}

.btn-actions .btn-light {
    min-height: 36px;
    padding: 8px 16px;
    border: 1.5px solid var(--color-primary);
    border-radius: 40px;
    background: transparent;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    gap: 8px;
}

.btn-actions .btn-light .icms-svg-icon {
    display: none;
}

.btn-actions .btn-light:hover,
.btn-actions .btn-light:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-actions .btn-light:active,
.btn-actions .btn-light[aria-expanded="true"],
.btn-actions .dropdown.show .btn-light,
.btn-actions .btn-light.is-open {
    background: var(--color-primary-soft-active);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-actions .btn-light::after {
    content: '';
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid currentColor;
    border-radius: 1px;
    transition: transform .2s ease;
}

.btn-actions .btn-light[aria-expanded="true"]::after,
.btn-actions .dropdown.show .btn-light::after,
.btn-actions .btn-light.is-open::after {
    transform: rotate(180deg);
}

.btn-actions .menu-toolbar,
.btn-actions .dropdown-menu.dropdown-menu-right.menu-toolbar,
.dropdown-menu.dropdown-menu-right.menu-toolbar,
.dropdown-menu.dropdown-menu-right.menu-toolbar.show {
    min-width: 168px;
    margin-top: 8px;
    padding: 8px 0;
    background: #ffffff;
    border: 1px solid #B8BFD8;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: #4e4e4e;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.btn-actions .menu-toolbar .nav-item,
.dropdown-menu.menu-toolbar .nav-item {
    display: block;
    margin: 0;
}

.btn-actions .menu-toolbar .nav-link,
.dropdown-menu.menu-toolbar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 8px 16px;
    margin: 0;
    background: transparent;
    color: #4e4e4e;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
    border: 0;
    border-radius: 0;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.btn-actions .menu-toolbar .nav-link .icms-svg-icon,
.btn-actions .menu-toolbar .nav-link svg,
.dropdown-menu.menu-toolbar .nav-link .icms-svg-icon,
.dropdown-menu.menu-toolbar .nav-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-actions .menu-toolbar .nav-link .nav-item-text,
.dropdown-menu.menu-toolbar .nav-link .nav-item-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-actions .menu-toolbar .nav-link:hover,
.btn-actions .menu-toolbar .nav-link:focus-visible,
.btn-actions .menu-toolbar .nav-item:hover .nav-link,
.dropdown-menu.menu-toolbar .nav-link:hover,
.dropdown-menu.menu-toolbar .nav-link:focus-visible,
.dropdown-menu.menu-toolbar .nav-item:hover .nav-link {
    background: var(--color-bg-section);
    color: #4e4e4e;
}

/* Блок: Обёртка виджета и позиционирование служебных элементов. Ориентир: .widget. */
.widget,
.icms-widget {
    position: relative;
    padding: 30px 0;
}

.edit_wlinks .edit {
    background: transparent;
    color: #2047CF;
}

.edit_wlinks .edit:hover {
    background: #2047CF;
    transform: scale(1.08);
    color: #fff;
    box-shadow: 0 2px 10px rgba(32, 71, 207, 0.35);
}

/* =========================================================================
   proprofi button variants (.btn--primary, .btn--outline)
   Source: prod/css/styles.min.css
   ========================================================================= */

/* Блок: Кнопки: базовое оформление, варианты, размеры и состояния. Ориентир: .btn--primary. */
.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 0;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-primary-hover);
    color: var(--color-text-inverse);
    border: 0;
}

.btn--primary:active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 0;
}

.btn--outline {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: transparent;
    line-height: 15px !important;
}

.btn--outline:hover,
.btn--outline:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:active {
    background: var(--color-primary-soft-active);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Блок: Служебные кнопки редактирования и удаления виджетов. Ориентир: .edit_wlinks. */
.edit_wlinks {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.widget:hover .edit_wlinks,
.icms-widget:hover .edit_wlinks {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.edit_wlinks .edit,
.edit_wlinks .delete {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.edit_wlinks .edit {
    background: transparent;
    color: var(--color-primary, #2047CF);
}

.edit_wlinks .edit:hover {
    background: var(--color-primary, #2047CF);
    transform: scale(1.08);
    color: #fff;
    box-shadow: 0 2px 10px rgba(32, 71, 207, 0.35);
}

.edit_wlinks .delete {
    background: transparent;
    color: #f04124;
}

.edit_wlinks .delete:hover {
    background: #f04124;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 2px 10px rgba(240, 65, 36, 0.35);
}

.edit_wlinks svg {
    fill: currentColor;
}

/* Блок: Кнопки: базовое оформление, варианты, размеры и состояния. Ориентир: a.btn-sm. */
a.btn-sm, .btn-group-sm > a.btn, button.btn-sm, .btn-group-sm > button.btn {
    box-shadow: none;
}

/* ======================================================================
   Анимации
   ====================================================================== */

/* Блок: Ключевые кадры анимации pp-btn-spinner. */
@keyframes pp-btn-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Блок: Ключевые кадры анимации notify-ping. */
@keyframes notify-ping {
    0% {
        opacity: .7;
        filter: blur();
        transform: scale(1);
    }
    70% {
        opacity: .35;
    }
    to {
        opacity: 0;
        filter: blur(2px);
        transform: scale(3);
    }
}

/* Блок: Ключевые кадры анимации hero-fade-up. */
@keyframes hero-fade-up {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Блок: Ключевые кадры анимации hero-fade-zoom. */
@keyframes hero-fade-zoom {
    0% {
        opacity: 0;
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Блок: Ключевые кадры анимации why-fade. */
@keyframes why-fade {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Блок: Ключевые кадры анимации sk-circleBounceDelay. */
@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* ======================================================================
   Формы, поля и фильтры
   ====================================================================== */

/* ----- Fieldset as card (prod-style: expert-add-form__card) ----- */

/* Блок: Группы полей формы в карточках. Ориентир: fieldset. */
fieldset,
form .without-tabs fieldset {
    min-inline-size: 0;
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-5);
    background: var(--color-bg-section);
    border: 0;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
}

fieldset > legend,
form .without-tabs fieldset > legend {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0 0 var(--spacing-4);
    padding: 4px 0 0;
    color: var(--color-text-primary);
    float: none;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

/* ----- Card-head hint icon (prod-style: expert-add-form__hint) ----- */

/* Блок: Значки подсказок рядом с полями. Ориентир: .hint-icon. */
.hint-icon {
    width: .875rem;
    height: .875rem;
    color: var(--color-border);
    cursor: help;
    transition: color var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.hint-icon:hover,
.hint-icon:focus-visible {
    color: #79b2f4;
}

.hint-icon svg {
    width: .875rem;
    height: .875rem;
}

/* Блок: Подсказка поля — иконка-вопрос с попапом при наведении. Ориентир: .pp-hint. */
.pp-hint {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
}

.pp-hint::before {
    content: "";
    width: 14px;
    height: 14px;
    background: url(../images/hint-question.svg) center center / contain no-repeat;
}

.pp-hint__tip {
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1080;
    width: max-content;
    max-width: 304px;
    padding: 8px 10px;
    background: #79b2f4;
    border: 1.5px solid #79b2f4;
    border-radius: 8px;
    box-shadow: 0 0 7.7px 0 rgba(78, 78, 78, .21);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
}

.pp-hint:hover .pp-hint__tip,
.pp-hint:focus .pp-hint__tip,
.pp-hint:focus-visible .pp-hint__tip {
    opacity: 1;
    visibility: visible;
}

/* ----- Form wrapper ----- */

/* Блок: Поля формы: обёртки, подписи и сопутствующие элементы. Ориентир: form .field. */
form .field {
    margin-bottom: 16px;
}

form .field:last-child {
    margin-bottom: 0;
}

form .field > label,
.pp-form-field > label {
    display: block;
    margin: 0 0 4px;
    color: var(--pp-field-color);
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: 18px;
}

/* checkbox label keeps inline-flex (overrides generic .pp-filter__field > label rule) */

/* Блок: Фильтр pp: поля, флажки, диапазоны и панель действий. Ориентир: .pp-filter__field > .pp-filter__check. */
.pp-filter__field > .pp-filter__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
    line-height: 18px;
    margin: 0;
    cursor: pointer;
    width: auto;
}

/* Блок: Обозначение обязательных полей. Ориентир: form .required_field > label::after. */
form .required_field > label::after,
.pp-filter__field.required > label::after,
.pp-form-field.required > label::after {
    content: "*";
    margin-left: 4px;
    color: #ff5050;
    font-weight: 700;
}

/* ----- Text inputs / textarea / select (Bootstrap form-control + bare inputs) ----- */

/* Блок: Текстовые поля, textarea и стандартные состояния ввода. Ориентир: form .form-control. */
form .form-control,
form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form input[type="search"],
form input[type="tel"],
form input[type="url"],
form input[type="date"],
form input[type="time"],
form textarea,
form select,
.pp-form-input {
    display: block;
    width: 100%;
    height: var(--pp-field-h);
    min-height: var(--pp-field-h);
    margin: 0;
    padding: var(--pp-field-padding-y) var(--pp-field-padding-x);
    background-color: var(--pp-field-bg);
    border: 1.5px solid var(--pp-field-border);
    border-radius: var(--pp-field-radius);
    color: var(--pp-field-color);
    font-family: inherit;
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: var(--pp-field-line-height);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Bootstrap 4 sets .form-control { height: calc(...) } — override it */

form .form-control {
    height: var(--pp-field-h);
}

form textarea {
    min-height: 96px;
    resize: vertical;
}

form .form-control::placeholder,
form input::placeholder,
form textarea::placeholder {
    color: var(--pp-field-placeholder);
    opacity: 1;
    font-weight: var(--pp-field-font-weight);
}

form .form-control:hover:not(:disabled):not([readonly]),
form input:hover:not(:disabled):not([readonly]),
form textarea:hover:not(:disabled):not([readonly]),
form select:hover:not(:disabled),
.pp-form-input:hover:not(:disabled):not([readonly]) {
    border-color: var(--pp-field-border-hover);
}

form .form-control:focus,
form input:focus,
form textarea:focus,
form select:focus,
.pp-form-input:focus {
    background-color: var(--color-text-inverse);
    border-color: var(--pp-field-border-focus);
    box-shadow: none;
    outline: none;
}

form .form-control:disabled,
form input:disabled,
form textarea:disabled,
form select:disabled {
    background-color: #f3f5fa;
    color: var(--color-text-caption);
    cursor: not-allowed;
    opacity: .65;
}

/* Блок: Поле выбора в оформлении шаблона. Ориентир: form select. */
form select,
.pp-form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23b8bfd8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    padding-right: 40px;
}

form select:focus,
.pp-form-select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 6.5L6 1.5L11 6.5' stroke='%232047cf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* number/date — native controls with custom appearance */

/* Блок: Нативные элементы ввода чисел и поиска. Ориентир: form input[type="number"]::-webkit-inner-spin-button. */
form input[type="number"]::-webkit-inner-spin-button,
form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

form input[type="number"] {
    -moz-appearance: textfield;
}

form input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ----- Form-group wrapper (Bootstrap4 compat) ----- */

/* Блок: Размещение полей и групп формы. Ориентир: .form-group. */
.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px;
}

.form-row > .form-group,
.form-row > [class^="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

/* ----- Input group (prefix/suffix) ----- */

/* Блок: Группы ввода: префиксы, суффиксы и единицы измерения. Ориентир: .input-group. */
.input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
    border-radius: var(--pp-field-radius);
    overflow: hidden;
}

.input-group > .form-control,
.input-group > input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-radius: 0;
    border-right-width: 0;
}

.input-group > .form-control:first-child,
.input-group > input:first-child {
    border-top-left-radius: var(--pp-field-radius);
    border-bottom-left-radius: var(--pp-field-radius);
}

.input-group > .form-control:last-child,
.input-group > input:last-child {
    border-top-right-radius: var(--pp-field-radius);
    border-bottom-right-radius: var(--pp-field-radius);
    border-right-width: 1.5px;
}

.input-group > .form-control:focus,
.input-group > input:focus {
    border-right-width: 1.5px;
}

.input-group-prepend,
.input-group-append {
    display: flex;
    align-items: stretch;
}

.input-group-prepend {
    margin-right: -1.5px;
}

.input-group-append {
    margin-left: -1.5px;
}

.input-group-text {
    display: flex;
    align-items: center;
    min-height: var(--pp-field-h);
    padding: 0 var(--pp-field-padding-x);
    background-color: var(--pp-field-bg);
    border: 1.5px solid var(--pp-field-border);
    color: var(--color-text-caption);
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: var(--pp-field-line-height);
    white-space: nowrap;
}

.input-group-prepend .input-group-text:first-child {
    border-top-left-radius: var(--pp-field-radius);
    border-bottom-left-radius: var(--pp-field-radius);
    border-right-width: 0;
}

.input-group-append .input-group-text:last-child {
    border-top-right-radius: var(--pp-field-radius);
    border-bottom-right-radius: var(--pp-field-radius);
    border-left-width: 0;
}

.input-group-prepend + .form-control:focus,
.input-group-prepend + input:focus {
    border-left-color: var(--pp-field-border-focus);
}

.input-number-units {
    color: var(--pp-field-border);
    font-weight: 500;
}

/* ----- Custom checkboxes (Bootstrap .custom-control) ----- */

/* Блок: Флажки и радиокнопки: индикаторы, подписи и состояния. Ориентир: .custom-checkbox. */
.custom-checkbox,
.custom-radio {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 18px;
    padding-left: 26px;
    margin-bottom: 8px;
    cursor: pointer;
}

.custom-checkbox:last-child,
.custom-radio:last-child {
    margin-bottom: 0;
}

.custom-control-input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.custom-control-input:focus,
.custom-control-input:focus-visible {
    outline: none;
}

.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:focus-visible ~ .custom-control-label::before {
    border-color: var(--pp-field-border-focus);
}

.custom-control-label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--pp-field-color);
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: var(--pp-field-line-height);
    cursor: pointer;
}

.custom-control-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--color-text-inverse);
    border: 1.5px solid var(--pp-field-border);
    border-radius: 4px;
    transition: background-color .15s ease, border-color .15s ease;
    pointer-events: none;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 4px;
}

.custom-radio .custom-control-label::before {
    border-radius: 50%;
}

.custom-control-label:hover::before {
    border-color: #95a0c5;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pp-field-border-focus);
    border-color: var(--pp-field-border-focus);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    content: '';
    position: absolute;
    display: block;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'><path d='M1 5L4.5 8.5L11 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    background-color: var(--color-text-inverse);
    border-radius: 50%;
}

.custom-control-input:disabled ~ .custom-control-label {
    color: var(--color-text-caption);
    cursor: not-allowed;
}

.custom-control-input:disabled ~ .custom-control-label::before {
    background-color: #f3f5fa;
    border-color: #d4def0;
    opacity: .65;
}

.custom-control-inline {
    display: inline-flex;
    margin-right: 24px;
}

.custom-control-inline:last-child {
    margin-right: 0;
}

/* inline checkbox row used in Figma filter */

/* Блок: Фильтр pp: поля, флажки, диапазоны и панель действий. Ориентир: .pp-filter__check-row. */
.pp-filter__check-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 5px 24px;
    margin-top: 4px;
}

.pp-filter__check-row .custom-checkbox,
.pp-filter__check-row .pp-filter__check {
    margin-bottom: 0;
}

/* ----- Custom switch ----- */

/* Блок: Переключатели: дорожка, бегунок и состояния. Ориентир: .custom-switch. */
.custom-switch {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 48px;
    min-height: 24px;
    cursor: pointer;
}

.custom-switch .custom-control-input {
    top: 50%;
    left: 0;
    width: 40px;
    height: 24px;
    transform: translateY(-50%);
}

.custom-switch .custom-control-label {
    position: relative;
}

.custom-switch .custom-control-label::before {
    top: 50%;
    left: -48px;
    width: 40px;
    height: 20px;
    border-radius: 12px;
    background-color: var(--pp-field-border);
    transform: translateY(-50%);
}

.custom-switch .custom-control-label::after {
    top: 50%;
    left: -44px;
    width: 12px;
    height: 12px;
    background-color: var(--color-text-inverse);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform .15s ease;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pp-field-border-focus);
    border-color: var(--pp-field-border-focus);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translate(18px, -50%);
    background-color: var(--color-text-inverse);
}

/* ----- Field error state ----- */

/* Блок: Ошибки полей и сообщения валидации. Ориентир: form .field_error .custom-control-input. */
form .field_error .custom-control-input,
form .field_error .form-control,
form .field_error input,
form .field_error textarea,
form .field_error select,
form .field_error .chosen-container-single .chosen-single,
form .field_error .input-group-text {
    border-color: var(--pp-field-error);
}

.invalid-feedback {
    display: none;
    margin-top: 4px;
    color: var(--pp-field-error);
    font-size: 12px;
    line-height: 16px;
}

form .field_error .invalid-feedback {
    display: block;
}

/* ----- Simple checkbox (prod-style, BEM .pp-filter__check) ----- */

/* Блок: Фильтр pp: поля, флажки, диапазоны и панель действий. Ориентир: .pp-filter__check. */
.pp-filter__check {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 18px;
    line-height: 18px;
    margin: 0;
    cursor: pointer;
}

.pp-filter__check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.pp-filter__check-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    width: 18px;
    height: 18px;
    background-color: var(--color-text-inverse);
    border: 1.5px solid var(--pp-field-border);
    border-radius: 4px;
    transition: background-color .15s ease, border-color .15s ease;
}

.pp-filter__check-icon {
    width: 8px;
    height: 6px;
    color: #869ae3;
    transform: scale(0);
    transition: transform .15s ease;
}

/* hover — light blue bg + brand border */

.pp-filter__check:hover .pp-filter__check-box {
    background-color: var(--color-primary-soft);
    border-color: #869ae3;
}

/* checked state — same hover colors + visible checkmark */

.pp-filter__check-input:checked + .pp-filter__check-box {
    background-color: var(--color-primary-soft);
    border-color: #869ae3;
}

.pp-filter__check-input:checked + .pp-filter__check-box .pp-filter__check-icon {
    transform: scale(1);
}

.pp-filter__check-input:focus-visible + .pp-filter__check-box {
    border-color: #869ae3;
}

.pp-filter__check-input:disabled + .pp-filter__check-box {
    background-color: #f3f5fa;
    border-color: #d4def0;
    opacity: .65;
}

.pp-filter__check-label {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 18px;
    color: var(--pp-field-color);
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: 18px;
    cursor: pointer;
}

/* Чекбокс с переносимой подписью (checkbox / newcheckbox внутри формы).
   Правило `form .field > label` задаёт display:block и перебивает .pp-filter__check
   по специфичности (0-2-1 против 0-1-0): квадратик и текст вставали по базовой
   линии, а подпись с фиксированной высотой 18px обрезала многострочный текст —
   на длинных подписях (согласия на /auth/register) блок разъезжался. */

form .field > label.pp-filter__check,
.pp-form-field > label.pp-filter__check {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 8px;
}

/* Квадратик выравнивается по первой строке подписи, а не по центру блока */

form .field > label.pp-filter__check .pp-filter__check-box,
.pp-form-field > label.pp-filter__check .pp-filter__check-box {
    align-self: flex-start;
    margin-top: 0;
}

/* Подпись переносится на любое число строк. display:block обязателен:
   как flex-элемент она блочифицируется и раскладывает текст и ссылки
   в отдельные flex-строки (текст уезжает в колонку). Маркер «*» идёт после
   подписи (порядок DOM: квадратик → подпись → ::after) и остаётся в первой строке. */

form .field > label.pp-filter__check .pp-filter__check-label,
.pp-form-field > label.pp-filter__check .pp-filter__check-label {
    display: block;
    align-self: auto;
    height: auto;
    min-height: 18px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Исключение: на странице входа подпись — намеренно flex-строка
   («Запомнить меня» слева, «Забыли пароль?» справа через space-between). */

.pp-auth form .field > label.pp-filter__check .pp-filter__check-label,
.pp-auth .pp-filter__check-label {
    display: flex;
}

/* Маркер обязательного поля — после подписи */

form .field > label.pp-filter__check::after,
.pp-form-field > label.pp-filter__check::after {
    order: 0;
    margin-left: 0;
}

/* Маркер обязательного поля — после подписи */

form .field > label.pp-filter__check::after,
.pp-form-field > label.pp-filter__check::after {
    order: 0;
    margin-left: 0;
}

/* newcheckbox: подпись выводится внутри чекбокса, внешний label ядра скрываем */

.pp-filter__field.ft_newcheckbox > label:not(.pp-filter__check) {
    display: none;
}

.pp-filter__field.ft_newcheckbox .pp-filter__check {
    display: inline-flex;
}

/* ----- iprices filter: grouped От / До inputs ----- */

.pp-filter__iprices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pp-filter__iprices-group {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: 16px;
    height: 44px;
    overflow: hidden;
}

.pp-filter__iprices-cell {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    min-width: 0;
}

.pp-filter__iprices-cell + .pp-filter__iprices-cell {
    border-left: 1.5px solid var(--color-border);
}

.pp-filter__iprices-group .pp-filter__iprices-input,
.pp-filter__iprices-group .pp-filter__iprices-input:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    color: var(--color-text-primary);
    transition: none;
}

.pp-filter__iprices-input::-webkit-outer-spin-button,
.pp-filter__iprices-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pp-filter__iprices-input::placeholder {
    color: var(--color-border);
    letter-spacing: 0.15px;
    opacity: 1;
}

/* ----- date range filter (Figma 1002:14314) ----- */

.pp-filter__daterange {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.pp-filter__daterange-cell {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    padding: 10px 16px;
    height: 44px;
}

.pp-filter__daterange-cell--from {
    border-radius: 16px 0 0 16px;
}

.pp-filter__daterange-cell--to {
    border-radius: 0 16px 16px 0;
    margin-left: -1.5px;
}

.pp-filter__daterange-label {
    flex-shrink: 0;
    color: var(--color-border);
    font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    user-select: none;
}

.pp-filter__daterange-input,
form .pp-filter__daterange-input,
.pp-filter__daterange-input:focus,
form .pp-filter__daterange-input:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
    font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    color: var(--color-text-primary);
    transition: none;
}

.pp-filter__daterange-input::placeholder {
    color: var(--color-border);
    letter-spacing: 0.15px;
    opacity: 1;
}

/* Блок: Второстепенный текст: приглушённый цвет подписи. */
.text-muted {
    color: var(--color-text-caption);
}

/* ----- Symbols counter ----- */

/* Блок: Служебные элементы формы InstantCMS. Ориентир: .icms-form__symbols_count_wrap. */
.icms-form__symbols_count_wrap {
    position: relative;
}

.icms-form__symbols_count_wrap > input {
    padding-right: 60px;
}

.icms-form__symbols_count_wrap .symbols_count {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    height: var(--pp-field-h);
    padding: 0 var(--pp-field-padding-x);
    color: var(--color-text-caption);
    font-size: 13px;
    line-height: 16px;
    pointer-events: none;
}

.icms-form__symbols_count_wrap .symbols_count .overflowing,
.icms-form__symbols_count_wrap .symbols_count .overflowing_min {
    color: #ff5050;
    font-weight: 600;
}

/* ----- Custom file input ----- */

/* Блок: Стандартное поле выбора файла. Ориентир: .custom-file. */
.custom-file {
    position: relative;
    display: block;
    width: 100%;
    min-height: var(--pp-field-h);
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: var(--pp-field-h);
    margin: 0;
    padding: var(--pp-field-padding-y) var(--pp-field-padding-x);
    background-color: var(--pp-field-bg);
    border: 1.5px solid var(--pp-field-border);
    border-radius: var(--pp-field-radius);
    color: var(--pp-field-color);
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: var(--pp-field-line-height);
    cursor: pointer;
    opacity: 0;
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: var(--pp-field-h);
    padding: var(--pp-field-padding-y) var(--pp-field-padding-x);
    background-color: var(--pp-field-bg);
    border: 1.5px solid var(--pp-field-border);
    border-radius: var(--pp-field-radius);
    color: var(--pp-field-placeholder);
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: var(--pp-field-line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.custom-file-label::after {
    content: attr(data-browse);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--pp-field-padding-x);
    background-color: rgba(32, 71, 207, .08);
    color: var(--pp-field-border-focus);
    font-weight: 600;
    border-top-right-radius: var(--pp-field-radius);
    border-bottom-right-radius: var(--pp-field-radius);
    pointer-events: auto;
}

/* ----- Range slider (jQuery UI) ----- */

/* Блок: Ползунок диапазона: дорожка, бегунки и подписи. Ориентир: .ui-slider. */
.ui-slider {
    position: relative;
    width: 100%;
    height: 4px;
    background: #d4def0;
    border-radius: 2px;
    margin: 12px 0;
}

.ui-slider-range {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--pp-field-border-focus);
    border-radius: 2px;
}

.ui-slider-handle {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: var(--color-text-inverse);
    border: 2px solid var(--pp-field-border-focus);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(32, 71, 207, .25);
    cursor: grab;
    transition: transform .1s ease, box-shadow .1s ease;
}

.ui-slider-handle:hover {
    box-shadow: 0 0 0 6px rgba(32, 71, 207, .15), 0 2px 6px rgba(32, 71, 207, .25);
}

.ui-slider-handle:active,
.ui-slider-handle.ui-state-active {
    cursor: grabbing;
    transform: scale(1.05);
}

.slider-range-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--pp-field-color);
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: var(--pp-field-line-height);
    margin-bottom: 12px;
}

.slider-range-from,
.slider-range-to {
    color: var(--pp-field-border-focus);
    font-weight: 700;
    margin: 0 4px;
}

.slider-range-wrap {
    margin: 8px 0;
}

/* ----- Date picker (bootstrap-datetimepicker) ----- */

/* Блок: Всплывающий выбор даты и времени. Ориентир: .bootstrap-datetimepicker-widget. */
.bootstrap-datetimepicker-widget {
    border-radius: 16px;
    border: 1.5px solid var(--pp-field-border);
    box-shadow: 0 8px 24px rgba(32, 71, 207, .12);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--pp-field-border-focus);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--pp-field-border-focus);
}

/* ----- Chosen overrides (jQuery Chosen for <select>) ----- */

/* Блок: Выпадающие списки Chosen: поиск, варианты и множественный выбор. Ориентир: .chosen-container. */
.chosen-container {
    width: 100% !important;
    font-size: var(--pp-field-font-size);
    line-height: var(--pp-field-line-height);
    text-align: left;
}

.chosen-container.chosen-container-active{
    z-index: 10000;
}

.chosen-containerchosen-container-active .chosen-drop {
    z-index: 9000;
}

.chosen-container .chosen-single,
.chosen-container-single .chosen-single {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: var(--pp-field-h) !important;
    min-height: var(--pp-field-h);
    padding: var(--pp-field-padding-y) 40px var(--pp-field-padding-y) var(--pp-field-padding-x) !important;
    background: var(--pp-field-bg) !important;
    background-color: var(--pp-field-bg) !important;
    border: 1.5px solid var(--pp-field-border) !important;
    border-radius: var(--pp-field-radius) !important;
    box-shadow: none !important;
    color: var(--pp-field-color) !important;
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    /* jquery-chosen.css грузится ПОСЛЕ pp.css и ставит line-height: calc(1.5em + .75rem + 2px)
       (=36.5px при 15px) — из-за этого текст в поле 44px уезжает вниз. Перебиваем. */
    line-height: var(--pp-field-line-height) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.chosen-container-single .chosen-single span {
    display: block;
    margin-right: 0;
    padding: 0;
    color: var(--pp-field-color) !important;
    font-weight: inherit;
    line-height: var(--pp-field-line-height) !important;
}

/* chosen.css красит текст поля в #888 через a:not([href]):not([tabindex]) !important — гасим. */
.chosen-container-single a:not([href]):not([tabindex]).chosen-single {
    color: var(--pp-field-color) !important;
}

.chosen-container-single .chosen-default span,
.chosen-container-single a:not([href]):not([tabindex]).chosen-default,
.chosen-container-single .chosen-default {
    color: var(--pp-field-placeholder) !important;
}

.chosen-container-single .chosen-single div,
.chosen-container .chosen-single div {
    width: 24px !important;
    height: var(--pp-field-h) !important;
    background: none !important;
}

.chosen-container-single .chosen-single div b,
.chosen-container .chosen-single div b {
    display: none !important;
}

.chosen-container-single .chosen-single div::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 12px;
    height: 8px;
    margin-top: -4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23b8bfd8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .15s ease;
}

.chosen-container.chosen-container-active .chosen-single div::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 6.5L6 1.5L11 6.5' stroke='%232047cf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    transform: rotate(180deg);
}

.chosen-container.chosen-container-active .chosen-single,
.chosen-container.chosen-with-drop .chosen-single,
.chosen-container-active.chosen-with-drop .chosen-single {
    background: var(--color-bg-input) !important;
    border-color: var(--pp-field-border-focus) !important;
    box-shadow: none !important;
}

/* chevron override — chosen.css loaded after form.css needs !important */

.chosen-container-single .chosen-single div {
    width: 24px !important;
    height: 44px !important;
    background: none !important;
}

.chosen-container-single .chosen-single div b {
    display: none !important;
}

/* clear-value button — center vertically in 44px field */

.chosen-container-single .chosen-single abbr,
.chosen-container-single.chosen-with-drop .chosen-single abbr {
    top: 10px !important;
    right: 36px !important;
    width: 20px !important;
    height: 20px !important;
    background-size: 10px 10px !important;
    background-position: center center !important;
    background-color: transparent !important;
    box-shadow: none !important;
    opacity: .5;
    transition: opacity .15s ease;
}

.chosen-container-single .chosen-single abbr:hover {
    opacity: 1;
}

.chosen-container-single .chosen-single abbr::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b8bfd8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m3 3 10 10M13 3L3 13'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.chosen-container-single .chosen-single abbr:hover::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232047cf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m3 3 10 10M13 3L3 13'/></svg>");
}

.chosen-container-single .chosen-single div::after,
.chosen-container-active.chosen-with-drop .chosen-container-single .chosen-single div::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    left: auto !important;
    width: 12px !important;
    height: 8px !important;
    margin-top: -4px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23b8bfd8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: rotate(0deg) !important;
    transition: transform .15s ease !important;
}

.chosen-container-active .chosen-container-single .chosen-single div::after,
.chosen-container.chosen-with-drop .chosen-container-single .chosen-single div::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 6.5L6 1.5L11 6.5' stroke='%232047cf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    transform: rotate(180deg) !important;
}

/* chosen search input inside dropdown — must be compact */

.chosen-container .chosen-search,
.chosen-container-single .chosen-search {
    padding: 35px 12px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    display: block !important;
    position: relative;
}

.chosen-container .chosen-search input[type="text"],
.chosen-container-single .chosen-search input[type="text"] {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 36px 0 36px !important;
    margin: 0 !important;
    background-color: var(--color-text-inverse) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8bfd8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 16px 16px !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: 12px !important;
    outline: none !important;
    color: var(--color-text-primary) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    box-shadow: none !important;
    transition: border-color .15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.chosen-container .chosen-search input[type="text"]::placeholder {
    color: var(--color-border) !important;
}

.chosen-container .chosen-search input[type="text"]:focus,
.chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* hide chosen.css's ::after search icon (we draw our own inline via bg-image) */

.chosen-container .chosen-search::after,
.chosen-container-single .chosen-search::after {
    display: none !important;
}

/* chosen drop panel */

.chosen-container .chosen-drop,
.chosen-container-single .chosen-drop {
    background: #FAFCFF !important;
    border: 1.5px solid #869AE3 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(32, 71, 207, .12);
    overflow: hidden;
    clip: auto;
    z-index: 1;
    margin-top: -20px !important;
}

.chosen-container-single .chosen-single {
    position: relative;
    z-index: 1090 !important;
}

.chosen-container .chosen-results {
    margin: 8px 0;
    padding: 0;
    max-height: 320px;
    color: var(--pp-field-color);
    font-size: var(--pp-field-font-size);
    line-height: var(--pp-field-line-height);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.chosen-container .chosen-results::-webkit-scrollbar {
    width: 3px;
}

.chosen-container .chosen-results::-webkit-scrollbar-track {
    background: transparent;
}

.chosen-container .chosen-results::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}

.chosen-container .chosen-results::-webkit-scrollbar-thumb:hover {
    background: #869ae3;
}

.chosen-container .chosen-results li {
    padding: 8px var(--pp-field-padding-x);
    color: var(--pp-field-color);
    background-image: none !important;
}

.chosen-container .chosen-results li {
    padding: 8px 16px !important;
    color: #4e4e4e !important;
    background: transparent !important;
    background-image: none !important;
    border-top: 1.5px solid transparent;
    border-bottom: 1.5px solid transparent;
    margin: 0 !important;
    position: relative;
    transition: background-color .1s ease;
}

.chosen-container .chosen-results li.highlighted {
    background: var(--color-bg-section) !important;
    background-image: none !important;
    color: #4e4e4e !important;
}

.chosen-container .chosen-results li.result-selected {
    background: var(--color-bg-section);
    color: #4e4e4e;
    border-top-color: #869ae3;
    border-bottom-color: #869ae3;
}

.chosen-container .chosen-results li.result-selected.highlighted {
    background: var(--color-bg-section);
    border-top-color: #869ae3;
    border-bottom-color: #869ae3;
}

.chosen-container .chosen-results li.group-result {
    color: var(--color-text-caption);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px var(--pp-field-padding-x) 4px;
}

.chosen-container .chosen-results li.group-option {
    padding-left: calc(var(--pp-field-padding-x) + 12px);
}

.chosen-container-multi .chosen-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: var(--pp-field-h);
    padding: 4px 10px !important;
    background: var(--pp-field-bg) !important;
    background-color: var(--pp-field-bg) !important;
    border: 1.5px solid var(--pp-field-border) !important;
    border-radius: var(--pp-field-radius) !important;
    color: var(--pp-field-color);
    font-size: 14px;
    line-height: 18px;
    box-shadow: none !important;
}

.chosen-container-multi {
    min-height: var(--pp-field-h);
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 14px !important;
    line-height: 18px !important;
}

.chosen-container-multi .chosen-choices li {
    background-image: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
    background: rgba(32, 71, 207, .08) !important;
    border: 1px solid rgba(32, 71, 207, .25);
    border-radius: 12px;
    padding: 2px 16px 2px 10px !important;
    color: var(--pp-field-border-focus);
    font-size: 13px;
    line-height: 16px;
    box-shadow: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    color: var(--pp-field-border-focus);
    padding-right: 10px;
    font-weight: 400;
    opacity: .7;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
    opacity: 1;
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    min-height: 24px;
    padding: 0;
    background: none !important;
    border: 0;
    color: var(--pp-field-color);
    font-size: var(--pp-field-font-size);
    line-height: var(--pp-field-line-height);
}

.chosen-container-multi .chosen-choices li.search-field input[type="text"]::placeholder {
    color: var(--pp-field-placeholder);
}

.chosen-container-active.chosen-with-drop .chosen-choices,
.chosen-container-active .chosen-choices {
    border-color: var(--pp-field-border-focus) !important;
    box-shadow: 0 0 0 3px rgba(32, 71, 207, .12);
}

/* ----- Buttons row inside form ----- */

/* Блок: Кнопки сохранения, отмены и действий формы. Ориентир: .pp-form-buttons. */
.pp-form-buttons,
form .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

form .buttons > .btn {
    margin: 0;
}

/* ----- Form layout helpers ----- */

/* Блок: Размещение полей и групп формы. Ориентир: .form-inline. */
.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.form-inline .form-group {
    flex: 1 1 200px;
    margin-bottom: 0;
}

/* ----- Disabled state wrapper ----- */

/* Блок: Фон и скругление свёрнутых секций формы. */
form .is_collapse,
form .is_collapsed {
    background: #f3f5fa;
    border-radius: 24px;
}

/* ----- Wide filter: two columns (Figma grid) ----- */

/* Блок: Фильтр pp: поля, флажки, диапазоны и панель действий. Ориентир: .pp-filter__row. */
.pp-filter__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.pp-filter__row:last-child {
    margin-bottom: 0;
}

.pp-filter__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pp-filter__field > label {
    margin-bottom: 0;
    color: var(--pp-field-color);
    font-size: var(--pp-field-font-size);
    font-weight: var(--pp-field-font-weight);
    line-height: var(--pp-field-line-height);
}

/* ----- Content add form (expert/school/courses/articles/promokod add pages) ----- */

/* Source: prod/expert-add.html + Figma node 1074-12827 */

/* Блок: Оформление формы добавления материала. Ориентир: form[action$="/add"]. */
form[action$="/add"],
form[action*="/add?"] {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

form[action$="/add"] fieldset,
form[action*="/add?"] fieldset {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

form[action$="/add"] .field,
form[action*="/add?"] .field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

form[action$="/add"] .field > label,
form[action*="/add?"] .field > label {
    margin: 0;
    letter-spacing: .01em;
}

/* Hint icons inside form labels */

form[action$="/add"] .hint-icon,
form[action*="/add?"] .hint-icon,
form[action$="/add"] .icon-question,
form[action*="/add?"] .icon-question {
    width: .875rem;
    height: .875rem;
    color: var(--color-border);
    cursor: help;
    transition: color var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    margin-left: 4px;
}

form[action$="/add"] .hint-icon:hover,
form[action*="/add?"] .hint-icon:hover,
form[action$="/add"] .icon-question:hover,
form[action*="/add?"] .icon-question:hover {
    color: var(--color-text-accent-soft);
}

/* Required asterisk — explicit red, matches Figma */

form[action$="/add"] .required_field > label::after,
form[action*="/add?"] .required_field > label::after {
    content: "*";
    margin-left: 4px;
    color: var(--color-notify);
    font-weight: 700;
}

/* File input wrapper (Bootstrap4 .custom-file replacement) */

form[action$="/add"] .file-field,
form[action*="/add?"] .file-field {
    align-items: stretch;
    display: flex;
}

form[action$="/add"] .file-field__placeholder,
form[action*="/add?"] .file-field__placeholder,
form[action$="/add"] .file-input,
form[action*="/add?"] .file-input {
    min-width: 0;
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    color: var(--color-border);
    letter-spacing: .01em;
    border: 1.5px solid var(--color-border);
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    flex: 1 1 0;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

form[action$="/add"] .file-field__btn,
form[action*="/add?"] .file-field__btn {
    min-width: 5.9375rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    flex-shrink: 0;
    margin-left: -1.5px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

form[action$="/add"] .file-field__btn:hover,
form[action*="/add?"] .file-field__btn:hover,
form[action$="/add"] .file-field__btn:focus-visible,
form[action*="/add?"] .file-field__btn:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Photo upload card (Figma: rounded card with avatar circle + text) */

form[action$="/add"] .image-upload,
form[action*="/add?"] .image-upload,
form[action$="/add"] .photo-upload,
form[action*="/add?"] .photo-upload {
    align-items: center;
    gap: var(--spacing-4);
    padding: 14px;
    background: var(--color-bg-section);
    border-radius: var(--radius-xl);
    display: flex;
}

form[action$="/add"] .image-upload__info,
form[action*="/add?"] .image-upload__info,
form[action$="/add"] .photo-upload__info,
form[action*="/add?"] .photo-upload__info {
    gap: var(--spacing-2);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

form[action$="/add"] .image-upload__title,
form[action*="/add?"] .image-upload__title,
form[action$="/add"] .photo-upload__title,
form[action*="/add?"] .photo-upload__title {
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3125rem;
}

form[action$="/add"] .image-upload__hint,
form[action*="/add?"] .image-upload__hint,
form[action$="/add"] .photo-upload__hint,
form[action*="/add?"] .photo-upload__hint {
    color: var(--color-text-primary);
    white-space: pre-line;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

/* Checkbox row layout (Figma uses inline gap) */

form[action$="/add"] .check-row,
form[action*="/add?"] .check-row {
    gap: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

/* WYSIWYG (Redactor / markitup) override — default theme is dark, force light */

form[action$="/add"] .wysiwyg,
form[action*="/add?"] .wysiwyg,
form[action$="/add"] .redactor-box,
form[action*="/add?"] .redactor-box,
form[action$="/add"] .markitup,
form[action*="/add?"] .markitup {
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    transition: border-color var(--transition-base);
}

form[action$="/add"] .wysiwyg:focus-within,
form[action*="/add?"] .wysiwyg:focus-within,
form[action$="/add"] .redactor-box:focus-within,
form[action*="/add?"] .redactor-box:focus-within,
form[action$="/add"] .markitup:focus-within,
form[action*="/add?"] .markitup:focus-within {
    border-color: var(--color-primary);
}

form[action$="/add"] .redactor-toolbar,
form[action*="/add?"] .redactor-toolbar,
form[action$="/add"] .markitup-toolbar,
form[action*="/add?"] .markitup-toolbar {
    background: var(--color-text-inverse);
    border-bottom: 1px solid var(--color-border-light);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: 6px 8px;
}

form[action$="/add"] .redactor-editor,
form[action*="/add?"] .redactor-editor,
form[action*="/add?"] .markitup-editor,
form[action$="/add"] .wysiwyg-editor,
form[action*="/add?"] .wysiwyg-editor {
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    padding: var(--spacing-1-25) var(--spacing-4);
    min-height: 150px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
}

form[action$="/add"] .redactor-editor:empty::before,
form[action*="/add?"] .redactor-editor:empty::before {
    color: var(--color-border);
}

/* Form actions row (Сохранить / Сохранить в черновиках / Отменить) */

form[action$="/add"] ~ .buttons,
form[action*="/add?"] ~ .buttons,
form[action$="/add"] .buttons,
form[action*="/add?"] .buttons,
form[action$="/add"] .form-buttons,
form[action*="/add?"] .form-buttons {
    gap: var(--spacing-2);
    flex-wrap: wrap;
    padding-top: var(--spacing-2);
    display: flex;
}

/* Cancel link inside form buttons */

form[action$="/add"] .buttons a,
form[action*="/add?"] .buttons a,
form[action$="/add"] .form-buttons a,
form[action*="/add?"] .form-buttons a {
    align-items: center;
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border-radius: 40px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
}

form[action$="/add"] .buttons a:hover,
form[action*="/add?"] .buttons a:hover,
form[action$="/add"] .form-buttons a:hover,
form[action*="/add?"] .form-buttons a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* "to_draft" button — outline variant, matches Figma */

form[action$="/add"] .to_draft,
form[action*="/add?"] .to_draft {
    background: var(--color-text-inverse) !important;
    color: var(--color-primary) !important;
    border: 1.5px solid var(--color-primary) !important;
    box-shadow: none !important;
}

form[action$="/add"] .to_draft:hover,
form[action*="/add?"] .to_draft:hover,
form[action$="/add"] .to_draft:focus-visible,
form[action*="/add?"] .to_draft:focus-visible {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* Page title — Figma uses 1.25rem/800, current pp.css uses 22px/800 — keep as is */

/* Categories sub-list inside fieldset (multi-cat) */

form[action$="/add"] .categories_list,
form[action*="/add?"] .categories_list,
form[action$="/add"] .multi-cats,
form[action*="/add?"] .multi-cats {
    gap: var(--spacing-1-25);
    flex-direction: column;
    margin-top: var(--spacing-1-25);
    display: flex;
}

/* Date / time field pair (Bootstrap input-group) — adjust radii for inner border */

form[action$="/add"] .field.ft_date .input-group,
form[action*="/add?"] .field.ft_date .input-group {
    width: 100%;
}

/* Блок: Фильтр pp: поля, флажки, диапазоны и панель действий. Ориентир: .pp-filter. */
.pp-filter {
    position: relative;
    margin: 12px 0 24px;
    background: var(--color-text-inverse);
    border: 1px solid var(--color-bg-section);
    border-radius: 16px;
    transition: background-color .2s ease, border-color .2s ease, border-radius .2s ease;
}

.pp-filter--blue {
    background: var(--color-bg-section);
    border-color: transparent;
    border-radius: 24px;
}

/* Блок: Описание категории над списком материалов. Ориентир: .category_description. */
.category_description {
    margin-bottom: 12px;
}

.category_description + .pp-filter {
    margin-top: 12px;
}

/* ----- Toggle (header row: "Фильтр" + chevron) ----- */

/* Блок: Фильтр pp: поля, флажки, диапазоны и панель действий. Ориентир: .pp-filter__toggle. */
.pp-filter__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 24px;
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .2s ease;
}

.pp-filter__toggle:focus-visible {
    outline: none;
}

.pp-filter__label {
    color: #434343;
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .01em;
    font-family: MontserratVariable, "Montserrat", sans-serif;
}

.pp-filter__chevron {
    width: 24px;
    height: 24px;
    color: var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.pp-filter__chevron svg {
    width: 24px;
    height: 24px;
}

.pp-filter__toggle.is-open .pp-filter__chevron,
.pp-filter__toggle[aria-expanded="true"] .pp-filter__chevron {
    transform: rotate(180deg);
}

/* ----- Body (fields + buttons) ----- */

.pp-filter__body {
    padding: 0 24px 16px;
    background: transparent;
}

.pp-filter__body .fields {
    margin-bottom: 0;
}

.pp-filter__body .form-row,
.pp-filter__body .form-group {
    margin-bottom: 0;
}

.pp-filter__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

/* Блок: Компонент фильтров: поля и управляющие элементы. Ориентир: .filters__field. */
.filters__field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

.filters__label, .filters__select-value {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.filters__input, .filters__select {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.filters__input:hover, .filters__select:hover, .filters__input:focus-within, .filters__select:focus-within {
    border-color: var(--color-primary);
}

.filters__input, .filters__select {
    position: relative;
}

.filters__select-native, .filters__input-field {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.filters__select-native::-moz-placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.filters__input-field::-moz-placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.filters__select-native::placeholder, .filters__input-field::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.filters__input-field {
    font-size: .875rem;
    line-height: 1.125rem;
}

.filters__select-native {
    appearance: none;
    padding-right: var(--spacing-6);
    cursor: pointer;
}

.filters__select-native:invalid {
    color: var(--color-border);
}

.filters__select-native {
    font-size: .875rem;
    line-height: 1.125rem;
}

.filters__select-arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-border);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.filters {
    padding: var(--spacing-6) 0;
}

.filters__inner {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.filters__card {
    background: var(--color-bg-section);
    border-radius: 1.5rem;
}

.filters__head {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-6);
    color: #434343;
    letter-spacing: .01em;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 1.5rem;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: flex;
}

.filters__head:hover, .filters__head:focus-visible {
    color: var(--color-text-primary);
}

.filters__head-chevron {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-border);
    transition: transform var(--transition-base);
}

.filters__head-chevron[aria-expanded=true] .filters__head-chevron, .filters__head[aria-expanded=true] .filters__head-chevron {
    transform: rotate(180deg);
}

.filters__body {
    gap: var(--spacing-4);
    padding: 0 var(--spacing-6) var(--spacing-4);
    transition: height var(--transition-base);
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.filters__row {
    gap: var(--spacing-4);
    display: flex;
}

.filters__field {
    gap: var(--spacing-1);
    flex: 1 1 0;
    min-width: 0;
}

.filters__input, .filters__select {
    border-radius: 1rem;
}

.filters__input-field::placeholder {
    letter-spacing: .01em;
}

.filters__section {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.filters__section-title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.filters__columns {
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.filters__column {
    gap: var(--spacing-2);
    flex-direction: column;
    flex: 12rem;
    min-width: 12rem;
    display: flex;
}

.filters__check {
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    display: inline-flex;
}

.filters__check-input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.filters__check-box {
    border: 1.5px solid var(--color-border);
    width: 1.125rem;
    height: 1.125rem;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    background: #fff;
    border-radius: .25rem;
    flex-shrink: 0;
    position: relative;
}

.filters__check-icon {
    color: #fff;
    width: .75rem;
    height: .625rem;
    transition: transform var(--transition-base);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.filters__check-input:checked + .filters__check-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.filters__check-input:checked + .filters__check-box .filters__check-icon {
    transform: translate(-50%, -50%) scale(1);
}

.filters__check-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.filters__actions {
    align-items: center;
    gap: var(--spacing-1-25);
    padding-top: var(--spacing-2);
    display: flex;
}

.filters__btn {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1);
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border-radius: 2.5rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.filters__btn--solid {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
}

.filters__btn--solid:hover {
    background: var(--color-primary-hover);
}

.filters__btn--outline {
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    background: 0 0;
}

.filters__btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Блок: Поля содержимого материала. Ориентир: .icms-content-fields .field + .field. */
.icms-content-fields .field + .field {
    margin-top: 15px;
}

.icms-content-fields .field_label {
    font-weight: 600;
}


/* Блок: Загрузка фото в админке — строка 76px с круглой зоной загрузки слева.
   Ориентир: .form-group.ft_image + .widget_image_single .block.
   Спека из макета (ProProfi, узел 1074:12881): контейнер bg #ECF3FB r24, gap 16,
   зона 76x76 круглая, белый фон, обводка 1.5px #79B2F4, иконка камеры 26px.
   Заголовок Montserrat 600/16/20, подсказка Inter 500/15/18, текст #333336.
   !important нужен из-за controllers/images/styles.css, который подключается позже pp.css. */
.form-group.ft_image {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "upload label" "upload hint";
    align-items: center;
    gap: 8px 16px;
    padding: 0 !important;
    min-height: 76px;
    background-color: #ecf3fb;
    border-radius: 24px;
}

.form-group.ft_image .widget_image_single {
    grid-area: upload;
    position: static !important;
    left: auto !important;
    top: auto !important;
}

.form-group.ft_image > label {
    grid-area: label;
    align-self: end;
    margin: 0 !important;
    color: var(--color-text-primary);
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.form-group.ft_image .icms-forms-hint,
.form-group.ft_image .icms-forms-hint .hint {
    grid-area: hint;
    align-self: start;
    margin: 0 !important;
    color: var(--color-text-primary);
    font-family: InterVariable, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}

/* Зона загрузки: круг 76x76 с белой заливкой и обводкой 1.5px #79B2F4.
   Обводка одна — на .block; вложенная .qq-upload-button только рисует иконку,
   иначе получаются два концентрических кольца. overflow visible, чтобы не срезать
   зелёный бейдж «добавить по ссылке». */
.widget_image_single .block,
.widget_image_single .multi-block {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px !important;
    height: 76px !important;
    padding: 0 !important;
    overflow: visible;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    background-color: #fff !important;
    border: 1.5px solid #79b2f4 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

.widget_image_single .upload.block .qq-upload-button,
.widget_image_multi .qq-upload-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px !important;
    height: 76px !important;
    padding: 0 !important;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    background-image: url(../images/upload-photo-camera.svg) !important;
    background-repeat: no-repeat !important;
    background-size: 34px 30px !important;
    background-position: center center !important;
    box-shadow: none !important;
}

.widget_image_multi .qq-upload-button {
    background-color: #fff !important;
    border: 1.5px solid #79b2f4 !important;
    border-radius: 50% !important;
}

.widget_image_single .qq-upload-button,
.widget_image_multi .qq-upload-button {
    position: static !important;
}

.widget_image_single .qq-upload-button:hover,
.widget_image_single .qq-upload-button:focus,
.widget_image_multi .qq-upload-button:hover,
.widget_image_multi .qq-upload-button:focus {
    background-color: #fff !important;
    border-color: #79b2f4 !important;
    box-shadow: none !important;
}

/* Прозрачный input поверх зоны — вся область кликабельна. */
.widget_image_single .qq-upload-button > input,
.widget_image_multi .qq-upload-button > input {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
}

.widget_image_single .qq-upload-list,
.widget_image_single .qq-upload-drop-area {
    display: none;
}

/* Превью загруженного фото — круг, кнопка удаления в правом нижнем углу. */
.widget_image_single .preview > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    border-radius: 50%;
}

.widget_image_single .preview img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

/* Бейдж «добавить по ссылке» — 20px в правом нижнем углу круга, иконка 12px. */
.widget_image_single .block a {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    /* .btn-sm задаёт min-height/min-width 28px — без сброса бейдж не уменьшится. */
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    overflow: visible;
    border-radius: 50%;
}

.widget_image_single .block a svg {
    width: 12px;
    height: 12px;
}

.widget_image_single .loading a,
.widget_image_single .qq-upload-spinner a {
    display: none;
}

/* Спиннер загрузки поверх круга. */
.widget_image_single .loading::after,
.widget_image_single .qq-upload-spinner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background-color: transparent;
    border: 4px solid #79b2f4;
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    animation: pp-loader-upload 0.9s linear infinite;
    z-index: 99;
}

@keyframes pp-loader-upload {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Блок: Поле загрузки изображения — кнопка слева, заголовок и подпись справа. Ориентир: .pp-image-field. */
.pp-image-field {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pp-image-field__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.pp-image-field__title {
    margin: 0;
    color: var(--pp-field-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.pp-image-field__hint {
    color: var(--pp-field-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

/* Блок: Кнопки: базовое оформление, варианты, размеры и состояния. Ориентир: form .btn-outline-secondary. */
form .btn-outline-secondary {
    background: transparent;
    border: 1.5px solid #2047CF;
    color: #2047CF;
}

form .btn-outline-secondary:hover {
    background-color: #E9EDFA;
}

/* ======================================================================
   Отзывы и комментарии
   ====================================================================== */

/* Блок: Оформление формы добавления материала. Ориентир: form[action$="/add"] .image-upload__preview. */
form[action$="/add"] .image-upload__preview,
form[action*="/add?"] .image-upload__preview,
form[action$="/add"] .photo-upload__preview,
form[action*="/add?"] .photo-upload__preview {
    background: var(--color-text-inverse);
    border: 1.5px solid var(--color-text-accent-soft);
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 4.75rem;
    height: 4.75rem;
    display: inline-flex;
    overflow: hidden;
}

form[action$="/add"] .image-upload__preview img,
form[action*="/add?"] .image-upload__preview img,
form[action$="/add"] .photo-upload__preview img,
form[action*="/add?"] .photo-upload__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Блок: Комментарии pp: список и оформление элементов. Ориентир: .pp-comments. */
.pp-comments {
    padding-top: 40px;
}

.pp-comments__header {
    margin-bottom: 16px;
}

.pp-comments__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pp-comments__title {
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    margin: 0;
}

.pp-comments__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-comments__bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 4px;
    background: var(--color-primary);
    border: 0;
    border-radius: 50%;
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.pp-comments__bell:hover,
.pp-comments__bell:focus-visible {
    background: #1235b3;
}

/* Состояние "отслеживается": класс btn-secondary ставит comments.js при переключении */
.pp-comments__bell.btn-secondary {
    background: var(--color-primary-soft-active) !important;
    color: var(--color-primary) !important;
}

.pp-comments__bell.btn-secondary:hover,
.pp-comments__bell.btn-secondary:focus-visible {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
}

.pp-comments__bell svg {
    width: 18px;
    height: 18px;
}

.pp-comments__bell .icms-comments-track-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Состояние "отслеживается": перечёркнутый колокольчик (JS переключает эти иконки) */
.pp-comments__bell-off::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    height: 1.5px;
    margin-top: -0.75px;
    background: currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
}

.pp-comments__divider {
    position: relative;
    height: 1.5px;
    background: var(--color-border-light);
}

.pp-comments__divider-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 128px;
    height: 1.5px;
    background: var(--color-primary);
}

.pp-comments__write-row {
    margin-bottom: 24px;
}

.pp-comments__write-row .btn {
    min-height: 34px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
}

/* Кнопка "Написать комментарий" на время открытой формы (класс ставит comments.js) */
.pp-comments__write-row.disabled .btn {
    opacity: .5;
    pointer-events: none;
}

.pp-comments__list {
    position: relative;
    padding: 0 0 0 44px;
}

.pp-comments__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 40px 0;
    text-align: center;
}

.pp-comments__empty-text {
    color: var(--color-text-caption);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
}

.pp-comments__empty-hint {
    color: var(--color-text-caption);
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    margin: 0;
}

.pp-comments__empty-hint a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pp-comments__refresh {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    display: none;
}

/* Блок: Связанные материалы события. Ориентир: .calendar-relate__rate. */
.calendar-relate__rate, .calendar-relate__reviews {
    color: var(--color-text-caption);
}

/* Блок: Рекомендованные курсы. Ориентир: .course-recommend__rate. */
.course-recommend__rate, .course-recommend__reviews {
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

/* Блок: Список экспертов: сетка, карточки, рейтинг и отзывы. Ориентир: .experts-list__reviews. */
.experts-list__reviews {
    color: var(--color-text-caption);
}

/* Блок: Отзывы: панель, фильтр, форма, статусы и текст отзыва. Ориентир: .widget-reviews-slider. */
.widget-reviews-slider {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0;
    overflow: hidden;
}

.reviews-slider {
    width: 100%;
}

.reviews-slider__title {
    margin: 0 0 var(--spacing-5);
    color: var(--color-text-primary);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.18;
}

.reviews-slider__swiper {
    width: 100%;
    overflow: visible;
}

.reviews-slider__nav {
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    display: flex;
}

.reviews-slider__arrow {
    color: var(--color-accent-soft);
    cursor: pointer;
    width: 24px;
    height: 24px;
    transition: color var(--transition-base), opacity var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.reviews-slider__arrow.swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
    cursor: default;
}

.reviews-slider__arrow:hover:not(.swiper-button-disabled), .reviews-slider__arrow:focus-visible:not(.swiper-button-disabled) {
    color: var(--color-primary);
}

.reviews-slider__arrow-icon {
    width: 24px;
    height: 24px;
}

.reviews-slider__pagination {
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.reviews-card {
    box-sizing: border-box;
    border-radius: var(--radius-xl);
    background: var(--color-bg-section);
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 16px 24px;
    display: flex;
}

.reviews-card__head {
    align-items: center;
    gap: 8px;
    display: flex;
}

.reviews-card__avatar {
    background: #bfcfe7;
    border-radius: 50%;
    flex-shrink: 0;
    width: 57px;
    height: 57px;
    overflow: hidden;
}

.reviews-card__avatar > a, .reviews-card__avatar > span {
    width: 100%;
    height: 100%;
    display: block;
}

.reviews-card__avatar img, .reviews-card__avatar-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.reviews-card__meta {
    gap: var(--spacing-1);
    flex-direction: column;
    flex: auto;
    min-width: 0;
    display: flex;
}

.reviews-card__rating {
    align-items: center;
    gap: 2px;
    display: inline-flex;
}

.reviews-card__star {
    width: 21px;
    height: 21px;
}

.reviews-card__star--filled {
    color: var(--color-star);
}

.reviews-card__star--empty {
    color: var(--color-icon-muted);
}

.reviews-card__name {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-base);
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-decoration: none;
    display: block;
    overflow: hidden;
}

.reviews-card__name:hover, .reviews-card__name:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.reviews-card__text {
    -webkit-line-clamp: 6;
    color: var(--color-text-primary);
    -webkit-box-orient: vertical;
    flex: auto;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    display: -webkit-box;
    overflow: hidden;
}

.reviews-card__more {
    min-height: 34px;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.reviews-card__more:hover, .reviews-card__more:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.reviews-slider__swiper .swiper-slide {
    opacity: .2;
    height: auto;
    transition: opacity .4s;
}

.reviews-slider__swiper .swiper-slide.swiper-slide-active + .swiper-slide, .reviews-slider__swiper .swiper-slide.swiper-slide-active + .swiper-slide + .swiper-slide {
    opacity: 1;
}

/* Мобильный слайдер отзывов: приглушение слайдов (.swiper-slide { opacity: .2 })
   отключаем — на узком экране видно один слайд, гасить остальные незачем. */
@media (max-width: 767.98px) {
    .reviews-slider__swiper .swiper-slide {
        opacity: 1;
    }
}

/* Блок: Шапка страницы школы. Ориентир: .school-header__rating-card-reviews. */
.school-header__rating-card-reviews {
    color: var(--color-text-primary);
    text-align: center;
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: underline;
}

.school-header__rating-card-reviews:hover {
    color: var(--color-primary);
}

/* Блок: Каталог школ: список и элементы. Ориентир: .schools-list__card-meta-reviews. */
.schools-list__card-meta-reviews {
    color: var(--color-text-caption);
}

/* Блок: Отзывы: панель, фильтр, форма, статусы и текст отзыва. Ориентир: .append_html .ireviews-panel. */
.append_html .ireviews-panel {
    background-color: #fff;
    padding: 0;
    border-top: none;
    font-size: 100%;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 1rem;
    border-radius: 0;
}

.ireviews-panel .col.reviews {
    padding: 0;
    min-width: 0;
}

.ireviews-panel .istars-result {
    display: flex;
    width: 100%;
    height: 37px;
    box-sizing: border-box;
    padding: 8px 20px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    border-radius: 24px;
    border: 2px solid #ECF3FB;
    background: #ECF3FB;
    font-family: Manrope, sans-serif;
}

.ireviews-panel .istars-result > label {
    order: 1;
    margin: 0;
    color: #333336;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
}

.ireviews-panel .populary-card__rating-value {
    order: 2;
    color: #333336;
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
}

.ireviews-panel .populary-card__rating-value .font-weight-light {
    display: none;
}

.ireviews-panel .istars-stars {
    order: 3;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    line-height: 0;
}

.ireviews-panel .istars_out,
.ireviews-panel .istars_out > svg,
.ireviews-panel .istars_in,
.ireviews-panel .istars_in > svg {
    width: 21px !important;
    height: 21px !important;
}

.ireviews-panel .istars_out {
    color: #c8c8c8;
}

.ireviews-panel .istars_in {
    color: #ffd600;
}

@media (max-width: 767.98px) {
    .append_html .ireviews-panel {
        flex-wrap: wrap;
    }

    .ireviews-panel .col.reviews {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 575.98px) {
    .ireviews-panel .col.reviews {
        flex-basis: 100%;
    }
}

#tab-ireviews .ireviews-filter > .icms-filter-container {
    background-color: #fff !important;
    padding: 0 !important;
}

.reviews_add_link .btn.btn-primary,
#review_frame_code.btn.btn-primary {
    display: inline-flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 40px;
    background: #2047CF;
    color: #fff;
}

.reviews-tracking {
    width: 34px;
    height: 34px;
    border-radius: 50px;
    overflow: hidden;
    margin-right: 15px;
}

.reviews-tracking.is_track {
    background-color: #2047CF;
}

.reviews-tracking.is_track svg {
    color: #fff;
}

/* Блок: Кнопки: базовое оформление, варианты, размеры и состояния. Ориентир: #review_frame_code.btn.btn-primary b. */
#review_frame_code.btn.btn-primary b {
    font-weight: 400 !important;
}

/* Блок: Отзывы: панель, фильтр, форма, статусы и текст отзыва. Ориентир: .review. */
.review {
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 24px;
    border: 2px solid #ECF3FB;
    background: #ECF3FB;
    box-shadow: none;
}

.review .user-avatar {
    border-radius: 50px;
    display: block;
    overflow: hidden;
    width: 48px;
    height: 48px;
}

.review .user {
    font-size: 16px;
    color: #333336;
}

.review .text-muted {
    font-size: 14px !important;
    color: #333336 !important;
}

.review .badge {
    display: inline-flex;
    padding: 4px 8px;
    align-items: center;
    gap: 8px;
    border-radius: 20px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.review .badge.badge-success {
    background-color: transparent;
    color: #43AC6A;
    border: 1px solid #43AC6A;
}

.review .badge.badge-danger {
    color: #EBAC00;
    background-color: transparent;
    border: 1px solid #EBAC00;
}

.review .alert-danger {
    padding: 16px 24px;
    border-radius: 16px;
    background: #E7DCE6;
    border: none;
    color: #333336;
}

.review .alert {
    margin-bottom: 10px;
}

.review .alert-danger .title {
    color: #FF5150;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
}

.review .review-html.is_deleted, .review .reviews-rating.is_deleted {
    opacity: 1;
}

.review .reviews-rating {
    display: flex;
    flex-wrap: wrap;
    /* по вертикали отступа нет, по горизонтали 15px */
    gap: 0 15px;
    border: 0;
    border-radius: 0;
    margin: 5px 0;
    background: transparent;
}

.review .reviews-rating .istars-rating_avg,
.review .reviews-rating .istars-result {
    font-weight: 400;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    /* в istars.css у .istars-result margin: 2px 0 — из-за него между строками оставался отступ */
    margin: 0;
}

/* Узкие экраны: подпись оценки идёт отдельной строкой, звёзды и значение — под ней.
   Иначе карточка оценки (~250px) шире блока отзыва на 320–375px и выпирает. */
@media (max-width: 400px) {
    .review .reviews-rating .istars-result {
        flex-wrap: wrap;
    }
    .review .reviews-rating .istars-result label {
        flex: 0 0 100%;
    }
}

/* Блок: Миниатюры изображений, прикреплённых к отзыву. Ориентир: .imini-views. */
.imini-views {
    display: flex;
    gap: 10px;
}

.imini-views .imini-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    aspect-ratio: 1/1;
    border-radius: 12px;
    border: 1.5px solid #A0B7D9;
    overflow: hidden;
}

.imini-views .imini-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Блок: Отзывы: панель, фильтр, форма, статусы и текст отзыва. Ориентир: .review.review-phone. */
.review.review-phone {
    background-color: #ECF3FB;
}

.review + .review {
    margin-top: 15px;
}

.review .review-html.is_long_text {
    height: auto;
}

.review .review-read-more {
    display: inline-block;
    color: #8F8F8F;
    font-size: 15px;
    font-style: normal;
}

.reviews-form + .reviews_add_link .btn.btn-primary {
    display: inline-flex;
}

.ireviews-panel {
    display: flex;
    gap: 15px;
}

/* Страница отдельного отзыва: интервалы между верхним блоком, оценками,
   карточкой отзыва и кнопкой перехода ко всем отзывам. */
.review-item__ratings {
    margin-top: 24px;
    margin-bottom: 24px;
}

.review-item__ratings .ireviews-panel {
    gap: 16px;
}

.review-item__reviews > .reviews-all {
    margin-top: 24px;
}

@media (max-width: 575.98px) {
    .review-item__ratings {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .review-item__reviews > .reviews-all {
        margin-top: 20px;
    }
}

@media (max-width: 767.98px) {
    .review-item__ratings .ireviews-panel {
        flex-wrap: wrap;
    }
}

/* ======================================================================
   Статьи и медиаматериалы
   ====================================================================== */

/* Блок: Список статей и карточки материалов. Ориентир: .articles_list. */
.articles_list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.articles_list__row {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}

.articles_list__row--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.articles_list_item {
    background: var(--color-text-inverse);
    border: 0;
    border-radius: 24px;
    padding: 16px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease;
}

.articles_list_item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.articles_list_item--big {
    grid-column: span 2;
}

.articles_list_item__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    color: inherit;
    text-decoration: none;
}

.articles_list_item__media {
    flex-shrink: 0;
    margin-bottom: 16px;
    overflow: hidden;
    aspect-ratio: 1.67 / 1;
    background: #f4f6fa;
    border-radius: 24px;
}

.articles_list_item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.articles_list_item:hover .articles_list_item__image {
    transform: scale(1.03);
}

.articles_list_item__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.articles_list_item__title {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-text-primary);
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.articles_list_item__title-link {
    color: inherit;
    text-decoration: none;
}

.articles_list_item__title-link:hover {
    color: var(--color-primary);
}

.articles_list_item__desc {
    font-family: Manrope, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.articles_list_item__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding-top: 12px;
}

.articles_list_item__stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.articles_list_item__stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-caption);
    font-family: Manrope, sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

.articles_list_item__stat-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-border);
}

.articles_list_item__stat-icon svg,
.articles_list_item__stat-icon img {
    width: 18px;
    height: 18px;
    display: block;
}

.articles_list_item__stat--comments .articles_list_item__stat-icon {
    color: #fbc500;
}

.articles_list_item__save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-border);
    cursor: pointer;
    border-radius: 8px;
    transition: color .2s ease, background-color .2s ease;
}

.articles_list_item__save:hover,
.articles_list_item__save.is-saved {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.articles_list_item__save svg {
    width: 21px;
    height: 18px;
}

.articles_list_item--big .articles_list_item__save svg {
    fill: #cadbf2;
    stroke-width: 1.5;
}

.articles_list_item--big .articles_list_item__save:hover svg,
.articles_list_item--big .articles_list_item__save.is-saved svg {
    fill: currentColor;
}

.articles_list_item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.articles_list_item__tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #f4f6fa;
    color: #6e87ac;
    font-size: 12px;
    font-weight: 500;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.articles_list_item__tag:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* Блок: Заголовки внутри содержимого виджета. Ориентир: .widget__body h2. */
.widget__body h2,
.widget__body h3,
.widget__body h4 {
    margin-top: 24px;
}

.widget__body h2:first-child,
.widget__body h3:first-child,
.widget__body h4:first-child {
    margin-top: 0;
}

/* Блок: Шапка медиаматериала: заголовок, метаданные, содержимое и боковая область. Ориентир: .media-header. */
.media-header {
    padding: 25px 0 60px;
}

.media-header__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.media-header__breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.media-header__crumb {
    color: var(--color-text-secondary);
    text-decoration: none;
    text-underline-offset: 2px;
    transition: color .2s ease;
}

.media-header__crumb:hover,
.media-header__crumb:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.media-header__crumb--current {
    color: var(--color-text-primary);
    font-weight: 600;
}

.media-header__crumb-sep {
    margin: 0 4px;
    color: var(--color-text-secondary);
    user-select: none;
}

.media-header__actions-wrap {
    position: relative;
    flex-shrink: 0;
}

.media-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 39px;
    padding: 9px 16px 10px;
    border: 1.5px solid var(--color-primary);
    border-radius: 40px;
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.media-header__actions:hover,
.media-header__actions:focus-visible {
    background: var(--color-primary-soft);
}

.media-header__actions:active,
.media-header__actions[aria-expanded="true"] {
    background: var(--color-primary-soft-active);
}

.media-header__actions-icon {
    width: 11px;
    height: 6px;
    display: inline-flex;
    transition: transform .2s ease;
}

.media-header__actions[aria-expanded="true"] .media-header__actions-icon {
    transform: rotate(180deg);
}

.media-header__actions-menu {
    min-width: 200px;
    margin-top: 8px;
    padding: 8px 0;
    background: var(--color-text-inverse);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: none;
}

.media-header__content {
    display: flex;
    align-items: flex-start;
    gap: 44px;
    flex-wrap: wrap;
}

.media-header__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 16px;
}

.media-header__title {
    font-family: Manrope, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 26px;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

/* Ссылка владельцу в шапке страницы школы. */
.school_item .school-item__title {
    margin-bottom: 0;
}

.school_item .school-item__claim-link {
    width: fit-content;
    color: #2047cf;
    font-family: Manrope, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: .01em;
    text-decoration: underline;
    text-underline-offset: 1px;
}

.school_item .school-item__claim-link:hover,
.school_item .school-item__claim-link:focus-visible {
    color: #1638ae;
}

/* Категории школы над заголовком. */
.school_item .school-item__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.school_item .school-item__categories .btn,
.school_item .school-item__categories .lists_links {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px 4px;
    background: #fafcff;
    color: #a0b7d9;
    border: 1px solid #a0b7d9;
    border-radius: 16px;
    box-shadow: none;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-decoration: none;
}

.school_item .school-item__categories .btn:hover,
.school_item .school-item__categories .btn:focus-visible,
.school_item .school-item__categories .lists_links:hover,
.school_item .school-item__categories .lists_links:focus-visible {
    background: #f2f7ff;
    color: #2047cf;
    border-color: #2047cf;
}

.media-header__cover {
    border-radius: 24px;
    overflow: hidden;
}

.media-header__cover img {
    display: block;
    width: 100%;
    height: auto;
}

.media-header__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.media-header__text {
    font-family: Manrope, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-primary);
}

.media-header__text p {
    margin: 0 0 12px;
}

.media-header__text p:last-child {
    margin-bottom: 0;
}

.media-header__text h2,
.media-header__text h3,
.media-header__text h4 {
    margin: 20px 0 10px;
    font-weight: 700;
    font-size: 17px;
    line-height: 24px;
    color: var(--color-text-primary);
}

.media-header__text h2:first-child,
.media-header__text h3:first-child,
.media-header__text h4:first-child {
    margin-top: 0;
}

.media-header__text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.media-header__text ul,
.media-header__text ol {
    padding-left: 20px;
    margin: 0 0 12px;
}

.media-header__text li {
    margin-bottom: 4px;
}

.media-header__text img {
    max-width: 100%;
    border-radius: 12px;
    margin: 12px 0;
}

.media-header__text iframe,
.media-header__text video {
    max-width: 100%;
    border-radius: 12px;
}

.media-header__text blockquote {
    margin: 12px 0;
    padding: 16px 22px;
    background: #fff8de;
    border-radius: 24px;
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-secondary);
}

.media-header__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.media-header__tag {
    display: inline-flex;
    padding: 3px 10px;
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: 16px;
    font-size: 12px;
    line-height: 16px;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.media-header__tag:hover,
.media-header__tag:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.media-header__meta-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    flex-wrap: wrap;
}

.media-header__meta-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-caption);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

.media-header__meta-icon {
    width: 14px;
    height: 14px;
    color: var(--color-border);
    display: inline-flex;
    flex-shrink: 0;
}

.media-header__meta-icon svg {
    width: 14px;
    height: 14px;
}

.media-header__meta-sep {
    color: var(--color-border);
    user-select: none;
}

.media-header__sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 360px;
    max-width: 100%;
    gap: 16px;
}

.media-header__share {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
    background: var(--color-bg-card-soft);
    border-radius: 24px;
    position: relative;
}

.media-header__share-img {
    border-radius: 24px;
    overflow: hidden;
}

.media-header__share-img img {
    display: block;
    width: 100%;
    height: auto;
}

.media-header__share-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.media-header__share-label {
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.media-header__share-list {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Кнопка соцсети в блоке «Поделиться». Макет: Figma 1389:25866 (default),
   hover/on click — 1055:11184. Бордера в макете нет (strokes: []).
   Default: фон #FFF, иконка #4E4E4E; Hover/Focus: фон #E9EDFA, иконка #2047CF;
   On click: фон #DBE1F7, иконка #2047CF. */
.media-header__share-btn {
    width: 44px;
    height: 44px;
    background: var(--color-text-inverse);
    border: none;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #4e4e4e;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

.media-header__share-btn:hover,
.media-header__share-btn:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.media-header__share-btn:active {
    color: var(--color-primary);
    background: var(--color-primary-soft-active);
}

.media-header__share-btn svg {
    width: 18px;
    height: 18px;
}

.media-header__author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--color-bg-section);
    border-radius: 24px;
}

.media-header__author-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
}

.media-header__author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-header__author-info {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
}

.media-header__author-name {
    color: var(--color-text-secondary);
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

/* Блок: Блок комментариев медиаматериала. Ориентир: .media-comment. */
.media-comment {
    padding: var(--spacing-15) 0;
}

.media-comment__tags {
    margin-bottom: var(--spacing-2);
    flex-wrap: wrap;
    align-items: center;
    gap: .4375rem;
    display: flex;
}

.media-comment__tag {
    padding: .1875rem var(--spacing-2);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    border-radius: 16px;
    align-items: center;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.media-comment__tag:hover, .media-comment__tag:focus-visible, .media-comment__tag.is-active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.media-comment__meta-bar {
    align-items: center;
    gap: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    flex-wrap: wrap;
    display: flex;
}

.media-comment__meta-item {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.media-comment__meta-icon {
    width: .875rem;
    height: .875rem;
    color: var(--color-border);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.media-comment__meta-icon svg {
    width: .875rem;
    height: .875rem;
}

.media-comment__header {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.media-comment__title-row {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.media-comment__title-block {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.media-comment__title {
    color: var(--color-primary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.media-comment__author-avatar {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 2px;
    width: 1.25rem;
    height: 1rem;
    display: block;
}

.media-comment__tabs {
    flex-direction: column;
    display: flex;
    position: relative;
}

.media-comment__tabs-track {
    background: var(--color-border-light);
    height: 1.5px;
}

.media-comment__tabs-active {
    background: var(--color-primary);
    width: 8rem;
    height: 1.5px;
    position: absolute;
    top: 0;
    left: 0;
}

.media-comment__actions-row {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-6);
    margin-top: var(--spacing-2);
    display: flex;
}

.media-comment__write {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.media-comment__write:hover, .media-comment__write:focus-visible {
    background: var(--color-primary-hover);
}

.media-comment__bell {
    width: 2.125rem;
    height: 2.125rem;
    padding: var(--spacing-0-25);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.media-comment__bell:hover, .media-comment__bell:focus-visible {
    background: var(--color-primary-hover);
}

.media-comment__bell-icon {
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
}

.media-comment__bell-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-inverse);
}

.media-comment__empty {
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-2) 0;
    text-align: center;
    flex-direction: column;
    display: flex;
}

.media-comment__empty-text, .media-comment__empty-hint {
    color: var(--color-text-caption);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.media-comment__empty-link {
    color: var(--color-primary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.media-comment__empty-link:hover, .media-comment__empty-link:focus-visible {
    color: var(--color-primary-hover);
}

/* Блок: Шапка медиаматериала: заголовок, метаданные, содержимое и боковая область. Ориентир: .media-header. */
.media-header {
    padding: var(--spacing-5-5) 0 var(--spacing-15);
}

.media-header__top {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.media-header__breadcrumbs {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.media-header__crumb {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    text-decoration: none;
}

.media-header__crumb:hover, .media-header__crumb:focus-visible {
    color: var(--color-primary);
}

.media-header__crumb--current {
    color: var(--color-text-primary);
    text-underline-offset: 2px;
    text-decoration: underline;
}

.media-header__crumb-sep {
    color: var(--color-text-secondary);
    margin: 0 var(--spacing-1);
    -webkit-user-select: none;
    user-select: none;
}

/* Кнопка «Действия» в шапке страницы. Макет: Figma 1006:4368 (состояния).
   Default — прозрачный фон; Hover — #E9EDFA; On click / Active (меню развёрнуто) — #DBE1F7. */
.page_header_actions {
    align-items: center;
    gap: var(--spacing-1);
    min-height: 39px;
    padding: 0 var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    background: transparent;
    border-radius: 40px;
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    display: inline-flex;
}

.page_header_actions:hover,
.page_header_actions:focus-visible {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.page_header_actions:active,
.page_header_actions[aria-expanded="true"] {
    background: var(--color-primary-soft-active);
    color: var(--color-primary);
}

.page_header_actions_icon {
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 8px;
    display: inline-flex;
    transition: transform var(--transition-base);
}

.page_header_actions[aria-expanded="true"] .page_header_actions_icon {
    transform: rotate(180deg);
}

.page_header_actions_icon svg {
    color: currentColor;
    width: 11px;
    height: 8px;
}

.media-header__content {
    align-items: flex-start;
    gap: var(--spacing-5-5);
    flex-wrap: wrap;
    display: flex;
}

.media-header__main {
    gap: var(--spacing-1-25);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.media-header__title {
    margin: 0 0 var(--spacing-2);
    color: var(--color-text-primary);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.media-header__intro, .media-header__outro {
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    flex-direction: column;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: flex;
}

.media-header__intro p {
    font-weight: 400;
}

.media-header__paragraph {
    margin: 0;
}

.media-header__subtitle {
    margin: var(--spacing-3) 0 0;
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.media-header__quote {
    align-items: stretch;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-2-75);
    background: #fff8de;
    border-radius: 24px;
    display: flex;
}

.media-header__quote-marker {
    align-items: center;
    gap: var(--spacing-2);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
}

.media-header__quote-icon {
    color: #d8d8d8;
    justify-content: center;
    align-items: center;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
}

.media-header__quote-icon svg {
    width: 2.75rem;
    height: 2.75rem;
}

.media-header__quote-line {
    background: #d8d8d8;
    flex: 1 1 0;
    width: 2px;
}

.media-header__quote-body {
    justify-content: center;
    gap: var(--spacing-4);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.media-header__quote-text {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.media-header__quote-author {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.media-header__sidebar {
    gap: var(--spacing-4);
    flex-direction: column;
    flex: 0 0 360px;
    max-width: 100%;
    display: flex;
}

.media-header__share {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-card-soft);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
    position: relative;
}

.media-header__share-bookmark {
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 1;
    width: 24px;
    height: 24px;
    color: var(--color-accent-soft);
    transition: color var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
}

.media-header__share-bookmark svg {
    width: 24px;
    height: 24px;
}

/* «В избранном» — как у .experts-card__fav (класс text-success ставит favorites.js) */
.media-header__share-bookmark:active svg,
.media-header__share-bookmark.is-active svg,
.media-header__share-bookmark.text-success svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

.media-header__share-img {
    aspect-ratio: 304/176;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 24px;
    width: 100%;
    height: auto;
    display: block;
}

.media-header__share-body {
    align-items: center;
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.media-header__share-label {
    color: var(--color-text-secondary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.media-header__share-list {
    justify-content: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

/* Дубль базового блока .media-header__share-btn — значения те же (Figma 1389:25866 / 1055:11184). */
.media-header__share-btn {
    color: #4e4e4e;
    width: 2.75rem;
    height: 2.75rem;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: #fff;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.media-header__share-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.media-header__share-btn:hover, .media-header__share-btn:focus-visible {
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.media-header__share-btn:active {
    color: var(--color-primary);
    background: var(--color-primary-soft-active);
}

.media-header__author {
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-section);
    border-radius: 24px;
    display: flex;
}

.media-header__author-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    width: 3.125rem;
    height: 3.125rem;
}

.media-header__author-info {
    gap: var(--spacing-2);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.media-header__author-rating {
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.media-header__author-rating-label {
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

.media-header__author-rating-value {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.media-header__author-star {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-star);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.media-header__author-star svg {
    width: 1.125rem;
    height: 1.125rem;
}

.media-header__author-name {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.media-header__author-role {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.media-header__author-stats {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.media-header__author-stat {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.media-header__author-stat-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-border);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.media-header__author-stat-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Блок: Блок отзывов медиаматериала. Ориентир: .media-review. */
.media-review {
    padding: var(--spacing-15) 0;
    overflow: hidden;
}

.media-review__title {
    margin: 0 0 var(--spacing-6);
    color: var(--color-text-primary);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.media-review__body {
    align-items: center;
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.media-review__slider {
    width: 100%;
    position: relative;
}

.media-review__fade {
    pointer-events: none;
    z-index: 2;
    width: 8.625rem;
    position: absolute;
    top: 0;
    bottom: 0;
}

.media-review__fade--left {
    background: linear-gradient(90deg, #fff 0%, #fffc 50%, #fff0 100%);
    left: 0;
}

.media-review__fade--right {
    background: linear-gradient(270deg, #fff 0%, #fffc 50%, #fff0 100%);
    right: 0;
}

.media-review__track {
    gap: var(--spacing-4);
    display: flex;
}

.media-review__card {
    align-items: flex-end;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border: 2px solid #fff;
    border-radius: 24px;
    flex-direction: column;
    flex: 0 0 18.875rem;
    display: flex;
    overflow: hidden;
}

.media-review__inner {
    gap: var(--spacing-4);
    flex-direction: column;
    width: 100%;
    display: flex;
}

.media-review__head {
    align-items: center;
    gap: var(--spacing-2);
    display: flex;
}

.media-review__avatar {
    border-radius: 50%;
    flex-shrink: 0;
    width: 3.5625rem;
    height: 3.5625rem;
    overflow: hidden;
}

.media-review__author {
    justify-content: center;
    gap: var(--spacing-1);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.media-review__stars {
    align-items: center;
    gap: var(--spacing-0-25);
    display: inline-flex;
}

.media-review__star {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-star);
}

.media-review__star svg {
    fill: currentColor;
    width: 1.3125rem;
    height: 1.3125rem;
}

.media-review__name {
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    overflow: hidden;
}

.media-review__text {
    color: var(--color-text-primary);
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    display: -webkit-box;
    overflow: hidden;
}

.media-review__btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    text-align: center;
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 40px;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.media-review__btn:hover, .media-review__btn:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.media-review__pagination {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.media-review__nav {
    cursor: pointer;
    width: 2.0625rem;
    height: 2.0625rem;
    transition: background-color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.media-review__nav svg {
    width: 1rem;
    height: .5rem;
    color: var(--color-accent-soft);
}

.media-review__nav:hover, .media-review__nav:focus-visible {
    background: var(--color-bg-section);
}

.media-review__nav:hover svg, .media-review__nav:focus-visible svg {
    color: var(--color-primary);
}

.media-review__dots {
    align-items: center;
    gap: var(--spacing-2);
    display: flex;
}

.media-review__dot {
    background: var(--color-bg-section);
    cursor: pointer;
    width: .8125rem;
    height: .8125rem;
    transition: width var(--transition-base), background-color var(--transition-base);
    border: none;
    border-radius: 16px;
    padding: 0;
}

.media-review__dot.is-active {
    background: var(--color-accent-soft);
    width: 3.9375rem;
}

/* Блок: Список медиаматериалов и карточки. Ориентир: .medias-list. */
.medias-list {
    gap: var(--spacing-4);
    grid-template-columns:1fr;
    display: grid;
}

.media-card {
    background: var(--color-bg-white);
    border-radius: 24px;
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.media-card__link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.media-card__media {
    background: var(--color-bg-section);
    border-radius: 25px;
    width: 100%;
    height: 120px;
    position: relative;
    overflow: hidden;
}

.media-card__image {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
}

.media-card__body {
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-5) 0;
    flex-direction: column;
    flex: 1 1 0;
    display: flex;
}

.media-card__title {
    color: var(--color-text-primary);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: -webkit-box;
    overflow: hidden;
}

.media-card__title-link {
    color: inherit;
    transition: color var(--transition-base);
    text-decoration: none;
}

.media-card__title-link:hover, .media-card__title-link:focus-visible {
    color: var(--color-primary);
}

.media-card__desc {
    color: var(--color-text-primary);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    display: -webkit-box;
    overflow: hidden;
}

.media-card__footer {
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5) var(--spacing-4);
    margin-top: auto;
    display: flex;
}

.media-card__stats {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.media-card__stat {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.media-card__stat-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-border);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.media-card__stat-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.media-card__stat-icon.is-active {
    color: var(--color-star);
}

.media-card__save {
    cursor: pointer;
    width: 1.4375rem;
    height: 1.25rem;
    transition: transform var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.media-card__save svg {
    width: 1.4375rem;
    height: 1.25rem;
    color: var(--color-border);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5px;
    transition: color var(--transition-base), fill var(--transition-base);
}

.media-card__save:hover svg, .media-card__save:focus-visible svg, .media-card__save[aria-pressed=true] svg {
    color: var(--color-primary);
    fill: var(--color-fav);
}

/* ======================================================================
   Эксперты
   ====================================================================== */

/* Блок: Список экспертов: сетка, карточки, рейтинг и отзывы. Ориентир: .experts-list__main. */
.experts-list__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.experts-list__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.experts-list__card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px 24px;
    background: var(--color-text-inverse);
    border: 2px solid var(--color-text-inverse);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}

.experts-list__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.experts-list__photo {
    flex-shrink: 0;
    width: 134px;
    border-radius: 24px;
    overflow: hidden;
}

.experts-list__photo img,
.experts-list__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 67/100;
}

.experts-list__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    flex: 1 1 0;
    min-width: 0;
}

.experts-list__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.experts-list__name {
    color: var(--color-text-primary);
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.experts-list__name a {
    color: inherit;
    text-decoration: none;
}

.experts-list__name a:hover {
    color: var(--color-primary);
}

.experts-list__role {
    color: var(--color-text-caption);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    margin: 0;
}

.experts-list__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.experts-list__meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.experts-list__rating,
.experts-list__comments,
.experts-list__date,
.experts-list__views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-caption);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.experts-list__star {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    color: #fbc500;
}

.experts-list__star svg {
    width: 16px;
    height: 16px;
}

.experts-list__comment-icon,
.experts-list__date-icon,
.experts-list__views-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    color: var(--color-border);
}

.experts-list__comment-icon svg,
.experts-list__date-icon svg,
.experts-list__views-icon svg {
    width: 18px;
    height: 18px;
}

.experts-list__badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    padding: 3px 10px;
    background: #43ac6a;
    color: var(--color-text-inverse);
    border-radius: 24px;
    font-size: 14px;
    font-weight: 800;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
}

/* Блок: Форма добавления эксперта. Ориентир: .expert-add-form__field. */
.expert-add-form__field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

.expert-add-form__label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.expert-add-form__control, .expert-add-form__control--textarea {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.expert-add-form__control:hover, .expert-add-form__control--textarea:hover, .expert-add-form__control:focus-within, .expert-add-form__control--textarea:focus-within {
    border-color: var(--color-primary);
}

.expert-add-form__control--textarea {
    align-items: flex-start;
}

.expert-add-form__select, .expert-add-form__input {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.expert-add-form__select::-moz-placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.expert-add-form__input::-moz-placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.expert-add-form__select::placeholder, .expert-add-form__input::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.expert-add-form__input {
    font-size: .875rem;
    line-height: 1.125rem;
}

.expert-add-form__select {
    appearance: none;
    padding-right: var(--spacing-6);
    cursor: pointer;
}

.expert-add-form__select:invalid {
    color: var(--color-border);
}

.expert-add-form__select {
    font-size: .875rem;
    line-height: 1.125rem;
}

.expert-add-form__select-chevron {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-border);
    pointer-events: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.expert-add-form__form {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.widget-expert-add-form {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0 var(--spacing-10);
}

.expert-add-form {
    gap: var(--spacing-5);
    flex-direction: column;
    display: flex;
}

.expert-add-form__head {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.expert-add-form__breadcrumbs {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.expert-add-form__breadcrumb {
    color: var(--color-text-secondary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.expert-add-form__breadcrumb:hover, .expert-add-form__breadcrumb:focus-visible {
    color: var(--color-primary);
}

.expert-add-form__breadcrumb-sep, .expert-add-form__breadcrumb-current {
    color: var(--color-text-secondary);
}

.expert-add-form__actions {
    position: relative;
}

.expert-add-form__action-btn {
    align-items: center;
    gap: var(--spacing-1);
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 40px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.expert-add-form__action-btn svg {
    width: 1rem;
    height: .5rem;
    transition: transform var(--transition-base);
}

.expert-add-form__action-btn[aria-expanded=true] svg {
    transform: rotate(180deg);
}

.expert-add-form__action-btn:hover, .expert-add-form__action-btn:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.expert-add-form__menu {
    z-index: 10;
    min-width: 13.6875rem;
    padding: var(--spacing-2) 0;
    background: var(--color-bg-white);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    border-radius: .5rem;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.5rem #0000001f;
}

.expert-add-form__menu.is-open,
.expert-add-form__menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.expert-add-form__menu-item {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    color: #4e4e4e;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-base);
    background: 0 0;
    border: none;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.expert-add-form__menu-item:hover, .expert-add-form__menu-item:focus-visible, .expert-add-form__menu-item--active {
    background: var(--color-bg-section);
}

.expert-add-form__menu-item--bold {
    font-weight: 700;
}

.expert-add-form__csv {
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: var(--color-bg-section);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
}

.expert-add-form__csv-title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.expert-add-form__csv-template {
    align-items: center;
    gap: var(--spacing-2);
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 40px;
    align-self: flex-start;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.expert-add-form__csv-template svg {
    width: 1.125rem;
    height: 1.125rem;
}

.expert-add-form__csv-template:hover, .expert-add-form__csv-template:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.expert-add-form__file {
    align-items: stretch;
    display: flex;
}

.expert-add-form__file-placeholder {
    min-width: 0;
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    color: var(--color-border);
    letter-spacing: .01em;
    border: 1.5px solid var(--color-border);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    flex: 1 1 0;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.expert-add-form__file-btn {
    min-width: 5.9375rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    flex-shrink: 0;
    margin-left: -1.5px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.expert-add-form__file-btn:hover, .expert-add-form__file-btn:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.expert-add-form__file-input {
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    position: absolute;
}

.expert-add-form__tooltip {
    padding: var(--spacing-2) var(--spacing-1-25);
    color: var(--color-text-inverse);
    background: #79b2f4;
    border-radius: 8px;
    align-self: flex-start;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    box-shadow: 0 0 .5rem #4e4e4e36;
}

.expert-add-form__btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border: 1.5px solid #0000;
    border-radius: 40px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.expert-add-form__btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.expert-add-form__btn--primary:hover, .expert-add-form__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.expert-add-form__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.expert-add-form__card {
    padding: var(--spacing-5);
    background: var(--color-bg-section);
    border-radius: 24px;
}

.expert-add-form__card-head {
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    display: flex;
}

.expert-add-form__card-title {
    color: var(--color-text-primary);
    margin: 0;
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.expert-add-form__card-body {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.expert-add-form__field {
    gap: var(--spacing-1);
}

.expert-add-form__label-row {
    align-items: center;
    gap: var(--spacing-0-75);
    display: flex;
}

.expert-add-form__hint {
    width: .875rem;
    height: .875rem;
    color: var(--color-border);
    cursor: help;
    transition: color var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.expert-add-form__hint svg {
    width: .875rem;
    height: .875rem;
}

.expert-add-form__hint:hover, .expert-add-form__hint:focus-visible {
    color: #79b2f4;
}

.expert-add-form__control {
    border-radius: 16px;
}

.expert-add-form__control--textarea {
    padding: var(--spacing-1-25) var(--spacing-4);
}

.expert-add-form__photo {
    align-items: center;
    gap: var(--spacing-4);
    background: var(--color-bg-section);
    border-radius: 24px;
    padding: 14px;
    display: flex;
}

.expert-add-form__photo-avatar {
    background: var(--color-bg-white);
    border: 1.5px solid #79b2f4;
    border-radius: 50%;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 4.75rem;
    height: 4.75rem;
    display: inline-flex;
}

.expert-add-form__photo-avatar svg {
    color: #79b2f4;
    width: 1.625rem;
    height: 1.5rem;
}

.expert-add-form__photo-avatar--rounded {
    border-width: 2px;
    border-radius: 1.5rem;
}

.expert-add-form__photo-avatar--rounded svg {
    width: 2rem;
    height: 2rem;
}

.expert-add-form__photo-info {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.expert-add-form__photo-title {
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3125rem;
}

.expert-add-form__photo-hint {
    color: var(--color-text-primary);
    white-space: pre-line;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.expert-add-form__add {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.expert-add-form__add-btn {
    align-items: center;
    gap: var(--spacing-1);
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 40px;
    align-self: flex-start;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.expert-add-form__add-btn svg {
    width: 1rem;
    height: .5rem;
    transform: rotate(-90deg);
}

.expert-add-form__add-btn:hover, .expert-add-form__add-btn:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.expert-add-form__check-row {
    gap: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.expert-add-form__check {
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    display: inline-flex;
}

.expert-add-form__check-input {
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    position: absolute;
}

.expert-add-form__check-input:checked + .expert-add-form__check-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.expert-add-form__check-input:checked + .expert-add-form__check-box:after {
    opacity: 1;
}

.expert-add-form__check-input:focus-visible + .expert-add-form__check-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.expert-add-form__check-box {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    width: 1.125rem;
    height: 1.125rem;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
}

.expert-add-form__check-box:after {
    content: "";
    top: var(--spacing-0-25);
    left: var(--spacing-0-75);
    border: solid var(--color-bg-white);
    opacity: 0;
    width: .25rem;
    height: .5rem;
    transition: opacity var(--transition-base);
    border-width: 0 1.5px 1.5px 0;
    position: absolute;
    transform: rotate(45deg);
}

.expert-add-form__check-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.expert-add-form__checks-grid {
    gap: var(--spacing-1-25) var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.expert-add-form__promo {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.expert-add-form__promo-head {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

/* Блок: Шапка страницы эксперта. Ориентир: .expert-header. */
.expert-header {
    padding: var(--spacing-5-5) 0;
}

.expert-header__top {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

/* Тег-категория в шапке (макет 1012:7853). */
.expert-header__tag {
    padding: 3px var(--spacing-2) var(--spacing-1);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: 16px;
    align-self: flex-start;
    align-items: center;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    max-width: 100%;
    display: inline-flex;
}

.expert-header__breadcrumbs {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.expert-header__crumb {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    text-decoration: none;
}

.expert-header__crumb:hover, .expert-header__crumb:focus-visible {
    color: var(--color-primary);
}

.expert-header__crumb--current {
    color: var(--color-text-primary);
    text-underline-offset: 2px;
    text-decoration: underline;
}

.expert-header__crumb-sep {
    color: var(--color-text-secondary);
    -webkit-user-select: none;
    user-select: none;
}

.expert-header__content {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.expert-header__tabs {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
    position: relative;
}

.expert-header__tabs-row {
    align-items: center;
    gap: var(--spacing-5-5);
    display: flex;
}

.expert-header__tab {
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-primary);
    letter-spacing: .01em;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: inline-flex;
}

.expert-header__tab--inactive {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    text-decoration: none;
}

.expert-header__tab--inactive:hover, .expert-header__tab--inactive:focus-visible {
    color: var(--color-primary);
}

.expert-header__tab-count {
    min-width: 1.625rem;
    height: 1.625rem;
    padding: 0 var(--spacing-1);
    background: var(--color-bg-section);
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.expert-header__tabs-track {
    background: var(--color-border-light);
    height: 1.5px;
}

.expert-header__tabs-active {
    background: var(--color-primary);
    width: 5.4375rem;
    height: 1.5px;
    position: absolute;
    bottom: -1.5px;
    left: 0;
}

.expert-header__main {
    align-items: flex-start;
    gap: var(--spacing-5-5);
    flex-wrap: wrap;
    display: flex;
}

.expert-header__info {
    gap: var(--spacing-4);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.expert-header__head {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.expert-header__category {
    padding: .1875rem var(--spacing-2);
    background: var(--color-bg-input);
    color: var(--color-border);
    letter-spacing: .01em;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    align-self: flex-start;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.expert-header__name {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.expert-header__socials {
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.expert-header__social {
    align-items: center;
    gap: var(--spacing-1);
    min-height: 1.875rem;
    padding: var(--spacing-1) var(--spacing-2);
    color: var(--color-primary);
    letter-spacing: .01em;
    border: 1.5px solid var(--color-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 24px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.expert-header__social:hover, .expert-header__social:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.expert-header__social-icon {
    justify-content: center;
    align-items: center;
    width: 1.375rem;
    height: 1.375rem;
    display: inline-flex;
}

.expert-header__social-icon svg {
    color: currentColor;
    width: 1.375rem;
    height: 1.375rem;
}

.expert-header__contest {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.expert-header__contest-title {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3125rem;
}

.expert-header__contest-img {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
    width: 5.8125rem;
    height: 5.8125rem;
    display: block;
}

.expert-header__desc {
    gap: var(--spacing-1);
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    flex-direction: column;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: flex;
}

.expert-header__desc-line {
    margin: 0;
}

.expert-header__share {
    gap: var(--spacing-4);
    max-width: 100%;
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-card-soft);
    border-radius: 24px;
    flex-direction: column;
    flex: 0 0 22rem;
    display: flex;
    position: relative;
}

.expert-header__share-bookmark {
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 1;
    width: 24px;
    height: 24px;
    color: var(--color-accent-soft);
    transition: color var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
}

.expert-header__share-bookmark svg {
    width: 24px;
    height: 24px;
}

/* «В избранном» — как у .experts-card__fav (класс text-success ставит favorites.js) */
.expert-header__share-bookmark:active svg,
.expert-header__share-bookmark.is-active svg,
.expert-header__share-bookmark.text-success svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

.expert-header__share-img {
    aspect-ratio: 1;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 24px;
    width: 100%;
    height: auto;
    display: block;
}

.expert-header__share-badge {
    top: calc(1rem + var(--spacing-2) + var(--spacing-4) + var(--spacing-2) + .625rem);
    left: calc(1rem + var(--spacing-6) + .5rem);
    z-index: 1;
    padding: .1875rem var(--spacing-1-25);
    color: var(--color-text-inverse);
    background: #43ac6a;
    border-radius: 24px;
    align-items: center;
    font-size: .875rem;
    font-weight: 800;
    line-height: 1rem;
    display: inline-flex;
    position: absolute;
}

.expert-header__share-body {
    align-items: center;
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.expert-header__share-label {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.expert-header__share-list {
    justify-content: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.expert-header__share-btn {
    color: #4e4e4e;
    width: 2.75rem;
    height: 2.75rem;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    background: #fff;
    border: 2px solid #e4e4e7;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.expert-header__share-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.expert-header__share-btn:hover, .expert-header__share-btn:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Блок: Отзывы на странице эксперта. Ориентир: .expert-review. */
.expert-review {
    padding: var(--spacing-15) 0;
}

.expert-review__header {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.expert-review__summary {
    align-self: flex-start;
    align-items: center;
    gap: var(--spacing-4);
    display: inline-flex;
}

.expert-review__summary-star {
    color: #c8c8c8;
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.expert-review__summary-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
}

.expert-review__summary-score {
    color: var(--color-text-primary);
    letter-spacing: .01em;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.expert-review__summary-count {
    color: var(--color-text-caption);
    letter-spacing: .01em;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.expert-review__pills {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.expert-review__rating-pill {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-4);
    min-width: 16rem;
    min-height: 2.5rem;
    padding: var(--spacing-2) var(--spacing-5);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    flex: calc(25% - 1rem);
    display: inline-flex;
}

.expert-review__rating-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.expert-review__rating-value {
    color: var(--color-text-primary);
    letter-spacing: .01em;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.expert-review__rating-star {
    color: #c8c8c8;
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.expert-review__rating-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
}

.expert-review__actions {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-6);
    margin-top: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.expert-review__write {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.expert-review__write:hover, .expert-review__write:focus-visible {
    background: var(--color-primary-hover);
}

.expert-review__right {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.expert-review__bell {
    width: 2.125rem;
    height: 2.125rem;
    padding: var(--spacing-0-25);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.expert-review__bell:hover, .expert-review__bell:focus-visible {
    background: var(--color-primary-hover);
}

.expert-review__bell-icon {
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
}

.expert-review__bell-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-inverse);
}

.expert-review__code {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.expert-review__code:hover, .expert-review__code:focus-visible {
    background: var(--color-primary-hover);
}

.expert-review__tabs {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
    position: relative;
}

.expert-review__tabs-row {
    align-items: center;
    gap: var(--spacing-5-5);
    display: flex;
}

.expert-review__tab {
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-primary);
    letter-spacing: .01em;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: inline-flex;
}

.expert-review__tab--inactive {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    text-decoration: none;
}

.expert-review__tab--inactive:hover, .expert-review__tab--inactive:focus-visible {
    color: var(--color-primary);
}

.expert-review__tab-count {
    min-width: 1.625rem;
    height: 1.625rem;
    padding: 0 var(--spacing-1);
    background: var(--color-bg-section);
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.expert-review__tabs-track {
    background: var(--color-bg-section);
    height: 1.5px;
}

.expert-review__tabs-active {
    background: var(--color-primary);
    width: 5.25rem;
    height: 1.5px;
    position: absolute;
    bottom: -1.5px;
    left: 0;
}

.expert-review__empty {
    padding: var(--spacing-2) 0;
    text-align: center;
    justify-content: center;
    display: flex;
}

.expert-review__empty-text {
    color: var(--color-text-caption);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

/* Блок: Виджет экспертов и его карточки. Ориентир: .widget-experts. */
.widget-experts {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0;
}

.experts {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.experts__header {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.experts__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.18;
}

.experts__description {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.experts__list {
    gap: var(--spacing-4);
    grid-template-columns:1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
}

.experts__item {
    display: flex;
}

.experts__footer {
    justify-content: center;
    display: flex;
}

.experts__more {
    padding: var(--spacing-2) var(--spacing-4);
    min-height: 34px;
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.experts__more:hover, .experts__more:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.experts-card {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border-radius: var(--radius-xl);
    flex-direction: column;
    flex: 100%;
    display: flex;
}

.experts-card__top {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.experts-card__media {
    aspect-ratio: 67/100;
    border-radius: var(--radius-xl);
    flex-shrink: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.experts-card__photo {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.experts-card__badge {
    left: 50%;
    bottom: var(--spacing-2);
    color: var(--color-bg-white);
    white-space: nowrap;
    background: #43ac6a;
    border-radius: 24px;
    align-items: center;
    padding: 3px 10px;
    font-size: .875rem;
    font-weight: 800;
    line-height: 1rem;
    display: inline-flex;
    position: absolute;
    transform: translate(-50%);
}

.experts-card__body {
    gap: var(--spacing-4);
    flex-direction: column;
    flex: auto;
    min-width: 0;
    display: flex;
}

.experts-card__head {
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
    display: flex;
}

/* Тег в карточке эксперта. Макет: Figma 1006:4335 — Default / Hover / On click.
   Hover и On click одинаковые: фон #ECF3FB; текст в состояниях не меняется. */
.experts-card__tag {
    padding: 2px var(--spacing-2) 3px;
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: var(--radius-full);
    white-space: nowrap;
    align-items: center;
    transition: background-color var(--transition-base);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    display: inline-flex;
}

/* Глобальное правило a { color } перебивало цвет тега — текст должен быть #A0B7D9. */
.experts-card__tag a {
    color: inherit;
}

.experts-card__tag:hover,
.experts-card__tag:active {
    background: var(--color-bg-section);
}

/* Кнопка «В избранное». Макет: Figma 1145:7290 — 4 состояния.
   Default и Hover одинаковы: обводка #A0B7D9 (currentColor), без заливки.
   On click («жмут») и Active («в избранном», aria-pressed=true): заливка #CADBF2 + обводка #2047CF.
   Заливку даёт --fav-fill из спрайта (fill="var(--fav-fill, none)" у path svg-heart). */
.experts-card__fav {
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.experts-card__fav svg {
    color: var(--color-accent-soft);
    transition: color var(--transition-base);
}

.experts-card__fav:active svg,
.experts-card__fav[aria-pressed=true] svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

/* Иконка-избранное из хука favorites (класс icms-favorites__btn): тот же вид, что
   у .experts-card__fav. Состояние «в избранном» favorites.js помечает классом text-success. */
.icms-favorites__btn:not(.btn) svg {
    color: var(--color-accent-soft);
    transition: color var(--transition-base);
}

.icms-favorites__btn:not(.btn).text-success svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

.experts-card__main {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.experts-card__name {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.experts-card__role {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.experts-card__meta {
    gap: var(--spacing-1);
    color: var(--color-text-caption);
    flex-direction: column;
    margin-top: auto;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: flex;
}

.experts-card__stats {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.experts-card__rating, .experts-card__comments {
    align-items: center;
    gap: var(--spacing-1);
    display: inline-flex;
}

.experts-card__rating-value {
    color: var(--color-star);
    font-weight: 600;
}

.experts-card__rating .svg-star {
    width: 16px;
    height: 16px;
    color: var(--color-star);
}

.experts-card__comments .svg-comment {
    width: 18px;
    height: 18px;
    color: var(--color-star);
}

.experts-card__info {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.experts-card__date, .experts-card__views {
    align-items: center;
    gap: var(--spacing-0-75);
    display: inline-flex;
}

/* Блок: Список экспертов: сетка, карточки, рейтинг и отзывы. Ориентир: .experts-list. */
.experts-list {
    padding: var(--spacing-5-5) 0 var(--spacing-15);
    background: var(--color-bg-card-soft);
}

.experts-list__inner {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.experts-list__top {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.experts-list__breadcrumb {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.experts-list__crumb {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
}

.experts-list__crumb:hover, .experts-list__crumb:focus-visible {
    color: var(--color-primary);
}

.experts-list__crumb--current {
    color: var(--color-text-primary);
    text-underline-offset: 2px;
    text-decoration: underline;
}

.experts-list__crumb-sep {
    color: var(--color-text-secondary);
    margin: 0 var(--spacing-1);
    -webkit-user-select: none;
    user-select: none;
}

.experts-list__actions {
    align-items: center;
    gap: var(--spacing-1);
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 40px;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.experts-list__actions:hover, .experts-list__actions:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.experts-list__actions-icon {
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: .5rem;
    display: inline-flex;
}

.experts-list__actions-icon svg {
    color: currentColor;
    width: 1rem;
    height: .5rem;
}

.experts-list__hero {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.experts-list__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.experts-list__lead {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.experts-list__link {
    color: var(--color-primary);
    text-decoration: none;
}

.experts-list__link:hover, .experts-list__link:focus-visible {
    text-decoration: underline;
}

.experts-list__filter {
    background: var(--color-bg-white);
    border-radius: 24px;
    overflow: hidden;
}

.experts-list__filter-toggle {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-6);
    color: #434343;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: flex;
}

.experts-list__filter-toggle:hover, .experts-list__filter-toggle:focus-visible {
    color: var(--color-text-primary);
}

.experts-list__filter-icon {
    width: 1.5rem;
    height: .75rem;
    color: var(--color-border);
    transition: transform var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.experts-list__filter-icon svg {
    width: 1.5rem;
    height: .75rem;
}

.is-open .experts-list__filter-icon,
[aria-expanded="true"] .experts-list__filter-icon {
    transform: rotate(180deg);
}

.experts-list__filter-panel {
    padding: 0 var(--spacing-6) var(--spacing-4);
    display: none;
}

.is-open .experts-list__filter-panel,
.experts-list__filter-panel.show {
    display: block;
}

.experts-list__filter-group {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.experts-list__filter-group-label {
    color: var(--color-text-caption);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.experts-list__filter-chips {
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.experts-list__chip {
    padding: var(--spacing-0-75) var(--spacing-3);
    background: var(--color-bg-card-soft);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border: 1px solid #0000;
    border-radius: 40px;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.experts-list__chip:hover, .experts-list__chip:focus-visible, .experts-list__chip.is-active {
    background: var(--color-bg-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.experts-list__toolbar {
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.experts-list__sort, .experts-list__perpage {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.experts-list__sort-label, .experts-list__perpage-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.experts-list__sort-value, .experts-list__perpage-value {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-primary);
    letter-spacing: .01em;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.experts-list__sort-value:hover, .experts-list__sort-value:focus-visible, .experts-list__perpage-value:hover, .experts-list__perpage-value:focus-visible {
    color: var(--color-primary-hover);
}

.experts-list__sort-icon, .experts-list__perpage-icon {
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: .5rem;
    display: inline-flex;
}

.experts-list__sort-icon svg, .experts-list__perpage-icon svg {
    width: 1rem;
    height: .5rem;
    color: var(--color-text-primary);
}

.experts-list__main {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.experts-list__list {
    gap: var(--spacing-4);
    grid-template-columns:repeat(2, 1fr);
    display: grid;
}

.experts-list__card {
    align-items: stretch;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-white);
    border: 2px solid var(--color-bg-white);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    border-radius: 24px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.experts-list__card:hover {
    transform: translateY(-.125rem);
    box-shadow: 0 .25rem 1.25rem #0000000f;
}

.experts-list__body {
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.experts-list__info {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.experts-list__name {
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    overflow: hidden;
}

.experts-list__role {
    color: var(--color-text-caption);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.experts-list__meta {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.experts-list__meta-row {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.experts-list__rating, .experts-list__comments, .experts-list__date, .experts-list__views {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.experts-list__star {
    width: 1rem;
    height: 1rem;
    color: var(--color-star);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.experts-list__star svg {
    width: 1rem;
    height: 1rem;
}

.experts-list__rating-value {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.experts-list__comment-icon, .experts-list__date-icon, .experts-list__views-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-border);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.experts-list__comment-icon svg, .experts-list__date-icon svg, .experts-list__views-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.experts-list__badge {
    left: var(--spacing-3);
    bottom: var(--spacing-3);
    z-index: 1;
    padding: .1875rem var(--spacing-1-25);
    color: var(--color-text-inverse);
    background: #43ac6a;
    border-radius: 24px;
    align-items: center;
    font-size: .875rem;
    font-weight: 800;
    line-height: 1rem;
    display: inline-flex;
    position: absolute;
}

.experts-list__pagination {
    align-items: center;
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.experts-list__pages {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.experts-list__page-arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-accent-soft);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.experts-list__page-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

.experts-list__page-arrow:hover, .experts-list__page-arrow:focus-visible {
    color: #6e87ac;
}

.experts-list__page {
    width: 2.375rem;
    height: 2.375rem;
    padding: var(--spacing-0-75);
    color: var(--color-accent-soft);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.375rem;
    display: inline-flex;
}

.experts-list__page.is-active {
    color: #6e87ac;
    background: #eff5fc;
    border-radius: 40px;
    font-weight: 800;
}

.experts-list__page:hover:not(.is-active), .experts-list__page:focus-visible:not(.is-active) {
    color: #6e87ac;
}

.experts-list__counter {
    color: var(--color-border);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.experts-list__info {
    padding: 0 0 20px;
}

/* Блок: Дополнительные элементы страницы эксперта. Ориентир: .expert-item__cat. */
.expert-item__cat {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

.expert-item__cat .btn {
    display: inline-flex;
    padding: 3px 10px;
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: 16px;
    font-size: 12px;
    box-shadow: none;
    line-height: 16px;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

/* Блок: Контакты эксперта: пилюли со ссылками на площадки. Ориентир: .expert-item__contacts. */
.expert-item__contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.expert-item__contacts-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: 1.5px solid var(--color-primary);
    border-radius: 24px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.expert-item__contacts-item:hover,
.expert-item__contacts-item:focus-visible {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.expert-item__contacts-item:active {
    background: var(--color-primary-soft-active);
    color: var(--color-primary);
}

.expert-item__contacts-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Блок: Шапка медиаматериала: заголовок, метаданные, содержимое и боковая область. Ориентир: .media-header__sidebar.__expert .media-header__share-img. */
.media-header__sidebar.__expert .media-header__share-img {
    aspect-ratio: 304 / 304;
}

/* ======================================================================
   Школы
   ====================================================================== */

/* Блок: Список школ и карточки. Ориентир: .school-list. */
.school-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* Список школ внутри поля-связи (напр. «Школа, в которой преподаете» на
   странице эксперта/курса): одна колонка, чтобы карточка занимала всю
   ширину контейнера, а не половину. */
.field.ft_parent .school-list {
    grid-template-columns: 1fr;
}

.school-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    padding: 16px 24px;
    background: var(--color-bg-section);
    border-radius: 24px;
    overflow: hidden;
    transition: opacity .2s ease, transform .2s ease;
}

.school-card:hover {
    opacity: .9;
}

.school-card__top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* tags row + bookmark */

.school-card__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.school-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px 4px;
    background: var(--color-bg-input);
    border-radius: 16px;
    color: var(--color-accent-soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
}

.school-card__bookmark {
    margin-left: auto;
    width: 21px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-accent-soft);
    cursor: pointer;
    transition: color .2s ease;
}

.school-card__bookmark svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* «В избранном» — как у .experts-card__fav */
.school-card__bookmark:active svg,
.school-card__bookmark[aria-pressed=true] svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

/* title + subtitle */

.school-card__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.school-card__title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}

.school-card__title a {
    color: inherit;
    text-decoration: none;
    transition: opacity .15s ease;
}

.school-card__title a:hover {
    opacity: .7;
}

.school-card__subtitle {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

/* meta chips */

.school-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.school-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-caption);
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.school-card__chip svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-border);
}

.school-card__rating-value {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Блок: Блок школы на странице курса. Ориентир: .widget-course-school. */
.widget-course-school {
    background: var(--color-bg-section);
    padding: var(--spacing-6) 0 var(--spacing-8);
}

.course-school {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.course-school__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.course-school__card {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-white);
    border: 0;
    border-radius: 24px;
    justify-content: space-between;
    max-width: 35.75rem;
    min-height: 12.5rem;
    flex-direction: column;
    display: flex;
}

.course-school__head {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.course-school__tags {
    align-items: center;
    gap: var(--spacing-1);
    flex-wrap: wrap;
    display: flex;
}

.course-school__tag {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: 16px;
    align-items: center;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    display: inline-flex;
}

.course-school__fav {
    cursor: pointer;
    width: 1.3125rem;
    height: 1.125rem;
    transition: transform var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.course-school__fav svg {
    width: 1.3125rem;
    height: 1.125rem;
    color: var(--color-accent-soft);
    transition: color var(--transition-base);
}

.course-school__fav:hover, .course-school__fav:focus-visible {
    transform: scale(1.1);
}

/* «В избранном» — как у .experts-card__fav (класс text-success ставит favorites.js) */
.course-school__fav:active svg,
.course-school__fav.text-success svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

.course-school__info {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-school__name {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.course-school__name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

.course-school__name a:hover {
    color: var(--color-primary);
}

.course-school__desc {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.course-school__stats {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.course-school__stats-row {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.course-school__stat {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    display: inline-flex;
}

.course-school__stat svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-soft);
}

.course-school__stat--rating .svg-star, .course-school__stat--comments .svg-comment {
    color: var(--color-star);
}

.course-school__rating-value {
    color: var(--color-text-primary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
}

.course-school__rating-count {
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

/* Блок: Каталог курсов: список и карточки. Ориентир: .course-card__school. */
.course-card__school, .course-card__teacher {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
}

/* Блок: Комментарии и отзывы школы. Ориентир: .school-comment. */
.school-comment {
    padding: var(--spacing-15) 0;
    background: var(--color-bg-white);
}

.school-comment__inner {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
    position: relative;
}

.school-comment__header {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.school-comment__rating {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.school-comment__rating-star {
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.school-comment__rating-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-star);
}

.school-comment__rating-value {
    color: var(--color-text-primary);
    letter-spacing: .01em;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.school-comment__rating-count {
    color: var(--color-text-caption);
    letter-spacing: .01em;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.school-comment__pills {
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.school-comment__pill {
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-2) var(--spacing-5);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    cursor: pointer;
    transition: border-color var(--transition-base), background-color var(--transition-base);
    border-radius: 1.5rem;
    display: inline-flex;
}

.school-comment__pill:hover {
    border-color: var(--color-primary);
}

.school-comment__pill-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-comment__pill-score {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-primary);
    letter-spacing: .01em;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
    display: inline-flex;
}

.school-comment__pill-star {
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.school-comment__pill-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-star);
}

.school-comment__main {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.school-comment__tabs {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.school-comment__tab-labels {
    align-items: center;
    gap: var(--spacing-5-5);
    display: flex;
}

.school-comment__tab {
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: inline-flex;
}

.school-comment__tab.is-active, .school-comment__tab:hover:not(.is-active) {
    color: var(--color-primary);
}

.school-comment__tab-badge {
    background: var(--color-bg-section);
    width: 1.625rem;
    height: 1.625rem;
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    border-radius: 1.5rem;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.school-comment__tab-line {
    background: var(--color-bg-section);
    height: .0938rem;
    position: relative;
}

.school-comment__tab-line:after {
    content: "";
    background: var(--color-primary);
    width: 7.25rem;
    height: .0938rem;
    position: absolute;
    bottom: 0;
    left: 0;
}

.school-comment__toolbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-6);
    display: flex;
}

.school-comment__toolbar-right {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.school-comment__bell {
    width: 2.125rem;
    height: 2.125rem;
    padding: var(--spacing-0-25);
    background: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 1.875rem;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.school-comment__bell svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-inverse);
}

.school-comment__bell:hover {
    background: var(--color-primary-hover);
}

.school-comment__btn {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1);
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    white-space: nowrap;
    border-radius: 2.5rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.school-comment__btn--solid {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
}

.school-comment__btn--solid:hover {
    background: var(--color-primary-hover);
}

.school-comment__filters {
    gap: var(--spacing-4);
    grid-template-columns:repeat(3, 1fr);
    display: grid;
}

.school-comment__filter {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.school-comment__filter-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.school-comment__filter-select {
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    cursor: pointer;
    transition: border-color var(--transition-base);
    border-radius: 1rem;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.school-comment__filter-select:hover {
    border-color: var(--color-primary);
}

.school-comment__filter-placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.school-comment__filter-arrow {
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
}

.school-comment__filter-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-border);
}

.school-comment__sort {
    align-items: center;
    gap: var(--spacing-8);
    color: var(--color-text-primary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.school-comment__sort-item {
    align-items: center;
    gap: var(--spacing-1-25);
    display: inline-flex;
}

.school-comment__sort-value {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-primary);
    letter-spacing: .01em;
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.school-comment__sort-arrow {
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: .5rem;
    display: inline-flex;
}

.school-comment__sort-arrow svg {
    width: 1rem;
    height: .5rem;
    color: var(--color-text-primary);
}

.school-comment__reviews {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.school-comment__review {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 1.5rem;
    display: flex;
}

.school-comment__review-votes {
    align-items: center;
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.school-comment__vote-btn {
    width: .75rem;
    height: .75rem;
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: opacity var(--transition-base);
    background: #ff5150;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.school-comment__vote-btn svg {
    width: .5rem;
    height: .25rem;
}

.school-comment__vote-btn:hover {
    opacity: .8;
}

.school-comment__vote-btn--down {
    transform: rotate(180deg);
}

.school-comment__vote-count {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-comment__review-content {
    gap: var(--spacing-4);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.school-comment__review-user {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.school-comment__review-avatar {
    background: var(--color-bg-white);
    border-radius: 1.5rem;
    flex-shrink: 0;
    width: 2.9375rem;
    height: 2.9375rem;
}

.school-comment__review-user-info {
    gap: var(--spacing-0-75);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.school-comment__review-user-row {
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.school-comment__review-name {
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3125rem;
}

.school-comment__review-phone {
    align-items: center;
    gap: var(--spacing-0-75);
    display: inline-flex;
}

.school-comment__review-phone svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-secondary);
}

.school-comment__review-phone-link {
    color: var(--color-primary);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    text-decoration: none;
}

.school-comment__review-phone-link:hover {
    text-decoration: underline;
}

.school-comment__review-meta {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.school-comment__review-time {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-comment__review-status {
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    letter-spacing: .01em;
    white-space: nowrap;
    border-radius: 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.school-comment__review-status svg {
    width: 1rem;
    height: 1rem;
}

.school-comment__review-status--verified {
    color: #43ac6a;
    border: 1px solid #43ac6a;
}

.school-comment__review-status--pending {
    color: #ebac00;
    border: 1px solid #ebac00;
    border-radius: 1.625rem;
}

.school-comment__review-status--rejected {
    color: #ff5150;
    border: 1px solid #ff5150;
    border-radius: 1.625rem;
}

.school-comment__review-anchor {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-comment__review-body {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.school-comment__review-ratings {
    gap: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.school-comment__review-rating {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.school-comment__review-rating-score {
    color: var(--color-text-primary);
    letter-spacing: .01em;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3125rem;
}

.school-comment__review-rating-star {
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.school-comment__review-rating-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-star);
}

.school-comment__review-rating-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-comment__review-text {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-comment__review-attachments {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.school-comment__review-attach-label {
    color: var(--color-primary);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.school-comment__review-files {
    gap: var(--spacing-2);
    display: flex;
}

.school-comment__review-file {
    border: 1.5px solid var(--color-accent-soft);
    background: #e0e6f8;
    border-radius: .75rem;
    width: 3.125rem;
    height: 3.125rem;
}

.school-comment__review-banner {
    padding: var(--spacing-4) var(--spacing-6);
    gap: var(--spacing-6);
    border-radius: 1rem;
    flex-direction: column;
    display: flex;
}

.school-comment__review-banner--pending {
    background: #fbc50029;
}

.school-comment__review-banner--rejected {
    background: #e7dce6;
}

.school-comment__review-banner-text {
    color: #ebac00;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.school-comment__review-banner-title {
    color: #ff5150;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.school-comment__review-banner-content {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.school-comment__review-banner-content p {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-comment__review-banner-reason {
    font-weight: 600;
}

.school-comment__review-banner-note {
    color: var(--color-text-primary);
}

.school-comment__review-long {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-comment__review-more {
    color: var(--color-text-caption);
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: underline;
    display: inline-flex;
}

.school-comment__review-more:hover {
    color: var(--color-primary);
}

.school-comment__review-actions {
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.school-comment__review-action {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 2.5rem;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.school-comment__review-action:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.school-comment__bottom {
    align-items: center;
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.school-comment__load-more {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 2.5rem;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.school-comment__load-more:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.school-comment__counter {
    color: var(--color-text-caption);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.school-comment__fab {
    right: 0;
    bottom: var(--spacing-6);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1);
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 2.5rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
    position: absolute;
}

.school-comment__fab:hover {
    background: var(--color-primary-hover);
}

/* Блок: Шапка страницы школы. Ориентир: .school-header. */
.school-header {
    padding: var(--spacing-5-5) 0 var(--spacing-15);
    background: var(--color-bg-white);
}

.school-header__inner {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.school-header__top {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-5-5);
    display: flex;
}

.school-header__breadcrumbs {
    align-items: center;
    gap: var(--spacing-1);
    flex-wrap: wrap;
    display: flex;
}

.school-header__crumb {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
}

.school-header__crumb:hover, .school-header__crumb:focus-visible {
    color: var(--color-primary);
}

.school-header__crumb--current {
    color: var(--color-text-secondary);
    pointer-events: none;
}

.school-header__crumb-sep {
    color: var(--color-text-secondary);
    margin: 0 var(--spacing-1);
    -webkit-user-select: none;
    user-select: none;
}

.school-header__ratings {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.school-header__ratings-head {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.school-header__ratings-title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.school-header__ratings-subtitle {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.school-header__ratings-cards {
    gap: var(--spacing-2);
    grid-template-columns:repeat(4, 1fr);
    display: grid;
}

.school-header__rating-card {
    background: var(--color-bg-section);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
}

.school-header__rating-card--summary {
    justify-content: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
}

.school-header__rating-card:not(.school-header__rating-card--summary) {
    justify-content: center;
    gap: var(--spacing-1-25);
    padding: var(--spacing-4) var(--spacing-5);
    border: 2px solid var(--color-bg-section);
}

.school-header__rating-card-summary {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.school-header__rating-card-summary-block {
    gap: var(--spacing-0-25);
    flex-direction: column;
    align-items: center;
    display: flex;
}

.school-header__rating-card-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.school-header__rating-card-score {
    align-items: center;
    gap: var(--spacing-1);
    display: inline-flex;
}

.school-header__rating-card-star {
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.school-header__rating-card-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-star);
}

.school-header__rating-card-score-text {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.school-header__rating-card-stats {
    flex-direction: column;
    gap: .1875rem;
    display: flex;
}

.school-header__rating-card-stat {
    color: var(--color-text-primary);
    text-align: center;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-header__rating-card-stat-label {
    font-weight: 500;
}

.school-header__rating-card-btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.school-header__rating-card-btn:hover, .school-header__rating-card-btn:focus-visible {
    background: var(--color-primary-hover);
}

.school-header__rating-card-head {
    align-items: center;
    gap: var(--spacing-2);
    display: flex;
}

.school-header__rating-bars {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.school-header__rating-bar {
    align-items: center;
    gap: var(--spacing-2);
    display: flex;
}

.school-header__rating-bar-num {
    color: var(--color-text-primary);
    width: .75rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
}

.school-header__rating-bar-star {
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.school-header__rating-bar-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-star);
}

.school-header__rating-bar-count {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.school-header__info {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.school-header__tabs {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.school-header__tab-labels {
    align-items: center;
    gap: var(--spacing-5-5);
    display: flex;
}

.school-header__tab {
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: inline-flex;
}

.school-header__tab:hover, .school-header__tab:focus-visible, .school-header__tab.is-active {
    color: var(--color-primary);
}

.school-header__tab-badge {
    background: var(--color-bg-section);
    width: 1.625rem;
    height: 1.625rem;
    color: var(--color-text-secondary);
    border-radius: 1.5rem;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.school-header__tab-underline {
    background: var(--color-bg-section);
    height: .0938rem;
    position: relative;
}

.school-header__tab-underline-active {
    background: var(--color-primary);
    width: 220px;
    height: .0938rem;
    position: absolute;
    bottom: 0;
    left: 0;
}

.school-header__tags {
    gap: var(--spacing-1);
    flex-wrap: wrap;
    display: flex;
}

.school-header__tag {
    padding: .1875rem var(--spacing-2) var(--spacing-1);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    white-space: nowrap;
    border-radius: 1rem;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.school-header__content {
    align-items: flex-start;
    gap: var(--spacing-5-5);
    display: flex;
}

.school-header__body {
    gap: var(--spacing-1-25);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.school-header__name {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.school-header__claim {
    color: var(--color-primary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    align-self: flex-start;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: underline;
}

.school-header__claim:hover {
    color: var(--color-primary-hover);
}

.school-header__desc {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.school-header__sidebar {
    flex: 0 0 22rem;
}

.school-header__sidebar-card {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-card-soft);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.school-header__sidebar-media {
    border-radius: 24px;
    width: 100%;
    overflow: hidden;
}

.school-header__sidebar-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

.school-header__sidebar-divider {
    border-top: 1px solid var(--color-border);
    height: 0;
}

.school-header__sidebar-share {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.school-header__sidebar-share-label {
    color: var(--color-text-secondary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.school-header__sidebar-socials {
    justify-content: center;
    gap: var(--spacing-2);
    display: flex;
}

.school-header__sidebar-social {
    width: 2.75rem;
    height: 2.75rem;
    padding: var(--spacing-1-25);
    background: var(--color-bg-white);
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-base);
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.school-header__sidebar-social svg {
    color: #4e4e4e;
    width: 1.5rem;
    height: 1.5rem;
}

.school-header__sidebar-social:hover, .school-header__sidebar-social:focus-visible {
    background: var(--color-primary);
}

.school-header__sidebar-social:hover svg, .school-header__sidebar-social:focus-visible svg {
    color: var(--color-text-inverse);
}

/* Блок: Блок преимуществ школы. Ориентир: .school-why. */
.school-why {
    padding: var(--spacing-6) 0;
    background: var(--color-bg-white);
}

.school-why__inner {
    background-image: url(../images/school-why-inner.jpg);
    background-position: 50%;
    background-size: cover;
    border-radius: 1.5rem;
    padding: 3.0625rem 2.6875rem;
    position: relative;
    overflow: hidden;
}

.school-why__content {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.school-why__head {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.school-why__title {
    color: var(--color-text-accent);
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    line-height: 2rem;
}

.school-why__logo {
    align-items: center;
    height: 2rem;
    display: inline-flex;
}

.school-why__logo svg {
    width: auto;
    height: 2rem;
    color: var(--color-text-accent);
}

.school-why__cards {
    gap: var(--spacing-4);
    grid-template-columns:repeat(3, 1fr);
    display: grid;
}

.school-why__card {
    gap: var(--spacing-2);
    padding-bottom: var(--spacing-2-25);
    background: var(--color-bg-accent);
    border: 1.5px solid var(--color-text-inverse) 52;
    border-radius: 1.5rem;
    flex-direction: column;
    display: flex;
    overflow: hidden;
    box-shadow: 0 0 1rem #11305f33;
}

.school-why__card-media {
    width: 100%;
    height: 6.75rem;
    overflow: hidden;
}

.school-why__card-img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.school-why__card-text {
    gap: var(--spacing-0-25);
    padding: 0 var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.school-why__card-title {
    color: var(--color-text-accent);
    margin: 0;
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.375rem;
}

.school-why__card-desc {
    color: var(--color-text-accent-soft);
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
}

/* Блок: Каталог школ: список и элементы. Ориентир: .schools-list. */
.schools-list, .schools-list__inner, .schools-list__body {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.schools-list__filter {
    background: var(--color-bg-section);
    border-radius: 24px;
    overflow: hidden;
}

.schools-list__filter-toggle {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-8);
    color: #434343;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: space-between;
    align-items: center;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: flex;
}

.schools-list__filter-toggle:hover, .schools-list__filter-toggle:focus-visible {
    color: var(--color-text-primary);
}

.schools-list__filter-icon {
    width: 1.5rem;
    height: .75rem;
    color: var(--color-border);
    transition: transform var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.schools-list__filter-icon svg {
    width: 1.5rem;
    height: .75rem;
}

.is-open .schools-list__filter-icon {
    transform: rotate(180deg);
}

.schools-list__main {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.schools-list__toolbar {
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.schools-list__sort {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.schools-list__sort-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.schools-list__sort-value {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-primary);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.schools-list__sort-value:hover, .schools-list__sort-value:focus-visible {
    color: var(--color-primary-hover);
}

.schools-list__sort-icon {
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: .5rem;
    display: inline-flex;
}

.schools-list__sort-icon svg {
    width: 1rem;
    height: .5rem;
    color: var(--color-text-primary);
}

.schools-list__list {
    gap: var(--spacing-4);
    grid-template-columns:repeat(2, 1fr);
    display: grid;
}

.schools-list__card {
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.schools-list__card-top {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.schools-list__tags {
    align-items: center;
    gap: var(--spacing-1);
    flex-wrap: wrap;
    display: flex;
}

.schools-list__tag {
    padding: .1875rem var(--spacing-2) var(--spacing-1);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    white-space: nowrap;
    border-radius: 1rem;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.schools-list__bookmark {
    cursor: pointer;
    width: 1.3125rem;
    height: 1.125rem;
    transition: transform var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.schools-list__bookmark svg {
    width: 1.3125rem;
    height: 1.125rem;
    color: var(--color-border);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5px;
}

.schools-list__bookmark:hover svg, .schools-list__bookmark:focus-visible svg {
    color: var(--color-primary);
}

.schools-list__card-body {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.schools-list__card-name {
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    overflow: hidden;
}

.schools-list__card-desc {
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    overflow: hidden;
}

.schools-list__card-meta {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.schools-list__card-meta-row {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.schools-list__card-meta-item {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.schools-list__card-meta-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-border);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.schools-list__card-meta-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.schools-list__card-meta-star {
    justify-content: center;
    align-items: center;
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
}

.schools-list__card-meta-star svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-star);
}

.schools-list__card-meta-rating {
    color: var(--color-text-primary);
    font-weight: 600;
}

.schools-list__card-meta-item--rating {
    gap: var(--spacing-1);
}

.schools-list__pagination {
    align-items: center;
    gap: var(--spacing-1-25);
    padding-top: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.schools-list__pages {
    align-items: center;
    gap: var(--spacing-1-25);
    display: flex;
}

.schools-list__page-arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-accent-soft);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.schools-list__page-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

.schools-list__page-arrow:hover, .schools-list__page-arrow:focus-visible {
    color: #6e87ac;
}

.schools-list__page {
    width: 2.375rem;
    height: 2.375rem;
    padding: var(--spacing-0-75);
    color: var(--color-accent-soft);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.375rem;
    display: inline-flex;
}

.schools-list__page.is-active {
    color: #6e87ac;
    background: #eff5fc;
    border-radius: 40px;
    font-weight: 800;
}

.schools-list__page:hover:not(.is-active), .schools-list__page:focus-visible:not(.is-active) {
    color: #6e87ac;
}

.schools-list__counter {
    color: var(--color-border);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

/* Блок: Текстовый блок каталога школ. Ориентир: .widget-schools-seo. */
.widget-schools-seo {
    padding: var(--spacing-15) 0;
    background: var(--color-bg-white);
}

.schools-seo {
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-5-5);
    display: flex;
}

.schools-seo__text {
    gap: var(--spacing-1-25);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.schools-seo__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.schools-seo__paragraph {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.schools-seo__highlight {
    color: var(--color-primary);
    font-weight: 800;
}

.schools-seo__image {
    border-radius: 24px;
    flex: 0 0 25.6875rem;
    overflow: hidden;
}

.schools-seo__img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

/* ======================================================================
   Главная страница и общие контентные карточки
   ====================================================================== */

/* Только компонентные BEM-стили из Figma.
   Базовые reset, grid, controls и buttons предоставляет theme.css (Bootstrap). */

/* Блок: Главный баннер. Ориентир: .widget-banner-main. */
.widget-banner-main {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0 0;
}

.banner-main {
    align-items: stretch;
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.banner-main__content {
    gap: var(--spacing-6);
    flex-direction: column;
    flex: 50%;
    min-width: 0;
    display: flex;
}

.banner-main__header {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.banner-main__text {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.banner-main__logo {
    width: 134px;
    height: 22px;
    color: var(--color-text-primary);
    transition: opacity var(--transition-base);
    flex-shrink: 0;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
}

.banner-main__logo:hover, .banner-main__logo:focus-visible {
    opacity: .85;
}

.banner-main__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.13;
}

.banner-main__description {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.banner-main__media {
    flex: 50%;
    min-width: 0;
    overflow: hidden;
}

/* Блок: Первый экран главной страницы. Ориентир: .widget-hero-main .banner-main__media. */
.widget-hero-main .banner-main__media {
    aspect-ratio: 57/35;
}

/* Блок: Главный баннер. Ориентир: .widget-banner-main  .banner-main__media. */
.widget-banner-main  .banner-main__media  {
    aspect-ratio: 136/125;
}

.banner-main__image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

/* Блок: Контентный блок главной страницы и карточки. Ориентир: .widget-content-main. */
.widget-content-main {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0;
}

.content-main {
    gap: var(--spacing-6);
    grid-template-columns:minmax(0, 1fr);
    display: grid;
}

.content-main__column {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.content-main__head {
    flex-direction: column;
    gap: 10px;
    display: flex;
}

.content-main__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.content-main__description {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.content-card {
    border-radius: var(--radius-xl);
    background: var(--color-bg-section);
    flex: 100%;
    align-items: center;
    gap: 16px;
    padding: 33px 8px;
    display: flex;
}

.content-card__arrow {
    color: var(--color-accent-soft);
    cursor: pointer;
    width: 24px;
    height: 24px;
    transition: color var(--transition-base), opacity var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.content-card__arrow.swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
    cursor: default;
}

.content-card__arrow:hover:not(.swiper-button-disabled), .content-card__arrow:focus-visible:not(.swiper-button-disabled) {
    color: var(--color-primary);
}

.content-card__arrow-icon {
    width: 24px;
    height: 24px;
}

.content-card__swiper {
    flex: auto;
    min-width: 0;
    overflow: hidden;
}

.content-card__swiper .swiper-wrapper {
    align-items: stretch;
}

.content-card__swiper .swiper-slide {
    height: auto;
    display: flex;
}

.content-card__slide {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: auto;
    display: flex;
}

.content-card__slide-media {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    aspect-ratio: 529/306;
    overflow: hidden;
}

.content-card__image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.content-card__slide-media  img {
    object-fit: cover;
}

.content-card__slide-text {
    flex-direction: column;
    gap: 8px;
    display: flex;
}

.content-card__slide-title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.content-card__slide-subtitle {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.content-card__slide-more {
    width: 100%;
    margin-top: auto;
}

/* Блок: Первый экран главной страницы. Ориентир: .widget-hero-main. */
.widget-hero-main {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0;
}

.hero-main {
    align-items: stretch;
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.hero-main__content {
    gap: var(--spacing-6);
    flex-direction: column;
    min-width: 0;
    display: flex;
}

.hero-main__header {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.hero-main__titles {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.hero-main__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.13;
}

.hero-main__subtitle {
    color: var(--color-text-soft);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.17;
}

.hero-main__description {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.hero-main__actions {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.hero-main__media {
    aspect-ratio: 330/203;
    border-radius: var(--radius-xl);
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.hero-main__image {
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-main__title, .hero-main__subtitle, .hero-main__description, .hero-main__actions, .hero-main__media {
    will-change: opacity, transform;
    animation: .7s cubic-bezier(.16, 1, .3, 1) both hero-fade-up;
}

.hero-main__title {
    animation-delay: 0s;
}

.hero-main__subtitle {
    animation-delay: .1s;
}

.hero-main__description {
    animation-delay: .25s;
}

.hero-main__actions {
    animation-delay: .4s;
}

.hero-main__media {
    animation-name: hero-fade-zoom;
    animation-delay: .15s;
}

/* Блок: Блок партнёров. Ориентир: .widget-partners. */
.widget-partners {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0;
}

.partners {
    gap: var(--spacing-5);
    flex-direction: column;
    display: flex;
}

.partners__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.18;
}

.partners__list {
    align-self: stretch;
    align-items: center;
    gap: var(--spacing-4);
    opacity: .66;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.partners__list::-webkit-scrollbar {
    display: none;
}

.partners__item {
    flex-shrink: 1;
    min-width: 0;
    height: 28px;
    color: var(--color-text-primary);
    transition: opacity var(--transition-base), transform var(--transition-base);
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    display: inline-flex;
}

.partners__item:hover {
    opacity: .7;
    transform: scale(1.04);
}

.partners__logo {
    -o-object-fit: contain;
    object-fit: contain;
    filter: grayscale();
    width: auto;
    max-width: 100%;
    height: 28px;
    transition: filter var(--transition-base);
    display: block;
}

.partners__item:hover .partners__logo {
    filter: grayscale(0);
}

/* Блок: Блок популярных материалов и карточки. Ориентир: .widget-populary. */
.widget-populary {
    padding: var(--spacing-6) 0;
    background: var(--color-bg-section);
}

.populary {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.populary__header {
    flex-direction: column;
    gap: 10px;
    max-width: 867px;
    display: flex;
}

.populary__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.18;
}

.populary__description {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.populary__slider {
    align-items: center;
    gap: 16px;
    display: flex;
    position: relative;
}

.populary__nav {
    color: var(--color-accent-soft);
    cursor: pointer;
    width: 24px;
    height: 24px;
    transition: color var(--transition-base), opacity var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.populary__nav.swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
    cursor: default;
}

.populary__nav:hover:not(.swiper-button-disabled), .populary__nav:focus-visible:not(.swiper-button-disabled) {
    color: var(--color-primary);
}

.populary__nav-icon {
    width: 24px;
    height: 24px;
}

.populary__swiper {
    flex: auto;
    min-width: 0;
    overflow: hidden;
}

.populary-card {
    box-sizing: border-box;
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    -webkit-user-select: none;
    user-select: none;
    flex-direction: column;
    gap: 10px;
    height: auto;
    min-height: 400px;
    padding: 16px;
    display: flex;
}

.populary-card__top {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 23px;
    display: flex;
}

/* Тег категории. Длинный список категорий обрезаем с многоточием,
   иначе он выдавливает кнопку избранного за пределы карточки. */
.populary-card__tag {
    color: var(--color-accent-soft);
    white-space: nowrap;
    background: var(--color-bg-input);
    border: 1px solid var(--color-accent-soft);
    border-radius: 16px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 8px 4px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: block;
}

.populary-card__media {
    border-radius: var(--radius-xl);
    aspect-ratio: 266/151;
    overflow: hidden;
}

.populary-card__image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.populary-card__body {
    flex-direction: column;
    gap: 4px;
    flex: 1;
    display: flex;
}

.populary-card__title {
    color: var(--color-text-primary);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: -webkit-box;
    overflow: hidden;
}

.populary-card__meta {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.populary-card__meta--instructor {
    color: var(--color-text-primary);
}

.populary-card__rating {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: auto;
    display: flex;
}

.populary-card__star {
    color: #fbc500;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.populary-card__rating-value {
    color: var(--color-text-primary);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

.populary-card__rating-count {
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

/* Блок: Блок статистики на главной. Ориентир: .stats-main__label. */
.stats-main__label {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.widget-stats-main {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0;
}

.stats-main__list {
    gap: var(--spacing-4);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.stats-main__item {
    gap: var(--spacing-0-25);
    border-left: 2px solid var(--color-border);
    flex-direction: column;
    padding: 0 0 0 24px;
    display: flex;
}

.stats-main__value {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.13;
}

.stats-main__label {
    margin: 0;
    line-height: 1.25rem;
}

/* Блок: Блок причин выбора и преимуществ. Ориентир: .widget-why-choose. */
.widget-why-choose {
    background: var(--color-bg-white);
    padding: var(--spacing-4) 0;
}

.why-choose__card {
    padding: var(--spacing-6) var(--spacing-4);
    background-color: var(--color-bg-accent);
    border-radius: var(--radius-xl);
    background-image: url(../images/why-choose-bg.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.why-choose__header {
    margin-bottom: var(--spacing-6);
}

.why-choose__title {
    align-items: center;
    gap: var(--spacing-3) var(--spacing-4);
    color: var(--color-text-accent);
    flex-wrap: wrap;
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
    display: flex;
}

.why-choose__title-text {
    display: inline-block;
}

.why-choose__logo {
    width: 134px;
    height: 22px;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.why-choose__list {
    gap: var(--spacing-4);
    grid-template-columns:minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
}

.why-choose__item {
    display: flex;
}

.why-choose__feature {
    gap: var(--spacing-2);
    width: 100%;
    padding-bottom: var(--spacing-2-25);
    background: var(--color-bg-accent);
    border-radius: var(--radius-xl);
    box-shadow: 0 0 16px var(--color-shadow-accent);
    border: 1.5px solid var(--color-text-inverse) 52;
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.why-choose__feature-media {
    border-radius: var(--radius-lg);
    flex-shrink: 0;
    width: 100%;
    overflow: hidden;
}

.why-choose__feature-image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.why-choose__feature-content {
    gap: var(--spacing-0-25);
    padding: 0 var(--spacing-4);
    text-align: center;
    flex-direction: column;
    display: flex;
}

.why-choose__feature-title {
    color: var(--color-text-accent);
    text-transform: uppercase;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.375rem;
}

.why-choose__feature-subtitle {
    color: var(--color-text-accent-soft);
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.why-choose__card, .why-choose__header, .why-choose__item {
    animation: 1.5s ease-out both why-fade;
}

.why-choose__card {
    animation-delay: 0s;
}

.why-choose__header {
    animation-delay: .3s;
}

.why-choose__item:first-child {
    animation-delay: .6s;
}

.why-choose__item:nth-child(2) {
    animation-delay: .8s;
}

.why-choose__item:nth-child(3) {
    animation-delay: 1s;
}

/* ======================================================================
   Календарь и события
   ====================================================================== */

/* Блок: Комментарии события. Ориентир: .calendar-comment. */
.calendar-comment {
    padding: var(--spacing-15) 0;
}

.calendar-comment__meta-bar {
    align-items: center;
    gap: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    flex-wrap: wrap;
    display: flex;
}

.calendar-comment__meta-item {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.calendar-comment__meta-icon {
    width: .875rem;
    height: .875rem;
    color: var(--color-border);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.calendar-comment__meta-icon svg {
    width: .875rem;
    height: .875rem;
}

.calendar-comment__header {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.calendar-comment__title-row {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.calendar-comment__title-block {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.calendar-comment__title {
    color: var(--color-primary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.calendar-comment__count {
    min-width: 2.25rem;
    height: 1.625rem;
    padding: 0 var(--spacing-2);
    background: var(--color-bg-section);
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.calendar-comment__author-avatar {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 2px;
    width: 1.25rem;
    height: 1rem;
    display: block;
}

.calendar-comment__tabs {
    flex-direction: column;
    display: flex;
    position: relative;
}

.calendar-comment__tabs-track {
    background: var(--color-border-light);
    height: 1.5px;
}

.calendar-comment__tabs-active {
    background: var(--color-primary);
    width: 10.375rem;
    height: 1.5px;
    position: absolute;
    top: 0;
    left: 0;
}

.calendar-comment__actions-row {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-6);
    margin-top: var(--spacing-2);
    display: flex;
}

.calendar-comment__write {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.calendar-comment__write:hover, .calendar-comment__write:focus-visible {
    background: var(--color-primary-hover);
}

.calendar-comment__bell {
    width: 2.125rem;
    height: 2.125rem;
    padding: var(--spacing-0-25);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.calendar-comment__bell:hover, .calendar-comment__bell:focus-visible {
    background: var(--color-primary-hover);
}

.calendar-comment__bell-icon {
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
}

.calendar-comment__bell-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-inverse);
}

.calendar-comment__list {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.calendar-comment__item {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.calendar-comment__item.is-featured {
    gap: var(--spacing-6);
}

.calendar-comment__item-body {
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    display: flex;
}

.calendar-comment__votes {
    align-items: center;
    gap: var(--spacing-1);
    flex-direction: column;
    flex-shrink: 0;
    width: .75rem;
    display: flex;
}

.calendar-comment__vote-up, .calendar-comment__vote-down {
    width: .875rem;
    height: .5rem;
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.calendar-comment__vote-up svg, .calendar-comment__vote-down svg {
    width: .875rem;
    height: .5rem;
}

.calendar-comment__vote-up:hover, .calendar-comment__vote-up:focus-visible, .calendar-comment__vote-down:hover, .calendar-comment__vote-down:focus-visible {
    opacity: .7;
}

.calendar-comment__vote-count {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.calendar-comment__content {
    gap: var(--spacing-2);
    flex-direction: column;
    flex: auto;
    min-width: 0;
    display: flex;
}

.calendar-comment__author-row {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.calendar-comment__avatar {
    background: var(--color-bg-white);
    border-radius: 50%;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: block;
}

.calendar-comment__author-meta {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.calendar-comment__author {
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.calendar-comment__author-sub {
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.calendar-comment__time {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.calendar-comment__edit {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.calendar-comment__edit-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-primary);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.calendar-comment__edit-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.calendar-comment__edit-link {
    color: var(--color-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    text-decoration: none;
}

.calendar-comment__edit-link:hover, .calendar-comment__edit-link:focus-visible {
    text-decoration: underline;
}

.calendar-comment__text {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.calendar-comment__actions {
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.calendar-comment__reply {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.calendar-comment__reply:hover, .calendar-comment__reply:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.calendar-comment__action {
    width: 2.125rem;
    height: 2.125rem;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.calendar-comment__action svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

.calendar-comment__action:hover, .calendar-comment__action:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.calendar-comment__reply-card {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.calendar-comment__reply-context {
    align-items: center;
    gap: var(--spacing-1);
    padding: 0 var(--spacing-6);
    color: var(--color-text-caption);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    display: inline-flex;
}

.calendar-comment__reply-prefix {
    color: var(--color-text-caption);
}

.calendar-comment__reply-target {
    color: var(--color-text-primary);
    font-weight: 600;
}

.calendar-comment__pagination {
    align-items: center;
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.calendar-comment__pages {
    align-items: center;
    gap: var(--spacing-1-25);
    display: flex;
}

.calendar-comment__page-arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-accent-soft);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.calendar-comment__page-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

.calendar-comment__page-arrow:hover, .calendar-comment__page-arrow:focus-visible {
    color: #6e87ac;
}

.calendar-comment__page {
    width: 2.375rem;
    height: 2.375rem;
    padding: var(--spacing-0-75);
    color: var(--color-accent-soft);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.375rem;
    display: inline-flex;
}

.calendar-comment__page.is-active {
    color: #6e87ac;
    background: #eff5fc;
    border-radius: 40px;
    font-weight: 800;
}

.calendar-comment__page:hover:not(.is-active), .calendar-comment__page:focus-visible:not(.is-active) {
    color: #6e87ac;
}

.calendar-comment__counter {
    color: var(--color-border);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

/* Блок: Шапка страницы события. Ориентир: .calendar-header. */
.calendar-header {
    padding: var(--spacing-5-5) 0 var(--spacing-15);
}

.calendar-header__top {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.calendar-header__breadcrumbs {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.calendar-header__crumb {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    text-decoration: none;
}

.calendar-header__crumb:hover, .calendar-header__crumb:focus-visible {
    color: var(--color-primary);
}

.calendar-header__crumb--current {
    color: var(--color-text-primary);
    text-underline-offset: 2px;
    text-decoration: underline;
}

.calendar-header__crumb-sep {
    color: var(--color-text-secondary);
    -webkit-user-select: none;
    user-select: none;
}

.calendar-header__content {
    align-items: flex-start;
    gap: var(--spacing-5-5);
    flex-wrap: wrap;
    display: flex;
}

.calendar-header__main {
    gap: var(--spacing-1-25);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.calendar-header__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.calendar-header__desc {
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    flex-direction: column;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: flex;
}

.calendar-header__paragraph {
    margin: 0;
}

.calendar-header__details {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    flex-direction: column;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: flex;
}

.calendar-header__detail {
    margin: 0;
}

.calendar-header__detail-key {
    color: var(--color-text-caption);
}

.calendar-header__detail-value {
    color: var(--color-text-secondary);
}

.calendar-header__detail-link {
    color: var(--color-primary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.calendar-header__detail-link:hover, .calendar-header__detail-link:focus-visible {
    color: var(--color-primary-hover);
}

.calendar-header__share {
    gap: var(--spacing-4);
    max-width: 100%;
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-card-soft);
    border-radius: 24px;
    flex-direction: column;
    flex: 0 0 22rem;
    display: flex;
    position: relative;
}

.calendar-header__share-bookmark {
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 1;
    width: 24px;
    height: 24px;
    color: var(--color-accent-soft);
    transition: color var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
}

.calendar-header__share-bookmark svg {
    width: 24px;
    height: 24px;
}

/* «В избранном» — как у .experts-card__fav (класс text-success ставит favorites.js) */
.calendar-header__share-bookmark:active svg,
.calendar-header__share-bookmark.is-active svg,
.calendar-header__share-bookmark.text-success svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

.calendar-header__share-img {
    aspect-ratio: 304/176;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 24px;
    width: 100%;
    height: auto;
    display: block;
}

.calendar-header__share-body {
    align-items: center;
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.calendar-header__share-label {
    color: var(--color-text-secondary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.calendar-header__share-list {
    justify-content: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.calendar-header__share-btn {
    background: var(--color-bg-white);
    color: #4e4e4e;
    width: 2.75rem;
    height: 2.75rem;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border: 2px solid #e4e4e7;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.calendar-header__share-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

.calendar-header__share-btn:hover, .calendar-header__share-btn:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Блок: Связанные материалы события. Ориентир: .calendar-relate. */
.calendar-relate {
    padding: var(--spacing-15) 0;
}

.calendar-relate__inner {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.calendar-relate__header {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.calendar-relate__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.calendar-relate__subtitle {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.calendar-relate__row {
    gap: var(--spacing-4);
    grid-template-columns:repeat(4, 1fr);
    display: grid;
}

.calendar-relate__card {
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.calendar-relate__card-top {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.calendar-relate__tags {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.calendar-relate__chip {
    padding: var(--spacing-0-25) var(--spacing-2);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: 16px;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.calendar-relate__fav {
    width: 1.3125rem;
    height: 1.125rem;
    color: var(--color-border);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.calendar-relate__fav svg {
    width: 1.3125rem;
    height: 1.125rem;
}

.is-rated .calendar-relate__fav, .calendar-relate__fav:hover, .calendar-relate__fav:focus-visible {
    color: var(--color-primary);
}

.calendar-relate__media {
    background: var(--color-bg-white);
    border-radius: 24px;
    overflow: hidden;
}

.calendar-relate__image {
    aspect-ratio: 230/133;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

.calendar-relate__text {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.calendar-relate__name {
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    overflow: hidden;
}

.calendar-relate__category, .calendar-relate__instructor {
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    overflow: hidden;
}

.calendar-relate__category span:last-child, .calendar-relate__instructor span:last-child {
    font-weight: 600;
}

.calendar-relate__meta {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: flex;
}

.calendar-relate__rating {
    align-items: center;
    gap: var(--spacing-1);
    display: inline-flex;
}

.calendar-relate__star {
    width: 1rem;
    height: 1rem;
    color: var(--color-border);
}

.is-rated .calendar-relate__star {
    color: var(--color-star);
}

.calendar-relate__btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    margin-top: var(--spacing-6);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.calendar-relate__btn:hover, .calendar-relate__btn:focus-visible {
    background: var(--color-primary-hover);
}

/* Блок: Тарифы события. Ориентир: .calendar-tarif. */
.calendar-tarif {
    padding: var(--spacing-5-5) 0 var(--spacing-15);
}

.calendar-tarif__title {
    margin: 0 0 var(--spacing-6);
    color: var(--color-text-primary);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.calendar-tarif__list {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.calendar-tarif__card {
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    transition: border-color var(--transition-base);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.calendar-tarif__card.is-expanded {
    border-color: #6e87ac;
}

.calendar-tarif__head {
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    padding: var(--spacing-3) var(--spacing-6);
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-base);
    background: 0 0;
    border: none;
    flex-wrap: wrap;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
    display: flex;
}

.calendar-tarif__name {
    text-align: left;
    flex: auto;
    min-width: 0;
}

.calendar-tarif__price-block {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    margin-left: auto;
    display: inline-flex;
}

.calendar-tarif__discount-badge {
    height: 1.125rem;
    padding: 0 var(--spacing-2);
    color: var(--color-text-inverse);
    background: #43ac6a;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 800;
    line-height: 1.125rem;
    display: inline-flex;
}

.calendar-tarif__old-price {
    color: var(--color-text-caption);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    text-decoration: line-through;
}

.calendar-tarif__price {
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
}

.calendar-tarif__arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-border);
    transition: transform var(--transition-base);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.calendar-tarif__arrow svg {
    width: 1.25rem;
    height: .625rem;
}

.is-expanded .calendar-tarif__arrow {
    color: #6e87ac;
    transform: rotate(180deg);
}

.calendar-tarif__body {
    gap: var(--spacing-4);
    padding: 0 var(--spacing-6) var(--spacing-4);
    flex-direction: column;
    display: none;
}

.is-expanded .calendar-tarif__body {
    display: flex;
}

.calendar-tarif__features {
    gap: var(--spacing-2);
    color: #0f172a;
    flex-direction: column;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
    display: flex;
}

.calendar-tarif__feature {
    margin: 0;
}

.calendar-tarif__expiry {
    color: var(--color-text-caption);
    margin: 0;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
}

.calendar-tarif__pay {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 40px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.calendar-tarif__pay:hover, .calendar-tarif__pay:focus-visible {
    background: var(--color-primary-hover);
}

/* Блок: Список событий календаря. Ориентир: .calendars-list__field. */
.calendars-list__field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

.calendars-list__field-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.calendars-list__control {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.calendars-list__control:hover, .calendars-list__control:focus-within {
    border-color: var(--color-primary);
}

.calendars-list__input {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.calendars-list__input::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.calendars-list__input {
    font-size: .875rem;
    line-height: 1.125rem;
}

.widget-calendars-list {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0 var(--spacing-10);
}

.calendars-list {
    gap: var(--spacing-5);
    flex-direction: column;
    display: flex;
}

.calendars-list__head {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.calendars-list__breadcrumbs {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-primary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.calendars-list__breadcrumb {
    color: var(--color-text-primary);
    transition: color var(--transition-base);
    text-decoration: none;
}

.calendars-list__breadcrumb:hover, .calendars-list__breadcrumb:focus-visible {
    color: var(--color-primary);
}

.calendars-list__breadcrumb-sep {
    color: var(--color-text-muted);
}

.calendars-list__breadcrumb-current {
    color: var(--color-text-primary);
}

.calendars-list__actions {
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    text-align: center;
    white-space: nowrap;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.calendars-list__actions:hover, .calendars-list__actions:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.calendars-list__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.18;
}

.calendars-list__filter {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border-radius: var(--radius-xl);
    flex-direction: column;
    display: flex;
}

.calendars-list__filter-toggle {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    color: var(--color-text-primary);
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: flex;
}

.calendars-list__filter-body, .calendars-list__filter-row {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.calendars-list__field {
    gap: var(--spacing-1);
    flex: 1 1 0;
    min-width: 0;
}

.calendars-list__range {
    align-items: stretch;
    display: flex;
}

.calendars-list__range-item {
    align-items: center;
    gap: var(--spacing-4);
    min-width: 0;
    min-height: 44px;
    padding: var(--spacing-1-25) var(--spacing-4);
    transition: border-color var(--transition-base);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: 0;
    flex: 1 1 0;
    display: flex;
}

.calendars-list__range-item:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.calendars-list__range-item:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.calendars-list__range-item + .calendars-list__range-item {
    margin-left: -1.5px;
}

.calendars-list__range-item:focus-within {
    border-color: var(--color-primary);
    z-index: 1;
}

.calendars-list__range-prefix {
    color: var(--color-text-soft);
    letter-spacing: .01em;
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.calendars-list__filter-buttons {
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.calendars-list__btn {
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    white-space: nowrap;
    border-radius: var(--radius-full);
    cursor: pointer;
    min-height: 34px;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
    border: 1.5px solid #0000;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.calendars-list__btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.calendars-list__btn--primary:hover, .calendars-list__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.calendars-list__btn--outlined {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: 0 0;
}

.calendars-list__btn--outlined:hover, .calendars-list__btn--outlined:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.calendars-list__view-toggle {
    align-items: center;
    gap: var(--spacing-2);
    align-self: flex-end;
    display: inline-flex;
}

.calendars-list__view {
    background: var(--color-bg-section);
    width: 32px;
    height: 32px;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: color var(--transition-base);
    border: none;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.calendars-list__view svg {
    width: 16px;
    height: 16px;
}

.calendars-list__view.is-active {
    color: var(--color-primary);
}

.calendars-list__view:hover:not(.is-active) {
    color: var(--color-text-primary);
}

.calendars-list__layout {
    gap: var(--spacing-5);
    grid-template-columns:1fr;
    display: grid;
}

.calendars-list__main {
    gap: var(--spacing-5);
    flex-direction: column;
    display: flex;
}

.calendars-list__more {
    margin-top: var(--spacing-4);
    justify-content: center;
    display: flex;
}

/* Блок: Группировка событий по дням. Ориентир: .calendars-day. */
.calendars-day {
    gap: var(--spacing-3);
    flex-direction: column;
    display: flex;
}

.calendars-day__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.calendars-day__list {
    gap: var(--spacing-3);
    grid-template-columns:1fr;
    display: grid;
}

/* Блок: Элемент события в календаре. Ориентир: .calendars-event. */
.calendars-event {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-bg-section);
    transition: box-shadow var(--transition-base);
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.calendars-event:hover {
    box-shadow: 0 4px 12px var(--color-shadow);
}

.calendars-event__media {
    aspect-ratio: 200/113;
    background: linear-gradient(135deg, #1a1f3a 0%, #0a0d1f 100%);
    position: relative;
    overflow: hidden;
}

.calendars-event__badge {
    top: var(--spacing-2);
    right: var(--spacing-2);
    z-index: 1;
    padding: var(--spacing-1) var(--spacing-1-25);
    color: var(--color-text-inverse);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    background: #ee5050;
    font-size: .6875rem;
    font-weight: 800;
    line-height: .875rem;
    position: absolute;
}

.calendars-event__image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.calendars-event__body {
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    flex-direction: column;
    display: flex;
}

.calendars-event__title {
    color: var(--color-text-primary);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: -webkit-box;
    overflow: hidden;
}

.calendars-event__meta {
    gap: var(--spacing-0-25);
    flex-direction: column;
    margin: 0;
    display: flex;
}

.calendars-event__meta-row {
    align-items: baseline;
    gap: var(--spacing-0-75);
    color: var(--color-text-primary);
    font-size: .875rem;
    line-height: 1.125rem;
    display: flex;
}

.calendars-event__meta-label {
    color: var(--color-text-muted);
    flex-shrink: 0;
    font-weight: 500;
}

.calendars-event__meta-value {
    font-weight: 500;
}

.calendars-event__footer {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-1);
    display: flex;
}

.calendars-event__comments {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-text-muted);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.calendars-event__comments .svg-comment {
    width: 16px;
    height: 16px;
}

.calendars-event__fav {
    cursor: pointer;
    width: 24px;
    height: 24px;
    transition: transform var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.calendars-event__fav:hover, .calendars-event__fav:focus-visible {
    transform: scale(1.1);
}

.calendars-event__fav .svg-heart {
    color: #cadbf2;
    width: 21px;
    height: 18px;
    stroke: var(--color-primary);
}

.calendars-event__fav[aria-pressed=true] .svg-heart {
    color: var(--color-primary);
}

/* Блок: Виджет календаря. Ориентир: .calendars-widget. */
.calendars-widget {
    padding: var(--spacing-4);
    background: var(--color-bg-section);
    border-radius: var(--radius-xl);
}

.calendars-widget__head {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    display: flex;
}

.calendars-widget__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.calendars-widget__nav {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    cursor: pointer;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.calendars-widget__nav:hover, .calendars-widget__nav:focus-visible {
    opacity: .7;
}

.calendars-widget__nav .svg-arrow-left, .calendars-widget__nav .svg-arrow-right {
    width: 20px;
    height: 20px;
}

.calendars-widget__weekdays {
    gap: var(--spacing-0-25);
    margin-bottom: var(--spacing-1);
    grid-template-columns:repeat(7, 1fr);
    display: grid;
}

.calendars-widget__weekday {
    aspect-ratio: 1;
    color: var(--color-text-muted);
    text-transform: lowercase;
    justify-content: center;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: flex;
}

.calendars-widget__grid {
    gap: var(--spacing-0-25);
    grid-template-columns:repeat(7, 1fr);
    display: grid;
}

.calendars-widget__day {
    aspect-ratio: 1;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.calendars-widget__day:hover {
    background: var(--color-primary) 14;
}

.calendars-widget__day.is-active {
    background: var(--color-fav);
    color: var(--color-primary);
    font-weight: 700;
}

.calendars-widget__day--accent {
    color: #ee5050;
}

.calendars-widget__day--empty {
    cursor: default;
}

.calendars-widget__day--empty:hover {
    background: 0 0;
}

/* Блок: Верхний блок календаря. Ориентир: .calendars-top. */
.calendars-top {
    gap: var(--spacing-3);
    flex-direction: column;
    display: flex;
}

.calendars-top__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.calendars-top__list {
    gap: var(--spacing-3);
    flex-direction: column;
    display: flex;
}

.calendars-top__item {
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-bg-white);
    border: 1px solid var(--color-bg-section);
    border-radius: var(--radius-md);
    flex-direction: column;
    display: flex;
}

.calendars-top__media {
    aspect-ratio: 280/100;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #1a1f3a 0%, #0a0d1f 100%);
    overflow: hidden;
}

.calendars-top__media img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.calendars-top__name {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.calendars-top__meta {
    gap: var(--spacing-0-25);
    color: var(--color-text-muted);
    flex-direction: column;
    margin: 0;
    font-size: .75rem;
    line-height: 1rem;
    display: flex;
}

.calendars-top__meta-row {
    gap: var(--spacing-1);
    display: flex;
}

.calendars-top__meta-row dt {
    font-weight: 500;
}

.calendars-top__meta-row dd {
    color: var(--color-text-primary);
    margin: 0;
    font-weight: 500;
}

/* Блок: Виджет экспертов и его карточки. Ориентир: .experts-card__date .svg-calendar. */
.experts-card__date .svg-calendar, .experts-card__views .svg-eye {
    color: #a3b8d6;
    width: 16px;
    height: 16px;
}

/* Блок: Сетка событий и карточки. Ориентир: .events_list. */
.events_list {
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.events_list > .events_card + .events_card {
    margin-top: 0;
}

.events_card {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    flex-direction: column;
    gap: var(--spacing-4);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    display: flex;
    height: 100%;
    overflow: hidden;
}

.events_card:hover {
    border-color: var(--color-border);
    box-shadow: 0 4px 20px var(--color-shadow);
}

/* Photo / image area */

.events_card__photo {
    width: 100%;
    height: 9rem;
    border-radius: var(--radius-xl);
    overflow: hidden;
    flex-shrink: 0;
}

/* Блок: Содержимое календаря: сетка и заголовки дат. Ориентир: .calendar-content .events_list.__grid-2 .events_card__photo. */
.calendar-content .events_list.__grid-2 .events_card__photo {
    height: 230px;
}

.calendar-content .events_list.__grid-1 .events_card {
    flex-direction: row;
}

.calendar-content .events_list.__grid-1 .events_card__photo {
    flex: 0 0 200px;
    aspect-ratio: 177/106;
}

.calendar-content .events_list.__grid-1 .events_card__footer {
    flex: 0 0 220px;
    flex-direction: column-reverse;
    height: 100%;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0;
}

.calendar-content .events_list.__grid-1 .events_card__stats {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

/* Блок: Сетка событий и карточки. Ориентир: .events_card__photo > a. */
.events_card__photo > a {
    width: 100%;
    height: 100%;
    display: block;
}

.events_card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body (title + desc + meta) */

.events_card__body {
    flex-direction: column;
    gap: var(--spacing-3);
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

/* Title */

.events_card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--color-text-primary);
}

.events_card__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.events_card__title a:hover,
.events_card__title a:focus-visible {
    color: var(--color-primary);
}

/* Description */

.events_card__desc {
    color: var(--color-text-primary);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    display: -webkit-box;
    overflow: hidden;
}

/* Meta grid (calendar + place rows) */

.events_card__meta {
    flex-direction: column;
    gap: var(--spacing-2);
    display: flex;
}

.events_card__meta-item {
    color: var(--color-text-secondary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.events_card__meta-item span {
    font-weight: 700;
}

.events_card__meta-item .title_top,
.events_card__meta-item .title_left {
    color: var(--color-text-caption);
    font-weight: 500;
    float: none;
    margin: 0;
    font-size: .8125rem;
    line-height: 1.125rem;
}

.events_card__meta-item .value {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    word-break: break-word;
}

/* Footer */

.events_card__footer {
    justify-content: space-between;
    padding-top: var(--spacing-3);
    display: flex;
    margin-top: auto;
}

.events_card__stats {
    flex-direction: column;
    gap: var(--spacing-1);
    display: flex;
}

.events_card__stat-row {
    align-items: center;
    display: flex;
}

.events_card__stat {
    align-items: center;
    gap: 6px;
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.events_card__stat-icon {
    color: var(--color-border);
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
}

.events_card__stat-icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.events_card__stat.bi_comments .events_card__stat-icon {
    /*color: var(--color-star);*/
}

.events_card__fav {
    width: 1.5rem;
    height: 1.375rem;
    padding: 0;
    background: 0 0;
    border: none;
    color: var(--color-fav);
    cursor: pointer;
    transition: color var(--transition-base), transform var(--transition-base);
    display: inline-flex;
}

.events_card__fav svg {
    width: 1.5rem;
    height: 1.375rem;
}

.events_card__fav:hover,
.events_card__fav:focus-visible {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Блок: Фон страницы событий. */
body.events {
    background: var(--color-bg-card-soft);
}

/* Блок: Фильтр календаря и выбор даты. Ориентир: .fcalendar. */
.fcalendar {
    padding: 16px 24px;
    background: #ECF3FB;
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    gap: 25px;
}

.fcalendar .sidebar {
    flex: 0 0 220px;
}

.fcalendar--block {
    display: flex;
    gap: 25px;
    flex-direction: column;
}

.fcalendar--date {
    color: #434343;
    font-family: Manrope;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 15px;
}

.fcalendar .events_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Блок: Двухколоночная оболочка календаря. Ориентир: .calendar-wrapper. */
.calendar-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-gap: 25px;
    padding: 15px 25px;
    border-radius: 16px;
    background-color: #ECF3FB;
}

/* Блок: Содержимое календаря: сетка и заголовки дат. Ориентир: .calendar-content .events_list. */
.calendar-content .events_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-content .events_list.__grid-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.calendar-content .events_list.__grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calendar-content .date-title {
    color: #434343;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 1rem;
}

.calendar-content .events_list + .date-title {
    margin-top: 25px;
}

/* Блок: Верхний блок календаря. Ориентир: .calndar-top__box .events_list. */
.calndar-top__box .events_list {
    grid-template-columns: 1fr;
}

.calenrat-top__title {
    display: flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 24px;
    background: #FFF;
    margin-bottom: 10px;
    color: #434343;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

/* ======================================================================
   Контакты
   ====================================================================== */

/* Блок: Контактный блок учётной записи. Ориентир: .widget-contact-account. */
.widget-contact-account {
    background: var(--color-bg-card-soft);
    padding: var(--spacing-6) 0;
}

.contact-account {
    align-items: center;
    min-height: 160px;
    display: flex;
}

.contact-account__text {
    width: 100%;
    color: var(--color-text-secondary);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.contact-account__text p {
    margin: 0;
}

.contact-account__text p + p {
    margin-top: var(--spacing-1);
}

.contact-account__company, .contact-account strong {
    font-weight: 700;
}

/* Блок: Форма обратной связи. Ориентир: .contact-form__field. */
.contact-form__field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

.contact-form__label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.contact-form__control, .contact-form__control--textarea {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.contact-form__control:hover, .contact-form__control--textarea:hover, .contact-form__control:focus-within, .contact-form__control--textarea:focus-within {
    border-color: var(--color-primary);
}

.contact-form__control--textarea {
    align-items: flex-start;
}

.contact-form__input {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.contact-form__input::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.contact-form__checkbox {
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    position: absolute;
}

.contact-form__checkbox-mark {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    width: 1.125rem;
    height: 1.125rem;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
}

.contact-form__checkbox-mark:after {
    content: "";
    top: var(--spacing-0-25);
    left: var(--spacing-0-75);
    border: solid var(--color-bg-white);
    opacity: 0;
    width: .25rem;
    height: .5rem;
    transition: opacity var(--transition-base);
    border-width: 0 1.5px 1.5px 0;
    position: absolute;
    transform: rotate(45deg);
}

.contact-form__consent {
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    display: flex;
}

.contact-form__consent-text {
    color: var(--color-text-secondary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.contact-form__consent-link {
    color: var(--color-text-secondary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.contact-form__consent-link:hover, .contact-form__consent-link:focus-visible {
    color: var(--color-primary);
}

.contact-form__submit {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    white-space: nowrap;
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.contact-form__submit:hover, .contact-form__submit:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.contact-form__fields {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.contact-form__stack {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.widget-contact-form {
    background: var(--color-bg-white);
    padding: var(--spacing-8) 0;
}

.contact-form {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.contact-form__media {
    aspect-ratio: 499/375;
    width: 100%;
    max-width: 499px;
    margin: 0 auto;
    position: relative;
}

.contact-form__shape {
    background: var(--color-bg-section);
    position: absolute;
}

.contact-form__shape--main {
    border-radius: 8%;
    width: 66.3%;
    height: 88.3%;
    top: 11.7%;
    left: 14.2%;
}

.contact-form__shape--top {
    border-radius: 16px;
    width: 11%;
    height: 12.8%;
    top: 0;
    left: 0;
}

.contact-form__shape--bottom {
    border-radius: 24px;
    width: 14.6%;
    height: 17.3%;
    bottom: 0;
    right: 0;
}

.contact-form__image {
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
    width: 50.5%;
    height: 96.5%;
    position: absolute;
    top: 3.5%;
    left: 22.2%;
}

.contact-form__brand {
    z-index: 2;
    width: 27%;
    height: 5.9%;
    position: absolute;
    top: 3.5%;
    left: 3.6%;
}

.contact-form__brand img {
    width: 100%;
    height: 100%;
    display: block;
}

.contact-form__body {
    flex: 1 1 0;
    min-width: 0;
}

.contact-form__title {
    margin: 0 0 var(--spacing-4);
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.contact-form__checkbox:checked + .contact-form__checkbox__checkbox-mark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.contact-form__checkbox:checked + .contact-form__checkbox__checkbox-mark:after {
    opacity: 1;
}

.contact-form__checkbox:focus-visible + .contact-form__checkbox__checkbox-mark {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Блок: Контактная информация. Ориентир: .widget-contact-info. */
.widget-contact-info {
    background: var(--color-bg-card-soft);
    padding: var(--spacing-6) 0 var(--spacing-8);
}

.contact-info {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.contact-info__breadcrumbs {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.contact-info__breadcrumb {
    color: var(--color-text-secondary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.contact-info__breadcrumb:hover, .contact-info__breadcrumb:focus-visible {
    color: var(--color-primary);
}

.contact-info__breadcrumb-sep, .contact-info__breadcrumb-current {
    color: var(--color-text-secondary);
}

.contact-info__layout {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.contact-info__main {
    gap: var(--spacing-6);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.contact-info__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.contact-info__section {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.contact-info__subtitle {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.contact-info__contacts {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.contact-info__contact {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.contact-info__line {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3125rem;
}

.contact-info__link {
    color: var(--color-text-secondary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.contact-info__link:hover, .contact-info__link:focus-visible {
    color: var(--color-primary);
}

.contact-info__hours {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.contact-info__socials {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.contact-info__social-list {
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.contact-info__social {
    width: 44px;
    height: 44px;
    padding: var(--spacing-1-25);
    background: var(--color-bg-white);
    color: #4e4e4e;
    transition: background-color var(--transition-base), color var(--transition-base);
    border: 1.5px solid #4e4e4e;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
}

.contact-info__social svg {
    width: 22px;
    height: 22px;
    display: block;
}

.contact-info__social:hover, .contact-info__social:focus-visible {
    color: var(--color-bg-white);
    background: #4e4e4e;
}

.contact-info__media {
    aspect-ratio: 416/213;
    flex-shrink: 0;
    align-self: center;
    width: 100%;
    position: relative;
}

.contact-info__image {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 24px;
    width: 82.4%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.contact-info__crop {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 24px;
    position: absolute;
}

.contact-info__crop--big {
    border-radius: 24px;
    width: 21.4%;
    height: 33.8%;
    top: 16%;
    left: 6.7%;
}

.contact-info__crop--small {
    border-radius: 11px;
    width: 8.7%;
    height: 12.2%;
    top: 79.8%;
    left: 0;
}

.contact-info__shape {
    background: var(--color-bg-card-soft);
    position: absolute;
}

.contact-info__shape--big {
    border-radius: 24px;
    width: 24.8%;
    height: 40.4%;
    top: 12.7%;
    left: 5%;
}

.contact-info__shape--small {
    border-radius: 13px;
    width: 10.6%;
    height: 16%;
    top: 81.2%;
    left: 21.4%;
}

/* ======================================================================
   Курсы и цены
   ====================================================================== */

/* Блок: Форма обратной связи по курсу. Ориентир: .course-callback__field. */
.course-callback__field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

.course-callback__label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.course-callback__control, .course-callback__control--textarea {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.course-callback__control:hover, .course-callback__control--textarea:hover, .course-callback__control:focus-within, .course-callback__control--textarea:focus-within {
    border-color: var(--color-primary);
}

.course-callback__control--textarea {
    align-items: flex-start;
}

.course-callback__input {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.course-callback__input::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.course-callback__check {
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    position: absolute;
}

.course-callback__check-mark {
    background: var(--color-bg-white);
    border: 1.5px solid var(--color-border);
    width: 1.125rem;
    height: 1.125rem;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
}

.course-callback__check-mark:after {
    content: "";
    top: var(--spacing-0-25);
    left: var(--spacing-0-75);
    border: solid var(--color-bg-white);
    opacity: 0;
    width: .25rem;
    height: .5rem;
    transition: opacity var(--transition-base);
    border-width: 0 1.5px 1.5px 0;
    position: absolute;
    transform: rotate(45deg);
}

.course-callback__consent {
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    display: flex;
}

.course-callback__consent-text {
    color: var(--color-text-secondary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.course-callback__consent-link {
    color: var(--color-text-secondary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.course-callback__consent-link:hover, .course-callback__consent-link:focus-visible {
    color: var(--color-primary);
}

.course-callback__submit {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    white-space: nowrap;
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.course-callback__submit:hover, .course-callback__submit:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.course-callback__fields {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.widget-course-callback {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0;
}

.course-callback {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.course-callback__media {
    aspect-ratio: 499/375;
    width: 100%;
    max-width: 499px;
    margin: 0 auto;
    position: relative;
}

.course-callback__shape {
    background: var(--color-bg-section);
    position: absolute;
}

.course-callback__shape--main {
    border-radius: 8%;
    width: 66.3%;
    height: 88.3%;
    top: 11.7%;
    left: 14.2%;
}

.course-callback__shape--top {
    border-radius: 16px;
    width: 11%;
    height: 12.8%;
    top: 0;
    left: 0;
}

.course-callback__shape--bottom {
    border-radius: 24px;
    width: 14.6%;
    height: 17.3%;
    bottom: 0;
    right: 0;
}

.course-callback__image {
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
    /*
    width: 50.5%;
    height: 96.5%;
    position: absolute;
    top: 3.5%;
    left: 22.2%;
    */
}

.course-callback__brand {
    z-index: 2;
    width: 27%;
    height: 5.9%;
    position: absolute;
    top: 3.5%;
    left: 3.6%;
}

.course-callback__brand img {
    width: 100%;
    height: 100%;
    display: block;
}

.course-callback__body {
    flex: 1 1 0;
    min-width: 0;
}

.course-callback__body form .hint {display:none!important;}

.course-callback__body form .form-tabs {margin-bottom:15px;}

.course-callback__body form textarea{
    min-height: 2.75rem;height: 100%;}

.course-callback__title {
    margin: 0 0 var(--spacing-4);
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.course-callback__check:checked + .course-callback__check__check-mark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.course-callback__check:checked + .course-callback__check__check-mark:after {
    opacity: 1;
}

.course-callback__check:focus-visible + .course-callback__check__check-mark {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Блок: Комментарии и отзывы курса. Ориентир: .widget-course-comment. */
.widget-course-comment {
    background: var(--color-bg-white);
    padding: var(--spacing-8) 0 var(--spacing-10);
}

.course-comment {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.course-comment__promo {
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.course-comment__promo-logo {
    align-items: center;
    height: 1.75rem;
    display: flex;
}

.course-comment__promo-logo img {
    width: auto;
    height: 100%;
    display: block;
}

.course-comment__promo-btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.course-comment__promo-btn:hover, .course-comment__promo-btn:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.course-comment__meta {
    align-items: center;
    gap: var(--spacing-6);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    flex-wrap: wrap;
    display: flex;
}

.course-comment__meta-vote {
    align-items: center;
    gap: var(--spacing-1);
    display: inline-flex;
}

.course-comment__vote {
    cursor: pointer;
    width: 1.125rem;
    height: 1.125rem;
    transition: transform var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.course-comment__vote svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-caption);
}

.course-comment__vote:hover, .course-comment__vote:focus-visible {
    transform: scale(1.1);
}

.course-comment__vote--dislike svg {
    transform: rotate(180deg);
}

.course-comment__vote--dislike:hover svg, .course-comment__vote--dislike:focus-visible svg {
    transform: rotate(180deg) scale(1.1);
}

.course-comment__vote-sep {
    color: var(--color-text-caption);
    letter-spacing: .01em;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

.course-comment__meta-stat, .course-comment__meta-fav, .course-comment__meta-author {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.course-comment__meta-stat svg, .course-comment__meta-fav svg, .course-comment__meta-author svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-caption);
}

.course-comment__rating {
    gap: var(--spacing-2);
    grid-template-columns:1fr;
    display: grid;
}

.course-comment__rating-item {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-2) var(--spacing-5);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    display: flex;
}

.course-comment__rating-label {
    color: var(--color-text-primary);
    flex: 1 1 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.course-comment__rating-value {
    color: var(--color-text-primary);
    letter-spacing: .01em;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.course-comment__rating-star {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.course-comment__rating-star svg {
    color: #c8c8c8;
    width: 1.3125rem;
    height: 1.3125rem;
}

.course-comment__tabs {
    align-items: center;
    gap: var(--spacing-10);
    display: flex;
    position: relative;
}

.course-comment__tab {
    color: var(--color-text-primary);
    letter-spacing: .01em;
    cursor: pointer;
    font-size: 1.0625rem;
    line-height: 1.3125rem;
}

.course-comment__tab--active {
    color: var(--color-primary);
    font-weight: 500;
}

.course-comment__tab-underline {
    background: var(--color-border-light);
    height: 1.5px;
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
}

.course-comment__tab-underline-active {
    background: var(--color-primary);
    width: 5.25rem;
    height: 1.5px;
    position: absolute;
    bottom: -2px;
    left: 0;
}

.course-comment__actions {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    display: flex;
}

.course-comment__actions-right {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.course-comment__bell {
    width: 2.125rem;
    height: 2.125rem;
    padding: var(--spacing-0-25);
    background: var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.course-comment__bell svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-inverse);
}

.course-comment__bell:hover, .course-comment__bell:focus-visible {
    background: var(--color-primary-hover);
}

.course-comment__btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.course-comment__btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-primary);
}

.course-comment__btn--primary:hover, .course-comment__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.course-comment__empty {
    color: var(--color-text-caption);
    letter-spacing: .01em;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

/* Блок: Содержимое страницы курса. Ориентир: .widget-course-content. */
.widget-course-content {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0 var(--spacing-8);
}

.course-content {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.course-content__section {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-content__section-title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.course-content__section-body {
    flex-direction: column;
    gap: 0;
    display: flex;
}

.course-content__line {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.course-content__price {
    margin: var(--spacing-2) 0 0;
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

/* Блок: Описание курса. Ориентир: .widget-course-description. */
.widget-course-description {
    background: var(--color-bg-section);
    padding: var(--spacing-6) 0 var(--spacing-8);
}

.course-description {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.course-description__section {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.course-description__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.course-description__text {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-description__text p, .course-description__paragraph {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.course-description__more {
    color: var(--color-text-caption);
    letter-spacing: .01em;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    align-self: flex-start;
    padding: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: underline;
}

.course-description__more:hover, .course-description__more:focus-visible {
    color: var(--color-primary);
}

.course-description__modules {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

/* Модуль программы: одна карточка, содержимое раскрывается внутри неё (макет 1055:12694). */
.course-description__module {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

/* Лёгкая тень при наведении вместо обводки. */
.course-description__module:hover,
.course-description__module:focus-within {
    box-shadow: 0 4px 16px var(--color-shadow);
}

.course-description__module-head {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    width: 100%;
    padding: var(--spacing-3) var(--spacing-6);
    background: 0 0;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
}

.course-description__module-title {
    color: #0f172a;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
}

.course-description__module-chevron {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-soft);
    transition: transform var(--transition-base);
}

.course-description__module-head[aria-expanded=true] .course-description__module-chevron {
    transform: rotate(180deg);
}

.course-description__module-body {
    padding: 0 var(--spacing-6) var(--spacing-4);
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.25rem;
    display: none;
}

.course-description__module-head[aria-expanded=true] + .course-description__module-body {
    display: block;
}

.course-description__module-body p {
    margin: 0 0 var(--spacing-2);
}

.course-description__module-body p:last-child {
    margin-bottom: 0;
}

/* Блок «Ведет курс»: карточка эксперта (макет 979:9916). */
.course-description__teacher {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-white);
    border-radius: 24px;
    max-width: 35.75rem;
    flex-direction: column;
    display: flex;
}

.course-description__teacher-photo {
    flex-shrink: 0;
    width: 100%;
    max-width: 16rem;
}

.course-description__teacher-photo a {
    display: block;
}

.course-description__teacher-photo img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 12.5rem;
    border-radius: 24px;
    display: block;
}

.course-description__teacher-info {
    gap: var(--spacing-4);
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.course-description__teacher-top {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-description__teacher-head {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.course-description__teacher-tag {
    padding: var(--spacing-0-5) var(--spacing-2);
    color: var(--color-text-caption);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    text-decoration: none;
    transition: color var(--transition-base), border-color var(--transition-base);
    display: inline-flex;
}

.course-description__teacher-tag:hover,
.course-description__teacher-tag:focus-visible {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.course-description__teacher-fav {
    flex-shrink: 0;
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-accent-soft);
    transition: color var(--transition-base);
    display: inline-flex;
}

.course-description__teacher-fav svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* «В избранном» — как у .experts-card__fav (класс text-success ставит favorites.js) */
.course-description__teacher-fav:active svg,
.course-description__teacher-fav.text-success svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

.course-description__teacher-name {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.course-description__teacher-name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

.course-description__teacher-name a:hover {
    color: var(--color-primary);
}

.course-description__teacher-role {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.course-description__teacher-stats {
    gap: var(--spacing-1) var(--spacing-4);
    flex-wrap: wrap;
    margin-top: auto;
    display: flex;
}

.course-description__teacher-stat {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.course-description__teacher-stat svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-soft);
    flex-shrink: 0;
}

.course-description__teacher-value {
    color: var(--color-text-primary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
}

.course-description__teacher-badge {
    padding: .1875rem var(--spacing-1-25);
    color: var(--color-text-inverse);
    background: #43ac6a;
    border-radius: var(--radius-full);
    align-self: flex-start;
    align-items: center;
    font-size: .8125rem;
    font-weight: 700;
    line-height: .9375rem;
    white-space: nowrap;
    display: inline-flex;
}

/* Блок: Шапка страницы курса. Ориентир: .widget-course-header. */
.widget-course-header {
    background: var(--color-bg-white);
    /* padding: var(--spacing-6) 0 */
}

.course-header {
    gap: var(--spacing-5);
    flex-direction: column;
    display: flex;
}

.course-header__topbar {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.course-header__breadcrumbs {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.course-header__breadcrumb {
    color: var(--color-text-secondary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.course-header__breadcrumb:hover, .course-header__breadcrumb:focus-visible {
    color: var(--color-primary);
}

.course-header__breadcrumb-sep, .course-header__breadcrumb-current {
    color: var(--color-text-secondary);
}

.course-header__action {
    align-items: center;
    gap: var(--spacing-1);
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 40px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.course-header__action svg {
    width: 1rem;
    height: .5rem;
    transition: transform var(--transition-base);
}

.course-header__action[aria-expanded=true] svg {
    transform: rotate(180deg);
}

.course-header__action:hover, .course-header__action:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.course-header__main {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.course-header__content {
    gap: var(--spacing-6);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.course-header__top {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.course-header__tag {
    height: 1.4375rem;
    padding: .1875rem var(--spacing-2) var(--spacing-1);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: 16px;
    align-self: flex-start;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.course-header__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.course-header__actions {
    gap: var(--spacing-1-25);
    flex-wrap: wrap;
    display: flex;
}

.course-header__btn {
    min-height: 2.4375rem;
    padding: .5625rem var(--spacing-4);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    display: inline-flex;
}

.course-header__btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary);
}

.course-header__btn--primary:hover, .course-header__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.course-header__meta {
    gap: var(--spacing-2);
    flex-direction: column;
    margin: 0;
    display: flex;
}

.course-header__meta-row {
    gap: var(--spacing-1);
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: flex;
}

.course-header__meta-row > span:first-child {
    font-weight: 600;
}

/* Строка со списком значений (например «Формат курса»): значения — обычным текстом. */
.course-header__meta-row--list {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
}

.course-header__meta-row .lists_links {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: none;
    display: inline;
}

.course-header__desc {
    gap: var(--spacing-1-25);
    flex-direction: column;
    margin: 0;
    display: flex;
}

.course-header__desc p {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.course-header__more {
    color: var(--color-text-caption);
    letter-spacing: .01em;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    align-self: flex-start;
    padding: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: underline;
}

.course-header__more:hover, .course-header__more:focus-visible {
    color: var(--color-primary);
}

/* Блок: info_bar страницы курса. Макет: Figma 1566:41908 (узел 1000008434). */
.courses_item .info_bar {
    gap: 8px 24px;
    margin: 16px 0 0;
    color: #8F8F8F;
    letter-spacing: 0;
    background: #ECF3FB;
    border-radius: 24px;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    padding: 16px 24px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    display: flex;
}

.courses_item .info_bar a {
    color: inherit;
}

.courses_item .info_bar .bar_item {
    gap: 8px;
    margin-right: 0;
    align-items: center;
    font-size: 12px;
    line-height: 16px;
    display: inline-flex;
}

.courses_item .info_bar .bar_item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.courses_item .info_bar .bar_item > svg.icms-svg-icon {
    color: #B8BFD8;
}

/* Избранное: в баре — сердце; в избранном — синее с заливкой. */
.courses_item .info_bar .bar_item.icms-favorites__btn {
    color: #8F8F8F !important;
}

.courses_item .info_bar .bar_item.icms-favorites__btn svg {
    transition: color var(--transition-base);
}

.courses_item .info_bar .bar_item.icms-favorites__btn.text-success svg {
    color: #2047CF;
    --fav-fill: #CADBF2;
}

/* Рейтинг: 👍 «—» 👎 с шагом 4px; невыбранное состояние — серые иконки. */
.courses_item .info_bar .bi_rating .rating_widget {
    gap: 4px;
    align-items: center;
}

.courses_item .info_bar .bi_rating .arrow {
    align-items: center;
    display: flex;
}

.courses_item .info_bar .bi_rating .arrow-btn {
    justify-content: center;
    align-items: center;
    transition: color var(--transition-base);
    display: flex;
}

.courses_item .info_bar .bi_rating .arrow-btn svg {
    vertical-align: 0;
    display: block;
}

.courses_item .info_bar .bi_rating .arrow-btn.disabled.text-secondary,
.courses_item .info_bar .bi_rating a.vote-up,
.courses_item .info_bar .bi_rating a.vote-down {
    color: #B8BFD8 !important;
}

.courses_item .info_bar .bi_rating a.vote-up:hover,
.courses_item .info_bar .bi_rating a.vote-up:focus-visible {
    color: #43ac6a !important;
}

.courses_item .info_bar .bi_rating a.vote-down:hover,
.courses_item .info_bar .bi_rating a.vote-down:focus-visible {
    color: #f04124 !important;
}

.courses_item .info_bar .bi_rating .score {
    margin: 0 !important;
    color: #8F8F8F;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

/* Отзывы — обычным текстом, без бейджа-плашки. */
.courses_item .info_bar .istars_digits {
    margin: 0;
    padding: 0;
    background: none !important;
    color: #8F8F8F !important;
    font-size: 12px;
    line-height: 16px;
}

.course-header__share {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-card-soft);
    border-radius: 24px;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    display: flex;
    position: relative;
}

/* Сердечко — отдельной строкой над картинкой (а не поверх неё). */
.course-header__fav {
    align-self: flex-end;
    cursor: pointer;
    width: 1.3125rem;
    height: 1.125rem;
    transition: transform var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.course-header__fav svg {
    width: 1.3125rem;
    height: 1.125rem;
    color: var(--color-accent-soft);
    transition: color var(--transition-base);
}

.course-header__fav:hover, .course-header__fav:focus-visible {
    transform: scale(1.1);
}

/* «В избранном» — как у .experts-card__fav */
.course-header__fav:active svg,
.course-header__fav[aria-pressed=true] svg {
    color: var(--color-primary);
    --fav-fill: var(--color-fav);
}

.course-header__share-image {
    aspect-ratio: 304/176;
    background: var(--color-bg-white);
    border-radius: 24px;
    width: 100%;
    overflow: hidden;
}

.course-header__share-image img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.course-header__share-body {
    align-items: center;
    gap: var(--spacing-2);
    flex-direction: column;
    width: 100%;
    display: flex;
}

.course-header__share-label {
    color: var(--color-text-secondary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.course-header__socials {
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    display: flex;
}

.course-header__social {
    background: var(--color-bg-white);
    color: #4e4e4e;
    width: 2.75rem;
    height: 2.75rem;
    transition: background-color var(--transition-base), color var(--transition-base);
    border: 1px solid #4e4e4e;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
}

.course-header__social svg {
    width: 1.375rem;
    height: 1.375rem;
}

.course-header__social--thick {
    border-width: 2px;
}

.course-header__social:hover, .course-header__social:focus-visible {
    color: var(--color-bg-white);
    background: #4e4e4e;
}

/* Блок: Рекомендованные курсы. Ориентир: .widget-course-recommend. */
.widget-course-recommend {
    background: var(--color-bg-white);
    padding: var(--spacing-8) 0 var(--spacing-10);
}

.course-recommend {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.course-recommend__inner {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.course-recommend__header {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.course-recommend__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.course-recommend__subtitle {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.course-recommend__row {
    gap: var(--spacing-4);
    grid-template-columns:1fr;
    display: grid;
}

.course-recommend__card {
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
    overflow: hidden;
}

.is-rated .course-recommend__star svg {
    color: var(--color-star);
}

.is-rated .course-recommend__rate {
    color: var(--color-text-primary);
}

.course-recommend__card-top {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-recommend__tags {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.course-recommend__chip {
    height: 1.4375rem;
    padding: .1875rem var(--spacing-2) var(--spacing-1);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: 16px;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.course-recommend__fav {
    cursor: pointer;
    width: 1.3125rem;
    height: 1.125rem;
    transition: transform var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.course-recommend__fav svg {
    width: 1.3125rem;
    height: 1.125rem;
    color: var(--color-border);
    stroke: var(--color-border);
}

.is-rated .course-recommend__fav svg {
    color: var(--color-fav);
    stroke: var(--color-primary);
}

.course-recommend__fav:hover, .course-recommend__fav:focus-visible {
    transform: scale(1.1);
}

.course-recommend__media {
    aspect-ratio: 266/151;
    background: var(--color-bg-white);
    border-radius: 24px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.course-recommend__image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.course-recommend__text {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-recommend__name {
    color: var(--color-text-primary);
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: -webkit-box;
    overflow: hidden;
}

.course-recommend__category, .course-recommend__instructor {
    color: var(--color-text-primary);
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    display: -webkit-box;
    overflow: hidden;
}

.course-recommend__category span:first-child, .course-recommend__instructor span:first-child {
    font-weight: 400;
}

.course-recommend__category span:last-child, .course-recommend__instructor span:last-child {
    font-weight: 600;
}

.course-recommend__meta {
    align-items: center;
    gap: var(--spacing-0-75);
    flex-wrap: wrap;
    display: flex;
}

.course-recommend__rating {
    align-items: center;
    gap: var(--spacing-1);
    display: inline-flex;
}

.course-recommend__star {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
}

.course-recommend__star svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-border);
}

.course-recommend__btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.course-recommend__btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-primary);
}

.course-recommend__btn--primary:hover, .course-recommend__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Блок: Дополнительный текстовый блок курса. Ориентир: .widget-course-seo. */
.widget-course-seo {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0 var(--spacing-8);
}

.course-seo__card {
    gap: var(--spacing-4);
    padding: var(--spacing-8) var(--spacing-6);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
}

.course-seo__fav {
    align-self: flex-start;
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    letter-spacing: .01em;
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    padding: 0;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.course-seo__fav svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-border);
}

.course-seo__fav:hover, .course-seo__fav:focus-visible, .course-seo__fav:hover svg, .course-seo__fav:focus-visible svg {
    color: var(--color-primary);
}

.course-seo__content {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.course-seo__section {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-seo__title {
    color: var(--color-text-primary);
    margin: 0;
    font-weight: 800;
    line-height: 1.5rem;
}

.course-seo__section:first-of-type .course-seo__title {
    font-size: 1.25rem;
    line-height: 1.625rem;
}

.course-seo + .course-seo__section .course-seo__title, .course-seo__section:not(:first-of-type) .course-seo__title {
    font-size: 1.125rem;
}

.course-seo__text {
    flex-direction: column;
    gap: 0;
    display: flex;
}

.course-seo__paragraph {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.course-seo__more {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    white-space: nowrap;
    border: 1px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.course-seo__more:hover, .course-seo__more:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

/* Блок: Тарифы курса. Ориентир: .widget-course-tarif. */
.widget-course-tarif {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0 var(--spacing-8);
}

.course-tarif {
    gap: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.course-tarif__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.course-tarif__list {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-tarif__row {
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    transition: border-color var(--transition-base);
    border-radius: 24px;
    flex-direction: column;
    gap: 0;
    display: flex;
}

.course-tarif__row--expanded {
    border-radius: 24px;
}

.course-tarif__row-head {
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-6);
    cursor: pointer;
    display: flex;
}

.course-tarif__row-title {
    color: #0f172a;
    flex: 1 1 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
}

.course-tarif__row-price {
    align-items: center;
    gap: var(--spacing-4);
    flex-shrink: 0;
    display: inline-flex;
}

.course-tarif__discount {
    height: 1.125rem;
    padding: 0 var(--spacing-2);
    color: var(--color-text-inverse);
    background: #43ac6a;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 800;
    line-height: 1.125rem;
    display: inline-flex;
}

.course-tarif__old-price {
    color: var(--color-text-caption);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    text-decoration: line-through;
}

.course-tarif__price {
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
}

.course-tarif__toggle {
    cursor: pointer;
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: inline-flex;
}

.course-tarif__toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text-caption);
    transition: transform var(--transition-base);
    transform: rotate(180deg);
}

.course-tarif__toggle[aria-expanded=true] svg {
    color: #869ae3;
    transform: rotate(0deg);
}

.course-tarif__row-body {
    padding: 0 var(--spacing-6);
}

.course-tarif__features {
    gap: var(--spacing-2);
    padding: var(--spacing-4) 0;
    flex-direction: column;
    margin: 0;
    font-weight: 400;
    display: flex;
}

.course-tarif__features > :first-child {
    margin-top: 0;
}

.course-tarif__features > :last-child {
    margin-bottom: 0;
}

.course-tarif__features li,
.course-tarif__features p {
    color: #0f172a;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.course-tarif__feature {
    color: #0f172a;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
}

.course-tarif__row-footer {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: 0 var(--spacing-6) var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
}

.course-tarif__deadline:empty {
    display: none;
}

.course-tarif__deadline {
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
}

.course-tarif__pay {
    height: 2.25rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 0;
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    display: inline-flex;
}

.course-tarif__pay:hover, .course-tarif__pay:focus-visible {
    background: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

/* Блок: Комментарии категории курсов. Ориентир: .courses-cat-comment. */
.courses-cat-comment {
    padding: var(--spacing-15) 0;
}

.courses-cat-comment__fav {
    width: 100%;
    min-height: 50px;
    color: var(--color-text-caption);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: 24px;
    align-items: center;
    gap: 6px;
    padding: 16px 24px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    text-decoration: none;
    display: flex;
}

.courses-cat-comment__fav:hover, .courses-cat-comment__fav:focus-visible {
    color: var(--color-primary);
}

.courses-cat-comment__fav-icon {
    color: var(--color-border);
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 12px;
    display: inline-flex;
}

.courses-cat-comment__fav-icon svg {
    width: 14px;
    height: 12px;
}

.courses-cat-comment__head {
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.courses-cat-comment__title-section {
    flex-direction: column;
    gap: 8px;
    display: flex;
}

.courses-cat-comment__title-row {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    display: flex;
}

.courses-cat-comment__title {
    color: var(--color-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.courses-cat-comment__title-img {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 2px;
    width: 20px;
    height: 16px;
    display: block;
}

.courses-cat-comment__tabs {
    flex-direction: column;
    display: flex;
    position: relative;
}

.courses-cat-comment__tabs-track {
    background: var(--color-border-light);
    height: 1.5px;
}

.courses-cat-comment__tabs-active {
    background: var(--color-primary);
    width: 128px;
    height: 1.5px;
    position: absolute;
    top: 0;
    left: 0;
}

.courses-cat-comment__actions {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-6);
    display: flex;
}

.courses-cat-comment__write.btn {
    padding: 8px 16px;
}

.courses-cat-comment__bell {
    background: var(--color-primary);
    width: 34px;
    height: 34px;
    color: var(--color-text-inverse);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: none;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    padding: 2px;
    display: inline-flex;
}

.courses-cat-comment__bell:hover, .courses-cat-comment__bell:focus-visible {
    background: var(--color-primary-hover);
}

.courses-cat-comment__bell-icon {
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    display: inline-flex;
}

.courses-cat-comment__bell-icon svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-inverse);
}

.courses-cat-comment__empty {
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-2) 0;
    text-align: center;
    flex-direction: column;
    display: flex;
}

.courses-cat-comment__empty-text {
    color: var(--color-text-caption);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.courses-cat-comment__empty-hint {
    color: var(--color-text-caption);
    text-align: center;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.courses-cat-comment__empty-link {
    color: var(--color-primary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.courses-cat-comment__empty-link:hover, .courses-cat-comment__empty-link:focus-visible {
    color: var(--color-primary-hover);
}

/* Блок: Шапка категории курсов. Ориентир: .courses-cat-header. */
.courses-cat-header {
    padding: var(--spacing-5-5) 0;
}

.courses-cat-header__top {
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    flex-direction: column;
    display: flex;
}

.courses-cat-header__breadcrumbs {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.courses-cat-header__crumb {
    color: var(--color-text-secondary);
    transition: color var(--transition-base);
    text-decoration: none;
}

.courses-cat-header__crumb:hover, .courses-cat-header__crumb:focus-visible {
    color: var(--color-primary);
}

.courses-cat-header__crumb--current {
    color: var(--color-text-primary);
    text-underline-offset: 2px;
    text-decoration: underline;
}

.courses-cat-header__crumb-sep {
    color: var(--color-text-secondary);
    -webkit-user-select: none;
    user-select: none;
}

.courses-cat-header__actions {
    width: 100%;
    min-height: 44px;
    padding: 13px 24px;
}

.courses-cat-header__content {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.courses-cat-header__intro, .courses-cat-header__skills {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.courses-cat-header__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.courses-cat-header__subtitle {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.courses-cat-header__desc, .courses-cat-header__skills-text {
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    flex-direction: column;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: flex;
}

.courses-cat-header__paragraph {
    margin: 0;
}

.courses-cat-header__skills {
    position: relative;
}

.courses-cat-header__skills-overlay {
    inset: auto 0 var(--spacing-8);
    pointer-events: none;
    opacity: 1;
    height: 4rem;
    transition: opacity var(--transition-base);
    background: linear-gradient(#fff0, #fff);
    position: absolute;
}

.is-expanded .courses-cat-header__skills-overlay {
    opacity: 0;
}

.courses-cat-header__skills-text {
    max-height: 6.5rem;
    transition: max-height var(--transition-base);
    position: relative;
    overflow: hidden;
}

.is-expanded .courses-cat-header__skills-text {
    max-height: 100rem;
}

.courses-cat-header__more {
    align-self: flex-start;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-primary);
    cursor: pointer;
    transition: color var(--transition-base);
    background: 0 0;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    display: inline-flex;
}

.courses-cat-header__more:hover, .courses-cat-header__more:focus-visible {
    color: var(--color-primary-hover);
}

.is-expanded .courses-cat-header__more .courses-cat-header__more-show, .courses-cat-header__more:not(.is-expanded) .courses-cat-header__more-hide {
    display: none;
}

.courses-cat-header__more-show, .courses-cat-header__more-hide, .is-expanded .courses-cat-header__more-hide {
    display: inline;
}

.is-expanded .courses-cat-header__more-show {
    display: none;
}

/* Блок: Список категорий курсов. Ориентир: .courses-cat-list. */
.courses-cat-list {
    padding: var(--spacing-5-5) 0;
}

.courses-cat-list__title {
    margin: 0 0 var(--spacing-6);
    color: var(--color-text-primary);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.courses-cat-list__grid {
    gap: var(--spacing-4);
    grid-template-columns:1fr;
    display: grid;
}

/* Блок: Каталог курсов: список и карточки. Ориентир: .courses-list__input. */
.courses-list__input {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.courses-list__input::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.courses-list__input {
    font-size: .875rem;
    line-height: 1.125rem;
}

.widget-courses-list {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0 var(--spacing-10);
}

.courses-list {
    gap: var(--spacing-5);
    flex-direction: column;
    display: flex;
}

.courses-list__topbar {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.courses-list__breadcrumbs {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-secondary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.courses-list__breadcrumb {
    color: var(--color-text-secondary);
    text-underline-offset: 2px;
    transition: color var(--transition-base);
    text-decoration: underline;
}

.courses-list__breadcrumb:hover, .courses-list__breadcrumb:focus-visible {
    color: var(--color-primary);
}

.courses-list__breadcrumb-sep, .courses-list__breadcrumb-current {
    color: var(--color-text-secondary);
}

.courses-list__topbar-btn {
    width: 100%;
    min-height: 44px;
    padding: 13px 24px;
}

.courses-list__page-header {
    gap: var(--spacing-1-25);
    flex-direction: column;
    display: flex;
}

.courses-list__page-title-row {
    gap: var(--spacing-3);
    flex-direction: column;
    display: flex;
}

.courses-list__page-title-actions {
    align-items: center;
    gap: var(--spacing-1);
    order: -1;
    display: flex;
}

.courses-list__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5rem;
}

.courses-list__notify {
    min-width: 2.125rem;
    height: 2.125rem;
    padding: 0 var(--spacing-2);
    color: var(--color-text-secondary);
    background: #eaeaea;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.courses-list__subtitle {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.courses-list__btn {
    min-height: 2.125rem;
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border: 1.5px solid #0000;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.courses-list__btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.courses-list__btn--primary:hover, .courses-list__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.courses-list__btn--outlined {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: 0 0;
}

.courses-list__btn--outlined:hover, .courses-list__btn--outlined:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.courses-list__filter {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-bg-section);
    border-radius: 24px;
    flex-direction: column;
    display: flex;
}

.courses-list__filter-toggle {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    color: #434343;
    width: 100%;
    letter-spacing: .01em;
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
    display: flex;
}

.courses-list__filter-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-border);
    transition: transform var(--transition-base);
}

.courses-list__filter-toggle[aria-expanded=true] svg {
    transform: rotate(180deg);
}

.courses-list__filter-body {
    height: auto;
    transition: height .3s;
    overflow: hidden;
}

.courses-list__filter-body:not([style*=height]), .courses-list__filter-body[style*=height], .courses-list__filter-row {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.courses-list__filter-field {
    gap: var(--spacing-1);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.courses-list__filter-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.courses-list__control {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    transition: border-color var(--transition-base);
    border-radius: 16px;
    align-items: center;
    display: flex;
}

.courses-list__control:focus-within {
    border-color: var(--color-primary);
}

.courses-list__control-value {
    color: var(--color-text-primary);
    flex: 1 1 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.courses-list__control-chevron {
    color: var(--color-border);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.courses-list__control-chevron svg {
    width: 1.5rem;
    height: 1.5rem;
}

.courses-list__input::placeholder {
    letter-spacing: .01em;
}

.courses-list__range {
    align-items: stretch;
    display: flex;
}

.courses-list__range-item {
    align-items: center;
    gap: var(--spacing-4);
    min-width: 0;
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    transition: border-color var(--transition-base);
    border-radius: 0;
    flex: 1 1 0;
    display: flex;
}

.courses-list__range-item:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.courses-list__range-item:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.courses-list__range-item + .courses-list__range-item {
    margin-left: -1.5px;
}

.courses-list__range-item:focus-within {
    border-color: var(--color-primary);
    z-index: 1;
}

.courses-list__range-prefix {
    color: var(--color-border);
    letter-spacing: .01em;
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.courses-list__filter-checks {
    gap: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.courses-list__check {
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    display: inline-flex;
}

.courses-list__check-input {
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    position: absolute;
}

.courses-list__check-input:checked + .courses-list__check-box:after {
    opacity: 1;
}

.courses-list__check-input:focus-visible + .courses-list__check-box {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.courses-list__check-box {
    border: 1.5px solid var(--color-border);
    width: 1.125rem;
    height: 1.125rem;
    transition: background-color var(--transition-base), border-color var(--transition-base);
    background: #fff;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
}

.courses-list__check-box:after {
    content: "";
    opacity: 0;
    width: 5px;
    height: 8px;
    transition: opacity var(--transition-base), transform var(--transition-base);
    border: 2px solid #fff;
    border-width: 0 2px 2px 0;
    position: absolute;
    top: 2px;
    left: 4px;
    transform: rotate(45deg) scale(0);
}

.courses-list__check-input:checked + .courses-list__check-box {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.courses-list__check-input:checked + .courses-list__check-box:after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.courses-list__check-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.courses-list__filter-buttons {
    gap: var(--spacing-2);
    padding-top: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.courses-list__sort, .courses-list__sort-trigger {
    align-items: center;
    gap: var(--spacing-1-25);
    display: flex;
}

.courses-list__sort-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.courses-list__sort-btn {
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-primary);
    letter-spacing: .01em;
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: inline-flex;
}

.courses-list__sort-btn[aria-expanded=true] .courses-list__sort-arrow {
    transform: rotate(180deg);
}

.courses-list__sort-arrow {
    width: 11px;
    height: 6px;
    transition: transform var(--transition-base);
}

.courses-list__grid {
    gap: var(--spacing-4);
    grid-template-columns:1fr;
    display: grid;
}

.courses-list__pagination {
    align-items: center;
    gap: var(--spacing-1-25);
    padding-top: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.courses-list__pagination-bar {
    align-items: center;
    gap: var(--spacing-1-25);
    display: flex;
}

.courses-list__page {
    width: 2.375rem;
    height: 2.375rem;
    padding: var(--spacing-0-75);
    color: var(--color-accent-soft);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: .75rem;
    justify-content: center;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.375rem;
    display: inline-flex;
}

.courses-list__page--active {
    color: #6e87ac;
    background: #eff5fc;
    border-radius: 40px;
    font-weight: 800;
}

.courses-list__page--arrow {
    color: var(--color-accent-soft);
}

.courses-list__page--arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

.courses-list__page--arrow:hover:not(:disabled), .courses-list__page--arrow:focus-visible {
    color: var(--color-primary);
}

.courses-list__page:hover:not([aria-current=page],:disabled) {
    background: var(--color-bg-section);
}

.courses-list__pagination-info {
    color: var(--color-border);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.course-card {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border-radius: 24px;
    flex-direction: column;
    gap: var(--spacing-4);
    display: flex;
    overflow: hidden;
}

.course-card__inner {
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-direction: column;
    flex: 1 1 0;
    display: flex;
}

.course-card__main, .course-card__head {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.course-card__tags {
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.course-card__tag {
    height: 1.5rem;
    padding: .25rem var(--spacing-2);
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: 1rem;
    align-items: center;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    white-space: nowrap;
    max-width: 100%;
    flex-shrink: 0;
    display: inline-flex;
}

/* Блок: Тег-категория в карточках и на страницах контента — единый вид. Ориентир: .experts-card__tag. */
.experts-card__tag,
.course-card__tag,
.school-card__tag,
.course-school__tag,
.expert-header__tag,
.expert-item__cat .btn {
    display: inline-flex;
    align-items: center;
    height: auto;
    min-height: 0;
    max-width: 100%;
    padding: 2px var(--spacing-2) 3px;
    background: var(--color-bg-input);
    color: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-base);
}

.experts-card__tag:hover,
.experts-card__tag:active,
.course-card__tag:hover,
.course-card__tag:active,
.school-card__tag:hover,
.school-card__tag:active,
.course-school__tag:hover,
.course-school__tag:active,
.expert-header__tag:hover,
.expert-header__tag:active,
.expert-item__cat .btn:hover,
.expert-item__cat .btn:active {
    background: var(--color-bg-section);
    color: var(--color-accent-soft);
}

/* Длинный список категорий обрезаем с многоточием, иначе тег
   выдавливает кнопку избранного за пределы карточки (как в .populary-card__top). */
.experts-card__tag,
.course-card__tag,
.school-card__tag,
.course-school__tag,
.expert-header__tag {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.course-card__tags,
.school-card__tags,
.course-school__tags,
.expert-item__cat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}

.course-card__fav {
    cursor: pointer;
    width: 1.3125rem;
    height: 1.125rem;
    transition: transform var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.course-card__fav svg {
    width: 1.3125rem;
    height: 1.125rem;
    fill: var(--color-fav);
    stroke: var(--color-primary);
    stroke-width: 1.5px;
}

.course-card__fav:hover, .course-card__fav:focus-visible {
    transform: scale(1.1);
}

.course-card__body {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.course-card__media {
    aspect-ratio: 328/190;
    background: var(--color-bg-white);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

.course-card__image {
    -o-object-fit: cover;
    object-fit: cover;
    width: 111%;
    height: 112%;
    display: block;
}

.course-card__archive {
    min-height: 2.25rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    display: inline-flex;
}

.course-card__archive:hover, .course-card__archive:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.course-card__content {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-card__title {
    color: var(--color-text-primary);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    display: -webkit-box;
    overflow: hidden;
}

.course-card__price {
    padding: var(--spacing-2) var(--spacing-6);
    background: var(--color-bg-white);
    border-radius: 12px;
}

.course-card__meta, .course-card__desc {
    gap: var(--spacing-1);
    flex-direction: column;
    display: flex;
}

.course-card__desc-label {
    color: var(--color-text-primary);
    line-height: 1.125rem;
}

.course-card__desc-text {
    color: var(--color-text-primary);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin: 0;
    font-weight: 400;
    line-height: 1.125rem;
    display: -webkit-box;
    overflow: hidden;
}

.course-card__meta a {
    color: var(--color-text-primary);
}

.course-card__promo {
    align-items: flex-start;
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.course-card__promo-logo {
    align-items: center;
    height: 1.625rem;
    display: flex;
}

.course-card__promo-logo img {
    width: auto;
    height: 100%;
    display: block;
}

.course-card__promo-btn {
    min-height: 2.25rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1.5px solid var(--color-primary);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    display: inline-flex;
}

.course-card__promo-btn:hover, .course-card__promo-btn:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.course-card__stats {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    display: flex;
}

.course-card__stat {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    display: inline-flex;
}

.course-card__stat svg {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-border);
}

.course-card__stat--rating .svg-star {
    width: 1rem;
    height: 1rem;
    color: var(--color-star);
}

.course-card__stat--comments .svg-comment {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-border);
}

.course-card__rating-value {
    color: var(--color-text-primary);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
}

.course-card__rating-count {
    color: var(--color-text-caption);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

/* Блок: Цена, скидка и срок действия предложения. Ориентир: .iprices_list_discount. */
.iprices_list_discount {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
}

.iprices_list_discount .badge-success {
    height: 1.125rem;
    padding: 0 var(--spacing-2);
    color: var(--color-text-inverse);
    background: #3ba263;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 800;
    line-height: 1.125rem;
    display: inline-flex;
}

.iprices_list_price {
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3125rem;
}

.iprices_list_discount .iprices_list_price {
    color: var(--color-text-caption);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    text-decoration: line-through;
}

.iprices_list_price .text-muted, .iprices_list_discount_time {
    color: var(--color-text-caption);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

/* Блок: Размещение виджетов на странице курса. Ориентир: .courses_item .widget. */
.courses_item .widget {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

/* ======================================================================
   Панель отладки
   ====================================================================== */

/* Блок: Панель отладки: строка состояния, вкладки, запросы и раскрытие. Ориентир: .debug-block. */
.debug-block {
    z-index: 9999;
    background: var(--color-bg-white);
    box-shadow: 0 -4px 20px var(--color-shadow-dark);
    color: var(--color-text-primary);
    font-size: .8125rem;
    line-height: 1.5;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.debug-block__bar {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1-5) var(--spacing-3);
    background: var(--color-bg-section);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
}

.debug-block__info {
    align-items: center;
    gap: var(--spacing-1-5);
    min-width: 0;
    display: flex;
}

.debug-block__icon {
    color: var(--color-primary);
    flex-shrink: 0;
    display: block;
}

.debug-block__stat {
    align-items: center;
    gap: var(--spacing-0-5);
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-size: .75rem;
    display: inline-flex;
}

.debug-block__stat-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    display: block;
}

.debug-block__divider {
    background: var(--color-border);
    flex-shrink: 0;
    width: 1px;
    height: 12px;
}

.debug-block__toggle {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
}

.debug-block__toggle:hover {
    background: var(--color-bg-card-soft);
    color: var(--color-primary);
}

.debug-block__chevron {
    transition: transform .3s;
    display: block;
}

.debug-block__tabs {
    gap: var(--spacing-4);
    padding: 0 var(--spacing-3);
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border-light);
    -webkit-overflow-scrolling: touch;
    display: flex;
    position: relative;
    overflow-x: auto;
}

.debug-block__tab {
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) 0;
    color: var(--color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast);
    background: 0 0;
    border: none;
    font-size: .8125rem;
    font-weight: 500;
    display: inline-flex;
    position: relative;
}

.debug-block__tab:hover, .debug-block__tab.is-active {
    color: var(--color-primary);
}

.debug-block__tab-icon {
    color: currentColor;
    flex-shrink: 0;
    display: block;
}

.debug-block__badge {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--spacing-0-75);
    background: var(--color-bg-section);
    color: var(--color-text-secondary);
    border-radius: 1.5rem;
    justify-content: center;
    align-items: center;
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
}

.is-active .debug-block__badge {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.debug-block__badge.is-warning {
    background: var(--color-warning);
    color: #fff;
    min-width: auto;
    height: 1rem;
    padding: 0 var(--spacing-1);
    font-size: .625rem;
}

.debug-block__track {
    pointer-events: none;
    height: 1.5px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
}

.debug-block__track-active {
    background: var(--color-primary);
    height: 1.5px;
    transition: left .25s, width .25s;
    position: absolute;
    bottom: 0;
    left: 0;
}

.debug-block__panel {
    padding: var(--spacing-2) var(--spacing-3);
    display: none;
}

.debug-block__toolbar {
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.debug-block__search {
    min-width: 0;
    height: 1.75rem;
    padding: 0 var(--spacing-2);
    border: 1px solid var(--color-border-placeholder);
    border-radius: var(--radius-sm);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast);
    outline: none;
    flex: 200px;
    font-size: .75rem;
}

.debug-block__search::placeholder {
    color: var(--color-text-caption);
}

.debug-block__search:focus {
    border-color: var(--color-primary);
}

.debug-block__sort {
    gap: var(--spacing-0-5);
    flex-shrink: 0;
    display: flex;
}

.debug-block__sort-btn {
    height: 1.75rem;
    padding: 0 var(--spacing-2);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    background: 0 0;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    display: inline-flex;
}

.debug-block__sort-btn:hover {
    background: var(--color-primary-soft);
}

.debug-block__sort-btn.is-active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.debug-block__db-info {
    padding: var(--spacing-1) var(--spacing-2);
    margin-bottom: var(--spacing-1-5);
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: .75rem;
    font-weight: 500;
}

.debug-block__query {
    padding: var(--spacing-1-5) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.debug-block__query-head {
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-1-5);
    margin-bottom: var(--spacing-1);
    display: flex;
}

.debug-block__query-src {
    color: var(--color-text-muted);
    word-break: break-all;
    font-size: .6875rem;
    line-height: 1.3;
}

.debug-block__query-time {
    align-items: center;
    gap: var(--spacing-0-5);
    color: var(--color-text-accent-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: .6875rem;
    display: inline-flex;
}

.debug-block__clock {
    color: var(--color-text-caption);
    flex-shrink: 0;
    display: block;
}

.debug-block__query-sql {
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    word-break: break-all;
    font-size: .6875rem;
    line-height: 1.4;
}

.debug-block__query-sql code {
    color: var(--color-text-secondary);
    font-family: SF Mono, Monaco, Menlo, monospace;
}

.debug-block__file {
    padding: var(--spacing-1) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.debug-block__file:last-child {
    border-bottom: none;
}

.debug-block__file-name {
    color: var(--color-text-muted);
    font-family: SF Mono, Monaco, Menlo, monospace;
    font-size: .75rem;
}

.debug-block {
    z-index: 9999;
    background: var(--dbg-color-bg-white);
    box-shadow: 0 -4px 20px var(--dbg-color-shadow-dark);
    color: var(--dbg-color-text-primary);
    font-size: .8125rem;
    line-height: 1.5;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.debug-block__bar {
    justify-content: space-between;
    align-items: center;
    gap: var(--dbg-spacing-2);
    padding: var(--dbg-spacing-1-5) var(--dbg-spacing-3);
    background: var(--dbg-color-bg-section);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
}

.debug-block__info {
    align-items: center;
    gap: var(--dbg-spacing-1-5);
    min-width: 0;
    display: flex;
}

.debug-block__icon {
    color: var(--dbg-color-primary);
    flex-shrink: 0;
    display: inline-flex;
}

.debug-block__icon svg {
    width: 16px;
    height: 16px;
}

.debug-block__stat {
    align-items: center;
    gap: var(--dbg-spacing-0-5);
    color: var(--dbg-color-text-secondary);
    white-space: nowrap;
    font-size: .75rem;
    display: inline-flex;
}

.debug-block__stat-icon {
    color: var(--dbg-color-text-muted);
    flex-shrink: 0;
    display: inline-flex;
}

.debug-block__stat-icon svg,
.debug-block__clock svg {
    width: 12px;
    height: 12px;
}

.debug-block__stat-value {
    font-variant-numeric: tabular-nums;
}

.debug-block__divider {
    background: var(--dbg-color-border);
    flex-shrink: 0;
    width: 1px;
    height: 12px;
}

.debug-block__toggle {
    width: 24px;
    height: 24px;
    color: var(--dbg-color-text-secondary);
    cursor: pointer;
    border-radius: var(--dbg-radius-sm);
    transition: background var(--dbg-transition-fast), color var(--dbg-transition-fast);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
}

.debug-block__toggle:hover {
    background: var(--dbg-color-bg-card-soft);
    color: var(--dbg-color-primary);
}

.debug-block__chevron {
    transition: transform .3s;
    display: inline-flex;
}

.debug-block__chevron svg {
    width: 16px;
    height: 16px;
}

.debug-block--expanded .debug-block__chevron {
    transform: rotate(180deg);
}

.debug-block__body {
    transition: max-height .35s, opacity .25s;
}

.debug-block:not(.debug-block--expanded) .debug-block__body {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

.debug-block--expanded .debug-block__body {
    opacity: 1;
    max-height: 2000px;
}

.debug-block__tabs {
    gap: var(--dbg-spacing-4);
    padding: 0 var(--dbg-spacing-3);
    background: var(--dbg-color-bg-white);
    border-bottom: 1px solid var(--dbg-color-border-light);
    -webkit-overflow-scrolling: touch;
    display: flex;
    position: relative;
    overflow-x: auto;
}

.debug-block__tabs::-webkit-scrollbar {
    display: none;
}

.debug-block__tab {
    align-items: center;
    gap: var(--dbg-spacing-1);
    padding: var(--dbg-spacing-2) 0;
    color: var(--dbg-color-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dbg-transition-fast);
    background: 0 0;
    border: none;
    font-size: .8125rem;
    font-weight: 500;
    display: inline-flex;
    position: relative;
}

.debug-block__tab:hover,
.debug-block__tab.is-active {
    color: var(--dbg-color-primary);
}

.debug-block__tab-icon {
    color: currentColor;
    flex-shrink: 0;
    display: inline-flex;
}

.debug-block__tab-icon svg {
    width: 12px;
    height: 12px;
}

.debug-block__badge {
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--dbg-spacing-0-75);
    background: var(--dbg-color-bg-section);
    color: var(--dbg-color-text-secondary);
    border-radius: 1.5rem;
    justify-content: center;
    align-items: center;
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
}

.debug-block__tab.is-active .debug-block__badge {
    background: var(--dbg-color-primary-soft);
    color: var(--dbg-color-primary);
}

.debug-block__badge.is-warning {
    background: var(--dbg-color-warning);
    color: #fff;
    min-width: auto;
    height: 1rem;
    padding: 0 var(--dbg-spacing-1);
    font-size: .625rem;
}

.debug-block__panels {
    max-height: 25vh;
    overflow-y: auto;
}

.debug-block__panel {
    padding: var(--dbg-spacing-2) var(--dbg-spacing-3);
    display: none;
}

.debug-block__panel.is-active {
    display: block;
}

.debug-block__toolbar {
    align-items: center;
    gap: var(--dbg-spacing-2);
    margin-bottom: var(--dbg-spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.debug-block__search {
    min-width: 0;
    height: 1.75rem;
    padding: 0 var(--dbg-spacing-2);
    border: 1px solid var(--dbg-color-border-placeholder);
    border-radius: var(--dbg-radius-sm);
    background: var(--dbg-color-bg-input);
    color: var(--dbg-color-text-primary);
    transition: border-color var(--dbg-transition-fast);
    outline: none;
    flex: 200px;
    font-size: .75rem;
}

.debug-block__search::placeholder {
    color: var(--dbg-color-text-caption);
}

.debug-block__search:focus {
    border-color: var(--dbg-color-primary);
}

.debug-block__sort {
    gap: var(--dbg-spacing-0-5);
    flex-shrink: 0;
    display: flex;
}

.debug-block__sort-btn {
    height: 1.75rem;
    padding: 0 var(--dbg-spacing-2);
    border: 1px solid var(--dbg-color-primary);
    border-radius: var(--dbg-radius-full);
    color: var(--dbg-color-primary);
    cursor: pointer;
    transition: background var(--dbg-transition-fast), color var(--dbg-transition-fast);
    background: 0 0;
    align-items: center;
    font-size: .75rem;
    font-weight: 500;
    display: inline-flex;
}

.debug-block__sort-btn:hover {
    background: var(--dbg-color-primary-soft);
}

.debug-block__sort-btn.is-active {
    background: var(--dbg-color-primary);
    color: var(--dbg-color-text-inverse);
}

.debug-block__db-info {
    padding: var(--dbg-spacing-1) var(--dbg-spacing-2);
    margin-bottom: var(--dbg-spacing-1-5);
    background: var(--dbg-color-primary-soft);
    border-radius: var(--dbg-radius-sm);
    color: var(--dbg-color-primary);
    font-size: .75rem;
    font-weight: 500;
}

.debug-block__list {
    flex-direction: column;
    display: flex;
}

.debug-block__query {
    padding: var(--dbg-spacing-1-5) 0;
    border-bottom: 1px solid var(--dbg-color-border-light);
}

.debug-block__query:last-child {
    border-bottom: none;
}

.debug-block__query-head {
    justify-content: space-between;
    align-items: baseline;
    gap: var(--dbg-spacing-1-5);
    margin-bottom: var(--dbg-spacing-1);
    display: flex;
}

.debug-block__query-src {
    color: var(--dbg-color-text-muted);
    word-break: break-all;
    font-size: .6875rem;
    line-height: 1.3;
}

.debug-block__query-time {
    align-items: center;
    gap: var(--dbg-spacing-0-5);
    color: var(--dbg-color-text-accent-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: .6875rem;
    display: inline-flex;
}

.debug-block__clock {
    color: var(--dbg-color-text-caption);
    flex-shrink: 0;
    display: inline-flex;
}

.debug-block__query-sql {
    padding: var(--dbg-spacing-1) var(--dbg-spacing-2);
    background: var(--dbg-color-bg-light);
    border-radius: var(--dbg-radius-sm);
    word-break: break-all;
    font-size: .6875rem;
    line-height: 1.4;
}

.debug-block__query-sql code {
    color: var(--dbg-color-text-secondary);
    font-family: SF Mono, Monaco, Menlo, monospace;
}

/* ======================================================================
   Модальные окна и авторизация
   ====================================================================== */

/* Блок: Общие элементы компонентных модальных окон. Ориентир: .modals. */
.modals {
    padding: var(--spacing-15) 0 var(--spacing-20);
}

.modals__head {
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-10);
    flex-direction: column;
    display: flex;
}

.modals__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 2.125rem;
}

.modals__desc {
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals__grid {
    gap: var(--spacing-4);
    grid-template-columns:1fr;
    display: grid;
}

.modals__trigger {
    min-height: 3rem;
    padding: var(--spacing-1-25) var(--spacing-6);
    background: var(--color-bg-white);
    color: var(--color-text-secondary);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    border: 1.5px solid #e1e2eb;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    display: inline-flex;
}

.modals__trigger:hover, .modals__trigger:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

/* Блок: Модальное окно авторизации. Ориентир: .modals-auth. */
.modals-auth {
    z-index: var(--z-modal);
    background: var(--color-modal-backdrop);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    position: fixed;
    inset: 0;
}

.modals-auth.is-open {
    display: flex;
}

.modals-auth {
    align-items: flex-start;
}

.modals-auth__dialog {
    width: 100%;
    max-width: 688px;
    max-height: calc(100vh - 40px);
    padding: var(--spacing-6-25) var(--spacing-20);
    background: var(--color-bg-card-soft);
    border-radius: var(--radius-xl);
    flex-direction: column;
    align-items: center;
    gap: 24px;
    display: flex;
    position: relative;
    overflow-y: auto;
}

.modals-auth__content {
    gap: var(--spacing-6);
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: flex;
}

.modals-auth__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.625rem;
}

.modals-auth__socials {
    align-items: center;
    gap: var(--spacing-4);
    align-self: center;
    display: flex;
}

.modals-auth__social {
    background: var(--color-bg-white);
    width: 3.125rem;
    height: 3.125rem;
    color: var(--color-primary);
    transition: opacity var(--transition-base), transform var(--transition-base);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    display: inline-flex;
}

.modals-auth__social:hover, .modals-auth__social:focus-visible {
    opacity: .85;
    transform: scale(1.04);
}

.modals-auth__social {
    background: var(--color-bg-white);
    color: #4e4e4e;
    border: 2px solid #4e4e4e;
    border-radius: 100px;
}

.modals-auth__social svg {
    width: 1.5rem;
    height: 1.5rem;
}

.modals-auth__social:hover, .modals-auth__social:focus-visible {
    color: var(--color-bg-white);
    background: #4e4e4e;
}

.modals-auth__close {
    z-index: 1;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: 16px;
}

.modals-auth__close svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-icon-muted);
}

.modals-auth__close:hover, .modals-auth__close:focus-visible {
    opacity: .7;
}

/* Блок: Модальное окно копирования. Ориентир: .modals-copy. */
.modals-copy {
    z-index: var(--z-tooltip);
    padding: var(--spacing-5);
    pointer-events: none;
    justify-content: center;
    align-items: flex-start;
    display: none;
    position: fixed;
    inset: 0;
}

.modals-copy.is-open {
    display: flex;
}

.modals-copy__dialog {
    align-items: center;
    gap: var(--spacing-2);
    width: 100%;
    max-width: 900px;
    padding: var(--spacing-6) var(--spacing-5-5);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    pointer-events: auto;
    display: flex;
    position: relative;
    box-shadow: 0 .5rem 1.5rem #0000001f;
}

.modals-copy__icon {
    color: #40a737;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
}

.modals-copy__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.modals-copy__text {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    flex: 1 1 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-copy__close {
    z-index: 1;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: 16px;
}

.modals-copy__close svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-icon-muted);
}

.modals-copy__close:hover, .modals-copy__close:focus-visible {
    opacity: .7;
}

/* Блок: Компонент модального окна modals-my и загрузка файлов. Ориентир: .modals-my__field. */
.modals-my__field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

.modals-my__label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.modals-my__input, .modals-my__textarea {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.modals-my__input:hover, .modals-my__textarea:hover, .modals-my__input:focus-within, .modals-my__textarea:focus-within {
    border-color: var(--color-primary);
}

.modals-my__input-field {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.modals-my__input-field::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.modals-my__fields {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.modals-my {
    z-index: var(--z-modal);
    background: var(--color-modal-backdrop);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    position: fixed;
    inset: 0;
}

.modals-my.is-open {
    display: flex;
}

.modals-my {
    align-items: flex-start;
    overflow-y: auto;
}

.modals-my__dialog {
    width: 100%;
    max-width: 56.25rem;
    max-height: calc(100vh - 40px);
    padding: var(--spacing-5-5) var(--spacing-6);
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 24px;
    display: flex;
    position: relative;
    overflow-y: auto;
}

.modals-my__close {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
}

.modals-my__close:hover, .modals-my__close:focus-visible {
    opacity: .75;
}

.modals-my__close {
    z-index: 1;
    color: var(--color-icon-muted);
}

.modals-my__close svg {
    width: .75rem;
    height: .75rem;
}

.modals-my__close:hover, .modals-my__close:focus-visible {
    opacity: 1;
    color: var(--color-text-primary);
}

.modals-my__content {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.modals-my__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.modals-my__desc {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-my__list {
    gap: var(--spacing-2);
    padding: 0 0 0 var(--spacing-5);
    flex-direction: column;
    list-style: outside;
    display: flex;
}

.modals-my__list li {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-my__input, .modals-my__textarea {
    padding: var(--spacing-1-25) var(--spacing-4);
    border-radius: var(--radius-lg);
}

.modals-my__input {
    justify-content: space-between;
    align-items: center;
}

.modals-my__input-field {
    min-width: 0;
    color: var(--color-text-secondary);
    flex: 1 1 0;
    padding: 0;
}

.modals-my__input-field::placeholder {
    letter-spacing: .01em;
}

.modals-my__counter {
    letter-spacing: .01em;
    color: var(--color-border);
    -webkit-user-select: none;
    user-select: none;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-my__textarea {
    resize: vertical;
    min-height: 9.375rem;
}

.modals-my__textarea-field {
    width: 100%;
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    min-height: 8.125rem;
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: block;
}

.modals-my__textarea-field::placeholder {
    color: var(--color-border);
}

.modals-my__upload {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.modals-my__upload-text {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.modals-my__upload-btn {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    justify-content: center;
    align-self: flex-start;
    align-items: center;
    gap: var(--spacing-1-25);
    padding: .5625rem var(--spacing-4) var(--spacing-1-25);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 2.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-my__upload-btn:hover, .modals-my__upload-btn:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.modals-my__upload-icon {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
}

.modals-my__upload-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.modals-my__submit {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    transition: background-color var(--transition-base);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-my__submit:hover, .modals-my__submit:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.modals-my__submit {
    align-self: flex-start;
    gap: var(--spacing-1);
    padding: .5625rem var(--spacing-4) var(--spacing-1-25);
    border-radius: 2.5rem;
}

/* Блок: Первый вариант окна оценки. Ориентир: .modals-rate1__code-label. */
.modals-rate1__code-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.modals-rate1__code-box {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.modals-rate1__code-box:hover, .modals-rate1__code-box:focus-within {
    border-color: var(--color-primary);
}

.modals-rate1__code-text {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.modals-rate1__code-text::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.modals-rate1__code {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.modals-rate1 {
    z-index: var(--z-modal);
    background: var(--color-modal-backdrop);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    position: fixed;
    inset: 0;
}

.modals-rate1.is-open {
    display: flex;
}

.modals-rate1__dialog {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 40px);
    padding: 40px;
    display: flex;
    position: relative;
    overflow-y: auto;
}

.modals-rate1__close {
    z-index: 1;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: 16px;
}

.modals-rate1__close svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-icon-muted);
}

.modals-rate1__close:hover, .modals-rate1__close:focus-visible {
    opacity: .7;
}

.modals-rate1__header {
    flex-direction: column;
    gap: 8px;
    padding-right: 32px;
    display: flex;
}

.modals-rate1__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.modals-rate1__desc {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-rate1__options {
    gap: var(--spacing-4) var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.modals-rate1__toggle {
    border: 1.5px solid var(--color-text-caption);
    border-radius: 2.5rem;
    align-items: center;
    display: inline-flex;
    overflow: hidden;
}

.modals-rate1__toggle-btn {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    color: var(--color-text-caption);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate1__toggle-btn.is-active {
    color: var(--color-primary);
}

.modals-rate1__toggle-btn + .modals-rate1__toggle-btn {
    border-left: 1.5px solid var(--color-text-caption);
}

.modals-rate1__toggle-btn:hover:not(.is-active) {
    color: var(--color-text-primary);
}

.modals-rate1__preview {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.modals-rate1__preview-head {
    align-items: center;
    gap: var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.modals-rate1__preview-logo {
    height: 2rem;
    display: block;
}

.modals-rate1__preview-rating {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.modals-rate1__preview-score {
    letter-spacing: .01em;
    color: var(--color-text-primary);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.modals-rate1__preview-star {
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.modals-rate1__preview-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-star);
}

.modals-rate1__preview-count {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.modals-rate1__code-label {
    color: var(--color-text-secondary);
}

.modals-rate1__code-box {
    padding: .5625rem var(--spacing-4);
    border-radius: var(--radius-lg);
}

.modals-rate1__code-text {
    color: var(--color-text-secondary);
}

.modals-rate1__btn {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    transition: background-color var(--transition-base);
    border-radius: 2.5rem;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate1__btn--primary {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    transition: background-color var(--transition-base);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate1__btn--primary:hover, .modals-rate1__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.modals-rate1__btn--primary {
    border-radius: 2.5rem;
    align-self: flex-start;
}

/* Блок: Второй вариант окна оценки. Ориентир: .modals-rate2__code-label. */
.modals-rate2__code-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.modals-rate2__code-box {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.modals-rate2__code-box:hover, .modals-rate2__code-box:focus-within {
    border-color: var(--color-primary);
}

.modals-rate2__code-text {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.modals-rate2__code-text::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.modals-rate2__code {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.modals-rate2 {
    z-index: var(--z-modal);
    background: var(--color-modal-backdrop);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    position: fixed;
    inset: 0;
}

.modals-rate2.is-open {
    display: flex;
}

.modals-rate2__dialog {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 40px);
    padding: 40px;
    display: flex;
    position: relative;
    overflow-y: auto;
}

.modals-rate2__close {
    z-index: 1;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: 16px;
}

.modals-rate2__close svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-icon-muted);
}

.modals-rate2__close:hover, .modals-rate2__close:focus-visible {
    opacity: .7;
}

.modals-rate2__header {
    flex-direction: column;
    gap: 8px;
    padding-right: 32px;
    display: flex;
}

.modals-rate2__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.modals-rate2__desc {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-rate2__options {
    gap: var(--spacing-4) var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.modals-rate2__toggle {
    border: 1.5px solid var(--color-text-caption);
    border-radius: 2.5rem;
    align-items: center;
    display: inline-flex;
    overflow: hidden;
}

.modals-rate2__toggle-btn {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    color: var(--color-text-caption);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate2__toggle-btn.is-active {
    color: var(--color-primary);
}

.modals-rate2__toggle-btn + .modals-rate2__toggle-btn {
    border-left: 1.5px solid var(--color-text-caption);
}

.modals-rate2__toggle-btn:hover:not(.is-active) {
    color: var(--color-text-primary);
}

.modals-rate2__preview {
    gap: var(--spacing-3);
    flex-direction: column;
    display: flex;
}

.modals-rate2__preview-head {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.modals-rate2__preview-logo {
    height: 2rem;
    display: block;
}

.modals-rate2__preview-title {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-rate2__ratings {
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.modals-rate2__rating {
    min-width: var(--spacing-20);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-bg-section);
    border: 2px solid var(--color-bg-section);
    border-radius: var(--radius-md);
    flex-direction: column;
    gap: 2px;
    display: flex;
}

.modals-rate2__rating-row {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.modals-rate2__rating-score {
    letter-spacing: .01em;
    color: var(--color-text-primary);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
}

.modals-rate2__rating-star {
    justify-content: center;
    align-items: center;
    width: 1.3125rem;
    height: 1.3125rem;
    display: inline-flex;
}

.modals-rate2__rating-star svg {
    width: 1.3125rem;
    height: 1.3125rem;
    color: var(--color-border-light);
}

.modals-rate2__rating-label {
    color: var(--color-text-primary);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
}

.modals-rate2__code-label {
    color: var(--color-text-secondary);
}

.modals-rate2__code-box {
    padding: .5625rem var(--spacing-4);
    border-radius: var(--radius-lg);
}

.modals-rate2__code-text {
    color: var(--color-text-secondary);
}

.modals-rate2__btn {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    transition: background-color var(--transition-base);
    border-radius: 2.5rem;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate2__btn--primary {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    transition: background-color var(--transition-base);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate2__btn--primary:hover, .modals-rate2__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.modals-rate2__btn--primary {
    border-radius: 2.5rem;
    align-self: flex-start;
}

/* Блок: Третий вариант окна оценки. Ориентир: .modals-rate3__code-label. */
.modals-rate3__code-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.modals-rate3__control, .modals-rate3__code-box {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.modals-rate3__control:hover, .modals-rate3__code-box:hover, .modals-rate3__control:focus-within, .modals-rate3__code-box:focus-within {
    border-color: var(--color-primary);
}

.modals-rate3__input, .modals-rate3__code-text {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.modals-rate3__input::-moz-placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.modals-rate3__code-text::-moz-placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.modals-rate3__input::placeholder, .modals-rate3__code-text::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.modals-rate3__code {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.modals-rate3 {
    z-index: var(--z-modal);
    background: var(--color-modal-backdrop);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    position: fixed;
    inset: 0;
}

.modals-rate3.is-open {
    display: flex;
}

.modals-rate3__dialog {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 40px);
    padding: 40px;
    display: flex;
    position: relative;
    overflow-y: auto;
}

.modals-rate3__close {
    z-index: 1;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: 16px;
}

.modals-rate3__close svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-icon-muted);
}

.modals-rate3__close:hover, .modals-rate3__close:focus-visible {
    opacity: .7;
}

.modals-rate3__header {
    gap: var(--spacing-2);
    flex-direction: column;
    padding-right: 32px;
    display: flex;
}

.modals-rate3__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.modals-rate3__desc {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-rate3__options {
    gap: var(--spacing-4) var(--spacing-6);
    flex-wrap: wrap;
    display: flex;
}

.modals-rate3__toggle {
    border: 1.5px solid var(--color-text-caption);
    border-radius: 2.5rem;
    align-items: center;
    display: inline-flex;
    overflow: hidden;
}

.modals-rate3__toggle-btn {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    color: var(--color-text-caption);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border: none;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate3__toggle-btn.is-active {
    color: var(--color-primary);
}

.modals-rate3__toggle-btn + .modals-rate3__toggle-btn {
    border-left: 1.5px solid var(--color-text-caption);
}

.modals-rate3__toggle-btn:hover:not(.is-active) {
    color: var(--color-text-primary);
}

.modals-rate3__setting {
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}

.modals-rate3__setting-icon {
    width: 2.75rem;
    color: var(--color-border);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.modals-rate3__setting-icon svg {
    width: 2.75rem;
    height: 3.4375rem;
}

.modals-rate3__setting-body {
    gap: var(--spacing-1);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.modals-rate3__setting-label {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-rate3__control {
    min-height: 2.5rem;
    padding: .5625rem var(--spacing-4);
    border-radius: var(--radius-lg);
}

.modals-rate3__input {
    min-width: 0;
    color: var(--color-text-secondary);
    flex: 1 1 0;
    padding: 0;
}

.modals-rate3__code-label {
    color: var(--color-text-secondary);
}

.modals-rate3__code-box {
    padding: .5625rem var(--spacing-4);
    border-radius: var(--radius-lg);
}

.modals-rate3__code-text {
    color: var(--color-text-secondary);
}

.modals-rate3__btn {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    transition: background-color var(--transition-base);
    border-radius: 2.5rem;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate3__btn--primary {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    transition: background-color var(--transition-base);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-rate3__btn--primary:hover, .modals-rate3__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.modals-rate3__btn--primary {
    border-radius: 2.5rem;
    align-self: flex-start;
}

/* Блок: Модальное окно modals-scan. Ориентир: .modals-scan__field. */
.modals-scan__field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

.modals-scan__label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.modals-scan__input, .modals-scan__textarea {
    min-height: 2.75rem;
    padding: var(--spacing-1-25) var(--spacing-4);
    background: var(--color-bg-input);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
    align-items: center;
    display: flex;
}

.modals-scan__input:hover, .modals-scan__textarea:hover, .modals-scan__input:focus-within, .modals-scan__textarea:focus-within {
    border-color: var(--color-primary);
}

.modals-scan__input-field {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.modals-scan__input-field::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.modals-scan__fields {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.modals-scan {
    z-index: var(--z-modal);
    background: var(--color-modal-backdrop);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    position: fixed;
    inset: 0;
}

.modals-scan.is-open {
    display: flex;
}

.modals-scan {
    align-items: flex-start;
    overflow-y: auto;
}

.modals-scan__dialog {
    background: var(--color-bg-white);
    width: 100%;
    max-width: 56.25rem;
    max-height: calc(100vh - 40px);
    padding: var(--spacing-5-5) var(--spacing-6);
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 24px;
    display: flex;
    position: relative;
    overflow-y: auto;
}

.modals-scan__close {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
}

.modals-scan__close:hover, .modals-scan__close:focus-visible {
    opacity: .75;
}

.modals-scan__close {
    z-index: 1;
    color: var(--color-icon-muted);
}

.modals-scan__close svg {
    width: .75rem;
    height: .75rem;
}

.modals-scan__close:hover, .modals-scan__close:focus-visible {
    opacity: 1;
    color: var(--color-text-primary);
}

.modals-scan__content {
    gap: var(--spacing-2);
    flex-direction: column;
    display: flex;
}

.modals-scan__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.modals-scan__desc {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-scan__list {
    gap: var(--spacing-2);
    padding: 0 0 0 var(--spacing-5);
    flex-direction: column;
    list-style: outside;
    display: flex;
}

.modals-scan__list li {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
}

.modals-scan__input, .modals-scan__textarea {
    padding: var(--spacing-1-25) var(--spacing-4);
    border-radius: var(--radius-lg);
}

.modals-scan__input {
    align-items: center;
}

.modals-scan__input-field {
    min-width: 0;
    color: var(--color-text-secondary);
    flex: 1 1 0;
    padding: 0;
}

.modals-scan__input-field::placeholder {
    letter-spacing: .01em;
}

.modals-scan__textarea {
    resize: vertical;
    min-height: 9.375rem;
}

.modals-scan__textarea-field {
    width: 100%;
    color: var(--color-text-secondary);
    letter-spacing: .01em;
    min-height: 8.125rem;
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3125rem;
    display: block;
}

.modals-scan__textarea-field::placeholder {
    color: var(--color-border);
}

.modals-scan__upload {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.modals-scan__upload-text {
    color: var(--color-text-primary);
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.modals-scan__tiles {
    gap: var(--spacing-2);
    flex-wrap: wrap;
    display: flex;
}

.modals-scan__tile {
    border: 2px solid var(--color-primary);
    background: #e0e6f8;
    border-radius: 1.5rem;
    flex-shrink: 0;
    width: 4.75rem;
    height: 4.75rem;
    padding: 0;
    position: relative;
}

.modals-scan__tile-x {
    pointer-events: none;
    width: 3.5625rem;
    height: 3.6875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modals-scan__tile-x:before, .modals-scan__tile-x:after {
    content: "";
    background: #b7c4e9;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
}

.modals-scan__tile-x:after {
    transform: rotate(90deg);
}

.modals-scan__tile--add {
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: border-color var(--transition-base);
    background: 0 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.modals-scan__tile--add:hover {
    border-color: var(--color-primary);
}

.modals-scan__tile-plus {
    width: .875rem;
    height: .875rem;
    color: var(--color-border);
    transition: color var(--transition-base);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.modals-scan__tile-plus svg {
    width: .875rem;
    height: .875rem;
}

.modals-scan__tile--add:hover .modals-scan__tile-plus {
    color: var(--color-primary);
}

.modals-scan__submit {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    transition: background-color var(--transition-base);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-scan__submit:hover, .modals-scan__submit:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.modals-scan__submit {
    gap: var(--spacing-1);
    padding: .5625rem var(--spacing-4) var(--spacing-1-25);
    border-radius: 2.5rem;
}

/* Блок: Модальное окно подписчиков. Ориентир: .modals-subscribers. */
.modals-subscribers {
    z-index: var(--z-modal);
    background: var(--color-modal-backdrop);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    position: fixed;
    inset: 0;
}

.modals-subscribers.is-open {
    display: flex;
}

.modals-subscribers__dialog {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 40px);
    padding: 40px;
    display: flex;
    position: relative;
    overflow: hidden;
}

.modals-subscribers__close {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
}

.modals-subscribers__close:hover, .modals-subscribers__close:focus-visible {
    opacity: .75;
}

.modals-subscribers__close {
    z-index: 1;
    color: var(--color-icon-muted);
}

.modals-subscribers__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.625rem;
}

.modals-subscribers__list {
    gap: var(--spacing-1);
    flex-direction: column;
    min-height: 0;
    display: flex;
    overflow-y: auto;
}

.modals-subscribers__item {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    min-height: 3.5rem;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--spacing-3);
    display: flex;
}

.modals-subscribers__item:nth-child(2n) {
    background: var(--color-bg-light);
}

.modals-subscribers__user {
    align-items: center;
    gap: var(--spacing-4);
    min-width: 0;
    display: inline-flex;
}

.modals-subscribers__avatar {
    border-radius: 35px;
    flex-shrink: 0;
    width: 3.125rem;
    height: 3.125rem;
    position: relative;
}

.modals-subscribers__online {
    border: 1.5px solid var(--color-bg-white);
    background: #74c867;
    border-radius: 50%;
    width: .625rem;
    height: .625rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

.modals-subscribers__name {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3125rem;
    overflow: hidden;
}

.modals-subscribers__date {
    letter-spacing: .01em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.modals-subscribers__more {
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    min-height: 2.4375rem;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border-radius: 2.5rem;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    padding: .5625rem 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
}

.modals-subscribers__more:hover, .modals-subscribers__more:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Блок: Модальные окна Bootstrap: фон, центрирование, карточка и заголовок. Ориентир: .modal-backdrop. */
.modal-backdrop {
    background-color: #000 !important;
    opacity: 0.5 !important;
}

/* 2. Центрирование модалки — только когда открыта */

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal.show .modal-dialog {
    /* width:100% + min-width:0 обязательны: flex-элемент не сжимается меньше
       min-width:auto, а контент модалки (строка соцкнопок nowrap) задаёт
       min-content шире контейнера — диалог раздувался и уезжал влево. */
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none !important;
    position: relative;
}

.modal.show .modal-content,
.modal.show .modal-body {
    min-width: 0;
}

/* 3. Карточка модалки по Figma: фон var(--color-bg-card-soft), скругление 24, padding 50/80 */

.modal-content {
    position: relative;
    background-color: var(--color-bg-white);
    border-radius: 24px;
    padding: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modal-body {
    padding: 30px 40px 40px;
    box-shadow: none;
}


/* 4. Кнопка закрытия — внутри окна, в правом верхнем углу (16px) */

/*
.modal-header {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border-bottom: 0;
    background: transparent;
    width: auto;
}
*/

.modal-header .modal-close {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    color: var(--color-icon-muted);
    line-height: 1;
}

.modal-header .modal-close svg {
    width: 16px;
    height: 16px;
    fill: var(--color-icon-muted);
}

.modal-header .modal-close:hover {
    opacity: 0.7;
    color: var(--color-icon-muted);
}

.modal-header .modal-title {
    display: none;
}

/* 5. Адаптив */


.modal-content .auth-box h3 {
    text-align: center;
}

.modal-content.bg_gray,
.modal-content.bg_gray .modal-body {
    background-color: #EDF2F6;
}

/* Блок: Окна Custombox: контейнер и внутреннее содержимое. Ориентир: .custombox-content. */
.custombox-content {
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.custombox-content > * {
    width: 100%;
    max-width: 800px;
    max-height: 85vh;
    margin: auto;
    background: var(--color-bg-white, #fff);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.custombox-content .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--color-border-light, #eee);
    flex-shrink: 0;
}

.custombox-content .modal-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary, #222);
    line-height: 1.4;
}

.custombox-content .modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #888);
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.custombox-content .modal-close:hover {
    background: var(--color-bg-section, #f5f5f5);
    color: var(--color-text-primary, #222);
}

.custombox-content .modal-close svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.custombox-content .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
}

.custombox-content .modal-body.p-0 {
    padding: 0;
    overflow: visible;
}

.custombox-content .modal-body.bg-dark {
    background: #222;
    color: #fff;
}

/* iframe inside modal */

.custombox-content .icms-modal-iframe {
    display: block;
    width: 100%;
    height: 500px;
    border: none;
}

/* spinner */

/* Блок: Индикатор загрузки модального окна. Ориентир: .icms-modal-spinner. */
.icms-modal-spinner {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sk-circle {
    width: 40px;
    height: 40px;
    position: relative;
}

.sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-circle .sk-child::before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: var(--color-primary, #2047CF);
    border-radius: 100%;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle .sk-circle2 {
    transform: rotate(30deg);
}

.sk-circle .sk-circle3 {
    transform: rotate(60deg);
}

.sk-circle .sk-circle4 {
    transform: rotate(90deg);
}

.sk-circle .sk-circle5 {
    transform: rotate(120deg);
}

.sk-circle .sk-circle6 {
    transform: rotate(150deg);
}

.sk-circle .sk-circle7 {
    transform: rotate(180deg);
}

.sk-circle .sk-circle8 {
    transform: rotate(210deg);
}

.sk-circle .sk-circle9 {
    transform: rotate(240deg);
}

.sk-circle .sk-circle10 {
    transform: rotate(270deg);
}

.sk-circle .sk-circle11 {
    transform: rotate(300deg);
}

.sk-circle .sk-circle12 {
    transform: rotate(330deg);
}

.sk-circle .sk-circle2::before {
    animation-delay: -1.1s;
}

.sk-circle .sk-circle3::before {
    animation-delay: -1s;
}

.sk-circle .sk-circle4::before {
    animation-delay: -0.9s;
}

.sk-circle .sk-circle5::before {
    animation-delay: -0.8s;
}

.sk-circle .sk-circle6::before {
    animation-delay: -0.7s;
}

.sk-circle .sk-circle7::before {
    animation-delay: -0.6s;
}

.sk-circle .sk-circle8::before {
    animation-delay: -0.5s;
}

.sk-circle .sk-circle9::before {
    animation-delay: -0.4s;
}

.sk-circle .sk-circle10::before {
    animation-delay: -0.3s;
}

.sk-circle .sk-circle11::before {
    animation-delay: -0.2s;
}

.sk-circle .sk-circle12::before {
    animation-delay: -0.1s;
}

/* ---------- Modal backdrop override ---------- */

/* Блок: Модальные окна Bootstrap: фон, центрирование, карточка и заголовок. Ориентир: .modal-backdrop. */
.modal-backdrop {
    background-color: #000 !important;
}

/* ---------- Modal centering ---------- */

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    margin: 0 auto;
}

/* ---------- Modal panel styles ---------- */

/*
.modal-content {
    border-radius: 24px;
    background: var(--color-bg-card-soft);
    border: 2px solid transparent;
    padding: 50px 80px;
    position: relative;
}
.modal-header {
    border-bottom: none;
    padding: 0 0 24px 0;
    background: transparent;
}
.modal-header .modal-title {
    color: var(--color-text-primary);
    font-family: Manrope, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    display: block;
}
.modal-header .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 16px;
    height: 16px;
    color: var(--color-icon-muted);
    background: transparent;
    border: none;
    padding: 0;
    opacity: 1;
}
.modal-header .modal-close > svg {
    width: 16px;
    height: 16px;
    fill: var(--color-icon-muted);
    stroke: var(--color-icon-muted);
}
.modal-body {
    padding: 0;
    background: transparent;
    box-shadow: none;
}
*/

/* ---------- Social auth buttons (litauth) ---------- */

/* Блок: Авторизация через соцсети: кнопки и переключатель. Ориентир: .litauth-social__btn--custom. */
.litauth-social__btn--custom {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: #fff !important;
    border: 2px solid #4e4e4e !important;
    border-radius: 100px !important;
    padding: 10px !important;
    color: #4e4e4e !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.litauth-social__btn--custom:hover,
.litauth-social__btn--custom:focus {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

.litauth-social__btn--custom .litauth-social__icon {
    margin: 0 !important;
    color: inherit;
}

.litauth-social__buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100%;
    flex-wrap: nowrap;
    margin-bottom: 15px !important;
}

/* ---------- Litauth toggle (checkbox in one line) ---------- */

.litauth-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    cursor: pointer;
}

.litauth-toggle__label {
    flex: 1 1 auto;
    min-width: 0;
}

.litauth-toggle__label p {
    margin: 0 !important;
    line-height: 1.4;
}

.litauth-toggle__slider {
    flex-shrink: 0;
}

/* ---------- H3 in modal (like modal title) ---------- */

/* Блок: Модальные окна Bootstrap: фон, центрирование, карточка и заголовок. Ориентир: .modal h3. */
.modal h3,
.modal-body h3,
.right_cell h3,
.litauth-social h3 {
    color: var(--color-text-primary);
    font-family: Manrope, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    margin: 0 0 24px 0;
}

/* ---------- Social auth buttons (litauth) - updated ---------- */

/* Блок: Авторизация через соцсети: кнопки и переключатель. Ориентир: .litauth-social__btn--custom. */
.litauth-social__btn--custom {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 10px !important;
    color: #4e4e4e !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.litauth-social__btn--custom .litauth-social__icon {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.litauth-social__btn:hover,
.litauth-social__btn:focus,
.litauth-social__btn--custom:hover,
.litauth-social__btn--custom:focus {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Нажатие по Figma: фон #DBE1F7, иконка #2047CF */
.litauth-social__btn:active,
.litauth-social__btn--custom:active {
    background: var(--color-primary-soft-active) !important;
    color: var(--color-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

.litauth-social__btn--custom .litauth-social__title {
    display: none !important;
}

.litauth-social__buttons {
    gap: 16px !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
}

/* ---------- Litauth info block (social__desc) ---------- */

.litauth-social__desc {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    background: rgba(78, 119, 181, 0.08);
    border-radius: 12px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.litauth-social__desc p {
    margin: 0 !important;
}

.litauth-social__desc::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 3a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1zM8 7.5a1 1 0 0 1 1 1V12a1 1 0 1 1-2 0V8.5a1 1 0 0 1 1-1z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 3a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1zM8 7.5a1 1 0 0 1 1 1V12a1 1 0 1 1-2 0V8.5a1 1 0 0 1 1-1z'/></svg>") no-repeat center / contain;
    color: var(--color-text-accent, #4e77b5);
}

/* ======================================================================
   Пользователи
   ====================================================================== */

/* Блок: Список пользователей. Ориентир: .users-list__field. */
.users-list__field {
    gap: var(--spacing-0-25);
    flex-direction: column;
    display: flex;
}

.users-list__field-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.users-list__input {
    width: 100%;
    min-width: 0;
    min-height: 1.375rem;
    color: var(--color-text-primary);
    resize: none;
    background: 0 0;
    border: none;
    outline: none;
    flex: 1 1 0;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: block;
}

.users-list__input::placeholder {
    color: var(--color-border);
    letter-spacing: .01em;
}

.users-list__input {
    font-size: .875rem;
    line-height: 1.125rem;
}

.widget-users-list {
    background: var(--color-bg-white);
    padding: var(--spacing-6) 0 var(--spacing-10);
}

.users-list {
    gap: var(--spacing-5);
    flex-direction: column;
    display: flex;
}

.users-list__breadcrumbs {
    align-items: center;
    gap: var(--spacing-0-75);
    color: var(--color-text-primary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.users-list__breadcrumb {
    color: var(--color-text-primary);
    transition: color var(--transition-base);
    text-decoration: none;
}

.users-list__breadcrumb:hover, .users-list__breadcrumb:focus-visible {
    color: var(--color-primary);
}

.users-list__breadcrumb-sep {
    color: var(--color-text-muted);
}

.users-list__breadcrumb-current {
    color: var(--color-text-primary);
}

.users-list__title {
    color: var(--color-text-primary);
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.18;
}

.users-list__filter {
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-section);
    border-radius: var(--radius-xl);
    flex-direction: column;
    display: flex;
}

.users-list__filter-toggle {
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    cursor: pointer;
    background: 0 0;
    border: none;
    width: 100%;
    padding: 0;
    display: flex;
}

.users-list__filter-label {
    color: #434343;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25rem;
}

.users-list__filter-chevron {
    width: 24px;
    height: 24px;
    color: var(--color-border);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.users-list__filter-body, .users-list__filter-row {
    gap: var(--spacing-4);
    flex-direction: column;
    display: flex;
}

.users-list__field {
    gap: var(--spacing-1);
    flex: 1 1 0;
    min-width: 0;
}

.users-list__input {
    height: 44px;
}

.users-list__input::placeholder {
    letter-spacing: 0;
}

.users-list__range {
    align-items: stretch;
    gap: 0;
    display: flex;
}

.users-list__range-field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.users-list__range-field__input {
    border-radius: 0;
}

.users-list__range-field:first-child .users-list__range-field__input {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.users-list__range-field:last-child .users-list__range-field__input {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.users-list__filter-buttons {
    gap: var(--spacing-1-25);
    flex-wrap: wrap;
    display: flex;
}

.users-list__btn {
    padding: var(--spacing-2) var(--spacing-4);
    text-align: center;
    white-space: nowrap;
    border-radius: var(--radius-full);
    cursor: pointer;
    min-height: 34px;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
    border: 1.5px solid #0000;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
    text-decoration: none;
    display: inline-flex;
}

.users-list__btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.users-list__btn--primary:hover, .users-list__btn--primary:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.users-list__btn--outlined {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: 0 0;
}

.users-list__btn--outlined:hover, .users-list__btn--outlined:focus-visible {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.users-list__toolbar {
    align-items: center;
    gap: var(--spacing-2);
    display: flex;
}

.users-list__sort {
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    display: inline-flex;
}

.users-list__sort-label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.users-list__sort-select {
    color: var(--color-primary);
    cursor: pointer;
    background: 0 0;
    border: none;
    padding: 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.125rem;
}

.users-list__items {
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.users-list__row {
    width: 100%;
}

.users-list__row--alt {
    background: var(--color-bg-section);
    border-radius: var(--radius-md);
}

.users-list__user {
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-2) var(--spacing-4);
    min-height: 66px;
    color: var(--color-text-primary);
    transition: background-color var(--transition-base);
    text-decoration: none;
    display: flex;
}

.users-list__user:hover, .users-list__user:focus-visible {
    background: #00000008;
}

.users-list__avatar {
    background: var(--color-icon-muted);
    border-radius: 50%;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: block;
}

.users-list__name {
    flex: auto;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3125rem;
}

.users-list__status {
    align-items: center;
    gap: var(--spacing-2);
    display: inline-flex;
}

.users-list__status-dot {
    border: 1.5px solid var(--color-bg-white);
    background: #74c867;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.users-list__status-text {
    color: var(--color-text-primary);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.users-list__time {
    color: var(--color-text-muted);
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
}

.users-list__pagination {
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    color: var(--color-primary);
    flex-wrap: wrap;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    display: flex;
}

.users-list__page-arrow {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
    cursor: pointer;
    transition: opacity var(--transition-base);
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
}

.users-list__page-arrow:hover, .users-list__page-arrow:focus-visible {
    opacity: .7;
}

.users-list__page-arrow[disabled] {
    opacity: .3;
    pointer-events: none;
}

.users-list__page-arrow .svg-arrow-left, .users-list__page-arrow .svg-arrow-right {
    width: 24px;
    height: 24px;
}

.users-list__page-list {
    align-items: center;
    gap: var(--spacing-1);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.users-list__page {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--spacing-2);
    color: inherit;
    font: inherit;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    background: 0 0;
    border: none;
}

.users-list__page:hover, .users-list__page:focus-visible {
    background: var(--color-fav);
}

.users-list__page.is-active {
    background: var(--color-fav);
    color: var(--color-primary);
}

.users-list__page-info {
    margin: 0 0 0 var(--spacing-2);
    color: var(--color-text-muted);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
}

/* Блок: Вкладки профиля — просмотр и редактирование. Ориентир: .icms-profile__tabs,
   .icms-profile__edit-tabs. Макет: Figma 606:2768. Ряд вкладок один, при нехватке ширины —
   горизонтальный скролл (как задумано у .mobile-menu-wrapper + автоскролл активного пункта в core.js). */
.mobile-menu-wrapper__tab {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-wrapper__tab::-webkit-scrollbar {
    display: none;
}

.icms-profile__tabs,
.icms-profile__edit-tabs {
    align-items: center;
    gap: var(--spacing-10);
    margin: 0;
    padding: 0;
    border-bottom: 1.5px solid var(--color-border-light);
    flex-wrap: nowrap;
    list-style: none;
    display: flex;
}

.icms-profile__tabs .nav-item,
.icms-profile__edit-tabs .nav-item {
    margin: 0 0 -1.5px;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.icms-profile__tabs .nav-link,
.icms-profile__edit-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    height: 34px;
    padding: var(--spacing-1) 0 !important;
    color: var(--color-text-secondary) !important;
    transition: color var(--transition-base);
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: Manrope, sans-serif;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 18px;
}

/* Синее подчёркивание из theme.css заменяется рамкой активного пункта. */
.icms-profile__tabs .nav-link::before,
.icms-profile__edit-tabs .nav-link::before {
    display: none !important;
}

.icms-profile__tabs .nav-link:hover,
.icms-profile__tabs .nav-link:focus,
.icms-profile__edit-tabs .nav-link:hover,
.icms-profile__edit-tabs .nav-link:focus {
    color: var(--color-text-primary) !important;
}

.icms-profile__tabs .nav-item.is-active,
.icms-profile__tabs .nav-item:has(.nav-link.active),
.icms-profile__edit-tabs .nav-item.is-active,
.icms-profile__edit-tabs .nav-item:has(.nav-link.active) {
    border-bottom: 1.5px solid var(--color-primary);
}

.icms-profile__tabs .nav-item.is-active .nav-link,
.icms-profile__tabs .nav-link.active,
.icms-profile__edit-tabs .nav-item.is-active .nav-link,
.icms-profile__edit-tabs .nav-link.active {
    color: var(--color-primary) !important;
}

/* Бейдж-счётчик (макет 606:2773): круг 26px, фон #ECF3FB, текст #202020.
   min-width + боковой отступ — чтобы влезли многозначные суммы (например, «1100»). */
.icms-profile__tabs .counter.badge,
.icms-profile__edit-tabs .counter.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 var(--spacing-1);
    color: var(--color-text-secondary) !important;
    background: var(--color-bg-section) !important;
    border-radius: var(--radius-xl);
    font-family: Manrope, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
}

/* ======================================================================
   Промокоды
   ====================================================================== */

/* Блок: Обнуление внутренних отступов главной страницы. */
.frontpage {
    padding: 0;
}

/* Блок: Обёртка виджета и позиционирование служебных элементов. Ориентир: .widget. */
.widget,
.icms-widget {
    position: relative;
}

/* Блок: Серый фон страницы. */
.page.__gray {
    background-color: var(--color-bg-card-soft);
}

/* Блок: Слайдер Swiper: показ только после завершения инициализации. */
.swiper {
    display: none;
}

.swiper.swiper-initialized {
    display: block;
}

/* Блок: Верхний отступ основной области в широком контейнере. */
.container-fluid > main {
    margin-top: 40px;
}

/* ======================================================================
   Список промокодов: карточки-«купоны».
   Ориентир: .promokod_list / .promokod-card / .promokod-code.
   ====================================================================== */

/* Блок: Сетка карточек промокодов. 3 в ряд на десктопе. */
.promokod_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* Список промокодов внутри поля-связи (напр. «Промокоды» в карточке школы,
   поле f_parent_promokod_id): 2 колонки на десктопе вместо 3. */
.field.ft_parent .promokod_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* …и 1 колонка в адаптиве. */
@media (max-width: 767.98px) {
    .field.ft_parent .promokod_list {
        grid-template-columns: 1fr;
    }
}

/* Блок: Карточка промокода-купона. Ориентир: .promokod-card. */
.promokod-card {
    --ppk-stub: var(--color-primary);
    --ppk-stub-ink: var(--color-text-inverse);
    --ppk-chip: rgba(255, 255, 255, .2);
    --ppk-ok: #17794d;
    --ppk-urgent: #b42318;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-section);
    border-radius: 20px;
}

.promokod-card--promo {
    --ppk-stub: #ffc53d;
    --ppk-stub-ink: #1a1f36;
    --ppk-chip: rgba(26, 31, 54, .12);
}

/* Корешок: тип предложения, просмотры, выгода и подпись. */
.promokod-card__stub {
    display: flex;
    flex-direction: column;
    padding: 18px 22px 24px;
    color: var(--ppk-stub-ink);
    background: var(--ppk-stub);
    border-radius: 20px 20px 0 0;
}

.promokod-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.promokod-card__kind {
    padding: 7px 11px;
    background: var(--ppk-chip);
    border-radius: var(--radius-full);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
}

.promokod-card__views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    opacity: .88;
}

.promokod-card__views svg,
.promokod-card__views .icms-svg-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.promokod-card__value {
    margin: 22px 0 0;
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}

.promokod-card__value--word {
    font-size: 1.625rem;
    line-height: 1.15;
}

.promokod-card__note {
    margin: 10px 0 0;
    max-width: 32ch;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    opacity: .94;
}

/* Линия отрыва. */
.promokod-card__tear {
    position: relative;
    height: 0;
}

.promokod-card__tear::before,
.promokod-card__tear::after {
    content: "";
    position: absolute;
    top: -11px;
    width: 22px;
    height: 22px;
    background: var(--color-bg-white);
    border-radius: 50%;
}

.promokod-card__tear::before {
    left: -11px;
}

.promokod-card__tear::after {
    right: -11px;
}

.promokod-card__tear i {
    position: absolute;
    top: -1px;
    right: 16px;
    left: 16px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-bg-white) 0 6px, transparent 6px 12px);
}

/* Тело: школа, условия, действия. */
.promokod-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    padding: 22px;
}

.promokod-card__school {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.promokod-card__school a {
    color: inherit;
    text-decoration: none;
}

.promokod-card__school a:hover,
.promokod-card__school a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.promokod-card__text {
    margin: 0;
    color: var(--color-text-caption);
    font-size: .9375rem;
    line-height: 1.5;
}

.promokod-card__foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
    padding-top: 6px;
}

/* Промокод с кнопкой копирования. */
.promokod-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 6px 6px 14px;
    background: var(--color-bg-white);
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.promokod-code__text {
    min-width: 0;
    color: var(--color-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    user-select: all;
}

.promokod-code__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: none;
    min-height: 40px;
    padding: 0 13px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 0;
    border-radius: var(--radius-md);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-base, .15s ease), color var(--transition-base, .15s ease);
}

.promokod-code__btn svg,
.promokod-code__btn .icms-svg-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.promokod-code__btn svg:last-of-type,
.promokod-code__btn .icms-svg-icon:last-of-type {
    display: none;
}

.promokod-code__btn:hover,
.promokod-code__btn:focus-visible {
    background: var(--color-primary-hover);
}

.promokod-code__btn.is-done {
    background: var(--ppk-ok);
    color: #fff;
}

.promokod-code__btn.is-done svg:first-of-type,
.promokod-code__btn.is-done .icms-svg-icon:first-of-type {
    display: none;
}

.promokod-code__btn.is-done svg:last-of-type,
.promokod-code__btn.is-done .icms-svg-icon:last-of-type {
    display: block;
}

/* Срок действия. */
.promokod-card__expiry {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    color: var(--color-text-caption);
    font-size: .875rem;
    line-height: 1.2;
}

.promokod-card__expiry svg,
.promokod-card__expiry .icms-svg-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--color-border);
}

.promokod-card__expiry-date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.promokod-card__expiry-left {
    color: var(--ppk-urgent);
    font-weight: 600;
}

.promokod-card__expiry.is-over {
    opacity: .7;
}

/* Кнопка перехода: оформление и ховеры как у стандартной .btn.btn--outline, на всю ширину. */
.promokod-card__cta a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 8px 16px;
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    border-radius: 40px;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.promokod-card__cta a:hover,
.promokod-card__cta a:focus-visible {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.promokod-card__cta a:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(32, 71, 207, 0.2);
}

.promokod-card__cta a:active {
    background: var(--color-primary-soft-active);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ======================================================================
   Общие утилиты и совместимость
   ====================================================================== */

/* Блок: Адаптивная видимость служебных элементов. Ориентир: .mobile-hidden. */
.mobile-hidden {
    display: none !important;
}

/* Блок: Утилиты отступов из схем виджетов (class_wrap). Ориентир: .pb-30. */
.pt-10 {
    padding-top: 10px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pt-30 {
    padding-top: 30px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-50 {
    padding-bottom: 50px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-100 {
    margin-top: 100px;
}

/* Блок: Растягивание блока на всю ширину экрана. Ориентир: .full-width. */
.full-width {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Блок: Утилиты размеров SVG-значков. Ориентир: .svg-12. */
.svg-12 {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px;
}

.svg-14 {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px;
}

.svg-16 {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px;
}

.svg-20 {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px;
}

.svg-24 {
    width: 24px !important;
    height: 24px !important;
    font-size: 24px;
}

.svg-28 {
    width: 28px !important;
    height: 28px !important;
    font-size: 28px;
}

.svg-32 {
    width: 32px !important;
    height: 32px !important;
    font-size: 32px;
}

.svg-36 {
    width: 36px !important;
    height: 36px !important;
    font-size: 36px;
}

.svg-40 {
    width: 40px !important;
    height: 40px !important;
    font-size: 40px;
}

.svg-48 {
    width: 48px !important;
    height: 48px !important;
    font-size: 48px;
}

/* Блок: Вывод результата рейтинга. Ориентир: .istars-result. */
.istars-result {
    display: flex !important;
    gap: 5px;
    align-items: center;
}

/* Блок: Панель тегов. Ориентир: .pp-tags-bar. */
.pp-tags-bar {
    margin: 50px 0 15px;
}

/* Блок: Базовый цвет ссылок. */
a {
    color: #2047CF;
}

/* ======================================================================
   Социальные кнопки
   ====================================================================== */

/* Блок: Кнопки «Поделиться» Яндекса: значки и состояния. Ориентир: .ya-share2__badge. */
.ya-share2__badge {
    color: #4e4e4e!important;
    width: 40px!important;
    height: 40px!important;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    background: #fff!important;
    border: 2px solid #e4e4e7!important;
    border-radius: 50% !important;
    justify-content: center!important;
    align-items: center!important;
    display: inline-flex!important;
}

.ya-share2__badge svg {
    width: 1.5rem!important;
    height: 1.5rem!important;
}

.ya-share2__badge:hover, .ya-share2__badge:focus-visible {
    color: var(--color-primary)!important;
    border-color: var(--color-primary)!important;
}

.ya-share2__item_copy .ya-share2__icon {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTYuNSA2LjIxNlYzLjkwNkM2LjUwMDEzIDMuNTMzMDYgNi42NDgzOCAzLjE3NTQ0IDYuOTEyMTMgMi45MTE3OEM3LjE3NTg5IDIuNjQ4MTIgNy41MzM1NiAyLjUgNy45MDY1IDIuNUgyMC4wOTM1QzIwLjQ2NjUgMi41IDIwLjgyNDMgMi42NDgxOCAyMS4wODggMi45MTE5NUMyMS4zNTE4IDMuMTc1NzIgMjEuNSAzLjUzMzQ3IDIxLjUgMy45MDY1VjE2LjA5NEMyMS40OTk5IDE2LjQ2NjkgMjEuMzUxNyAxNi44MjQ0IDIxLjA4OCAxNy4wODhDMjAuODI0NCAxNy4zNTE3IDIwLjQ2NjkgMTcuNDk5OSAyMC4wOTQgMTcuNUgxNy43NTgiIHN0cm9rZT0iIzRFNEU0RSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTYuMDk0IDYuNUgzLjkwNTVDMy41MzI2NSA2LjUwMDI3IDMuMTc1MTUgNi42NDg1NyAyLjkxMTYgNi45MTIzMUMyLjY0ODA1IDcuMTc2MDUgMi41IDcuNTMzNjUgMi41IDcuOTA2NVYyMC4wOTM1QzIuNSAyMC40NjY1IDIuNjQ4MTggMjAuODI0MyAyLjkxMTk1IDIxLjA4OEMzLjE3NTcyIDIxLjM1MTggMy41MzM0NyAyMS41IDMuOTA2NSAyMS41SDE2LjA5NEMxNi40NjY5IDIxLjQ5OTkgMTYuODI0NCAyMS4zNTE3IDE3LjA4OCAyMS4wODhDMTcuMzUxNyAyMC44MjQ0IDE3LjQ5OTkgMjAuNDY2OSAxNy41IDIwLjA5NFY3LjkwNTVDMTcuNDk5NyA3LjUzMjczIDE3LjM1MTUgNy4xNzUzMiAxNy4wODc5IDYuOTExNzhDMTYuODI0MiA2LjY0ODI0IDE2LjQ2NjggNi41MDAxMyAxNi4wOTQgNi41WiIgc3Ryb2tlPSIjNEU0RTRFIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=)!important;
}

.ya-share2__item_service_whatsapp .ya-share2__icon {
    background-image: url(data:image/svg+xml;base64,MQoyCjMKNAo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNMjIgMTJDMjIgMTcuNTIzIDE3LjUyMyAyMiAxMiAyMkMxMC4yNDQ1IDIyLjAwMjQgOC41MTk2MyAyMS41NDA4IDcgMjAuNjYyTDIgMjEuNUwyLjgzMiAxNkMyLjI4MjM1IDE0LjczODEgMS45OTkxIDEzLjM3NjQgMiAxMkMyIDYuNDc3IDYuNDc3IDIgMTIgMkMxNy41MjMgMiAyMiA2LjQ3NyAyMiAxMloiIHN0cm9rZT0iIzRFNEU0RSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTIuOTYwMSAxMy44NjhMMTUuMDQwMSAxMy40NjJMMTcuMDAwMSAxNC4yMTVWMTYuMDM4QzE3LjAwMDEgMTYuNjQ1IDE2LjQ3ODEgMTcuMTA4IDE1Ljg5MDEgMTYuOTc4QzE0LjM2NzEgMTYuNjQ0IDExLjYwMDEgMTUuODA0IDkuNjc4MTIgMTMuODY4QzcuODQ4MTIgMTIuMDI1IDcuMjIzMTIgOS40NTggNy4wMTAxMiA4LjA0MUM2LjkyNTEyIDcuNDc0IDcuMzc0MTIgNyA3Ljk0MzEyIDdIOS44MzcxMkwxMC41NzIxIDguOTY5TDEwLjE4MzEgMTEuMDciIHN0cm9rZT0iIzRFNEU0RSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=)!important;
}

.ya-share2__container_size_m .ya-share2__item_copy .ya-share2__icon_copy, .ya-share2__container_size_m .ya-share2__item_more .ya-share2__icon_more {
    background-size: 24px 24px !important;
}



/* ======================================================================
   Адаптивные стили — исходный порядок условий и правил
   ====================================================================== */

/* Адаптив: (max-width: 767.98px). Блоки: размеры заголовков h2–h6. */
@media (max-width: 767.98px) {

    /* Блок: Заголовок уровня 2. */
    h2 {
        font-size: 1.5rem;
    }

    /* Блок: Заголовок уровня 3. */
    h3 {
        font-size: 1.25rem;
    }

    /* Блок: Заголовок уровня 4. */
    h4 {
        font-size: 1.125rem;
    }

    /* Блок: Заголовок уровня 5. */
    h5 {
        font-size: 1rem;
    }

    /* Блок: Заголовок уровня 6. */
    h6 {
        font-size: 0.875rem;
    }
}

/* Адаптив: (min-width: 576px). Блоки: Подвал: бренд, ссылки, соцсети и платёжные значки. */
@media (min-width: 576px) {
    .footer {
        padding: 40px 0 30px;
    }
}

/* Адаптив: (min-width: 768px). Блоки: Подвал: бренд, ссылки, соцсети и платёжные значки. */
@media (min-width: 768px) {
    .footer {
        padding: 50px 0 30px;
    }
}

/* Адаптив: (max-width: 767.98px). Блоки: Верхняя полоса шапки: бренд, меню и профиль. */
@media (max-width: 767.98px) {

    .header-top__profile-name {
        display: none;
    }
}

/* Адаптив: (width >= 768px). Блоки: Группы полей формы в карточках. */
@media (width >= 768px) {
    fieldset,
    form .without-tabs fieldset {
        padding: var(--spacing-6);
    }
}

/* Адаптив: (max-width: 767.98px). Блоки: Фильтр pp: поля, флажки, диапазоны и панель действий; Нативные элементы ввода чисел и поиска; Комментарии pp: список и оформление элементов. */
@media (max-width: 767.98px) {
    /* Блок: Фильтр pp: поля, флажки, диапазоны и панель действий. */
    .pp-filter__row {
        grid-template-columns: 1fr;
    }

    /* Блок: Нативные элементы ввода чисел и поиска. */
    form input,
    form textarea,
    form select,
    .pp-form-input {
        font-size: 16px;
    }
    /* Блок: Комментарии pp: список и оформление элементов. */
    .pp-comments {
        padding-top: 24px;
    }

    .pp-comments__divider-active {
        width: 100px;
    }

    /* Кнопка обновления комментариев на мобильных — обычным потоком. */
    .pp-comments__list {
        padding-left: 0;
    }

    .pp-comments__refresh {
        position: static;
        margin-top: 16px;
    }
}

/* Адаптив: (max-width: 1199.98px). Блоки: Список статей и карточки материалов. */
@media (max-width: 1199.98px) {
    .articles_list__row,
    .articles_list__row--cols-3,
    .articles_list__row--cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .articles_list_item--big {
        grid-column: span 2;
    }
}

/* Адаптив: (max-width: 991.98px). Блоки: Список статей и карточки материалов. */
@media (max-width: 991.98px) {
    .articles_list__row,
    .articles_list__row--cols-3,
    .articles_list__row--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .articles_list_item--big {
        grid-column: span 2;
        grid-row: auto;
    }
}

/* Адаптив: (max-width: 575.98px). Блоки: Список статей и карточки материалов. */
@media (max-width: 575.98px) {
    .articles_list__row,
    .articles_list__row--cols-3,
    .articles_list__row--cols-4 {
        grid-template-columns: 1fr;
    }

    .articles_list_item--big {
        grid-column: auto;
    }
}

/* Адаптив: (max-width: 767.98px). Блоки: Список экспертов: сетка, карточки, рейтинг и отзывы; Список школ и карточки; Шапка медиаматериала: заголовок, метаданные, содержимое и боковая область. */
@media (max-width: 767.98px) {

    /* Блок: Список экспертов: сетка, карточки, рейтинг и отзывы. */
    .experts-list__card {
        flex-direction: column;
    }

    .experts-list__photo {
        width: 100%;
        border-radius: 16px;
    }

    .experts-list__photo img,
    .experts-list__img {
        aspect-ratio: 1 / 1;
    }
    /* Блок: Список школ и карточки. */
    .school-list {
        grid-template-columns: 1fr;
    }

    /* Блок: Шапка медиаматериала: заголовок, метаданные, содержимое и боковая область. */
    .media-header__top {
        flex-direction: column;
    }

    /* На мобильных шапка материала складывается в одну колонку: контент сверху,
       фото-сайдбар снизу. Без этого сайдбар с flex:0 0 360px сжимает контент
       (страницы школы/события/статьи, шаблон school_item и др.). */
    .media-header__content {
        flex-direction: column;
    }

    .media-header__main,
    .media-header__sidebar {
        flex: 0 0 auto;
        width: 100%;
    }

    .media-header__meta-bar {
        gap: 12px;
        padding: 12px 16px;
    }

    .media-header__meta-sep:nth-child(4),
    .media-header__meta-sep:nth-child(6) {
        display: none;
    }
}

/* Адаптив: (width >= 768px). Блоки: Главный баннер. */
@media (width >= 768px) {
    .widget-banner-main {
        padding: var(--spacing-8) 0 0;
    }

    .banner-main {
        align-items: center;
        gap: var(--spacing-8);
        flex-direction: row;
    }

    .banner-main__content {
        gap: var(--spacing-8);
    }

    .banner-main__logo {
        width: 159px;
        height: 26px;
    }

    .banner-main__btn {
        align-self: flex-start;
    }

    .banner-main__title {
        font-size: 1.75rem;
    }

    .banner-main__media {
        max-height: 380px;
    }

    .widget-banner-main .banner-main__media {
        max-height: 350px;
    }

    .widget-banner-main .banner-main__media {
        max-height: 519px;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Главный баннер. */
@media (width >= 1024px) {
    .widget-banner-main {
        padding: var(--spacing-15) 0 0;
    }

    .banner-main {
        gap: var(--spacing-12);
    }

    .banner-main__content {
        gap: var(--spacing-6);
    }

    .banner-main__logo {
        width: 196px;
        height: 32px;
    }

    .banner-main__title {
        font-size: 1.875rem;
        line-height: 2.125rem;
    }

    .banner-main__description {
        font-size: 1rem;
        line-height: 1.25rem;
    }
}

/* Адаптив: (width >= 1280px). Блоки: Главный баннер. */
@media (width >= 1280px) {
    .banner-main {
        gap: 120px;
    }
}

/* Адаптив: (width >= 576px). Блоки: Группировка событий по дням. */
@media (width >= 576px) {
    .calendars-day__list {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Адаптив: (width >= 768px). Блоки: Список событий календаря; Группировка событий по дням. */
@media (width >= 768px) {
    /* Блок: Список событий календаря. */
    .widget-calendars-list {
        padding: var(--spacing-8) 0 var(--spacing-15);
    }

    .calendars-list__title {
        font-size: 1.375rem;
    }

    .calendars-list__filter-row {
        flex-direction: row;
        align-items: flex-end;
    }

    /* Блок: Группировка событий по дням. */
    .calendars-day__title {
        font-size: 1.25rem;
    }

    .calendars-day__list {
        grid-template-columns:repeat(3, 1fr);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Список событий календаря. */
@media (width >= 1024px) {
    .widget-calendars-list {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }

    .calendars-list__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }

    .calendars-list__layout {
        gap: var(--spacing-6);
        grid-template-columns:1fr 280px;
    }
}

/* Адаптив: (width >= 768px). Блоки: Контактный блок учётной записи. */
@media (width >= 768px) {
    .widget-contact-account {
        padding: var(--spacing-8) 0;
    }

    .contact-account {
        min-height: 210px;
    }

    .contact-account__text {
        font-size: 1rem;
        line-height: 1.3125rem;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Контактный блок учётной записи. */
@media (width >= 1024px) {
    .contact-account__text {
        font-size: 1.0625rem;
        line-height: 1.3125rem;
    }
}

/* Адаптив: (width >= 768px). Блоки: Форма обратной связи; Контактная информация. */
@media (width >= 768px) {
    /* Блок: Форма обратной связи. */
    .widget-contact-form {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }

    .contact-form {
        align-items: center;
        gap: var(--spacing-15);
        flex-direction: row;
    }

    .contact-form__title {
        font-size: 1.25rem;
    }
    /* Блок: Контактная информация. */
    .widget-contact-info {
        padding: var(--spacing-8) 0 var(--spacing-10);
    }

    .contact-info {
        gap: var(--spacing-6);
    }

    .contact-info__layout {
        align-items: flex-start;
        gap: var(--spacing-10);
        flex-direction: row;
    }

    .contact-info__title {
        font-size: 1.375rem;
    }

    .contact-info__subtitle {
        font-size: 1.25rem;
    }

    .contact-info__line, .contact-info__hours {
        font-size: 1.0625rem;
    }

    .contact-info__media {
        aspect-ratio: 416/213;
        width: 416px;
        max-width: 416px;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Контактная информация. */
@media (width >= 1024px) {
    .widget-contact-info {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }
}

/* Адаптив: (width >= 768px). Блоки: Контентный блок главной страницы и карточки. */
@media (width >= 768px) {
    .widget-content-main {
        padding: var(--spacing-10) 0;
    }

    .content-main {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Контентный блок главной страницы и карточки. */
@media (width >= 1024px) {
    .widget-content-main {
        padding: var(--spacing-15) 0;
    }
}

/* Адаптив: (width >= 768px). Блоки: Форма обратной связи по курсу. */
@media (width >= 768px) {
    .widget-course-callback {
        padding: var(--spacing-8) 0 var(--spacing-10);
    }

    .course-callback {
        align-items: top;
        gap: var(--spacing-15);
        flex-direction: row;
    }

    .course-callback__title {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Форма обратной связи по курсу. */
@media (width >= 1024px) {
    .widget-course-callback {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }
}

/* Адаптив: (width >= 576px). Блоки: Комментарии и отзывы курса. */
@media (width >= 576px) {
    .course-comment__rating {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Адаптив: (width >= 768px). Блоки: Комментарии и отзывы курса. */
@media (width >= 768px) {
    .widget-course-comment {
        padding: var(--spacing-12) 0 var(--spacing-15);
    }

    .course-comment__rating {
        grid-template-columns:repeat(4, 1fr);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Комментарии и отзывы курса. */
@media (width >= 1024px) {
    .widget-course-comment {
        padding: var(--spacing-15) 0;
    }
}

/* Адаптив: (width >= 768px). Блоки: Содержимое страницы курса. */
@media (width >= 768px) {
    .widget-course-content {
        padding: var(--spacing-8) 0 var(--spacing-12);
    }

    .course-content {
        gap: var(--spacing-5);
    }

    .course-content__section-title {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Содержимое страницы курса. */
@media (width >= 1024px) {
    .widget-course-content {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }
}

/* Адаптив: (width >= 768px). Блоки: Описание курса. */
@media (width >= 768px) {
    .widget-course-description {
        padding: var(--spacing-8) 0 var(--spacing-12);
    }

    .course-description__teacher {
        position: relative;
        flex-direction: row;
        align-items: flex-start;
    }

    .course-description__teacher-photo {
        width: 8.375rem;
        max-width: 8.375rem;
    }

    .course-description__teacher-badge {
        position: absolute;
        left: 0;
        bottom: var(--spacing-5);
        align-self: auto;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Описание курса. */
@media (width >= 1024px) {
    .widget-course-description {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }
}

/* Адаптив: (width >= 768px). Блоки: Шапка страницы курса. */
@media (width >= 768px) {

    .course-header {
        gap: var(--spacing-6);
    }

    .course-header__main {
        flex-direction: row;
        align-items: flex-start;
    }

    .course-header__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }

    .course-header__share {
        width: 22rem;
        max-width: 22rem;
    }
}

/* Адаптив: (width >= 576px). Блоки: Рекомендованные курсы. */
@media (width >= 576px) {
    .course-recommend__row {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Адаптив: (width >= 768px). Блоки: Рекомендованные курсы. */
@media (width >= 768px) {
    .widget-course-recommend {
        padding: var(--spacing-12) 0 var(--spacing-15);
    }

    .course-recommend__title {
        font-size: 1.375rem;
    }

    .course-recommend__row {
        grid-template-columns:repeat(4, 1fr);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Рекомендованные курсы. */
@media (width >= 1024px) {
    .widget-course-recommend {
        padding: var(--spacing-15) 0;
    }
}

/* Адаптив: (width >= 768px). Блоки: Блок школы на странице курса. */
@media (width >= 768px) {
    .widget-course-school {
        padding: var(--spacing-8) 0 var(--spacing-12);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Блок школы на странице курса. */
@media (width >= 1024px) {
    .widget-course-school {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }
}

/* Адаптив: (width >= 768px). Блоки: Дополнительный текстовый блок курса. */
@media (width >= 768px) {
    .widget-course-seo {
        padding: var(--spacing-8) 0 var(--spacing-12);
    }

    .course-seo__section:first-of-type .course-seo__title {
        font-size: 1.375rem;
    }

    .course-seo + .course-seo__section .course-seo__title, .course-seo__section:not(:first-of-type) .course-seo__title {
        font-size: 1.25rem;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Дополнительный текстовый блок курса. */
@media (width >= 1024px) {
    .widget-course-seo {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }
}

/* Адаптив: (width >= 768px). Блоки: Тарифы курса. */
@media (width >= 768px) {
    .widget-course-tarif {
        padding: var(--spacing-8) 0 var(--spacing-12);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Тарифы курса. */
@media (width >= 1024px) {
    .widget-course-tarif {
        padding: var(--spacing-10) 0 var(--spacing-15);
    }
}

/* Адаптив: (width >= 576px). Блоки: Шапка категории курсов. */
@media (width >= 576px) {
    .courses-cat-header__actions {
        width: auto;
        min-height: 34px;
        padding: var(--spacing-2) var(--spacing-4);
    }
}

/* Адаптив: (width >= 768px). Блоки: Шапка категории курсов; Список категорий курсов. */
@media (width >= 768px) {
    /* Блок: Шапка категории курсов. */
    .courses-cat-header__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    /* Блок: Список категорий курсов. */
    .courses-cat-list__grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Список категорий курсов. */
@media (width >= 1024px) {
    .courses-cat-list__grid {
        grid-template-columns:repeat(3, 1fr);
    }
}

/* Адаптив: (width >= 576px). Блоки: Каталог курсов: список и карточки. */
@media (width >= 576px) {
    .courses-list__topbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .courses-list__topbar-btn {
        width: auto;
        min-height: 34px;
        padding: var(--spacing-2) var(--spacing-4);
    }

    .courses-list__notify {
        width: 46px;
        min-width: 46px;
        height: 46px;
        font-size: .875rem;
    }

    .courses-list__btn {
        min-height: 46px;
        padding: 13px 24px;
    }
}

/* Адаптив: (width >= 768px). Блоки: Каталог курсов: список и карточки. */
@media (width >= 768px) {
    .widget-courses-list {
        padding: var(--spacing-8) 0 var(--spacing-15);
    }

    .courses-list {
        gap: var(--spacing-6);
    }

    .courses-list__page-title-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .courses-list__page-title-actions {
        order: 0;
    }

    .courses-list__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }

    .courses-list__filter {
        padding: var(--spacing-4) var(--spacing-8);
    }

    .courses-list__filter-row {
        align-items: flex-end;
        gap: var(--spacing-4);
        flex-direction: row;
    }

    .courses-list__grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Каталог курсов: список и карточки. */
@media (width >= 1024px) {
    .widget-courses-list {
        padding: var(--spacing-10) 0;
    }

    .courses-list__grid {
        grid-template-columns:repeat(3, 1fr);
    }
}

/* Адаптив: (width >= 768px). Блоки: Форма добавления эксперта. */
@media (width >= 768px) {
    .widget-expert-add-form {
        padding: var(--spacing-8) 0 var(--spacing-15);
    }

    .expert-add-form {
        gap: var(--spacing-6);
    }

    .expert-add-form__csv {
        padding: var(--spacing-6);
    }

    .expert-add-form__csv-title {
        font-size: 1.25rem;
    }

    .expert-add-form__title {
        font-size: 1.25rem;
        line-height: 1.625rem;
    }

    .expert-add-form__card {
        padding: var(--spacing-6);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Форма добавления эксперта. */
@media (width >= 1024px) {
    .widget-expert-add-form {
        padding: var(--spacing-10) 0;
    }
}

/* Адаптив: (width >= 360px). Блоки: Виджет экспертов и его карточки. */
@media (width >= 360px) {
    .experts-card__top {
        align-items: flex-start;
        gap: var(--spacing-4);
        flex-direction: row;
    }

    .experts-card {
        padding: var(--spacing-4);
    }

    .experts-card__media {
        aspect-ratio: 103/108;
        width: 103px;
    }

    .experts-card__body {
        gap: var(--spacing-2);
    }

    .experts-card__meta {
        gap: var(--spacing-1);
        margin-top: 0;
    }
}

/* Адаптив: (width >= 576px). Блоки: Виджет экспертов и его карточки. */
@media (width >= 576px) {
    .widget-experts {
        padding: 40px 0;
    }
}

/* Адаптив: (width >= 768px). Блоки: Виджет экспертов и его карточки. */
@media (width >= 768px) {
    .experts {
        gap: var(--spacing-8);
    }

    .experts__title {
        font-size: 1.375rem;
    }

    .experts__description {
        font-size: 1.0625rem;
        line-height: 1.3125rem;
    }

    .experts__list {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* Адаптив: (width >= 1024px). Блоки: Виджет экспертов и его карточки. */
@media (width >= 1024px) {
    .widget-experts {
        padding: var(--spacing-15) 0;
    }

    .experts__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }

    .experts-card__top {
        display: contents;
    }

    .experts-card {
        padding: var(--spacing-4) var(--spacing-6);
        grid-template-columns:134px 1fr;
        grid-template-areas:"media head""media main""media meta";
        align-items: start;
        display: grid;
    }

    .experts-card__media {
        aspect-ratio: 67/100;
        grid-area: media;
        width: 134px;
    }

    .experts-card__body {
        display: contents;
    }

    .experts-card__head {
        grid-area: head;
    }

    .experts-card__main {
        grid-area: main;
    }

    .experts-card__meta {
        margin-top: var(--spacing-4);
        grid-area: meta;
    }

    .experts-card__media {
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        -ms-grid-column: 1;
    }

    .experts-card__head {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    .experts-card__main {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }

    .experts-card__meta {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }
}

/* Адаптив: (width >= 360px). Блоки: Подвал: бренд, ссылки, соцсети и платёжные значки. */
@media (width >= 360px) {
    .footer__top {
        grid-template-columns:1fr 1fr;
        gap: 32px;
        display: grid;
    }

    .footer__top > .footer__brand {
        grid-column: 1;
    }

    .footer__top > .footer__social {
        grid-area: 1/2;
        justify-self: end;
    }

    .footer__top > .footer__nav {
        grid-column: 1/-1;
    }
}

/* Адаптив: (width >= 576px). Блоки: Подвал: бренд, ссылки, соцсети и платёжные значки. */
@media (width >= 576px) {
    .footer__nav {
        gap: var(--spacing-8);
        grid-template-columns:1fr 1fr;
        display: grid;
    }

    .footer__nav > .footer__column:first-child, .footer__nav > .footer__column:nth-child(2) {
        grid-column: 1;
    }

    .footer__nav > .footer__column:nth-child(3) {
        grid-area: 1/2/span 2;
    }

    .footer__payments {
        justify-content: flex-start;
    }
}

/* Адаптив: (width >= 768px). Блоки: Подвал: бренд, ссылки, соцсети и платёжные значки. */
@media (width >= 768px) {
    .widget-footer {
        padding: 40px 0 30px;
    }

    .footer__nav {
        gap: var(--spacing-8);
        grid-template-columns:1fr 1fr;
        display: grid;
    }

    .footer__nav > .footer__column:first-child, .footer__nav > .footer__column:nth-child(2) {
        grid-column: 1;
    }

    .footer__nav > .footer__column:nth-child(3) {
        grid-area: 1/2/span 2;
    }

    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
    }

    .footer__payments {
        gap: var(--spacing-4);
    }

    .footer__payment {
        max-height: 45px;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Подвал: бренд, ссылки, соцсети и платёжные значки. */
@media (width >= 1024px) {
    .widget-footer {
        padding: var(--spacing-6-25) 0 30px;
    }

    .footer__top {
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
        display: flex;
    }

    .footer__nav {
        flex-direction: row;
        gap: 40px;
        display: flex;
    }

    .footer__column {
        flex: 1 1 0;
        min-width: 0;
    }

    .footer__legal {
        max-width: 750px;
    }

    .footer__payment {
        max-height: 27px;
    }
}

/* Адаптив: Уменьшение движения по настройке пользователя. Блоки: Верхняя полоса шапки: бренд, меню и профиль. */
@media (prefers-reduced-motion: reduce) {
    .header-top__notify-dot {
        box-shadow: none;
    }

    .header-top__notify-dot:after {
        opacity: 0;
        animation: none;
    }
}

/* Адаптив: (width >= 360px). Блоки: Верхняя полоса шапки: бренд, меню и профиль; Основная полоса шапки: логотип, навигация, поиск и подменю. */
@media (width >= 360px) {
    /* Блок: Верхняя полоса шапки: бренд, меню и профиль. */
    .header-top__inner {
        min-height: 56px;
    }

    .header-top__brand {
        width: 40px;
        height: 40px;
    }

    .header-top__brand-icon {
        width: 20px;
        height: 20px;
    }

    .header-top__notify-group {
        display: inline-flex;
    }

    .header-top__notify, .header-top__notify-icon {
        width: 24px;
        height: 24px;
    }

    .header-top__wallet-amount {
        min-width: 46px;
        padding: 2px 3px;
        font-size: 10px;
        line-height: 10px;
    }

    .header-top__wallet .icms-svg-icon {
        margin-left: -14px;
    }

    .header-top__profile-avatar {
        width: 34px;
        height: 34px;
    }

    /* Блок: Основная полоса шапки: логотип, навигация, поиск и подменю. */
    .header-bottom__burger {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 32px;
        height: 32px;
        display: inline-flex;
    }

    .header-bottom__burger-line--top, .header-bottom__burger-line--bottom {
        width: 20px;
    }

    .header-bottom__burger-line--middle {
        width: 28px;
    }

    .header-bottom__search {
        width: 32px;
        height: 32px;
    }
}

/* Мобильный поиск в шапке: раскрытая панель на всю ширину экрана.
   По умолчанию панель позиционируется внутри .header-bottom__right
   (кластер кнопок ~80px) и потому почти не имеет ширины. */
@media (width < 1024px) {
    .header-bottom__right {
        position: static;
    }

    .header-bottom__search-panel {
        top: 50%;
        left: 16px;
        right: 16px;
    }

    .header-bottom__search-panel.is-open {
        z-index: 5;
    }
}

/* Адаптив: (width >= 768px). Блоки: Верхняя полоса шапки: бренд, меню и профиль. */
@media (width >= 768px) {
    .header-top__actions {
        gap: var(--spacing-6);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Верхняя полоса шапки: бренд, меню и профиль; Основная полоса шапки: логотип, навигация, поиск и подменю. */
@media (width >= 1024px) {
    /* Блок: Верхняя полоса шапки: бренд, меню и профиль. */
    .header-top__inner {
        justify-content: center;
        gap: var(--spacing-8);
    }

    .header-top__right {
        gap: 32px;
    }

    .header-top__nav {
        display: block;
    }

    /* Блок: Основная полоса шапки: логотип, навигация, поиск и подменю. */
    .header-bottom__right {
        gap: 32px;
    }

    .header-bottom__burger {
        display: none;
    }

    #header-desktop-menu {
        display: block !important;
    }

    #header-mobile-menu {
        display: none !important;
    }
}

/* Адаптив: (width >= 1280px). Блоки: Верхняя полоса шапки: бренд, меню и профиль; Основная полоса шапки: логотип, навигация, поиск и подменю. */
@media (width >= 1280px) {
    /* Блок: Верхняя полоса шапки: бренд, меню и профиль. */
    .header-top__inner {
        justify-content: space-between;
    }

    .header-top__menu {
        gap: 16px;
    }

    /* Блок: Основная полоса шапки: логотип, навигация, поиск и подменю. */
    .header-bottom__inner {
        gap: 120px;
    }

    .header-bottom__tagline {
        display: block;
    }

    .header-bottom__menu {
        gap: 16px;
    }
}

/* Адаптив: Уменьшение движения по настройке пользователя. Блоки: Первый экран главной страницы. */
@media (prefers-reduced-motion: reduce) {
    .hero-main__title, .hero-main__subtitle, .hero-main__description, .hero-main__actions, .hero-main__media {
        animation: none;
    }
}

/* Адаптив: (width >= 576px). Блоки: Первый экран главной страницы. */
@media (width >= 576px) {
    .widget-hero-main {
        padding: 40px 0;
    }

    .hero-main__title {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .hero-main__actions {
        flex-direction: row;
    }

    .hero-main__btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Адаптив: (width >= 768px). Блоки: Первый экран главной страницы. */
@media (width >= 768px) {
    .hero-main {
        align-items: center;
        gap: var(--spacing-6);
        flex-direction: row;
    }

    .hero-main__content {
        gap: var(--spacing-6);
        flex: 0 0 350px;
    }

    .hero-main__titles {
        gap: var(--spacing-1-25);
    }

    .hero-main__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Первый экран главной страницы. */
@media (width >= 1024px) {
    .widget-hero-main {
        padding: 75px 0;
    }

    .hero-main__content {
        gap: var(--spacing-8);
        flex: 0 468px;
    }

    .hero-main__title {
        font-size: 1.875rem;
        line-height: 2.125rem;
    }

    .hero-main__subtitle {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }

    .hero-main__description {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .hero-main__media {
        aspect-ratio: 53/29;
        flex: auto;
        width: 530px;
    }
}

/* Адаптив: (width >= 1280px). Блоки: Первый экран главной страницы. */
@media (width >= 1280px) {
    .hero-main {
        gap: 109px;
    }
}

/* Адаптив: (width >= 576px). Блоки: Список медиаматериалов и карточки. */
@media (width >= 576px) {
    .medias-list {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Список медиаматериалов и карточки. */
@media (width >= 1024px) {
    .medias-list {
        grid-template-columns:repeat(12, 1fr);
    }

    .medias-list .media-card:first-child {
        grid-column: span 6;
    }

    .medias-list .media-card:nth-child(2), .medias-list .media-card:nth-child(3), .medias-list .media-card:nth-child(4), .medias-list .media-card:nth-child(5) {
        grid-column: span 3;
    }

    .medias-list .media-card:nth-child(6) {
        grid-column: span 6;
    }

    .medias-list .media-card:nth-child(7), .medias-list .media-card:nth-child(8), .medias-list .media-card:nth-child(9) {
        grid-column: span 4;
    }

    .medias-list .media-card:nth-child(n+10) {
        grid-column: span 3;
    }

    .media-card:first-child .media-card__media {
        height: 340px;
    }

    .media-card:nth-child(2) .media-card__media, .media-card:nth-child(3) .media-card__media, .media-card:nth-child(4) .media-card__media, .media-card:nth-child(5) .media-card__media {
        height: 140px;
    }

    .media-card:nth-child(6) .media-card__media {
        height: 340px;
    }

    .media-card:nth-child(7) .media-card__media, .media-card:nth-child(8) .media-card__media, .media-card:nth-child(9) .media-card__media {
        height: 170px;
    }

    .media-card:nth-child(n+10) .media-card__media {
        height: 140px;
    }
}

/* Адаптив: (width >= 576px). Блоки: Общие элементы компонентных модальных окон. */
@media (width >= 576px) {
    .modals__grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Адаптив: (width >= 768px). Блоки: Общие элементы компонентных модальных окон; Модальное окно авторизации; Компонент модального окна modals-my и загрузка файлов; Первый вариант окна оценки; Второй вариант окна оценки; Третий вариант окна оценки; Модальное окно modals-scan. */
@media (width >= 768px) {
    /* Блок: Общие элементы компонентных модальных окон. */
    .modals__title {
        font-size: 2.25rem;
        line-height: 2.625rem;
    }

    .modals__grid {
        grid-template-columns:repeat(3, 1fr);
    }
    /* Блок: Модальное окно авторизации. */
    .modals-auth__title {
        font-size: 1.375rem;
    }
    /* Блок: Компонент модального окна modals-my и загрузка файлов. */
    .modals-my__dialog {
        padding: var(--spacing-5-5);
    }
    /* Блок: Первый вариант окна оценки. */
    .modals-rate1__title {
        font-size: 1.375rem;
    }
    /* Блок: Второй вариант окна оценки. */
    .modals-rate2__title {
        font-size: 1.375rem;
    }
    /* Блок: Третий вариант окна оценки. */
    .modals-rate3__title {
        font-size: 1.375rem;
    }
    /* Блок: Модальное окно modals-scan. */
    .modals-scan__dialog {
        padding: var(--spacing-5-5);
    }
}

/* Адаптив: (width >= 576px). Блоки: Заголовок страницы. */
@media (width >= 576px) {
    .page-title__btn {
        min-height: 46px;
        padding: 13px 24px;
    }

    .page-title__notify {
        width: 46px;
        min-width: 46px;
        height: 46px;
        font-size: .875rem;
    }
}

/* Адаптив: (width >= 768px). Блоки: Заголовок страницы. */
@media (width >= 768px) {
    .page-title__title-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .page-title__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }

    .page-title__actions {
        order: 0;
    }
}

/* Адаптив: (width >= 576px). Блоки: Верхняя панель страницы: заголовок и действия; Блок партнёров. */
@media (width >= 576px) {
    /* Блок: Верхняя панель страницы: заголовок и действия. */
    .page-topbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .page-topbar__actions {
        width: auto;
    }

    .page-topbar__action-btn {
        width: auto;
        min-height: 34px;
        padding: var(--spacing-2) var(--spacing-4);
    }
    /* Блок: Блок партнёров. */
    .widget-partners {
        padding: 40px 0;
    }

    .partners__title {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .partners__list {
        flex-wrap: wrap;
        gap: 8px;
        overflow-x: visible;
    }

    .partners__item {
        height: 32px;
        padding: 0 8px;
    }

    .partners__logo {
        height: 32px;
    }
}

/* Адаптив: (width >= 768px). Блоки: Блок партнёров. */
@media (width >= 768px) {
    .partners {
        gap: var(--spacing-6);
    }
}

/* Адаптив: (width >= 1024px). Блоки: Блок партнёров. */
@media (width >= 1024px) {
    .widget-partners {
        padding: var(--spacing-15) 0;
    }

    .partners {
        align-items: center;
    }

    .partners__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }

    .partners__list {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 4px;
    }

    .partners__item {
        height: 18px;
        padding: 0;
    }

    .partners__logo {
        height: 18px;
    }
}

/* Адаптив: (width >= 1280px). Блоки: Блок партнёров. */
@media (width >= 1280px) {
    .partners {
        align-items: flex-start;
    }

    .partners__list {
        gap: 8px;
    }

    .partners__item {
        height: 22px;
        padding: 0 4px;
    }

    .partners__logo {
        height: 22px;
    }
}

/* Адаптив: (width >= 576px). Блоки: Блок популярных материалов и карточки. */
@media (width >= 576px) {
    .widget-populary {
        padding: 40px 0;
    }

    .populary__title {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .populary__slider {
        gap: 0;
    }

    .populary-card {
        height: auto;
        min-height: 384px;
    }
}

/* Адаптив: (width >= 768px). Блоки: Блок популярных материалов и карточки. */
@media (width >= 768px) {
    .populary__slider {
        gap: 16px;
    }

    .populary-card {
        height: 384px;
        min-height: auto;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Блок популярных материалов и карточки. */
@media (width >= 1024px) {
    .widget-populary {
        padding: var(--spacing-15) 0;
    }

    .populary__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }

    .populary__description {
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .populary-card {
        height: 400px;
        padding: 16px 24px;
    }
}

/* Адаптив: (width >= 768px). Блоки: Отзывы: панель, фильтр, форма, статусы и текст отзыва. */
@media (width >= 768px) {
    .widget-reviews-slider {
        padding: var(--spacing-10) 0;
    }

    .reviews-slider__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Отзывы: панель, фильтр, форма, статусы и текст отзыва. */
@media (width >= 1024px) {
    .widget-reviews-slider {
        padding: var(--spacing-15) 0;
    }
}

/* Адаптив: (width >= 768px). Блоки: Текстовый блок каталога школ. */
@media (width >= 768px) {
    .widget-schools-seo {
        padding: 4.5rem 0;
    }
}

/* Адаптив: (width >= 576px). Блоки: Блок статистики на главной. */
@media (width >= 576px) {
    .widget-stats-main {
        padding: 40px 0;
    }

    .stats-main__list {
        justify-content: space-between;
        align-items: stretch;
        gap: var(--spacing-4);
        flex-direction: row;
    }

    .stats-main__item {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 0 0 16px;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Блок статистики на главной. */
@media (width >= 1024px) {
    .widget-stats-main {
        padding: var(--spacing-15) 0;
    }

    .stats-main__value {
        font-size: 1.875rem;
        line-height: 2.125rem;
    }
}

/* Адаптив: (width >= 768px). Блоки: Список пользователей. */
@media (width >= 768px) {
    .widget-users-list {
        padding: var(--spacing-8) 0 var(--spacing-15);
    }

    .users-list {
        gap: var(--spacing-6);
    }

    .users-list__title {
        font-size: 1.375rem;
    }

    .users-list__filter-row {
        flex-direction: row;
        align-items: flex-end;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Список пользователей. */
@media (width >= 1024px) {
    .widget-users-list {
        padding: var(--spacing-10) 0 var(--spacing-20);
    }

    .users-list__title {
        font-size: 1.375rem;
        line-height: 1.625rem;
    }
}

/* Адаптив: Уменьшение движения по настройке пользователя. Блоки: Блок причин выбора и преимуществ. */
@media (prefers-reduced-motion: reduce) {
    .why-choose__card, .why-choose__header, .why-choose__item {
        animation: none;
    }
}

/* Адаптив: (width >= 576px). Блоки: Блок причин выбора и преимуществ. */
@media (width >= 576px) {
    .why-choose__title {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .why-choose__logo {
        width: 150px;
        height: 24px;
    }

    .why-choose__feature {
        padding-bottom: 8px;
    }
}

/* Адаптив: (width >= 768px). Блоки: Блок причин выбора и преимуществ. */
@media (width >= 768px) {
    .widget-why-choose {
        padding: 24px 0;
    }

    .why-choose__card {
        padding: var(--spacing-8) var(--spacing-6);
    }

    .why-choose__logo {
        width: 150px;
        height: 24px;
    }

    .why-choose__list {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .why-choose__feature {
        padding-bottom: 16px;
    }

    .why-choose__feature-media {
        border-radius: 16px;
    }

    .why-choose__feature-content {
        text-align: left;
        padding: 0 8px;
    }

    .why-choose__feature-title, .why-choose__feature-subtitle {
        font-size: .875rem;
        line-height: 1.125rem;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Блок причин выбора и преимуществ. */
@media (width >= 1024px) {
    .widget-why-choose {
        padding: var(--spacing-6) 0;
    }

    .why-choose__card {
        padding: 40px 48px;
    }

    .why-choose__title {
        font-size: 2rem;
        line-height: 1;
    }

    .why-choose__logo {
        width: 196px;
        height: 32px;
    }

    .why-choose__feature {
        padding-bottom: var(--spacing-2-25);
    }

    .why-choose__feature-media {
        border-radius: var(--radius-lg);
    }

    .why-choose__feature-content {
        padding: 0 var(--spacing-4);
    }

    .why-choose__feature-title {
        font-size: 1.125rem;
        line-height: 1.375rem;
    }

    .why-choose__feature-subtitle {
        font-size: 1rem;
        line-height: 1.25rem;
    }
}

/* Адаптив: (max-width: 767.98px). Блоки: Модальные окна Bootstrap: фон, центрирование, карточка и заголовок. */
@media (max-width: 767.98px) {
    .modal-content {
        padding: 40px 24px;
    }

    .modal-header {
        top: 12px;
        right: 12px;
    }
}

/* Адаптив: (max-width: 1199.98px). Блоки: Список промокодов: 2 карточки в ряд. */
@media (max-width: 1199.98px) {
    .promokod_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Адаптив: (max-width: 767.98px). Блоки: Список промокодов: 1 карточка в ряд. */
@media (max-width: 767.98px) {
    .promokod_list {
        grid-template-columns: 1fr;
    }
}

/* Адаптив: (max-width: 575.98px). Блоки: Список промокодов: карточки-«купоны». */
@media (max-width: 575.98px) {
    .promokod_list {
        gap: var(--spacing-3);
    }

    .promokod-card__stub {
        padding: 16px 18px 22px;
    }

    .promokod-card__body {
        padding: 20px 18px 18px;
    }

    .promokod-card__value {
        font-size: 1.875rem;
    }

    .promokod-card__value--word {
        font-size: 1.5rem;
    }

    .promokod-code {
        flex-wrap: wrap;
    }

    .promokod-code__btn {
        width: 100%;
    }
}

/* Адаптив: (max-width: 1199.98px). Блоки: Сетка событий и карточки. */
@media (max-width: 1199.98px) {
    .events_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Адаптив: (max-width: 991.98px). Блоки: Сетка событий и карточки. */
@media (max-width: 991.98px) {
    .events_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Адаптив: (max-width: 575.98px). Блоки: Сетка событий и карточки. */
@media (max-width: 575.98px) {
    .events_list {
        gap: var(--spacing-3);
        grid-template-columns: 1fr;
    }

    .events_card {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .events_card__photo {
        height: 7.5rem;
    }
}

/* Адаптив: универсальная шапка страницы — подписка над заголовком. */
@media (max-width: 575.98px) {
    .icms-body-toolbox {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 20px;
    }

    .icms-body-toolbox .subscribe_wrap {
        order: 0;
        align-self: flex-start;
        margin: 0 !important;
    }

    .icms-body-toolbox .icms-subscriptions__label {
        display: inline-block !important;
    }

    .icms-body-toolbox h1 {
        order: 1;
        max-width: 100%;
        margin: 0;
    }
}

/* Адаптив: страница календаря событий. Базовая разметка рассчитана на
   широкий экран, поэтому на телефонах календарь и список разводим по строкам. */
@media (max-width: 1199.98px) {
    .calendar-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar-aside {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        order: -1;
    }

    .calendar-aside .calendar-box {
        width: min(100%, 254px);
        margin-right: auto;
        margin-left: auto;
    }

    .calendar-content .events_list,
    .calendar-content .events_list.__grid-2,
    .calendar-content .events_list.__grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .calendar-content .events_list,
    .calendar-content .events_list.__grid-2,
    .calendar-content .events_list.__grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-content .events_list.__grid-1 .events_card {
        display: grid;
        grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
        align-items: start;
    }

    .calendar-content .events_list.__grid-1 .events_card__photo {
        width: 100%;
        height: auto;
        min-height: 150px;
        aspect-ratio: 16 / 9;
        flex-basis: auto;
        grid-row: span 2;
    }

    .calendar-content .events_list.__grid-1 .events_card__footer {
        width: 100%;
        height: auto;
        flex: none;
        flex-direction: row;
        align-items: center;
        padding-top: var(--spacing-2);
    }
}

@media (max-width: 575.98px) {
    .calendar-wrapper {
        gap: var(--spacing-4);
        padding: var(--spacing-3);
        border-radius: var(--radius-lg);
    }

    .calendar-aside {
        max-width: none;
    }

    .calendar-content .events_list,
    .calendar-content .events_list.__grid-1,
    .calendar-content .events_list.__grid-2,
    .calendar-content .events_list.__grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar-content .events_list.__grid-1 .events_card {
        display: flex;
        flex-direction: column;
    }

    .calendar-content .events_list.__grid-1 .events_card__photo,
    .calendar-content .events_list.__grid-2 .events_card__photo {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        flex-basis: auto;
    }

    .calendar-content .events_list.__grid-1 .events_card__footer {
        flex-direction: row;
        align-items: center;
    }

    .calendar-content .date-title {
        margin-bottom: 1rem;
        font-size: 1rem;
        line-height: 1.25rem;
    }

    .calendar-content .events_list + .date-title {
        margin-top: var(--spacing-5);
    }

    .events_card__body {
        gap: var(--spacing-2);
    }

    .events_card__desc {
        -webkit-line-clamp: 4;
    }

    .events_card__meta-item,
    .events_card__meta-date__row,
    .events_card__meta-place {
        overflow-wrap: anywhere;
    }
}

/* Адаптив: мобильное меню в основной полосе шапки. */
@media (max-width: 1023.98px) {
    body.header-menu-open {
        overflow: hidden;
    }

    .header-bottom {
        position: relative;
        z-index: 1030;
    }

    .header-bottom__burger {
        display: inline-flex;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        padding: 0;
        position: relative;
    }

    .header-bottom__burger-line {
        position: absolute;
        left: 50%;
        height: 1.5px;
        transform-origin: center;
        transition: top var(--transition-base), left var(--transition-base), width var(--transition-base), transform var(--transition-base), opacity var(--transition-base);
    }

    .header-bottom__burger-line--top {
        top: 8px;
        width: 20px;
    }

    .header-bottom__burger-line--middle {
        top: 15px;
        width: 28px;
    }

    .header-bottom__burger-line--bottom {
        top: 22px;
        width: 20px;
    }

    .header-bottom__burger-line--top,
    .header-bottom__burger-line--middle,
    .header-bottom__burger-line--bottom {
        transform: translateX(-50%);
    }

    .header-bottom__burger[aria-expanded="true"] .header-bottom__burger-line--top,
    .header-bottom__burger[aria-expanded="true"] .header-bottom__burger-line--bottom {
        top: 15px;
        width: 24px;
    }

    .header-bottom__burger[aria-expanded="true"] .header-bottom__burger-line--top {
        transform: translateX(-50%) rotate(45deg);
    }

    .header-bottom__burger[aria-expanded="true"] .header-bottom__burger-line--middle {
        opacity: 0;
        transform: translateX(-50%) scaleX(0);
    }

    .header-bottom__burger[aria-expanded="true"] .header-bottom__burger-line--bottom {
        transform: translateX(-50%) rotate(-45deg);
    }

    .header-bottom__burger:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Панель меню. Ориентир: Figma «768 Бургер-меню» — белый фон, скругление
       только снизу (0 0 6px 6px), тень 0 8px 10px rgba(0,0,0,.16), отступ 8px 0. */
    #header-desktop-menu {
        display: none !important;
    }

    #header-mobile-menu {
        display: block !important;
        position: fixed;
        top: var(--header-mobile-menu-top, 112px);
        right: 15px;
        left: 15px;
        z-index: 1030;
        max-height: calc(100dvh - var(--header-mobile-menu-top, 112px) - 15px);
        padding: var(--spacing-2) 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--color-bg-white);
        border: none;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 8px 10px rgba(0, 0, 0, .16);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    }

    /* ID в селекторе обязателен: он должен перебить #header-mobile-menu выше. */
    #header-mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .header-bottom__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .header-bottom__menu-item {
        width: 100%;
        flex-direction: column;
    }

    /* Пункт меню: плоская строка ровно 44px (паддинги 12/24, Inter 16/20 400, #4E4E4E).
       Разделитель 1px #E7E7F5 — как штрих INSIDE в макете: inset-тень, чтобы строка
       не вырастала до 45px. У последнего пункта разделителя нет (нода 1402:27718). */
    .header-bottom__menu-link {
        justify-content: flex-start;
        gap: var(--spacing-1-25);
        width: 100%;
        min-height: 44px;
        padding: var(--spacing-3) var(--spacing-6);
        color: #4e4e4e;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.25rem;
        text-align: left;
        white-space: normal;
        border: 0;
        border-radius: 0;
        box-shadow: inset 0 -1px 0 #e7e7f5;
    }

    .header-bottom__menu > .header-bottom__menu-item:last-child > .header-bottom__menu-link {
        box-shadow: none;
    }

    .header-bottom__menu-link:hover,
    .header-bottom__menu-link:focus-visible {
        background: var(--color-bg-section);
        color: var(--color-text-primary);
    }

    .header-bottom__menu-link:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    /* Раскрытый родительский пункт: фон #ECF3FB, текст #333336
       (стрелка разворачивается базовым правилом [aria-expanded=true]). */
    .header-bottom__menu-link[aria-expanded="true"] {
        background: #ecf3fb;
        color: #333336;
    }

    /* Подменю: раскрывается внутри панели, строки с отступом слева 48px (#333336). */
    .header-bottom__nav--mobile .header-bottom__submenu,
    .header-bottom__nav--mobile .header-bottom__submenu.show {
        position: static;
        inset: auto;
        display: block;
        float: none;
        width: 100%;
        min-width: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height var(--transition-base);
    }

    .header-bottom__nav--mobile .header-bottom__submenu.show {
        max-height: 1000px;
    }

    /* Вложенные пункты: паддинги 12px 48px и цвет #333336 (ноды 1402:27712/27714). */
    .header-bottom__submenu .header-bottom__menu-link {
        padding: var(--spacing-3) var(--spacing-12);
        color: #333336;
    }

    .header-bottom__menu-item--has-dropdown:not(.is-accordion-open) > .header-bottom__submenu {
        pointer-events: none;
    }
}

@media (max-width: 359.98px) {
    .header-bottom__burger {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-bottom__burger-line,
    .header-bottom__nav {
        transition: none;
    }
}

/* Адаптив: (min-width: 576px). Блоки: Адаптивная видимость служебных элементов. */
@media (min-width: 576px) {
    .mobile-hidden {
        display: inline-flex !important;
    }
}

/* Адаптив: (width >= 1024px). Блоки: Шапка медиаматериала: заголовок, метаданные, содержимое и боковая область. */
@media (width >= 1024px) {
    .media-header__sidebar-inner {
        position: sticky;
    }
}

/* ======================================================================
   Expert page: Figma responsive layout (606:2735, 1422:67885,
   1422:68407, 1422:68878)
   ====================================================================== */

#page-wrapper:has(.media-header .expert_item) > .container > .row > .col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#page-wrapper:has(.media-header .expert_item) .media-header {
    order: 1;
}

#page-wrapper:has(.media-header .expert_item) #comments_widget {
    order: 2;
}

#page-wrapper:has(.media-header .expert_item) #widget_wrapper_669 {
    order: 3;
}

#page-wrapper:has(.media-header .expert_item) .media-header__content {
    align-items: flex-start;
    gap: 24px;
}

#page-wrapper:has(.media-header .expert_item) .media-header__main {
    flex: 1 1 0;
    min-width: 0;
}

#page-wrapper:has(.media-header .expert_item) .media-header__sidebar.__expert {
    flex: 0 0 352px;
    width: 352px;
}

/* Мобильный дубль фото-сайдбара (после блока «О себе») скрыт на десктопе. */
#page-wrapper:has(.media-header .expert_item) .media-header__sidebar.__sidebar-mobile {
    display: none;
}

#page-wrapper:has(.media-header .expert_item) .media-header__share {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 50px 24px 16px;
}

#page-wrapper:has(.media-header .expert_item) .media-header__share-img {
    position: relative;
    aspect-ratio: 304 / 453.4667;
    overflow: visible;
}

#page-wrapper:has(.media-header .expert_item) .media-header__share-img img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top center;
    border-radius: 24px;
}

/* Страница школы: боковое изображение — стили как на странице эксперта. */

#page-wrapper:has(.media-header .school_item) .media-header__share-img {
    position: relative;
    aspect-ratio: 301 / 174;
    overflow: visible;
}

#page-wrapper:has(.media-header .school_item) .media-header__share-img img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top center;
    border-radius: 24px;
}

/* Страница медиа (статьи): без фиксированного соотношения и обрезки — просто картинка. */
#page-wrapper:has(.media-header .articles_item) .media-header__share-img {
    aspect-ratio: auto;
    height: auto;
}

#page-wrapper:has(.media-header .articles_item) .media-header__share-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: fill;
    border-radius: 24px;
}

#page-wrapper:has(.media-header .expert_item) .media-header__share-bookmark {
    top: 16px;
    right: 24px;
    width: 24px;
    height: 24px;
}

#page-wrapper:has(.media-header .expert_item) .media-header__share-bookmark svg {
    width: 24px;
    height: 24px;
}

#page-wrapper:has(.media-header .expert_item) .media-header__recommend {
    position: absolute;
    z-index: 1;
    left: -15px;
    bottom: 24px;
    min-height: 21px;
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    border-radius: 24px;
    background: #43ac6a;
    font-family: Inter, Manrope, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
}

#page-wrapper:has(.media-header .expert_item) #comments_widget {
    margin-top: 16px;
}

@media (max-width: 1279.98px) {
    #page-wrapper:has(.media-header .expert_item) > .container {
        padding-right: 32px;
        padding-left: 32px;
    }
}

@media (max-width: 1023.98px) {
    #page-wrapper:has(.media-header .expert_item) .media-header__sidebar.__expert {
        flex-basis: 352px;
        width: 352px;
    }

}

@media (max-width: 767.98px) {
    #page-wrapper:has(.media-header .expert_item) .media-header__content {
        flex-direction: column;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header__main,
    #page-wrapper:has(.media-header .expert_item) .media-header__sidebar.__expert {
        flex: 0 0 auto;
        width: 100%;
    }

    /* На мобильных фото-сайдбар уходит из шапки и показывается сразу после
       блока «О себе» (f_about), а не в самом низу. */
    #page-wrapper:has(.media-header .expert_item) .media-header__sidebar.__sidebar-desktop {
        display: none;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header__sidebar.__sidebar-mobile {
        display: block;
        margin: 16px 0;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header__share {
        padding: 50px 24px 16px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 24px;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header__share-img {
        grid-row: 1;
        grid-column: 1;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header__share-body {
        grid-row: 1;
        grid-column: 2;
    }

    #page-wrapper:has(.media-header .expert_item) .review {
        padding: 16px;
        border-radius: 16px;
    }
}

@media (max-width: 575.98px) {
    #page-wrapper:has(.media-header .expert_item) > .container {
        padding-right: 32px;
        padding-left: 32px;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header__share {
        padding: 50px 16px 16px;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header__share-bookmark {
        right: 16px;
    }

    #page-wrapper:has(.media-header .expert_item) .media-header__recommend {
        left: -7px;
    }

    #page-wrapper:has(.media-header .expert_item) #comments_widget > .tab-content > .tab-pane > .d-flex:first-child {
        gap: 8px;
        flex-wrap: wrap;
    }

    #page-wrapper:has(.media-header .expert_item) #comments_widget .review {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
}

/* Текстовые информационные окна: id оканчивается на _description. */
.tarif-item.border.bg-white {
    border-radius: 10px;
}

.icms-forms-hint .text-muted {
    font-size: 12px;
}

.modal[id$="_description"] .modal-dialog {
    max-width: 720px;
}

.modal[id$="_description"] .modal-content {
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 18px 56px rgba(31, 53, 97, .2);
}

.modal[id$="_description"] .modal-header {
    padding: 32px 36px 20px;
    background: transparent;
    border: 0;
}

.modal[id$="_description"] .modal-title {
    display: block;
    margin: 0;
    color: var(--color-text-primary);
    font-family: Manrope, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 26px;
}

.modal[id$="_description"] .modal-body {
    max-height: min(60vh, 560px);
    padding: 0 36px 28px;
    overflow-y: auto;
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.modal[id$="_description"] .modal-body h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
}

.modal[id$="_description"] .modal-body p {
    margin: 0 0 16px;
}

.modal[id$="_description"] .modal-body p:last-child {
    margin-bottom: 0;
}

.modal[id$="_description"] .modal-body a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modal[id$="_description"] .modal-footer {
    padding: 20px 36px 32px;
    border: 0;
    background: transparent;
}

.modal[id$="_description"] .modal-footer .btn {
    min-height: 44px;
    padding: 11px 20px;
    color: #fff;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    font-weight: 700;
    line-height: 20px;
}

.modal[id$="_description"] .modal-footer .btn:hover,
.modal[id$="_description"] .modal-footer .btn:focus-visible {
    color: #fff;
    background: #1638ae;
    border-color: #1638ae;
}

@media (max-width: 575.98px) {
    .modal[id$="_description"].show {
        padding: 16px;
    }

    .modal[id$="_description"] .modal-header {
        padding: 24px 20px 16px;
    }

    .modal[id$="_description"] .modal-title {
        font-size: 18px;
        line-height: 23px;
    }

    .modal[id$="_description"] .modal-body {
        max-height: 58vh;
        padding: 0 20px 24px;
        font-size: 15px;
        line-height: 22px;
    }

    .modal[id$="_description"] .modal-footer {
        padding: 16px 20px 24px;
    }

    .modal[id$="_description"] .modal-footer .btn {
        width: 100%;
    }
}

/* Иконка уведомлений в шапке. */
.header-top__notify {
    width: 24px;
    height: 24px;
    color: #fff;
    opacity: 1;
}

.header-top__notify svg {
    width: 24px;
    height: 24px;
}

.header-top__notify svg path {
    fill: none;
    stroke: #fff;
}

.header-top__notify:hover,
.header-top__notify:focus-visible,
.header-top__notify:active {
    color: #869ae3;
    background: transparent;
    border-radius: 0;
    opacity: 1;
}

.header-top__notify:hover svg path,
.header-top__notify:focus-visible svg path,
.header-top__notify:active svg path {
    fill: #3659d4;
    stroke: #869ae3;
}

.header-top__notify-dot {
    top: 2.5px;
    right: 2px;
    width: 7px;
    height: 7px;
    background: #ff2d2d;
    border-color: #fff;
    box-shadow: none;
}

.header-top__notify-dot::after {
    content: none;
    animation: none;
}

.header-top__notify:hover .header-top__notify-dot,
.header-top__notify:focus-visible .header-top__notify-dot,
.header-top__notify:active .header-top__notify-dot {
    border-color: #dbe1f7;
}

/* Персональное выпадающее меню в шапке. */
.dropdown-menu.dropdown-menu-right.menu-personal {
    width: 215px;
    min-width: 215px;
    margin-top: 8px;
    padding: 8px 0;
    background: #fff;
    border: 1px solid #b8bfd8;
    border-radius: 6px;
    box-shadow: none;
}

.dropdown-menu.menu-personal .nav-item {
    display: block;
    margin: 0;
}

.dropdown-menu.menu-personal .nav-link,
.dropdown-menu.menu-personal .dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 8px 24px;
    margin: 0;
    color: #4e4e4e;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-menu.menu-personal .nav-link:hover,
.dropdown-menu.menu-personal .nav-link:focus-visible,
.dropdown-menu.menu-personal .dropdown-item:hover,
.dropdown-menu.menu-personal .dropdown-item:focus-visible,
.dropdown-menu.menu-personal .nav-link.active,
.dropdown-menu.menu-personal .nav-item.active > .nav-link {
    color: #4e4e4e;
    background: #ecf3fb;
}

/* Первый уровень: без иконок, счётчик следует сразу за подписью. */
.dropdown-menu.menu-personal > .nav-item > .nav-link {
    gap: 0;
}

.dropdown-menu.menu-personal > .nav-item > .nav-link > .icms-svg-icon,
.dropdown-menu.menu-personal > .nav-item > .nav-link > svg {
    display: none;
}

.dropdown-menu.menu-personal > .nav-item > .nav-link > .nav-item-text {
    flex: 0 1 auto;
}

.dropdown-menu.menu-personal > .nav-item > .nav-link > .counter.badge {
    flex: 0 0 auto;
    margin-left: 4px !important;
}

/* Вложенные подменю на десктопе раскрываются аккордеоном внутри панели
   (как в бургер-меню), а не вылетом влево: static вместо absolute + float:none.
   Иначе flex-элемент не сжимается и панель вылезает за пределы меню. */
body[data-device="desktop"] .dropdown-menu.menu-personal .dropdown-menu {
    position: static;
    float: none;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    transform: none;
}

body[data-device="desktop"] .dropdown-menu.menu-personal .dropdown-menu.show {
    animation: pp-menu-personal-in 0.15s ease-out;
}

@keyframes pp-menu-personal-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* Пункты второго уровня: отступы 8px 16px и зазор 10px (макет 1402:28047). */
.dropdown-menu.menu-personal .dropdown-menu .dropdown-item {
    padding: 8px 16px;
    gap: 10px;
}

/* Пункт с подменю на десктопе: стрелка слева от текста, треугольник 6x11, зазор 4px (макет 1402:28076). */
body[data-device="desktop"] .dropdown-menu.menu-personal > .nav-item > .nav-link.dropdown-toggle::after,
body[data-device="desktop"] .dropdown-menu.menu-personal .dropdown-menu .dropdown-item.dropdown-toggle::after {
    display: none;
}

body[data-device="desktop"] .dropdown-menu.menu-personal .nav-link.dropdown-toggle::before,
body[data-device="desktop"] .dropdown-menu.menu-personal .dropdown-item.dropdown-toggle::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 11px;
    margin-right: 4px;
    background: url("data:image/svg+xml,%3Csvg width='6' height='11' viewBox='0 0 6 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.24468 5.9027C-0.080748 5.52693 -0.080747 4.96916 0.244681 4.59339L3.92181 0.347415C4.52794 -0.352489 5.67773 0.0761843 5.67773 1.00207L5.67773 9.49403C5.67773 10.4199 4.52794 10.8486 3.92181 10.1487L0.24468 5.9027Z' fill='%234E4E4E'/%3E%3C/svg%3E") no-repeat center center / contain;
}

/* Раскрытый пункт: та же стрелка повёрнута вниз. */
body[data-device="desktop"] .dropdown-menu.menu-personal .nav-item.show > .nav-link.dropdown-toggle::before,
body[data-device="desktop"] .dropdown-menu.menu-personal .nav-item.show > .dropdown-item.dropdown-toggle::before {
    transform: rotate(90deg);
}

/* Иконки пунктов меню — в синем цвете сайта (по анностации в макете). */
.dropdown-menu.menu-personal .icms-svg-icon,
.dropdown-menu.menu-personal svg {
    color: var(--color-primary);
    fill: var(--color-primary);
}

@media (max-width: 767.98px) {
    .dropdown-menu.dropdown-menu-right.menu-personal {
        width: min(360px, calc(100vw - 32px));
        min-width: min(360px, calc(100vw - 32px));
    }

    .dropdown-menu.menu-personal .nav-link,
    .dropdown-menu.menu-personal .dropdown-item {
        min-height: 44px;
        padding: 12px 16px;
    }
}

/* Медиа-вставки контента: видео не вылезает за экран. Атрибут width="1280" у iframe
   шире контентной колонки и на десктопе, и на мобильном. Пропорции из атрибутов
   width/height проставляет icms.template.initResponsiveEmbeds — без height:auto
   iframe схлопывается до дефолтных 150px. */
main .value iframe,
main .value embed,
main .value object {
    max-width: 100%;
    height: auto;
}

/* Длинные CTA-кнопки в контенте («ЗАРЕГИСТРИРОВАТЬСЯ И ДОБАВИТЬ СВОЮ ОНЛАЙН-ШКОЛУ»):
   .btn ставит white-space: nowrap, из-за чего кнопка шире экрана. */
main .value .btn {
    max-width: 100%;
    white-space: normal;
}

/* Адаптивные таблицы контента: на мобильном строка таблицы становится карточкой,
   заголовки колонок переезжают в подписи к ячейкам (td[data-label] заполняет
   templates/pp/js/core.js -> icms.template.initResponsiveTables). */
@media (max-width: 767.98px) {
    main .value table {
        display: block;
        width: 100%;
        border: 0;
    }

    main .value table thead {
        display: none;
    }

    main .value table tbody,
    main .value table tr,
    main .value table td {
        display: block;
        width: 100%;
    }

    main .value table tr {
        margin: 0 0 12px 0;
        padding: 4px 12px;
        background: var(--color-bg-white);
        border: 1px solid var(--color-border-light);
        border-radius: 16px;
    }

    main .value table tr:last-child {
        margin-bottom: 0;
    }

    main .value table td {
        padding: 8px 0;
        border: 0;
        text-align: left !important;
        word-break: break-word;
    }

    main .value table td + td {
        border-top: 1px solid var(--color-bg-section);
    }

    main .value table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin: 0 0 4px 0;
        color: var(--color-text-caption);
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
    }

    main .value table td[colspan]::before {
        content: none;
    }
}

/* Блок «Поделиться»: кнопки рисует templates/pp/js/pp/share.js.
   Базовый вид кнопок и иконок — в разделе выше (.media-header__share-btn).
   Ниже только то, что относится к унифицированному рендеру. */
.media-header__share-btn {
    position: relative;
}

.pp-share__copied {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--color-text-primary);
    color: var(--color-text-inverse);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

/* ======================================================================
   Оверлеи выше шапки: .header { z-index: 999999 } перекрыл бы модалки,
   лайтбоксы и тосты. Поднимаем их над шапкой.
   ====================================================================== */
/* Бэкдроп ниже окна: у них один и тот же stacking context, и Bootstrap
   добавляет .modal-backdrop в DOM ПОСЛЕ .modal — при равном z-index
   бэкдроп оказался бы поверх окна. */
.modal-backdrop {
    z-index: 1000001;
}

.modal {
    z-index: 1000002;
}

.pswp {
    z-index: 1000002;
}

#lightcase-overlay {
    z-index: 1000003;
}

#lightcase-case,
#lightcase-info,
#lightcase-loading {
    z-index: 1000004;
}

#toast-container {
    z-index: 1000005;
}

/* ======================================================================
   Форма авторизации (шаблон controllers/auth/login.tpl.php)
   Модалка: .modal-content .auth-box > .pp-auth; страница: .pp-auth--page
   ====================================================================== */

/* Блок: Авторизация pp: карточка, поля, кнопки, соцсети. Ориентир: .pp-auth. */
.pp-auth__title {
    margin: 0 0 24px 0;
    color: var(--color-text-primary);
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
}

/* Страница (не ajax): та же карточка, по центру */
.pp-auth--page {
    max-width: 800px;
    margin: 0 auto;
    background: var(--color-bg-card-soft);
    border-radius: 24px;
    padding: 40px 50px;
}

@media (max-width: 767.98px) {
    .pp-auth--page {
        padding: 32px 20px;
    }
}

/* Заголовок филдсета ядра внутри формы не нужен — есть .pp-auth__title */
.pp-auth .expert-add-form__card-head {
    display: none;
}

/* Филдсет-карточка глобального стиля внутри авторизации не нужна */
.pp-auth fieldset {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    display: block;
}

/* Поля */
.pp-auth .form-group {
    margin-bottom: 8px;
}

.pp-auth .hint-box label {
    display: block;
    margin: 0 0 2px 0;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

.pp-auth .form-control {
    height: var(--pp-field-h);
    padding: var(--pp-field-padding-y) var(--pp-field-padding-x);
    background: var(--pp-field-bg);
    border: 1px solid var(--pp-field-border);
    border-radius: var(--pp-field-radius);
    color: var(--pp-field-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    box-shadow: none;
}

.pp-auth .form-control::placeholder {
    color: var(--pp-field-placeholder);
    opacity: 1;
}

.pp-auth .form-control:focus {
    border-color: var(--pp-field-border-focus);
    box-shadow: none;
    outline: 0;
}

/* Ряд «Запомнить меня» + «Забыли пароль?» */
.pp-auth .form-group .pp-filter__check {
    display: flex;
    width: 100%;
    margin-top: 10px;
}

.pp-auth .pp-filter__check-label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: auto;
    min-height: 18px;
    color: #202020;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

.pp-auth .auth_restore_link {
    color: var(--color-primary);
    font-size: 14px;
    text-decoration: underline;
}

.pp-auth .auth_restore_link:hover {
    color: #1235b3;
}

/* Кнопки: «Войти» + «Зарегистрироваться» */
.pp-auth .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.pp-auth .buttons .button-submit {
    min-width: 210px;
    min-height: 36px;
    padding: 8px 16px;
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.pp-auth .buttons .button-submit:hover,
.pp-auth .buttons .button-submit:focus {
    background: #1235b3;
    border-color: #1235b3;
    color: var(--color-text-inverse);
}

.pp-auth .buttons .button-cancel.btn-secondary {
    min-width: 210px;
    min-height: 36px;
    padding: 8px 16px;
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.pp-auth .buttons .button-cancel.btn-secondary:hover,
.pp-auth .buttons .button-cancel.btn-secondary:focus {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
}

/* Мобильные кнопки авторизации: столбиком во всю ширину колонки формы.
   У кнопок min-width: 210px, на узких экранах это шире самой колонки —
   они остаются 210px и прижимаются к левому краю, а не по центру. */
@media (max-width: 575.98px) {
    .pp-auth .buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pp-auth .buttons .button-submit,
    .pp-auth .buttons .button-cancel.btn-secondary {
        width: 100%;
        min-width: 0;
    }

    .pp-auth__social-title {
        text-align: center;
    }

    /* Соцкнопки 50px + gap 16px занимают 248px и не влезают в колонку формы
       на мобильном — уменьшаем круг и иконку, ряд 4x42 + 3x12 = 204px. */
    .pp-auth__social .litauth-social__buttons {
        gap: 12px !important;
    }

    .pp-auth__social .litauth-social__btn--custom {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 8px !important;
    }

    .pp-auth__social .litauth-social__btn--custom .svg-24 {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Соцкнопки в один ряд (nowrap) не дают модалке сжаться на узких экранах. */
.pp-auth__social .litauth-social__buttons {
    flex-wrap: wrap;
}

/* Соцсети */
.pp-auth__social {
    margin-top: 32px;
}

.pp-auth__social-title {
    margin: 0 0 16px 0;
    color: var(--color-text-primary);
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}

.pp-auth__social .litauth-social__buttons {
    justify-content: center !important;
    margin-bottom: 0 !important;
}

/* На полной странице litauth растягивает кнопки флексом — оставляем круги 50px */
.pp-auth__social .litauth-social__btn {
    flex: 0 0 auto;
}

/* Блок: Обнуление оформления .reviews-item-widget (стили заданы в theme.css). Блок должен быть без оформления. */
.reviews-item-widget {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    display: block;
}

.reviews-item-widget .reviews {
    padding: 0;
    margin: 0;
}

.reviews-item-widget .ireviews_avg {
    margin: 0;
    font-weight: 400;
    background: none;
    border-radius: 0;
}

.reviews-item-widget .badge {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .reviews-item-widget .reviews .istars-result {
        display: block;
    }

    .reviews-item-widget .reviews .istars-result > * {
        order: 0;
        margin-left: 0;
    }

    .reviews-item-widget .reviews .istars-result label {
        margin-left: 0;
        order: 0;
        flex: none;
    }

    .reviews-item-widget .reviews .istars-result .istars-stars {
        margin-left: 0;
    }
}

/* === Смена статуса курса (поле changestatus): кнопки в стиле темы === */
.course-header__actions .changestatus_btn {
    min-height: 2.25rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1.5px solid var(--color-primary);
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

.course-header__actions .changestatus_btn:hover,
.course-header__actions .changestatus_btn:focus-visible {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.course-header__actions .changestatus_off_text {
    min-height: 2.25rem;
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-bg-card-soft);
    color: var(--color-text-caption);
    border: 1.5px solid var(--color-border-light);
    border-radius: 40px;
    font-family: MontserratVariable, "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    margin: 0;
}

.course-header__actions .changestatus_btn.error_btn {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
    white-space: normal;
    text-align: left;
}