/* ═══ NIO Accordion ═══
   Десктоп (>1024): ДВА квадрата с просветом — слева фото (contain, свой фон),
   справа карточка с текстом (свой фон, внутренние отступы, текст по центру по вертикали).
   ≤1024: одна колонка-карточка (белый фон + боковые отступы), картинка внутри раскрытого пункта. */
.nio-acc{
    display: flex;
    gap: var(--acc-gap, 40px);
    align-items: stretch;         /* карточка текста тянется по высоте фото-квадрата */
    width: 100%;
    box-sizing: border-box;
}
.nio-acc *, .nio-acc *::before, .nio-acc *::after{ box-sizing: border-box; }

/* ── Левый квадрат: фото ── */
.nio-acc__aside{
    flex: 0 0 var(--acc-aside, 50%);
    max-width: var(--acc-aside, 50%);
    position: relative;
    aspect-ratio: 1 / 1;                     /* контрол «Пропорции» */
    overflow: hidden;
    background-color: var(--acc-mediabg, #fff);
}
.nio-acc__fig{ position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.nio-acc__fig.is-active{ opacity: 1; }
.nio-acc__fig img{ width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── Правый квадрат: карточка с текстом ── */
.nio-acc__list{
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--acc-cardbg, #fff);   /* фон именно текстовой карточки */
    padding: 48px;                                /* контрол «Внутренние отступы текста» */
    display: flex;
    flex-direction: column;
    justify-content: center;                      /* текст по центру по вертикали */
    overflow: hidden;
}
.nio-acc__item{ border-bottom: 1px solid var(--acc-line, rgba(0,0,0,.12)); }
.nio-acc__item:last-child{ border-bottom: 0; }   /* под последним пунктом линия не нужна */

.nio-acc__header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    margin: 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
/* ВАЖНО про специфичность: тема XStore задаёт `.elementor-widget-container p{color:inherit}`
   (спец. 0,1,1). Если заголовок/описание выведены тегом <p>, такое правило перебивает
   наш `color` при селекторе `.nio-acc__title` (0,1,0), и контролы цвета «не работают» —
   ни обычные, ни глобальные. Поэтому селектор с цветом держим на 0,2,0 (`.nio-acc .nio-acc__…`). */
.nio-acc .nio-acc__title{
    margin: 0;
    color: var(--acc-tc, #1d1d1f);
    font-size: 18px; font-weight: 600; line-height: 1.3;
}

/* значок +/− */
.nio-acc__icon{ position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.nio-acc__icon::before, .nio-acc__icon::after{ content: ""; position: absolute; background: var(--acc-icon, #1d1d1f); }
.nio-acc__icon::before{ left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.nio-acc__icon::after{ top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%);
    transition: opacity .25s ease, transform .25s ease; }
.nio-acc__item.is-open .nio-acc__icon::after{ opacity: 0; transform: translateX(-50%) scaleY(0); }

/* тело (аккордеон) */
.nio-acc__body{ max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.nio-acc__body-in{ padding-bottom: 20px; }
.nio-acc .nio-acc__desc{ margin: 0; color: var(--acc-dc, #6b6b6b); font-size: 14px; line-height: 1.5; }

/* картинка внутри пункта — только ≤1024 */
.nio-acc__media{ display: none; overflow: hidden; }
.nio-acc__media img{ width: 100%; height: auto; display: block; }

/* ── Планшет/моб: одна колонка-карточка ── */
@media (max-width: 1024px){
    .nio-acc{ flex-direction: column; gap: 0; }
    .nio-acc__aside{ display: none; }
    .nio-acc__list{
        width: 100%;
        justify-content: flex-start;   /* обычный поток сверху вниз */
        /* фон карточки и боковые отступы берутся из контролов card_bg / card_pad */
    }
    .nio-acc__media{ display: block; }
}