/* =====================================================================
   ULTRA.KG — тёмная тема. Включается атрибутом html[data-theme="dark"]: его ставит скрипт в <head> (header.php)
   по выбору посетителя (кнопка «Тема» в шапке, localStorage «ul-theme») или, если выбора нет, по настройке
   телефона/компьютера (prefers-color-scheme). Файл подключается последним на всех страницах.
   Основа — переменные из css/ultra.css: здесь меняются их значения. Плашки под фото (--ul-photo) остаются белыми:
   фото товаров всегда на белом фоне.
   ===================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body.ultra {
	background-color: #121418;
}
html[data-theme="dark"] body.ultra {
	--ul-red: #f0303b;
	--ul-red-600: #d61420;
	--ul-red-50: #3a1d21;
	--ul-g-50: #20242a;
	--ul-g-100: #272b32;
	--ul-g-200: #323840;
	--ul-g-300: #4a515b;
	--ul-g-600: #a9b0b9;
	--ul-g-650: #b4bac2;
	--ul-g-700: #c6cbd2;
	--ul-bg: #121418;
	--ul-line: #2a2f36;
	--ul-text: #eceef1;
	--ul-muted: #969da8;
	--ul-card: #1b1e23;
	--ul-photo: #fff;
	--ul-ink: #3a4049;
	--ul-ink-hover: #474e58;
	--ul-footer: #0d0f12;
	--ul-ok-bg: rgba(46, 184, 114, .16);
	--ul-ok-fg: #5fd69a;
	--ul-warn-bg: rgba(255, 170, 30, .14);
	--ul-warn-fg: #ffbb55;
	--ul-info-bg: rgba(80, 140, 255, .16);
	--ul-info-fg: #8db6ff;
	color: var(--ul-text);
}

/* Тени на тёмном почти не видны — делаем их глубже, чтобы карточки отделялись */
html[data-theme="dark"] body.ultra .ul-mainbar.is-scrolled { box-shadow: 0 1px 0 var(--ul-line), 0 10px 26px rgba(0,0,0,.45); }

/* Плашки под фото товаров: картинки с белым фоном — на белой подложке со скруглением, а не белым прямоугольником
   на тёмной карточке */
html[data-theme="dark"] body.ultra .item.product .picture,
html[data-theme="dark"] body.ultra .ul-card__pic,
html[data-theme="dark"] body.ultra .nout-card__media,
html[data-theme="dark"] body.ultra #basketProductList .productColImage { background-color: var(--ul-photo); border-radius: 14px; }

/* Главная: светлый слайд героя — тёмным градиентом (красный слайд остаётся как есть) */
html[data-theme="dark"] body.ultra .ul-hero__slide:not(.ul-hero__slide--red) { background: linear-gradient(135deg, #23272e, #1a1d22); }
html[data-theme="dark"] body.ultra .ul-hero__slide:not(.ul-hero__slide--red)::before {
	background:
		radial-gradient(circle at 82% 28%, rgba(255,255,255,.07), transparent 46%),
		repeating-linear-gradient(-14deg, rgba(255,255,255,.03) 0 18px, transparent 18px 52px);
}

/* ---------- Каталог: карточки товаров (разметка и стили dresscode с белым фоном) ---------- */
html[data-theme="dark"] body.ultra .item.product { background-color: var(--ul-card) !important; }
html[data-theme="dark"] body.ultra .skuPropertyList .skuPropertyLink { background-color: var(--ul-g-50) !important; border-color: var(--ul-g-200) !important; color: var(--ul-text) !important; }
html[data-theme="dark"] body.ultra .skuPropertyList .skuPropertyValue.selected .skuPropertyLink { background-color: var(--ul-red-50) !important; border-color: var(--ul-red) !important; color: #ff7a82 !important; }
html[data-theme="dark"] body.ultra .ulSpecRow .ulSpecValue { color: var(--ul-text) !important; }
html[data-theme="dark"] body.ultra .ulSpecRow .ulSpecName { color: var(--ul-muted) !important; }

/* ---------- Выпадающие списки dresscode (сортировка каталога, тип плательщика и доставка в оформлении) ---------- */
html[data-theme="dark"] body.ultra .dropDown,
html[data-theme="dark"] body.ultra .dropDownList { background-color: var(--ul-g-50) !important; border-color: var(--ul-g-200) !important; color: var(--ul-text) !important; }
html[data-theme="dark"] body.ultra .dropDownItems { background-color: var(--ul-card) !important; border-color: var(--ul-g-200) !important; box-shadow: 0 16px 36px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] body.ultra .dropDownItem { color: var(--ul-text) !important; }
html[data-theme="dark"] body.ultra .dropDownItem:hover,
html[data-theme="dark"] body.ultra .dropDownItem.selected { background-color: var(--ul-g-100) !important; color: var(--ul-red) !important; }

/* ---------- Поиск: «Уточните категорию» слева (меню dresscode) ---------- */
html[data-theme="dark"] body.ultra #nextSection .title { background-color: var(--ul-g-100) !important; color: var(--ul-text) !important; }
html[data-theme="dark"] body.ultra #nextSection a { color: var(--ul-text) !important; }
html[data-theme="dark"] body.ultra #nextSection a:hover { color: var(--ul-red) !important; }

/* ---------- Нижнее меню на телефоне: полупрозрачный фон под цвет темы ---------- */
html[data-theme="dark"] body.ultra .ul-tabbar { background: rgba(27, 30, 35, .96); border-top-color: var(--ul-line); box-shadow: 0 -8px 24px rgba(0,0,0,.4); }

/* ---------- Каталог на телефоне: разделители плиток, чипы конфигураций, характеристики, наличие
   (цвета зашиты в общих с NOUT.KG local/css/ul-catalog-chips.css и ul-catalog-views.css) ---------- */
/* рамку плиткам задаёт body:not(.site-s2) #catalogSection .item.product (с id) — перекрываем тем же весом и выше */
html[data-theme="dark"] body.ultra .item.product,
html[data-theme="dark"] body.ultra .itemRow,
html[data-theme="dark"] body.ultra #catalogSection .item.product,
html[data-theme="dark"] body.ultra #catalogSection .item.product:hover { border-color: var(--ul-line) !important; }
html[data-theme="dark"] body.ultra #catalogSection .item.product:hover { box-shadow: 0 12px 28px rgba(0,0,0,.45); }
html[data-theme="dark"] body.ultra .item.product::before { background-color: var(--ul-line) !important; }
html[data-theme="dark"] body.ultra .ulSkuBox .skuPropertyName { color: var(--ul-muted) !important; }
html[data-theme="dark"] body.ultra .ulSkuBox .ulChipMore { background: var(--ul-g-50) !important; border-color: var(--ul-g-300) !important; color: #ff7a82 !important; }
html[data-theme="dark"] body.ultra .ulSkuBoxSpecs .ulSpecRow { border-color: var(--ul-g-200) !important; }
html[data-theme="dark"] body.ultra .itemRow .ulSkuBoxLine.ulSkuBoxSpecs .ulSpecRow { background: var(--ul-g-50) !important; }
html[data-theme="dark"] body.ultra .inStock.label,
html[data-theme="dark"] body.ultra .itemRow .inStock { background-color: var(--ul-ok-bg) !important; color: var(--ul-ok-fg) !important; }

/* ---------- Фильтр: на телефоне — выезжающая панель с белым фоном dresscode ---------- */
html[data-theme="dark"] body.ultra #smartFilter { background-color: var(--ul-card) !important; box-shadow: 0 16px 40px rgba(0,0,0,.55) !important; }