/* ==========================================================================
   ИАПП — шапка сайта. Дизайн-система v1.1.1
   Дочерний шаблон iapp, родитель — Cassiopeia.

   ВАЖНО про специфичность: Cassiopeia стилизует шапку селекторами вида
   `.container-header .grid-child` (два класса). Поэтому все контейнерные
   правила здесь написаны как `.container-header.iapp-header .…` — три класса,
   этого гарантированно хватает, чтобы перебить родителя без !important.
   ========================================================================== */

:root {
    /* --- Палитра: одно синее семейство, снято с макета ------------------ */
    --iapp-navy-900:  #14294a;   /* телефон, знак логотипа */
    --iapp-navy-700:  #1e3e67;   /* пункты основного меню */
    --iapp-navy-600:  #2c4257;   /* пункты доп. меню */
    --iapp-blue-500:  #36609c;   /* ГЛАВНЫЙ АКЦЕНТ: кнопка, активный пункт */
    --iapp-blue-600:  #2a4e82;   /* ховер акцента */
    --iapp-blue-300:  #90bae4;   /* плашки, баннер героя */
    --iapp-blue-100:  #e4edf7;   /* подложки карточек */
    --iapp-slate-500: #6b7a8c;   /* часы работы, вторичный текст */
    --iapp-line:      #d9e2ec;   /* разделители */
    --iapp-bg:        #ffffff;

    /* Соцсети — фирменные цвета площадок */
    --iapp-vk:        #0077ff;
    --iapp-max:       #7b4de0;
    --iapp-tg:        #29a1d8;
    --iapp-mail:      #5b9bd5;

    /* --- Геометрия ------------------------------------------------------ */
    --iapp-row1-h:      104px;
    --iapp-row1-h-sm:   72px;
    --iapp-row2-h:      44px;
    --iapp-logo-h:      56px;
    --iapp-logo-h-sm:   44px;
    --iapp-gap:         1.5rem;
    --iapp-radius:      8px;
    --iapp-radius-lg:   12px;
    --iapp-shadow:      0 16px 32px rgba(20, 41, 74, .14);
    --iapp-shadow-sm:   0 2px 12px rgba(20, 41, 74, .08);
    --iapp-ease:        .18s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. КАРКАС
   ========================================================================== */

.container-header.iapp-header {
    background: var(--iapp-bg);
    background-image: none;
    color: var(--iapp-navy-700);
    z-index: 1030;
    transition: box-shadow var(--iapp-ease);
}

.container-header.iapp-header .container-topbar {
    background: var(--iapp-blue-100);
    color: var(--iapp-navy-700);
    font-size: .875rem;
}

/* Строка 1 — основная панель. Перебивает `.container-header .grid-child`. */
.container-header.iapp-header .iapp-header-main {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--iapp-gap);
    min-height: var(--iapp-row1-h);
    padding-block: 0;
    position: relative;
    transition: min-height var(--iapp-ease);
}

/* Строка 2 */
.container-header.iapp-header .iapp-header-sub {
    border-top: 1px solid var(--iapp-line);
    background: var(--iapp-bg);
}

/* Липкое состояние */
.container-header.iapp-header.is-stuck { box-shadow: var(--iapp-shadow-sm); }
.container-header.iapp-header.is-stuck .iapp-header-main { min-height: var(--iapp-row1-h-sm); }
.container-header.iapp-header.is-stuck .iapp-brand .logo  { max-height: var(--iapp-logo-h-sm); }
.container-header.iapp-header.is-stuck .iapp-header-sub   { display: none; }

/* ==========================================================================
   2. ЛОГОТИП
   ========================================================================== */

.container-header.iapp-header .iapp-brand {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.container-header.iapp-header .iapp-brand .brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.container-header.iapp-header .iapp-brand .logo {
    max-height: var(--iapp-logo-h);
    max-width: 200px;
    width: auto;
    object-fit: contain;
    transition: max-height var(--iapp-ease);
}

.container-header.iapp-header .iapp-brand .site-description {
    font-size: .75rem;
    line-height: 1.3;
    color: var(--iapp-slate-500);
}

/* ==========================================================================
   3. ЗОНЫ СТРОКИ 1
   ========================================================================== */

.container-header.iapp-header .iapp-collapse { display: contents; }

.container-header.iapp-header .iapp-nav-main { flex: 0 1 auto; min-width: 0; }
.container-header.iapp-header .iapp-contacts { margin-inline-start: auto; }
.container-header.iapp-header .iapp-contacts,
.container-header.iapp-header .iapp-social,
.container-header.iapp-header .iapp-account,
.container-header.iapp-header .iapp-search { flex: 0 0 auto; }

/* --- 3.1 Контакты [header-contacts] --------------------------------------- */

.container-header.iapp-header .iapp-contacts { text-align: end; line-height: 1.2; }

.container-header.iapp-header .iapp-phone {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    color: var(--iapp-navy-900);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--iapp-ease);
}

.container-header.iapp-header .iapp-phone:hover,
.container-header.iapp-header .iapp-phone:focus-visible { color: var(--iapp-blue-500); }

.container-header.iapp-header .iapp-hours {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--iapp-slate-500);
    white-space: nowrap;
}

/* --- 3.2 Соцсети [header-social] ------------------------------------------ */

.container-header.iapp-header .iapp-social ul {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-header.iapp-header .iapp-social li { margin: 0; }

.container-header.iapp-header .iapp-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--iapp-blue-500);
    color: #fff;
    font-size: 1.25rem;
    text-decoration: none;
    transition: transform var(--iapp-ease), filter var(--iapp-ease);
}

.container-header.iapp-header .iapp-social a:hover,
.container-header.iapp-header .iapp-social a:focus-visible {
    transform: translateY(-2px);
    filter: brightness(.92);
    color: #fff;
}

.container-header.iapp-header .iapp-social a svg,
.container-header.iapp-header .iapp-social a img { width: 20px; height: 20px; display: block; }

.container-header.iapp-header .iapp-social a.is-vk   { background: var(--iapp-vk); }
.container-header.iapp-header .iapp-social a.is-max  { background: var(--iapp-max); }
.container-header.iapp-header .iapp-social a.is-tg   { background: var(--iapp-tg); }
.container-header.iapp-header .iapp-social a.is-mail { background: var(--iapp-mail); }

/* --- 3.3 Кнопка «Личный кабинет» [header-account] ------------------------- */

.container-header.iapp-header .iapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding-inline: 1.25rem;
    border: 0;
    border-radius: var(--iapp-radius);
    background: var(--iapp-blue-500);
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--iapp-ease), transform var(--iapp-ease);
}

.container-header.iapp-header .iapp-btn:hover  { background: var(--iapp-blue-600); color: #fff; }
.container-header.iapp-header .iapp-btn:active { transform: translateY(1px); }
.container-header.iapp-header .iapp-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(54, 96, 156, .35);
}

.container-header.iapp-header .iapp-btn.is-ghost {
    background: transparent;
    color: var(--iapp-blue-500);
    box-shadow: inset 0 0 0 1.5px var(--iapp-blue-500);
}
.container-header.iapp-header .iapp-btn.is-ghost:hover { background: var(--iapp-blue-100); color: var(--iapp-blue-600); }

/* ==========================================================================
   4. ОСНОВНОЕ МЕНЮ [menu-main] — mod_menu, макет Dropdown Menu
   ========================================================================== */

.container-header.iapp-header .iapp-nav-main .mod-menu {
    display: flex;
    flex-wrap: nowrap;          /* пункты не переносятся на вторую строку */
    align-items: center;
    gap: 0 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-header.iapp-header .iapp-nav-main .mod-menu li { position: relative; margin: 0; }

.container-header.iapp-header .iapp-nav-main .mod-menu > li > a,
.container-header.iapp-header .iapp-nav-main .mod-menu > li > span,
.container-header.iapp-header .iapp-nav-main .mod-menu > li > button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem 0;
    color: var(--iapp-navy-700);
    background: transparent;
    font-size: .9375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--iapp-ease), border-color var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-main .mod-menu > li > a:hover,
.container-header.iapp-header .iapp-nav-main .mod-menu > li > a:focus-visible,
.container-header.iapp-header .iapp-nav-main .mod-menu > li > button:hover,
.container-header.iapp-header .iapp-nav-main .mod-menu > li > button:focus-visible {
    color: var(--iapp-blue-500);
    border-bottom-color: var(--iapp-blue-300);
    background: transparent;
}

/* --- 4.0 Пункт-заголовок с подменю: Joomla рисует его как <button> ------- */
/* Кнопка не наследует цвет от родителя — без этого текст остаётся невидимым. */

.container-header.iapp-header .iapp-nav-main .mod-menu > li > button {
    margin: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Текст внутри кнопки — просто наследует цвет и начертание кнопки */
.container-header.iapp-header .iapp-nav-main .mod-menu__heading,
.container-header.iapp-header .iapp-nav-main .nav-header {
    display: inline;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

/* Стрелка от Joomla — уменьшаем и разворачиваем при наведении */
.container-header.iapp-header .iapp-nav-main .mod-menu > li > button [class*="icon-chevron"] {
    font-size: .7em;
    line-height: 1;
    transition: transform var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-main .mod-menu > li:hover > button [class*="icon-chevron"],
.container-header.iapp-header .iapp-nav-main .mod-menu > li:focus-within > button [class*="icon-chevron"] {
    transform: rotate(180deg);
}

/* Если стрелку рисует Joomla — свою не добавляем, чтобы не было двух */
.container-header.iapp-header .iapp-nav-main .mod-menu > li:has(> button) > a::after,
.container-header.iapp-header .iapp-nav-main .mod-menu > li:has([class*="icon-chevron"]) > a::after { content: none; }

.container-header.iapp-header .iapp-nav-main .mod-menu > li.current > a,
.container-header.iapp-header .iapp-nav-main .mod-menu > li.active > a {
    color: var(--iapp-blue-500);
    border-bottom-color: var(--iapp-blue-500);
}

/* Стрелка у пункта с подменю */
.container-header.iapp-header .iapp-nav-main .mod-menu > li.parent > a::after,
.container-header.iapp-header .iapp-nav-main .mod-menu > li.deeper > a::after {
    content: "";
    width: .4em;
    height: .4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
    transition: transform var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-main .mod-menu > li:hover > a::after { transform: translateY(.05em) rotate(225deg); }

/* Гасим встроенные стрелки metismenu, если макет модуля их рисует */
.container-header.iapp-header .iapp-nav-main .mod-menu .metismenu-toggler,
.container-header.iapp-header .iapp-nav-main .mod-menu button.mod-menu__toggler { display: none; }

/* --- 4.1 Выпадающее подменю ---------------------------------------------- */

.container-header.iapp-header .iapp-nav-main .mod-menu ul {
    position: absolute;
    top: 100%;
    inset-inline-start: -1rem;
    z-index: 10;
    min-width: 300px;
    margin: 0;
    padding: .5rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--iapp-line);
    border-radius: var(--iapp-radius-lg);
    box-shadow: var(--iapp-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--iapp-ease), transform var(--iapp-ease), visibility var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-main .mod-menu li:hover > ul,
.container-header.iapp-header .iapp-nav-main .mod-menu li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Joomla может прятать подменю своим JS по aria-expanded — на десктопе
   раскрытием управляем мы, поэтому возвращаем display принудительно. */
@media (min-width: 1200px) {
    .container-header.iapp-header .iapp-nav-main .mod-menu > li > ul { display: block; }
}

.container-header.iapp-header .iapp-nav-main .mod-menu ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .45rem .875rem;
    line-height: 1.35;
    border-radius: 6px;
    color: var(--iapp-navy-700);
    font-size: .9375rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    white-space: normal;
    transition: background-color var(--iapp-ease), color var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-main .mod-menu ul a:hover,
.container-header.iapp-header .iapp-nav-main .mod-menu ul a:focus-visible {
    background: var(--iapp-blue-100);
    color: var(--iapp-blue-500);
}

/* ==========================================================================
   5. ДОП. НАВИГАЦИЯ [menu-secondary]
   ========================================================================== */

.container-header.iapp-header .iapp-nav-sub .mod-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 2.25rem;
    min-height: var(--iapp-row2-h);
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-header.iapp-header .iapp-nav-sub .mod-menu li { position: relative; margin: 0; }

/* Пункт второй строки: ссылка, надпись или кнопка-заголовок с подменю */
.container-header.iapp-header .iapp-nav-sub .mod-menu > li > a,
.container-header.iapp-header .iapp-nav-sub .mod-menu > li > span,
.container-header.iapp-header .iapp-nav-sub .mod-menu > li > button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .25rem 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--iapp-navy-600);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none;
    text-align: start;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-sub .mod-menu > li > a:hover,
.container-header.iapp-header .iapp-nav-sub .mod-menu > li > a:focus-visible,
.container-header.iapp-header .iapp-nav-sub .mod-menu > li > button:hover,
.container-header.iapp-header .iapp-nav-sub .mod-menu > li > button:focus-visible,
.container-header.iapp-header .iapp-nav-sub .mod-menu > li:hover > button,
.container-header.iapp-header .iapp-nav-sub .mod-menu .current > a,
.container-header.iapp-header .iapp-nav-sub .mod-menu .active > a { color: var(--iapp-blue-500); }

.container-header.iapp-header .iapp-nav-sub .mod-menu > li > button [class*="icon-chevron"] {
    font-size: .8em;
    line-height: 1;
    transition: transform var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-sub .mod-menu > li:hover > button [class*="icon-chevron"],
.container-header.iapp-header .iapp-nav-sub .mod-menu > li:focus-within > button [class*="icon-chevron"] {
    transform: rotate(180deg);
}

/* --- 5.1 Выпадающая панель второй строки -------------------------------- */

.container-header.iapp-header .iapp-nav-sub .mod-menu ul {
    position: absolute;
    top: 100%;
    inset-inline-start: -.75rem;
    z-index: 20;
    min-width: 320px;
    max-width: 420px;
    margin: .35rem 0 0;
    padding: .5rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--iapp-line);
    border-radius: var(--iapp-radius-lg);
    box-shadow: var(--iapp-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--iapp-ease), transform var(--iapp-ease), visibility var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-sub .mod-menu li:hover > ul,
.container-header.iapp-header .iapp-nav-sub .mod-menu li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.container-header.iapp-header .iapp-nav-sub .mod-menu ul a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: .4rem .875rem;
    border-radius: 6px;
    color: var(--iapp-navy-700);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    white-space: normal;
    transition: background-color var(--iapp-ease), color var(--iapp-ease);
}

.container-header.iapp-header .iapp-nav-sub .mod-menu ul a:hover,
.container-header.iapp-header .iapp-nav-sub .mod-menu ul a:focus-visible {
    background: var(--iapp-blue-100);
    color: var(--iapp-blue-500);
}

/* Joomla прячет подменю своим JS — на десктопе раскрытием управляем мы */
@media (min-width: 1200px) {
    .container-header.iapp-header .iapp-nav-sub .mod-menu > li > ul { display: block; }
}

.container-header.iapp-header .iapp-nav-sub-mobile { display: none; }

.container-header.iapp-header .iapp-nav-sub-mobile .mod-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-header.iapp-header .iapp-nav-sub-mobile .mod-menu li { margin: 0; }

.container-header.iapp-header .iapp-nav-sub-mobile .mod-menu > li > button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    padding: .625rem 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--iapp-navy-600);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: start;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.container-header.iapp-header .iapp-nav-sub-mobile .mod-menu ul {
    list-style: none;
    margin: 0;
    padding: 0 0 .5rem 1rem;
}

.container-header.iapp-header .iapp-nav-sub-mobile .mod-menu ul a {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: .9375rem;
}

.container-header.iapp-header .iapp-nav-sub-mobile .mod-menu a {
    color: var(--iapp-navy-600);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none;
}

.container-header.iapp-header .iapp-nav-sub-mobile .mod-menu a:hover { color: var(--iapp-blue-500); }

/* ==========================================================================
   6. БУРГЕР — только мобильные
   ========================================================================== */

.container-header.iapp-header .iapp-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-inline-start: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.container-header.iapp-header .iapp-burger:focus-visible { outline: 2px solid var(--iapp-blue-500); outline-offset: 2px; }

.container-header.iapp-header .iapp-burger-bar {
    display: block;
    width: 24px;
    height: 2.5px;
    margin-inline: auto;
    background: var(--iapp-navy-700);
    border-radius: 2px;
    transform-origin: center;
    transition: transform var(--iapp-ease), opacity var(--iapp-ease);
}

.container-header.iapp-header .iapp-burger[aria-expanded="true"] .iapp-burger-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.container-header.iapp-header .iapp-burger[aria-expanded="true"] .iapp-burger-bar:nth-child(2) { opacity: 0; }
.container-header.iapp-header .iapp-burger[aria-expanded="true"] .iapp-burger-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   6.5 КОМПАКТНЫЙ ДЕСКТОП 1200–1399px
   Контейнер здесь уже узкий, поэтому ужимаем шрифты и отступы,
   чтобы шапка осталась в одну строку и не уехала в бургер раньше времени.
   ========================================================================== */

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .container-header.iapp-header .iapp-header-main { gap: 1.25rem; }
    .container-header.iapp-header .iapp-brand .logo { max-height: 48px; max-width: 170px; }
    .container-header.iapp-header .iapp-nav-main .mod-menu { gap: 0 1.25rem; }
    .container-header.iapp-header .iapp-nav-main .mod-menu > li > a { font-size: .875rem; letter-spacing: 0; }
    .container-header.iapp-header .iapp-phone { font-size: 1rem; }
    .container-header.iapp-header .iapp-hours { font-size: .75rem; }
    .container-header.iapp-header .iapp-social ul { gap: .4rem; }
    .container-header.iapp-header .iapp-social a { width: 34px; height: 34px; }
    .container-header.iapp-header .iapp-social a svg { width: 17px; height: 17px; }
    .container-header.iapp-header .iapp-btn { height: 40px; padding-inline: 1rem; font-size: .875rem; }
}

/* ==========================================================================
   7. МОБИЛЬНАЯ РАСКЛАДКА (< 1200px)
   ========================================================================== */

@media (max-width: 1199.98px) {

    .container-header.iapp-header .iapp-header-main { min-height: 72px; gap: 1rem; }
    .container-header.iapp-header .iapp-brand .logo { max-height: 44px; }

    .container-header.iapp-header .iapp-burger { display: flex; }

    .container-header.iapp-header .iapp-collapse {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        z-index: 1040;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.25rem 1.5rem 1.75rem;
        background: #fff;
        border-top: 1px solid var(--iapp-line);
        box-shadow: var(--iapp-shadow);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    .container-header.iapp-header .iapp-collapse.is-open { display: flex; }

    body.iapp-nav-open { overflow: hidden; }

    .container-header.iapp-header .iapp-nav-main .mod-menu,
    .container-header.iapp-header .iapp-nav-sub-mobile .mod-menu {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0;
    }

    .container-header.iapp-header .iapp-nav-main .mod-menu > li > a,
    .container-header.iapp-header .iapp-nav-main .mod-menu > li > button {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        text-align: start;
        padding-block: .875rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--iapp-line);
    }

    .container-header.iapp-header .iapp-nav-main .mod-menu ul { list-style: none; }

    /* Подменю раскрыто всегда, без ховера */
    .container-header.iapp-header .iapp-nav-main .mod-menu ul {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: .25rem 0 .5rem 1rem;
        border: 0;
        box-shadow: none;
    }

    .container-header.iapp-header .iapp-nav-main .mod-menu ul a { min-height: 40px; }

    .container-header.iapp-header .iapp-contacts { text-align: start; margin-inline-start: 0; }
    .container-header.iapp-header .iapp-social ul { justify-content: start; }
    .container-header.iapp-header .iapp-btn { width: 100%; }

    .container-header.iapp-header .iapp-nav-sub-mobile { display: block; }
    .container-header.iapp-header .iapp-nav-sub-mobile .mod-menu a { display: block; padding-block: .625rem; }
    .container-header.iapp-header .iapp-header-sub { display: none; }
}

/* ==========================================================================
   8. ДОСТУПНОСТЬ
   ========================================================================== */

.container-header.iapp-header a:focus-visible {
    outline: 2px solid var(--iapp-blue-500);
    outline-offset: 3px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .container-header.iapp-header *,
    .container-header.iapp-header *::before,
    .container-header.iapp-header *::after { transition: none !important; }
}

/* ==========================================================================
   9. ПОДВАЛ САЙТА
   Позиции: footer-a (бренд) · footer-b · footer-c (меню) · footer-d (контакты)
            footer — нижняя строка с копирайтом и документами
   ========================================================================== */

.container-footer.iapp-footer {
    background: var(--iapp-navy-900);
    color: #c3dbf1;
    font-size: .9375rem;
    line-height: 1.6;
}

/* --- 9.1 Сетка колонок ---------------------------------------------------- */

.container-footer.iapp-footer .iapp-footer-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 2.5rem 2rem;
    padding-block: 3.5rem 3rem;
    align-items: start;
}

.container-footer.iapp-footer .iapp-footer-col { min-width: 0; }

/* Обёртка модуля от chrome noCard — лишних отступов не добавляет */
.container-footer.iapp-footer .no-card { margin: 0; }
.container-footer.iapp-footer .no-card + .no-card { margin-top: 2rem; }

/* --- 9.2 Заголовки колонок ------------------------------------------------ */

.container-footer.iapp-footer .iapp-footer-col h1,
.container-footer.iapp-footer .iapp-footer-col h2,
.container-footer.iapp-footer .iapp-footer-col h3,
.container-footer.iapp-footer .iapp-footer-col h4 {
    margin: 0 0 1.1rem;
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* --- 9.3 Текст и ссылки --------------------------------------------------- */

.container-footer.iapp-footer p { margin: 0 0 .75rem; }
.container-footer.iapp-footer p:last-child { margin-bottom: 0; }

.container-footer.iapp-footer a {
    color: #c3dbf1;
    text-decoration: none;
    transition: color var(--iapp-ease);
}

.container-footer.iapp-footer a:hover,
.container-footer.iapp-footer a:focus-visible { color: #fff; text-decoration: underline; }

.container-footer.iapp-footer a:focus-visible {
    outline: 2px solid var(--iapp-blue-300);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --- 9.4 Меню в колонках -------------------------------------------------- */

.container-footer.iapp-footer .mod-menu {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-footer.iapp-footer .mod-menu li { margin: 0; }

.container-footer.iapp-footer .mod-menu ul {
    margin: .5rem 0 0;
    padding: 0 0 0 .9rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

/* Пункт-заголовок с подменю Joomla рисует кнопкой */
.container-footer.iapp-footer .mod-menu > li > button {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: #c3dbf1;
    font: inherit;
    text-align: start;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
}

.container-footer.iapp-footer .mod-menu [class*="icon-chevron"] { display: none; }

/* --- 9.5 Колонка бренда --------------------------------------------------- */

.container-footer.iapp-footer .is-brand img {
    max-width: 220px;
    height: auto;
    margin-bottom: 1.1rem;
}

.container-footer.iapp-footer .iapp-footer-about {
    max-width: 34ch;
    color: #9fbfe0;
}

.container-footer.iapp-footer .iapp-footer-legal-info {
    margin-top: 1.1rem;
    font-size: .8125rem;
    line-height: 1.55;
    color: #7f9dbe;
}

/* Соцсети в подвале — те же кружки, что в шапке.
   Правила шапки прибиты к .iapp-header, поэтому здесь повторяем их. */
.container-footer.iapp-footer .iapp-social { margin-top: 1.25rem; }

.container-footer.iapp-footer .iapp-social ul {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-footer.iapp-footer .iapp-social li { margin: 0; }

.container-footer.iapp-footer .iapp-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--iapp-blue-500);
    color: #fff;
    text-decoration: none;
    transition: transform var(--iapp-ease), filter var(--iapp-ease);
}

.container-footer.iapp-footer .iapp-social a:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
    text-decoration: none;
}

.container-footer.iapp-footer .iapp-social a svg,
.container-footer.iapp-footer .iapp-social a img { width: 20px; height: 20px; display: block; margin: 0; max-width: none; }

.container-footer.iapp-footer .iapp-social a.is-vk   { background: var(--iapp-vk); }
.container-footer.iapp-footer .iapp-social a.is-max  { background: var(--iapp-max); }
.container-footer.iapp-footer .iapp-social a.is-tg   { background: var(--iapp-tg); }
.container-footer.iapp-footer .iapp-social a.is-mail { background: var(--iapp-mail); }

/* --- 9.6 Колонка контактов ------------------------------------------------ */

.container-footer.iapp-footer .is-contacts .iapp-footer-phone {
    display: inline-block;
    margin-bottom: .35rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.container-footer.iapp-footer .is-contacts .iapp-footer-note {
    color: #7f9dbe;
    font-size: .8125rem;
}

/* Синяя кнопка на тёмном фоне не читается — в подвале она светлая */
.container-footer.iapp-footer .iapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-top: 1.25rem;
    padding-inline: 1.5rem;
    border: 0;
    border-radius: var(--iapp-radius);
    background: var(--iapp-blue-300);
    color: var(--iapp-navy-900);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color var(--iapp-ease);
}

.container-footer.iapp-footer .iapp-btn:hover {
    background: #fff;
    color: var(--iapp-navy-900);
    text-decoration: none;
}

/* --- 9.7 Нижняя строка ---------------------------------------------------- */

.container-footer.iapp-footer .iapp-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.container-footer.iapp-footer .iapp-footer-bottom .grid-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
    padding-block: 1.25rem;
    font-size: .8125rem;
    color: #7f9dbe;
}

.container-footer.iapp-footer .iapp-footer-bottom p { margin: 0; }

.container-footer.iapp-footer .iapp-footer-docs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.container-footer.iapp-footer .iapp-footer-docs a { color: #9fbfe0; }

/* --- 9.8 Планшет и мобильный ---------------------------------------------- */

@media (max-width: 991.98px) {
    .container-footer.iapp-footer .iapp-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem 2rem;
        padding-block: 2.75rem 2.25rem;
    }
    .container-footer.iapp-footer .is-brand { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .container-footer.iapp-footer .iapp-footer-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .container-footer.iapp-footer .iapp-btn { width: 100%; }
    .container-footer.iapp-footer .iapp-footer-bottom .grid-child {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   ВК и MAX в шапке и подвале — только сам логотип, без фона.
   Скрипт в partials/setup.php убирает цветную плашку из файлов
   images/vk.svg и «images/Max colored.svg» и красит знак в её цвет.
   Почта — как раньше, значок на голубом кружке.
   Блок стоит в конце файла, чтобы его не перебивали правила подвала выше.
   ========================================================================== */

.container-header.iapp-header .iapp-social a.is-vk,
.container-header.iapp-header .iapp-social a.is-max,
.container-footer.iapp-footer .iapp-social a.is-vk,
.container-footer.iapp-footer .iapp-social a.is-max {
    padding: 3px !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
}

.container-header.iapp-header .iapp-social a.is-vk img,
.container-header.iapp-header .iapp-social a.is-max img,
.container-footer.iapp-footer .iapp-social a.is-vk img,
.container-footer.iapp-footer .iapp-social a.is-max img,
.container-header.iapp-header .iapp-social a.is-vk svg.iapp-soc-logo,
.container-header.iapp-header .iapp-social a.is-max svg.iapp-soc-logo,
.container-footer.iapp-footer .iapp-social a.is-vk svg.iapp-soc-logo,
.container-footer.iapp-footer .iapp-social a.is-max svg.iapp-soc-logo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

/* все три значка — на одной линии */
.container-header.iapp-header .iapp-social li,
.container-footer.iapp-footer .iapp-social li { display: flex; }

/* значок почты — ровно по центру кружка: правило колонки бренда (.is-brand img)
   добавляло картинкам отступ снизу, и конверт уезжал вверх */
.container-footer.iapp-footer .iapp-social a img,
.container-footer.iapp-footer .iapp-social a svg { margin: 0 !important; }