/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 10 2026 | 15:38:38 */
/* =====================================================================
   Главная страница: первый экран (hero), текстовые блоки, карусель
   «Новинки» (своя, шорткод sk_new_products; до 09.10.2026 — плагин
   woo-product-carousel-slider-and-grid-ultimate).
   (08.10.2026, сведено из записей «Главная страница», «Карусель на
   главной» и части block-gallery.)
   ===================================================================== */

/* ===== Первый экран ===== */
#content .hero-main {
	margin-left: -4em;
	margin-right: -4em;
	margin-top: -2.5em;
	height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
}
#content .hero-main h1, #content .hero-main h2, #content h2.main-big {
	color: white;
	font-size: 2.5rem;
	text-align: center;
	margin-bottom: 3em;
}
#content h2.main-big {
	margin-bottom: 1.5em;
}
#content .hero-main h1.big {
	font-size: 3rem;
	color: wheat;
}
#content .hero-main h1.small {
	font-size: 1.5rem;
	margin-bottom: 6em;
}

.home .entry-content {
	background-color: transparent;
	padding: 0.5em;
}

/* ===== Текстовые блоки на всю ширину ===== */
#content .hero-text-main {
	margin-left: -4em;
	margin-right: -4em;
	min-height: 20em;
	display: block;
	padding-top: 3em;
	position: relative;
	overflow: hidden;
	border-top: 1px solid;
	border-bottom: 1px solid;
	/* Градиент: прозрачный -> белый -> прозрачный */
	border-image: linear-gradient(to right, transparent, white, transparent) 1;
}
#content .hero-text-main h3 {
	color: white;
	font-weight: 500;
	font-size: 2rem;
	max-width: 50em;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2em;
}
#content .hero-text-main p {
	color: white;
	font-weight: 100;
	font-size: 2rem;
	max-width: 50em;
	text-align: justify;
	margin-left: auto;
	margin-right: auto;
}
#content .hero-text-main h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: white;
}
/* Значки SVG в заголовках «Наши преимущества» (есть на santehkrep.ru) */
#content .hero-text-main h3 svg {
	width: 64px;
	height: 64px;
	color: white;
}

@media (orientation: landscape) and (max-width: 1024px) {
	.home #content .hero-main h1.big {
		font-size: 37px;
	}
	.home #page #content .hero-main {
		margin: 0 0 2em 0;
		padding: 0;
		height: auto;
	}
	.home .content-area {
		width: 100% !important;
	}
	.home .entry-content {
		padding: 0;
	}
	#content .hero-main h1.small {
		margin-top: 1em;
		margin-bottom: 2em;
		font-size: 16px;
	}
	#content .hero-main h1, #content .hero-main h2 {
		margin-bottom: 0;
	}
	#content h2.main-big {
		margin-bottom: 1em;
	}
	#content .hero-main h1, #content .hero-main h2 {
		font-size: 25px;
	}
	#content h2.main-big {
		font-size: 32px;
	}
	.home #page #content .hero-text-main {
		margin: 2em 0 2em 0;
		padding: 0;
	}
	.home #content .hero-text-main h3, .home #content .hero-text-main p {
		font-size: 18px;
	}
	.home .wp-block-spacer {
		height: 2em !important;
	}
}

@media (orientation: portrait) and (max-width: 1024px) {
	.home #page #content .hero-main {
		height: 86vh;
	}
	.home #page #content .hero-main {
		margin-left: 0;
		margin-right: 0;
		margin-top: -40px;
	}
	.home #page #content .hero-main h1.big {
		font-size: 26px !important;
	}
	.home #page #content .hero-main h1.small {
		font-size: 16px !important;
	}
	.home #page #content .hero-main h2 {
		font-size: 18px !important;
	}
	.home #page #content h2.main-big {
		font-size: 24px !important;
	}
	.home #page #content .hero-text-main h3,
	.home #page #content .hero-text-main p {
		font-size: 1.2rem;
	}
	.home #page #content .hero-text-main h3 {
		text-align: center;
	}
	.home #page #content .hero-text-main {
		margin-left: -1.4em;
		margin-right: -1.4em;
		padding: 1em;
	}
	.home .wp-block-spacer {
		height: 5em !important;
	}
}

/* ===== Карусель «Новинки» — своя (09.10.2026) =====
   Шорткод [sk_new_products] (и прежний [wcpcsu] плагина), сниппет #57;
   скрипт /sk-carousel/sk-carousel.js. Лента — список с прокруткой по
   горизонтали и привязкой к карточкам. Карточки — размером с карточки
   списка товаров (09.10.2026, 21:21): в ряд 5 / 4 (≤1199) / 3 (≤991) /
   2 (≤599). Вид — как у прежней карусели: карточка в белой рамке,
   название на белом, картинка увеличивается при наведении, значок
   «Новинка!», кнопки и точки — цвета плагина (#ff5500). */
.sk-carousel {
	--sk-car-per: 5;
	--sk-car-gap: 38px;
	position: relative;
	margin: 0 0 2em;
}
.sk-carousel ul.sk-carousel__track {
	display: flex;
	gap: var(--sk-car-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.sk-carousel ul.sk-carousel__track::-webkit-scrollbar {
	display: none;
}
.sk-carousel .sk-carousel__slide {
	flex: 0 0 calc((100% - (var(--sk-car-per) - 1) * var(--sk-car-gap)) / var(--sk-car-per));
	margin: 0;
	list-style: none;
	scroll-snap-align: start;
}
.sk-carousel__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	background: white;
	border: 4px solid white;
	border-radius: 2px;
	text-decoration: none;
}
.sk-carousel__img {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	background: #111;
}
.sk-carousel__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.sk-carousel__card:hover .sk-carousel__img img {
	transform: scale(1.2);
}
.sk-carousel__badge {
	position: absolute;
	top: .7em;
	right: .7em;
	padding: .5em .8em;
	border-radius: 999px;
	background: #ff5500;
	color: white;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1;
}
/* название — чёрное (до 10.10.2026 красное, как у плагина; [stated] «поменяй
   цвет текста на чёрный» — santehkrep.ru, затем и светлые сайты) */
.sk-carousel__title {
	display: block;
	min-height: 2em;
	padding: .6em .4em;
	color: black;
	text-align: center;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.15;
}
/* Стрелки и точки — только со скриптом (.is-ready) */
.sk-carousel button.sk-carousel__btn {
	display: none;
	position: absolute;
	top: 45%;
	z-index: 2;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	align-items: center;
	justify-content: center;
	background: white;
	color: #333;
	border: 1px solid #e4e4ed;
	border-radius: 0;
	cursor: pointer;
}
.sk-carousel.is-ready button.sk-carousel__btn:not([hidden]) {
	display: flex;
}
.sk-carousel button.sk-carousel__btn::before {
	content: '';
	width: 9px;
	height: 9px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateX(2px) rotate(45deg);
}
.sk-carousel button.sk-carousel__btn--next::before {
	transform: translateX(-2px) rotate(-135deg);
}
.sk-carousel button.sk-carousel__btn--prev {
	left: 0;
}
.sk-carousel button.sk-carousel__btn--next {
	right: 0;
}
.sk-carousel button.sk-carousel__btn:hover {
	background: #ff5500;
	border-color: #ff5500;
	color: white;
}
.sk-carousel .sk-carousel__dots {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 1.2em;
}
.sk-carousel.is-ready .sk-carousel__dots:not([hidden]) {
	display: flex;
}
.sk-carousel button.sk-carousel__dot {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #b0b0b0;
	cursor: pointer;
}
.sk-carousel button.sk-carousel__dot[aria-current="true"] {
	background: #ff5500;
}
@media (max-width: 1199px) {
	.sk-carousel {
		--sk-car-per: 4;
		--sk-car-gap: 30px;
	}
}
@media (max-width: 991px) {
	.sk-carousel {
		--sk-car-per: 3;
		--sk-car-gap: 24px;
	}
}
@media (max-width: 599px) {
	.sk-carousel {
		--sk-car-per: 2;
		--sk-car-gap: 14px;
	}
	.sk-carousel__title {
		font-size: .85rem;
	}
	/* карточки маленькие — кнопки тоже (листается и пальцем) */
	.sk-carousel button.sk-carousel__btn {
		width: 32px;
		height: 32px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sk-carousel__card:hover .sk-carousel__img img {
		transform: none;
	}
}