.show_catalog_item_text{padding:0 8px;}
.real_price_text, .priceBlack{font-size:16px;}
.item_discount_box{font-size:15px;}
div.price_info_table{margin-top:10px}
.do_with_item .item_action_buy{text-decoration:none;}
.item_badge_constructor{top:180px;left:10px;height:max-content;}
.item_badge_fitting_vto_catalog{left:10px;top:15px;}
.item_badges{left:8px;top:230px;bottom:auto;}

.product_card:hover .item_badge_constructor{
	border:0px solid;
	padding:0px 6px 0 30px;
	width:130px;
	background-color:#fffb;
}
.product_card:hover .item_badge_fitting_vto_catalog{
	font-size:15px;
	width:130px;
	min-height:26px;
	border:0px solid;
	padding:0px 0 0 25px;
	background-color:#fff;
}
.products_carousel_container{
	position:relative;
	margin:0px;
	padding-bottom:40px;
	overflow:hidden;
}

.products_carousel_track{
	display:flex;
	gap:16px;
	transition:transform 0.4s ease;
	margin-top:20px;
}
.products_carousel_track.no_paging{
	justify-content:center;
}
.product_slide{
	flex:0 0 auto;
	width:360px;
	/* на узких экранах карточка ужимается по месту, но не уже 320px */
	max-width:100%;
	min-width:320px;
}
.product_card{
	background-color:#f9f9f9;
	overflow:hidden;
	border-radius:8px;
	padding:1px
}
.product_image_right{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	/* без aspect-ratio и overflow: карточка наполнена как каталожная и в квадрат не влезает,
	   низ (цены, купить, сравнение) обрезался */
	background:#f9f9f9;
	border-radius:6px;
}

/* расцветки: в каталоге показ висит на .show_catalog_item, у карточки в блоге другой класс —
   повторяем то же поведение, счётчик цветов сменяется кружочками при наведении */
/* в статьях ссылки подчёркнуты по умолчанию — название товара подчёркиваем только под курсором */
.product_card .show_catalog_title{
	text-decoration:none;
}
.product_card .show_catalog_title:hover{
	text-decoration:underline;
}

.product_card .group_items{
	position:relative;
	left:0;
	width:100%;
	height:40px;
	/* подъём как в каталоге */
	bottom:10px;
	margin-top:-10px;
}
.product_card .group_items_empty{
	height:30px;
}
.product_card .group_item_image{
	width:36px;
	height:36px;
	border:1.5px solid #A7A5A666;
	border-radius:50%;
}
.product_card .group_items .active{
	border:1.5px solid black;
}
.product_card:hover .group_items_count{
	display:none;
}
.product_card:hover .group_items_inner{
	display:flex;
	justify-content:center;
	gap:6px;
}
/* корзина и сравнение в каталоге проявляются по наведению на карточку */
.product_card:hover .do_with_item{
	visibility:visible;
}
.product_image_container{
	position:relative;
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
}
.wishlist_btn_product{
	position:absolute;
	top:15px;
	right:20px;
	width:40px;
	height:40px;
	border-radius:50%;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:3;
	box-shadow:0 2px 8px rgba(0,0,0,0.1);
	border:none;
	padding:0;
}
.wishlist_btn_product span{
	display:flex;
}
.wishlist_btn_product svg{
	width:20px;
	height:20px;
	transition:fill .2s, stroke .2s;
}
.wishlist_btn_product:hover svg path,
.wishlist_btn_product .saved svg path{
	fill:#a86b80;
	stroke:#a86b80;
}
.product_image_right .product_image{
	max-width:100%;
	height:200px !important;
	object-fit:contain;
	display:block;
	margin:0;
	pointer-events:none;
}

.product_image_right .photo_itself {
	width:calc(100% - 60px);
	background:white;
	border:0px solid red;
	margin-top:25px;
	padding:0 5px;
	border-radius:5px;
}

.product_info{
	text-align:center;
	width:100%;
	display:flex;
	flex-direction:column;
}
.product_name{
	font-size:15px;
	font-weight:400;
	margin:12px 0 6px 0;
	font-family:Lato,sans-serif;
	color:#231f20;
	text-decoration:none;
}
.product_price{
	font-size:13px;
	color:rgba(35,31,32,0.4);
	margin:0 0 12px 0;
	font-family:Lato,sans-serif;
	text-decoration:none;
}
.product_actions{
	display:flex;
	justify-content:center;
	gap:20px;
	flex-wrap:wrap;
	padding-bottom:12px;
}
.product_action_link{
	font-size:11px;
	font-weight:700;
	color:#231f20;
	text-decoration:none;
	text-transform:uppercase;
	font-family:Lato,sans-serif;
	transition:all 0.3s ease;
	cursor:pointer;
	text-underline-offset:3px;
}
.product_action_link:hover{
	text-decoration:underline;
}
.products_carousel_indicators{
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	gap:10px;
}
.product_indicator{
	width:10px;
	height:10px;
	border-radius:50%;
	background:none;
	border:1px solid #231f20;
	cursor:pointer;
	padding:0;
}
.product_indicator:hover{
	background:#5b5b5b;
}
.product_indicator.active{
	background:#231f20;
}
.products_carousel_nav{
	position:absolute;
	top:45%;
	transform:translateY(-50%);
	width:32px;
	height:32px;
	/* у кнопки «вперёд» есть padding-left, и без border-box она шире заявленных 32px:
	   круг превращается в эллипс, а кольцо-таймер вокруг неё съезжает по горизонтали */
	box-sizing:border-box;
	border-radius:50%;
	background:#fff;
	border:none;
	box-shadow:0 2px 6px rgba(0,0,0,0.15);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	z-index:4;
	padding:0;
}
.products_carousel_nav svg{
	width:9px;
	height:16px;
}
.products_carousel_nav_prev{
	left:8px;
}
.products_carousel_nav_next{
	right:8px;
	padding-left:4px;
}

.product_slide{
	position:relative;
}

/* бегущий бордер вокруг активной карточки — прежний индикатор автопрокрутки.
   заменён на таблетку точки + кольцо у стрелки + подъём соседа (блок ниже),
   класс has_progress js по-прежнему ставит: чтобы вернуть бордер, достаточно
   раскомментировать
.product_slide.has_progress::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	border:2px solid #dedede;
	border-radius:6px;
	box-sizing:border-box;
	border-top-color:transparent;
	border-left-color:transparent;
	border-right-color:transparent;
	filter:drop-shadow(0 0 6px rgba(0,0,0,0.35));
	animation:card-border-progress var(--items-carousel-autoplay,5s) linear forwards;
}

@keyframes card-border-progress{
	0%{
		border-bottom-color:#dedede;
		border-left-color:transparent;
		border-top-color:transparent;
		border-right-color:transparent;
	}
	25%{
		border-bottom-color:#dedede;
		border-left-color:#dedede;
		border-top-color:transparent;
		border-right-color:transparent;
	}
	50%{
		border-bottom-color:transparent;
		border-left-color:#dedede;
		border-top-color:#dedede;
		border-right-color:transparent;
  	}
	75%{
		border-bottom-color:transparent;
		border-left-color:transparent;
		border-top-color:#dedede;
		border-right-color:#dedede;
	}
	100%{
		border-bottom-color:#dedede;
		border-left-color:#dedede;
		border-top-color:#dedede;
		border-right-color:#dedede;
	}
}
*/

/* ---- индикатор автопрокрутки: таблетка точки + кольцо + подъём соседа ------ */
/* три индикатора работают как один: таблетка активной точки, кольцо у стрелки
   «вперёд» и подъём следующей карточки идут от одного таймера, в одном цвете
   и с одной длительностью. заливка и кольцо стартуют вместе, карточка отвечает
   в последние 15% цикла — читается как одно движение, а не три разных.
   длительность цикла приходит из js в переменной --items-carousel-autoplay.
   пока автопрокрутка выключена — на контейнере класс autoplay_off и индикатор
   не показывается: обратного отсчёта больше нет. ручная смена слайда отсчёт
   не убивает, цикл начинается заново (см. user_action в show_items_to_h1.js) */
@keyframes carousel_progress_grow{
	from{
		transform:scaleX(0);
	}
	to{
		transform:scaleX(1);
	}
}
/* ячейка каждой точки фиксирована: кружок и таблетка живут внутри неё, поэтому
   ряд не «дышит» — ни при смене слайда, ни когда отсчёт останавливается */
.products_carousel_indicators{
	gap:6px;
	align-items:center;
}
.product_indicator{
	position:relative;
	width:30px;
	height:8px;
	border:none;
	border-radius:4px;
	background:none;
	overflow:hidden;
}
.product_indicator:hover,
.product_indicator.active{
	background:none;
}
.product_indicator::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	width:8px;
	height:8px;
	margin-left:-4px;
	border-radius:4px;
	background:#d4d4d4;
	transition-property:left,width,margin-left,background;
	transition-duration:350ms;
	transition-timing-function:ease-out;
}
.product_indicator:hover::before{
	background:#231f20;
}
.product_indicator.active::before{
	left:0;
	width:100%;
	margin-left:0;
	background:#e4e4e4;
}
.product_indicator i{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:100%;
	border-radius:4px;
	background:#231f20;
	transform:scaleX(0);
	transform-origin:left center;
}
.products_carousel_container:not(.autoplay_off) .product_indicator.active.is_running i{
	animation:carousel_progress_grow var(--items-carousel-autoplay,5s) linear forwards;
}
/* автопрокрутка кончилась только вместе с каруселью: таблетка сжимается обратно
   в кружок, кольцо и подсказка убираются, ширина ряда не меняется */
.products_carousel_container.autoplay_off .product_indicator.active::before{
	left:50%;
	width:8px;
	margin-left:-4px;
	background:#231f20;
}
/* кольцо рисует сама кнопка «вперёд», отдельного svg-узла больше нет: ::after
   повторяет кнопку один в один (inset:0), поэтому обводка идёт по внутренней
   кромке — зазора между кольцом и границей нет, наружу кольцо не выходит,
   размер кнопки на брейкпоинте не важен. сектор набирается conic-gradient от
   угла --carousel_ring, маска вырезает середину и оставляет кольцо толщиной 2px.
   угол — анимируемое свойство только при поддержке @property
   (firefox до 128 покажет кольцо статичным серым) */
@property --carousel_ring{
	syntax:'<angle>';
	inherits:false;
	initial-value:0deg;
}
.products_carousel_nav_next::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:50%;
	/* наружную кромку режет бокс (border-radius), её браузер сглаживает сам.
	   внутреннюю дырку вырезаем радиальной маской, а не маской по content-box:
	   webkit к content-box-маске border-radius не применяет и вырезает квадрат —
	   кольцо получается срезанным сверху и снизу и толще на диагоналях.
	   толщина задана в пикселях от радиуса, поэтому одинакова по всему периметру
	   и на всех брейкпоинтах. переход стопов растянут на 0.6px, иначе внутренний
	   край идёт лесенкой. стык цветов в conic размазываем на 1.2deg — иначе
	   лесенка на бегущем конце линии */
	background:conic-gradient(#444 calc(var(--carousel_ring,0deg) - 1.2deg),#ffffff var(--carousel_ring,0deg));
	-webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 2px),#888 calc(100% - 1px));
	mask:radial-gradient(circle closest-side,transparent calc(100% - 2px),#888 calc(100% - 1px));
	pointer-events:none;
}
.products_carousel_container:not(.autoplay_off) .products_carousel_nav_next.is_running::after{
	animation:carousel_ring_progress var(--items-carousel-autoplay,5s) linear forwards;
}
.products_carousel_container.autoplay_off .products_carousel_nav_next::after{
	display:none;
}
@keyframes carousel_ring_progress{
	from{
		--carousel_ring:0deg;
	}
	to{
		--carousel_ring:360deg;
	}
}
.products_carousel_container:not(.autoplay_off) .product_slide.is_next_up .product_card{
	animation:carousel_combo_next_up var(--items-carousel-autoplay,5s) ease-in-out forwards;
}
@keyframes carousel_combo_next_up{
	0%,85%{
		transform:translateY(0);
		box-shadow:0 0 0 rgba(0,0,0,0);
	}
	93%{
		transform:translateY(-6px);
		box-shadow:0 10px 18px rgba(0,0,0,0.12);
	}
	100%{
		transform:translateY(0);
		box-shadow:0 0 0 rgba(0,0,0,0);
	}
}

/* ---- направление смены активной точки ------------------------------------- */
/* индекс товара не хранит направление: с последнего товара на первый подсветка
   уезжает справа налево, хотя лента едет вправо. поэтому активная точка
   «въезжает» с той стороны, откуда пришла лента — вперёд слева, назад справа.
   класс dir_prev ставит js на ряд точек */
.products_carousel_indicators .product_indicator.active{
	animation:indicator_enter_next 280ms ease-out;
}
.products_carousel_indicators.dir_prev .product_indicator.active{
	animation-name:indicator_enter_prev;
}
@keyframes indicator_enter_next{
	from{
		transform:translateX(-10px);
		opacity:0.2;
	}
	to{
		transform:translateX(0);
		opacity:1;
	}
}
@keyframes indicator_enter_prev{
	from{
		transform:translateX(10px);
		opacity:0.2;
	}
	to{
		transform:translateX(0);
		opacity:1;
	}
}
@media(prefers-reduced-motion:reduce){
	.products_carousel_indicators .product_indicator.active{
		animation:none;
	}
}

@media(max-width:745px){
	.products_carousel_track{gap:0;}
}

@media(max-width:550px){
	button.products_carousel_nav{display:none;}	
}
/* ---- стрелки на мобильных и планшетах ------------------------------------- */
/* кольцо-таймер сидит вокруг кнопки «вперёд», поэтому на узких экранах стрелки
   остаются: правило display:none выше перекрываем более точным селектором.
   свайп остаётся, а кнопка работает и подсказкой направления, и промахнуться
   по ней нельзя. размер кольца на брейкпоинтах не задаём: ::after тянется по
   самой кнопке, обводка везде лежит по её внутренней кромке */
@media(max-width:768px){
	.products_carousel_container .products_carousel_nav{
		display:flex;
		width:40px;
		height:40px;
	}
	.products_carousel_container .products_carousel_nav_prev{
		left:6px;
	}
	.products_carousel_container .products_carousel_nav_next{
		right:6px;
	}
}

/* точки чуть крупнее под палец, таблетка короче кольца, чтобы ряд точек
   не упирался в стрелку. подъём следующей карточки здесь не виден —
   в ряд помещается один товар */
@media(max-width:550px){
	.products_carousel_indicators{
		gap:8px;
	}
	.product_indicator{
		width:34px;
		height:9px;
		border-radius:5px;
	}
	.product_indicator::before{
		width:9px;
		height:9px;
		margin-left:-4.5px;
		border-radius:5px;
	}
	.products_carousel_container.autoplay_off .product_indicator.active::before{
		width:9px;
		margin-left:-4.5px;
	}
}

/* на телефоне карточка занимает весь экран, и кнопка накрывает собой товар:
   держим 32px — меньше было неудобно попадать пальцем. свайп остаётся основным
   жестом, стрелка работает подсказкой направления и запасным способом листать */
@media(max-width:480px){
	.products_carousel_container .products_carousel_nav{
		width:32px;
		height:32px;
	}
	.products_carousel_container .products_carousel_nav svg{
		width:6px;
		height:11px;
	}
	.products_carousel_container .products_carousel_nav_prev{
		left:4px;
	}
	.products_carousel_container .products_carousel_nav_next{
		right:4px;
		padding-left:2px;
	}
}