/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 10 2026 | 15:38:40 */
/*
 * Тема «как лендинги» — светлая кремовая (сделана на полигоне restore-test.ru
 * 09.10.2026; на мастере сантехкреп.рф с 10.10.2026).
 *
 * Оформление взято с лендингов сантехкреп.рф (/landings/fum-tape/ и др.):
 * кремовый фон, шрифты Fira Sans (текст) и Fira Sans Extra Condensed (узкий
 * жирный курсив — заголовки), жёлтые и красные плашки-параллелограммы,
 * карточки, которые при наведении поднимаются в чёрной рамке; выбранное —
 * чёрная плашка с жёлтым текстом, наведение — жёлтая плашка.
 * 3D-фон остаётся, его цвета (синие, «вода») — переменные --sk-3d-*, их
 * читает /threejs/my-animation.js.
 *
 * Правила срабатывают при классе sk-landing у <html> (сниппет «Оформление и
 * библиотеки», тема 'landing' в «Настройках сайта»). В отличие от
 * theme-light.css селекторы с настоящим весом (.sk-landing …): слой должен
 * перебивать мастер вместе с его :hover, поэтому все состояния (наведение,
 * текущий пункт) заданы здесь же. Против !important мастера — !important.
 * Запись выводится последней (самая ранняя дата среди CSS-записей).
 *
 * Только оформление: разметка и шаблоны страниц не меняются.
 * Шрифты — /fonts/fira/ в корне сайта (лицензия SIL OFL, OFL-fira-sans.txt).
 */

/* ===== Цвета и шрифты темы ===== */
.sk-landing {
	--skl-bg: #F2ECDF;
	--skl-surface: #FBF8F1;
	--skl-surface-2: #F5EFE3;
	--skl-ink: #1E1A16;
	--skl-ink-2: #5D564B;
	--skl-line: #DCD2BF;
	--skl-line-strong: #B6AA94;
	--skl-yellow: #FFF200;
	--skl-yellow-pale: #FFF8C4;
	--skl-red: #D0121A;
	--skl-red-dark: #B80F16;
	--skl-orange: #E07A00;   /* кайма жёлтых подсветок в меню */
	--skl-font-body: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--skl-font-display: 'Fira Sans Extra Condensed', 'Fira Sans', 'Arial Narrow', sans-serif;
	--skl-radius: 16px;
	--skl-shadow: 0 18px 36px -14px rgba(30, 26, 22, .35);
	--skl-lift: 0 0 0 2px var(--skl-ink), var(--skl-shadow);

	/* 3D-фон: вода — синие и голубые тона на кремовом фоне */
	--sk-3d-bg: #F2ECDF;
	/* прозрачность — вдвое меньше первого варианта, чтобы не мешать тексту */
	--sk-3d-grid: #3B8FDB;
	--sk-3d-grid-opacity: .25;
	--sk-3d-grid-fade-curve: 1.5;
	--sk-3d-points: #0B5CAD;
	--sk-3d-points-opacity: .45;
	--sk-3d-fish: #1673B8;
	--sk-3d-manta: #1F5A8C;
	--sk-3d-shark: #2A6FA6;
	--sk-3d-life-opacity: .43;
	/* туман: на светлом фоне линия даже при малой прозрачности заметна, поэтому
	   уплывающие вдаль (в верх экрана) рыбы, скат и акула и тают круче, и
	   смешиваются с цветом фона (туман three.js; у тёмной темы он дальше сцены) */
	--sk-3d-fog-near: 10;
	--sk-3d-fog-far: 22;
	--sk-3d-fade-start: 4;
	--sk-3d-fade-end: 18;
	--sk-3d-fade-curve: 2;

	/* Фон «японские волны» (/bg-waves/waves.js; включается в «Настройках
	   сайта»: bg_3d = false, bg_waves = true). Раскладка seigaiha — овалы
	   правильной сеткой, полосы с общим центром (heart 0); free — прежние
	   волны-холмы разного размера (size 78, rings 11, heart 1) */
	--sk-waves-layout: seigaiha;
	--sk-waves-line: #3D9CC0;
	--sk-waves-alpha: .13;
	--sk-waves-fill: #F2ECDF;
	--sk-waves-size: 32;
	--sk-waves-rings: 6;
	--sk-waves-heart: 0;
	--sk-waves-width: 1.6;
	--sk-waves-speed: 1;
	/* Фон-узор (bg_waves = 'pattern', /bg-waves/pattern.js): цвет узора и
	   масштаб плитки (1 — 508×514 px; .25 — ряд волн ≈ 64 px) */
	--sk-pattern-color: #C9D6E6;
	--sk-pattern-scale: .25;
	/* туман сверху (у обоих фонов): выше низа шапки с меню фона нет (auto),
	   полностью проявляется к 40 % высоты экрана (было 70 %, 09.10.2026 22:43
	   «подними туман сверху повыше») */
	--sk-waves-fade-start: auto;
	--sk-waves-fade-end: .4;
}

/* ===== Шрифты (локальные, /fonts/fira/) ===== */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/fira/fira-sans-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/fira/fira-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/fira/fira-sans-cyrillic-400-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/fira/fira-sans-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/fira/fira-sans-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/fira/fira-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fira/fira-sans-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/fira/fira-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/fira/fira-sans-cyrillic-600-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/fira/fira-sans-latin-600-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/fira/fira-sans-extra-condensed-cyrillic-700-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: italic; font-weight: 700; font-display: swap; src: url(/fonts/fira/fira-sans-extra-condensed-latin-700-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url(/fonts/fira/fira-sans-extra-condensed-cyrillic-800-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: italic; font-weight: 800; font-display: swap; src: url(/fonts/fira/fira-sans-extra-condensed-latin-800-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Основа: фон, текст, ссылки (base.css) ===== */
html.sk-landing {
	background: var(--skl-bg);
	color-scheme: light;
}
.sk-landing body {
	font-family: var(--skl-font-body) !important;
	color: var(--skl-ink);
}
.sk-landing ::selection {
	background: var(--skl-yellow);
	color: var(--skl-ink);
}
.sk-landing :focus-visible {
	outline: 3px solid var(--skl-red);
	outline-offset: 3px;
}

/* Заголовки — узкий жирный курсив, как на лендингах */
.sk-landing h1, .sk-landing h2, .sk-landing h3, .sk-landing h4 {
	color: var(--skl-ink);
	font-family: var(--skl-font-display);
	font-style: italic;
	letter-spacing: -.005em;
	/* переносы по слогам — только в тексте; в крупных заголовках они рвут слова */
	-webkit-hyphens: manual;
	hyphens: manual;
}
.sk-landing h1, .sk-landing h2 {
	font-weight: 800;
}
.sk-landing h3, .sk-landing h4 {
	font-weight: 700;
}
.sk-landing #content h1 {
	font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.4rem);
	line-height: .95;
}
/* Обычные страницы (не главная, не карточка товара и не раздел каталога) —
   заголовок H1 тёмно-коричневый (10.10.2026) */
.sk-landing body.page:not(.home) #content h1 {
	color: #4D220E;
}
.sk-landing #content h2 {
	font-size: 2rem;
	line-height: 1;
}
.sk-landing #content h3 {
	font-size: 1.5rem;
	line-height: 1.1;
}
.sk-landing #content h4 {
	font-size: 1.2rem;
	line-height: 1.15;
}

/* Текст: тёмный, по левому краю (на лендингах — без выключки по ширине) */
.sk-landing p, .sk-landing ul, .sk-landing ol, .sk-landing .wp-block-details {
	color: var(--skl-ink);
}
.sk-landing p, .sk-landing .page p {
	text-align: left;
}
.sk-landing .page p.align-center {
	text-align: center;
}
.sk-landing strong, .sk-landing b {
	font-weight: 600;
}

/* Ссылки: тёмные, наведение — красный; в тексте — подчёркнуты красной линией */
.sk-landing body a {
	color: var(--skl-ink);
}
.sk-landing body a:hover, .sk-landing body a h3:hover {
	color: var(--skl-red-dark);
}
.sk-landing .entry-content p a, .sk-landing .entry-content li a, .sk-landing .entry-content td a,
.sk-landing .term-description p a, .sk-landing .term-description li a,
.sk-landing .responsive-tabs__panel p a, .sk-landing .responsive-tabs__panel li a, .sk-landing .responsive-tabs__panel td a {
	text-decoration: underline !important;
	text-decoration-color: rgba(208, 18, 26, .5) !important;
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 3px;
}
.sk-landing .entry-content p a:hover, .sk-landing .entry-content li a:hover, .sk-landing .entry-content td a:hover,
.sk-landing .term-description a:hover, .sk-landing .responsive-tabs__panel a:hover {
	text-decoration-color: currentColor !important;
}

/* Цитаты, линии, код */
.sk-landing #content blockquote {
	background-color: var(--skl-surface);
	border: 0;
	border-left: 4px solid var(--skl-red);
	border-image: none;
	border-radius: 0 12px 12px 0;
	padding: .8em 1.2em;
}
.sk-landing #content hr {
	border-image: linear-gradient(to right, transparent, var(--skl-line-strong), transparent) 1;
}
.sk-landing .wp-block-code {
	background-color: var(--skl-surface);
	color: var(--skl-ink);
	border: 1px solid var(--skl-line);
	border-radius: 8px;
}

/* ===== Шапка: логотип, поиск, крошки (header.css) ===== */
.sk-landing .site-header {
	background-color: transparent !important;
}
/* Логотип сайта — светлый под чёрный фон; на креме перекрашиваем в почти чёрный,
   как логотип лендингов (#231F20) */
.sk-landing .site-header .site-branding img {
	filter: brightness(0);
	opacity: .9;
}

.sk-landing .woocommerce-product-search {
	border: 0;
}
.sk-landing .widget_product_search form {
	color: var(--skl-ink);
}
.sk-landing .widget_product_search input[type=search] {
	background-color: var(--skl-surface) !important;
	color: var(--skl-ink) !important;
	border: 1.5px solid var(--skl-ink);
	border-radius: 6px;
	box-shadow: none;
}
.sk-landing .widget_product_search input[type=search]::placeholder {
	color: var(--skl-ink-2);
	opacity: 1;
}
.sk-landing .widget_product_search input[type=search]:focus {
	background-color: #fff !important;
	outline: 3px solid var(--skl-yellow);
	outline-offset: 0;
}
.sk-landing .custom-search-results {
	background: var(--skl-surface);
	color: var(--skl-ink);
	border: 1px solid var(--skl-line-strong);
	border-radius: 0 0 12px 12px;
	box-shadow: var(--skl-shadow);
}
.sk-landing .custom-search-results a {
	color: var(--skl-ink);
	border-bottom: 1px solid var(--skl-line) !important;
}
.sk-landing .custom-search-results a:hover {
	background: var(--skl-yellow);
	color: var(--skl-ink);
}

.sk-landing .woocommerce-breadcrumb {
	color: var(--skl-ink-2);
}
.sk-landing .woocommerce-breadcrumb a {
	color: var(--skl-ink);
}
.sk-landing .woocommerce-breadcrumb a:hover {
	background-color: var(--skl-yellow);
	color: var(--skl-ink);
}
.sk-landing .woocommerce-breadcrumb .breadcrumb-separator {
	color: var(--skl-line-strong);
}

/* ===== Верхнее меню (меню темы Storefront; общие правила — header.css) =====
   Подсветка пунктов — капсула (::before под текстом пункта), а не фон
   ссылки. На широком экране со скриптом /menu-opal/menu-opal.js (класс
   .sk-opal-on у списка) при наведении вместо неё перетекает одна общая
   капсула .sk-opal-pill; без скрипта и на телефоне — капсула самого пункта. */
.sk-landing .storefront-primary-navigation {
	background-color: transparent;
}
/* «Жидкая» капсула (menu-opal.js) — общая для верхнего и левого меню: жёлтая,
   светло-серая граница, радиус 6 (09.10.2026, 18:32 — значения владельца).
   Положение и размер задаёт скрипт (translate + width/height). */
.sk-landing .sk-opal-pill {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	z-index: 0;
	box-sizing: border-box;
	border: 1px solid lightgray;
	border-radius: 6px;
	pointer-events: none;
	background: var(--skl-yellow);
	opacity: 0;
	transition: opacity .18s ease;
}
/* отдельный слой — только пока капсула едет (на месте край был бы размытым) */
.sk-landing .sk-opal-pill.is-moving {
	will-change: transform, width, height;
}
.sk-landing .sk-opal-pill.is-on {
	opacity: 1;
}
@media (min-width: 768px) {
	.sk-landing .main-navigation {
		border-image: linear-gradient(to right, transparent, var(--skl-ink), transparent) 1;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu {
		position: relative;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu > li > a,
	.sk-landing .main-navigation .primary-navigation > ul.menu > li:hover > a,
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.focus > a {
		color: var(--skl-ink);
		font-family: var(--skl-font-body);
		font-weight: 500;
		background: transparent;
		position: relative;
		z-index: 1;
		isolation: isolate;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu > li > a {
		padding: 0 14px;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu > li > a::before {
		content: '';
		display: block;
		position: absolute;
		inset: 0 2px;
		z-index: -1;
		box-sizing: border-box;
		border: 1px solid transparent;
		border-radius: 6px;
		background: transparent;
		transition: background-color .2s, border-color .2s;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu:not(.sk-opal-on) > li:hover > a::before,
	.sk-landing .main-navigation .primary-navigation > ul.menu:not(.sk-opal-on) > li.focus > a::before {
		background: var(--skl-yellow);
		border-color: lightgray;
	}
	/* Текущий раздел — чёрная капсула с жёлтым текстом (лежит поверх жёлтой) */
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-menu-item > a,
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-menu-ancestor > a,
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-page-ancestor > a {
		color: var(--skl-yellow);
		background: transparent;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-menu-item > a::before,
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-menu-ancestor > a::before,
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-page-ancestor > a::before {
		background: var(--skl-ink);
		border-color: var(--skl-ink);
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-menu-item:hover > a::before,
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-menu-ancestor:hover > a::before,
	.sk-landing .main-navigation .primary-navigation > ul.menu > li.current-page-ancestor:hover > a::before {
		border-color: lightgray;
	}
	/* Выпадающие списки (второй уровень) — как первый уровень (09.10.2026,
	   22:47): скругление 6px, как у капсулы; наведение — жёлтая капсула со
	   светло-серой каймой (со скриптом menu-opal.js — одна перетекающая
	   .sk-opal-pill на список), текущий пункт — чёрный с жёлтым текстом.
	   (Было: скругление 14/10px, наведение — жёлтое с оранжевой каймой.) */
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu,
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu.sub-menu--is-touch-device {
		background: var(--skl-surface);
		border: 1px solid var(--skl-line-strong);
		border-radius: 6px;
		padding: 6px;
		box-shadow: var(--skl-shadow);
		z-index: 99999;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu li a {
		position: relative;
		z-index: 1;
		color: var(--skl-ink);
		font-family: var(--skl-font-body);
		background: transparent;
		border-bottom: 0;
		border-radius: 6px;
		transition: background-color .2s, box-shadow .2s;
	}
	/* без скрипта — капсула самого пункта; со скриптом — прозрачно (под
	   пунктом едет общая капсула; у header.css при наведении красный фон) */
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu:not(.sk-opal-on) li:not(.current-menu-item):hover > a,
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu:not(.sk-opal-on) li:not(.current-menu-item).focus > a {
		background: var(--skl-yellow);
		color: var(--skl-ink);
		box-shadow: inset 0 0 0 1px lightgray;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu.sk-opal-on li:not(.current-menu-item):hover > a,
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu.sk-opal-on li:not(.current-menu-item).focus > a {
		background: transparent;
		color: var(--skl-ink);
		box-shadow: none;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu li.current-menu-item > a {
		background: var(--skl-ink);
		color: var(--skl-yellow);
		box-shadow: none;
	}
	.sk-landing .main-navigation .primary-navigation > ul.menu ul.sub-menu li.current-menu-item:hover > a {
		box-shadow: inset 0 0 0 1px lightgray;
	}
}
/* Ноутбук / планшет: отступы поменьше, чтобы пункты помещались в строку */
@media (min-width: 768px) and (max-width: 1199px) {
	.sk-landing .main-navigation .primary-navigation > ul.menu > li > a {
		padding: 0 9px;
	}
}
/* Телефон: кнопка «Меню» и список — тёмным по светлому, капсулы как вверху */
@media (max-width: 767px) {
	.sk-landing .main-navigation button.menu-toggle {
		color: var(--skl-ink);
		font-family: var(--skl-font-body);
	}
	.sk-landing .main-navigation .handheld-navigation ul.menu li a {
		position: relative;
		z-index: 0;
		color: var(--skl-ink);
		font-family: var(--skl-font-body);
		font-weight: 500;
	}
	.sk-landing .main-navigation .handheld-navigation ul.menu li a::before {
		content: '';
		position: absolute;
		inset: 0 0 0 -10px;
		z-index: -1;
		box-sizing: border-box;
		border: 1px solid transparent;
		border-radius: 6px;
	}
	.sk-landing .main-navigation .handheld-navigation ul.menu li a:hover::before,
	.sk-landing .main-navigation .handheld-navigation ul.menu li.focus > a::before {
		background: var(--skl-yellow);
		border-color: lightgray;
	}
	.sk-landing .main-navigation .handheld-navigation ul.menu li.current-menu-item > a {
		color: var(--skl-yellow);
	}
	.sk-landing .main-navigation .handheld-navigation ul.menu li.current-menu-item > a::before {
		background: var(--skl-ink);
		border-color: var(--skl-ink);
	}
	.sk-landing .main-navigation .handheld-navigation ul.menu .sub-menu {
		border-left-color: var(--skl-line-strong);
	}
	.sk-landing .main-navigation .handheld-navigation ul.menu li button.dropdown-toggle {
		color: var(--skl-ink);
	}
}
@media (orientation: portrait) and (max-width: 1024px) {
	.sk-landing .site-header .storefront-primary-navigation {
		border-image: linear-gradient(to right, transparent, var(--skl-ink), transparent) 1;
	}
}

/* ===== Левое меню (sidebar.css) ===== */
.sk-landing .widget .widget-title {
	color: var(--skl-ink);
	background: none;
	font-family: var(--skl-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1;
}
.sk-landing .widget_product_categories ul {
	background: none;
}
.sk-landing .widget-area .widget a {
	color: var(--skl-ink);
	border-radius: 6px;
}
/* Шрифт меню — 1em (у Storefront .875em) */
.sk-landing .widget-area .widget {
	font-size: 1em;
}
/* Подсветка — как в верхнем меню: жёлтая, светло-серая граница (без сдвига
   текста — граница рисуется тенью внутрь), радиус 6. Где есть мышь, скрипт
   /menu-opal/menu-opal.js ставит списку класс .sk-opal-on и подсвечивает
   одной «жидкой» капсулой, перетекающей между пунктами. */
.sk-landing .widget-area ul.product-categories,
.sk-landing .widget-area .text-categories > ul {
	position: relative;
	isolation: isolate;
}
.sk-landing .widget-area ul.product-categories a,
.sk-landing .widget-area .text-categories a,
.sk-landing .widget-area .text-categories li.current_page_item {
	position: relative;
	z-index: 1;
}
.sk-landing .widget_product_categories li a:hover, .sk-landing .text-categories li a:hover {
	color: var(--skl-ink);
	background-color: var(--skl-yellow);
	box-shadow: inset 0 0 0 1px lightgray;
	border-radius: 6px;
}
.sk-landing .widget-area .sk-opal-on li:not(.current-cat) > a:hover {
	background-color: transparent;
	box-shadow: none;
}
.sk-landing .widget_product_categories li.current-cat-parent > a {
	border: 0;
	border-left: 3px solid var(--skl-ink);
	border-image: none;
	border-radius: 0;
}
/* Текущий раздел / страница — после наведения, чтобы наведение его не перекрашивало */
.sk-landing .widget_product_categories li.current-cat > a, .sk-landing .text-categories li.current_page_item {
	color: var(--skl-yellow);
	background-color: var(--skl-ink);
	border-radius: 6px;
}
.sk-landing .text-categories li.current_page_item a {
	color: inherit;
}

/* ===== Каталог: раздел и список товаров (catalog.css) ===== */
.sk-landing .woocommerce-products-header__title {
	color: var(--skl-ink);
	background: none;
	padding: 0;
}
.sk-landing .woocommerce-products-header .cat-img img {
	border: 0;
	border-radius: 12px;
}
/* Карточки товаров и подразделов — как карточки лендинга */
/* Подъём — свойством translate (не transform): transform занят анимацией
   появления AOS (catalog.css) */
.sk-landing ul.products li.product {
	background-color: var(--skl-surface);
	border-radius: var(--skl-radius);
	transition: background-color .2s ease, box-shadow .25s ease, translate .25s ease;
}
.sk-landing ul.products li.product:hover {
	background-color: #fff;
	box-shadow: var(--skl-lift);
	translate: 0 -4px;
}
/* На светлом блоке (вкладки: «Сопутствующие товары» и т. п.) карточка того же
   цвета, что блок, — тонкая граница тенью 1px (размер не меняется); при
   наведении — обычная обводка (10.10.2026) */
.sk-landing .responsive-tabs__panel ul.products li.product:not(:hover) {
	box-shadow: 0 0 0 1px var(--skl-line);
}
.sk-landing .product .imagewrapper {
	border-radius: 10px;
}
.sk-landing #content ul.products li.product.product-category img {
	border-radius: 10px;
}
.sk-landing #content .product-category h2 {
	color: var(--skl-ink);
	font-size: 1.45rem;
	line-height: 1.05;
	font-weight: 700;
}
/* Название товара в списке — обычный шрифт: мелкий узкий курсив читается хуже */
.sk-landing #content .products h3.woocommerce-loop-product__title {
	color: var(--skl-ink);
	font-family: var(--skl-font-body);
	font-style: normal;
	font-weight: 500 !important;
	letter-spacing: 0;
	/* узкая карточка: длинные слова переносятся, как у мастера */
	-webkit-hyphens: auto;
	hyphens: auto;
}
.sk-landing #content .product-category h2 {
	-webkit-hyphens: auto;
	hyphens: auto;
}
.sk-landing .loop-product-sku {
	color: var(--skl-ink-2);
}
.sk-landing .append-block-small a {
	color: var(--skl-ink);
}
.sk-landing .append-block-small a:hover {
	color: var(--skl-red-dark);
}

/* ===== Карточка товара (product.css) ===== */
/* Артикул — жёлтая плашка, как уровень ленты на лендинге */
.sk-landing body.single-product .prod-art {
	display: inline-block;
	font-family: var(--skl-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--skl-ink);
	background: var(--skl-yellow);
	padding: 4px 18px 4px 10px;
	clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.sk-landing table.prod_attr_table a.image {
	border: 0;
	border-radius: 8px;
}
/* Телефон: лента фото вариаций — общее правило всех тем (product.css, с вечера
   10.10.2026; до этого было здесь). Здесь — цвета темы и отмена жёлтой
   подсветки строки (на телефоне после касания стрелки она залипала). */
@media (max-width: 767px) {
	.sk-landing table.prod_attr_table {
		--sk-var-odd: var(--skl-surface);
		--sk-var-even: var(--skl-surface-2);
		--sk-var-nav-bg: rgba(251, 248, 241, .92);
		--sk-var-nav-fg: var(--skl-ink);
		--sk-var-nav-line: var(--skl-line-strong);
		--sk-var-nav-shadow: 0 2px 8px rgba(30, 26, 22, .3);
	}
	.sk-landing #page .content-area table.prod_attr_table tr:hover td {
		background-color: var(--sk-var-bg);
	}
}

/* ===== Таблицы в тексте и таблица исполнений (content.css, product.css) ===== */
.sk-landing #page .content-area table {
	background-color: var(--skl-surface);
	color: var(--skl-ink);
	border: 1px solid var(--skl-line);
	border-radius: 12px;
	overflow: hidden;
}
/* По ширине содержимого, а не на всю колонку (у темы Storefront
   table { width: 100% }); таблица исполнений (.prod_attr_table) — как была.
   Шапка — пшеничная (wheat), шрифт крупнее (10.10.2026; было: прозрачная, 16px). */
.sk-landing #page .content-area table:not(.prod_attr_table) {
	width: auto;
	max-width: 100%;
}
.sk-landing #page .content-area table thead {
	background-color: wheat;
	color: var(--skl-ink);
}
.sk-landing #page .content-area table thead th {
	border-bottom: 2px solid var(--skl-ink);
	font-weight: 600;
	font-size: 1.15rem;
	hyphens: manual;   /* на телефоне не «Пара-метр» */
}
.sk-landing #page .content-area table tbody td {
	border-bottom: 1px solid var(--skl-line);
}
.sk-landing #page .content-area table tbody tr:nth-child(2n) td {
	background-color: var(--skl-surface-2);
}
.sk-landing #page .content-area table tbody tr:hover,
.sk-landing #page .content-area table tbody tr:hover td {
	background-color: var(--skl-yellow-pale);
}

/* ===== Вкладки (Tabby Responsive Tabs) ===== */
.sk-landing #page .responsive-tabs .responsive-tabs__panel {
	background-color: var(--skl-surface);
	border: 1px solid var(--skl-line-strong);
	border-radius: 0 var(--skl-radius) var(--skl-radius) var(--skl-radius);
}
.sk-landing #page .responsive-tabs .responsive-tabs__panel.transparent-content {
	background-color: transparent;
}
/* Ярлыки — в строку флексом, а не float плагина: в строке у всех одна высота.
   Раньше ярлык со значком (fa) был на 1px выше, блок текста вставал под него,
   и активный ярлык «висел» над рамкой блока (плагин подгоняет это сдвигом
   top: 1px — под свою рамку 1px). Теперь активный стоит на блоке: на 1px
   длиннее и перекрывает его верхнюю рамку; неактивные кончаются на рамке
   (10.10.2026). Неактивные — белые, как блок (были прозрачные). */
/* ярлыки в строку флексом на ≥ 768 px — общее правило в content.css */
.sk-landing #page .responsive-tabs .responsive-tabs__list__item {
	float: none;
	margin: 0 12px 0 0;
	font-family: var(--skl-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--skl-ink);
	background-color: var(--skl-surface);
	border: 1.5px solid var(--skl-ink);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
}
.sk-landing #page .responsive-tabs .responsive-tabs__list__item:hover {
	background-color: var(--skl-yellow);
	color: var(--skl-ink);
}
.sk-landing #page .responsive-tabs .responsive-tabs__list__item--active,
.sk-landing #page .responsive-tabs .responsive-tabs__list__item--active:hover {
	top: 0;
	margin-bottom: -1px;
	padding-bottom: 11px;
	background-color: var(--skl-ink);
	color: var(--skl-yellow);
}
.sk-landing #page .responsive-tabs ul.responsive-tabs__list span.fa {
	color: var(--skl-red);
}
.sk-landing #page .responsive-tabs ul.responsive-tabs__list .responsive-tabs__list__item:hover span.fa {
	color: var(--skl-ink);
}
.sk-landing #page .responsive-tabs ul.responsive-tabs__list .responsive-tabs__list__item--active span.fa {
	color: var(--skl-yellow);
}
/* Со скриптом (/menu-opal/menu-opal.js, класс .sk-tabs-on у списка ярлыков;
   10.10.2026): фон ярлыков рисуют капсулы — жёлтая при наведении (как в меню)
   и чёрная у активного; она переезжает к нажатому ярлыку. Белая подложка
   ярлыка — ::before под капсулами (z-index: -1 в слое списка), текст и рамка
   ярлыка — над ними. Без скрипта и на телефоне — фон самих ярлыков (выше). */
.sk-landing #page .responsive-tabs ul.responsive-tabs__list.sk-tabs-on {
	position: relative;
	z-index: 0;
}
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item,
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item:hover,
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item--active,
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item--active:hover {
	position: relative;
	top: 0;
	color: var(--skl-ink);
	background-color: transparent;
	transition: color .15s ease;
}
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 4.5px 4.5px 0 0;
	background: var(--skl-surface);
	pointer-events: none;
}
.sk-landing #page .responsive-tabs ul.sk-tabs-on > .sk-opal-pill {
	border: 0;
	border-radius: 6px 6px 0 0;
}
.sk-landing #page .responsive-tabs ul.sk-tabs-on > .sk-opal-pill.sk-tab-active {
	background: var(--skl-ink);
}
/* Текст ярлыка жёлтый, пока под ним чёрная капсула (класс .sk-tab-dark ставит
   скрипт по ходу капсулы), иначе тёмный — и у активного, пока капсула едет */
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item span.fa {
	color: var(--skl-red);
	transition: color .15s ease;
}
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item.sk-tab-dark {
	color: var(--skl-yellow);
}
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item.sk-tab-dark span.fa {
	color: var(--skl-yellow);
}
.sk-landing #page .responsive-tabs ul.sk-tabs-on .responsive-tabs__list__item:hover:not(.sk-tab-dark) span.fa {
	color: var(--skl-ink);
}
@media (orientation: portrait) and (max-width: 1024px) {
	.sk-landing #page #content h2.responsive-tabs__heading {
		color: var(--skl-ink);
		background-color: var(--skl-surface);
		border: 1px solid var(--skl-line-strong) !important;
		border-radius: 6px;
	}
	.sk-landing #page #content h2.responsive-tabs__heading--active {
		color: var(--skl-yellow);
		background-color: var(--skl-ink);
		border: 1px solid var(--skl-ink) !important;
	}
}

/* ===== Галереи, файлы, 3D-модели (content.css) ===== */
.sk-landing .block-image {
	border: 0;
	background: var(--skl-surface);
	border-radius: var(--skl-radius);
	padding: 10px 10px 4px;
	transition: background-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.sk-landing .block-image:hover {
	background: #fff;
	box-shadow: var(--skl-lift);
	transform: translateY(-4px);
}
.sk-landing .block-image a, .sk-landing .block-image img {
	border-radius: 10px;
}
.sk-landing .block-image figcaption a {
	color: var(--skl-ink);
	font-family: var(--skl-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem);
	line-height: 1.1;
	border-top: 0;
	border-image: none;
	padding: .55em .4em .45em;
}
.sk-landing a.pdf-big {
	border: 1px solid var(--skl-line-strong);
	border-radius: 6px;
}
.sk-landing .block-file-image img {
	border-radius: 6px;
	box-shadow: 0 0 0 1px var(--skl-line);
}
.sk-landing .three-container {
	border-color: var(--skl-line-strong);
	border-radius: 12px;
}
.sk-landing .three-container .full-screen-button {
	color: var(--skl-ink);
}
.sk-landing .three-container .full-screen-button:hover {
	color: var(--skl-red);
}

/* ===== Главная (home.css) ===== */
/* Блоки главной у мастера вылезали за края окна (отрицательные поля −4em при
   полях страницы 2em, а ширина абзаца 50em от 2rem = 1600 px) — текст
   обрезался по краям. Здесь — в границах страницы. */
.sk-landing #content .hero-main,
.sk-landing #content .hero-text-main {
	margin-left: 0;
	margin-right: 0;
}
/* Первый экран: колонка без переноса (у мастера flex-wrap при высоте 85vh —
   крупный заголовок выталкивал подзаголовок во вторую колонку) */
.sk-landing #content .hero-main {
	height: auto;
	min-height: 70vh;
	flex-wrap: nowrap;
	padding: 2rem 1rem 3rem;
}
/* Первый экран главной — до нижнего края окна: следующий блок
   (.hero-text-main с линией сверху) показывается только при прокрутке.
   --sk-hero-top — отступ первого экрана от верха страницы (высота шапки);
   точное значение ставит site-js.js, до него — примерно по шапке.
   svh — высота окна телефона с видимой адресной строкой. */
.sk-landing .home #page #content .hero-main {
	--sk-hero-top: 197px;
	height: auto;
	min-height: calc(100vh - var(--sk-hero-top) + 4px);
	min-height: calc(100svh - var(--sk-hero-top) + 4px);
	margin-bottom: 0;
}
@media (max-width: 767px) {
	.sk-landing .home #page #content .hero-main {
		--sk-hero-top: 129px;
	}
}
.sk-landing #content .hero-main h1,
.sk-landing #content .hero-main h2,
.sk-landing #content h2.main-big {
	color: var(--skl-ink);
}
/* «Официальный сайт» — красная плашка */
.sk-landing #content .hero-main h1.small {
	display: inline-block;
	font-family: var(--skl-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.2;
	color: #fff;
	background: var(--skl-red);
	padding: 6px 22px 6px 16px;
	clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
	margin-bottom: 2rem;
}
.sk-landing #content .hero-main h1.big {
	color: var(--skl-ink);
	font-size: clamp(2.6rem, 1.4rem + 3vw, 5rem);
	line-height: 1.3;
	letter-spacing: -.01em;
	max-width: none;
	margin: 0 auto 1.75rem;
}
/* Заголовок — две части с переносом <br> после «торговля» (в тексте
   страницы: <span>…торговля</span><br><span>сантехническими…</span>).
   Где часть не влезает в строку (планшет, телефон), её строки — поровну,
   без короткого хвоста. Части — отдельными блоками в строке: у сплошного
   текста с <br> Chrome выравнивает строки не всегда. */
.sk-landing #content .hero-main h1.big > span {
	display: inline-block;
	text-wrap: balance;
}
.sk-landing #content .hero-main h2 {
	color: var(--skl-ink-2);
	font-family: var(--skl-font-body);
	font-weight: 400;
	font-size: clamp(1.2rem, 1rem + .7vw, 1.75rem);
	line-height: 1.4;
	letter-spacing: 0;
	max-width: none;
	margin: 0 auto;
}
.sk-landing #content h2.main-big {
	font-size: clamp(2.2rem, 1.6rem + 2vw, 3.8rem);
	line-height: .95;
}
.sk-landing #content .hero-text-main {
	border-image: linear-gradient(to right, transparent, var(--skl-line-strong), transparent) 1;
	padding-left: 1rem;
	padding-right: 1rem;
}
.sk-landing #content .hero-text-main h3 {
	color: var(--skl-ink);
	font-weight: 800;
	font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.5rem);
	line-height: 1;
	/* ширина колонки — как у мастера: 50em при его 2rem = 100rem (1600 px) */
	max-width: 100rem;
	text-align: left;
}
.sk-landing #content .hero-text-main p {
	color: var(--skl-ink-2);
	font-weight: 400;
	font-size: clamp(1.1rem, 1rem + .45vw, 1.45rem);
	line-height: 1.55;
	max-width: 100rem;
	text-align: left;
}
.sk-landing #content .hero-text-main h3 svg {
	color: var(--skl-red);
}
/* Карусель «Новинки» (своя, home.css) — карточки как в «Каталоге продукции»
   (.block-image): при наведении белый фон, подъём на 4px, чёрная обводка с
   тенью (--skl-lift); картинка скруглена 10px и не увеличивается. Лента
   обрезает всё, что за её краями (прокрутка), — даём место под подъём и тень
   полями внутрь и такими же отрицательными полями снаружи. */
.sk-landing .sk-carousel ul.sk-carousel__track {
	padding: 8px 6px 26px;
	margin: -8px -6px -26px;
	scroll-padding-inline: 6px;
}
.sk-landing .sk-carousel__card {
	padding: 7px;   /* как у карточек списка товаров */
	background: var(--skl-surface);
	border: 0;
	border-radius: var(--skl-radius);
	transition: background-color .2s ease, box-shadow .25s ease, translate .25s ease;
}
.sk-landing .sk-carousel__card:hover {
	background: #fff;
	box-shadow: var(--skl-lift);
	translate: 0 -4px;
}
/* карусель — список внутри текста страницы: правило «ссылки в тексте —
   с красным подчёркиванием» (.entry-content li a, !important) ей не нужно */
.sk-landing .entry-content .sk-carousel li a.sk-carousel__card {
	text-decoration: none !important;
}
.sk-landing .sk-carousel__img {
	border-radius: 10px;
}
.sk-landing .sk-carousel__card:hover .sk-carousel__img img {
	transform: none;
}
/* название — как у товаров в списке: обычный шрифт, .9rem, 500 */
.sk-landing .sk-carousel__title {
	min-height: 0;
	padding: .6em .2em .25em;
	color: var(--skl-ink);
	font-family: var(--skl-font-body);
	font-style: normal;
	font-weight: 500;
	font-size: .9rem;
	line-height: 1.25;
}
.sk-landing .sk-carousel button.sk-carousel__btn {
	background: var(--skl-surface);
	color: var(--skl-ink);
	border: 1px solid var(--skl-line-strong);
	border-radius: 50%;
	box-shadow: 0 4px 12px -4px rgba(30, 26, 22, .3);
}
.sk-landing .sk-carousel button.sk-carousel__btn:hover {
	background: var(--skl-yellow);
	border-color: lightgray;
	color: var(--skl-ink);
}
.sk-landing .sk-carousel button.sk-carousel__dot {
	background: var(--skl-line-strong);
}
.sk-landing .sk-carousel button.sk-carousel__dot[aria-current="true"] {
	background: var(--skl-ink);
}

/* ===== Подвал и уведомление о cookie (footer.css) ===== */
.sk-landing .site-footer {
	color: var(--skl-ink-2) !important;
	border-top: 1px solid var(--skl-line);
}
.sk-landing .site-footer a {
	color: var(--skl-ink);
}
.sk-landing .site-footer .priv-pol a {
	color: var(--skl-ink-2) !important;
}
.sk-landing .site-footer .priv-pol a:hover {
	color: var(--skl-red-dark) !important;
}
.sk-landing .sk-cookie {
	background: var(--skl-surface);
	border: 1px solid var(--skl-line-strong);
	border-radius: var(--skl-radius);
	box-shadow: var(--skl-shadow);
	color: var(--skl-ink);
}
.sk-landing .sk-cookie__title {
	color: var(--skl-ink);
	font-family: var(--skl-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.1;
}
.sk-landing .sk-cookie__text {
	color: var(--skl-ink-2) !important;
}
.sk-landing .sk-cookie__text a {
	color: var(--skl-ink) !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(208, 18, 26, .5) !important;
	text-underline-offset: 3px;
}
.sk-landing .sk-cookie__btn {
	background: var(--skl-ink);
	border-color: var(--skl-ink);
	border-radius: 6px;
	color: var(--skl-yellow);
	font-family: var(--skl-font-body);
}
.sk-landing .sk-cookie__btn:hover,
.sk-landing .sk-cookie__btn:focus-visible {
	background: #000;
	border-color: #000;
}
@media (max-width: 440px) {
	.sk-landing .sk-cookie {
		border-radius: var(--skl-radius) var(--skl-radius) 0 0;
	}
}

/* ===== Планшеты и телефоны: размеры заголовков ===== */
/* base.css задаёт их с !important — перебиваем так же, затем возвращаем
   особые заголовки (подразделы, товары в списке, карусель, главная). */
@media (max-width: 1024px) {
	.sk-landing #content h1 { font-size: 2.1rem !important; }
	.sk-landing #content h2 { font-size: 1.6rem !important; }
	.sk-landing #content h3 { font-size: 1.3rem !important; }
	.sk-landing #content .product-category h2 { font-size: 1.3rem !important; }
	.sk-landing #content .products h3.woocommerce-loop-product__title { font-size: .9rem !important; }
	.sk-landing .home #page #content .hero-main h1.big { font-size: 2.4rem !important; }
	.sk-landing .home #page #content .hero-main h1.small { font-size: 1.25rem !important; }
	.sk-landing .home #page #content .hero-main h2 { font-size: 1.2rem !important; }
	.sk-landing .home #page #content h2.main-big { font-size: 2rem !important; }
	.sk-landing .home #page #content .hero-text-main h3 { font-size: 1.6rem !important; }
	.sk-landing .home #page #content .hero-text-main p { font-size: 1.1rem !important; }
}
@media (orientation: portrait) and (max-width: 1024px) {
	.sk-landing .home #page #content .hero-text-main {
		margin-left: 0;
		margin-right: 0;
		padding: 1em .25em;
	}
	.sk-landing .home #page #content .hero-text-main h3 {
		text-align: left;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sk-landing ul.products li.product:hover {
		translate: none;
	}
	.sk-landing .sk-carousel__card:hover {
		translate: none;
	}
	.sk-landing .block-image:hover {
		transform: none;
	}
}