/*
 * Ночная тема магазина «Водяной» — основа.
 *
 * Здесь только то, что решаем сами: цвета, шапка, подвал, карточки товара,
 * поля ввода. Длинный хвост чужих плашек (плагины сравнения, всплывающие
 * корзины, фильтры) лежит в vd76-tema-sobrano.css — он собран из настоящих
 * стилей сайта и перезаписывается сборщиком, руками его не правят.
 *
 * Этот файл подключается ПОСЛЕ собранного, поэтому при споре побеждает он.
 */

html[data-vd76-tema="noch"] {
	--vd76-fon: #14171b;            /* страница */
	--vd76-poverhnost: #1c2027;     /* шапка, подвал, карточки */
	--vd76-poverhnost-2: #252b33;   /* поля, наведение, полосы таблиц */
	--vd76-tekst: #e3e8ee;
	--vd76-tekst-2: #9aa5b2;
	--vd76-granica: #2f3742;
	--vd76-sineva: #31b2ee;         /* фирменный голубой, не трогаем */
	--vd76-plitka: #eef1f4;         /* подложка под фото товара */

	/* Браузер сам красит полосы прокрутки и системные элементы форм. */
	color-scheme: dark;
	background-color: var(--vd76-fon);
}

html[data-vd76-tema="noch"] body {
	background-color: var(--vd76-fon);
	color: var(--vd76-tekst-2);
}

/*
 * Заголовки НЕ красим оптом.
 *
 * На главной плитки разделов («Ванны», «Душевые кабины») — это фотографии
 * со светлым фоном, залитые картинкой: фон такой плитки тёмным не станет,
 * а заголовок от общего правила стал светлым и пропал. Поэтому цвет
 * заголовков меняют только правила, собранные из стилей самой темы:
 * там фон и текст всегда идут парой.
 */

/* ─── Шапка ──────────────────────────────────────────────────────────────── */

html[data-vd76-tema="noch"] .bwp-header,
html[data-vd76-tema="noch"] .bwp-header .header-desktop,
html[data-vd76-tema="noch"] .bwp-header .header-mobile,
html[data-vd76-tema="noch"] .bwp-header .header-desktop > .header-wrapper,
html[data-vd76-tema="noch"] .bwp-header .header-bottom {
	background-color: var(--vd76-poverhnost) !important;
}

/* Верхняя полоса остаётся фирменной, но приглушена: в темноте чистый #31b2ee
   слепит и перетягивает на себя весь экран. */
html[data-vd76-tema="noch"] .bwp-header .topbar-v4 {
	background-color: #14567c !important;
}

html[data-vd76-tema="noch"] .bwp-header .header-bottom {
	border-top: 1px solid var(--vd76-granica);
}

html[data-vd76-tema="noch"] .bwp-header .phone,
html[data-vd76-tema="noch"] .bwp-header .phone a,
html[data-vd76-tema="noch"] .bwp-header .mini-cart .cart-count,
html[data-vd76-tema="noch"] .bwp-header .wpbingo-menu-wrapper .menu-item-text {
	color: var(--vd76-tekst);
}

/* Колонка «Все категории», выпадающие списки меню и мегаменю. */
html[data-vd76-tema="noch"] .verticalmenu,
html[data-vd76-tema="noch"] .bwp-vertical-navigation,
html[data-vd76-tema="noch"] .sub-menu,
html[data-vd76-tema="noch"] .megamenu,
html[data-vd76-tema="noch"] .dropdown-menu {
	background-color: var(--vd76-poverhnost) !important;
	border-color: var(--vd76-granica);
}

html[data-vd76-tema="noch"] .verticalmenu li > a,
html[data-vd76-tema="noch"] .sub-menu li > a,
html[data-vd76-tema="noch"] .dropdown-menu li > a {
	color: var(--vd76-tekst-2);
}

html[data-vd76-tema="noch"] .verticalmenu li > a:hover,
html[data-vd76-tema="noch"] .sub-menu li > a:hover,
html[data-vd76-tema="noch"] .dropdown-menu li > a:hover {
	color: var(--vd76-sineva);
	background-color: var(--vd76-poverhnost-2);
}

/* ─── Шапка раздела с фоном-«каплями» ────────────────────────────────────── */

/*
 * У заголовка раздела фоном стоит светлая фотография капель на стекле —
 * на весь экран. Убирать её жалко: это лицо магазина. Поэтому не убираем,
 * а умножаем на тёмный цвет: рисунок остаётся, свечения нет. Приём хорош
 * тем, что не нужно знать адрес картинки — он у каждого раздела свой.
 */
html[data-vd76-tema="noch"] .page-title,
html[data-vd76-tema="noch"] .bwp-title {
	background-color: #10141a;
	background-blend-mode: multiply;
}

/* Хлебные крошки лежат прямо на этой картинке — своей подложки им не надо. */
html[data-vd76-tema="noch"] .page-title .breadcrumb,
html[data-vd76-tema="noch"] .bwp-breadcrumb {
	background-color: transparent !important;
}

/* ─── Поля ввода ─────────────────────────────────────────────────────────── */

html[data-vd76-tema="noch"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html[data-vd76-tema="noch"] select,
html[data-vd76-tema="noch"] textarea {
	background-color: var(--vd76-poverhnost-2) !important;
	border-color: var(--vd76-granica);
	color: var(--vd76-tekst);
}

html[data-vd76-tema="noch"] ::placeholder {
	color: #77818d;
	opacity: 1;
}

/* Поиск в шапке: поле и плашка «Все категории» — одна коробка. */
html[data-vd76-tema="noch"] .header-search-form .search-box,
html[data-vd76-tema="noch"] .header-search-form form,
html[data-vd76-tema="noch"] .pwb-dropdown-toggle,
html[data-vd76-tema="noch"] .select_category {
	background-color: var(--vd76-poverhnost-2) !important;
	border-color: var(--vd76-granica) !important;
	color: var(--vd76-tekst);
}

/* ─── Плитки разделов на главной ─────────────────────────────────────────── */

/*
 * Плитки «Ванны», «Душевые кабины», «Мебель для ванной» — это фотографии
 * со светлым фоном, поверх которых лежит надпись. Надпись в ночной теме
 * светлая, и на светлом снимке её не видно вовсе (поймал на первом снимке
 * экрана). Поэтому приглушаем сам снимок: подпись читается, а при наведении
 * плитка светлеет — понятно, что она живая.
 */
html[data-vd76-tema="noch"] .bwp-widget-banner .bwp-image img {
	filter: brightness(0.52) saturate(0.9);
	transition: filter 0.25s;
}

html[data-vd76-tema="noch"] .bwp-widget-banner:hover .bwp-image img {
	filter: brightness(0.68);
}

@media (prefers-reduced-motion: reduce) {
	html[data-vd76-tema="noch"] .bwp-widget-banner .bwp-image img { transition: none; }
}

/* ─── Товары ─────────────────────────────────────────────────────────────── */

html[data-vd76-tema="noch"] .product-wapper,
html[data-vd76-tema="noch"] .products-content,
html[data-vd76-tema="noch"] .content-product-list {
	background-color: var(--vd76-poverhnost);
}

html[data-vd76-tema="noch"] .product-title a,
html[data-vd76-tema="noch"] .product_title {
	color: var(--vd76-tekst);
}

/*
 * Фото товара оставляем на светлой плитке: у сантехники снимки сняты на белом,
 * и на тёмном фоне они превращаются в светящиеся квадраты. Плитка делает из
 * этого приём: фото лежит на подложке, цвета товара остаются настоящими —
 * а для магазина сантехники цвет товара врать не должен.
 * Лёгкое приглушение снимаем при наведении.
 */
html[data-vd76-tema="noch"] .products-thumb,
html[data-vd76-tema="noch"] .product-thumb,
html[data-vd76-tema="noch"] .woocommerce-product-gallery__image {
	background-color: var(--vd76-plitka);
	border-radius: 6px;
	overflow: hidden;
}

html[data-vd76-tema="noch"] .products-thumb img,
html[data-vd76-tema="noch"] .product-thumb img,
html[data-vd76-tema="noch"] .woocommerce-product-gallery__image img {
	filter: brightness(0.94);
	transition: filter 0.2s;
}

html[data-vd76-tema="noch"] .product-wapper:hover .products-thumb img,
html[data-vd76-tema="noch"] .woocommerce-product-gallery__image img:hover {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	html[data-vd76-tema="noch"] .products-thumb img { transition: none; }
}

html[data-vd76-tema="noch"] .price,
html[data-vd76-tema="noch"] .price ins,
html[data-vd76-tema="noch"] .amount {
	color: var(--vd76-sineva);
}

html[data-vd76-tema="noch"] .price del,
html[data-vd76-tema="noch"] .price del .amount {
	color: #6f7a86;
}

/* ─── Кнопки главного действия ───────────────────────────────────────────── */

/*
 * Тема заливает такие кнопки почти чёрным (#0a0a0a): в дневном оформлении
 * это и означает «главное действие». На тёмной странице они пропадают
 * совсем — кнопку «Логин» в кабинете было не видно. В ночной теме роль
 * главного действия берёт фирменный голубой: ровно так же выглядит кнопка
 * «Регистрация», которая голубая и днём.
 *
 * Список правил не выдуман: это все живые правила сайта, заливающие фон
 * почти чёрным (проверено сверкой с разметкой девяти страниц). Тёмные
 * подложки окон и всплывающих слоёв в него намеренно не попали.
 */
html[data-vd76-tema="noch"] .woocommerce button.button,
html[data-vd76-tema="noch"] .woocommerce-cart-form table.shop_table .button,
html[data-vd76-tema="noch"] .mini-cart .cart-popup .buttons .button,
html[data-vd76-tema="noch"] .woocommerce input.button,
html[data-vd76-tema="noch"] .form-login-register .box-form-login .button-login input[type="submit"],
html[data-vd76-tema="noch"] .woocommerce-account #customer_login .button-login input[type="submit"],
html[data-vd76-tema="noch"] .error404 .page-404 .content-page-404 a {
	background-color: var(--vd76-sineva);
	color: #fff;
	border-color: var(--vd76-sineva);
}

html[data-vd76-tema="noch"] .woocommerce button.button:hover,
html[data-vd76-tema="noch"] .woocommerce-cart-form table.shop_table .button:hover,
html[data-vd76-tema="noch"] .mini-cart .cart-popup .buttons .button:hover,
html[data-vd76-tema="noch"] .woocommerce input.button:hover,
html[data-vd76-tema="noch"] .form-login-register .box-form-login .button-login input[type="submit"]:hover,
html[data-vd76-tema="noch"] .woocommerce-account #customer_login .button-login input[type="submit"]:hover,
html[data-vd76-tema="noch"] .error404 .page-404 .content-page-404 a:hover {
	background-color: #1a90c6;
	border-color: #1a90c6;
	color: #fff;
}

/* ─── Таблицы, вкладки, уведомления ──────────────────────────────────────── */

html[data-vd76-tema="noch"] table,
html[data-vd76-tema="noch"] table th,
html[data-vd76-tema="noch"] table td {
	border-color: var(--vd76-granica);
	color: var(--vd76-tekst-2);
}

/*
 * Характеристики товара (вкладка «Детали»).
 *
 * Значения красит наше же правило `table.shop_attributes > tbody > tr > td`
 * в почти чёрный — в ночной теме текст сливался с фоном. Общего правила для
 * таблиц не хватало: у того селектора такая же сила, а выводится он инлайном
 * в самой странице, то есть ПОЗЖЕ наших листов и при равенстве побеждает.
 * Поэтому здесь селектор повторён целиком — он заведомо сильнее.
 */
html[data-vd76-tema="noch"] table.shop_attributes > tbody > tr > td,
html[data-vd76-tema="noch"] table.shop_attributes > tr > td {
	color: var(--vd76-tekst);
}

html[data-vd76-tema="noch"] table.shop_attributes > tbody > tr > th,
html[data-vd76-tema="noch"] table.shop_attributes > tr > th {
	/* у исходного правила стоит !important — без него не перебить */
	color: var(--vd76-tekst-2) !important;
}

/*
 * Оформление заказа.
 *
 * ⚠ Эта страница живёт только при непустой корзине, поэтому в первый сбор
 * она не попала вовсе — и осталась светлой, а кнопка «Подтвердить заказ»
 * чёрной на чёрном. Сбор починен (см. tema/kachat.sh), но главная кнопка
 * магазина задаётся здесь осознанно: у неё идентификатор, коротким
 * селектором его не перебить.
 */
html[data-vd76-tema="noch"] #place_order {
	background-color: var(--vd76-sineva);
	color: #fff;
	border-color: var(--vd76-sineva);
}

html[data-vd76-tema="noch"] #place_order:hover {
	background-color: #1a90c6;
	border-color: #1a90c6;
}

html[data-vd76-tema="noch"] #order_review,
html[data-vd76-tema="noch"] table.woocommerce-checkout-review-order-table,
html[data-vd76-tema="noch"] table.woocommerce-checkout-review-order-table thead,
html[data-vd76-tema="noch"] table.woocommerce-checkout-review-order-table thead th,
html[data-vd76-tema="noch"] table.woocommerce-checkout-review-order-table tfoot {
	background-color: var(--vd76-poverhnost);
	color: var(--vd76-tekst);
}

/* Кнопки «плюс» и «минус» у количества белые — рядом с тёмным полем
   числа это выглядело поломкой. Приводим к тому же виду, что и поле. */
html[data-vd76-tema="noch"] button.plus,
html[data-vd76-tema="noch"] button.minus {
	background-color: var(--vd76-poverhnost-2);
	color: var(--vd76-tekst);
	border-color: var(--vd76-granica);
}

/* Шапка таблицы корзины и заголовок «Сумма корзины» залиты светло-серым. */
html[data-vd76-tema="noch"] .woocommerce table.shop_table thead,
html[data-vd76-tema="noch"] .woocommerce table.shop_table thead th,
html[data-vd76-tema="noch"] .cart-collaterals h2,
html[data-vd76-tema="noch"] .cart_totals h2 {
	background-color: var(--vd76-poverhnost-2);
	color: var(--vd76-tekst);
}

html[data-vd76-tema="noch"] table tr:nth-child(even) td,
html[data-vd76-tema="noch"] .shop_attributes tr:nth-child(even) {
	background-color: var(--vd76-poverhnost-2);
}

html[data-vd76-tema="noch"] .woocommerce-message,
html[data-vd76-tema="noch"] .woocommerce-info,
html[data-vd76-tema="noch"] .woocommerce-error {
	background-color: var(--vd76-poverhnost-2);
	color: var(--vd76-tekst);
	border-color: var(--vd76-granica);
}

/* ─── Галерея «Наш магазин» ──────────────────────────────────────────────── */

/*
 * ⚠ Треугольник кнопки «смотреть» нарисован рамками:
 *   border-color: transparent transparent transparent #fff
 * Сборщик увидел в этой строке белый цвет и заменил ВСЮ строку одним тёмным —
 * вместе с прозрачностью трёх сторон. Треугольник пропал, остался тёмный круг
 * (владелец отметил его на снимке). Сборщик научен не трогать многозначные
 * рамки, а здесь возвращаем правильный вид явно.
 */
html[data-vd76-tema="noch"] .vd76-play::before {
	border-color: transparent transparent transparent #fff;
}

/*
 * Стрелки галереи — светлый кружок с тёмной «птичкой». Сборщик затемнил
 * кружок, а «птичка» рисуется рамками и осталась тёмной: получился тёмный
 * круг без стрелки (второе место, отмеченное владельцем). Стрелки лежат
 * поверх фотографий, поэтому светлыми они уместны и ночью — возвращаем.
 */
html[data-vd76-tema="noch"] .vd76-strelka {
	background: rgba(255, 255, 255, 0.93);
}

html[data-vd76-tema="noch"] .vd76-strelka:hover {
	background: #fff;
}

/* ─── Подвал ─────────────────────────────────────────────────────────────── */

html[data-vd76-tema="noch"] .bwp-footer {
	background-color: var(--vd76-poverhnost) !important;
	color: var(--vd76-tekst-2);
}

/* В подвале фоном лежит своя фотография — гасим её тем же умножением,
   что и «капли» в шапке раздела. */
html[data-vd76-tema="noch"] .bwp-footer .elementor-top-section {
	background-color: var(--vd76-poverhnost);
	background-blend-mode: multiply;
}

/*
 * Значки преимуществ («Доставка по РФ», «Доступные цены», «Консультация») —
 * тёмные рисунки в файлах, рассчитанные на белый фон: на тёмном они
 * превращаются в чёрные пятна. Выворачиваем цвета — рисунок становится
 * светлым. Работает потому, что картинки одноцветные.
 */
html[data-vd76-tema="noch"] .bwp-policy .policy-icon img {
	filter: invert(1) brightness(1.1);
}

html[data-vd76-tema="noch"] .bwp-footer .social-link > li > a {
	color: var(--vd76-tekst-2);
}

html[data-vd76-tema="noch"] .bwp-footer .social-link > li > a:hover {
	color: var(--vd76-sineva);
}

/*
 * Логотип в подвале — файл logotip.jpg, а у JPEG прозрачности не бывает:
 * белый фон впечатан в саму картинку, и на тёмной странице он выглядел
 * белым прямоугольником без причины. Перекрасить нельзя, поэтому делаем
 * из него осознанную белую карточку — как плитка под фото товара.
 */
html[data-vd76-tema="noch"] .bwp-footer img[src*="logotip"] {
	background: #fff;
	padding: 10px;
	border-radius: 10px;
}

/* ─── Кнопка «ВКонтакте» ─────────────────────────────────────────────────── */

/*
 * Виджет сообщений ВКонтакте — чужое окно с белой страницей внутри: снаружи
 * его не покрасить, и на тёмной странице он светился белым прямоугольником.
 * Виджет свёрнут — это круглая кнопка слева и пустое место под подсказку
 * справа. Пока он свёрнут, обрезаем окно по кругу кнопки: белое исчезает,
 * кнопка остаётся целой.
 *
 * Условие берём из самого ВКонтакте: у свёрнутого окна атрибуты width="85"
 * height="50". Развернёт чат — размеры станут другими, правило перестанет
 * подходить само собой, и обрезать будет нечего. Скрипт для этого не нужен
 * (и не годится: наблюдатель размеров в фоновой вкладке не срабатывает).
 */
html[data-vd76-tema="noch"] #vk_community_messages iframe[width="85"][height="50"] {
	clip-path: circle(25px at 25px 50%);
}

/* ─── Наши собственные окна (в 1 клик, сообщить о поступлении) ───────────── */

html[data-vd76-tema="noch"] .vd76-korobka {
	background-color: var(--vd76-poverhnost);
	color: var(--vd76-tekst);
}

html[data-vd76-tema="noch"] .vd76-pole input:not([type="checkbox"]) {
	background-color: var(--vd76-poverhnost-2);
	border-color: var(--vd76-granica);
	color: var(--vd76-tekst);
}

/* ─── Кнопка переключения ────────────────────────────────────────────────── */

.vd76-tema-knopka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * Соседи по шапке (телефон, избранное, корзина) выше нашей кнопки
	 * и растягиваются на всю строку, а кнопка с заданной высотой оставалась
	 * прижатой к верху — значок стоял на 5 пикселей выше остальных.
	 * Ставим себя по центру строки явно.
	 */
	align-self: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0 6px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: #4a5460;
	cursor: pointer;
	vertical-align: middle;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.vd76-tema-knopka:hover,
.vd76-tema-knopka:focus-visible {
	color: var(--vd76-sineva, #31b2ee);
	border-color: rgba(49, 178, 238, 0.45);
	background-color: rgba(49, 178, 238, 0.08);
}

.vd76-tema-knopka svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vd76-tema-knopka .vd76-tema-solnce { display: none; }

html[data-vd76-tema="noch"] .vd76-tema-knopka {
	color: #c9d3de;
}

html[data-vd76-tema="noch"] .vd76-tema-knopka .vd76-tema-luna { display: none; }
html[data-vd76-tema="noch"] .vd76-tema-knopka .vd76-tema-solnce { display: block; }

/* В мобильной шапке места меньше. */
/*
 * Тонкая доводка по вертикали.
 *
 * Коробки соседей высотой со всю строку, но сами значки нарисованы внутри
 * них ниже середины: сердце — на 93, корзина — на 91 пиксель от верха окна,
 * а наш значок вставал ровно на 86. Выравнивания коробок тут мало, нужен
 * сдвиг самого рисунка — тогда три значка стоят на одной линии.
 */
@media (min-width: 992px) {
	.header-desktop .vd76-tema-knopka {
		position: relative;
		top: 5px;
	}
}

@media (max-width: 767px) {
	.vd76-tema-knopka {
		width: 34px;
		height: 34px;
		margin: 0 2px;
	}
}