/* NIO Mega Bar + NIO Mega Panel — своя замена мега-меню темы xStore. */

/* ── Верхняя строка (NIO Mega Bar) ─────────────────────────────────── */
/* height:100% + min-height — строка занимает ВСЮ высоту шапки (обычно 64px,
   контрол «Мин. высота строки»), а не только свой текст. Раньше .nio-mb был
   ровно по высоте текста и прилипал к потолку шапки — из-за этого JS брал
   неверный нижний край при позиционировании панели, и та наезжала на шапку
   с логотипом; теперь bar.getBoundingClientRect().bottom = реальный низ шапки. */
.nio-mb { --mb-c: #111; --mb-dark: #111; display: flex; align-items: center; height: 100%; min-height: var(--mb-minh, 64px); }
.nio-mb__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 32px; }
.nio-mb__item { display: flex; }
.nio-mb__link {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	background: none; border: 0; padding: 14px 0; cursor: pointer;
	font: inherit; color: var(--mb-c); text-decoration: none;
}
/* Цвет пункта при наведении меняться НЕ должен — появляется только полоса снизу.
   Тема перебивает это сразу тремя правилами: `.et_is-classic-theme a:hover`
   (специфичность 0,2,1 — сильнее одиночного класса), `a:hover{color:#9b9b9b}` и
   `a:hover{opacity:.7;-webkit-text-fill-color:currentColor}`. Поэтому фиксируем
   ВСЕ состояния явно и с запасом по специфичности (0,3,0). */
.nio-mb .nio-mb__link,
.nio-mb .nio-mb__link:hover,
.nio-mb .nio-mb__link:focus,
.nio-mb .nio-mb__link:focus-visible,
.nio-mb .nio-mb__link:active {
	color: var(--mb-c);
	-webkit-text-fill-color: currentColor;
	opacity: 1;
	background: none;
	text-decoration: none;
}
/* Наведение НЕ меняет цвет текста — только выезжает подчёркивание того же
   цвета, что и сам текст (один var(--mb-c) на оба). */
/* bottom:-6px — рядок тепер по висоті самого тексту (padding 0), тож
   «8px від низу» проходило б просто ПОПЕРЕК напису. Виносимо лінію під текст. */
.nio-mb__link::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
	background: var(--mb-c); transition: right .22s ease;
}
.nio-mb__link:hover::after,
.nio-mb__link[aria-expanded="true"]::after { right: 0; }
.nio-mb__badge {
	display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 3px;
	font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .02em;
	background: #e00020; color: #fff;
}
/* Шапка сайта прозрачная и лежит поверх тёмного hero, поэтому текст пунктов
   белый. `sticky-on` — ГОТОВЫЙ класс самой темы xStore (добавляет её же
   скрипт при скролле на предка `.etheme-elementor-header-wrapper`), под него
   же привязана родная полупрозрачная белая подложка шапки (найдено в CSS
   шапки). Читаем этот класс через обычный CSS-каскад — отдельный JS для
   скролла заводить не пришлось, поведение остаётся синхронным с оригиналом. */
/* .sticky-on.sticky-on / .nio-hdr-plate.nio-hdr-plate — удвоенный класс
   намеренно: поднимает специфичность (0,3,0) выше правила самого контрола
   цвета виджета (0,2,0), которое иначе могло бы победить в зависимости от
   порядка подключения стилей. */
/* !important тут обов'язковий: Elementor генерує для контролу кольору селектор
   `.elementor-{post} .elementor-element.elementor-element-{id} .nio-mb`
   зі специфічністю (0,4,0) — будь-яке розумне правило станів програє йому. */
.sticky-on .nio-mb,
.nio-hdr-plate .nio-mb { --mb-c: var(--mb-dark) !important; }
/* Наведение на пункт с подменю — та же белая подложка появляется сразу, ещё
   до открытия самой панели (управляет JS через класс .nio-hdr-plate на
   .elementor-element-57d4e91 — главном контейнере шапки). Именно ЗАЛИВКА
   (сплошной белый), а не полупрозрачная, как при простой прокрутке — снизу
   к ней вплотную примыкает такая же сплошная белая панель, разнобой в
   прозрачности выглядел бы как явный шов между шапкой и панелью. */
.nio-hdr-plate { background-color: #ffffff !important; }
/* Логотип в шапке — НЕ картинка, а инлайновый <svg> с заливкой,
   прописанной атрибутом (`<g fill="#fff">`). Поэтому правила под `img`
   (filter:brightness(0)) на него не действовали вовсе: на белой подложке
   белый логотип просто исчезал. Красим сам SVG — presentational-атрибут
   fill проигрывает любому CSS, так что хватает обычного правила; на g и
   path дублируем на случай, если заливка окажется прописана глубже.
   При скролле логотип чернит своё правило в кастомных стилях сайта
   (`header.sticky-on #main-nav … {fill:#000!important}`) — здесь тот же
   эффект для состояния «панель открыта, страница ещё не прокручена». */
.elementor-location-header .elementor-widget-icon svg,
.elementor-location-header .elementor-widget-icon svg g,
.elementor-location-header .elementor-widget-icon svg path { transition: fill .2s ease; }
.nio-hdr-plate .elementor-widget-icon svg,
.nio-hdr-plate .elementor-widget-icon svg g,
.nio-hdr-plate .elementor-widget-icon svg path { fill: #000; }
.nio-hdr-plate .elementor-widget-icon img { filter: brightness(0); }
/* Подстраховка: если бы позиционирование панели вдруг чуть разошлось (доли
   пикселя из-за округления) — сама шапка с логотипом всё равно должна
   остаться НАД панелью, а не наоборот. */
/* Шапка обязана быть НАД панелью. !important — потому что скрипт sticky у темы
   выставляет шапке свои инлайновые стили, когда она «прилипает». */
.elementor-location-header { position: relative; z-index: 100000 !important; }
/* Хост, у який JS переносить панелі з шапки: сам по собі нічого не займає. */
.nio-mp-host { position: static; }
/* Обгортки віджета панелі не мають створювати боксів У ПОТОЦІ: до того, як
   відпрацює JS-портал (і якщо JS раптом не відпрацює взагалі), порожня
   Elementor-обгортка все одно рахувалася б повноцінним flex-дитям контейнера
   шапки й додавала б їй зайвий gap та висоту. display:contents прибирає бокси,
   лишаючи саму панель (display:none, поки закрита) — шапка не «стрибає». */
.elementor-widget-nio_megapanel,
.elementor-widget-nio_megapanel > .elementor-widget-container { display: contents; }

/* ── Панель (NIO Mega Panel) — полноэкранная ───────────────────────── */
.nio-mp {
	--mp-bg: #fff; --mp-blur: 0px; --mp-tabc: #9c9c9c; --mp-tabac: #111;
	--mp-tile-w: 370px; --mp-tile-h: 268px; --mp-pad-x: 40px; --mp-cols: 3;
	/* top ставит JS = нижняя граница строки меню, чтобы САМА строка меню оставалась
	   видимой и кликабельной, а не пряталась под полноэкранной панелью.
	   --mp-pad-x JS тоже подставляет своим значением — фактический відступ
	   першого пункту меню, щоб колонка вкладок стояла з ним вровень. */
	position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 99990;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: var(--mp-bg);
	-webkit-backdrop-filter: blur(var(--mp-blur)); backdrop-filter: blur(var(--mp-blur));
}
.nio-mp[hidden] { display: none; }
@keyframes nio-mp-in { from { opacity: 0; } to { opacity: 1; } }
.nio-mp.is-open { animation: nio-mp-in .25s ease; }
@media (prefers-reduced-motion: reduce) { .nio-mp.is-open { animation: none; } }
/* Пока полноэкранная панель открыта — страница под ней не скроллится. */
html.nio-mp-lock, html.nio-mp-lock body { overflow: hidden !important; }
/* ...а исчезнувшая полоса прокрутки не должна расширять окно: без этого
   шапка становится шире на её ширину, и логотип, стоящий по центру, заметно
   дёргается вправо в момент раскрытия панели. Ширину полосы подставляет JS
   (--nio-sbw), измерив её ДО блокировки. */
/* Сдвигаем ТОЛЬКО шапку: её ширина задаёт положение центрированного логотипа.
   Сама панель обязана остаться на всю ширину окна — если сдвинуть и её, справа
   останется незакрытая полоса шириной с полосу прокрутки, сквозь которую видно
   страницу под панелью. */
html.nio-mp-lock .elementor-location-header { right: var(--nio-sbw, 0px); }

/* НЕ центрируем (margin:0 auto тут не годится): колонка вкладок должна встать
   строго под первым пунктом меню, а тот стоит у ЛЕВОГО края экрана. max-width
   просто не даёт сетке растягиваться бесконечно на очень широких мониторах. */
.nio-mp__inner {
	position: relative; min-height: 100%; box-sizing: border-box;
	display: flex; flex-direction: column; justify-content: flex-start;
	max-width: 1440px; margin: 0; padding: 56px var(--mp-pad-x);
	/* Справа резервируем полосу под крестик: он висит в углу ЭКРАНА
	   (right:32px + 44px кнопки), а содержимое прижато влево. Пока окно шире
	   max-width, они не встречаются, но как только окно становится уже,
	   правый край сетки доезжает до кнопки и первый ряд плиток оказывается
	   под ней. max() держит отступ не меньше 100px, сохраняя при этом
	   значение контрола, если его задали большим. */
	padding-right: max(var(--mp-pad-x), 100px);
}
/* absolute (не fixed) — координата относительно самой панели (.nio-mp — прямой
   родитель кнопки в разметке), а не viewport: панель начинается НЕ с самого верха
   экрана (там видна строка меню), и fixed-крестик на месте наложился бы поверх бара.
   Крупный и чёрный, без притемнения — как в оригинале темы. */
.nio-mp__close {
	position: absolute; top: 24px; right: 32px; z-index: 1; display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; background: none;
	color: #111; cursor: pointer; transition: opacity .15s ease;
}
/* Под курсором НЕ появляется никакой подложки — только сама иконка чуть
   гаснет. Фон гасим во всех состояниях: тема красит любые кнопки при
   :hover/:focus, и без этого из-под крестика вылезал серый круг. */
.nio-mp__close:hover,
.nio-mp__close:focus,
.nio-mp__close:focus-visible,
.nio-mp__close:active { background: none; box-shadow: none; outline: none; }
.nio-mp__close:hover { opacity: .6; }
.nio-mp__close svg { width: 26px; height: 26px; }
.nio-mp__close svg path { stroke-width: 1.5; }

/* Вкладки — вертикальная колонка слева, без подчёркивания (только цвет/насыщенность). */
/* Раскладка: [вкладки] 50px [лінія 1px] 50px [сітка] — відступи явні через
   margin, а не через gap на .nio-mp__body, щоб проміжки по обидва боки лінії
   були РІВНО по 50px, а не залежали від того, скільки задає інший контрол. */
/* flex:1 — тянем body на всю оставшуюся высоту панели (иначе строка была бы
   ровно по высоте контента, и вертикальная линия обрывалась на низу сетки,
   а не доходила до самого низа экрана). */
.nio-mp__body { display: flex; align-items: stretch; flex: 1 1 auto; }
.nio-mp__body--notabs { display: block; }
/* Колонка вкладок — только под подписи (100px), а всё свободное поле вынесено
   в отступы ПО ОБЕ СТОРОНЫ от линии (150px + 150px). Это и есть «резерв»
   адаптивности: на узких экранах сжимаются сначала эти пустые зоны, а плитки
   остаются нетронутыми (см. медиазапросы ниже). */
.nio-mp__tabs { display: flex; flex-direction: column; flex: 0 0 100px; gap: 20px; padding-top: 4px; margin-right: 150px; }
.nio-mp__divider { flex: 0 0 1px; width: 1px; background: #d9d9d9; margin-right: 150px; }
.nio-mp__tab {
	text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: var(--mp-tabc); transition: color .15s ease;
}
.nio-mp__tab:hover { color: var(--mp-tabac); }
.nio-mp__tab.is-active { color: var(--mp-tabac); font-weight: 600; }

/* Фіксоване ЧИСЛО колонок (не auto-fill): auto-fill на типовому екрані ноутбука
   майже влазив у 3 колонки, але не рівно — і показував 2, хоча місця візуально
   лишалося доволі багато. Тепер саме стільки колонок, скільки задано контролом. */
/* align-content:start ОБЯЗАТЕЛЕН: без него, когда контейнер выше своего контента
   (после того как .nio-mp__body стал flex:1 на всю высоту панели), Grid по
   умолчанию сам растягивает строки на освободившееся место — из-за этого
   визуально «разъезжались» промежутки МЕЖДУ рядами плиток, хотя сам gap
   никто не менял. */
/* minmax(0, …) вместо жёсткой ширины: колонка НЕ может стать шире заданного
   размера плитки, но может сжаться, когда места в ряду не хватает. С прежним
   `repeat(var(--mp-cols), var(--mp-tile-w))` треки были неподатливыми, и на
   экране уже 1660px третья плитка просто уезжала за край содержимого. */
.nio-mp__grid { flex: 1 1 auto; min-width: 0; align-content: start; display: grid; grid-template-columns: repeat(var(--mp-cols), minmax(0, var(--mp-tile-w))); gap: 16px; }
/* Высота идёт за шириной по пропорции (--mp-tile-ar считает PHP из настроек
   ширины/высоты плитки): сжимаясь, плитка сохраняет кадр, а не подрезает фото
   по бокам при неизменной высоте. */
.nio-mp__tile {
	position: relative; display: block; overflow: hidden;
	width: 100%; height: auto; aspect-ratio: var(--mp-tile-ar, 1.381);
	background: rgba(0,0,0,.04);
}
.nio-mp__tile[hidden] { display: none; }
/* Поява плиток зліва направо, ряд за рядом — крок 100мс задає інлайн-стиль
   (animation-delay) із PHP, тут лише сама анімація. both — щоб плитка була
   невидима ДО своєї затримки і лишалась видимою після завершення. Клас
   is-open вішає/знімає JS при кожному відкритті/закритті — анімація тому
   програється щоразу заново, а не лише один раз при першому завантаженні. */
.nio-mp.is-open .nio-mp__tile { animation: nio-mp-tile-in .9s ease both; }
@keyframes nio-mp-tile-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nio-mp.is-open .nio-mp__tile { animation: none; } }
.nio-mp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
/* Той самий hover-zoom, що й в оригіналі теми: .zoom-frame:hover img{transform:scale(1.04)}. */
a.nio-mp__tile:hover .nio-mp__img { transform: scale(1.04); }
.nio-mp__tbadge {
	position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 4px;
	font-size: 11px; font-weight: 600; letter-spacing: .02em;
	background: rgba(17,17,17,.82); color: #fff; pointer-events: none;
}

@media (max-width: 900px) {
	.nio-mp__body { flex-direction: column; gap: 24px; }
	.nio-mp__tabs { flex-direction: row; flex-basis: auto; flex-wrap: wrap; gap: 20px; margin-right: 0; }
	.nio-mp__divider { display: none; }
}

/* В редакторе Elementor панель должна быть видна в потоке страницы, а не
   полноэкранным оверлеем, — иначе её нечем открыть для правки. */
.nio-mp--editor {
	position: static; inset: auto; overflow: visible;
	border: 1px dashed rgba(0,0,0,.2);
}
.nio-mp--editor .nio-mp__inner { min-height: 0; padding: 40px; }
.nio-mp--editor .nio-mp__close { position: absolute; top: 8px; right: 8px; }

/* ── Адаптивность панели ──────────────────────────────────────────────
   Порядок «сдачи» места при сужении экрана продуман так, чтобы плитки
   страдали последними:
     1) сначала схлопываются пустые поля вокруг серой линии (по 150px);
     2) затем плитки понемногу сжимаются, оставаясь по 3 в ряду;
     3) на 1300px ряд перестраивается на 2 плитки — и они возвращаются к
        своему полному размеру 370×268, потому что места снова хватает.
   `--mp-cols` задаёт контрол виджета селектором вида
   `.elementor-2800 .elementor-element-xxx .nio-mp` со специфичностью (0,4,0),
   поэтому перебить его из медиазапроса можно только через !important. */
@media (max-width: 1560px) {
	.nio-mp__tabs    { margin-right: 100px; }
	.nio-mp__divider { margin-right: 100px; }
}
@media (max-width: 1400px) {
	.nio-mp__tabs    { margin-right: 70px; }
	.nio-mp__divider { margin-right: 70px; }
}
@media (max-width: 1300px) {
	.nio-mp { --mp-cols: 2 !important; }
	.nio-mp__tabs    { margin-right: 60px; }
	.nio-mp__divider { margin-right: 60px; }
}
@media (max-width: 1150px) {
	.nio-mp__tabs    { margin-right: 30px; }
	.nio-mp__divider { margin-right: 30px; }
}