/**
 * broker-child — header y footer.
 *
 * Desktop (≥1101px): barra única (logo + menú superpuesto, contenedor centrado fluido).
 * Sticky colapsado: altura 0.
 * Línea teal: Theme Options del parent.
 */

/* --- Footer (legacy) */
.first-footer {
	background-color: #fff;
}

.second-footer {
	background-color: #2a2e39;
}

/* Aire sobre la fila de widgets (los h4 quedaban pegados al borde superior del .row). */
.footercontainer .second-footer > .container {
	padding-top: 28px;
}

.footer,
.footercontainer {
	background-color: #25272e;
}

/*
 * Footer second-footer: el parent registra cada widget como col-lg-6 (50% × 2 por fila).
 * Con flex-wrap del child theme, el 3.er widget baja a otra fila y solo usa el 50% izquierdo → hueco enorme.
 * Anular anchos Bootstrap en la fila y repartir en UNA fila con flex (nowrap) o grid.
 * Selectores por col-* (siempre presentes en broker) + .widget por si el HTML cambia.
 */
@media only screen and (min-width: 1200px) {
	.footercontainer .second-footer .container {
		width: 100% !important;
		max-width: min(1920px, calc(100vw - 30px)) !important;
		box-sizing: border-box;
	}

	.footercontainer .second-footer .container > .row {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
		width: 100% !important;
	}

	.footercontainer .second-footer .container > .row > div[class*="col-lg-"],
	.footercontainer .second-footer .container > .row > div[class*="col-md-"],
	.footercontainer .second-footer .container > .row > .widget {
		flex: 1 1 0% !important;
		flex-basis: 0 !important;
		min-width: 0 !important;
		max-width: none !important;
		width: auto !important;
		float: none !important;
		box-sizing: border-box !important;
	}
}

.second-footer,
.second-footer h4.widget-title,
.second-footer a,
.second-footer a:hover,
.second-footer li {
	color: #fff;
}

.footer,
.footer p,
.footer p a,
.bottom-footer-right a {
	color: #c8c8c8;
}

/* Top bar announcements: compacta (el parent usa padding vertical 6px) */
.cg-announcements {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	font-size: 13px;
	line-height: 1.25;
	border-bottom-width: 1px;
}

.cg-announcements .top-bar-left,
.cg-announcements .top-bar-right {
	line-height: 1.25;
}

/* Sin separación clara entre la franja superior y la barra de navegación */
#main-wrapper > #wrapper {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

html body .cg-announcements {
	margin-bottom: 0 !important;
	border-bottom: none !important;
}

/* =============================================================================
 * Header: una fila — sin línea teal extra (la define el tema en ajustes)
 * ============================================================================= */

/* html body gana sobre <style> del tema (wp_head) si misma especificidad */
html body #wrapper > .cg-menu-below,
html body #wrapper > .cg-primary-menu-below-wrapper {
	background-color: #3a5371 !important;
}

/* Evita “ventanas” blancas por .container interno */
html body #wrapper > .cg-menu-below .container,
html body #wrapper > .cg-primary-menu-below-wrapper .container {
	background-color: transparent !important;
}

#wrapper > .cg-primary-menu-below-wrapper {
	border-top: none !important;
	border-top-width: 0 !important;
}

/* Broker commercegurus.css: .cg-primary-menu-below-wrapper { border-top: 1px solid #fff } */
html body #wrapper > .cg-primary-menu.cg-primary-menu-below-wrapper {
	border-top: none !important;
}

/* Quitar caja oscura del contenedor del menú (skin / base Broker) */
#wrapper > .cg-primary-menu-below-wrapper .cg-main-menu,
#wrapper > .cg-primary-menu-below-wrapper .menu-main-menu-container {
	background-color: transparent !important;
	background: transparent !important;
}

@media only screen and (min-width: 1101px) {
	/*
	 * Barra única como producción: el grid 2 columnas en #wrapper metía logo en una celda
	 * estrecha y el menú en 1fr del viewport → pegados a los bordes en 2K.
	 * Aquí: fila del logo a ancho completo + menú superpuesto en la misma franja,
	 * ambos con el mismo .container centrado y ancho fluido.
	 */
	/* Misma especificidad que la regla global; si no, #3a5371 opaco tapa el logo bajo la capa del menú */
	html body #wrapper > .cg-primary-menu-below-wrapper {
		background-color: transparent !important;
		background: transparent !important;
	}

	#wrapper {
		display: block;
		width: 100%;
		position: relative;
	}

	#wrapper > .cg-menu-below {
		position: relative;
		z-index: 1;
		display: block;
		width: 100%;
		max-width: none;
		min-width: 0;
		overflow: visible;
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		/* Misma franja que el solapamiento del menú; anula height:67px de legacy-vc en esta fila */
		min-height: 48px;
		height: 48px !important;
		padding-right: 0;
	}

	/* Logo por encima de la capa transparente del menú (por si el stacking tapaba la imagen) */
	#wrapper > .cg-menu-below .leftnav.logo,
	#wrapper > .cg-menu-below .leftnav.text-logo,
	#wrapper > .cg-menu-below .cg-main-logo {
		position: relative;
		z-index: 3;
	}

	/* El parent inyecta line-height alto en .cg-menu-below .leftnav a → logo pegado abajo en barra baja */
	#wrapper > .cg-menu-below .leftnav.logo a.cg-main-logo,
	#wrapper > .cg-menu-below .leftnav.text-logo a {
		line-height: normal !important;
		display: inline-flex !important;
		align-items: center !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#wrapper > .cg-menu-below .leftnav.logo .helper {
		display: none !important;
	}

	#wrapper > .cg-menu-below > .container,
	#wrapper > .cg-menu-below .container.width-auto {
		width: 100% !important;
		max-width: min(1920px, calc(100vw - 30px)) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	#wrapper > .cg-menu-below .cg-wp-menu-wrapper {
		min-height: 48px;
	}

	#wrapper > .cg-primary-menu-below-wrapper {
		width: 100%;
		max-width: none;
		clear: none !important;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		min-height: 48px;
		margin: -48px 0 0 !important;
		height: 48px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		position: relative;
		z-index: 2;
		border-top: none !important;
		pointer-events: none;
	}

	/* El .container a ancho completo capturaba clics sobre el logo; solo el bloque del menú recibe eventos */
	#wrapper > .cg-primary-menu-below-wrapper > .container,
	#wrapper > .cg-primary-menu-below-wrapper > .container > .row.margin-auto {
		pointer-events: none !important;
	}

	#wrapper > .cg-primary-menu-below-wrapper .cg-main-menu,
	#wrapper > .cg-primary-menu-below-wrapper .menu-main-menu-container,
	#wrapper > .cg-primary-menu-below-wrapper .menu,
	#wrapper > .cg-primary-menu-below-wrapper .menu > li,
	#wrapper > .cg-primary-menu-below-wrapper .menu > li > a {
		pointer-events: auto;
	}

	#wrapper > .cg-primary-menu-below-wrapper.cg-primary-menu-left {
		clear: none !important;
	}

	/* El clon sticky: fila propia a ancho completo; colapsado = altura 0 */
	#wrapper > .cg-header-fixed-wrapper:not(.cg-is-fixed) {
		width: 100%;
		height: 0 !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		visibility: hidden;
		pointer-events: none;
		border: 0 !important;
	}

	#wrapper > .cg-header-fixed-wrapper.cg-is-fixed {
		width: 100%;
		visibility: visible;
		pointer-events: auto;
		height: auto;
		overflow: visible;
	}

	#wrapper > .page-container {
		width: 100%;
	}

	/* Menú: ocupar toda la 2ª columna (Bootstrap .container limitaba a ~1170px centrado → caja estrecha) */
	#wrapper > .cg-primary-menu-below-wrapper > .container {
		width: 100% !important;
		max-width: min(1920px, calc(100vw - 30px)) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 15px;
		padding-right: 15px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
		background-color: transparent !important;
		box-shadow: none !important;
	}

	#wrapper > .cg-primary-menu-below-wrapper > .container > .row.margin-auto {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		min-height: 48px;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#wrapper > .cg-primary-menu-below-wrapper .cg-main-menu {
		width: auto;
		margin-left: auto;
		text-align: right;
		flex: 0 0 auto;
		float: none !important;
	}

	/* clear:both del parent rompe la fila; flex + nowrap evita columna “caja negra” al estrechar */
	#wrapper > .cg-primary-menu-below-wrapper .cg-primary-menu .menu,
	#wrapper > .cg-primary-menu-below-wrapper .menu {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		clear: none !important;
		width: auto;
		max-width: 100%;
		margin: 0;
		padding: 0;
		text-align: right;
	}

	#wrapper > .cg-primary-menu-below-wrapper .menu > li {
		flex: 0 0 auto;
		text-align: left;
		white-space: nowrap;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Desktop: enlaces blancos sobre #3a5371 (Theme Options de color de navegación no aplican aquí) */
	#wrapper > .cg-primary-menu-below-wrapper .menu > li > a {
		color: #fff !important;
		line-height: 48px;
	}

	/* Quitar acento azul del skin en hover/borde superior del ítem */
	#wrapper > .cg-primary-menu-below-wrapper .menu > li:hover {
		border-top-color: transparent !important;
	}

	/* Logo: proporción natural (evita estiramiento por anchos del tema) */
	.cg-menu-below .leftnav.logo,
	.cg-menu-below .leftnav.text-logo {
		width: auto !important;
		max-width: none;
		float: none;
		flex: 0 0 auto;
	}

	.cg-menu-below .cg-main-logo img,
	.cg-menu-below .leftnav.logo img {
		width: auto !important;
		height: 29px !important;
		max-height: 29px !important;
		max-width: 320px;
		object-fit: contain;
		vertical-align: middle;
	}

	/* Evita que el custom-css del parent infle el logo en sticky */
	.cg-header-fixed-wrapper.cg-is-fixed .cg-header-fixed .logo img,
	.cg-header-fixed-wrapper.cg-is-fixed .cg-header-fixed .cg-main-logo img {
		height: 29px !important;
		max-height: 29px !important;
		width: auto !important;
	}

	.cg-menu-below .rightnav {
		width: auto !important;
		max-width: none;
		flex: 0 0 auto;
	}

	#wrapper > .cg-menu-below .cg-wp-menu-wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		flex-wrap: nowrap;
		width: auto;
		max-width: 100%;
		min-width: 0;
	}
}

/* Layouts con cabecera transparente / otras plantillas */
.cg-transparent-header,
.cg-logo-center {
	background-color: #3a5371 !important;
}

.cg-primary-menu-center:not(.cg-primary-menu-below-wrapper),
.cg-primary-menu-left:not(.cg-primary-menu-below-wrapper) {
	background-color: #3a5371 !important;
}

ul.tiny-cart > li > a,
.cg-menu-below .rightnav .cart_subtotal {
	color: #fff !important;
}

/* Sticky */
.cg-header-fixed-wrapper.cg-is-fixed {
	background-color: #fff !important;
}

.cg-transparent-header.scroller .cg-primary-menu .menu > li > a,
.cg-transparent-header.scroller .rightnav .cart_subtotal,
.cg-transparent-header.scroller .search-button,
body.transparent-light .cg-transparent-header.scroller .cg-primary-menu .menu > li > a,
body.transparent-light .cg-transparent-header.scroller .rightnav .cart_subtotal,
body.transparent-light .cg-transparent-header.scroller .search-button,
body.transparent-dark .cg-transparent-header.scroller .cg-primary-menu .menu > li > a,
body.transparent-dark .cg-transparent-header.scroller .rightnav .cart_subtotal,
body.transparent-dark .cg-transparent-header.scroller .search-button,
/* Solo barra sticky fijada: texto oscuro sobre fondo blanco (no el clon oculto) */
.cg-header-fixed-wrapper.cg-is-fixed .cg-header-fixed .rightnav .cart_subtotal,
.cg-header-fixed-wrapper.cg-is-fixed .cg-header-fixed .cg-primary-menu .menu > li > a {
	color: #3a5371 !important;
}

.cg-transparent-header.scroller .burger span,
body.transparent-light .cg-transparent-header.scroller .burger span,
body.transparent-dark .cg-transparent-header.scroller .burger span {
	background: #3a5371 !important;
}

.cg-transparent-header.scroller .leftnav a,
.cg-header-fixed-wrapper.cg-is-fixed .cg-header-fixed .leftnav a {
	color: #3a5371 !important;
	border-color: #3a5371 !important;
}

.scroller,
body.transparent-light .scroller,
body.transparent-dark .scroller {
	background-color: #fff !important;
}

@media only screen and (max-width: 1100px) {
	/*
	 * Broker: si “Mobile visible header details” está activo pero el área header-details
	 * no pinta widgets, el div sigue en el DOM y responsive.css del parent aplica
	 * padding + border → franja blanca (~17px) encima del menú móvil.
	 */
	.mobile-header-details:not(:has(*)) {
		display: none !important;
		padding: 0 !important;
		border: none !important;
		margin: 0 !important;
		min-height: 0 !important;
		overflow: hidden !important;
	}

	.mobile-header-details:empty {
		display: none !important;
	}

	/*
	 * Franja teal: border-top a veces no se percibe (stacking / admin bar). inset asegura la línea en el borde superior del bloque azul.
	 */
	html body #wrapper > .cg-menu-below {
		position: relative;
		border-top: 0 !important;
		box-shadow: inset 0 3px 0 0 #1bbc9b !important;
		box-sizing: border-box;
		overflow: visible !important;
	}

	/*
	 * Móvil: Broker pone .leftnav.logo absolute + top:0 y .logo a line-height:60px → logo arriba
	 * y barra alta. Flex + padding vertical centra el contenido respecto a la franja teal.
	 */
	#wrapper > .cg-menu-below > .container {
		padding: 10px 15px !important;
		box-sizing: border-box;
	}

	#wrapper > .cg-menu-below .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
		min-height: 0 !important;
	}

	#wrapper > .cg-menu-below .cg-wp-menu-wrapper {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		min-height: 0 !important;
		position: relative;
		overflow: visible !important;
	}

	#wrapper > .cg-menu-below .rightnav {
		display: none !important;
	}

	/* Theme Options: .leftnav.dynamic-logo-width { width: N% } fuerza fila ancha y puede romper flex (≈124px de alto). */
	#wrapper > .cg-menu-below .leftnav.dynamic-logo-width {
		width: auto !important;
		max-width: min(72%, calc(100% - 56px)) !important;
		min-width: 0 !important;
	}

	#wrapper > .cg-menu-below .leftnav.logo,
	#wrapper > .cg-menu-below .leftnav.text-logo {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		max-width: calc(100% - 56px) !important;
		min-width: 0 !important;
		text-align: left !important;
		order: 1;
		flex: 1 1 auto;
	}

	#wrapper > .cg-menu-below .activate-mobile-search {
		order: 2;
		flex: 0 0 auto;
	}

	/*
	 * Meanmenu: commercegurus.css pone .mean-nav { margin-top: 60px } en flujo → .mean-bar crece (~60px + reveal)
	 * aunque el ul esté oculto, y el flex del header queda ~124px. Sacamos el nav del flujo.
	 */
	#wrapper > .cg-menu-below #load-mobile-menu {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		flex: 0 0 52px;
		width: 52px;
		min-width: 52px;
		max-width: 52px;
		margin-left: auto;
		order: 3;
		position: relative;
		overflow: visible !important;
		align-self: center;
		background: transparent !important;
	}

	#wrapper > .cg-menu-below #load-mobile-menu.mean-container {
		min-height: 0 !important;
	}

	#wrapper > .cg-menu-below .mean-bar {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: relative !important;
		min-height: 40px !important;
		width: 100% !important;
		overflow: visible !important;
		background: transparent !important;
	}

	#wrapper > .cg-menu-below .leftnav.logo .helper {
		display: none !important;
	}

	#wrapper > .cg-menu-below .logo a,
	#wrapper > .cg-menu-below .leftnav.logo .cg-main-logo,
	#wrapper > .cg-menu-below .leftnav.text-logo a {
		line-height: 1.2 !important;
		display: inline-flex !important;
		align-items: center !important;
		vertical-align: middle;
	}

	/*
	 * Icono hamburguesa: el JS pone inline right/left; el tema usa absolute + margin-top.
	 * Centramos con flex en .mean-bar y dejamos el <a> en flujo (sin transform) para evitar el “cuadro” raro.
	 */
	#wrapper > .cg-menu-below .mean-container a.meanmenu-reveal,
	#wrapper > .cg-menu-below .mean-bar a.meanmenu-reveal {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		margin: 0 !important;
		transform: none !important;
		padding: 10px 8px !important;
		width: 44px !important;
		height: 44px !important;
		box-sizing: border-box !important;
		display: block !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		-webkit-tap-highlight-color: transparent;
		/* Ocultar texto “Show Navigation” del script (tema usa -9999em) */
		text-indent: -9999em !important;
		overflow: hidden !important;
		line-height: 22px !important;
	}

	#wrapper > .cg-menu-below .mean-bar a.meanmenu-reveal > span {
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	#wrapper > .cg-menu-below .mean-container .mean-nav,
	#wrapper > .cg-menu-below .mean-bar .mean-nav {
		margin-top: 0 !important;
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		width: min(100vw - 24px, 420px) !important;
		max-width: calc(100vw - 24px) !important;
		z-index: 10050 !important;
		box-sizing: border-box !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}

	/* Rayas del icono (legibles sobre #3a5371) */
	#wrapper > .cg-menu-below .mean-container a.meanmenu-reveal span,
	#wrapper > .cg-menu-below .mean-container a.meanmenu-reveal span:before,
	#wrapper > .cg-menu-below .mean-bar a.meanmenu-reveal span,
	#wrapper > .cg-menu-below .mean-bar a.meanmenu-reveal span:before {
		background: #fff !important;
	}

	#wrapper {
		display: block;
	}

	body .cg-header-wrap .cg-transparent-header,
	body.transparent-light .cg-header-wrap .cg-transparent-header,
	body.transparent-dark .cg-header-wrap .cg-transparent-header,
	body .cg-menu-below,
	.scroller,
	body.transparent-light .cg-header-wrap .scroller,
	body.transparent-dark .cg-header-wrap .scroller {
		background: #3a5371 !important;
	}

	.cg-primary-menu-below-wrapper {
		background-color: #3a5371 !important;
		border-top: none !important;
	}

	.cg-menu-below .cg-main-logo img,
	.cg-menu-below .leftnav.logo img {
		width: auto !important;
		height: auto !important;
		max-height: 29px;
		object-fit: contain;
	}
}

@media only screen and (min-width: 1100px) {
	.rightnav,
	.rightnav h4.widget-title {
		color: #fff;
	}
}