/*!
 * FG Commerce — ficha de producto V4: identidad, imagen, bloque comercial,
 * cantidad y datos del producto. Los valores provienen de assets/css/tokens.css
 * (docs/04-ux-ui/16-product-states-responsive.md).
 */

.fg-product {
	padding-block-end: var(--fg-space-56);
}

/* Geometría: una columna hasta 1023 y dos columnas iguales desde 1024, con la
   imagen a la izquierda y identidad + comercio a la derecha, conservando el
   orden del DOM identidad → imagen → comercio. */

.fg-product-layout {
	display: grid;
	gap: var(--fg-space-24);
	max-width: 1280px;
	margin-block: var(--fg-space-16) var(--fg-space-32);
}

@media (width >= 1024px) {
	.fg-product-layout {
		gap: var(--fg-space-24) var(--fg-space-48);
		grid-template:
			"media identity" auto
			"media commerce" 1fr
			/ 1fr 1fr;
	}

	.fg-product-identity {
		grid-area: identity;
	}

	.fg-product-media {
		grid-area: media;
	}

	.fg-product-commerce {
		grid-area: commerce;
	}
}

/* Identidad (C17) */

/*
 * La marca se escribe como la publica el fabricante, igual que en la card, y
 * no como una etiqueta en versales espaciadas sobre el título: así se lee
 * «Makita» y no «MAKITA», y el nombre del producto manda en la cabecera.
 */
.fg-product-brand {
	margin: 0 0 var(--fg-space-4);
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-body);
	font-weight: var(--fg-font-weight-control);
	line-height: var(--fg-line-height-body);
}

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

.fg-product-sku {
	margin: 0;
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-product-sku-value {
	color: var(--fg-color-ink);
}

/* Imagen y galería (C16) */

.fg-product-figure {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	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);
}

@media (width >= 640px) {
	.fg-product-figure {
		min-height: 240px;
	}
}

.fg-product-image {
	max-width: 100%;
	max-height: 560px;
	height: auto;
	object-fit: contain;
}

.fg-product-image-empty {
	margin: 0;
	padding: var(--fg-space-32) var(--fg-space-16);
	border: var(--fg-border-width) dashed var(--fg-color-line);
	border-radius: var(--fg-radius-panel);
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	text-align: center;
}

.fg-product-figure .fg-product-image-empty {
	border: 0;
	padding: 0;
}

.fg-product-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-space-8);
	margin: var(--fg-space-12) 0 0;
	padding: 0;
	list-style: none;
}

.fg-product-thumb-button {
	display: block;
	padding: var(--fg-space-4);
	border: var(--fg-border-width) solid var(--fg-color-line);
	border-radius: var(--fg-radius-control);
	background: var(--fg-color-surface);
	cursor: pointer;
	min-width: var(--fg-touch-target);
	min-height: var(--fg-touch-target);
}

.fg-product-thumb-button[aria-pressed="true"] {
	border-color: var(--fg-color-action);
	border-width: var(--fg-border-width-strong);
}

.fg-product-thumb-image {
	display: block;
	width: 56px;
	height: auto;
}

/* Bloque comercial (C18–C20) */

.fg-product-commerce {
	display: flex;
	flex-direction: column;
	gap: var(--fg-space-16);
}

.fg-product-variations table.variations {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.fg-product-variations table.variations th,
.fg-product-variations table.variations td {
	display: block;
	padding: 0;
	text-align: start;
}

.fg-product-variations table.variations th.label {
	margin-block-end: var(--fg-space-4);
	font-weight: var(--fg-font-weight-control);
}

.fg-product-variations table.variations tr + tr {
	display: block;
	margin-block-start: var(--fg-space-16);
}

.fg-product-variations select {
	width: 100%;
	max-width: 420px;
	min-height: var(--fg-control-height);
	padding: var(--fg-space-8) var(--fg-space-12);
	border: var(--fg-border-width) solid var(--fg-color-control);
	border-radius: var(--fg-radius-control);
	background: var(--fg-color-surface);
	color: var(--fg-color-ink);
	font-family: inherit;
	font-size: var(--fg-font-size-body);
}

.fg-product-variations td.value a {
	display: inline-block;
	margin-block-start: var(--fg-space-8);
	font-size: var(--fg-font-size-small);
}

.fg-product-presentation,
.fg-product-unit {
	margin: 0;
	line-height: var(--fg-line-height-body);
}

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

/*
 * Mismo tratamiento que en la card: el importe lleva el verde de marca y la
 * unidad se queda en la tinta apagada. El token da 6.59:1 sobre papel (AA).
 */
.fg-product-price {
	margin: var(--fg-space-8) 0 0;
	color: var(--fg-color-action);
	font-size: var(--fg-font-size-price-detail);
	font-weight: var(--fg-font-weight-strong);
	line-height: var(--fg-line-height-price);
}

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

/* Mismo criterio que la card: sin importe no hay verde ni cuerpo de precio. */
.fg-product-price-consult {
	color: var(--fg-color-ink);
	font-size: var(--fg-font-size-lead);
	font-weight: var(--fg-font-weight-control);
	line-height: var(--fg-line-height-body);
}

/* Resumen de cerámica (V4, FG-062) */

.fg-ceramic-summary {
	display: grid;
	gap: var(--fg-space-4);
	margin: var(--fg-space-8) 0 0;
}

.fg-ceramic-summary-row {
	display: grid;
	gap: var(--fg-space-4);
}

@media (width >= 640px) {
	.fg-ceramic-summary-row {
		grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
		column-gap: var(--fg-space-24);
	}
}

.fg-ceramic-summary-label {
	margin: 0;
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-ceramic-summary-value {
	margin: 0;
	overflow-wrap: anywhere;
}

.fg-ceramic-summary-note {
	display: block;
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-product-availability {
	margin: 0;
	color: var(--fg-color-muted);
}

.fg-product-notice {
	margin: var(--fg-space-8) 0 0;
	padding: var(--fg-space-12);
	border-radius: var(--fg-radius-control);
	background: var(--fg-color-paper);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-product-notice-error {
	background: var(--fg-color-surface);
	border: var(--fg-border-width) solid var(--fg-color-error);
	color: var(--fg-color-error);
}

/* Cantidad (C20) */

.fg-product-quantity {
	display: flex;
	flex-direction: column;
	gap: var(--fg-space-4);
	max-width: 420px;
}

.fg-product-quantity-label {
	font-weight: var(--fg-font-weight-control);
}

.fg-product-quantity-input {
	width: 100%;
	max-width: 160px;
	min-height: var(--fg-control-height);
	padding: var(--fg-space-8) var(--fg-space-12);
	border: var(--fg-border-width) solid var(--fg-color-control);
	border-radius: var(--fg-radius-control);
	background: var(--fg-color-surface);
	color: var(--fg-color-ink);
	font-family: inherit;
	font-size: var(--fg-font-size-body);
}

.fg-product-quantity-input[aria-invalid="true"] {
	border-color: var(--fg-color-error);
	border-width: var(--fg-border-width-strong);
}

.fg-product-quantity-help {
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-product-quantity-error {
	margin: 0;
	color: var(--fg-color-error);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

/* Datos del producto (C22) y descripción */

.fg-product-technical,
.fg-product-description {
	max-width: 1280px;
	margin-block-start: var(--fg-space-48);
}

.fg-product-technical-title,
.fg-product-description-title {
	margin: 0 0 var(--fg-space-16);
	font-size: var(--fg-font-size-section-title);
	line-height: var(--fg-line-height-heading);
}

.fg-product-specs {
	margin: 0;
	border-block-start: var(--fg-border-width) solid var(--fg-color-line);
}

.fg-product-spec {
	display: grid;
	gap: var(--fg-space-4);
	padding-block: var(--fg-space-12);
	border-block-end: var(--fg-border-width) solid var(--fg-color-line);
}

@media (width >= 768px) {
	.fg-product-spec {
		grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
		column-gap: var(--fg-space-24);
	}
}

.fg-product-spec-label {
	margin: 0;
	color: var(--fg-color-muted);
}

.fg-product-spec-value {
	margin: 0;
}

.fg-product-spec-note {
	display: block;
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-product-description-body {
	max-width: var(--fg-reading-width);
}

.fg-product-description-body > :last-child {
	margin-block-end: 0;
}

/* Enlace informativo de la ficha de pintura (V4, FG-061) */

.fg-product-paint-center {
	max-width: 1280px;
	margin-block-start: var(--fg-space-32);
}

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

/* Estado sin snapshot comercial */

.fg-product-unavailable {
	padding-block: var(--fg-space-48);
	max-width: var(--fg-reading-width);
}

.fg-product-unavailable-title {
	margin: 0 0 var(--fg-space-12);
	font-size: var(--fg-font-size-page-title);
	line-height: var(--fg-line-height-heading);
}

.fg-product-unavailable-note {
	margin: 0 0 var(--fg-space-24);
	color: var(--fg-color-muted);
}

/* Estado ocupado mientras se resuelve una selección */

.fg-product-commerce[aria-busy="true"] {
	opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
	.fg-product-commerce {
		transition: opacity var(--fg-transition-fast) ease-out;
	}
}