/**
 * Stockist Ticker — front-end styles.
 *
 * Deliberately minimal: colours, fonts and spacing inherit from the active
 * theme. Sizing uses em units so it scales with the surrounding typography.
 * Overrides come in through CSS custom properties set inline by the shortcode.
 */

.st-ticker {
	--st-gap: 2.5em;          /* space between stockists */
	--st-pad: 0.75em;         /* vertical padding */
	/* --st-bg and --st-color are only set when the user overrides them,
	   otherwise the ticker stays transparent and inherits the theme. */

	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	padding-block: var(--st-pad);
	background: var(--st-bg, transparent);
	color: var(--st-color, inherit);
	font: inherit;
	line-height: inherit;
}

/* Optional soft fade at the left/right edges. */
.st-ticker.st-fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 6%,
		#000 94%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 6%,
		#000 94%,
		transparent 100%
	);
}

.st-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--st-gap);
	width: max-content;
	will-change: transform;
	/* Duration and keyframe name are supplied by JS once widths are measured. */
	animation-duration: var(--st-duration, 30s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-name: none;
}

.st-item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	white-space: nowrap;
	font: inherit;
	line-height: inherit;
}

/* Featured image used as a logo. Height is set via a custom property and the
   width follows the aspect ratio. The .st-ticker prefix and explicit values
   override common theme rules like `img { max-width: 100%; height: auto }`. */
.st-ticker .st-logo {
	display: block;
	height: var(--st-logo-height, 2em);
	width: auto;
	max-width: none;
	object-fit: contain;
	vertical-align: middle;
}

.st-item a {
	color: inherit;
	text-decoration: none;
}

.st-item a:hover,
.st-item a:focus {
	text-decoration: underline;
}

/* Visible keyboard focus without relying on the theme. */
.st-item a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.st-sep {
	flex: 0 0 auto;
	opacity: 0.45;
	user-select: none;
}

/* Pause when the pointer is over the ticker, or when a link inside is
   keyboard-focused. Only applies when the option is enabled. */
.st-ticker.st-pause-hover:hover .st-track,
.st-ticker.st-pause-hover:focus-within .st-track {
	animation-play-state: paused;
}

/* Respect users who prefer less motion: stop scrolling and let the row be
   read/scrolled manually instead. */
@media (prefers-reduced-motion: reduce) {
	.st-track {
		animation: none !important;
		transform: none !important;
	}

	.st-ticker {
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.st-ticker.st-fade {
		-webkit-mask-image: none;
		mask-image: none;
	}
}