/* Los Diaz · header.css — barra de anuncio y header (Theme Builder → Header global).
   Estructura del prototipo 01-home.html: logo | menú centrado | cuenta + carrito.
   Anclado a "#page-container #et-boc" (2,x,x), igual que footer, inicio, tienda y
   producto: en páginas con plantilla de cuerpo del Theme Builder, Divi imprime los
   valores del Customizer como ".et-db #et-boc .et-l .et_pb_section" (1,3,0), que le
   gana a un ancla de un solo id. Así se gana sin !important ni selectores
   autogenerados (.et_pb_row_1_tb_header). */

:root {
	--cc-alto-anuncio: 40px;
	--cc-alto-header: 86px;
	--cc-logo: 74px;
	--cc-icono: 36px;
}

/* ---- Sticky: el anuncio se va con el scroll y el header queda fijo ------------ */
.et-l--header {
	position: sticky;
	top: calc(-1 * var(--cc-alto-anuncio));
	z-index: 50;
}

.admin-bar .et-l--header {
	top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--cc-alto-anuncio));
}

/* ---- Barra de anuncio -------------------------------------------------------- */
#page-container #et-boc .cc-anuncio {
	padding: 0;
}

#page-container #et-boc .cc-anuncio-fila {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	min-height: var(--cc-alto-anuncio);
	padding: 0 var(--gvid-cc-margen-lateral);
}

#page-container #et-boc .cc-anuncio-texto p {
	padding: 0;
	color: var(--cc-superficie);
	font-size: var(--gvid-cc-texto-chico);
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-align: center;
}

/* ---- Header ------------------------------------------------------------------ */
#page-container #et-boc .cc-header {
	padding: 0;
	border-bottom: var(--gvid-cc-borde) solid var(--cc-borde);
}

#page-container #et-boc .cc-header-fila {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: none;
	min-height: var(--cc-alto-header);
	padding: 0 var(--gvid-cc-margen-lateral);
}

#page-container #et-boc .cc-header-fila > .et_pb_column {
	width: auto;
	margin: 0;
	float: none;
}

#page-container #et-boc .cc-logo {
	width: var(--cc-logo);
	margin: 0;
}

#page-container #et-boc .cc-logo img {
	width: var(--cc-logo);
	height: var(--cc-logo);
}

/* Menú: sin el fondo blanco del módulo; subrayado fino en la página actual. */
#page-container #et-boc .cc-menu {
	background-color: transparent;
}

/* Centrado vertical exacto: flex en la lista y en cada ítem (Divi los deja en línea
   y el texto caía 4px bajo el centro del logo y los íconos). El padding es simétrico
   descontando el borde inferior del subrayado. */
#page-container #et-boc .cc-menu .et_pb_menu__menu > nav > ul {
	display: flex;
	align-items: center;
	gap: 32px;
	justify-content: center;
	margin: 0; /* Divi: 0 -11px */
}

#page-container #et-boc .cc-menu .et-menu > li {
	display: flex;
	align-items: center;
	margin: 0; /* Divi: margin-top 8px, que bajaba el texto */
	padding: 0;
	line-height: 1;
}

#page-container #et-boc .cc-menu .et-menu > li > a {
	display: block;
	padding: 7px 0 6px;
	line-height: 20px;
	border-bottom: var(--gvid-cc-borde) solid transparent;
	color: var(--cc-texto);
	font-size: var(--gvid-cc-texto-chico);
	font-weight: 500;
	letter-spacing: 0.02em;
	transition:
		border-color var(--cc-duracion) var(--cc-curva),
		color var(--cc-duracion) var(--cc-curva);
}

#page-container #et-boc .cc-menu .et-menu > li > a:hover {
	opacity: 1;
	color: var(--cc-acento-texto);
}

#page-container #et-boc .cc-menu .et-menu > .current-menu-item > a,
#page-container #et-boc .cc-menu .et-menu > .current_page_parent > a {
	border-bottom-color: var(--cc-texto);
}

/* Cuenta + carrito. */
#page-container #et-boc .cc-header-acciones .et_pb_text_inner {
	display: flex;
	justify-content: flex-end;
}

.cc-acciones-header {
	display: flex;
	align-items: center;
	gap: 20px;
}

#page-container #et-boc .cc-icono-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cc-icono);
	height: var(--cc-icono);
	color: var(--cc-texto);
}

#page-container #et-boc .cc-icono-btn:hover {
	color: var(--cc-acento-texto);
}

.cc-carrito-cantidad {
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background-color: var(--cc-texto);
	color: var(--cc-superficie);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.cc-carrito-cantidad[hidden] {
	display: none;
}

/* ---- Móvil y tablet (el Menú de Divi cambia a hamburguesa en 980px) ----------- */
@media (max-width: 980px) {
	/* Áreas explícitas: logo | cuenta + carrito | hamburguesa. */
	#page-container #et-boc .cc-header-fila {
		grid-template-areas: "marca acciones nav";
		grid-template-columns: 1fr auto auto;
		gap: 8px;
	}

	#page-container #et-boc .cc-header-marca { grid-area: marca; }
	#page-container #et-boc .cc-header-acciones-col { grid-area: acciones; }
	#page-container #et-boc .cc-header-nav { grid-area: nav; }

	.cc-acciones-header {
		gap: 4px;
	}

	#page-container #et-boc .cc-menu .mobile_nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--cc-icono);
		height: var(--cc-icono);
		padding: 0;
	}

	#page-container #et-boc .cc-menu .mobile_menu_bar::before {
		color: var(--cc-texto);
		font-size: 30px;
		top: 0;
	}

	/* El desplegable de Divi pasa a panel de pantalla completa bajo el header.
	   --cc-menu-top lo calcula main.js al abrir (el header puede estar pegado o no). */
	#page-container #et-boc .cc-menu .et_mobile_menu {
		position: fixed;
		inset: var(--cc-menu-top, var(--cc-alto-header)) 0 0;
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 32px;
		padding: var(--gvid-cc-espacio-bloque) var(--gvid-cc-margen-lateral);
		border: 0;
		background-color: var(--cc-fondo);
		box-shadow: none;
		overflow-y: auto;
	}

	#page-container #et-boc .cc-menu .mobile_nav.opened .et_mobile_menu {
		display: flex;
	}

	#page-container #et-boc .cc-menu .et_mobile_menu li a {
		padding: 4px 0;
		border: 0;
		background: none;
		color: var(--cc-texto);
		font-family: var(--et_global_heading_font);
		font-size: 30px;
		font-weight: 600;
		text-align: center;
	}

	#page-container #et-boc .cc-menu .et_mobile_menu .current-menu-item > a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 8px;
	}
}

@media (max-width: 600px) {
	:root {
		--cc-logo: 56px;
		--cc-alto-header: 72px;
	}

	#page-container #et-boc .cc-anuncio-texto p {
		font-size: 11px;
	}
}

@media (max-width: 782px) {
	.admin-bar .et-l--header {
		top: calc(-1 * var(--cc-alto-anuncio));
	}
}