/* SP Announcement Bar - fixed height at every breakpoint (no layout shift).
   Two fixed rows: scrolling messages (40px) + static disclaimer (26px) = 66px.
   Motion: continuous scroll (owner decision 2026-10-15). The scroll animation
   only runs when JS adds .sp-ab--scrolling; without JS, with reduced motion,
   or before JS runs, the first message sits static and readable. */
.sp-ab {
	height: 66px;
	background: #07282e; /* theme --teal-900 */
	color: #e2f3f4;      /* theme --teal-100: >10:1 on teal-900 */
	font-size: 13.5px;
	line-height: 1.2;
	position: relative;
	z-index: 40; /* below age gate / mini-cart / popups, which are fixed overlays */
	box-sizing: border-box;
}

/* On pages where the bar shows, it replaces the theme's static strip. */
body.sp-ab-on .sp-topbar { display: none; }

.sp-ab__rotator {
	position: relative;
	height: 40px;
}
.sp-ab__viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* fade the stream out before it slides under the pause button */
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 52px), transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 52px), transparent 100%);
}
.sp-ab__track {
	display: flex;
	width: max-content;
	height: 40px;
}
.sp-ab--scrolling .sp-ab__track {
	animation-name: sp-ab-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* duration set by JS from track width (~55px/s) */
}
@keyframes sp-ab-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.sp-ab--paused .sp-ab__track,
.sp-ab:hover .sp-ab__track,
.sp-ab:focus-within .sp-ab__track {
	animation-play-state: paused;
}

.sp-ab__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	height: 40px;
}
.sp-ab__item {
	position: relative;
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: 0 30px;
}
.sp-ab__item::after {
	content: "";
	position: absolute;
	right: -3px;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #7fd3de; /* teal-300 */
	opacity: 0.55;
}

/* Pause button only exists while scrolling is actually running. */
.sp-ab__toggle { display: none; }
.sp-ab--scrolling .sp-ab__toggle {
	position: absolute;
	right: 8px;
	top: 20px; /* centre of the 40px rotator row */
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(127, 211, 222, 0.55); /* teal-300 */
	border-radius: 999px;
	background: #07282e;
	color: #e2f3f4;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sp-ab__toggle:hover { background: rgba(127, 211, 222, 0.16); }
.sp-ab__toggle:focus-visible { outline: 2px solid #7fd3de; outline-offset: 2px; }

/* Glyph: two bars while playing, triangle while paused (pure CSS). */
.sp-ab__glyph { display: block; width: 12px; height: 12px; position: relative; }
.sp-ab__glyph::before,
.sp-ab__glyph::after {
	content: "";
	position: absolute;
	top: 1px;
	width: 4px;
	height: 10px;
	background: currentColor;
}
.sp-ab__glyph::before { left: 1px; }
.sp-ab__glyph::after { right: 1px; }
.sp-ab__toggle[aria-pressed="true"] .sp-ab__glyph::before {
	left: 2px;
	top: 0;
	width: 0;
	height: 0;
	background: transparent;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}
.sp-ab__toggle[aria-pressed="true"] .sp-ab__glyph::after { display: none; }

.sp-ab__static {
	height: 26px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid rgba(226, 243, 244, 0.16);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7fd3de; /* teal-300 on teal-900: ~7:1 */
	white-space: nowrap;
	overflow: hidden;
}

@media (max-width: 430px) {
	.sp-ab { font-size: 12.5px; }
	.sp-ab__static { font-size: 10.5px; }
	.sp-ab__item { padding: 0 22px; }
}
@media (max-width: 340px) {
	.sp-ab { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.sp-ab__track { animation: none !important; }
}

@media print {
	.sp-ab { display: none; }
}