/* Start:/local/templates/liderlada/components/bitrix/catalog/.default/style.css?17945192172082*/
/* Минимальная раскладка каталога: колонка сбоку и список. Цвета и шрифты
   наследуются от шаблона сайта. */

.shop-catalog {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.shop-catalog__side {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.shop-catalog__main {
	min-width: 0;
}

@media (max-width: 900px) {
	.shop-catalog {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* «Похожие товары» и «Вы недавно смотрели»: блоки внизу страницы, каждый
   отделён от содержимого сверху воздухом и линией. Кегль заголовка берётся
   от шаблона сайта — здесь задаётся только то, без чего блок слипается
   с тем, что выше. Цвет линии — как у остальных разделителей модуля
   (#e5e7eb). Правила общие: на карточке товара блоки стоят подряд и должны
   выглядеть одинаково. */

.shop-similar,
.shop-viewed {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid #e5e7eb;
}

.shop-similar__title,
.shop-viewed__title {
	margin: 0 0 24px;
}

/* Ряд карточек блока заполняет ширину: auto-fit (в отличие от auto-fill
   в списке каталога) схлопывает пустые колонки, и четыре карточки не
   оставляют дыру справа на широком экране. Четыре — потому что столько
   влезает в один ряд почти на любой ширине, а ряд с одинокой карточкой
   в хвосте выглядит обрывом. */
.shop-similar .shop-catalog-grid,
.shop-viewed .shop-catalog-grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* End */


/* Start:/local/templates/liderlada/components/bitrix/catalog.element/.default/style.css?179451921716102*/
/* Минимальное оформление карточки товара. Цвета и шрифты наследуются
   от шаблона сайта; сетка сопутствующих — из шаблона списка (.shop-catalog-grid),
   он подключается здесь повторно теми же правилами. */

.shop-product__head {
	margin-bottom: 20px;
}

/* Три колонки: галерея — коротко о товаре — панель покупки.
   На среднем экране панель покупки встаёт рядом с фото, а текст
   уходит под них во всю ширину: узкая колонка с описанием между двух
   блоков читается хуже, чем широкая строка под ними. */
.shop-product__layout {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr) 320px;
	grid-template-areas: "media info buy";
	gap: 32px;
	align-items: start;
}

.shop-product__media {
	grid-area: media;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.shop-product__info {
	grid-area: info;
}

.shop-product__buy {
	grid-area: buy;
}

/* Кадр — ссылка на файл фотографии, поэтому display и position задаём
   явно: от <a> наследуется строчное поведение. */
.shop-product__photo {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.shop-product__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shop-product__photo--empty {
	background: #f3f4f6;
}

/* Увеличение при наведении: снимок растягивается внутри своей рамки, а точка
   под курсором остаётся на месте — transform-origin ставит скрипт, он же
   считает кратность по настоящему размеру картинки. Перехода здесь нет
   намеренно: при движении курсора он читается как отставание кадра. */
.shop-product__photo--zoomable {
	cursor: zoom-in;
}

.shop-product__photo--zoom img {
	transform: scale(var(--shop-zoom, 2));
}

/* Плашки товара («Акция», «Скидка», «Новинка») — в левом верхнем углу кадра,
   столбиком, если их несколько. Те же правила, что в шаблоне списка
   (catalog.section/.default): CSS шаблонов компонентов подключается
   по отдельности, общего файла у модуля нет — так же живёт блок цены
   `shop-price`.

   Цвета взяты с сайта-образца по оттенку, но темнее: на его светло-зелёном
   белая надпись даёт контраст около 2:1. Эти проходят AA (4.5:1). */
.shop-labels {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 1;
	/* Кадр увеличивается при наведении, а плашка — нет: щелчок по ней
	   должен открывать попап, как щелчок по фотографии. */
	pointer-events: none;
}

.shop-label {
	padding: 3px 8px;
	border-radius: 6px;
	background: #6b7280;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}

.shop-label--sale {
	background: #d32f2f;
}

.shop-label--discount {
	background: #d9480f;
}

.shop-label--new {
	background: #2b8a3e;
}

/* Значок лупы — подсказка, что кадр открывается. Курсор его не ловит:
   он лежит поверх ссылки. */
.shop-product__zoom-hint {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #4b5563;
	box-shadow: 0 1px 4px rgba(17, 24, 39, .18);
	pointer-events: none;
}

.shop-product__zoom-hint svg {
	width: 18px;
	height: 18px;
}

.shop-product__photo--zoom .shop-product__zoom-hint {
	opacity: 0;
}

.shop-product__thumbs {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.shop-product__thumb {
	width: 64px;
	height: 64px;
	padding: 2px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.shop-product__thumb--active {
	border-color: #2d6cdf;
}

.shop-product__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shop-product__name {
	margin: 0 0 12px;
}

.shop-product__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	color: #6b7280;
}

.shop-product__badge {
	padding: 3px 8px;
	border-radius: 4px;
	background: #e8f5e9;
	color: #2e7d32;
	font-size: 12px;
}

.shop-product__badge--out {
	background: #fdecea;
	color: #b3261e;
}

.shop-product__buy {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
}

.shop-product__price {
	margin: 0;
	font-size: 1.6em;
	font-weight: 600;
	line-height: 1.2;
}

.shop-product__price--request {
	font-size: 1em;
	font-weight: 400;
	color: #6b7280;
}

.shop-product__price-measure {
	font-size: 0.5em;
	font-weight: 400;
	color: #6b7280;
}

.shop-product__old-price {
	margin-left: 8px;
	font-size: 0.6em;
	font-weight: 400;
	color: #9ca3af;
}

/* Блок цены «Цена за …» с переключателем единиц. Правила те же, что в
   стилях списка (catalog.section/.default/style.css): страница
   товара список не подключает, а сопутствующие печатаются этой же
   разметкой. Менять — в обоих местах. */
.shop-price {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0;
}

.shop-price__for,
.shop-price__unit {
	font-size: 12px;
	line-height: 18px;
	color: #6b7280;
}

.shop-price__unit {
	padding: 0 1px;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	user-select: none;
}

.shop-price__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
	pointer-events: none;
}

.shop-price__radio:checked + .shop-price__unit {
	color: inherit;
	font-weight: 600;
	border-bottom-color: currentColor;
}

.shop-price__radio:focus-visible + .shop-price__unit {
	outline: 2px solid #2d6cdf;
	outline-offset: 2px;
	border-radius: 2px;
}

.shop-price__value {
	flex: 1 0 100%;
	margin: 0;
}

.shop-price--switch .shop-price__value {
	display: none;
}

.shop-price__radio:nth-of-type(1):checked ~ .shop-price__value[data-unit="0"],
.shop-price__radio:nth-of-type(2):checked ~ .shop-price__value[data-unit="1"] {
	display: block;
}

/* В панели покупки подпись и единицы крупнее, чем в плитке. */
.shop-product__buy .shop-price__for,
.shop-product__buy .shop-price__unit {
	font-size: 14px;
	line-height: 20px;
}

.shop-product__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Условия покупки: наличие, доставка, самовывоз. */
.shop-product__terms {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: 0.9em;
	color: #6b7280;
}

.shop-compare-button--text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #6b7280;
	font: inherit;
	cursor: pointer;
}

.shop-compare-button--text:hover,
.shop-compare-button--text.shop-compare-button--active {
	color: #2d6cdf;
}

.shop-compare-button__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex: none;
}

/* Коротко о товаре: первые характеристики рядом с фото. */
.shop-product__key-title {
	margin: 0 0 12px;
	font-size: 1.05em;
}

.shop-product__key-more {
	display: inline-block;
	margin-top: 12px;
}

.shop-product__block {
	margin-top: 32px;
}

.shop-product__subtitle {
	margin: 0 0 16px;
}

.shop-product__specs {
	margin: 0;
	display: grid;
	gap: 8px;
}

.shop-product__spec {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid #e5e7eb;
}

/* Строка без подписи: она есть у редких характеристик, где название
   не задано, — значение занимает всю ширину. */
.shop-product__spec--plain {
	grid-template-columns: minmax(0, 1fr);
}

.shop-product__spec dt {
	color: #6b7280;
}

.shop-product__spec dd {
	margin: 0;
}

.shop-product__text {
	line-height: 1.6;
}

/* --- Вкладки ------------------------------------------------------------ */

.shop-tabs {
	margin-top: 40px;
}

.shop-tabs__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	border-bottom: 1px solid #e5e7eb;
}

.shop-tabs__tab {
	position: relative;
	padding: 12px 0;
	border-bottom: 2px solid transparent;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.shop-tabs__tab--active {
	border-bottom-color: #2d6cdf;
	font-weight: 600;
}

.shop-tabs__panel {
	padding-top: 24px;
}

/* Со скриптом ленты вкладок заголовок раздела дублирует подпись вкладки,
   но убирать его из разметки нельзя: без скрипта разделы идут подряд,
   и тогда они останутся без заголовков. Прячем только видимо. */
.shop-tabs--js .shop-tabs__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.shop-tabs__empty {
	margin: 0;
	color: #6b7280;
}

/* --- Документы ---------------------------------------------------------- */

.shop-docs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	max-width: 640px;
}

.shop-docs__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}

.shop-docs__link:hover {
	border-color: #2d6cdf;
}

.shop-docs__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: #f3f4f6;
	font-size: 11px;
	font-weight: 600;
	color: #6b7280;
}

.shop-docs__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.shop-docs__size {
	font-size: 0.85em;
	color: #6b7280;
}

/* --- Попап с фотографиями ----------------------------------------------- */

/* Атрибут hidden — это стиль браузера, и авторский display: flex его
   перебивает: без этого правила попап был бы виден всегда (та же грабля,
   что с кадрами в карточке списка). */
.shop-lightbox[hidden] {
	display: none;
}

.shop-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(17, 24, 39, .88);
}

/* Страница под открытым попапом не прокручивается. */
.shop-lightbox-open {
	overflow: hidden;
}

/* Окно по ширине кадра, а не во всю отведённую ширину: у вытянутого по
   высоте снимка (а в этом каталоге почти все такие) крестик и стрелки
   иначе уезжают от фотографии к краям экрана. */
.shop-lightbox__window {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: min(1100px, 100%);
	max-height: 100%;
}

/* Крестик стоит отдельной строкой над кадром, а не поверх него: вынесенный
   в угол окна он на узком экране накладывался на фотографию. */
.shop-lightbox__close,
.shop-lightbox__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
}

.shop-lightbox__close:hover,
.shop-lightbox__nav:hover {
	background: rgba(255, 255, 255, .3);
}

.shop-lightbox__close {
	align-self: flex-end;
	width: 40px;
	height: 40px;
}

.shop-lightbox__close svg {
	width: 20px;
	height: 20px;
}

.shop-lightbox__stage {
	display: flex;
	min-height: 0;
	align-items: center;
	gap: 12px;
}

.shop-lightbox__nav {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
}

.shop-lightbox__nav svg {
	width: 22px;
	height: 22px;
}

.shop-lightbox__frame {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	justify-content: center;
}

.shop-lightbox__frame img {
	max-width: 100%;
	max-height: min(72vh, 820px);
	border-radius: 6px;
	background: #fff;
	object-fit: contain;
}

.shop-lightbox__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.shop-lightbox__counter {
	margin: 0;
	color: #e5e7eb;
	font-size: 14px;
}

.shop-lightbox__thumbs {
	display: flex;
	max-width: 100%;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 2px;
}

.shop-lightbox__thumb {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	padding: 3px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 4px;
	background: #fff;
	opacity: .6;
	cursor: pointer;
}

.shop-lightbox__thumb:hover,
.shop-lightbox__thumb--active {
	opacity: 1;
}

.shop-lightbox__thumb--active {
	border-color: #fff;
}

.shop-lightbox__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Узкие экраны ------------------------------------------------------- */
/* Переносы колонок держим в конце файла: правила выше той же специфичности
   идут позже и перебили бы их (так лента миниатюр оставалась вертикальной
   на телефоне). */

@media (max-width: 1199px) {
	.shop-product__layout {
		grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
		grid-template-areas:
			"media buy"
			"info info";
	}
}

@media (max-width: 760px) {
	.shop-product__layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"buy"
			"info";
	}

	/* Миниатюры на телефоне — строкой под фото: вертикальная лента
	   съедала бы ширину единственной колонки. */
	.shop-product__media {
		flex-direction: column-reverse;
	}

	.shop-product__thumbs {
		flex-direction: row;
		overflow-x: auto;
	}

	/* Лента вкладок не переносится, а прокручивается: перенос на вторую
	   строку читается как два разных ряда ссылок. */
	.shop-tabs__bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 20px;
		scrollbar-width: none;
	}

	.shop-tabs__tab {
		white-space: nowrap;
	}

	/* Попап на телефоне: кадру нужна почти вся высота, поля и стрелки
	   уменьшены — иначе на снимок остаётся полоска посередине. */
	.shop-lightbox {
		padding: 12px;
	}

	.shop-lightbox__nav {
		width: 36px;
		height: 36px;
	}

	.shop-lightbox__frame img {
		max-height: 62vh;
	}

	.shop-lightbox__thumb {
		width: 48px;
		height: 48px;
	}
}

/* End */


/* Start:/local/components/giperium/shop.favorite.button/templates/.default/style.css?1794519217963*/
 

.g-fav-button {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.g-fav-button__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid #c9ced6;
	border-radius: 4px;
	background: transparent;
	color: #6b7280;
	font: inherit;
	cursor: pointer;
}

.g-fav-button__toggle:hover {
	color: #c2185b;
	border-color: #c2185b;
}

.g-fav-button__toggle[disabled] {
	opacity: 0.6;
	cursor: default;
}



.g-fav-button__toggle--active {
	color: #c2185b;
	border-color: #c2185b;
}

.g-fav-button__toggle--active .g-fav-button__icon path {
	fill: currentColor;
}

.g-fav-button__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex: none;
}



.g-fav-button__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.g-fav-button__error {
	flex-basis: 100%;
	color: #c62828;
	font-size: 0.875em;
}

/* End */


/* Start:/local/components/giperium/shop.cart.button/templates/counter/style.css?17945192171703*/
 

.g-cart-button--counter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.g-cart-button--counter .g-cart-button__price {
	font-weight: 600;
}

.g-cart-button--counter .g-cart-button__add {
	padding: 9px 18px;
	border: 0;
	border-radius: 4px;
	background: #2d6cdf;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.g-cart-button--counter .g-cart-button__add:hover {
	background: #255bbd;
}

.g-cart-button--counter .g-cart-button__add[disabled] {
	opacity: 0.6;
	cursor: default;
}

 
.g-cart-button__counter {
	display: flex;
	align-items: center;
	gap: 2px;
	border: 1px solid #2d6cdf;
	border-radius: 4px;
	padding: 1px;
}

.g-cart-button__step {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: #2d6cdf;
	font: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.g-cart-button__step:hover {
	background: #eef3fd;
}

.g-cart-button__value {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}




.g-cart-button__amount {
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-align: center;
}

.g-cart-button__amount:focus {
	outline: none;
}

.g-cart-button--counter .g-cart-button__measure {
	color: #6b7280;
}

.g-cart-button--counter .g-cart-button__error {
	flex-basis: 100%;
	color: #c62828;
	font-size: 0.875em;
}



.g-cart-button--counter .g-cart-button__error--notice {
	color: #7a5600;
}

 
.g-cart-button--counter .g-cart-button__out {
	padding: 9px 0;
	color: #6b7280;
	font-size: 0.9375em;
}



.g-cart-button--counter [hidden] {
	display: none;
}

/* End */


/* Start:/local/templates/liderlada/components/bitrix/catalog.section/.default/style.css?179451921719730*/
/* Минимальное оформление списка товаров: сетка, карточка, кнопки поверх
   фото. Цвета и шрифты наследуются от шаблона сайта. */

/* Строка над списком: счётчик и сортировка слева, вид списка справа.
   Вид отжимается вправо своим отступом, а не распоркой строки: при
   выключенной сортировке распорка увела бы вправо счётчик. */
.shop-catalog-list__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-bottom: 20px;
}

.shop-catalog-view {
	margin-left: auto;
}

.shop-catalog-list__count {
	color: #6b7280;
}

/* Сортировка строкой признаков: подпись и ссылки-признаки со значками. */
.shop-catalog-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.shop-catalog-sort__label {
	color: #6b7280;
}

/* Стрелка и значок стоят вплотную — это одна группа, и зазор между ними
   разбивал бы её надвое; отступ появляется только перед подписью. */
.shop-catalog-sort__item {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: inherit;
	text-decoration: none;
}

.shop-catalog-sort__text {
	margin-left: 6px;
}

.shop-catalog-sort__item--active {
	font-weight: 600;
}

.shop-catalog-sort__icon {
	width: 18px;
	height: 18px;
	color: #9ca3af;
}

/* Значки, обрезанные по самому рисунку: поля у них нет вовсе, поэтому
   отступы до подписи одинаковые, а ширина считается по полю значка —
   так пропорции рисунка не трогаются. Высота у каждого своя: буквы идут
   в два этажа, рубль — в один, и одна высота на двоих сделала бы рубль
   вдвое крупнее букв. */
.shop-catalog-sort__icon--letters,
.shop-catalog-sort__icon--ruble {
	width: auto;
}

.shop-catalog-sort__icon--letters {
	height: 20px;
}

.shop-catalog-sort__icon--ruble {
	height: 16px;
}

.shop-catalog-sort__item--active .shop-catalog-sort__icon {
	color: inherit;
}

/* Стрелка направления стоит перед значком: у выбранного признака она
   показывает нынешний порядок, у остальных — тот, который включит щелчок,
   поэтому у невыбранных она приглушена. */
.shop-catalog-sort__arrow {
	width: 9px;
	height: 18px;
	color: #c9ced6;
}

/* Вверх — тот же контур, перевёрнутый. */
.shop-catalog-sort__arrow--up {
	transform: scaleY(-1);
}

.shop-catalog-sort__item--active .shop-catalog-sort__arrow {
	color: inherit;
}

/* Переключатель вида: две кнопки-значка. */
.shop-catalog-view {
	display: inline-flex;
	gap: 4px;
}

.shop-catalog-view__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	color: #9ca3af;
}

.shop-catalog-view__item svg {
	width: 20px;
	height: 20px;
}

.shop-catalog-view__item:hover {
	color: inherit;
}

.shop-catalog-view__item--active {
	border-color: #c9ced6;
	color: inherit;
}

.shop-catalog-list__empty {
	padding: 32px 0;
	color: #6b7280;
}

/* Низ списка: номера страниц у левого края, «Показать ещё» по центру
   той же строки.

   Три колонки, а не flex с распорками: кнопка должна стоять по центру
   всей строки, а не по центру места, оставшегося от номеров, — иначе
   она ездит влево-вправо от числа страниц. Крайние колонки одинаковой
   доли, кнопка в средней. На узком экране строка складывается
   в столбик. */
.shop-catalog-list__bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
}

.shop-catalog-list__bottom .shop-catalog-list__pager {
	grid-column: 1;
	justify-self: start;
}

.shop-catalog-list__bottom .shop-catalog-list__more {
	grid-column: 2;
}

@media (max-width: 760px) {
	.shop-catalog-list__bottom {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.shop-catalog-list__bottom .shop-catalog-list__pager,
	.shop-catalog-list__bottom .shop-catalog-list__more {
		grid-column: 1;
	}
}

.shop-catalog-list__more {
	padding: 10px 24px;
	border: 1px solid #c9ced6;
	border-radius: 4px;
	background: #fff;
	font: inherit;
	cursor: pointer;
}

.shop-catalog-list__more:hover {
	border-color: #2d6cdf;
}

.shop-catalog-list__more[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Отступ сверху даёт строка низа списка, у самих номеров его нет. */
.shop-catalog-list__pager {
	margin-top: 0;
}

.shop-catalog-list__pager--top {
	margin: 0 0 24px;
}

.shop-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px 16px;
}

/* Лента: карточки в один ряд с прокруткой (параметр SLIDER). Сколько
   их помещается в ряд, задаёт --shop-slider-view, зазор — --shop-slider-gap:
   ширина карточки считается из них, и шаблон сайта может поменять и то,
   и другое, не переписывая расчёт.

   Прокрутка нативная: без скриптов лента листается жестом и колесом,
   стрелки их только дублируют. Полоса прокрутки убрана — её роль играют
   стрелки, а карточки с краю видно и так. */

.shop-catalog-slider {
	position: relative;
}

.shop-catalog-grid--slider {
	--shop-slider-view: 5;
	--shop-slider-gap: 16px;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--shop-slider-view) - 1) * var(--shop-slider-gap)) / var(--shop-slider-view));
	gap: var(--shop-slider-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.shop-catalog-grid--slider::-webkit-scrollbar {
	display: none;
}

.shop-catalog-grid--slider > * {
	scroll-snap-align: start;
}

.shop-catalog-slider__arrow {
	position: absolute;
	/* По середине фото, а не ленты: внизу карточки стоят цена и кнопка,
	   и стрелка висела бы поверх них. */
	top: 28%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	background: #fff;
	color: inherit;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* Скрытая стрелка должна исчезать: атрибут `hidden` — это стиль браузера
   `display: none`, и авторский `display: flex` выше его перебивает. */
.shop-catalog-slider__arrow[hidden] {
	display: none;
}

.shop-catalog-slider__arrow:hover {
	border-color: currentColor;
}

/* Стрелки лежат поверх крайних карточек, а не снаружи ленты: лента идёт
   во всю ширину колонки, и вынесенная наружу стрелка на ноутбуке упиралась
   в край окна. */
.shop-catalog-slider__arrow--prev {
	left: 6px;
}

.shop-catalog-slider__arrow--next {
	right: 6px;
}

@media (max-width: 1100px) {
	.shop-catalog-grid--slider {
		--shop-slider-view: 3;
	}
}

@media (max-width: 760px) {
	.shop-catalog-grid--slider {
		--shop-slider-view: 2;
	}
}

/* Вид «списком»: карточка раскладывается в строку — фото, название
   с характеристиками, цена с кнопкой. Разметка та же, что и в плитке:
   два набора карточек разошлись бы поведением кнопок. */
.shop-catalog-grid--list {
	grid-template-columns: 1fr;
	gap: 16px;
}

.shop-catalog-grid--list .shop-catalog-card {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) 240px;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"pic name buy"
		"pic props buy";
	gap: 8px 24px;
	align-items: start;
}

.shop-catalog-grid--list .shop-catalog-card__top { grid-area: pic; }
.shop-catalog-grid--list .shop-catalog-card__name { grid-area: name; }
.shop-catalog-grid--list .shop-catalog-card__props { grid-area: props; }

.shop-catalog-grid--list .shop-catalog-card__buy {
	grid-area: buy;
	margin-top: 0;
}

/* Узкий экран: строками не показываем — на 390px в строку всё равно
   ничего не помещается, и карточка возвращается к обычному виду. */
@media (max-width: 760px) {
	.shop-catalog-grid--list .shop-catalog-card {
		display: flex;
		flex-direction: column;
	}
}

/* Вид «списком без фото»: плотная таблица строк — название с кодами,
   наличие, цена с кнопкой, избранное и сравнение. Фото и плашки на фото
   шаблон в этом виде не выводит; кнопки и плашка наличия, которые в плитке
   лежат поверх фото, становятся обычными ячейками строки
   (`display: contents` у верхнего блока). */
.shop-catalog-grid--compact {
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid #e5e7eb;
}

.shop-catalog-grid--compact .shop-catalog-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 130px 260px auto;
	grid-template-areas:
		"name stock buy act"
		"props stock buy act";
	align-items: center;
	gap: 2px 20px;
	padding: 10px 0;
	border-bottom: 1px solid #e5e7eb;
}

.shop-catalog-grid--compact .shop-catalog-card__top { display: contents; }
.shop-catalog-grid--compact .shop-catalog-card__name { grid-area: name; }
.shop-catalog-grid--compact .shop-catalog-card__props { grid-area: props; }

.shop-catalog-grid--compact .shop-catalog-card__badge {
	grid-area: stock;
	position: static;
	justify-self: start;
}

.shop-catalog-grid--compact .shop-catalog-card__buy {
	grid-area: buy;
	margin-top: 0;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.shop-catalog-grid--compact .shop-catalog-card__actions {
	grid-area: act;
	position: static;
	flex-direction: row;
}

.shop-catalog-grid--compact .shop-catalog-card__actions .g-fav-button__toggle,
.shop-catalog-grid--compact .shop-catalog-card__actions .shop-compare-button {
	width: 32px;
	height: 32px;
}

/* Кнопка корзины в строке не переносит подпись. */
.shop-catalog-grid--compact .shop-catalog-card__cart {
	white-space: nowrap;
}

/* Узкий экран: название и коды сверху, ниже наличие со значками, под ними
   цена с кнопкой — во всю ширину, иначе подписи ломаются на два этажа. */
@media (max-width: 760px) {
	.shop-catalog-grid--compact .shop-catalog-card {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name name"
			"props props"
			"stock act"
			"buy buy";
		gap: 6px 12px;
	}
}

.shop-catalog-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.shop-catalog-card__top {
	position: relative;
}

.shop-catalog-card__pic {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
}

.shop-catalog-card__pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.shop-catalog-card__nopic {
	display: block;
	width: 100%;
	height: 100%;
	background: #f3f4f6;
}

/* Несколько кадров: прозрачные зоны наведения поверх фото и чёрточки
   под ним. Чёрточки — указатель, а не кнопки: переключает наведение,
   поэтому на устройствах без курсора кадр остаётся первым. */
.shop-catalog-card__pic--multi {
	position: relative;
}

/* Скрытый кадр прячет АТРИБУТ hidden, но правило `img { display: block }`
   выше — авторское и сильнее стиля браузера, поэтому без этой строки
   на карточке видно сразу все кадры. */
.shop-catalog-card__pic img[hidden] {
	display: none;
}

.shop-catalog-card__zones {
	position: absolute;
	inset: 0;
	display: flex;
}

.shop-catalog-card__zone {
	flex: 1 1 0;
}

.shop-catalog-card__dashes {
	position: absolute;
	right: 10px;
	bottom: 8px;
	left: 10px;
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity .15s;
}

/* Чёрточки показываются при наведении на карточку: в покое они
   отвлекали бы от товара, как у образца. */
.shop-catalog-card:hover .shop-catalog-card__dashes,
.shop-catalog-card__pic--multi:focus-visible .shop-catalog-card__dashes {
	opacity: 1;
}

.shop-catalog-card__dash {
	flex: 1 1 0;
	height: 2px;
	border-radius: 2px;
	background: #d1d5db;
}

.shop-catalog-card__dash--active {
	background: #374151;
}

/* Кнопки избранного и сравнения — в правом верхнем углу поверх фото.
   В разметке они после ссылки: так порядок обхода с клавиатуры идёт
   сверху вниз, а внутри <a> кнопка невалидна. */
.shop-catalog-card__actions {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.shop-catalog-card__actions .g-fav-button__toggle,
.shop-catalog-card__actions .shop-compare-button {
	width: 36px;
	height: 36px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
}

.shop-compare-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #c9ced6;
	color: #6b7280;
	font: inherit;
	cursor: pointer;
}

.shop-compare-button:hover,
.shop-compare-button--active {
	color: #2d6cdf;
	border-color: #2d6cdf;
}

.shop-compare-button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.shop-compare-button__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex: none;
}

.shop-compare-button__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Плашки товара — в левом верхнем углу фотографии, столбиком, если их
   несколько. Правый верхний угол занят кнопками избранного и сравнения,
   нижний левый — плашкой наличия.

   Цвета взяты с сайта-образца по оттенку, но темнее: на его светло-зелёном
   белая надпись даёт контраст около 2:1 и на солнце с телефона не читается.
   Эти проходят AA для мелкого текста (4.5:1).

   Блок `shop-label` повторён в стилях карточки товара: шаблоны компонентов
   подключают свои CSS по отдельности, общего файла у модуля нет (так же
   живёт блок цены `shop-price`). */
.shop-labels {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Поверх фотографии, но ниже кнопок: у карточки с длинной меткой
	   плашка не должна перехватывать щелчок по «отложить». */
	z-index: 1;
	pointer-events: none;
}

.shop-label {
	padding: 3px 8px;
	border-radius: 6px;
	background: #6b7280;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}

.shop-label--sale {
	background: #d32f2f;
}

.shop-label--discount {
	background: #d9480f;
}

.shop-label--new {
	background: #2b8a3e;
}

.shop-catalog-card__badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 8px;
	border-radius: 4px;
	background: #e8f5e9;
	color: #2e7d32;
	font-size: 12px;
}

.shop-catalog-card__badge--out {
	background: #fdecea;
	color: #b3261e;
}

.shop-catalog-card__props {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 12px;
	color: #6b7280;
}

.shop-catalog-card__name {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.shop-catalog-card__name:hover {
	text-decoration: underline;
}

.shop-catalog-card__buy {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.shop-catalog-card__price {
	margin: 0;
	font-weight: 600;
}

.shop-catalog-card__price--request {
	font-weight: 400;
	color: #6b7280;
}

.shop-catalog-card__old-price {
	margin-right: 8px;
	font-weight: 400;
	color: #9ca3af;
}

/* Блок цены: подпись «Цена за …» и сумма под ней. У товара со второй
   единицей подпись — переключатель радио-кнопок: видна цена выбранной
   единицы. Радио спрятаны, но остаются в фокусе: Tab приводит к группе,
   стрелки меняют единицу. Те же правила повторены в стилях карточки
   товара — страница товара список не подключает. */
.shop-price {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0;
}

.shop-price__for,
.shop-price__unit {
	font-size: 12px;
	line-height: 18px;
	color: #6b7280;
}

.shop-price__unit {
	padding: 0 1px;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	user-select: none;
}

.shop-price__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
	pointer-events: none;
}

.shop-price__radio:checked + .shop-price__unit {
	color: inherit;
	font-weight: 600;
	border-bottom-color: currentColor;
}

.shop-price__radio:focus-visible + .shop-price__unit {
	outline: 2px solid #2d6cdf;
	outline-offset: 2px;
	border-radius: 2px;
}

.shop-price__value {
	flex: 1 0 100%;
	margin: 0;
}

/* Единиц не больше двух: единица продажи и справочная. */
.shop-price--switch .shop-price__value {
	display: none;
}

.shop-price__radio:nth-of-type(1):checked ~ .shop-price__value[data-unit="0"],
.shop-price__radio:nth-of-type(2):checked ~ .shop-price__value[data-unit="1"] {
	display: block;
}

/* End */
/* /local/templates/liderlada/components/bitrix/catalog/.default/style.css?17945192172082 */
/* /local/templates/liderlada/components/bitrix/catalog.element/.default/style.css?179451921716102 */
/* /local/components/giperium/shop.favorite.button/templates/.default/style.css?1794519217963 */
/* /local/components/giperium/shop.cart.button/templates/counter/style.css?17945192171703 */
/* /local/templates/liderlada/components/bitrix/catalog.section/.default/style.css?179451921719730 */