/**
 * Marquee (Scrolling Text) — .espt-block-marquee
 *
 * A seamless scrolling ticker bar. Mobile-first; nothing ever widens the
 * page — the items live inside .espt-mq-viewport, which clips them.
 *
 * Vars set by the spec: --text-size --gap --min-height --pad-y --pad-x
 * --bar-radius --icon-size --icon-gap --logo-height --item-radius --item-pad
 * --sep-size --sep-img-height --sep-space --sep-opacity --fx-duration
 * --sticky-top --mq-z and the colours --bar-bg --bar-bg2 --bar-border
 * --text-color --link-hover-color --icon-color --item-bg --sep-color
 * --label-bg --label-color.
 * Set by the JS on the track: --mq-distance --mq-duration.
 *
 * Root classes: is-design-* is-item-style-* is-text-weight-* is-text-effect-*
 * is-direction-* is-shadow-* is-pause-on-hover is-edge-fade is-full-bleed.
 */

.espt-block-marquee {
	--mq-ink: #ffffff;
	--mq-sep: rgba(255, 255, 255, 0.6);
	--mq-flag: var(--bd-danger);
	max-width: 100%;
	min-width: 0;
}

.espt-block-marquee.is-full-bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

/* ------------------------------------------------------------------ bar */

.espt-block-marquee .espt-mq {
	align-items: center;
	background: var(--bar-bg, #111827);
	border: 1px solid var(--bar-border, transparent);
	border-radius: var(--bar-radius, 0px);
	display: flex;
	min-height: var(--min-height, 42px);
	min-width: 0;
	overflow: hidden;
	padding: var(--pad-y, 10px) var(--pad-x, 0px);
	position: relative;
	width: 100%;
}

.espt-block-marquee.is-shadow-soft .espt-mq { box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.3); }
.espt-block-marquee.is-shadow-strong .espt-mq { box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.45); }

.espt-block-marquee .espt-mq-viewport {
	/* Basis 0 — never let the track's max-content width take part in the
	   flex sizing, or a long ticker widens the bar before it shrinks back. */
	flex: 1 1 0%;
	min-width: 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.espt-block-marquee.is-edge-fade .espt-mq-viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* ---------------------------------------------------------- the scroll */

.espt-block-marquee .espt-mq-track {
	/* No-JS fallback: the server prints exactly two groups, so half the track
	   plus half a gap is one period. The JS overwrites it inline (and sets
	   --mq-duration) as soon as it has cloned the group to fill the bar. */
	--mq-distance: calc(50% + var(--gap, 24px) / 2);
	align-items: center;
	animation: espt-mq-move var(--mq-duration, 26s) linear infinite;
	display: flex;
	gap: var(--gap, 24px);
	width: max-content;
	will-change: transform;
}

.espt-block-marquee.is-direction-right .espt-mq-track { animation-direction: reverse; }

@keyframes espt-mq-move {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-1 * var(--mq-distance)), 0, 0); }
}

.espt-block-marquee .espt-mq-group {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: var(--gap, 24px);
}

/* ----------------------------------------------------------- one item */

.espt-block-marquee .espt-mq-item {
	align-items: center;
	color: var(--text-color, var(--mq-ink));
	display: inline-flex;
	flex-shrink: 0;
	font-size: var(--text-size, 14px);
	font-weight: 600;
	gap: var(--icon-gap, 8px);
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
}

.espt-block-marquee a.espt-mq-item { transition: color 0.2s ease, opacity 0.2s ease; }
.espt-block-marquee a.espt-mq-item:hover,
.espt-block-marquee a.espt-mq-item:focus-visible { color: var(--link-hover-color, var(--bd-accent)); }

.espt-block-marquee.is-text-weight-400 .espt-mq-item { font-weight: 400; }
.espt-block-marquee.is-text-weight-500 .espt-mq-item { font-weight: 500; }
.espt-block-marquee.is-text-weight-600 .espt-mq-item { font-weight: 600; }
.espt-block-marquee.is-text-weight-700 .espt-mq-item { font-weight: 700; }
.espt-block-marquee.is-text-weight-800 .espt-mq-item { font-weight: 800; }

.espt-block-marquee .espt-mq-icon {
	align-items: center;
	color: var(--icon-color, currentColor);
	display: inline-flex;
	flex-shrink: 0;
	font-size: var(--icon-size, 18px);
	line-height: 1;
}

/* The icon library ships stroke- and fill-based SVGs that already declare
   their own paint — only size them here. */
.espt-block-marquee .espt-mq-icon svg {
	height: 1em;
	width: 1em;
}

.espt-block-marquee .espt-mq-logo {
	display: block;
	flex-shrink: 0;
	height: var(--logo-height, 28px);
	max-width: none;
	object-fit: contain;
	width: auto;
}

.espt-block-marquee .espt-mq-text { display: inline-block; }

/* {price} renders through wc_price() — keep Woo's own colour off it. */
.espt-block-marquee .espt-mq-text .woocommerce-Price-amount,
.espt-block-marquee .espt-mq-text bdi {
	color: inherit;
	white-space: nowrap;
}

/* --------------------------------------------------------- separator */

/* .espt-mq-sep-text / .espt-mq-sep-icon carry no rules of their own — the
   base below covers both; they exist so a site can target one kind. */

.espt-block-marquee .espt-mq-sep {
	align-items: center;
	color: var(--sep-color, var(--mq-sep));
	display: inline-flex;
	flex-shrink: 0;
	font-size: var(--sep-size, 16px);
	line-height: 1;
	margin: 0 var(--sep-space, 0px);
	opacity: var(--sep-opacity, 0.9);
}

.espt-block-marquee .espt-mq-sep svg {
	height: 1em;
	width: 1em;
}

.espt-block-marquee .espt-mq-sep-i {
	align-items: center;
	display: inline-flex;
	line-height: 1;
}

.espt-block-marquee .espt-mq-sep-image img {
	display: block;
	height: var(--sep-img-height, 22px);
	max-width: none;
	object-fit: contain;
	width: auto;
}

/* -------------------------------------------------- fixed label / flag */

.espt-block-marquee .espt-mq-label {
	align-items: center;
	align-self: stretch;
	background: var(--label-bg, var(--mq-flag));
	border-radius: calc(var(--bar-radius, 0px) * 0.5);
	color: var(--label-color, #ffffff);
	display: inline-flex;
	flex-shrink: 0;
	font-size: calc(var(--text-size, 14px) * 0.9);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin-right: 12px;
	/* Never eat the whole bar on a narrow screen. */
	max-width: 50%;
	overflow: hidden;
	padding: 4px 12px;
	position: relative;
	white-space: nowrap;
	z-index: 2;
}

/* ------------------------------------------------------- bar designs */

/* "dark" is the base .espt-mq above (#111827 + white ink); the nine rules
   below re-paint it. A design class is always present on the root, because
   the select falls back to its default. */

.espt-block-marquee.is-design-light,
.espt-block-marquee.is-design-outline,
.espt-block-marquee.is-design-plain,
.espt-block-marquee.is-design-ticker {
	--mq-ink: var(--bd-ink);
	--mq-sep: var(--bd-muted);
}

.espt-block-marquee.is-design-light .espt-mq {
	background: var(--bar-bg, var(--bd-soft));
	border-color: var(--bar-border, var(--bd-soft-line));
}

.espt-block-marquee.is-design-primary .espt-mq { background: var(--bar-bg, var(--bd-primary)); }

.espt-block-marquee.is-design-gradient .espt-mq {
	background: linear-gradient(90deg, var(--bar-bg, var(--bd-primary)), var(--bar-bg2, var(--bd-deep)));
}

.espt-block-marquee.is-design-accent {
	--mq-ink: var(--bd-accent-ink);
	--mq-sep: color-mix(in srgb, var(--bd-accent-ink) 55%, transparent);
	--mq-flag: var(--bd-deep);
}

.espt-block-marquee.is-design-accent .espt-mq { background: var(--bar-bg, var(--bd-accent)); }

.espt-block-marquee.is-design-outline .espt-mq {
	background: var(--bar-bg, transparent);
	border-color: var(--bar-border, var(--bd-line));
}

.espt-block-marquee.is-design-plain .espt-mq {
	background: var(--bar-bg, transparent);
	border-color: var(--bar-border, transparent);
}

.espt-block-marquee.is-design-stripes .espt-mq { background: var(--bar-bg, var(--bd-primary)); }

.espt-block-marquee.is-design-stripes .espt-mq::before {
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 10px, transparent 10px 22px);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.espt-block-marquee.is-design-glass .espt-mq {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background: var(--bar-bg, rgba(15, 23, 42, 0.55));
	border-color: var(--bar-border, rgba(255, 255, 255, 0.28));
}

.espt-block-marquee.is-design-ticker .espt-mq {
	background: var(--bar-bg, #ffffff);
	border-color: var(--bar-border, var(--bd-line));
}

/* The ticker flag spans the full bar height. */
.espt-block-marquee.is-design-ticker .espt-mq-label {
	border-radius: 0;
	margin-bottom: calc(-1 * var(--pad-y, 10px));
	margin-left: calc(-1 * var(--pad-x, 0px));
	margin-right: var(--gap, 24px);
	margin-top: calc(-1 * var(--pad-y, 10px));
	padding: 6px 14px;
}

/* --------------------------------------------------------- item chips */

.espt-block-marquee.is-item-style-soft .espt-mq-item,
.espt-block-marquee.is-item-style-solid .espt-mq-item,
.espt-block-marquee.is-item-style-outline .espt-mq-item,
.espt-block-marquee.is-item-style-glass .espt-mq-item {
	border-radius: var(--item-radius, 999px);
	padding: calc(var(--item-pad, 14px) * 0.42) var(--item-pad, 14px);
}

.espt-block-marquee.is-item-style-soft .espt-mq-item {
	background: var(--item-bg, color-mix(in srgb, currentColor 14%, transparent));
}

.espt-block-marquee.is-item-style-solid .espt-mq-item {
	background: var(--item-bg, var(--bd-accent));
	color: var(--text-color, var(--bd-accent-ink));
}

.espt-block-marquee.is-item-style-outline .espt-mq-item {
	background: var(--item-bg, transparent);
	box-shadow: inset 0 0 0 1px currentColor;
}

/* Tinted from the ink rather than hard-coded white, so the chip still reads
   on the light / ticker / outline bars as well as on the dark ones. */
.espt-block-marquee.is-item-style-glass .espt-mq-item {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: var(--item-bg, color-mix(in srgb, currentColor 12%, transparent));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
}

/* ------------------------------------------------------ text effects */

.espt-block-marquee.is-text-effect-pulse .espt-mq-item { animation: espt-mq-fx-pulse var(--fx-duration, 2000ms) ease-in-out infinite; }
.espt-block-marquee.is-text-effect-bounce .espt-mq-item { animation: espt-mq-fx-bounce var(--fx-duration, 2000ms) ease-in-out infinite; }
.espt-block-marquee.is-text-effect-shake .espt-mq-item { animation: espt-mq-fx-shake var(--fx-duration, 2000ms) ease-in-out infinite; }
.espt-block-marquee.is-text-effect-blink .espt-mq-item { animation: espt-mq-fx-blink var(--fx-duration, 2000ms) ease-in-out infinite; }
.espt-block-marquee.is-text-effect-glow .espt-mq-text { animation: espt-mq-fx-glow var(--fx-duration, 2000ms) ease-in-out infinite; }

.espt-block-marquee.is-text-effect-gradient .espt-mq-text {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: espt-mq-fx-gradient var(--fx-duration, 4000ms) linear infinite;
	background: linear-gradient(90deg, #ff5f6d, #ffc371, #47cf73, #4a90e2, #ff5f6d);
	background-clip: text;
	background-size: 300% 100%;
	color: transparent;
}

.espt-block-marquee.is-text-effect-shine .espt-mq-text {
	overflow: hidden;
	position: relative;
}

.espt-block-marquee.is-text-effect-shine .espt-mq-text::after {
	animation: espt-mq-fx-shine var(--fx-duration, 2800ms) ease-in-out infinite;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
	content: "";
	height: 100%;
	left: -160%;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: skewX(-20deg);
	width: 60%;
}

@keyframes espt-mq-fx-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

@keyframes espt-mq-fx-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes espt-mq-fx-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-2px); }
	40% { transform: translateX(2px); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(2px); }
}

@keyframes espt-mq-fx-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@keyframes espt-mq-fx-glow {
	0%, 100% { text-shadow: 0 0 4px rgba(255, 255, 255, 0.2); }
	50% { text-shadow: 0 0 12px currentColor, 0 0 20px currentColor; }
}

@keyframes espt-mq-fx-gradient {
	to { background-position: 300% 0; }
}

@keyframes espt-mq-fx-shine {
	0% { left: -160%; }
	55%, 100% { left: 160%; }
}

/* --------------------------------------------------- pause on hover */

.espt-block-marquee.is-pause-on-hover .espt-mq:hover .espt-mq-track,
.espt-block-marquee.is-pause-on-hover .espt-mq:hover .espt-mq-item,
.espt-block-marquee.is-pause-on-hover .espt-mq:hover .espt-mq-text,
.espt-block-marquee.is-pause-on-hover .espt-mq:hover .espt-mq-text::after,
.espt-block-marquee.is-pause-on-hover .espt-mq:focus-within .espt-mq-track,
.espt-block-marquee.is-pause-on-hover .espt-mq:focus-within .espt-mq-item,
.espt-block-marquee.is-pause-on-hover .espt-mq:focus-within .espt-mq-text,
.espt-block-marquee.is-pause-on-hover .espt-mq:focus-within .espt-mq-text::after {
	animation-play-state: paused;
}

/* -------------------------------------------------------- sticky bar */

.espt-block-marquee .espt-mq.is-stuck {
	border-left-width: 0;
	border-radius: 0;
	border-right-width: 0;
	left: 0;
	margin: 0;
	position: fixed;
	right: 0;
	width: auto;
	z-index: var(--mq-z, 9989);
}

.espt-block-marquee .espt-mq[data-sticky="top"].is-stuck {
	animation: espt-mq-drop 0.3s ease;
	box-shadow: 0 6px 20px rgba(17, 24, 39, 0.16);
	top: var(--sticky-top, 0px);
}

.espt-block-marquee .espt-mq[data-sticky="bottom"].is-stuck {
	bottom: 0;
	box-shadow: 0 -6px 20px rgba(17, 24, 39, 0.16);
}

@keyframes espt-mq-drop {
	from { transform: translateY(-100%); }
	to { transform: none; }
}

/* Never pin inside the editor canvas — it would cover the toolbar. */
.editor-styles-wrapper .espt-block-marquee .espt-mq.is-stuck,
.block-editor-writing-flow .espt-block-marquee .espt-mq.is-stuck {
	border-radius: var(--bar-radius, 0px);
	bottom: auto;
	position: relative;
	top: auto;
	width: 100%;
}

/* --------------------------------------------------------- responsive */

@media (min-width: 768px) {
	.espt-block-marquee .espt-mq-label {
		margin-right: 16px;
		max-width: 60%;
	}
}

/* --------------------------------------------------- reduced motion */

/* These have to outrank the .is-text-effect-* rules above (which carry two
   classes), so every selector here carries at least three and the whole
   block sits last in the file. .is-reduced is what the JS adds; the media
   query repeats it for the no-JS / JS-not-yet-run case. */

.espt-block-marquee .espt-mq.is-reduced .espt-mq-track,
.espt-block-marquee .espt-mq.is-reduced .espt-mq-item,
.espt-block-marquee .espt-mq.is-reduced .espt-mq-text,
.espt-block-marquee .espt-mq.is-reduced .espt-mq-text::after,
.espt-block-marquee .espt-mq.is-reduced[data-sticky].is-stuck {
	animation: none;
	will-change: auto;
}

.espt-block-marquee .espt-mq.is-reduced .espt-mq-viewport { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
	.espt-block-marquee .espt-mq .espt-mq-track,
	.espt-block-marquee .espt-mq .espt-mq-item,
	.espt-block-marquee .espt-mq .espt-mq-text,
	.espt-block-marquee .espt-mq .espt-mq-text::after,
	.espt-block-marquee .espt-mq[data-sticky].is-stuck {
		animation: none;
		will-change: auto;
	}

	/* Nothing scrolls, so the seamless duplicate is just repeated copy.
	   (The JS removes it outright; this covers the no-JS case.) */
	.espt-block-marquee .espt-mq-group[data-clone] { display: none; }

	.espt-block-marquee .espt-mq .espt-mq-viewport { overflow-x: auto; }
	.espt-block-marquee a.espt-mq-item { transition: none; }
}