/* ═══ NIO — Технічні характеристики (гострі кути; тема — dark/light, повністю настроювана) ═══
   Усі кольори приходять через CSS-змінні, які рендер вписує inline (style=""),
   тому темна/світла таблиця можуть одночасно жити на одній сторінці незалежно. */

.ns{
	display: grid;
	grid-template-columns: minmax(210px, max-content) 1fr;
	background: var(--ns-bg, #141417);
	border: 1px solid var(--ns-border, #2a2a2e);
	color: var(--ns-text, #ededf0);
	font-family: inherit;
	line-height: 1.4;
	overflow: hidden;                 /* гострі кути, без заокруглень */
	margin: 0 0 24px;
}
.ns *{ box-sizing: border-box; }

/* ---------- Скруглені кути — для сторінок бренду ONVO ([onvo_specs], NIO лишається гострим) ---------- */
.ns--rounded{ border-radius: 15px; }
.ns--rounded .ns__selbtn{ border-radius: 7px; }
.ns--rounded .ns__selmenu{ border-radius: 7px; }

/* ── Ліве меню секцій (з іконками) ── */
.ns__nav{
	display: flex; flex-direction: column;
	padding: 16px 0;
	border-right: 1px solid var(--ns-line, #242428);
}
.ns__navitem{
	position: relative;
	display: flex; align-items: center; gap: 12px;
	text-align: left; background: none; border: 0; cursor: pointer; font: inherit;
	color: var(--ns-muted, #8b8b92); font-size: 15px; line-height: 1.25;
	padding: 13px 22px;
	transition: color .2s ease, background .2s ease;
}
.ns__navlabel{ white-space: nowrap; }
.ns__navitem:hover{ color: var(--ns-text, #ededf0); }
.ns__navitem.is-active{
	color: var(--ns-text, #ededf0); font-weight: 600;
	/* фон активної вкладки — згасання зліва направо (не суцільна заливка) */
	background: linear-gradient(90deg, color-mix(in srgb, var(--ns-accent1, #c9a25a) 14%, transparent), transparent 85%);
}
/* лівий індикатор — псевдоелемент (не border!), на всю висоту пункту, суцільний колір (другий колір градієнта) */
.ns__navitem.is-active::before{
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
	background: var(--ns-accent-bar, #c9a25a);
}
.ns__navicon{
	display: inline-flex; flex: 0 0 auto; color: var(--ns-muted, #8b8b92); transition: color .2s ease;
	--ns-navicon-paint: var(--ns-muted, #8b8b92);
}
.ns__navitem.is-active .ns__navicon,
.ns__navitem:hover .ns__navicon{
	color: var(--ns-accent1, #c9a25a);
	--ns-navicon-paint: var(--ns-accent-paint, #c9a25a);
}
.ns__navsvg{ width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.25;
	stroke-linecap: square; stroke-linejoin: miter; fill: none; transition: stroke .2s ease; }
/* повний градієнт — на іконці активної вкладки І при наведенні (stroke напряму, не через currentColor) */
.ns__navitem.is-active .ns__navsvg,
.ns__navitem:hover .ns__navsvg{ stroke: var(--ns-accent-paint, #c9a25a); }
/* завантажений SVG: кожна фігура, що мала власний fill і/або stroke, окремо
   переведена (через style=) на --ns-navicon-paint — коректно для «мішаних»
   іконок (частина залита, частина штрихова) на відміну від єдиного режиму. */
.ns__navimg{ width: 22px; height: 22px; object-fit: contain; display: block; }

/* ── Права частина ── */
.ns__main{ padding: 22px 26px 24px; min-width: 0; }

.ns__head{
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding-bottom: 16px; margin-bottom: 4px;
}
.ns__complabel{ color: var(--ns-muted, #8b8b92); font-size: 14px; letter-spacing: .01em; }

/* дропдаун комплектації */
.ns__select{ position: relative; }
.ns__selbtn{
	display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
	min-width: 210px; cursor: pointer; font: inherit; font-size: 14px;
	color: var(--ns-text, #ededf0); background: color-mix(in srgb, var(--ns-text, #000) 4%, transparent);
	border: 1px solid var(--ns-border, #2a2a2e); padding: 11px 16px;
	transition: border-color .2s ease, background .2s ease;
}
/* рамка при наведенні — повний градієнт (класичний трюк подвійного фону, border-color градієнт не вміє) */
.ns__selbtn:hover{
	border-color: transparent;
	background-image: linear-gradient(var(--ns-bg, #141417), var(--ns-bg, #141417)), var(--ns-accent-bg, #c9a25a);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.ns__chev{ width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--ns-accent-bar, #c9a25a); stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.ns__select.is-open .ns__chev{ transform: rotate(180deg); }
.ns__selmenu{
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
	list-style: none; margin: 0; padding: 6px;
	background: var(--ns-bg, #161619); border: 1px solid var(--ns-border, #2a2a2e);
	max-height: 300px; overflow-y: auto; display: none;
	box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.ns__select.is-open .ns__selmenu{ display: block; }
.ns__selopt{ padding: 10px 12px; color: var(--ns-muted, #8b8b92); cursor: pointer; font-size: 14px; }
.ns__selopt:hover{ color: var(--ns-text, #ededf0); background: color-mix(in srgb, var(--ns-text, #000) 5%, transparent); }
/* градієнт — ЛИШЕ на активному пункті ВІДКРИТОГО списку (не на закритому значенні кнопки) */
.ns__selopt.is-active .ns__selopt__text{
	background-image: var(--ns-accent-bg, #c9a25a);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	display: inline-block;
}
/* закрите значення (кнопка) і одиночна комплектація — звичайний білий/текстовий колір, як раніше */
.ns__selval{ color: var(--ns-text, #ededf0); }
.ns__selstatic{
	color: var(--ns-text, #ededf0); font-size: 14px; padding: 11px 16px;
	background: color-mix(in srgb, var(--ns-text, #000) 4%, transparent); border: 1px solid var(--ns-border, #2a2a2e);
}

/* ── Панелі та рядки (лише підпис + значення — без іконки в рядку) ── */
.ns__panel{ display: none; }
.ns__panel.is-active{ display: block; }

.ns__row{
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
	padding: 13px 2px; border-top: 1px solid var(--ns-line, #242428);
}
.ns__row:first-child{ border-top: 0; }

.ns__label{ color: var(--ns-muted, #8b8b92); font-size: 14.5px; }
.ns__value{ color: var(--ns-text, #ededf0); font-size: 14.5px; text-align: right; min-width: 0; }
.ns__v{ display: none; }
.ns__v.is-on{ display: block; }

/* значення-позначки. «Є» (+ і ●) — колір з акцентного градієнта (--ns-accent-bar:
   темна тема — перший колір градієнта, світла — другий; див. розподіл вище). */
.ns .vs-val--yes{ color: var(--ns-accent-bar, #1a7f37); font-weight: 600; }
.ns .vs-val--no{  color: var(--vs-no,  #c0392b); }
.ns .vs-val--empty{ color: var(--ns-muted2, #5f5f66); }
/* розмір ● на десктопі — як є (1em); зменшення лише на мобільній, у медіа-запиті нижче */
.ns .vs-mark{ display: inline-block; font-size: 1em; }
.ns .vs-mark--on{  color: var(--ns-accent-bar, #1a7f37); }
.ns .vs-mark--opt{ color: var(--vs-opt, #8a8a8a); }
.ns .vs-val__list{ list-style: none; margin: 0; padding: 0; }
.ns .vs-val__list li + li{ margin-top: 4px; }

/* ── Адаптив ── */
@media (max-width: 760px){
	.ns{ grid-template-columns: 1fr; }
	.ns__nav{
		flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
		border-right: 0; border-bottom: 1px solid var(--ns-line, #242428);
		padding: 8px; gap: 4px; scrollbar-width: none;
	}
	.ns__nav::-webkit-scrollbar{ display: none; }
	.ns__navitem{
		white-space: nowrap; flex: 0 0 auto;
		padding: 10px 14px; font-size: 14px;
	}
	.ns__navitem.is-active{ background: none; }
	.ns__navitem.is-active::before{
		left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 2px;
	}
	.ns__main{ padding: 16px; }
	.ns__head{ flex-direction: column; align-items: stretch; gap: 10px; }
	.ns__select, .ns__selbtn, .ns__selstatic{ width: 100%; }
	/* ● на мобільній оптично завеликий відносно тексту — лише тут зменшуємо */
	.ns .vs-mark{ font-size: .7em; vertical-align: .09em; }
}