/*
 * Product Marquee (Elementor widget) – layout and animation.
 *
 * Card look (image, title, price, labels) comes from the site's shop styles;
 * this file only lays the cards out in endless sideways-scrolling rows.
 *
 * Custom properties (set by the widget's style controls):
 *   --kj-card-w      card width
 *   --kj-gap         gap between cards
 *   --kj-row-gap     gap between rows
 *   --kj-speed       seconds per full loop
 *   --kj-row-offset  seconds each row is shifted along the loop
 */

.kj-marquee {
	--kj-card-w: 220px;
	--kj-gap: 24px;
	--kj-row-gap: 24px;
	--kj-speed: 40s;
	--kj-row-offset: 7s;

	display: flex;
	flex-direction: column;
	gap: var(--kj-row-gap);
	width: 100%;
	overflow: hidden;
}

/* A row clips its track. Forced LTR so the duplicated group always sits to
   the right of the first one, whatever the page direction. */
.kj-marquee__row {
	direction: ltr;
	overflow: hidden;
	width: 100%;
}

.kj-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: kj-marquee-scroll var(--kj-speed) linear infinite;
	animation-delay: calc(var(--kj-row-index, 0) * var(--kj-row-offset) * -1);
}

.kj-marquee__row--right .kj-marquee__track {
	animation-direction: reverse;
}

/* Each group ends with one gap so two groups measure exactly 2× and
   translateX(-50%) lands on an identical frame. */
.kj-marquee .kj-marquee__group.products,
.kj-marquee .kj-marquee__group.products[class*="columns-"] {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--kj-gap);
	padding: 0 var(--kj-gap) 0 0;
	margin: 0;
	list-style: none;
	width: max-content;
}

.kj-marquee .kj-marquee__group.products::before,
.kj-marquee .kj-marquee__group.products::after {
	content: none;
}

.kj-marquee .kj-marquee__group.products li.product {
	direction: rtl;
	flex: 0 0 var(--kj-card-w);
	width: var(--kj-card-w) !important;
	max-width: none;
	margin: 0 !important;
	float: none !important;
	clear: none;
}

.kj-marquee .kj-marquee__group.products li.product > a,
.kj-marquee .kj-marquee__group.products li.product .product_item_wrap {
	display: block;
}

/* Add-to-cart never belongs in the hero ticker. */
.kj-marquee .kj-marquee__group.products li.product .add_to_cart_button,
.kj-marquee .kj-marquee__group.products li.product .button {
	display: none !important;
}

.kj-marquee--no-labels .product_lables,
.kj-marquee--no-labels .onsale {
	display: none !important;
}

.kj-marquee--no-price .price {
	display: none !important;
}

.kj-marquee__notice {
	padding: 16px;
	border: 1px dashed #c33;
	border-radius: 8px;
	color: #c33;
	text-align: center;
}

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

@media (prefers-reduced-motion: reduce) {
	.kj-marquee__track {
		animation: none;
	}
}