/* Megamenú de categorías (menú "Megamenu Categorias", ítem .carra-megacat). Colores de Carra: rojo #E4472D, naranja #F59300. */

.whb-header .carra-megacat > .wd-dropdown-menu {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top: 3px solid #F59300;
}

.whb-header .carra-megacat > .wd-dropdown-menu > .container {
	max-width: 100%;
	overflow: visible;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-right: 24px;
}

/*
 * 10 categorías principales en 5 columnas de 2 categorías cada una (el orden
 * del menú ya viene armado por pares). Apiladas en columna, sin filas
 * compartidas, el panel queda bajo y entra en notebooks de 768px.
 */
.whb-header .carra-megacat .wd-sub-menu.wd-grid-f-inline {
	display: block !important;
	column-count: 5;
	column-gap: 28px;
	margin: 0;
}

.whb-header .carra-megacat .wd-sub-menu > li.wd-col {
	display: block;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
	break-inside: avoid;
}

.whb-header .carra-megacat .wd-sub-menu > li.wd-col:nth-child(2n+3) {
	break-before: column;
}

.whb-header .carra-megacat .wd-sub-menu > li.wd-col:nth-child(2n) {
	margin-bottom: 0 !important;
}

/* Encabezado de cada columna: categoría principal. */
.whb-header .carra-megacat .wd-sub-menu > li.wd-col > a {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #E4472D !important;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 0 0 6px !important;
	margin-bottom: 4px;
	border-bottom: 2px solid #F59300;
}

.whb-header .carra-megacat .wd-sub-menu > li.wd-col > a:hover {
	color: #F59300 !important;
}

.whb-header .carra-megacat .wd-sub-menu > li.wd-col > a .wd-nav-img {
	max-height: 18px;
	width: auto;
	margin: 0 !important;
}

/* Los íconos solo van en los encabezados. */
.whb-header .carra-megacat .sub-sub-menu .wd-nav-img {
	display: none !important;
}

/* Subcategorías. */
.whb-header .carra-megacat .sub-sub-menu li {
	position: relative;
}

.whb-header .carra-megacat .sub-sub-menu li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #555 !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	text-transform: none;
	padding: 3px 0 !important;
}

.whb-header .carra-megacat .sub-sub-menu li > a:hover {
	color: #E4472D !important;
}

/* Tercer nivel (ej.: Grifería para Baño > Bidet): desplegable lateral. */
.whb-header .carra-megacat .sub-sub-menu li.menu-item-has-children > a::after {
	content: "\203A";
	font-size: 16px;
	line-height: 1;
	margin-left: 8px;
	color: #E4472D;
}

.whb-header .carra-megacat .sub-sub-menu .sub-sub-menu {
	position: absolute;
	top: -8px;
	left: 100%;
	z-index: 5;
	min-width: 190px;
	margin: 0;
	padding: 8px 16px;
	background: #fff;
	border-left: 3px solid #E4472D;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s, visibility .15s;
}

.whb-header .carra-megacat .sub-sub-menu li:hover > .sub-sub-menu {
	opacity: 1;
	visibility: visible;
}

/* En las dos últimas columnas (ítems 7 a 10) abre hacia la izquierda para no salirse de la pantalla. */
.whb-header .carra-megacat .wd-sub-menu > li.wd-col:nth-child(n+7) .sub-sub-menu .sub-sub-menu {
	left: auto;
	right: 100%;
	border-left: 0;
	border-right: 3px solid #E4472D;
}