/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 10 2026 | 16:01:15 */
/* =====================================================================
   Каталог: разделы (картинка и описание раздела, подразделы) и список
   товаров (карточки, артикулы, значок вариаций, ссылки на PDF и видео).
   (08.10.2026, сведено из записей «Пометка для вариативных товаров в
   списке», «Блок описания категории», «Картинка раздела», «Подкатегории в
   списке», «Убрать сортировку», «Продукция в списке», части Text.)
   ===================================================================== */

/* ===== Значок вариативного товара и артикулы вариаций (сниппет 012) ===== */
.variable {
	color: yellow;
	position: absolute;
	left: 15px;
	top: 5.1em;
}
.variable i {
	font-size: 110%;
}
.variable-sku {
	color: white;
	position: absolute;
	left: 35px;
	top: 6.3em;
	text-align: left;
	font-size: 80%;
}

/* ===== Описание раздела (вкладки под списком, сниппет 024) ===== */
.term-description ul {
	list-style: square;
}

/* ===== Шапка раздела: картинка раздела + заголовок (сниппет 023) ===== */
.woocommerce-products-header {
	margin-bottom: 2em;
	display: flex;
	margin-right: 5px;
}
.woocommerce-products-header .cat-img {
	margin-right: 0.5em;
}
.woocommerce-products-header .cat-img img {
	max-width: 100px;
	cursor: zoom-in;
	border: 1px solid white;
}
.woocommerce-products-header .cat-img a {
	display: inline-block;
	overflow: visible;
	vertical-align: middle;
}
.woocommerce-products-header .cat-img a img {
	transition: transform 0.3s ease;
	display: block;
}
.woocommerce-products-header .cat-img a:hover img {
	transform: scale(1.2);
}
.woocommerce-products-header h1 {
	font-size: 2rem;
	margin: auto;
	flex: 1;
	display: flex;
	align-items: center;
	border-radius: 2px;
}

/* ===== Подразделы в списке ===== */
#content .product-category h2 {
	font-size: 1.3rem;
	border-bottom: none;
	color: black;
}
#content .product-category h2 .count {
	display: none;
}
#content ul.products li.product.product-category img {
	padding-top: 1.618em;
}
#content .product-category a {
	display: block;
	overflow: hidden;
}
#content .product-category a img {
	transition: transform 0.3s ease;
	display: block;
}
#content .product-category a:hover img {
	transform: scale(1.1);
}

/* ===== Сортировка списка не показывается ===== */
.storefront-sorting {
	display: none;
}

/* ===== Список товаров ===== */
.woocommerce-products-header__title {
	margin-bottom: 1.5em;
}
.append-block-small a {
	color: black;
}
ul.products li.product h3 {
	font-weight: 500;
	font-size: 1.1rem;
	margin-bottom: 0.7em;
}

ul.products li.product {
	background-color: white;
}

/* Название с артикулом (сниппет 012) */
#content .products .div-woocommerce-loop-product__title {
	display: flex;
	align-items: center;
	height: 4em;
	margin-top: -8px;
	padding-left: 3px;
}
#content .products h3.woocommerce-loop-product__title {
	font-size: 0.9rem;
	overflow-y: hidden;
	margin-bottom: 0;
	display: flex;
	align-items: flex-start;
	gap: 5px;
	font-weight: 500 !important;
	text-align: left;
	padding: 0;
	color: black;
	max-height: 3lh;
	line-height: 1.2;
}
.loop-product-sku {
	font-weight: 400;
	color: darkgray;
	display: inline-block;
	flex-shrink: 0;
	line-height: inherit;
}

.woocommerce-products-header__title {
	color: white;
	padding: 0.2em 0.5em;
}

/* Картинка товара: высота 1,5 ширины, увеличение при наведении (сниппет 011) */
.product .imagewrapper {
	width: 100%;
	height: 0;
	padding-bottom: 150%;
	overflow: hidden;
	margin-bottom: 0.5em;
}
.product .imagewrapper a {
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
}
.product .imagewrapper a img {
	transition: transform 0.3s ease;
	display: block;
}
.product .imagewrapper a:hover img {
	transform: scale(1.1);
}

/* Ссылки на PDF и видео под названием (сниппет 012) */
.append-block-small .link-to-pdf a {
	display: block;
	font-size: 0.9rem;
	line-height: normal;
	margin-bottom: 0.4em;
	margin-left: 0;
	text-align: left;
	padding-left: 1.3em;
}
.append-block-small .link-to-pdf a i {
	font-size: 1rem;
	display: inline-block;
	position: absolute;
	left: 0.5em;
}
.append-block-small .link-to-video a {
	display: block;
	font-size: 0.9rem;
	line-height: normal;
	margin-bottom: 0.4em;
	margin-left: 0;
	text-align: left;
	padding-left: 1.4em;
}
.append-block-small .link-to-video a i {
	font-size: 1rem;
	display: inline-block;
	position: absolute;
	left: 0.5em;
}
.append-block-small span {
	margin-bottom: 0.5em;
}

/* Карточка в списке: тень при наведении */
li.product {
	padding: 0.5em;
}
li.product:hover {
	-webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
	-moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
	box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
}
/* Появление карточек (AOS; «Настройки сайта» aos_catalog, сниппет #59;
   09.10.2026). AOS двигает карточку свойством transform и ставит ей свои
   переходы (только opacity и transform, с задержкой data-aos-delay) — тогда
   подсветка при наведении шла бы без перехода или с задержкой. Поэтому
   переходы задаём сами: появление 0,6 с с задержкой по месту в ряду
   (--sk-aos-delay ставит скрипт), подсветка — сразу. Подъём при наведении
   (тема 'landing') — свойством translate, а не transform, чтобы не спорить с
   AOS. Сдвиг «прилёта» — 60px вместо 100px AOS.
   Прячем карточки с первой отрисовки по классу body.sk-aos-catalog (ставит
   сервер), а не по data-aos (ставит скрипт позже — карточки мигали). При
   «уменьшить движение» AOS выключен — карточки не прячем. */
.sk-aos-catalog ul.products > li.product[data-aos] {
	transition-property: opacity, transform, background-color, box-shadow, translate;
	transition-duration: .6s, .6s, .2s, .25s, .25s;
	transition-timing-function: cubic-bezier(.215, .61, .355, 1), cubic-bezier(.215, .61, .355, 1), ease, ease, ease;
	transition-delay: var(--sk-aos-delay, 0s), var(--sk-aos-delay, 0s), 0s, 0s, 0s;
}
@media (prefers-reduced-motion: no-preference) {
	.sk-aos-catalog ul.products > li.product:not(.aos-animate) {
		opacity: 0;
		transform: translate3d(0, 60px, 0);
	}
}
.append-block-small {
	z-index: 1;
}

ul.products li.product {
	margin-bottom: 3em !important;
}
/* Товары в блоке WooCommerce «Выбранные товары» (страница «Новинки») */
.wc-block-grid__products .wc-block-grid__product {
	margin-bottom: 6em;
}

/* Колонки списка — по ширине самого списка, а не окна (09.10.2026): 4, когда
   места от 880 px, 3 — от 560 px, иначе 2 (карточка не уже ~190 px). Раньше
   от 768 до 1280 px (и на планшетах) список сразу падал с 4 колонок до 2 по
   48%. Ширина списка зависит и от левого меню (рядом или под списком),
   поэтому — запрос к контейнеру, а не к окну. Контейнер — .content-area
   (#primary), а не сам .site-main (10.10.2026): контейнер — отдельный
   контекст оформления, нижний отступ последнего блока страницы переставал
   «схлопываться» с отступом .site-main, и над подвалом на всех страницах
   было на ~42px больше пустого места. Ширина у них одна. Сетка вместо
   float темы: её «распорки» ::before/::after в сетке стали бы ячейками —
   убраны; ширину и поля карточек темы (22.05% / 3.8%, на телефоне 46.4%)
   перебиваем: у темы .site-main ul.products.columns-4 li.product (4 класса),
   поэтому у нас класс products повторён (5 классов не нужно — хватает 4 +
   body). Условие «не 1–2 колонки» — в :where(), чтобы не добавляло веса и
   правило на 4 колонки его перевешивало. */
.content-area {
	container: sk-main / inline-size;
}
.site-main ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 5%;
}
.site-main ul.products::before,
.site-main ul.products::after {
	display: none;
}
body .site-main ul.products.products li.product {
	width: auto;
	float: none;
	margin-left: 0;
	margin-right: 0;
}
@container sk-main (min-width: 560px) {
	.site-main ul.products:where(:not(.columns-1):not(.columns-2)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 4%;
	}
}
@container sk-main (min-width: 880px) {
	.site-main ul.products.columns-4,
	.site-main ul.products.columns-5,
	.site-main ul.products.columns-6 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 3.8%;
	}
}
/* Название — целиком, а картинки в ряду всё равно на одном уровне: строки
   карточки (название / картинка / прочее) общие для всего ряда списка
   (subgrid) — строка названия высотой с самое длинное название ряда.
   Раньше название обрезалось до 3 строк в блоке высотой 4em — на узких
   карточках (3–2 колонки) не помещалось. Значок вариаций (ссылка после
   картинки, .variable / .variable-sku) стоял от верха карточки (5.1em /
   6.3em) — теперь от верха картинки: ссылка — в той же ячейке, что картинка. */
body .site-main ul.products.products li.product {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
}
.site-main ul.products li.product > a:first-child {
	grid-row: 1;
	display: flex;
}
.site-main ul.products li.product > .imagewrapper {
	grid-row: 2;
	grid-column: 1;
}
.site-main ul.products li.product > a:not(:first-child) {
	grid-row: 2;
	grid-column: 1;
	align-self: start;
	justify-self: start;
	position: relative;
	z-index: 1;
}
.site-main ul.products li.product > a:not(:first-child) .variable {
	left: 8px;
	top: 8px;
}
.site-main ul.products li.product > a:not(:first-child) .variable-sku {
	left: 28px;
	top: 9px;
	white-space: nowrap;
}
.site-main ul.products li.product > .append-block-small {
	grid-row: 3;
}
#content .site-main .products .div-woocommerce-loop-product__title {
	flex: 1;
	height: auto;
	min-height: 4em;
	container: sk-title / inline-size;
}
#content .site-main .products h3.woocommerce-loop-product__title {
	max-height: none;
}
/* Узкая карточка (телефон, 3 колонки на планшете): артикул — строкой над
   названием, а не колонкой слева — иначе название в 6 строк с переносами.
   Контейнер — блок названия, а не сама карточка: контейнер включает
   layout containment, а с ним subgrid у карточки не работает. */
@container sk-title (max-width: 180px) {
	#content .site-main .products h3.woocommerce-loop-product__title {
		display: block;
		padding-top: 6px;	/* блок названия поднят на 8px — артикул не прижат к краю */
	}
	#content .site-main .products .loop-product-sku {
		display: block;
	}
}
@media (orientation: portrait) and (max-width: 1024px) {
	ul.products li.product {
		margin-bottom: 2em !important;
	}
}