/* =================================================================
   Miau Hero Cover
   Usage: Add CSS class "miau-hero-cover" to any Elementor Container.
   Use Elementor's native background image/video + overlay controls.
   ================================================================= */

/* When hero cover is present, collapse the header and navbar spacer
   so the hero starts at the top of the viewport */
body:has(.miau-hero-cover) .elementor-location-header {
	display: none;
}

body:has(.miau-hero-cover) .miau-navbar-spacer {
	display: none;
}

/* The hero container itself */
.e-con.miau-hero-cover {
	position: relative;
	width: 100%;
	height: 809px;
	max-width: 1440px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 0;
}

@media (max-width: 767px) {
	.e-con.miau-hero-cover {
		height: 75vh;
	}
}

/* Parent container: remove padding so hero goes edge-to-edge */
.e-con:has(> .e-con.miau-hero-cover) {
	padding: 0;
	gap: 0;
	--padding-inline: 0px;
	--padding-block: 0px;
}

/* =================================================================
   Archive hero — uses WC category thumbnail as background.
   Fallback to default image if the term has no thumbnail.
   ================================================================= */
.e-con.miau-archive-hero {
	background-image: var( --miau-archive-hero, url('../img/hero-default.jpg') );
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* La miniatura de la categoría es apaisada y en un móvil se recorta a lo bruto.
   Si la categoría tiene imagen móvil propia (campo "Imagen móvil de la cabecera"),
   se usa aquí. Si no la tiene, la variable no se declara y el var() cae por
   defecto a la de escritorio: el comportamiento de siempre. */
@media (max-width: 767px) {

	.e-con.miau-archive-hero {
		background-image: var(
			--miau-archive-hero-mobile,
			var( --miau-archive-hero, url('../img/hero-default.jpg') )
		);
	}
}