/* FEAT-CARD-UI-1 (владелец): блок «Похожие товары» на карточке — оформление в стиле
   редизайна и слайдер в духе DNS.

   ВАЖНО: разметка товарной карточки (.catalog_item) не трогается вообще — цена, кнопка
   покупки, стикеры, наличие, избранное и сравнение остаются штатными, это денежный
   функционал. Здесь только стили, и скоуп жёсткий: .similar_block. Другие горизонтальные
   блоки карточки («Вы смотрели», «С этим товаром покупают») пользуются тем же
   js/es-carousel.js и НЕ должны задеваться — поэтому ни одного селектора вида
   `.es-carousel …` без префикса `.similar_block` в этом файле нет.

   Механику ПК менять не потребовалось: карусель уже ванильная (js/es-carousel.js,
   PERF-JQUERY-CAROUSELS) — нативный overflow-x + scroll-snap и стрелки без jQuery.
   Ширину слайда она считает формулой из --esc-visible/--esc-gap, поэтому и «3 полных
   карточки + половинки соседних», и мобильный peek делаются переопределением ширины,
   без правок JS и разметки (и без правок component_epilog.php — он в пакете -2). */

.similar_block {
	--es-sim-line: var(--es-line, rgba(31, 41, 55, .12));
	--es-sim-radius: 16px;
	--es-sim-gap: 16px;
	/* Дробное число: 4 карточки целиком + узкая полоска пятой справа. Полоска —
	   единственный «обрезанный» элемент, и она намеренно попадает на фото, а не на цену:
	   при выравнивании по началу трека все видимые цены читаются полностью. */
	--es-sim-visible: 4.3;
	position: relative;
	margin: 46px 0;
}

/* отступ под заголовком: было 84px (14px маргина темы + 52px пустого ul навигации,
   который лежал в потоке), стало ~36px — вдвое меньше, в ритме соседних секций */
.similar_block > h4 {
	margin: 0 0 22px !important;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--es-text, #1f2937);
}

/* Трек: свои поля вместо нулевых. Причина та же, что чинили в ленте акций (6db85ff):
   у скролл-контейнера обрезается всё, что выходит за его границы, — левый край первой
   карточки и подъём с тенью на ховере. Отрицательный внешний margin возвращает первую
   карточку на левый край блока, scroll-padding держит то же поле при snap. */
.similar_block .es-carousel .es-carousel__track {
	gap: var(--es-sim-gap) !important;
	padding: 18px 16px !important;
	margin: -18px -16px;
	scroll-padding-left: 16px;
}

/* Выравнивание по НАЧАЛУ, а не по центру. Было `center`, и вместе с
   `scroll-snap-type: x mandatory` браузер снапил трек сразу после раскладки: на старте
   scrollLeft оказывался 110px (ПК) и 196px (мобиль) вместо нуля, поэтому первая карточка
   всегда стояла разрезанной по вертикали — а режется у неё как раз зона цены, отсюда
   «обрезанные цены». Заодно чинится логика стрелок в js/es-carousel.js:116 — она считает
   началом трека `scrollLeft <= 1`, и при центрирующем снапе «назад» не гасилась никогда.
   Полукарточка-превью следующего товара остаётся: её даёт ширина слайда (--es-sim-visible
   дробный на планшете) и правое поле трека. */
.similar_block .es-carousel .es-carousel__track > li {
	width: calc((100% - (var(--es-sim-visible) - 1) * var(--es-sim-gap)) / var(--es-sim-visible)) !important;
	border: 0 !important;
	scroll-snap-align: start;
}

/* карточка: чистый фон, аккуратная рамка, воздух внутри */
.similar_block .es-carousel__track > li .inner_wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* сверху поле меньше: стикеры и иконки лежат абсолютом поверх фото и своей высоты
	   не занимают, поэтому большой отступ давал пустую полосу над картинкой */
	padding: 8px 14px 14px;
	background: #fff;
	border: 1px solid var(--es-sim-line);
	border-radius: var(--es-sim-radius);
}

/* Ховер (решение владельца): без подъёма и масштаба — их срезал скролл-контейнер.
   Только зелёная полоска по центру нижнего края карточки, плавно раскрывающаяся. */
.similar_block .es-carousel__track > li .inner_wrap::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 8px;
	width: 56%;
	height: 4px;
	border-radius: 999px;
	background: var(--es-accent, #1F7A3B);
	opacity: 0;
	transform: translateX(-50%) scaleX(.4);
	transition: opacity .22s ease, transform .28s cubic-bezier(.18, .89, .32, 1.12);
	pointer-events: none;
}

.similar_block .es-carousel__track > li .inner_wrap:hover::after {
	opacity: 1;
	transform: translateX(-50%) scaleX(1);
}

/* .image_wrapper_block — узкий блок по размеру картинки, а стикеры и «сезоны» лежат в нём
   абсолютом и выходят за его границы: ни overflow, ни фон ему давать нельзя.
   flex-shrink: 0 обязателен — во flex-колонке блок сжимался, и фото становилось мелким. */
.similar_block .image_wrapper_block {
	flex-shrink: 0;
	width: 100%;
	margin-bottom: 6px;
}

/* Товарное фото. Замер: исходник 1024×1024, то есть файл крупный и PHP-ресайз менять
   не нужно — размер на экране ограничивала фото-зона (на проде 170×170). Отдаём фото
   всю ширину карточки и высоту 230px: шина на белом, кадрировать нельзя, только
   вписывание (object-fit: contain), поэтому картинка масштабируется по меньшей стороне.
   Тема держит у .image_wrapper_block фиксированную высоту под старую плитку — снимаем. */
.similar_block .image_wrapper_block {
	height: auto !important;
	min-height: 0 !important;
}

.similar_block .image_wrapper_block .thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 230px;
}

.similar_block .image_wrapper_block .thumb img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 230px;
	object-fit: contain;
}

.similar_block .item_info {
	padding-top: 4px;
}

.similar_block .item-title {
	min-height: calc(3 * 1.35em);
}

.similar_block .item-title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.35;
	color: var(--es-text, #1f2937);
}

.similar_block .item-title a:hover {
	color: var(--es-accent, #1F7A3B);
}

.similar_block .cost.prices {
	margin-top: 6px;
}

/* Тема держит у .price line-height 15px при font-size 18px: строчный бокс ниже самих
   букв, «₽» и верх цифр выступают за него, а цена садится вплотную к строке наличия.
   Задаём высоту строки от размера шрифта и снимаем фиксированную высоту бокса —
   размеры и вес шрифта не трогаем, это штатное оформление цены. */
.similar_block .cost.prices .price {
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.25 !important;
	vertical-align: baseline;
}

.similar_block .cost.prices .price .price_value,
.similar_block .cost.prices .price .price_currency {
	line-height: inherit;
}

/* Кнопка «Подробнее» убрана (решение владельца): она появлялась только по ховеру и
   срезалась. Скрываем именно её — по классу read_more, чтобы у товаров, где тема
   печатает кнопку покупки, та осталась на месте (денежный функционал). */
.similar_block .footer_button .read_more {
	display: none !important;
}

.similar_block .footer_button {
	margin-top: auto;
	padding-top: 8px;
	min-height: 12px;
}

/* Вся карточка — ссылка на товар: растягиваем ссылку заголовка на весь блок.
   Иконки избранного/сравнения и кнопка покупки поднимаются над ней слоем, чтобы
   продолжать принимать клики. */
.similar_block .item-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--es-sim-radius);
}

.similar_block .fast_view_block,
.similar_block .footer_button {
	position: relative;
	z-index: 2;
}

/* Иконки «Отложить» и «Сравнить» — столбиком в правом верхнем углу фото.
   Столбик, а не строка: на мобильной peek-карточка узкая, и строка иконок налезала бы
   на стикеры, которые тема кладёт слева сверху.
   Position оставляем абсолютным (как в теме) и только поднимаем слой: раньше я задал
   им position: relative ради кликабельности — иконки вернулись в поток и отодвигали
   фото вниз на 65px, из-за чего сверху зияла пустота. */
.similar_block .like_icons {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: auto;
	margin: 0;
}

.similar_block .like_icons .wish_item_button,
.similar_block .like_icons .compare_item_button {
	width: 32px;
	margin: 0;
}

/* Эллипс на ховере — не артефакт «ripple», а штатный border-radius: 100% темы:
   кнопка растягивалась на всю ширину карточки (222px при высоте 30px), и круг
   вырождался в овал. Фиксируем квадратный бокс — радиус снова даёт круг. */
.similar_block .like_icons .wish_item,
.similar_block .like_icons .compare_item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	background: rgba(255, 255, 255, .92);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--es-sim-line);
	transition: background-color .18s ease, box-shadow .18s ease;
}

.similar_block .like_icons .wish_item:hover,
.similar_block .like_icons .compare_item:hover {
	background: #fff;
	box-shadow: 0 0 0 1px var(--es-accent, #1F7A3B);
}

.similar_block .like_icons .wish_item i,
.similar_block .like_icons .compare_item i {
	margin: 0;
}

/* Стрелки — круглые кнопки по бокам трека, поверх контента (образец DNS).
   Штатный контейнер навигации темы стоит абсолютом над блоком; распускаем его и
   позиционируем сами кнопки (a.flex-prev / a.flex-next — их строит es-carousel.js:133,
   намеренно повторяя классы FlexSlider). */
/* Контейнер навигации не должен занимать место в потоке: пустой ul темы добавлял 52px
   между заголовком и карточками. display: contents убирает его бокс, но НЕ делает его
   контейнером позиционирования — стрелки внутри остаются абсолютными относительно
   .similar_block (position: absolute на этом ul уводил бы их в его нулевой угол). */
.similar_block .slider_navigation.top {
	display: contents !important;
}

/* обёртки навигации тоже не создают боксов — иначе они снова заняли бы место в потоке */
.similar_block .slider_navigation.top > li,
.similar_block .es-carousel__nav,
.similar_block .es-carousel__nav > li {
	position: static !important;
	display: contents;
	margin: 0 !important;
	padding: 0;
	border: 0 !important;
	background: none !important;
	list-style: none;
}

/* Стрелку тема рисует ФОНОВОЙ КАРТИНКОЙ, а на ховере ставит background-image: none и
   серый background-color — отсюда «тёмный квадрат вместо стрелки». Поэтому фон темы
   гасим во всех состояниях, а сам шеврон рисуем сами (::after из двух границ), и все
   состояния — обычное, hover, focus, active — описываем явно. */
body .similar_block .es-carousel__nav a,
body .similar_block .es-carousel__nav a:link,
body .similar_block .es-carousel__nav a:visited,
body .similar_block .es-carousel__nav a:hover,
body .similar_block .es-carousel__nav a:focus,
body .similar_block .es-carousel__nav a:active {
	position: absolute;
	/* по центру КОНТЕЙНЕРА СЛАЙДЕРА (.bottom_slider ниже получает position: relative),
	   а не секции с заголовком: иначе высота заголовка сдвигала кнопки и они выглядели
	   разъехавшимися. Отступы слева и справа зеркальные. */
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-image: none !important;
	background-color: rgba(255, 255, 255, .96) !important;
	box-shadow: 0 0 0 1px var(--es-sim-line), 0 6px 18px rgba(2, 6, 23, .14);
	opacity: 1 !important;
	overflow: visible !important;
	font-size: 0;
	text-indent: 0 !important;
	transition: background-color .2s ease, box-shadow .2s ease;
}

/* контейнер позиционирования для стрелок — сам слайдер, без заголовка секции:
   .slider_navigation у нас display: contents и бокса не создаёт, поэтому ближайшим
   positioned-предком становится .bottom_slider */
.similar_block .bottom_slider {
	position: relative;
}

body .similar_block .es-carousel__nav a.flex-prev {
	left: -18px;
	right: auto;
}

body .similar_block .es-carousel__nav a.flex-next {
	right: -18px;
	left: auto;
}

/* сам шеврон */
body .similar_block .es-carousel__nav a::after {
	content: "" !important;
	display: block;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--es-text, #1f2937);
	border-right: 2px solid var(--es-text, #1f2937);
	border-radius: 1px;
	transition: border-color .2s ease;
}

body .similar_block .es-carousel__nav a.flex-next::after {
	transform: rotate(45deg);
	margin-left: -3px;
}

body .similar_block .es-carousel__nav a.flex-prev::after {
	transform: rotate(-135deg);
	margin-right: -3px;
}

body .similar_block .es-carousel__nav a:hover,
body .similar_block .es-carousel__nav a:focus {
	background-color: var(--es-accent, #1F7A3B) !important;
	box-shadow: 0 0 0 1px var(--es-accent, #1F7A3B), 0 8px 20px rgba(2, 6, 23, .18);
}

body .similar_block .es-carousel__nav a:hover::after,
body .similar_block .es-carousel__nav a:focus::after {
	border-color: #fff;
}


/* тема красит саму обёртку стрелки (.flex-direction-nav li:hover{background:#188b30}) —
   иначе вокруг круглой кнопки появлялся цветной квадрат */
body .similar_block .es-carousel__nav > li,
body .similar_block .es-carousel__nav > li:hover,
body .similar_block .es-carousel__nav > li:first-child:hover {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	color: inherit !important;
}

/* листать некуда — кнопку прячем (es-carousel.js вешает flex-disabled на краях трека) */
body .similar_block .es-carousel__nav a.flex-disabled {
	display: none;
}

@media (max-width: 1199px) {
	.similar_block {
		--es-sim-visible: 2.5;
	}
}

/* Планшеты и телефоны (брейкпоинт темы 991): стрелки скрываем — контейнер уже, и кнопки
   с вылетом -18px наезжали на первую и последнюю карточки. Листание пальцем, как в ленте. */
@media (max-width: 991px) {
	body .similar_block .es-carousel__nav a,
	body .similar_block .slider_navigation .es-carousel__nav a {
		display: none !important;
	}
}

@media (max-width: 767px) {
	/* peek-слайдер: активная карточка по центру, соседние выглядывают краями */
	.similar_block {
		margin: 32px 0;
	}

	/* Поле слева задаёт отступ первой карточки, scroll-padding повторяет его — иначе
	   выравнивание по началу приклеило бы карточку к самому краю экрана. Справа поле
	   меньше ширины карточки, поэтому сосед всегда выглядывает краем. */
	.similar_block .es-carousel .es-carousel__track {
		padding: 16px 15px !important;
		margin: -16px -15px;
		scroll-padding-left: 15px;
	}

	.similar_block .es-carousel .es-carousel__track > li {
		width: 80% !important;
		scroll-snap-align: start;
	}

	body .similar_block .es-carousel__nav a {
		display: none;
	}

	.similar_block > h4 {
		font-size: 19px;
		margin-bottom: 14px;
	}
}

/* Перебиваем конкретное правило темы, которое и красило стрелку в серый квадрат:
   .border.custom_flex .flex-direction-nav li:hover, ... li:hover a
   { background-color: #f6f6f7 !important; overflow: hidden }
   (специфичность 0-4-2 с !important — выше, чем была у наших правил). Селекторы ниже
   специфичнее, и состояние описано и на li, и на самой ссылке. */
body .similar_block .slider_navigation .es-carousel__nav > li:hover,
body .similar_block .slider_navigation .es-carousel__nav > li:hover a,
body .similar_block .slider_navigation .es-carousel__nav > li a:hover,
body .similar_block .slider_navigation .es-carousel__nav > li a:focus {
	background-color: var(--es-accent, #1F7A3B) !important;
	background-image: none !important;
	overflow: visible !important;
}

body .similar_block .slider_navigation .es-carousel__nav > li:hover {
	background-color: transparent !important;
}

body .similar_block .slider_navigation .es-carousel__nav > li:hover a::after,
body .similar_block .slider_navigation .es-carousel__nav > li a:hover::after,
body .similar_block .slider_navigation .es-carousel__nav > li a:focus::after {
	border-color: #fff !important;
}