/**
 * Carrusel hero: solo el slide activo aporta altura; el resto fuera del flujo
 * (position absolute) para que no se apilen en vertical aunque el tema fuerce
 * position:relative en divs del contenido.
 */
.mp-home-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f5f5f5;
	-webkit-tap-highlight-color: transparent;
	margin-top: var(--mp-hero-mt, 0);
	margin-bottom: var(--mp-hero-mb, 0);
	/* En PC no ocupa todo el ancho: límite por defecto centrado (ajustable en el admin
	   con «Ancho máximo»). En móvil, 100% sigue siendo 100%. */
	max-width: var(--mp-hero-max-w, min(100%, 1400px));
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Evita anillo de foco gigante (tema/editor) al hacer clic en el bloque. */
.mp-home-hero:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

@media (min-width: 769px) {
	.mp-home-hero {
		margin-top: var(--mp-hero-mt, clamp(12px, 1.2vw, 28px));
	}
}

.mp-home-hero__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
	/* Permite el scroll vertical nativo en móvil y deja los gestos horizontales al swipe. */
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	cursor: grab;
}

/* Altura estable al rotar: reserva proporción del banner 1. */
.mp-home-hero__viewport--mobile {
	aspect-ratio: var(--mp-hero-aspect-m, 5 / 4);
	min-height: 200px;
}

@media (min-width: 769px) {
	.mp-home-hero__viewport--desktop {
		aspect-ratio: var(--mp-hero-aspect-d, 2560 / 985);
		min-height: 220px;
	}
}

/**
 * Solo hijos directos del viewport = cada slide del carrusel.
 * :not(.is-active) debe ir en absolute sí o sí (algunos temas pisan .mp-home-hero__slide).
 */
.mp-home-hero__viewport .mp-home-hero__slide:not(.is-active) {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	opacity: 0;
	pointer-events: none;
	/* Sin fundido: el cambio de slide es instantáneo. Evita que Chrome
	   invalide el LCP al ocultar la imagen más grande (error NO_LCP). */
	transition: none;
	z-index: 0;
}

.mp-home-hero__viewport .mp-home-hero__slide.is-active {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	opacity: 1;
	pointer-events: auto;
	transition: none;
	z-index: 2;
}

.mp-home-hero__link {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 0;
	text-decoration: none;
	/* Evita que el navegador inicie el drag nativo del enlace al arrastrar con el ratón. */
	-webkit-user-drag: none;
	user-select: none;
}

.mp-home-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: var(--mp-hero-img-max-h, none);
	vertical-align: middle;
	object-fit: cover;
	object-position: center;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.mp-home-hero__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	height: 100%;
	padding: 1rem;
	text-align: center;
	font-size: 0.95rem;
	color: #666;
	background: #eee;
}

/* Tienda y categorías: hero + cinta roja a ancho completo; separación al catálogo */
body.mp-shop-has-hero .mp-home-hero-stack {
	width: 100vw;
	max-width: 100vw;
	min-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: clamp(24px, 3vw, 44px);
	box-sizing: border-box;
	overflow: hidden;
}

.mp-home-hero-stack .mp-home-hero--catalog,
.mp-home-hero-stack .mp-home-hero--shop {
	--mp-hero-mb: 0;
}

/* Tienda y categorías: banner fijo + separación del header */
.mp-home-hero--catalog,
.mp-home-hero--shop {
	--mp-hero-mt: clamp(20px, 2.5vw, 48px);
	--mp-hero-mb: clamp(24px, 3vw, 44px);
	width: 100%;
	max-width: 100%;
}

.mp-home-hero--single .mp-home-hero__slide {
	opacity: 1 !important;
	position: relative !important;
	pointer-events: auto !important;
	height: auto !important;
}

.mp-home-hero--single .mp-home-hero__viewport--mobile,
.mp-home-hero--single .mp-home-hero__viewport--desktop {
	aspect-ratio: auto;
	min-height: 0;
}

.mp-home-hero--single .mp-home-hero__img {
	height: auto;
}

body.mp-shop-has-hero {
	overflow-y: auto;
	scroll-snap-type: none !important;
}

body.mp-shop-has-hero #main-container,
body.mp-shop-has-hero main.site-main,
body.mp-shop-has-hero .woocommerce-shop,
body.mp-shop-has-hero.tax-product_cat {
	scroll-snap-type: none !important;
	overflow: visible;
}

body.mp-shop-has-hero .woocommerce-products-header {
	margin-top: 0;
	padding-top: 0;
}

@media (min-width: 769px) {
	body.mp-shop-has-hero.admin-bar .mp-home-hero--catalog,
	body.mp-shop-has-hero.admin-bar .mp-home-hero--shop {
		--mp-hero-mt: clamp(24px, 2.8vw, 56px);
	}
}