/**
 * Super — Imágenes: lo que se ve en la tienda.
 *
 * Tres cosas y nada más: la caja del `<picture>`, el placeholder de rubro y la
 * línea de la fecha del lote.
 *
 * ── Ningún color literal ────────────────────────────────────────────────────
 *
 * Todos salen de las custom properties que genera el `theme.json` de
 * `super-tienda` (`--wp--custom--marca--*`), igual que en el CSS del tema:
 * cambiar la paleta en Apariencia → Editor cambia también esto. Los respaldos
 * de `var()` existen para el día que este plugin corra con otro tema: no se ve
 * roto, se ve gris.
 *
 * ── Propiedades en orden alfabético ─────────────────────────────────────────
 *
 * Y propiedades lógicas (`inset-block-start`, `margin-block`), que es la
 * convención de `assets/css/tienda.css`.
 */

[class^="super-img-"],
[class*=" super-img-"],
[class^="super-img-"]::before,
[class^="super-img-"]::after {
	box-sizing: border-box;
}

/* ══ La caja del <picture> ═════════════════════════════════════════════════ */

/*
 * `<picture>` es `inline` por defecto, y la tarjeta del tema espera que su hijo
 * ocupe la caja entera para que el `object-fit: contain` del `<img>` tenga
 * contra qué calcular. Sin esto, la foto queda con una línea de aire abajo (el
 * hueco de la línea base) y desalinea la grilla.
 */
.super-img-picture {
	display: block;
	height: 100%;
	width: 100%;
}

.super-img-picture > img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* ══ El placeholder de rubro ═══════════════════════════════════════════════ */

/*
 * No es un cuadro gris con una imagen rota: es el ícono del rubro, en el gris
 * de la marca sobre el fondo que la tarjeta ya usa para la foto. La diferencia
 * es la que hay entre "acá falló algo" y "todavía no le sacamos la foto", que
 * es lo que efectivamente pasa.
 */
.super-img-vacio {
	align-items: center;
	background: var(--wp--custom--marca--fondo, #f6f5f3);
	color: var(--wp--custom--marca--gris, #6b6560);
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.super-img-vacio__icono {
	/*
	 * El ícono ocupa poco menos de la mitad de la caja. Más grande empieza a
	 * parecer un logo; más chico, un error de carga.
	 */
	height: 44%;
	max-height: 128px;
	max-width: 128px;
	width: 44%;
}

/*
 * En la ficha el placeholder no está adentro de una caja con medidas: se las
 * pone él, cuadrada, del ancho de la columna de la galería.
 */
.super-img-vacio--ficha {
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--radio--medio, 12px);
}

.woocommerce-product-gallery__image--placeholder {
	width: 100%;
}

/* ══ La fecha del lote ═════════════════════════════════════════════════════ */

/*
 * Es la única línea de este plugin que lee un cliente, y dice de cuándo es la
 * foto que está mirando. Va en el rojo suave de la marca —no en gris de nota al
 * pie— porque es una promesa, no una aclaración legal.
 */
.super-img-lote {
	align-items: center;
	background: var(--wp--custom--marca--rojo-suave, #fdeded);
	border-radius: var(--wp--custom--radio--chico, 8px);
	color: var(--wp--custom--marca--rojo-oscuro, #9a1414);
	display: flex;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
	gap: 8px;
	line-height: 1.3;
	margin-block: var(--wp--preset--spacing--20, 12px);
	padding: 10px 12px;
}

/*
 * El puntito es decorativo y se dibuja con CSS: un emoji de cámara se ve
 * distinto en cada sistema y un lector de pantalla lo lee en voz alta.
 */
.super-img-lote::before {
	background: currentColor;
	border-radius: 50%;
	content: "";
	flex: 0 0 auto;
	height: 8px;
	width: 8px;
}