/**
 * FeAdulta Home Slider — estilos
 * v1.0.0
 *
 * El bloque ocupa todo el ancho. Aspect ratio 1920:600 en desktop;
 * en móvil se cuadra (4:3) para que las imágenes 1920x600 no salgan
 * como una franja minúscula.
 */

/* Ocultar la cabecera "Tienda" del tema cuando estamos en la portada de la tienda.
 * Es respaldo CSS por si los filtros PHP no surten efecto en una versión concreta de Kadence.
 * Estos selectores son los más comunes en Kadence para el "page hero" / título.
 */
body.woocommerce.home .entry-hero,
body.woocommerce.home .entry-hero-container-inner,
body.woocommerce.home .kadence-shop-page-header,
body.home.post-type-archive-product .entry-hero,
body.home.post-type-archive-product .entry-hero-container-inner,
body.home.post-type-archive-product .kadence-shop-page-header {
	display: none !important;
}

/* Quitar el margen superior del contenido para que el slider quede pegado a la cabecera del sitio. */
body.woocommerce.home #primary,
body.home.post-type-archive-product #primary {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Contenedor del slider */
.fhs-slider {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #f4f4f4; /* placeholder mientras carga la imagen */
}

.fhs-slider .swiper {
	width: 100%;
	aspect-ratio: 1920 / 600;
	max-height: 600px;
}

.fhs-slider .swiper-slide {
	display: block;
	width: 100%;
	height: 100%;
}

.fhs-slider .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fhs-slider .swiper-slide a.fhs-slide-link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* Pagination dots */
.fhs-slider .swiper-pagination-bullet {
	background: #ffffff;
	opacity: 0.55;
	width: 10px;
	height: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.fhs-slider .swiper-pagination-bullet:hover {
	opacity: 0.8;
}

.fhs-slider .swiper-pagination-bullet-active {
	background: #ffffff;
	opacity: 1;
	transform: scale(1.15);
}

/* Flechas */
.fhs-slider .swiper-button-prev,
.fhs-slider .swiper-button-next {
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	width: 36px;
	height: 36px;
}

.fhs-slider .swiper-button-prev::after,
.fhs-slider .swiper-button-next::after {
	font-size: 22px;
	font-weight: 700;
}

/* Móvil: aspect ratio más cuadrado para que la imagen no se reduzca a una tira fina.
 * IMPORTANTE: en móvil la imagen se recorta por los lados (object-fit: cover).
 * Diseña la diapo manteniendo el texto en el tercio central (ver brief de diseño).
 */
@media (max-width: 768px) {
	.fhs-slider .swiper {
		aspect-ratio: 4 / 3;
		max-height: none;
	}

	.fhs-slider .swiper-button-prev,
	.fhs-slider .swiper-button-next {
		width: 30px;
		height: 30px;
	}

	.fhs-slider .swiper-button-prev::after,
	.fhs-slider .swiper-button-next::after {
		font-size: 18px;
	}
}

/* Reducir motion: respetar la preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
	.fhs-slider .swiper-slide {
		transition: none !important;
	}
}