/**
 * Kubari — rendimiento y primera pantalla de la ficha de producto
 * 2026-08-31 · Gecko Studio
 *
 * Dos problemas medidos en movil (iPhone, 4G lenta, CPU x4), que es como entra
 * el trafico de las campanas de Meta:
 *
 *   - CLS 0,45 (el limite bueno es 0,1). Dos saltos de 0,22 causados por las
 *     imagenes de la galeria, que llegan sin dimensiones: el navegador no sabe
 *     cuanto hueco reservar y la pagina da un salto cuando cargan, justo cuando
 *     el visitante empieza a leer.
 *   - El precio y el boton de compra no entran en la primera pantalla: el boton
 *     quedaba en y=962 con el viewport en 844.
 */

/* ---------------------------------------------------------------
 * 1. Reservar el hueco de la galeria ANTES de que carguen las imagenes.
 *    Las imagenes de producto son 1000x850, asi que ese es el ratio.
 * --------------------------------------------------------------- */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	aspect-ratio: 1000 / 850;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.single-product .woocommerce-product-gallery .flex-viewport {
	aspect-ratio: 1000 / 850;
}

/* Las miniaturas son cuadradas (150x150). Sin esto, cada una empuja la pagina
   al cargar: son las culpables de los dos saltos que midio el trace. */
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* ---------------------------------------------------------------
 * 2. Primera pantalla en movil: que precio y boton entren sin scroll.
 * --------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Las migas ocupan 32 px + margenes y no le dicen nada a quien llega
	   desde un anuncio directo a la ficha. */
	.single-product .woocommerce-breadcrumb {
		display: none;
	}

	/* La imagen de producto es apaisada (1000x850) y en movil se come 292 px de
	   alto. A 4:3 sigue viendose de sobra y devuelve ~35 px a la primera
	   pantalla. El recorte lo absorbe object-fit: cover. */
	.single-product .woocommerce-product-gallery .flex-viewport,
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
	.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
		aspect-ratio: 4 / 3;
	}

	/* Miniaturas: flexslider les pone el tamano en linea por JS, asi que aqui
	   hace falta pesar mas. De 86 px a 56 px; siguen siendo tocables de sobra
	   (el minimo recomendado son 44 px). */
	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		height: auto !important;
		margin-top: 8px;
		/* Flexslider flota los <li> y les pone el ancho en linea. Al fijarles un
		   tamano se descuadraban entre si, asi que aqui se alinean en fila. */
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap;
		gap: 8px;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
		display: block !important;
		flex: 0 0 56px;
	}

	.single-product .woocommerce-product-gallery .flex-control-thumbs li,
	.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
		width: 56px !important;
		height: 56px !important;
	}

	/* Recuperar el aire sobrante entre la galeria y el bloque de compra. */
	.single-product .single-product-main-image .woocommerce-product-gallery {
		margin-bottom: 8px;
	}

	.single-product .entry-summary > :first-child {
		margin-top: 0;
	}

	/* El precio arrastra 23 px de padding inferior heredado de Salient. */
	.single-product .entry-summary p.price {
		padding-bottom: 4px;
	}
}

/* ---------------------------------------------------------------
 * 3. Logo de la cabecera: reservar su hueco.
 *    Trae width/height en el HTML, pero el CSS lo redimensiona y el navegador
 *    no reserva el alto final hasta que la imagen carga: empuja la pagina.
 * --------------------------------------------------------------- */
#header-outer .logo img.default-logo,
#header-outer .logo img.starting-logo,
#header-outer .logo img.stnd {
	aspect-ratio: 339 / 157;
	height: 50px;
	width: auto;
}