/* ========================================

   HEADER ECOMMERCE - BASE

======================================== */



/* ========================================

   HEADER - ANCHOS BASE

======================================== */



/*

 * Ancho interno del header corporativo.

 * Se controla desde Configuración del tema.

 */

.jg-header-corporativo__ancho {

	max-width: var(--jg-ancho-header-corporativo, 1240px);

	margin-right: auto;

	margin-left: auto;

}



/*

 * Ajuste base de la fila inferior del header ecommerce.

 */

.jg-header-ecommerce__inferior {

	margin-top: 0;

}



/*

 * Wrappers internos de ancho del header ecommerce.

 * Solo controlan ancho y centrado.

 */

.jg-header-ecommerce__ancho-superior,

.jg-header-ecommerce__ancho-inferior {

	width: 100%;

	margin-right: auto;

	margin-left: auto;

	box-sizing: border-box;

}



/*

 * Ancho configurable de la fila superior.

 */

.jg-header-ecommerce__ancho-superior {

	max-width: var(--jg-ancho-header-ecommerce-superior, 1240px);

}



/*

 * Ancho configurable de la fila inferior.

 */

.jg-header-ecommerce__ancho-inferior {

	max-width: var(--jg-ancho-header-ecommerce-inferior, 1240px);

}



/* ========================================

   TOP BAR - BASE

======================================== */



/*

 * Espaciado y tamaño base de la top bar.

 * Se deja neutra: sin colores, sin fondos y sin bordes.

 */

.jg-topbar {

	padding-top: 6px;

	padding-bottom: 6px;

	font-size: 14px;

}



/*

 * Ancho configurable de la top bar.

 * Se controla desde Configuración del tema.

 */

.jg-topbar__ancho {

	width: 100%;

	max-width: var(--jg-ancho-topbar, 1240px);

	margin-right: auto;

	margin-left: auto;

	box-sizing: border-box;

}



/* ========================================

   TOP BAR - LAYOUT 3 ZONAS

======================================== */



/*

 * Estructura horizontal base:

 * izquierda | centro | derecha

 */

.jg-topbar__interior {

	display: flex;

	align-items: center;

}



/*

 * Izquierda y derecha compensan el espacio

 * para que el centro quede realmente centrado.

 */

.jg-topbar__izquierda,

.jg-topbar__derecha {

	flex: 1;

}



/*

 * El centro ocupa solo lo que necesita.

 */

.jg-topbar__centro {

	flex: 0 0 auto;

}



/*

 * Alineaciones internas de cada zona.

 */

.jg-topbar__izquierda {

	text-align: left;

}



.jg-topbar__centro {

	text-align: center;

}



.jg-topbar__derecha {

	text-align: right;

}



/* ========================================

   TOP BAR - RESPONSIVE

======================================== */



@media (max-width: 781px) {

	/*

	 * En móvil la top bar se apila en vertical

	 * para ganar robustez y evitar roturas.

	 */

	.jg-topbar__interior {

		flex-direction: column;

		align-items: center;

		row-gap: 8px;

	}



	/*

	 * Las tres zonas pasan a ocupar todo el ancho

	 * y se centran.

	 */

	.jg-topbar__izquierda,

	.jg-topbar__centro,

	.jg-topbar__derecha {

		flex: none;

		width: 100%;

		text-align: center;

	}

}



/* ========================================

   HEADER ECOMMERCE - VARIABLES STICKY

======================================== */



/*

 * El contenedor principal del header ecommerce

 * actúa como referencia de posicionamiento.

 */

.jg-header-ecommerce > .jg-contenedor {

	position: relative;

	margin-block-start: 0;

}



/*

 * Variables dinámicas controladas por JS:

 * - offset general del header sticky

 * - altura de la fila superior

 */

:root {

	--jg-header-offset: 0px;

	--jg-header-superior-altura: 0px;

	--jg-admin-bar-offset: 0px;

}



/* ========================================

   HEADER ECOMMERCE - STICKY DESKTOP

======================================== */



@media (min-width: 782px) {

	/*

	 * Cuando el sticky está activo, se añade

	 * un espacio inferior equivalente a la altura

	 * de la fila inferior para evitar saltos de layout.

	 */

	.jg-header-ecommerce.jg-header-ecommerce--sticky {

		padding-bottom: var(--jg-header-offset);

	}



	/*

	 * La fila inferior es la base sticky del sistema.

	 * Permanece fija arriba cuando se supera el umbral.

	 */

	.jg-header-ecommerce.jg-header-ecommerce--sticky .jg-header-ecommerce__inferior {

		position: fixed;

		top: 0;

		left: 0;

		width: 100%;

		z-index: 200;

		transition: transform 0.25s ease;

	}



	/*

	 * La fila superior se prepara para ocultarse /

	 * mostrarse suavemente según la dirección del scroll.

	 */

	.jg-header-ecommerce__superior {

		transition: transform 0.25s ease, opacity 0.25s ease;

		padding-top: 15px;

		padding-bottom: 15px;

	}



	/*

	 * Scroll hacia abajo:

	 * la fila superior se oculta.

	 */

	.jg-header-ecommerce.jg-header--scroll-down .jg-header-ecommerce__superior {

		transform: translateY(-100%);

		opacity: 0;

		pointer-events: none;

	}



	/*

	 * Scroll hacia abajo:

	 * la fila inferior permanece en su posición base.

	 */

	.jg-header-ecommerce.jg-header--scroll-down .jg-header-ecommerce__inferior {

		transform: translateY(0);

	}



	/*

	 * Scroll hacia arriba:

	 * la fila superior reaparece fija arriba.

	 */

	.jg-header-ecommerce.jg-header--scroll-up .jg-header-ecommerce__superior {

		position: fixed;

		top: 0;

		left: 0;

		width: 100%;

		z-index: 210;

		transform: translateY(0);

		opacity: 1;

		pointer-events: auto;

	}



	/*

	 * Scroll hacia arriba:

	 * la fila inferior se desplaza visualmente hacia abajo

	 * la altura exacta de la fila superior para evitar solapes.

	 */

	.jg-header-ecommerce.jg-header--scroll-up .jg-header-ecommerce__inferior {

		transform: translateY(var(--jg-header-superior-altura));

	}

}



/* ========================================

   HEADER ECOMMERCE - ACCIONES DESKTOP

======================================== */



@media (min-width: 782px) {

	/*

	 * Zona derecha de la fila superior:

	 * agrupa las acciones de usuario en horizontal.

	 */

	.jg-header-ecommerce__derecha {

		display: flex;

		align-items: center;

		justify-content: flex-end;

		gap: 12px;

		flex-wrap: nowrap;

	}



	/*

	 * Wrapper individual de cada acción:

	 * buscar, cuenta y carrito.

	 */

	.jg-header-ecommerce__item-accion {

		display: flex;

		align-items: center;

		justify-content: center;

		flex: 0 0 auto;

		min-width: 0;

	}



	/*

	 * Capa clicable común para buscar y mi cuenta.

	 * Se normaliza aquí sin imponer aún estilo visual final.

	 */

	.jg-header-ecommerce__enlace-accion {

		display: inline-flex;

		align-items: center;

		justify-content: center;

		min-height: 40px;

		padding: 8px 10px;

		text-decoration: none;

		line-height: 1;

		white-space: nowrap;

		color: inherit;

	}



	/*

	 * Normalización mínima del carrito para que conviva

	 * correctamente con el resto de acciones.

	 * Se aplica tanto al enlace común, si existe,

	 * como al primer hijo directo del wrapper.

	 */

	.jg-header-ecommerce__item-accion--carrito .jg-header-ecommerce__enlace-accion,

	.jg-header-ecommerce__item-accion--carrito > * {

		display: inline-flex;

		align-items: center;

		justify-content: center;

		min-height: 40px;

	}



	/*

	 * Buscar y Mi cuenta se preparan como acciones compactas

	 * del header, con caja cuadrada consistente.

	 */

	.jg-header-ecommerce__item-accion--buscar .jg-header-ecommerce__enlace-accion,

	.jg-header-ecommerce__item-accion--cuenta .jg-header-ecommerce__enlace-accion {

		width: 44px;

		min-width: 44px;

		height: 44px;

		min-height: 44px;

		padding: 0;

		font-size: 0;

		overflow: hidden;

		position: relative;

	}



	/*

	 * Se crea una capa visual interna para futuros iconos.

	 * De momento no dibuja nada: solo reserva estructura limpia.

	 */

	.jg-header-ecommerce__item-accion--buscar .jg-header-ecommerce__enlace-accion::before,

	.jg-header-ecommerce__item-accion--cuenta .jg-header-ecommerce__enlace-accion::before {

		content: "";

		display: block;

		width: 20px;

		height: 20px;

	}



	/*

	 * Icono de búsqueda (lupa)

	 */

	.jg-header-ecommerce__item-accion--buscar .jg-header-ecommerce__enlace-accion::before {

		width: 14px;

		height: 14px;

		border: 2px solid var(--jg-header-color-iconos);

		border-radius: 50%;

		position: absolute;

		top: 11px;

		left: 11px;

		box-sizing: border-box;

	}



	.jg-header-ecommerce__item-accion--buscar .jg-header-ecommerce__enlace-accion::after {

		content: "";

		position: absolute;

		width: 7px;

		height: 2px;

		background-color: var(--jg-header-color-iconos);

		top: 24px;

		left: 23px;

		transform: rotate(45deg);

		transform-origin: center;

	}



	/*

	 * Icono de usuario (cuenta)

	 */

	.jg-header-ecommerce__item-accion--cuenta .jg-header-ecommerce__enlace-accion::before {

		width: 10px;

		height: 10px;

		border: 2px solid var(--jg-header-color-iconos);

		border-radius: 50%;

		position: absolute;

		top: 8px;

		left: 50%;

		transform: translateX(-50%);

		box-sizing: border-box;

		background: transparent;

	}



	.jg-header-ecommerce__item-accion--cuenta .jg-header-ecommerce__enlace-accion::after {

		content: "";

		position: absolute;

		width: 16px;

		height: 10px;

		border: 2px solid var(--jg-header-color-iconos);

		border-top-left-radius: 10px;

		border-top-right-radius: 10px;

		border-bottom: 0;

		top: 20px;

		left: 50%;

		transform: translateX(-50%);

		box-sizing: border-box;

		background: transparent;

	}

}



/* ========================================

   HEADER ECOMMERCE - MINI CARRITO WOOCOMMERCE

======================================== */



/*

 * El icono del mini carrito de WooCommerce usa un SVG

 * con fill="currentColor", por lo que necesita heredar

 * el color correcto desde el botón y el propio icono.

 */

.jg-header-ecommerce .wc-block-mini-cart__button,

.jg-header-ecommerce .wc-block-mini-cart__button svg {

	color: var(--jg-header-color-iconos);

	fill: currentColor;

}



/* ========================================

   HEADER ECOMMERCE - MÓVIL

======================================== */



@media (max-width: 781px) {

	/*

	 * Reservas laterales del header móvil.

	 * Izquierda: hamburguesa técnica.

	 * Derecha: acciones (buscar, cuenta, carrito).

	 */

	.jg-header-ecommerce {

		--jg-header-reserva-izquierda-movil: 56px;

		--jg-header-reserva-derecha-movil: 120px;

	}



	/* ----------------------------------------

	   LIMPIEZA DE CABECERA MÓVIL

	---------------------------------------- */



	.jg-header-ecommerce__zona-busqueda {

		display: none;

	}



	.jg-header-ecommerce__cuenta {

		display: none;

	}



	/* ----------------------------------------

	   LAYOUT DE LA CABECERA MÓVIL

	---------------------------------------- */



	/*

	 * La fila superior pasa a ser la referencia visual

	 * del header móvil.

	 */

	.jg-header-ecommerce__superior {

		position: relative;

		padding-top: 8px;

		padding-bottom: 8px;

		z-index: 20;

	}



	/*

	 * Contenedor principal de la fila superior móvil.

	 * Se centra el logo y se deja espacio real

	 * para hamburguesa e iconos.

	 */

	.jg-header-ecommerce__interior-superior {

		position: relative;

		display: flex;

		align-items: center;

		justify-content: center;

		min-height: 44px;

		padding-left: var(--jg-header-reserva-izquierda-movil);

		padding-right: var(--jg-header-reserva-derecha-movil);

		box-sizing: border-box;

	}



	/*

	 * El contenedor del logo ocupa el centro.

	 */

	.jg-header-ecommerce__zona-izquierda {

		display: flex;

		align-items: center;

		justify-content: center;

		width: 100%;

		min-width: 0;

	}



	/*

	 * El logo se mantiene centrado y no invade

	 * las reservas laterales.

	 */

	.jg-header-ecommerce__zona-izquierda .jg-header-ecommerce__logo {

		position: static;

		margin: 0;

		max-width: 100%;

	}



	/*

	 * Zona derecha de acciones.

	 * Se saca del flujo y se fija a la derecha.

	 */

	.jg-header-ecommerce__derecha {

		position: absolute;

		top: 50%;

		right: 0;

		transform: translateY(-50%);

		display: flex;

		align-items: center;

		justify-content: flex-end;

		gap: 2px;

		width: var(--jg-header-reserva-derecha-movil);

		max-width: var(--jg-header-reserva-derecha-movil);

		min-width: var(--jg-header-reserva-derecha-movil);

	}



	/*

	 * Cada acción ocupa solo su espacio real.

	 */

	.jg-header-ecommerce__item-accion {

		display: flex;

		align-items: center;

		justify-content: center;

		flex: 0 0 auto;

		margin: 0;

		min-width: 0;

	}



	/*

	 * Buscar y Mi cuenta se muestran como iconos.

	 */

	.jg-header-ecommerce__item-accion--buscar .jg-header-ecommerce__enlace-accion,

	.jg-header-ecommerce__item-accion--cuenta .jg-header-ecommerce__enlace-accion {

		width: 36px;

		min-width: 36px;

		height: 36px;

		min-height: 36px;

		padding: 0;

		font-size: 0;

		line-height: 0;

		overflow: hidden;

		position: relative;

		display: inline-flex;

		align-items: center;

		justify-content: center;

		color: transparent;

	}



	/*

	 * Base de pseudoelementos para iconos móviles.

	 */

	.jg-header-ecommerce__item-accion--buscar .jg-header-ecommerce__enlace-accion::before,

	.jg-header-ecommerce__item-accion--cuenta .jg-header-ecommerce__enlace-accion::before {

		content: "";

		display: block;

		position: absolute;

	}



	/*

	 * Icono de búsqueda (móvil)

	 */

	.jg-header-ecommerce__item-accion--buscar .jg-header-ecommerce__enlace-accion::before {

		width: 14px;

		height: 14px;

		border: 2px solid var(--jg-header-color-iconos);

		border-radius: 50%;

		top: 11px;

		left: 11px;

		box-sizing: border-box;

	}



	.jg-header-ecommerce__item-accion--buscar .jg-header-ecommerce__enlace-accion::after {

		content: "";

		position: absolute;

		width: 7px;

		height: 2px;

		background-color: var(--jg-header-color-iconos);

		top: 24px;

		left: 23px;

		transform: rotate(45deg);

		transform-origin: center;

	}



	/*

	 * Icono de usuario (móvil)

	 */

	.jg-header-ecommerce__item-accion--cuenta .jg-header-ecommerce__enlace-accion::before {

		width: 10px;

		height: 10px;

		border: 2px solid var(--jg-header-color-iconos);

		border-radius: 50%;

		top: 8px;

		left: 50%;

		transform: translateX(-50%);

		box-sizing: border-box;

		background: transparent;

	}



	.jg-header-ecommerce__item-accion--cuenta .jg-header-ecommerce__enlace-accion::after {

		content: "";

		position: absolute;

		width: 16px;

		height: 10px;

		border: 2px solid var(--jg-header-color-iconos);

		border-top-left-radius: 10px;

		border-top-right-radius: 10px;

		border-bottom: 0;

		top: 20px;

		left: 50%;

		transform: translateX(-50%);

		box-sizing: border-box;

		background: transparent;

	}



	/* ----------------------------------------

	   FILA INFERIOR COMO SOPORTE DEL MENÚ NATIVO

	---------------------------------------- */



	.jg-header-ecommerce__inferior {

		position: absolute;

		top: 0;

		left: 0;

		width: 100%;

		height: var(--jg-header-superior-altura);

		margin: 0;

		padding: 0;

		display: flex;

		align-items: center;

		overflow: visible;

		clip: auto;

		clip-path: none;

		white-space: normal;

		border: 0;

		z-index: 25;

		pointer-events: none;

	}



	.jg-header-ecommerce.jg-header-ecommerce--sticky .jg-header-ecommerce__inferior {

		position: fixed;

		top: var(--jg-admin-bar-offset, 0px);

		left: 0;

		width: 100%;

		height: var(--jg-header-superior-altura);

		z-index: 215;

	}



	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal {

		position: relative;

		width: 100%;

		height: 100%;

		display: flex;

		align-items: center;

	}



	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-open {

		display: flex !important;

		align-items: center;

		justify-content: center;

		position: static;

		margin-left: var(--jg-padding-lateral);

		min-width: 44px;

		min-height: 44px;

		padding: 0;

		background: transparent;

		border: 0;

		box-shadow: none;

		color: var(--jg-header-color-iconos);

		z-index: 30;

		pointer-events: auto;

	}



	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container-open svg {

		width: 20px;

		height: 20px;

	}



	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container:not(.is-menu-open) {

		pointer-events: none;

	}



	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open,

	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,

	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,

	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,

	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,

	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,

	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,

	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {

		pointer-events: auto;

	}



	.jg-header-ecommerce .wp-block-navigation.jg-menu-principal .wp-block-navigation__responsive-container {

		z-index: 1000;

	}



	/* ----------------------------------------

	   STICKY MÓVIL

	---------------------------------------- */



	.jg-header-ecommerce.jg-header-ecommerce--sticky .jg-header-ecommerce__superior {

		position: fixed;

		top: 0;

		left: 0;

		width: 100%;

		z-index: 210;

	}



	.jg-header-ecommerce.jg-header-ecommerce--sticky {

		padding-top: var(--jg-header-superior-altura);

	}



	.jg-header-ecommerce.jg-header--scroll-down .jg-header-ecommerce__superior,

	.jg-header-ecommerce.jg-header--scroll-up .jg-header-ecommerce__superior {

		transform: none;

		opacity: 1;

		pointer-events: auto;

	}

}



/* ========================================

   OVERLAY DE BÚSQUEDA

======================================== */



/*

 * Capa raíz del overlay de búsqueda.

 * Vive dentro del header, pero se comporta como capa global.

 */

.jg-busqueda-overlay {

	position: fixed;

	inset: 0;

	z-index: 1200;

	display: flex;

	align-items: flex-start;

	justify-content: center;

	padding: 24px 16px;

	margin-top: 0;

	box-sizing: border-box;

	background-color: rgba(0, 0, 0, 0.5);

	transition: opacity 0.2s ease, visibility 0.2s ease;

}



/*

 * Estado cerrado:

 * el overlay no se muestra ni captura interacción.

 */

.jg-busqueda-overlay.jg-busqueda-overlay--cerrado {

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

}



/*

 * Estructura interna del overlay.

 */

.jg-busqueda-overlay__interior {

	width: 100%;

	max-width: 720px;

	display: flex;

	flex-direction: column;

	row-gap: 16px;

	margin-top: 24px;

	padding: 20px;

	background-color: #fff;

	border-radius: 16px;

	box-sizing: border-box;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);

}



/*

 * Botón de cierre del overlay.

 */

.jg-busqueda-overlay__cerrar {

	align-self: flex-end;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 40px;

	height: 40px;

	padding: 0;

	border: 0;

	background: transparent;

	cursor: pointer;

	font-size: 32px;

	line-height: 1;

	text-decoration: none;

	color: var(--jg-header-color-iconos);

}



/*

 * Contenido del overlay.

 */

.jg-busqueda-overlay__contenido {

	width: 100%;

}



/*

 * Sobrescribir el espaciado automático de Gutenberg

 * solo dentro del overlay de búsqueda.

 */

.jg-busqueda-overlay :where(.is-layout-flow) > * {

	margin-block-start: 0 !important;

	margin-block-end: 0 !important;

}



/*

 * Mientras el overlay de búsqueda está abierto,

 * se bloquea el scroll de la página.

 */

body.jg-busqueda-overlay-activo {

	overflow: hidden;

}



/*

 * El overlay de búsqueda se usa solo en móvil.

 * En desktop queda desactivado por completo.

 */

@media (min-width: 782px) {

	.jg-busqueda-overlay {

		display: none;

	}

}



/* ========================================

   HEADER ECOMMERCE - VISIBILIDAD ACCIONES

======================================== */



/*

 * Desktop:

 * la lupa del overlay móvil no debe mostrarse.

 */

@media (min-width: 782px) {

	.jg-header-ecommerce__item-accion--buscar {

		display: none;

	}

}