/*
 * tienda.css
 * Línea minimalista inspirada en Cosso: mucho espacio en blanco, pestañas
 * de categoría subrayadas (no píldoras), tarjeta de producto casi puramente
 * fotográfica con overlay de info al hover, tipografía en mayúsculas con
 * tracking en las etiquetas de apoyo.
 */

.gn-tienda { padding-block: var(--espacio-lg) var(--espacio-2xl); }

.gn-tienda__header { text-align: center; margin-bottom: var(--espacio-md); }
.gn-tienda__kicker {
	display: block;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .75rem;
	font-weight: 600;
	color: var(--color-primario);
	margin-bottom: .4rem;
}
.gn-tienda__desc { color: var(--color-texto-suave); max-width: 640px; margin-inline: auto; }

/* Pestañas de categoría — subrayadas, con scroll horizontal en móvil */
.gn-tabs-categorias {
	display: flex;
	gap: var(--espacio-md);
	overflow-x: auto;
	justify-content: flex-start;
	border-bottom: 1px solid var(--color-borde);
	margin-bottom: var(--espacio-sm);
	scrollbar-width: none;
}
.gn-tabs-categorias::-webkit-scrollbar { display: none; }
.gn-tabs-categorias a {
	flex: none;
	padding: 0 0 .9rem;
	color: var(--color-texto-suave);
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.gn-tabs-categorias a:hover { color: var(--color-secundario); }
.gn-tabs-categorias a.gn-tab-activa {
	color: var(--color-secundario);
	border-bottom-color: var(--color-acento);
}

/* Barra de herramientas: conteo + orden */
.gn-tienda__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--espacio-sm);
	padding-block: var(--espacio-sm);
	margin-bottom: var(--espacio-md);
	font-size: .85rem;
	color: var(--color-texto-suave);
}
.gn-tienda__toolbar .gn-filtro-precio {
	order: 3;
	flex-basis: 100%;
	max-width: none;
}
.gn-tienda__toolbar .woocommerce-ordering { margin: 0; }
.gn-tienda__toolbar select {
	border: none;
	background: none;
	font-family: var(--fuente-cuerpo);
	font-size: .85rem;
	color: var(--color-secundario);
	cursor: pointer;
}

/* Cuadrícula de productos (WooCommerce imprime <ul class="products">) */
ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--espacio-md) var(--espacio-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Tarjeta de producto — casi pura imagen, sin bordes ni sombras */
.gn-tarjeta-producto { position: relative; }

.gn-tarjeta-producto__link { display: block; position: relative; }

.gn-tarjeta-producto__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-fondo-alterno);
	border-radius: var(--radio-sm);
}
.gn-tarjeta-producto__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.gn-tarjeta-producto:hover .gn-tarjeta-producto__media img { transform: scale(1.04); }

.gn-tarjeta-producto .onsale {
	position: absolute;
	top: .6rem; left: .6rem;
	background: var(--color-acento);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .3rem .6rem;
	border-radius: var(--radio-full);
	z-index: 2;
}

/* Overlay con nombre + precio (visible siempre en móvil, en hover en escritorio) */
.gn-tarjeta-producto__overlay {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin-top: .6rem;
}
.gn-tarjeta-producto__nombre {
	font-size: .85rem;
	font-weight: 500;
	color: var(--color-secundario);
}
.gn-tarjeta-producto__precio {
	font-family: var(--fuente-cuerpo);
	font-weight: 700;
	color: var(--color-acento);
	font-size: .9rem;
}
.gn-tarjeta-producto__precio del { color: var(--color-texto-suave); font-weight: 400; opacity: .7; margin-right: .35rem; font-size: .85em; }
.gn-tarjeta-producto__precio ins { text-decoration: none; }

/* Botón de añadir al carrito — discreto, aparece bajo el precio */
.gn-tarjeta-producto__accion { margin-top: .5rem; }
.gn-tarjeta-producto__accion .add_to_cart_button,
.gn-tarjeta-producto__accion .added_to_cart {
	display: inline-block;
	font-size: .75rem !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 0 !important;
	background: none !important;
	color: var(--color-primario) !important;
	border-bottom: 1px solid var(--color-primario);
}
.gn-tarjeta-producto__accion .add_to_cart_button:hover { color: var(--color-acento) !important; border-color: var(--color-acento); }

/* Badge de precio mayorista (lo inyecta plugin-global-nails-core vía filtro) */
.gn-price-wrap { display: flex; flex-direction: column; gap: .15rem; }
.gn-tier-badge {
	display: inline-block;
	width: fit-content;
	color: #fff;
	font-size: .6rem;
	font-weight: 700;
	padding: .15rem .5rem;
	border-radius: var(--radio-full);
	letter-spacing: .03em;
	margin-top: .2rem;
}

.gn-tienda__vacio { text-align: center; padding: var(--espacio-2xl) 0; color: var(--color-texto-suave); }
.gn-tienda__paginacion { margin-top: var(--espacio-lg); text-align: center; }
.gn-tienda__paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	margin: 0 .2rem;
	color: var(--color-texto-suave);
	border-radius: var(--radio-full);
}
.gn-tienda__paginacion .page-numbers.current { background: var(--color-secundario); color: #fff; }

/* Banners de la intranet mayorista arriba de la tienda */
.gn-banners-mayorista {
	display: grid;
	gap: var(--espacio-sm);
	max-width: var(--contenedor-max);
	margin: var(--espacio-md) auto 0;
	padding-inline: var(--contenedor-padding);
}
.gn-banner img { border-radius: var(--radio-sm); width: 100%; }
.gn-banner--principal img { aspect-ratio: 21 / 6; object-fit: cover; }
.gn-banner--secundario img { aspect-ratio: 21 / 9; object-fit: cover; }

/* ─── Filtro de precio (widget nativo de WooCommerce, solo se viste aquí) ─── */
.gn-filtro-precio { flex: 1; max-width: 280px; }
.gn-filtro-precio .price_slider_wrapper { position: relative; }
.gn-filtro-precio .price_slider {
	margin-bottom: var(--espacio-sm);
	height: 4px;
	background: var(--color-borde);
	border-radius: var(--radio-full);
}
.gn-filtro-precio .ui-slider-range {
	position: absolute;
	height: 4px;
	background: var(--color-primario);
	border-radius: var(--radio-full);
}
.gn-filtro-precio .ui-slider-handle {
	position: absolute;
	top: -6px;
	width: 16px;
	height: 16px;
	border-radius: var(--radio-full);
	background: var(--color-acento);
	border: 2px solid #fff;
	box-shadow: var(--sombra-sutil);
	cursor: pointer;
	outline: none;
}
.gn-filtro-precio .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-xs);
}
.gn-filtro-precio .price_label {
	font-size: .8rem;
	color: var(--color-texto-suave);
	order: 1;
}
.gn-filtro-precio button[type="submit"] {
	order: 2;
	background: var(--color-secundario);
	color: #fff;
	border: none;
	padding: .4rem 1rem;
	border-radius: var(--radio-full);
	font-size: .75rem;
	font-weight: 600;
	cursor: pointer;
}
.gn-filtro-precio input[type="hidden"] { display: none; }

@media (min-width: 640px) {
	ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--espacio-lg) var(--espacio-md); }
}
@media (min-width: 1024px) {
	ul.products { grid-template-columns: repeat(4, 1fr); }
	.gn-banners-mayorista { grid-template-columns: 2fr 1fr; }
	.gn-tienda__toolbar .gn-filtro-precio { order: 2; flex-basis: auto; }
}