/* ============ INFO / PROMO BAR ============
   The admin-managed strip under the header (Promobars in the back office).

   Background and text colour are set per message as inline styles, so nothing
   here declares a colour - only shape and typography. The strip is intentionally
   NOT sticky: it sits after <header> in normal flow and scrolls away with the
   page, leaving the header's measured height (--hd-h) and the listing bar's
   sticky offset untouched. */
.promo-bar {
	display: block;
	width: 100%;
	padding: 9px 16px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.3px;
	text-align: center;
}
/* The strip must never grow with the message: however much text is saved, the bar
   stays a few lines tall. The overflow scrolls rather than being clipped - a long
   message stays readable instead of losing its tail silently. */
.promo-bar-text {
	display: block;
	max-width: 100%;
	max-height: 5.4em; /* 4 x line-height */
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Both colours of this bar are picked by the admin, so no fixed thumb colour
	   can be readable against all of them. currentColor sidesteps the problem
	   entirely: the thumb reuses the message's own text colour, which the admin
	   already chose to be legible on that background. */
	scrollbar-width: thin;
	scrollbar-color: currentColor transparent;
}
/* Same colour, for engines still on the -webkit- pseudo-elements. */
.promo-bar-text::-webkit-scrollbar {
	width: 6px;
}
.promo-bar-text::-webkit-scrollbar-track {
	background: transparent;
}
.promo-bar-text::-webkit-scrollbar-thumb {
	background-color: currentColor;
	border-radius: 3px;
}
/* The message is rich text from the admin editor and is shown the way it was
   written there - bold stays bold, bullets stay bullets. Only the outer spacing
   is reset, so a paragraph or list adds no margin the strip did not ask for. */
.promo-bar p {
	margin: 0;
}
.promo-bar ul,
.promo-bar ol {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-position: inside;
	text-align: left;
}
.promo-bar li {
	display: list-item;
	margin: 0;
}
.promo-bar a {
	color: inherit;
	text-decoration: underline;
}
/* only the linked variant reacts to the pointer */
.promo-bar-link {
	cursor: pointer;
}
.promo-bar-link:hover .promo-bar-text,
.promo-bar-link:focus .promo-bar-text {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.promo-bar {
		padding: 8px 12px;
		font-size: 12px;
		letter-spacing: 0.2px;
	}
	/* narrower screen wraps more, so allow one extra line before clipping */
	.promo-bar-text {
		max-height: 6.75em; /* 5 x line-height */
	}
}