/*
 * Galería de fotos de la ficha (glee-catalogo): miniaturas, foto principal, puntos y
 * contador. Es del tema y no tiene un contenedor propio, así que los estilos cuelgan de
 * la clase del `body` (.glee-catalogo-product) y de `.product-images`.
 *
 * Los tokens están copiados de glee-brand/assets/tokens.css, que no se carga en el
 * sitio. Si uno cambia en glee-brand, cambiarlo acá.
 *
 * El ancho de las miniaturas se cambia con la variable del propio tema
 * (`--wd-thumbs-width`). El reparto de columnas entre galería y resumen NO se puede cambiar
 * desde acá: el tema lo escribe en línea (`--wd-col-lg`) según su opción
 * `single_product_style`, que fija tools/single-theme-options.php. Hay una sola excepción
 * de `!important`: el alto de cada miniatura, que el carrusel del tema también escribe en
 * línea y de otra forma no se puede pisar.
 *
 * Celular primero. El corte de escritorio es 1024px, el del prototipo (una variable no
 * sirve dentro de @media).
 */

.glee-catalogo-product {
	--glee-primary: #392869;
	--glee-ink: #161616;
	--glee-ink-muted: #5b5663;
	--glee-background: #ffffff;
	--glee-surface: #f4f4f4;
	--glee-line: #dddddd;
	--glee-catalogo-photo-height: 320px;
	--glee-catalogo-thumb-size: 80px;
	--glee-catalogo-thumb-gap: 12px;
	--glee-catalogo-dot-size: 8px;
}

/* Foto principal: la foto entera sobre gris, sin recortes ni saltos de alto entre fotos. */
.glee-catalogo-product .product-images .wd-gallery-images .wd-carousel-item {
	background: var(--glee-surface);
}

.glee-catalogo-product .product-images .wd-gallery-images .woocommerce-product-gallery__image,
.glee-catalogo-product .product-images .wd-gallery-images .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
}

.glee-catalogo-product .product-images .wd-gallery-images .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Celular: una sola imagen de 320 px, sin miniaturas, con puntos y contador. */
.glee-catalogo-product .product-images {
	position: relative;
}

.glee-catalogo-product .product-images .wd-gallery-thumb {
	display: none;
}

.glee-catalogo-product .product-images .wd-gallery-images .wd-carousel-item {
	height: var(--glee-catalogo-photo-height);
}

.glee-catalogo-product .product-images .wd-gallery-images .wd-nav-pagin-wrap {
	position: absolute;
	right: 0;
	bottom: 12px;
	left: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.glee-catalogo-product .product-images .wd-gallery-images .wd-nav-pagin {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.glee-catalogo-product .product-images .wd-gallery-images .wd-nav-pagin-item {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	pointer-events: auto;
}

.glee-catalogo-product .product-images .wd-gallery-images .wd-nav-pagin-item span {
	display: block;
	width: var(--glee-catalogo-dot-size);
	height: var(--glee-catalogo-dot-size);
	border-radius: 0;
	background: var(--glee-ink-muted);
	opacity: 0.4;
}

.glee-catalogo-product .product-images .wd-gallery-images .wd-nav-pagin-item.wd-active span {
	background: var(--glee-primary);
	opacity: 1;
}

.glee-catalogo-product .product-images .glee-catalogo-gallery-counter {
	position: absolute;
	right: 12px;
	bottom: 8px;
	padding: 6px 8px;
	border: 1px solid var(--glee-line);
	background: var(--glee-background);
	font-size: 12px;
	line-height: 1;
	color: var(--glee-ink);
	/* Por encima del carrusel, que arma su propia capa. */
	z-index: 2;
}

/* Celular: se pasa de foto deslizando; el prototipo no tiene flechas. */
.glee-catalogo-product .product-images .wd-gallery-images .wd-btn-arrow {
	display: none;
}

/*
 * Escritorio: miniaturas cuadradas de 80 px en una columna a la izquierda (la activa con
 * borde violeta de 2 px) y foto principal cuadrada. Los puntos y el contador sobran: están
 * las miniaturas.
 */
@media (min-width: 1024px) {
	/*
	 * El tema usa `--wd-thumbs-width` para el ancho de la foto principal (100% menos esa variable),
	 * y la columna de miniaturas es lo que sobra sin la separación: por eso la variable vale el
	 * tamaño de la miniatura más la separación.
	 */
	.glee-catalogo-product .product-images .woocommerce-product-gallery.thumbs-position-left {
		--wd-thumbs-width: calc(var(--glee-catalogo-thumb-size) + var(--glee-catalogo-thumb-gap));

		column-gap: var(--glee-catalogo-thumb-gap);
	}

	.glee-catalogo-product .product-images .wd-gallery-thumb {
		display: block;
	}

	.glee-catalogo-product .product-images .wd-gallery-thumb .wd-carousel-item {
		/* !important: el carrusel del tema escribe el alto de la miniatura en línea. */
		height: var(--glee-catalogo-thumb-size) !important;
		box-sizing: border-box;
		border: 1px solid var(--glee-line);
		background: var(--glee-surface);
	}

	.glee-catalogo-product .product-images .wd-gallery-thumb .wd-carousel-item.wd-thumb-active {
		border: 2px solid var(--glee-primary);
	}

	.glee-catalogo-product .product-images .wd-gallery-thumb .wd-carousel-item img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.glee-catalogo-product .product-images .wd-gallery-images .wd-carousel-item {
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.glee-catalogo-product .product-images .wd-gallery-images .wd-nav-pagin-wrap,
	.glee-catalogo-product .product-images .glee-catalogo-gallery-counter {
		display: none;
	}
}