.carimg-carousel {
	position: relative;
	width: 100%;
	height: var(--carimg-height, 400px);
	overflow: hidden;
	background: var(--carimg-bg-color, #eee);
}

.carimg-carousel .carimg-track {
	display: flex;
	height: 100%;
	min-height: 0;
	will-change: transform;
}

.carimg-carousel .carimg-slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	/* Sin esto, algunos navegadores dejan que la imagen de adentro
	   "empuje" el slide para ser más alto que el carrusel según su
	   propia proporción (es un comportamiento por defecto de flexbox:
	   min-height pasa a ser el del contenido en vez de 0). Por eso a
	   veces una imagen puntual se salía por abajo del fondo gris. */
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

/* Wrapper interno: deja "letterbox" prolijo (con las esquinas redondeadas
   limpias) alrededor de la imagen cuando su proporción no coincide con
   la del carrusel — así la imagen se ve siempre completa y centrada,
   nunca cortada. */
.carimg-carousel .carimg-slide-inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	background: var(--carimg-bg-color, #eee);
	border-radius: 4px;
	transition: box-shadow .25s ease;
}

/* La imagen va con position:absolute + inset:0 dentro de su recuadro
   (que sí tiene posición/tamaño definidos). Esto la saca por completo
   del flujo normal: así, sea cual sea el ancho/alto "de fábrica" que
   trae el archivo (WordPress se lo agrega al HTML), es matemáticamente
   imposible que empuje o agrande su propio recuadro — y como el alto
   siempre se centra solo (object-position: center + object-fit:
   contain), el centrado vertical es automático sin importar el ancho
   horizontal que cada quien le dé al carrusel. También se anula el
   aspect-ratio automático que algunos navegadores calculan solos a
   partir de los atributos width/height del HTML. Todo con !important
   porque algunos temas traen reglas globales tipo "img { object-fit:
   cover }" que si no forzamos esto le ganan a nuestro estilo. */
.carimg-carousel .carimg-slide-img {
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	margin: 0 !important;
	transition: filter .3s ease, opacity .3s ease, inset .3s ease;
}

/* Ajuste de imagen "Rellenar" (elegido en el panel del carrusel): la
   imagen ocupa TODO el recuadro, recortando el sobrante en vez de dejar
   espacio vacío. El selector de atributo [data-fit="cover"] le gana en
   especificidad a la regla "contain" de arriba, aunque ambas usen
   !important. */
.carimg-carousel[data-fit="cover"] .carimg-slide-img {
	object-fit: cover !important;
}

/* ------------------------------------------------------------------ *
 * Efectos al pasar el mouse. Se activan según data-hover-effect en el
 * carrusel (elegido en el panel de administración). Los tres están
 * diseñados para nunca poder recortar la imagen:
 *  - "grayscale": solo cambia un filtro de color, no mueve nada.
 *  - "lift": la sombra/elevación se aplica al RECUADRO entero (fondo +
 *    imagen juntos), no a la imagen sola, así nunca queda un pedazo de
 *    imagen fuera de su propio fondo.
 *  - "zoom": en reposo la imagen queda con un margen chico (4%) y al
 *    pasar el mouse ese margen se cierra a 0 — "crece" hasta llenar
 *    el recuadro exactamente, nunca más allá.
 * ------------------------------------------------------------------ */

/* Blanco y negro → color. */
.carimg-carousel[data-hover-effect="grayscale"] .carimg-slide-img {
	filter: grayscale(100%) opacity(0.75);
}

.carimg-carousel[data-hover-effect="grayscale"] .carimg-slide-inner:hover .carimg-slide-img {
	filter: grayscale(0%) opacity(1);
}

/* Sombra + elevación sutil (del recuadro completo, no de la imagen). */
.carimg-carousel[data-hover-effect="lift"] .carimg-slide-inner {
	transition: transform .25s ease, box-shadow .25s ease;
}

.carimg-carousel[data-hover-effect="lift"] .carimg-slide-inner:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

/* Zoom seguro: crece desde un margen chico hasta llenar el recuadro. */
.carimg-carousel[data-hover-effect="zoom"] .carimg-slide-img {
	inset: 4% !important;
}

.carimg-carousel[data-hover-effect="zoom"] .carimg-slide-inner:hover .carimg-slide-img {
	inset: 0 !important;
}

@media (hover: none) {
	/* En touch no hay ":hover" real: mostramos siempre el estado "final"
	   de cada efecto para no dejar logos permanentemente apagados. */
	.carimg-carousel[data-hover-effect="grayscale"] .carimg-slide-img {
		filter: none;
	}
	.carimg-carousel[data-hover-effect="zoom"] .carimg-slide-img {
		inset: 0 !important;
	}
	.carimg-carousel[data-hover-effect="lift"] .carimg-slide-inner:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Slide clickeable: cuando la imagen tiene un link cargado (ej: la ficha
   de un producto), la ocupa toda una etiqueta <a> del mismo tamaño que el
   recuadro, para que todo el slide sea clickeable/tocable, no solo la
   imagen. Sin link, la imagen se muestra igual que siempre (sin <a>). */
.carimg-carousel .carimg-slide-link {
	position: absolute;
	inset: 0;
	display: block;
	cursor: pointer;
}

.carimg-carousel .carimg-slide-link:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: -3px;
}

/* Modo "fade": las slides se apilan y se muestran solo por opacidad. */
.carimg-carousel[data-transition="fade"] .carimg-track {
	position: relative;
}

.carimg-carousel[data-transition="fade"] .carimg-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .8s ease;
	pointer-events: none;
}

.carimg-carousel[data-transition="fade"] .carimg-slide.carimg-active {
	opacity: 1;
	pointer-events: auto;
}