/*
 * Galería del producto.
 *
 * El carrusel es `woocommerce/product-gallery`, el bloque de la Interactivity
 * API: se mueve solo, cambia de foto al elegir una variación y trae sus propios
 * botones de anterior y siguiente. Acá se hacen dos cosas: decidir cuánto ancho
 * se lleva la foto y vestir esos botones como la referencia.
 *
 * CSS a mano y no SCSS del build porque no acompaña a ningún JavaScript: es
 * solo la piel de un carrusel que ya existe.
 */

/*
 * El ancho de la foto lo manda la columna.
 *
 * Antes lo mandaba el alto disponible: el ancho se topeaba en
 * `(100vh - 5rem) * 0.8` para que el precio y el botón de compra no quedaran
 * abajo del fold. En un portátil de 900px eso dejaba la foto en 586px cuando la
 * columna daba 739, y el tope solo se soltaba en pantallas de 1080 para arriba,
 * así que en la mayoría de los escritorios la foto se veía angosta y con aire
 * al costado.
 *
 * Se invierte la prioridad: la foto usa el 52% de la fila y se acepta que en
 * pantallas bajas la info quede apenas más abajo. La imagen es lo que vende el
 * producto y sigue entera —nunca se recorta—; el precio y el botón están a un
 * scroll corto.
 *
 * El tope sigue disponible en una variable, sin valor por defecto: un tema o
 * una página pueden reponerlo con `--caprii-gallery-max-width` sin tocar esta
 * hoja.
 */
:root {
	--caprii-gallery-cap: var( --caprii-gallery-max-width, none );
}

.wp-block-woocommerce-product-gallery {
	position: relative;
	max-width: var( --caprii-gallery-cap );
}

/*
 * La columna acompaña al tope, si alguien lo repone.
 *
 * La columna mide el 52% y no se encoge —el bloque le pone `flex-grow: 0`—, así
 * que con un tope más angosto que ella lo que sobra queda adentro como aire y
 * la info del producto se ve lejos de la imagen. Con el mismo tope en las dos,
 * el sobrante no existe.
 */
.wp-block-column:has( > .wp-block-woocommerce-product-gallery ) {
	max-width: var( --caprii-gallery-cap );
}

/*
 * Las flechas.
 *
 * El bloque las reparte a los costados de la foto —`space-between` y centradas
 * en vertical—; la referencia las tiene juntas abajo a la derecha, sobre el
 * color de fondo. Se recoloca el contenedor y se dibuja la flecha con dos
 * bordes rotados: una línea fina y una punta, sin depender de ninguna
 * tipografía de iconos.
 */

/*
 * La capa de controles va 5px adentro de la foto, lo que deja la barra
 * despegada de la esquina. Se la lleva al borde para que apoye contra el filo.
 */
.wc-block-product-gallery-large-image__inner-blocks {
	inset: 0;
	width: 100%;
	height: 100%;
}

.wc-block-product-gallery-large-image .wc-block-next-previous-buttons {
	justify-content: flex-end;
	align-items: flex-end;
	gap: 0;
}

.wc-block-next-previous-buttons__button {
	position: relative;
	width: clamp( 3rem, 7vw, 3.75rem );
	height: clamp( 2.5rem, 6vw, 3.125rem );
	padding: 0;
	border: 0;
	background: var( --c-base, #f2f0ea );
	cursor: pointer;
	transition: background-color 0.2s ease;
}

/* El separador de la referencia es el borde entre los dos botones. */
.wc-block-next-previous-buttons__button + .wc-block-next-previous-buttons__button {
	border-left: 1px solid var( --c-border, #cecec8 );
}

/* El chevron que trae el bloque se apaga: la flecha se dibuja acá. */
.wc-block-next-previous-buttons__icon {
	display: none;
}

.wc-block-next-previous-buttons__button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.25rem;
	height: 1px;
	background: var( --c-ink-soft, #575754 );
	transform: translate( -50%, -50% );
	transition: background-color 0.2s ease;
}

/* La punta: medio cuadrado con dos bordes, girado 45°. */
.wc-block-next-previous-buttons__button::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 0.45rem;
	height: 0.45rem;
	border-top: 1px solid var( --c-ink-soft, #575754 );
	transition: border-color 0.2s ease;
}

.wc-block-next-previous-buttons__button:first-child::after {
	left: calc( 50% - 0.625rem );
	border-left: 1px solid var( --c-ink-soft, #575754 );
	transform: translateY( -50% ) rotate( -45deg );
}

.wc-block-next-previous-buttons__button:last-child::after {
	right: calc( 50% - 0.625rem );
	border-right: 1px solid var( --c-ink-soft, #575754 );
	transform: translateY( -50% ) rotate( 45deg );
}

.wc-block-next-previous-buttons__button:hover {
	background: var( --c-base-alt, #edeae4 );
}

.wc-block-next-previous-buttons__button:hover::before {
	background: var( --c-ink, #141414 );
}

.wc-block-next-previous-buttons__button:hover::after {
	border-color: var( --c-ink, #141414 );
}

.wc-block-next-previous-buttons__button:focus-visible {
	outline: 2px solid var( --c-ink, #141414 );
	outline-offset: -2px;
}

/*
 * En la primera y la última foto el bloque marca el botón con `aria-disabled`
 * pero lo deja clickeable. Se apaga acá, igual que se veía antes: la flecha se
 * queda a la vista —en un teléfono no hay hover y una que aparece sola no se
 * descubre— pero deja de responder.
 */
.wc-block-next-previous-buttons__button[aria-disabled='true'] {
	opacity: 0.35;
	pointer-events: none;
}

/*
 * Con una sola foto no hace falta esconder nada: el bloque no llega a
 * renderizar los botones si el producto tiene una imagen sola.
 */

/*
 * La lupa.
 *
 * Agranda la foto dentro de su marco y deja recorrerla; el gesto lo atiende
 * `assets/js/gallery-zoom.js`. Va en la esquina opuesta a
 * las flechas y vestida igual que ellas —mismo tamaño, mismo fondo— para que
 * se lea como parte del mismo juego de controles. La capa donde vive es una
 * columna flex; se la saca del flujo para que no empuje a las flechas.
 */
.caprii-gallery-zoom {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp( 3rem, 7vw, 3.75rem );
	height: clamp( 2.5rem, 6vw, 3.125rem );
	padding: 0;
	border: 0;
	background: var( --c-base, #f2f0ea );
	color: var( --c-ink-soft, #575754 );
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.caprii-gallery-zoom:hover {
	background: var( --c-base-alt, #edeae4 );
	color: var( --c-ink, #141414 );
}

.caprii-gallery-zoom:focus-visible {
	outline: 2px solid var( --c-ink, #141414 );
	outline-offset: -2px;
}

/* Con el zoom puesto la lupa pasa de «+» a «−»: se apaga el trazo vertical. */
.caprii-gallery-zoom[aria-pressed='true'] .caprii-gallery-zoom__plus {
	display: none;
}

/*
 * La foto agrandada. La escala y el punto que se mira los pone el script; acá
 * va lo que la acompaña: que el dedo arrastre la foto en vez de la página, y
 * que solo se anime la entrada y la salida, no cada paso del recorrido.
 */
.wc-block-woocommerce-product-gallery-large-image__image.is-caprii-zoomed {
	cursor: zoom-out;
	touch-action: none;
	transition: transform 0.2s ease;
}