/* Runline – the bar on the site. Colours and sizes come from CSS variables set on each bar. */
.runline {
	--rl-bg: #111827;
	--rl-color: #fff;
	--rl-link: inherit;
	--rl-link-hover: inherit;
	--rl-label-bg: #e11d48;
	--rl-label-color: #fff;
	--rl-font: inherit;
	--rl-fs: 15px;
	--rl-fs-m: 14px;
	--rl-weight: 500;
	--rl-h: 40px;
	--rl-gap: 40px;
	--rl-dur: 30s;
	--rl-shift: -50%;
	position: relative;
	z-index: 9990;
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	height: var(--rl-h);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--rl-bg-image, var(--rl-bg));
	border: var(--rl-border, 0);
	color: var(--rl-color);
	font-family: var(--rl-font);
	font-size: var(--rl-fs);
	font-weight: var(--rl-weight);
	line-height: 1.2;
	text-align: left;
	border-radius: var(--rl-radius, 0);
	/* Lets the bar adapt to the width of its container (a column, a sidebar), not only to the screen. */
	container-type: inline-size;
}

/* Limited width: centred (or left / right) inside its place. */
.runline--boxed {
	max-width: var(--rl-max, 1200px);
	margin-right: auto;
	margin-left: auto;
}

.runline--boxed.runline--align-left {
	margin-left: 0;
}

.runline--boxed.runline--align-right {
	margin-right: 0;
}

.runline *,
.runline *::before,
.runline *::after {
	box-sizing: border-box;
}

.runline[hidden],
.runline-spacer[hidden] {
	display: none !important;
}

.runline--upper {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.runline__label {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0 16px;
	background: var(--rl-label-bg);
	color: var(--rl-label-color);
	font-weight: 700;
	white-space: nowrap;
}

.runline__viewport {
	display: flex;
	/* The moving part takes the space left by the fixed parts (label, timer, button, shipping), at least 30%. */
	flex: 1 1 0;
	align-items: center;
	min-width: 30%;
	overflow: hidden;
}

/* Soft edges: the moving text fades out before the fixed parts next to it (label, timer, shipping on the start side;
   timer, coupon, form, button, close on the end side). Logical sides, so it mirrors itself on right-to-left sites. */
.runline__label ~ .runline__viewport,
.runline__countdown ~ .runline__viewport,
.runline__shipping ~ .runline__viewport {
	--rl-fade-s: 24px;
	margin-inline-start: 6px;
}

.runline__viewport:has(~ .runline__countdown, ~ .runline__coupon, ~ .runline__signup, ~ .runline__button, ~ .runline__close) {
	--rl-fade-e: 24px;
	margin-inline-end: 6px;
}

.runline__viewport {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--rl-fade-s, 0px), #000 calc(100% - var(--rl-fade-e, 0px)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--rl-fade-s, 0px), #000 calc(100% - var(--rl-fade-e, 0px)), transparent 100%);
}

.runline:dir(rtl) .runline__viewport {
	-webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--rl-fade-s, 0px), #000 calc(100% - var(--rl-fade-e, 0px)), transparent 100%);
	mask-image: linear-gradient(to left, transparent 0, #000 var(--rl-fade-s, 0px), #000 calc(100% - var(--rl-fade-e, 0px)), transparent 100%);
}

.runline__track {
	display: flex;
	flex-shrink: 0;
	width: max-content;
	direction: ltr;
	animation: runline-move var(--rl-dur) linear infinite;
	will-change: transform;
}

.runline--right .runline__track {
	animation-direction: reverse;
}

.runline--pause-hover:hover .runline__track,
.runline:focus-within .runline__track,
.runline.is-paused .runline__track {
	animation-play-state: paused;
}

.runline .runline__group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.runline .runline__item,
.runline .runline__sep {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	margin: 0;
	padding: 0 calc(var(--rl-gap) / 2);
	list-style: none;
	white-space: nowrap;
	unicode-bidi: plaintext;
}

.runline .runline__item::before,
.runline .runline__sep::before {
	content: none;
}

.runline .runline__sep {
	opacity: 0.6;
}

.runline__icon {
	margin-right: 0.45em;
	font-style: normal;
}

.runline a {
	color: var(--rl-link);
	text-decoration: none;
	box-shadow: none;
}

.runline a:hover,
.runline a:focus-visible {
	color: var(--rl-link-hover);
	text-decoration: underline;
}

.runline a:focus-visible,
.runline__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.runline .runline__close {
	all: unset;
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--rl-h);
	max-width: 44px;
	background: transparent;
	color: var(--rl-color);
	font-family: Arial, sans-serif;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
}

.runline .runline__close:hover {
	opacity: 1;
}

/* Countdown: fixed next to the moving text, or inside a text ({countdown}). Digits of equal width, so the
   moving strip does not shake every second. */
.runline__countdown {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
	gap: 0.35em;
	align-items: center;
	padding: 0 16px;
	background: var(--rl-cd-bg, #facc15);
	color: var(--rl-cd-color, #111827);
	font-weight: 700;
	white-space: nowrap;
}

.runline__cd {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Narrow places (a column, a sidebar, a phone): less padding, no countdown prefix. */
@container (max-width: 480px) {
	.runline__label,
	.runline__countdown {
		padding: 0 10px;
	}

	.runline__cd-prefix {
		display: none;
	}
}

/* Images and logos in messages. */
.runline__img {
	display: inline-block;
	flex-shrink: 0;
	width: auto;
	max-width: none;
	height: var(--rl-img-h, 28px);
	margin: 0 0.5em 0 0;
	vertical-align: middle;
	object-fit: contain;
	/* Centred on the line of text */
	position: relative;
	top: -0.08em;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Text stays inline: spaces around {coupon}, {countdown}, <strong> … are kept. */
.runline__text {
	display: inline;
}

.runline__author {
	margin-left: 0.6em;
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.8;
}

/* Cards: reviews, logos with captions — a box per message, text may wrap; a round picture on the left. */
.runline--cards .runline__item {
	align-items: center;
	padding-top: 6px;
	padding-bottom: 6px;
}

.runline--cards .runline__item > .runline__text,
.runline--cards .runline__body {
	display: block;
	max-width: 380px;
	max-height: calc(var(--rl-h) - 12px);
	overflow: hidden;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.14);
	white-space: normal;
}

.runline--cards .runline__text {
	display: block;
	line-height: 1.35;
	white-space: normal;
}

.runline--cards .runline__img {
	top: 0;
	float: left;
	width: var(--rl-img-h, 48px);
	height: var(--rl-img-h, 48px);
	margin: 0 12px 0 0;
	border-radius: 50%;
	object-fit: cover;
}

.runline--cards .runline__author {
	display: block;
	margin: 4px 0 0;
}

.runline--cards .runline__body:has(.runline__img) .runline__author {
	padding-left: calc(var(--rl-img-h, 48px) + 12px);
}

/* Button, coupon, free shipping: fixed next to the moving text. */
.runline .runline__button,
.runline .runline__copy {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: 0 14px;
	height: calc(var(--rl-h) - 12px);
	min-height: 24px;
	border-radius: var(--rl-btn-radius, 4px);
	background: var(--rl-btn-bg, #fff);
	color: var(--rl-btn-color, #111827);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
}

.runline .runline__button {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	align-self: center;
	margin: 0 10px;
}

.runline .runline__button:hover,
.runline .runline__copy:hover {
	filter: brightness(0.92);
}

.runline .runline__button:focus-visible,
.runline .runline__copy:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.runline__coupon {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
	gap: 0.4em;
	align-items: center;
	padding: 0 10px;
	background: transparent;
	white-space: nowrap;
}

.runline__cp-code {
	padding: 2px 8px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.runline .runline__copy {
	height: auto;
	padding: 3px 10px;
	border-radius: 4px;
	background: var(--rl-cp-bg, #fff);
	color: var(--rl-cp-color, #111827);
	font-size: 0.85em;
}

.runline .runline__copy.is-copied {
	background: #16a34a;
	color: #fff;
}

.runline__shipping {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 1;
	align-items: center;
	min-width: 0;
	max-width: 45%;
	padding: 0 16px;
	background: transparent;
	font-weight: 700;
	white-space: nowrap;
}

.runline__ship-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.runline__fsleft {
	font-weight: 800;
}

.runline__progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 3px;
	background: rgba(127, 127, 127, 0.3);
}

.runline__progress i {
	display: block;
	height: 100%;
	background: var(--rl-ship, #22c55e);
	transition: width 0.6s ease;
}

@container (max-width: 480px) {
	.runline__shipping,
	.runline__coupon {
		padding: 0 8px;
	}

	/* On a phone the free shipping progress is the message: the moving texts give it their place. */
	.runline__shipping {
		flex: 1 1 auto;
		max-width: none;
	}

	.runline__shipping ~ .runline__viewport {
		display: none;
	}

	/* Little room: the timer is more important than the label, and the button always stays in view. */
	.runline:has(.runline__countdown) .runline__label {
		display: none;
	}

	.runline__viewport {
		min-width: 0;
	}

	.runline .runline__button {
		margin: 0 6px;
		padding: 0 10px;
	}

	.runline__cp-prefix {
		display: none;
	}
}

/* A/B test: variant B waits until the checker picks it (without JavaScript everyone sees A). */
.runline:not([data-variant="b"]) .runline__track[data-variant="b"] {
	display: none;
}

/* E-mail signup */
.runline__signup {
	position: relative;
	z-index: 1;
	display: flex;
	flex-shrink: 0;
	gap: 6px;
	align-items: center;
	margin: 0;
	padding: 0 8px;
}

.runline .runline__signup input[type="email"] {
	box-sizing: border-box;
	width: 190px;
	height: calc(var(--rl-h) - 12px);
	min-height: 26px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	border-radius: 4px;
	background: #fff;
	color: #111827;
	font: inherit;
	font-size: 0.9em;
}

.runline .runline__signup button {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	height: calc(var(--rl-h) - 12px);
	min-height: 26px;
	padding: 0 12px;
	border-radius: var(--rl-btn-radius, 4px);
	background: var(--rl-btn-bg, #fff);
	color: var(--rl-btn-color, #111827);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.runline .runline__signup button:focus-visible,
.runline .runline__signup input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.runline__consent {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	max-width: 220px;
	font-size: 0.75em;
	line-height: 1.2;
	white-space: normal;
}

.runline .runline__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.runline__signup.is-busy {
	opacity: 0.6;
}

.runline__signup.is-done input,
.runline__signup.is-done button,
.runline__signup.is-done .runline__consent {
	display: none;
}

.runline__signup-msg {
	font-weight: 700;
	white-space: nowrap;
}

@container (max-width: 640px) {
	.runline .runline__signup input[type="email"] {
		width: 130px;
	}

	/* The consent box stays (it is required): smaller text in up to two lines. */
	.runline__consent {
		max-width: 38%;
		font-size: 0.72em;
		line-height: 1.15;
		white-space: normal;
	}
}

/* Phones: the form, the button and the coupon in a second row under the moving text (runline--m-stack, decided
   by the server from the texts, so the height is right from the first paint). */
.runline__break {
	display: none;
}

.runline--m-stack {
	flex-wrap: wrap;
	height: auto;
	min-height: var(--rl-h);
}

.runline--m-stack > .runline__label,
.runline--m-stack > .runline__countdown,
.runline--m-stack > .runline__viewport,
.runline--m-stack > .runline__close {
	min-height: var(--rl-h);
}

@container (max-width: 480px) {
	.runline--m-stack .runline__break {
		display: block;
		flex-basis: 100%;
		order: 5;
		height: 0;
	}

	.runline--m-stack > .runline__signup,
	.runline--m-stack > .runline__coupon,
	.runline--m-stack > .runline__button {
		order: 10;
		min-height: var(--rl-h);
	}

	.runline--m-stack > .runline__signup {
		flex: 1 1 100%;
	}

	.runline--m-stack > .runline__coupon {
		margin-inline-start: auto;
	}

	.runline.runline--m-stack > .runline__button {
		min-height: 0;
		margin: 6px auto;
	}

	.runline--m-stack > .runline__viewport {
		flex: 1 1 0;
	}

	.runline--m-hide > .runline__viewport {
		display: none;
	}

	.runline--m-hide > .runline__signup {
		flex: 1 1 auto;
	}
}

@media (max-width: 480px) {
	.runline-spacer--stack {
		height: calc(var(--rl-h) * 2) !important;
	}
}

/* A bar with a consent box may grow (very narrow places put the consent under the field). */
.runline:has(.runline__consent) {
	height: auto;
	min-height: var(--rl-h);
}

@container (max-width: 360px) {
	.runline__signup {
		flex-wrap: wrap;
		row-gap: 4px;
		padding: 6px 8px;
	}

	.runline__consent {
		order: 3;
		flex-basis: 100%;
		max-width: none;
		font-size: 0.75em;
	}
}

@container (max-width: 480px) {
	/* A signup form in a narrow place takes the width it gets. */
	.runline__signup {
		flex: 1 1 auto;
		min-width: 0;
	}

	.runline .runline__signup input[type="email"] {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}
}

@container (max-width: 360px) {
	.runline .runline__signup input[type="email"] {
		flex: 1 1 0;
	}
}

/* Shadows */
.runline--shadow-soft {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.runline--shadow-strong {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

/* Tilted ribbon, two crossed ribbons: the box hides what sticks out (no sideways scroll). */
.runline-ribbon {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	overflow: hidden;
	padding: calc(var(--rl-h) * 0.7) 0;
}

.runline-ribbon > .runline {
	position: relative;
	z-index: 1;
	width: 106%;
	max-width: none;
	margin-left: -3%;
	transform: rotate(var(--rl-tilt, -2deg));
}

.runline-ribbon__band {
	position: absolute;
	top: 50%;
	right: -3%;
	left: -3%;
	height: var(--rl-h);
	margin-top: calc(var(--rl-h) / -2);
	background: var(--rl-ribbon2, #facc15);
	transform: rotate(calc(var(--rl-tilt, -2deg) * -1));
}

/* Still: no motion, all messages in one centred line. */
.runline--mode-static .runline__track {
	width: 100%;
	justify-content: center;
	justify-content: safe center;
	animation: none;
}

.runline--mode-static .runline__group[aria-hidden] {
	display: none;
}

/* Vertical ticker: messages go up, one line each. */
.runline--mode-vertical .runline__viewport {
	align-items: flex-start;
	height: 100%;
}

.runline--mode-vertical .runline__track {
	flex-direction: column;
	width: 100%;
	animation-name: runline-up;
}

.runline--mode-vertical .runline__group {
	flex-direction: column;
	align-items: flex-start;
}

.runline--mode-vertical .runline__item {
	height: var(--rl-h);
}

.runline--mode-vertical .runline__sep {
	display: none;
}

@keyframes runline-up {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(0, var(--rl-shift), 0);
	}
}

/* One by one (fade, slide up, typewriter) — and visitors who asked for less motion. Without JavaScript: the first
   message stays. */
.runline--mode-fade .runline__track,
.runline--mode-slide .runline__track,
.runline--mode-typewriter .runline__track,
.runline--cycle .runline__track {
	width: 100%;
	animation: none;
}

.runline--mode-fade .runline__group,
.runline--mode-slide .runline__group,
.runline--mode-typewriter .runline__group,
.runline--cycle .runline__group {
	flex: 1 1 auto;
	justify-content: center;
}

.runline--mode-fade .runline__group[aria-hidden],
.runline--mode-slide .runline__group[aria-hidden],
.runline--mode-typewriter .runline__group[aria-hidden],
.runline--cycle .runline__group[aria-hidden],
.runline--mode-fade .runline__sep,
.runline--mode-slide .runline__sep,
.runline--mode-typewriter .runline__sep,
.runline--cycle .runline__sep,
.runline--cycle .runline__item {
	display: none;
}

.runline--mode-fade:not(.runline--cycle) .runline__item:not(:first-child),
.runline--mode-slide:not(.runline--cycle) .runline__item:not(:first-child),
.runline--mode-typewriter:not(.runline--cycle) .runline__item:not(:first-child) {
	display: none;
}

.runline--cycle .runline__item.is-current {
	display: flex;
}

.runline--mode-fade .runline__item.is-in {
	animation: runline-fade 0.6s ease both;
}

.runline--mode-slide .runline__item.is-in {
	animation: runline-slide 0.5s ease both;
}

.runline__item.is-typing .runline__text::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	background: currentColor;
	animation: runline-blink 0.8s steps(1) infinite;
}

@keyframes runline-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes runline-slide {
	from {
		transform: translateY(100%);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes runline-blink {
	50% {
		opacity: 0;
	}
}


@media (prefers-reduced-motion: reduce) {
	.runline__track,
	.runline__item.is-in {
		animation: none;
	}
}

/* Positions: bars of the top and the bottom come in stacks (several bars one under another). */
.runline-stack--sticky {
	position: sticky;
	top: 0;
	z-index: 9990;
}

.admin-bar .runline-stack--sticky {
	top: 32px;
}

.runline-stack--bottom {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9990;
}

@media screen and (max-width: 782px) {
	.admin-bar .runline-stack--sticky {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	.admin-bar .runline-stack--sticky {
		top: 0;
	}
}

/* Devices: phone < 768px, tablet 768–1024px, computer > 1024px */
@media (max-width: 767px) {
	.runline {
		font-size: var(--rl-fs-m);
	}

	.runline--hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.runline--hide-tablet {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.runline--hide-desktop {
		display: none !important;
	}
}

@keyframes runline-move {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(var(--rl-shift), 0, 0);
	}
}