/*!
 * FG Commerce — catálogo V4: encabezado de archivo, grid, card, paginación y
 * estados vacíos. Los valores provienen de assets/css/tokens.css (V4).
 */

.fg-catalog-head {
	padding-block: var(--fg-space-24) var(--fg-space-32);
}

.fg-catalog-title {
	margin-block-end: var(--fg-space-8);
}

.fg-catalog-lead {
	max-width: var(--fg-reading-width);
	color: var(--fg-color-muted);
}

.fg-catalog-lead > :last-child {
	margin-block-end: 0;
}

.fg-category-hero {
	position: relative;
	display: flex;
	min-height: 180px;
	align-items: end;
	margin-block: var(--fg-space-16) var(--fg-space-32);
	overflow: hidden;
	border-radius: var(--fg-radius-panel);
	background:
		linear-gradient(135deg, rgb(255 255 255 / 8%) 25%, transparent 25%) 0 0 / 32px 32px,
		var(--fg-color-action-pressed);
	color: var(--fg-color-surface);
}

/*
 * La imagen de categoría es una foto de producto del proveedor, cuadrada y
 * sobre blanco. Estirada como fondo del banner se ampliaba hasta verse borrosa
 * bajo el degradado. Ahora va entera, en una ficha blanca a la derecha, y el
 * texto queda sobre el verde liso. En móvil la ficha no cabe junto al título y
 * se omite: el banner sigue siendo el verde de la categoría.
 */
.fg-category-hero-image {
	display: none;
}

@media (width >= 640px) {
	.fg-category-hero.has-image {
		align-items: center;
	}

	.fg-category-hero-image {
		position: relative;
		z-index: 1;
		display: block;
		flex: 0 0 auto;
		order: 2;
		box-sizing: border-box;
		width: 176px;
		height: 176px;
		margin: var(--fg-space-24) var(--fg-space-24) var(--fg-space-24) auto;
		padding: var(--fg-space-12);
		border-radius: var(--fg-radius-panel);
		background: var(--fg-color-surface);
		object-fit: contain;
	}
}

.fg-category-hero-overlay {
	position: relative;
	z-index: 1;
	max-width: 760px;
	padding: var(--fg-space-24);
}

.fg-category-hero-title {
	margin: 0;
	color: inherit;
}

.fg-category-hero-lead {
	margin-block-start: var(--fg-space-8);
	color: var(--fg-color-surface);
}

.fg-category-hero-lead > :last-child {
	margin-block-end: 0;
}

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

.fg-catalog-count {
	margin: 0 0 var(--fg-space-20);
	color: var(--fg-color-muted);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
}

.fg-catalog-count:focus {
	outline: var(--fg-focus-ring-width) solid var(--fg-color-focus);
	outline-offset: var(--fg-focus-ring-offset);
}

.fg-catalog-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--fg-space-20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fg-space-12);
	margin-block-start: var(--fg-space-32);
}

.fg-pagination-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--fg-touch-target);
	padding-inline: var(--fg-space-12);
	color: var(--fg-color-ink);
	font-weight: var(--fg-font-weight-control);
}

.fg-pagination-link.is-disabled {
	color: var(--fg-color-muted);
}

.fg-pagination-status {
	font-size: var(--fg-font-size-small);
}

.fg-pagination-pages {
	display: none;
	gap: var(--fg-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-pagination-item {
	display: inline-flex;
}

.fg-pagination-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--fg-touch-target);
	min-height: var(--fg-touch-target);
	padding-inline: var(--fg-space-8);
	color: var(--fg-color-ink);
	text-decoration: none;
}

.fg-pagination-page.is-current {
	border: var(--fg-border-width-strong) solid var(--fg-color-action);
	border-radius: var(--fg-radius-control);
	font-weight: var(--fg-font-weight-strong);
}

.fg-pagination-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--fg-space-24);
	color: var(--fg-color-muted);
}

.fg-catalog-empty {
	padding-block: var(--fg-space-40) var(--fg-space-56);
}

.fg-catalog-empty-message {
	font-size: var(--fg-font-size-card-title);
	font-weight: var(--fg-font-weight-control);
}

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

	.fg-pagination {
		justify-content: center;
	}

	.fg-pagination-status {
		display: none;
	}

	.fg-pagination-pages {
		display: flex;
	}
}

@media (width >= 1280px) {
	.fg-catalog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Último escalón del contenedor (tokens.css: caja 1440 y `--fg-container-padding`
   de 40 px dejan 1360 px útiles). Es el ancho para el que V4.1 §2 dimensiona la
   rejilla de cuatro columnas; por debajo la card se estrecharía de más. */
@media (width >= 1440px) {
	.fg-catalog-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Filtros y búsqueda (FG-051) ------------------------------------------- */

.fg-catalog-layout {
	display: grid;
	gap: var(--fg-space-24);
}

.fg-catalog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fg-space-12);
}

.fg-catalog-toolbar .fg-catalog-count {
	margin-block-end: 0;
}

.fg-filters-trigger {
	min-height: 48px;
	margin-inline-start: auto;
}

/* El panel se imprime abierto para que sea alcanzable sin JavaScript. La regla
   se ata a `[open]` a propósito: un diálogo cerrado debe seguir oculto por la
   hoja del navegador cuando el script lo cierra para abrirlo como modal. */
.fg-filters-panel[open] {
	display: block;
	position: static;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: var(--fg-border-width) solid var(--fg-color-line);
	border-radius: var(--fg-radius-panel);
	background-color: var(--fg-color-surface);
	color: inherit;
	inset: auto;
}

.fg-filters-panel::backdrop {
	background-color: rgb(20 23 15 / 55%);
}

.fg-filters-form {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: var(--fg-space-20);
	gap: var(--fg-space-20);
}

.fg-filters-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fg-space-12);
}

.fg-filters-title {
	margin: 0;
	font-size: 1.5rem;
	line-height: var(--fg-line-height-heading);
}

.fg-filters-close {
	min-height: var(--fg-touch-target);
	padding-inline: var(--fg-space-12);
	border: var(--fg-border-width) solid var(--fg-color-line);
	border-radius: var(--fg-radius-control);
	background-color: transparent;
	color: inherit;
	font: inherit;
	font-weight: var(--fg-font-weight-control);
	cursor: pointer;
}

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

.fg-filters-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	gap: var(--fg-space-20);
	overflow-y: auto;
}

.fg-filters-group {
	margin: 0;
	padding: 0;
	border: 0;
}

.fg-filters-legend {
	display: flex;
	padding: 0;
	gap: var(--fg-space-4);
	font-size: var(--fg-font-size-group-title);
	font-weight: var(--fg-font-weight-strong);
	line-height: var(--fg-line-height-heading);
}

.fg-filters-legend-count {
	color: var(--fg-color-muted);
	font-weight: var(--fg-font-weight-regular);
}

.fg-filters-options {
	margin-block-start: var(--fg-space-8);
}

/*
 * Lista larga: se desplaza, con una altura de seis filas y media. La media
 * fila visible es la pista de que hay más; una altura que corta justo entre
 * filas parece una lista completa.
 */
.fg-filters-options-long {
	max-height: calc(var(--fg-touch-target) * 6.5);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.fg-filters-option {
	display: flex;
	align-items: center;
	min-height: var(--fg-touch-target);
	gap: var(--fg-space-12);
}

.fg-filters-control {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	accent-color: var(--fg-color-action);
}

.fg-filters-option-label {
	flex: 1 1 auto;
	padding-block: var(--fg-space-8);
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
	cursor: pointer;
}

.fg-filters-foot {
	display: flex;
	flex-direction: column;
	padding-block-start: var(--fg-space-16);
	border-block-start: var(--fg-border-width) solid var(--fg-color-line);
	gap: var(--fg-space-8);
}

.fg-filters-foot > * {
	width: 100%;
	text-align: center;
}

.fg-catalog-active {
	margin-block-end: var(--fg-space-20);
}

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

.fg-chip-remove,
.fg-chip-clear-link,
.fg-chip-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--fg-touch-target);
	padding-inline: var(--fg-space-12);
	gap: var(--fg-space-8);
	border: var(--fg-border-width) solid var(--fg-color-line);
	border-radius: var(--fg-radius-control);
	color: inherit;
	font-size: var(--fg-font-size-small);
	line-height: var(--fg-line-height-small);
	text-decoration: none;
}

.fg-chip-remove:hover,
.fg-chip-clear-link:hover,
.fg-chip-link:hover {
	border-color: var(--fg-color-action);
	color: var(--fg-color-action-pressed);
}

.fg-chip-icon {
	font-size: var(--fg-font-size-body);
}

.fg-catalog-empty-hint {
	max-width: var(--fg-reading-width);
	margin-block: var(--fg-space-8) 0;
	color: var(--fg-color-muted);
}

/* Salidas del estado vacío (C15): botones en fila que envuelven en móvil, sin
   que ninguno pierda el objetivo táctil de `.fg-button`. */
.fg-catalog-empty-actions {
	display: flex;
	flex-wrap: wrap;
	margin-block: var(--fg-space-24) 0;
	gap: var(--fg-space-12);
}

.fg-catalog-empty-categories {
	margin-block-start: var(--fg-space-32);
}

.fg-catalog-empty-subtitle {
	margin-block-end: var(--fg-space-12);
	font-size: var(--fg-font-size-card-title);
}


/* Panel modal (<1024 con JavaScript): lateral derecho, ancho completo en móvil.
   Solo se aplica cuando el script lo abre con showModal(); sin JavaScript el
   panel sigue en el flujo del documento y es alcanzable. */
.fg-filters-panel[data-fg-modal] {
	position: fixed;
	max-width: 440px;
	max-height: 100dvh;
	height: 100dvh;
	margin-inline-start: auto;
	border: 0;
	border-radius: 0;
	inset: 0 0 0 auto;
}

.fg-filters-panel[data-fg-modal] .fg-filters-form {
	max-height: 100%;
	padding: var(--fg-space-16);
}

.fg-filters-panel[data-fg-modal] .fg-filters-foot {
	position: sticky;
	bottom: 0;
	padding-block-end: var(--fg-space-16);
	background-color: var(--fg-color-surface);
}

/* Las opciones no crean un subscroll dentro del panel modal: desplazan el
   cuerpo completo, como pide V4 para anchos estrechos. */
.fg-filters-panel[data-fg-modal] .fg-filters-options {
	max-height: none;
	overflow-y: visible;
}

@media (width < 640px) {
	.fg-filters-panel[data-fg-modal] {
		max-width: none;
		width: 100%;
	}
}

@media (width >= 1024px) {
	.fg-category-hero {
		min-height: 240px;
	}

	.fg-category-hero-overlay {
		padding: var(--fg-space-40);
	}

	.fg-category-hero-image {
		width: 200px;
		height: 200px;
		margin-inline-end: var(--fg-space-40);
	}

	.fg-catalog-layout {
		align-items: start;
		gap: var(--fg-space-32);
		grid-template-columns: 240px minmax(0, 1fr);
	}

	/* Sin facetas que ofrecer, `template-parts/catalog/filters.php` no imprime
	   el aside y la región de resultados pasa a ser el primer hijo del layout:
	   caería en la pista de 240 px reservada al sidebar y dejaría vacío el
	   resto de la fila. Como primer hijo ocupa entonces las dos pistas, así la
	   rejilla sirve con aside y sin él sin tocar la plantilla. */
	.fg-catalog-results:first-child {
		grid-column: 1 / -1;
	}

	.fg-filters-panel[open] {
		position: sticky;
		top: var(--fg-space-16);
	}

	.fg-filters-trigger {
		display: none !important;
	}

	.fg-filters-foot {
		flex-flow: row wrap;
	}

	.fg-filters-foot > * {
		flex: 1 1 100%;
	}
}