/* Elsity: оформление карточек каталога — серый фон под товаром, как в Премьере.
   Подключается напрямую из init.php: сборщик Битрикса при объединении стилей
   вырезает свойство mix-blend-mode. */

:root {
	--elsity-card-bg: #f8f8fc;
	--elsity-card-radius: 6px;
	--elsity-card-image-height: 100%;   /* высота серой области, 100% = квадрат */
	--elsity-card-pad: 10px;            /* внутренние отступы карточки (в шаблоне 25px) */
	--elsity-card-hover: 0 6px 22px rgba(0, 0, 0, .09);   /* мягкая тень при наведении */
}

/* подложка всей области картинки */
.catalog_item .image_wrapper_block,
.catalog_block .image_wrapper_block,
.item_wrap .image_wrapper_block {
	background-color: var(--elsity-card-bg);
	border-radius: var(--elsity-card-radius);
	overflow: hidden;
}

/* область под товаром чуть выше квадрата — товар «дышит» */
.catalog_item .image_wrapper_block,
.catalog_block .image_wrapper_block {
	padding-top: var(--elsity-card-image-height) !important;
}

/* ВАЖНО: .section-gallery-wrapper имеет position:absolute + z-index:2,
   то есть создаёт собственный контекст наложения. mix-blend-mode у картинки
   смешивает её только с содержимым этого контекста, поэтому фон, заданный
   снаружи, в смешивании не участвует — дублируем его внутрь. */
.catalog_item .image_wrapper_block .section-gallery-wrapper,
.catalog_block .image_wrapper_block .section-gallery-wrapper,
.item_wrap .image_wrapper_block .section-gallery-wrapper,
.catalog_item .image_wrapper_block .thumb,
.catalog_block .image_wrapper_block .thumb,
.item_wrap .image_wrapper_block .thumb {
	background-color: var(--elsity-card-bg);
}

/* В Премьере у картинок mix-blend-mode: darken — режим оставляет более тёмный
   из двух цветов, поэтому белый фон снимка заменяется серой подложкой,
   а сам товар не искажается. */
.catalog_item .image_wrapper_block img,
.catalog_block .image_wrapper_block img,
.item_wrap .image_wrapper_block img {
	mix-blend-mode: darken;
}

/* Убираем «табличную» сетку между карточками.
   Её рисует внутренняя рамка box-shadow: #ececec 0 0 0 1px inset у .inner_wrap. */
.catalog_block .catalog_item .inner_wrap,
.catalog_block .item_block .inner_wrap,
.items .catalog_item .inner_wrap {
	box-shadow: none !important;
}

/* Отступы между карточками. В шаблоне у .inner_wrap padding: 25px 25px 0,
   из-за чего между серыми областями получалось 49px пустоты. */
.catalog_block .catalog_item .inner_wrap,
.items .catalog_item .inner_wrap {
	padding-left: var(--elsity-card-pad) !important;
	padding-right: var(--elsity-card-pad) !important;
	padding-top: var(--elsity-card-pad) !important;
}

/* Мягкая тень при наведении вместо убранной «табличной» рамки.
   Раньше её роль играл тот же box-shadow inset, что рисовал сетку. */
.catalog_block .catalog_item .inner_wrap,
.items .catalog_item .inner_wrap {
	transition: box-shadow .25s ease;
	border-radius: 8px;
}

.catalog_block .catalog_item:hover .inner_wrap,
.items .catalog_item:hover .inner_wrap {
	box-shadow: var(--elsity-card-hover) !important;
}

/* Цена со скидкой в одну строку: сначала актуальная, рядом — старая перечёркнутая.
   Подписи «Розничная цена» / «Цена по акции» убираем: они занимают две строки
   и создают пустоту в карточках без скидки. */
.catalog_item .price_matrix_block {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.catalog_item .price_matrix_block .price_name {
	display: none !important;
}

/* старая цена — мельче и приглушённее, чтобы не спорила с актуальной */
.catalog_item .price_group:not(.min) .price {
	font-size: 13px !important;
	color: #999 !important;
	font-weight: 400 !important;
}

.catalog_item .price_group:not(.min) .price_measure {
	display: none;
}

/* Кнопка «В корзину» всегда на виду, как в Премьере.
   В шаблоне она скрыта (display:none; opacity:0; visibility:hidden;
   position:absolute) и проявляется только при наведении — на тач-устройствах
   это неудобно, да и покупателю не видно призыва к действию. */
.catalog_block .catalog_item .footer_button,
.items .catalog_item .footer_button {
	display: block !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	height: auto !important;
	box-shadow: none !important;
	margin-top: 10px;
	padding: 0 !important;
	background: transparent !important;
}

/* внутренние отступы у блока кнопки в шаблоне рассчитаны на всплывающий вид */
.catalog_block .catalog_item .footer_button .button_block,
.items .catalog_item .footer_button .button_block {
	padding: 0 !important;
}