/**
 * Mega menu CERKO — style dla nawigacji HFE (widget navigation-menu w nagłówku
 * Elementora). Pozycje top-level z klasą 'cerko-mega' rozwijają wielokolumnowy
 * panel; kolumny ('cerko-mega-col') pokazują listy linków statycznie.
 *
 * Markup HFE (walker HFE: kontener owija tylko <a>, ul.sub-menu jest dzieckiem li):
 *   ul.hfe-nav-menu
 *     > li.cerko-mega
 *         > .hfe-has-submenu-container > a   (pozycja na belce)
 *         > ul.sub-menu                      (PANEL)
 *             > li.cerko-mega-col
 *                 > .hfe-has-submenu-container > a   (nagłówek kolumny)
 *                 > ul.sub-menu                      (linki)
 *                     > li.menu-item > a
 *
 * HFE chowa submenu przez visibility:hidden/opacity:0 i pokazuje na
 * :hover > .sub-menu (czysty CSS, bez SmartMenus). Panel zostawiamy pod
 * kontrolą HFE (hover), nadpisujemy tylko układ i pozycjonowanie; listę linków
 * 3. poziomu wiążemy widocznością z panelem przez visibility:inherit.
 * Tylko desktop; na mobile HFE renderuje natywny akordeon.
 */

@media (min-width: 1025px) {

	/* Kontekst pozycjonowania panelu = całe menu (szerokie), nie wąski <li>. */
	.hfe-nav-menu {
		position: relative;
	}
	.hfe-nav-menu li.menu-item.cerko-mega {
		position: static;
	}

	/* PANEL — sub-menu bezpośrednio pod pozycją mega. HFE steruje hover
	   (visibility/opacity); my ustawiamy układ wielokolumnowy i pozycję.
	   width:max-content + nowrap => kolumny obok siebie (bez przycięcia
	   przez shrink-to-fit). Zakotwiczony do prawej krawędzi menu. */
	.hfe-nav-menu li.cerko-mega > ul.sub-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0 28px;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		width: max-content !important;
		max-width: 96vw !important;
		padding: 24px 30px 28px !important;
		border-radius: 8px;
		background: #fff;
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14) !important;
	}

	/* Kolumna — stała szerokość, długie etykiety zawijają w kolumnie. */
	.hfe-nav-menu li.cerko-mega > ul.sub-menu > li.cerko-mega-col {
		position: static !important;
		flex: 0 0 190px !important;
		width: 190px !important;
		max-width: 190px !important;
	}

	/* Nagłówek kolumny (link "#") — nieklikalny, wyróżniony. */
	.hfe-nav-menu li.cerko-mega-col > .hfe-has-submenu-container {
		display: block !important;
	}

	.hfe-nav-menu li.cerko-mega-col > .hfe-has-submenu-container > a {
		pointer-events: none;
		display: block;
		padding: 0 0 8px !important;
		margin-bottom: 6px;
		font-size: 12px !important;
		font-weight: 700 !important;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		white-space: normal !important;
	}

	/* Lista linków (3. poziom) — statyczna; widoczność dziedziczy z panelu. */
	.hfe-nav-menu li.cerko-mega-col > ul.sub-menu {
		position: static !important;
		display: block !important;
		visibility: inherit !important;
		opacity: 1 !important;
		left: auto !important;
		top: auto !important;
		min-width: 0 !important;
		width: auto !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
		transform: none !important;
	}

	/* Linki w kolumnie (liście — bez kontenera). Bez podkreśleń/obramowań. */
	.hfe-nav-menu li.cerko-mega-col > ul.sub-menu > li.menu-item > a {
		padding: 5px 0 !important;
		font-size: 0.8125rem !important;
		font-weight: 400 !important;
		line-height: 1.125rem !important;
		white-space: normal !important;
		text-decoration: none !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	/* Reset marginesu (.navright li:last-child a) i podkreśleń wszystkich linków
	   panelu. Podkreślenie NAGŁÓWKÓW kolumn (border-bottom na <a>) zostaje. */
	.hfe-nav-menu li.cerko-mega .sub-menu a {
		margin-left: 0 !important;
		text-decoration: none !important;
	}
	.hfe-nav-menu li.cerko-mega-col > ul.sub-menu > li.menu-item > a:hover {
		text-decoration: underline !important;
	}

	/* Wyłącz linie (border) między pozycjami (ustawienie Elementora na li.menu-item).
	   Podkreślenie nagłówków kolumn zostaje — jest na <a>, nie na <li>. */
	.hfe-nav-menu li.cerko-mega ul.sub-menu li.menu-item {
		border-top: 0 !important;
		border-bottom: 0 !important;
	}

	/* Ukryj strzałki/toggle HFE wewnątrz panelu (strzałka przy pozycji top zostaje). */
	.hfe-nav-menu li.cerko-mega > ul.sub-menu .sub-arrow,
	.hfe-nav-menu li.cerko-mega > ul.sub-menu .hfe-menu-toggle {
		display: none !important;
	}
}

/* Pozycja top mega bez podkreślenia (także gdy aktywna/current na stronie kategorii).
   Nadpisuje .navright .current-menu-ancestor a { text-decoration: underline }. */
.hfe-nav-menu li.cerko-mega > .hfe-has-submenu-container > a,
.hfe-nav-menu li.cerko-mega.current-menu-ancestor > .hfe-has-submenu-container > a,
.hfe-nav-menu li.cerko-mega.current-menu-parent > .hfe-has-submenu-container > a {
	text-decoration: none !important;
}

/* Pozycja "Wszystkie produkty" pogrubiona + podkreślona (klasa cerko-menu-bold).
   Wyższa specyficzność niż reguły linków kolumny (font-weight:400 / text-decoration:none). */
.hfe-nav-menu li.cerko-mega-col > ul.sub-menu > li.menu-item.cerko-menu-bold > a,
.hfe-nav-menu li.cerko-menu-bold > a,
.hfe-nav-menu li.cerko-menu-bold > .hfe-has-submenu-container > a {
	font-weight: 700 !important;
	text-decoration: underline !important;
}