/* AminH News Ticker. Colours come from the site: override --ant-* in Customizer CSS. */
.ant {
	--ant-bg: transparent;
	--ant-fg: inherit;
	--ant-label-bg: currentColor;
	--ant-label-fg: #fff;
	--ant-dot: currentColor;
	--ant-radius: 999px;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-width: 0;
	background: var(--ant-bg);
	color: var(--ant-fg);
	font-size: 13px;
	line-height: 1.6;
}
.ant-label {
	flex: none;
	padding: 3px 12px;
	border-radius: var(--ant-radius);
	background: var(--ant-label-bg);
	color: var(--ant-label-fg);
	font-weight: 700;
	font-size: 12px;
	white-space: nowrap;
}
.ant-view {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	direction: ltr;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.ant-track {
	display: flex;
	width: max-content;
	animation: ant-run var(--ant-speed, 40s) linear infinite;
}
.ant:hover .ant-track,
.ant:focus-within .ant-track {
	animation-play-state: paused;
}
.ant-list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	direction: rtl;
}
/* LTR sites: list reads left to right (titles ending in ? or . stay at the end) */
html:not([dir="rtl"]) .ant-list {
	direction: ltr;
}
.ant-list li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.ant-list li::after {
	content: "";
	width: 5px;
	height: 5px;
	margin: 0 22px;
	border-radius: 50%;
	background: var(--ant-dot);
	opacity: .7;
}
.ant-list a {
	color: inherit;
	text-decoration: none;
}
.ant-list a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* RTL reading: the strip moves to the right, the next headline enters from the left */
@keyframes ant-run {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.ant-track { animation: none; }
	.ant-view { overflow-x: auto; }
}
/* WoodMart header columns shrink-wrap their content: on mobile the ticker got 0px and showed only the label */
.whb-column:has(.ant),
.wd-header-text:has(.ant) {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}
.wd-header-text:has(.ant) { width: 100%; }