/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 10 2026 | 15:38:40 */
/* =====================================================================
   Тёмная тема — дополнения (класс sk-dark у <html>: «Настройки сайта»
   theme = 'dark' или сниппета нет — santehkrep.ru). 10.10.2026.

   Основной вид тёмной темы — в остальных записях (base, header, content,
   product…). Здесь — то, что сделано для темы 'landing' и не зависит от
   цвета, в цветах тёмной темы:
   - «жидкие» капсулы меню и вкладок (/menu-opal/menu-opal.js): цвет и форма —
     как у подсветки тёмной темы (верхнее меню и вкладки — красная, левое
     меню — белая, активная вкладка — чёрная в светлой рамке);
   - первый экран главной в границах окна (у мастера поля −4em — заголовок
     обрезался по краям).
   Лента фото вариаций на телефоне, ярлыки вкладок флексом и чёрные названия
   в карусели — с вечера 10.10.2026 общие правила всех тем (product.css,
   content.css, home.css).
   Все правила — с .sk-dark: на светлых сайтах и на теме 'landing' не
   действуют.
   ===================================================================== */

/* ===== Капсула (menu-opal.js): общие свойства =====
   Положение и размер задаёт скрипт (translate + width/height). */
.sk-dark .sk-opal-pill {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	z-index: 0;
	box-sizing: border-box;
	pointer-events: none;
	background: red;
	opacity: 0;
	transition: opacity .18s ease;
}
/* отдельный слой — только пока капсула едет (на месте край был бы размытым) */
.sk-dark .sk-opal-pill.is-moving {
	will-change: transform, width, height;
}
.sk-dark .sk-opal-pill.is-on {
	opacity: 1;
}

/* ===== Верхнее меню и выпадающие списки (≥ 768 px) =====
   Наведение — красная капсула во всю ширину пункта (как красный фон пункта
   в header.css; --sk-opal-inset: 0 читает скрипт), текущий раздел — красный
   фон самого пункта, как был. Со скриптом (.sk-opal-on у списка) фон пункта
   при наведении прозрачный — под ним едет капсула. */
@media (min-width: 768px) {
	.sk-dark .main-navigation .primary-navigation > ul.menu {
		--sk-opal-inset: 0;
		position: relative;
	}
	.sk-dark .main-navigation .primary-navigation > ul.menu > li > a,
	.sk-dark .main-navigation .primary-navigation > ul.menu ul.sub-menu li a {
		position: relative;
		z-index: 1;
	}
	.sk-dark .main-navigation .primary-navigation > ul.menu.sk-opal-on > li:not(.current-menu-item):not(.current-menu-ancestor):not(.current-page-ancestor):hover > a,
	.sk-dark .main-navigation .primary-navigation > ul.menu.sk-opal-on > li:not(.current-menu-item):not(.current-menu-ancestor):not(.current-page-ancestor).focus > a,
	.sk-dark .main-navigation .primary-navigation > ul.menu ul.sub-menu.sk-opal-on li:not(.current-menu-item):hover > a,
	.sk-dark .main-navigation .primary-navigation > ul.menu ul.sub-menu.sk-opal-on li:not(.current-menu-item).focus > a {
		background-color: transparent;
	}
}

/* ===== Левое меню (там, где есть мышь) =====
   Наведение — белая капсула со скруглением 2px (как белый фон пункта в
   sidebar.css). Текст пункта чёрный, пока под ним капсула (класс
   .sk-opal-under ставит скрипт по ходу капсулы), иначе белый. */
.sk-dark .widget-area ul.product-categories,
.sk-dark .widget-area .text-categories > ul,
.sk-dark .widget-area ul.text-categories {
	position: relative;
	isolation: isolate;
}
.sk-dark .widget-area ul.product-categories a,
.sk-dark .widget-area .text-categories a,
.sk-dark .widget-area .text-categories li.current_page_item {
	position: relative;
	z-index: 1;
}
.sk-dark .widget-area .sk-opal-pill {
	background: white;
	border-radius: 2px;
}
.sk-dark .widget-area .sk-opal-on a {
	transition: color .12s ease;
}
.sk-dark .widget-area .sk-opal-on li:not(.current-cat) > a:hover {
	background-color: transparent;
	color: white;
}
.sk-dark .widget-area .sk-opal-on li:not(.current-cat) > a.sk-opal-under {
	color: black;
}

/* ===== Вкладки (Tabby Responsive Tabs), со скриптом =====
   Класс .sk-tabs-on у списка ярлыков: фон ярлыков рисуют капсулы — красная
   при наведении и чёрная в светлой рамке у активного; она переезжает к
   нажатому ярлыку. Серая подложка ярлыка — ::before под капсулами
   (z-index: -1 в слое списка), текст — над ними. Ярлыки в строку — общее
   правило в content.css. */
.sk-dark #page .responsive-tabs ul.responsive-tabs__list.sk-tabs-on {
	position: relative;
	z-index: 0;
}
.sk-dark #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item,
.sk-dark #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item:hover,
.sk-dark #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item--active,
.sk-dark #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item--active:hover {
	position: relative;
	top: 0;
	color: black;
	background-color: transparent;
	border-color: transparent;
	transition: color .15s ease;
}
.sk-dark #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item::before {
	content: '';
	position: absolute;
	inset: -1px -1px 0;
	z-index: -1;
	border-radius: 3px 3px 0 0;
	background: darkgrey;
	pointer-events: none;
}
.sk-dark #page .responsive-tabs ul.sk-tabs-on > .sk-opal-pill {
	border-radius: 3px 3px 0 0;
}
.sk-dark #page .responsive-tabs ul.sk-tabs-on > .sk-opal-pill.sk-tab-active {
	background: black;
	border: 1px solid #ddd;
	border-bottom: 0;
}
/* Текст ярлыка белый, пока под ним чёрная капсула (.sk-tab-dark ставит
   скрипт), иначе чёрный; значок — красный, при наведении — пшеничный */
.sk-dark #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item.sk-tab-dark {
	color: white;
}
.sk-dark #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item span.fa {
	color: red;
	transition: color .15s ease;
}
.sk-dark #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item:hover:not(.sk-tab-dark) span.fa {
	color: wheat;
}

/* ===== Главная: первый экран в границах окна =====
   У блоков поля −4em при полях страницы 2em — заголовок и текст выходили за
   окно и обрезались по краям (так было и на мастере до темы 'landing').
   Заголовок и подзаголовок — строки поровну, без переносов по слогам (иначе
   «произ-» уходило за край, а у подзаголовка оставался хвост «ники.»). */
.sk-dark #content .hero-main,
.sk-dark #content .hero-text-main {
	margin-left: 0;
	margin-right: 0;
}
.sk-dark #content .hero-main h1.big,
.sk-dark #content .hero-main h2 {
	text-wrap: balance;
	hyphens: manual;
	overflow-wrap: normal;
}