.yantas-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	margin: 1.5rem 0;
	padding: 0 0.25rem;
	box-sizing: border-box;
}

.yantas-carousel__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
}

.yantas-carousel__track {
	display: flex;
	transition: transform 0.45s ease;
	will-change: transform;
}

.yantas-carousel__products {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: 100%;
}

.yantas-carousel__products > li.product {
	flex: 0 0 calc((100% - 4rem) / 5);
	max-width: calc((100% - 4rem) / 5);
	min-width: 0;
	margin: 0 !important;
	box-sizing: border-box;
}

.yantas-carousel__nav {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #e11d48;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
	transition: background 0.2s ease, transform 0.2s ease;
}

.yantas-carousel__nav:hover {
	background: #be123c;
	transform: scale(1.05);
}

.yantas-carousel__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}

.yantas-carousel__empty {
	text-align: center;
	color: #666;
}

@media (max-width: 1200px) {
	.yantas-carousel__products > li.product {
		flex: 0 0 calc((100% - 3rem) / 4);
		max-width: calc((100% - 3rem) / 4);
	}
}

@media (max-width: 992px) {
	.yantas-carousel__products > li.product {
		flex: 0 0 calc((100% - 2rem) / 3);
		max-width: calc((100% - 2rem) / 3);
	}
}

@media (max-width: 768px) {
	.yantas-carousel {
		gap: 0.5rem;
	}

	.yantas-carousel__nav {
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
	}

	.yantas-carousel__products > li.product {
		flex: 0 0 calc((100% - 1rem) / 2);
		max-width: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 480px) {
	.yantas-carousel__products > li.product {
		flex: 0 0 100%;
		max-width: 100%;
	}
}
