/*!
 * FG Commerce — card de producto (C13/C16/C18).
 *
 * Extraída de catalog.css en FG-041: la card ya no es exclusiva del catálogo,
 * la Home la reutiliza en su selección editorial. El bundle se carga en las dos
 * superficies para no arrastrar sidebar, filtros y paginación a la portada.
 *
 * `.fg-catalog-item` vive aquí y no en catalog.css porque la imprime el propio
 * parcial de la card, no la rejilla que la contiene.
 *
 * Los valores provienen de assets/css/tokens.css (V4).
 */

.fg-catalog-item {
	display: flex;
	min-width: 0;
}

.fg-card {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--fg-space-12);
	padding: var(--fg-space-16);
	border: var(--fg-border-width) solid var(--fg-color-line);
	border-radius: var(--fg-radius-panel);
	background: var(--fg-color-surface);
}

.fg-card:hover {
	border-color: var(--fg-color-action);
}

/*
 * Marco cuadrado y blanco: las fotografías del proveedor son cuadradas y vienen
 * sobre blanco. Con el fondo de papel y una caja más ancha o más alta que la
 * foto, cada producto quedaba entre dos franjas beige (a los lados en
 * escritorio, arriba y abajo en móvil, donde la caja medía 72 × 136).
 */
.fg-card-media {
	display: flex;
	align-items: center;
	align-self: start;
	justify-content: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--fg-color-surface);
	border-radius: var(--fg-radius-control);
	color: var(--fg-color-muted);
	text-decoration: none;
}

.fg-card-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fg-card-image-fallback {
	/* Con texto al 200 % esta frase es más ancha que la miniatura: se parte
	   antes de desbordar su tarjeta (V4, reflow). El papel vive aquí y no en
	   el marco: marca el hueco sin foto sin enmarcar las fotos de verdad. */
	display: flex;
	align-items: center;
	align-self: stretch;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: var(--fg-space-8);
	background: var(--fg-color-paper);
	overflow-wrap: anywhere;
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
	text-align: center;
}

/* El `display: flex` de arriba anularía el `hidden` que lleva el hueco cuando
   la imagen sí existe (está en el marcado por si la carga falla). */
.fg-card-image-fallback[hidden] {
	display: none;
}

.fg-card-identity {
	min-width: 0;
}

.fg-card-brand {
	margin: 0 0 var(--fg-space-4);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-card-title {
	margin: 0 0 var(--fg-space-8);
	font-size: var(--fg-font-size-card-title);
	line-height: var(--fg-line-height-card);
}

.fg-card-link {
	color: var(--fg-color-ink);
	text-decoration: none;
}

.fg-card-link:where(:hover) {
	text-decoration: underline;
}

.fg-card-presentation,
.fg-card-sku,
.fg-card-technical,
.fg-card-variants {
	margin: 0 0 var(--fg-space-8);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-card-label {
	color: var(--fg-color-muted);
}

.fg-card-commerce {
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
	gap: var(--fg-space-4);
	margin-block-start: var(--fg-space-4);
}

/*
 * El importe es el dato que el comprador busca primero en la rejilla: se
 * compone en el verde de marca para separarlo de la tinta del resto de filas.
 * El token da 6.59:1 sobre papel, por encima del 4.5:1 de AA (V4 §Contraste).
 */
.fg-card-price {
	margin: 0;
	color: var(--fg-color-action);
	font-size: var(--fg-font-size-price);
	font-variant-numeric: tabular-nums;
	font-weight: var(--fg-font-weight-strong);
	line-height: var(--fg-line-height-price);
}

.fg-card-price-unit {
	font-size: var(--fg-font-size-body);
	font-weight: var(--fg-font-weight-regular);
}

/*
 * «Consultar precio» no es un importe: es un estado. En el verde y el cuerpo
 * del precio se leía como un enlace y competía con el botón de WhatsApp, que
 * es justamente la acción que resuelve la consulta. El verde queda para los
 * importes reales.
 */
.fg-card-price-consult {
	color: var(--fg-color-ink);
	font-size: var(--fg-font-size-body);
	font-weight: var(--fg-font-weight-control);
	line-height: var(--fg-line-height-body);
}

.fg-card-unit,
.fg-card-availability {
	margin: 0;
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-card-availability {
	color: var(--fg-color-muted);
}

.fg-card-more {
	margin: var(--fg-space-4) 0 0;
}

.fg-card-more-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--fg-touch-target);
	font-weight: var(--fg-font-weight-control);
}

@media (width >= 640px) {
	.fg-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.fg-card-media {
		width: 100%;
	}

	.fg-card-commerce {
		grid-column: auto;
		margin-block-start: auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.fg-card {
		transition: border-color var(--fg-transition-fast);
	}
}