/**
 * Estilos públicos del catálogo de Grupo Salas.
 *
 * Usa las variables de color del tema hijo, con valores de respaldo por si
 * el CSS se carga antes o el tema cambia: así el catálogo nunca se ve roto.
 */

/* ==========================================================================
   Filtros
   ========================================================================== */

/* Sobre el fondo gris del sitio, la barra de filtros va en blanco: se
   despega por diferencia de tono, sin necesitar un borde marcado. */
.gs-filtros {
	margin: 0 0 30px;
	padding: 20px 22px;
	background-color: var(--gs-fondo-elevado, #FFFFFF);
	border: 1px solid rgba(0, 31, 78, .06);
	border-radius: var(--gs-radio, 10px);
	box-shadow: 0 1px 2px rgba(0, 31, 78, .04);
}

.gs-filtros__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

.gs-filtros__campo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 160px;
	flex: 1 1 160px;
}

.gs-filtros__campo--buscar {
	flex: 2 1 220px;
}

.gs-filtros__campo label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--gs-texto-suave, #6B7280);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.gs-filtros__campo input[type="search"],
.gs-filtros__campo select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--gs-borde, #E5E7EB);
	border-radius: var(--gs-radio-chico, 6px);
	background-color: #FFFFFF;
	font-size: .95rem;
	color: var(--gs-texto, #1F2937);
}

/* La casilla de destacados no necesita ocupar una columna entera */
.gs-filtros__campo--check {
	flex: 0 0 auto;
	min-width: 0;
	justify-content: flex-end;
	padding-bottom: 9px;
}

.gs-filtros__campo--check label {
	display: flex;
	align-items: center;
	gap: 7px;
	text-transform: none;
	letter-spacing: normal;
	font-size: .9rem;
	color: var(--gs-texto, #1F2937);
	cursor: pointer;
}

.gs-filtros__acciones {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding-bottom: 1px;
}

.gs-boton-filtro {
	display: inline-block;
	padding: 10px 22px;
	border: 2px solid var(--gs-principal, #001F4E);
	border-radius: var(--gs-radio-chico, 6px);
	background-color: var(--gs-principal, #001F4E);
	color: #FFFFFF;
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.gs-boton-filtro:hover,
.gs-boton-filtro:focus {
	background-color: var(--gs-principal-oscuro, #001536);
	border-color: var(--gs-principal-oscuro, #001536);
	color: #FFFFFF;
}

.gs-limpiar {
	font-size: .9rem;
	color: var(--gs-texto-suave, #6B7280);
	text-decoration: underline;
}

/* ==========================================================================
   Rejilla de productos
   ========================================================================== */

.gs-rejilla {
	display: grid;
	/* auto-fill con minmax: la cuadrícula se adapta sola sin escribir
	   un breakpoint por cada cantidad de columnas. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 26px;
}

/*
 * Tope de cuatro columnas.
 *
 * No es una preferencia estética: la página muestra 12 productos, y 12 se
 * divide exacto entre 4, 3, 2 y 1 columnas, que son las que caben al ir
 * estrechando la pantalla. Dejando que entren 5, la última fila queda con
 * dos huecos y la cuadrícula se ve rota justo al final, que es donde el
 * visitante decide si pasa a la página siguiente.
 *
 * Si algún día cambia POR_PAGINA en class-gs-consulta.php, hay que revisar
 * que el número nuevo siga siendo divisible entre 4, 3, 2 y 1.
 */
@media (min-width: 1100px) {
	.gs-rejilla {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.gs-producto {
	background-color: var(--gs-fondo-elevado, #FFFFFF);
	border: 1px solid rgba(0, 31, 78, .06);
	border-radius: var(--gs-radio, 10px);
	overflow: hidden;
	transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.gs-producto:hover {
	box-shadow: var(--gs-sombra-fuerte, 0 6px 24px rgba(31, 41, 55, .12));
	border-color: transparent;
	transform: translateY(-3px);
}

.gs-producto__enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* Marco de la imagen con proporción fija: evita que la cuadrícula "salte"
   mientras las fotos cargan.

   Cuadrado y no apaisado: el catálogo mezcla carteras, relojes, agendas y
   peluches, que no comparten forma. El cuadrado no favorece a ninguna y deja
   las tarjetas todas iguales, que es lo que hace legible una cuadrícula. */
.gs-producto__marco {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--gs-gris-fondo, #F9FAFB);
	overflow: hidden;
}

.gs-producto__imagen {
	width: 100%;
	height: 100%;

	/* "contain" y no "cover": cover amplía la foto hasta llenar el cuadro y
	   recorta lo que sobresale, así que el producto sale ampliado y cortado.
	   Con contain se ve entero, que es lo único que importa en un catálogo:
	   quien mira tiene que reconocer el artículo de un vistazo. */
	object-fit: contain;

	/* Un poco de aire para que el producto no toque los bordes del marco. */
	padding: 14px;
	box-sizing: border-box;

	display: block;
	transition: transform 300ms ease;
}

.gs-producto:hover .gs-producto__imagen {
	transform: scale(1.04);
}

/* Placeholder cuando el producto todavía no tiene foto */
.gs-producto__sin-imagen {
	display: block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(135deg, #F3F4F6 25%, #E9EBEE 25%, #E9EBEE 50%, #F3F4F6 50%, #F3F4F6 75%, #E9EBEE 75%);
	background-size: 18px 18px;
}

.gs-insignia {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #FFFFFF;
	background-color: var(--gs-principal, #001F4E);
}

.gs-insignia--destacado {
	background-color: #B54708;
}

.gs-insignia--agotado {
	background-color: #B42318;
	left: auto;
	right: 12px;
}

.gs-insignia--proximamente {
	background-color: #B54708;
	left: auto;
	right: 12px;
}

.gs-producto__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 18px 20px 22px;
	flex-grow: 1;
}

.gs-producto__categoria {
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gs-acento, #C98937);
}

.gs-producto__titulo {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.35;
	color: var(--gs-texto, #1F2937);
}

.gs-producto__resumen {
	margin: 0;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--gs-texto-suave, #6B7280);
}

.gs-producto__sku {
	margin-top: auto;
	padding-top: 8px;
	font-size: .78rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: #9CA3AF;
}

/* ==========================================================================
   Sin resultados
   ========================================================================== */

.gs-vacio {
	padding: 60px 24px;
	text-align: center;
	background-color: var(--gs-fondo-elevado, #FFFFFF);
	border: 1px dashed var(--gs-borde, #E5E7EB);
	border-radius: var(--gs-radio, 10px);
}

.gs-vacio__titulo {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--gs-texto, #1F2937);
}

.gs-vacio p {
	color: var(--gs-texto-suave, #6B7280);
}

.gs-vacio .gs-boton-filtro {
	margin-top: 18px;
}

/* ==========================================================================
   Paginación
   ========================================================================== */

.gs-paginacion {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.gs-paginacion .page-numbers {
	display: inline-block;
	min-width: 42px;
	padding: 9px 13px;
	border: 1px solid var(--gs-borde, #E5E7EB);
	border-radius: var(--gs-radio-chico, 6px);
	text-align: center;
	text-decoration: none;
	color: var(--gs-texto, #1F2937);
	font-size: .92rem;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.gs-paginacion .page-numbers:hover {
	background-color: var(--gs-principal-claro, #E9EDF4);
	border-color: var(--gs-principal, #001F4E);
}

.gs-paginacion .page-numbers.current {
	background-color: var(--gs-principal, #001F4E);
	border-color: var(--gs-principal, #001F4E);
	color: #FFFFFF;
	font-weight: 700;
}

.gs-paginacion .page-numbers.dots {
	border-color: transparent;
}

/* ==========================================================================
   Ficha del producto
   ========================================================================== */

/* Dos columnas: visor a la izquierda, datos a la derecha. Es la estructura
   que usa cualquier ficha de producto, y resuelve el problema de fondo del
   diseño anterior: con la imagen a tamaño completo arriba, el nombre del
   producto quedaba fuera de la primera pantalla. */
.gs-ficha__superior {
	display: grid;
	/* La columna de datos es algo más ancha que la del visor: así la imagen
	   acompaña en lugar de dominar, y la tabla de características respira. */
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
	gap: 56px;
	align-items: start;
	margin-bottom: 12px;
}

/* --- Visor de imágenes --- */

.gs-visor {
	position: relative;
}

/* Los botones de opción que controlan el visor: fuera de la vista, pero
   accesibles con el teclado (no se usa display:none por eso mismo). */
.gs-visor__control {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.gs-visor__escena {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: #FFFFFF;
	border: 1px solid var(--gs-borde, #E5E7EB);
	border-radius: var(--gs-radio, 10px);
	overflow: hidden;
}

.gs-visor__lamina {
	display: none;
	margin: 0;
	width: 100%;
	height: 100%;
}

.gs-visor__lamina img {
	width: 100%;
	height: 100%;
	/* 'contain' y no 'cover': en la ficha interesa ver el producto completo,
	   aunque queden márgenes. Recortarlo acá sería esconder información. */
	object-fit: contain;
	display: block;
}

/* Cada botón marcado muestra su lámina. Se escriben las ocho reglas a mano
   porque el visor admite hasta 8 imágenes; así no hace falta generar CSS
   dinámico por producto. */
.gs-visor__control:nth-of-type(1):checked ~ .gs-visor__escena .gs-visor__lamina:nth-child(1),
.gs-visor__control:nth-of-type(2):checked ~ .gs-visor__escena .gs-visor__lamina:nth-child(2),
.gs-visor__control:nth-of-type(3):checked ~ .gs-visor__escena .gs-visor__lamina:nth-child(3),
.gs-visor__control:nth-of-type(4):checked ~ .gs-visor__escena .gs-visor__lamina:nth-child(4),
.gs-visor__control:nth-of-type(5):checked ~ .gs-visor__escena .gs-visor__lamina:nth-child(5),
.gs-visor__control:nth-of-type(6):checked ~ .gs-visor__escena .gs-visor__lamina:nth-child(6),
.gs-visor__control:nth-of-type(7):checked ~ .gs-visor__escena .gs-visor__lamina:nth-child(7),
.gs-visor__control:nth-of-type(8):checked ~ .gs-visor__escena .gs-visor__lamina:nth-child(8) {
	display: block;
}

.gs-visor__minis {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.gs-visor__mini {
	width: 76px;
	height: 76px;
	border: 2px solid var(--gs-borde, #E5E7EB);
	border-radius: var(--gs-radio-chico, 6px);
	overflow: hidden;
	cursor: pointer;
	background-color: #FFFFFF;
	transition: border-color 150ms ease, transform 150ms ease;
}

.gs-visor__mini img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.gs-visor__mini:hover {
	border-color: var(--gs-acento, #C98937);
	transform: translateY(-2px);
}

/* La miniatura de la imagen que se está viendo queda resaltada */
.gs-visor__control:nth-of-type(1):checked ~ .gs-visor__minis .gs-visor__mini:nth-child(1),
.gs-visor__control:nth-of-type(2):checked ~ .gs-visor__minis .gs-visor__mini:nth-child(2),
.gs-visor__control:nth-of-type(3):checked ~ .gs-visor__minis .gs-visor__mini:nth-child(3),
.gs-visor__control:nth-of-type(4):checked ~ .gs-visor__minis .gs-visor__mini:nth-child(4),
.gs-visor__control:nth-of-type(5):checked ~ .gs-visor__minis .gs-visor__mini:nth-child(5),
.gs-visor__control:nth-of-type(6):checked ~ .gs-visor__minis .gs-visor__mini:nth-child(6),
.gs-visor__control:nth-of-type(7):checked ~ .gs-visor__minis .gs-visor__mini:nth-child(7),
.gs-visor__control:nth-of-type(8):checked ~ .gs-visor__minis .gs-visor__mini:nth-child(8) {
	border-color: var(--gs-principal, #001F4E);
}

/* Foco visible al recorrer las miniaturas con el tabulador */
.gs-visor__control:focus-visible ~ .gs-visor__minis .gs-visor__mini,
.gs-visor__mini:focus-within {
	outline: 3px solid var(--gs-acento, #C98937);
	outline-offset: 2px;
}

.gs-visor--vacio .gs-producto__sin-imagen {
	aspect-ratio: 1 / 1;
	border-radius: var(--gs-radio, 10px);
	border: 1px solid var(--gs-borde, #E5E7EB);
}

/* --- Columna de datos --- */

.gs-ficha__categoria {
	display: inline-block;
	margin-bottom: 10px;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--gs-acento, #C98937);
	text-decoration: none;
}

.gs-ficha__categoria:hover {
	text-decoration: underline;
}

.gs-ficha__nombre {
	margin: 0 0 16px;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.2;
	color: var(--gs-texto, #1F2937);
	text-wrap: balance;
}

.gs-ficha__resumen {
	margin: 0 0 26px;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--gs-texto-suave, #6B7280);
}

.gs-ficha__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--gs-borde, #E5E7EB);
}

.gs-ficha__etiqueta {
	padding: 5px 13px;
	border: 1px solid var(--gs-borde, #E5E7EB);
	border-radius: 999px;
	font-size: .82rem;
	color: var(--gs-texto-suave, #6B7280);
	text-decoration: none;
	transition: border-color 150ms ease, color 150ms ease;
}

.gs-ficha__etiqueta:hover {
	border-color: var(--gs-principal, #001F4E);
	color: var(--gs-principal, #001F4E);
}

.gs-ficha__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.gs-estado {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #FFFFFF;
}

.gs-estado--disponible {
	background-color: var(--gs-principal, #001F4E);
}

.gs-estado--agotado {
	background-color: #B42318;
}

.gs-estado--proximamente {
	background-color: #B54708;
}

.gs-ficha__sku {
	font-size: .88rem;
	color: var(--gs-texto-suave, #6B7280);
}

.gs-ficha__sku code {
	padding: 2px 7px;
	background-color: var(--gs-gris-fondo, #F9FAFB);
	border: 1px solid var(--gs-borde, #E5E7EB);
	border-radius: 4px;
	font-size: .85rem;
}

.gs-ficha__seccion {
	margin: 44px 0 0;
}

.gs-ficha__titulo {
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--gs-principal-claro, #E9EDF4);
	font-size: 1.3rem;
	color: var(--gs-texto, #1F2937);
}

/* --- Galería pública --- */

.gs-galeria-publica {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}

.gs-galeria-publica__item {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--gs-radio-chico, 6px);
	overflow: hidden;
	background-color: var(--gs-gris-fondo, #F9FAFB);
}

.gs-galeria-publica__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}

.gs-galeria-publica__item:hover img {
	transform: scale(1.05);
}

/* --- Tabla de especificaciones --- */

.gs-especificaciones-publica {
	width: 100%;
	border-collapse: collapse;
}

.gs-especificaciones-publica th,
.gs-especificaciones-publica td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--gs-borde, #E5E7EB);
	font-size: .95rem;
}

.gs-especificaciones-publica th {
	width: 42%;
	font-weight: 600;
	color: var(--gs-texto, #1F2937);
	background-color: var(--gs-gris-fondo, #F9FAFB);
}

/* En la columna de datos la tabla es más compacta: ahí compite por espacio
   con el resto de la información, no tiene los 1400px de antes. */
.gs-ficha__info .gs-especificaciones-publica th,
.gs-ficha__info .gs-especificaciones-publica td {
	padding: 10px 14px;
	font-size: .92rem;
}

.gs-ficha__info .gs-especificaciones-publica {
	border: 1px solid var(--gs-borde, #E5E7EB);
	border-radius: var(--gs-radio-chico, 6px);
	overflow: hidden;
}

.gs-especificaciones-publica td {
	color: var(--gs-texto-suave, #6B7280);
}

.gs-especificaciones-publica tr:last-child th,
.gs-especificaciones-publica tr:last-child td {
	border-bottom: 0;
}

/* --- Descarga y navegación --- */

.gs-ficha__descarga {
	margin: 32px 0 0;
}

.gs-ficha__descarga a {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid var(--gs-principal, #001F4E);
	border-radius: var(--gs-radio-chico, 6px);
	color: var(--gs-principal, #001F4E);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease;
}

.gs-ficha__descarga a:hover,
.gs-ficha__descarga a:focus {
	background-color: var(--gs-principal, #001F4E);
	color: #FFFFFF;
}

.gs-ficha__volver {
	margin: 44px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--gs-borde, #E5E7EB);
}

.gs-ficha__volver a {
	color: var(--gs-texto-suave, #6B7280);
	text-decoration: none;
	font-size: .95rem;
}

.gs-ficha__volver a:hover {
	color: var(--gs-principal, #001F4E);
}

/* ==========================================================================
   Pantallas chicas
   ========================================================================== */

/* Tablet: las dos columnas de la ficha se juntan demasiado, así que se
   apilan antes de llegar al móvil. */
@media (max-width: 900px) {
	.gs-ficha__superior {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Apilado, el visor a ancho completo sería desproporcionado */
	.gs-ficha__media {
		max-width: 460px;
	}
}

@media (max-width: 600px) {
	.gs-filtros {
		padding: 16px;
	}

	.gs-ficha__media {
		max-width: none;
	}

	.gs-visor__mini {
		width: 62px;
		height: 62px;
	}

	.gs-filtros__form {
		gap: 13px;
	}

	/* En móvil cada filtro ocupa el ancho completo: apretujarlos los vuelve
	   imposibles de tocar con el dedo. */
	.gs-filtros__campo,
	.gs-filtros__campo--buscar {
		flex: 1 1 100%;
	}

	.gs-filtros__acciones {
		flex: 1 1 100%;
	}

	.gs-boton-filtro {
		flex-grow: 1;
		text-align: center;
	}

	.gs-rejilla {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.gs-especificaciones-publica th {
		width: 45%;
	}
}

/* Menos movimiento para quien lo pidió en su sistema */
@media (prefers-reduced-motion: reduce) {
	.gs-producto,
	.gs-producto__imagen,
	.gs-galeria-publica__item img {
		transition: none;
	}

	.gs-producto:hover {
		transform: none;
	}

	.gs-producto:hover .gs-producto__imagen,
	.gs-galeria-publica__item:hover img {
		transform: none;
	}
}

/* --- Filtros que se aplican solos --------------------------------------- */

/* Mientras se recarga con el filtro nuevo, el listado se atenúa: entre el
   clic y la página nueva no pasaba nada visible y parecía que no funcionaba. */
.gs-catalogo--cargando {
	opacity: .45;
	transition: opacity 120ms ease;
	pointer-events: none;
}

/* Botón de envío que existe solo para que Enter funcione en el buscador.
   No se oculta con display:none porque entonces el navegador lo ignora
   y el envío implícito con Enter deja de funcionar. */
.gs-envio-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}