/**
 * Cuvys Marquee — WoodMart-style CSS-only infinite scroll.
 *
 * @package Cuvys_Essential_Commerce
 */

.cuvys-ec-marquee {
	--cuvys-ec-marquee-speed: 20s;
	--cuvys-ec-marquee-item-gap: 40px;
	--cuvys-ec-marquee-icon-gap: 16px;
	--cuvys-ec-marquee-icon-size: 14px;
	width: 100%;
	max-width: 100%;
	min-height: 1.5em;
	overflow: hidden;
	color: var(--cuvys-ec-marquee-text-color, currentColor);
}

.cuvys-ec-marquee__viewport {
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

.cuvys-ec-marquee__track {
	display: flex;
	width: max-content;
	min-height: 1.5em;
	align-items: center;
	animation: cuvys-ec-marquee-scroll var(--cuvys-ec-marquee-speed, 20s) linear infinite;
	will-change: transform;
}

.cuvys-ec-marquee__group {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--cuvys-ec-marquee-item-gap, 40px);
	padding-right: var(--cuvys-ec-marquee-item-gap, 40px);
	white-space: nowrap;
}

.cuvys-ec-marquee__item {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--cuvys-ec-marquee-icon-gap, 16px);
	pointer-events: auto;
	cursor: default;
}

.cuvys-ec-marquee__link {
	display: inline-flex;
	align-items: center;
	color: var(--cuvys-ec-marquee-text-color, currentColor);
	text-decoration: none;
	transition: color 0.2s ease;
	pointer-events: auto;
	cursor: pointer;
}

html body .elementor-widget-cuvys-essential-commerce-marquee .cuvys-ec-marquee__text,
html body .elementor-element.elementor-widget-cuvys-essential-commerce-marquee .cuvys-ec-marquee__text,
.cuvys-ec-marquee__text {
	display: inline-block;
	font-size: clamp(0.875rem, 2.5vw, 1rem);
	line-height: 1.4;
	white-space: nowrap;
	color: var(--cuvys-ec-marquee-text-color, currentColor);
	transition: color 0.2s ease;
	pointer-events: auto;
}

.cuvys-ec-marquee__item:hover .cuvys-ec-marquee__text,
.cuvys-ec-marquee__link:hover .cuvys-ec-marquee__text,
.cuvys-ec-marquee__text:hover {
	color: var(--cuvys-ec-marquee-text-hover, var(--cuvys-ec-marquee-text-color, currentColor));
}

.cuvys-ec-marquee__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--cuvys-ec-marquee-icon-size, 14px);
	height: var(--cuvys-ec-marquee-icon-size, 14px);
	color: var(--cuvys-ec-marquee-icon-color, currentColor);
}

.cuvys-ec-marquee__icon i {
	color: inherit !important;
}

.cuvys-ec-marquee__icon svg {
	width: var(--cuvys-ec-marquee-icon-size, 14px);
	height: var(--cuvys-ec-marquee-icon-size, 14px);
	fill: currentColor;
	color: inherit;
}

.cuvys-ec-marquee__item:hover .cuvys-ec-marquee__icon:not(.cuvys-ec-marquee__icon--image) {
	color: var(--cuvys-ec-marquee-icon-hover, var(--cuvys-ec-marquee-icon-color, currentColor));
}

.cuvys-ec-marquee__icon--image {
	width: var(--cuvys-ec-marquee-icon-size, 14px);
	height: var(--cuvys-ec-marquee-icon-size, 14px);
}

.cuvys-ec-marquee__image {
	display: block;
	width: var(--cuvys-ec-marquee-icon-size, 14px);
	height: var(--cuvys-ec-marquee-icon-size, 14px);
	max-width: var(--cuvys-ec-marquee-icon-size, 14px);
	max-height: var(--cuvys-ec-marquee-icon-size, 14px);
	object-fit: contain;
	object-position: center;
}

.cuvys-ec-marquee--direction-ltr .cuvys-ec-marquee__track {
	animation-direction: reverse;
}

@keyframes cuvys-ec-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (hover: hover) and (pointer: fine) {
	.cuvys-ec-marquee--pause-hover:hover .cuvys-ec-marquee__track {
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cuvys-ec-marquee__track {
		animation: none;
		transform: none;
		flex-wrap: wrap;
		width: 100%;
		max-width: 100%;
	}

	.cuvys-ec-marquee__group[aria-hidden="true"] {
		display: none;
	}

	.cuvys-ec-marquee__group {
		flex-wrap: wrap;
		white-space: normal;
		padding-right: 0;
		gap: 12px 20px;
	}

	.cuvys-ec-marquee__text {
		white-space: normal;
	}
}

@media (max-width: 1024px) {
	.cuvys-ec-marquee {
		--cuvys-ec-marquee-item-gap: 32px;
		--cuvys-ec-marquee-icon-gap: 12px;
	}
}

@media (max-width: 767px) {
	.cuvys-ec-marquee {
		--cuvys-ec-marquee-item-gap: 24px;
		--cuvys-ec-marquee-icon-gap: 10px;
	}

	.cuvys-ec-marquee__text {
		font-size: clamp(0.8125rem, 3.5vw, 0.9375rem);
	}
}

@media (max-width: 479px) {
	.cuvys-ec-marquee {
		--cuvys-ec-marquee-item-gap: 18px;
	}
}