/* MVNO Misión Cumple · promoción en tienda normal · v0.2.21 */
.mvnomc-shop-promo {
	--mvnomc-shop-promo-bg: #6f3c8f;
	--mvnomc-shop-promo-color: #fff;
	--mvnomc-shop-promo-height: 36px;
	--mvnomc-shop-promo-marquee: 14s;
	--mvnomc-shop-promo-rotate: 4s;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: var(--mvnomc-shop-promo-height);
	min-height: var(--mvnomc-shop-promo-height);
	padding: 0 10px;
	background: var(--mvnomc-shop-promo-bg);
	color: var(--mvnomc-shop-promo-color) !important;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none !important;
	overflow: hidden;
	cursor: pointer;
}

/* En el loop WooCommerce aparece inmediatamente después de la miniatura.
   El margen negativo la apoya sobre el borde inferior de la foto sin cambiar
   el alto ni la separación original de la tarjeta. */
.woocommerce ul.products li.product .mvnomc-shop-promo:not(.mvnomc-shop-promo--single),
.woocommerce-page ul.products li.product .mvnomc-shop-promo:not(.mvnomc-shop-promo--single) {
	position: relative;
	z-index: 8;
	--mvnomc-shop-promo-image-gap: 0px;
	margin-top: calc((var(--mvnomc-shop-promo-height) + var(--mvnomc-shop-promo-image-gap)) * -1);
	margin-bottom: var(--mvnomc-shop-promo-image-gap);
}

.mvnomc-shop-promo:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}

.mvnomc-shop-promo__fixed {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mvnomc-shop-promo__marquee {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
}

/* El texto móvil queda fuera del flujo. Así su ancho nunca puede ensanchar
   la columna/tarjeta de WooCommerce, aunque el mensaje sea muy largo. */
.mvnomc-shop-promo__marquee-track {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	height: 100%;
	width: max-content;
	gap: 18px;
	padding-left: 100%;
	will-change: transform;
	animation: mvnomc-shop-promo-marquee var(--mvnomc-shop-promo-marquee) linear infinite;
}

.mvnomc-shop-promo__separator {
	opacity: .7;
}

@keyframes mvnomc-shop-promo-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

.mvnomc-shop-promo__rotate {
	display: grid;
	place-items: center;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 100%;
}

.mvnomc-shop-promo__rotate-text {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: opacity .22s ease, transform .22s ease;
}

.mvnomc-shop-promo__rotate.is-changing .mvnomc-shop-promo__rotate-text {
	opacity: 0;
	transform: translateY(4px);
}

.mvnomc-shop-promo--single {
	margin: 10px 0 16px;
	border-radius: 10px;
	font-size: 13px;
}

@media (max-width: 544px) {
	.mvnomc-shop-promo {
		padding-inline: 8px;
		font-size: 10.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mvnomc-shop-promo__marquee-track {
		animation: none;
		padding-left: 0;
	}
	.mvnomc-shop-promo__marquee-track > *:nth-child(n+2) {
		display: none;
	}
	.mvnomc-shop-promo__rotate-text {
		transition: none;
	}
}