/* =========================================================
   MEGA MENU – korekta odstępów submenu Minimoga
   ========================================================= */

#page-navigation .menu--primary > ul > li > ul.sub-menu.mega-menu {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* =========================================================
   PUDEŁKA NA WYMIAR – CTA BEZ ZMIANY WYSOKOŚCI MENU
   ========================================================= */

.page-header
.menu--primary
> ul
> li.pnw-menu-highlight
> a {
	color: #28A745 !important;
	font-weight: 700 !important;
}


/* Nie dodajemy paddingu – zachowujemy oryginalny layout Minimoga */

.page-header
.menu--primary
> ul
> li.pnw-menu-highlight
> a
> .menu-item-wrap {


	position: relative;
	z-index: 1;
    	margin-left: 8px !important;

    

	color: #28A745 !important;
}


/* Tło rysujemy poza layoutem */

.page-header
.menu--primary
> ul
> li.pnw-menu-highlight
> a
> .menu-item-wrap::before {
	content: "";

	position: absolute;

	top: -8px;
	right: -14px;
	bottom: -8px;
	left: -14px;

	background: #eef8f0;

	border: 1px solid #d9efdd;
	border-radius: 10px;

	z-index: -1;

	pointer-events: none;

	transition:
		background-color .2s ease,
		border-color .2s ease;
}


/* Hover */

.page-header
.menu--primary
> ul
> li.pnw-menu-highlight
> a:hover
> .menu-item-wrap::before {
	background: #e2f4e6;
	border-color: #bfe4c7;
}


.page-header
.menu--primary
> ul
> li.pnw-menu-highlight
> a:hover
> .menu-item-wrap {
	color: #218838 !important;
}

/* =========================================================
   MEGA MENU – ZEWNĘTRZNY OBSZAR MINIMOGA
   ========================================================= */

#page-navigation
.menu--primary
> ul
> li
> ul.sub-menu.mega-menu {
	background: transparent !important;
	box-shadow: none !important;

	padding-top: 0 !important;
	padding-bottom: 0 !important;
}


/* =========================================================
   MEGA MENU – WŁAŚCIWA KARTA
   ========================================================= */

#page-navigation
ul.sub-menu.mega-menu
> li
> .mega-menu-content {

	width: min(1200px, calc(100vw - 40px)) !important;

	margin-left: auto !important;
	margin-right: auto !important;

	background: #f7f8f7 !important;

	border-radius: 0 0 12px 12px;

	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);

	overflow: hidden;
}

/* =========================================================
   PNW – DESKTOP HEADER
   kompaktowe główne menu przy headerze 1340px
   NIE zmienia szerokości mega-menu dropdown
   ========================================================= */

@media (min-width: 1200px) {

	/* menu zawsze w jednym rzędzie */
	#page-header
	#menu-primary {
		display: flex !important;

		align-items: center !important;

		flex-wrap: nowrap !important;

		white-space: nowrap !important;
	}


	/* mniejsze odstępy między pozycjami */
	#page-header
	#menu-primary
	> li
	> a {
		padding-left: 9px !important;
		padding-right: 9px !important;

		font-size: 14px !important;
	}


	/* sam zielony CTA trochę bardziej kompaktowy */
	#page-header
	#menu-primary
	> .pnw-menu-highlight
	> a {
		padding-left: 13px !important;
		padding-right: 13px !important;
	}


	/* zapobiegamy przerzuceniu CTA do kolejnego wiersza */
	#page-header
	#menu-primary
	> li {
		flex: 0 0 auto !important;
	}


	

}
/* =========================================================
   PNW – MEGA MENU DESKTOP
   kompaktowy dropdown wycentrowany względem nawigacji
   ========================================================= */

@media (min-width: 1200px) {

	/* Punkt odniesienia dla dropdownów */
	#page-header
	#menu-primary {
		position: relative !important;
	}


	/*
	 * Bardzo ważne:
	 * submenu nie może pozycjonować się względem
	 * pojedynczego LI "Kartony".
	 */
	#page-header
	#menu-primary
	> li.has-mega-menu {
		position: static !important;
	}


	/* właściwy dropdown */
	#page-header
	#menu-primary
	> li.has-mega-menu
	> ul.sub-menu.children.mega-menu {

		position: absolute !important;

		top: 100% !important;

		left: 50% !important;
		right: auto !important;

		margin-left: 0 !important;
		margin-right: 0 !important;

		transform: translateX(-50%) !important;

		width: 890px !important;
		min-width: 0 !important;
		max-width: calc(100vw - 40px) !important;

		box-sizing: border-box !important;
	}


	/* pośredni element LI */
	#page-header
	#menu-primary
	> li.has-mega-menu
	> ul.sub-menu.children.mega-menu
	> li {

		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}


	/* zawartość mega-menu */
	#page-header
	#menu-primary
	.mega-menu-content {

		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;

		box-sizing: border-box !important;
	}


	/* template Elementora */
	#page-header
	#menu-primary
	.mega-menu-content
	> .elementor {

		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}


	/* główny kontener Elementora */
	#page-header
	#menu-primary
	.mega-menu-content
	.e-con.e-parent {

		width: 100% !important;
		max-width: 100% !important;

		--container-max-width: 100% !important;
	}


	#page-header
	#menu-primary
	.mega-menu-content
	.e-con.e-parent
	> .e-con-inner {

		width: 100% !important;
		max-width: 100% !important;

		margin-left: auto !important;
		margin-right: auto !important;
	}

}

/* =========================================================
   PNW – MEGA MENU
   przyciemnienie strony przy otwartym dropdownie
   ========================================================= */

@media (min-width: 1200px) {

	/* overlay */
	body::before {
		content: "";

		position: fixed;
		inset: 0;

		background: rgba(0, 0, 0, 0.22);

		opacity: 0;
		visibility: hidden;

		pointer-events: none;

		z-index: 9990;

		transition:
			opacity .18s ease,
			visibility .18s ease;
	}


	/* header i mega-menu zawsze nad przyciemnieniem */
	#page-header {
		z-index: 10001 !important;
	}


	/* pokazujemy overlay, gdy mega-menu jest aktywne */
	body:has(
		#menu-primary
		> li.has-mega-menu:hover
	)::before,

	body:has(
		#menu-primary
		> li.has-mega-menu:focus-within
	)::before {
		opacity: 1;
		visibility: visible;
	}

}


/* =====================================================
   PNW - MEGA MENU MOBILE v2
   Jednolite tlo, wyrownanie i kompaktowe kategorie
   Bez zmian w menu desktopowym
   ===================================================== */

@media screen and (max-width: 1199px) {

  /* 1. Jednolite tlo calego wysuwanego menu */
  #page-mobile-main-menu > .inner {
    background-color: #f8f8f8 !important;
  }

  /* 2. Zawartosc mega menu bez osobnych kart */
  #page-mobile-main-menu .mega-menu-content,
  #page-mobile-main-menu .mega-menu-content .e-con {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* 3. Usuniecie nakladek tla Elementora */
  #page-mobile-main-menu .mega-menu-content .e-con::before,
  #page-mobile-main-menu .mega-menu-content .elementor-background-overlay {
    display: none !important;
  }

  /* 4. Kompaktowe odstepy wewnatrz menu */
  #page-mobile-main-menu .mega-menu-content .e-con {
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --gap: 8px;

    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #page-mobile-main-menu .mega-menu-content .e-con-inner {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  /* 5. Szerokosc i wyrownanie do lewej */
  #page-mobile-main-menu .mega-menu-content,
  #page-mobile-main-menu .mega-menu-content .elementor,
  #page-mobile-main-menu .mega-menu-content .elementor > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  #page-mobile-main-menu .mega-menu {
    margin-top: 8px !important;
    margin-bottom: 14px !important;
  }

  /* 6. Glowne kategorie Minimog */
  #page-mobile-main-menu
  #mobile-menu-primary > li.level-1 > a
  .menu-item-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
  }

  /* 7. Naglowki kategorii Elementor */
  #page-mobile-main-menu .mega-menu-content
  .elementor-widget-heading .elementor-heading-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  /* 8. Odstepy miedzy kategoriami z ikonami */
  #page-mobile-main-menu .mega-menu-content
  .e-con:has(> .elementor-widget-icon):has(> .elementor-widget-heading) {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 46px !important;
  }

  /* 9. Ikony kategorii */
  #page-mobile-main-menu .mega-menu-content
  .elementor-widget-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* 10. Wciecie najnizszego poziomu */
  #page-mobile-main-menu .mega-menu-content
  .elementor-widget-tm-simple-link {
    width: calc(100% - 26px) !important;
    margin-left: 26px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  #page-mobile-main-menu .mega-menu-content
  .elementor-widget-tm-simple-link
  .elementor-widget-container {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  /* 11. Podkategorie z kropkami - mniejsza wysokosc */
  #page-mobile-main-menu .mega-menu-content
  .tm-simple-link .simple-link {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 42px !important;
    padding: 6px !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #222222 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  /* 12. Male, delikatne kropki przed podkategoriami */
  #page-mobile-main-menu .mega-menu-content
  .tm-simple-link .simple-link::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    flex: 0 0 4px !important;

    width: 4px !important;
    height: 4px !important;
    margin: 0 11px 0 0 !important;

    background: #c8d0cb !important;
    border: none !important;
    border-radius: 50% !important;
    transform: none !important;
  }

  #page-mobile-main-menu .mega-menu-content
  .tm-simple-link .simple-link::after {
    display: none !important;
    content: none !important;
  }

  /* 13. Dostepnosc klawiaturowa */
  #page-mobile-main-menu .mega-menu-content
  .tm-simple-link .simple-link:focus-visible {
    outline: 2px solid #159947 !important;
    outline-offset: 2px;
  }

}


/* PNW - opis CTA widoczny tylko na mobile */

@media (min-width: 1200px) {
  .pnw-menu-mobile-caption {
    display: none !important;
  }
}

@media (max-width: 1199px) {

  #page-mobile-main-menu
  #mobile-menu-primary
  > li.pnw-menu-highlight
  > a .menu-item-title {
    color: #159947 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-decoration-color: #159947 !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1px !important;
  }

  #page-mobile-main-menu
  .pnw-menu-mobile-caption {
    display: inline;
  }

}


/* PNW - CTA szybka wycena w menu mobilnym */

@media (max-width: 1199px) {

  #page-mobile-main-menu
  #mobile-menu-primary
  > li.pnw-menu-highlight
  > a .menu-item-title::after {
    content: " – szybka wycena" !important;
    display: inline !important;
    color: #159947 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }

}

/* PNW – wyrównanie ikon i tekstów w menu mobile */

@media (max-width: 1199px) {

    #page-mobile-main-menu .mega-menu-content
    .e-con:has(> .elementor-widget-icon):has(> .elementor-widget-heading) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    #page-mobile-main-menu .mega-menu-content
    .e-con:has(> .elementor-widget-icon):has(> .elementor-widget-heading)
    > .elementor-widget-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        flex: 0 0 24px !important;
        width: 24px !important;
        margin: 0 !important;
    }

    #page-mobile-main-menu .mega-menu-content
    .e-con:has(> .elementor-widget-icon):has(> .elementor-widget-heading)
    > .elementor-widget-heading {
        flex: 1 1 auto !important;
        align-self: center !important;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }

    #page-mobile-main-menu .mega-menu-content
    .elementor-widget-icon .elementor-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 0 !important;
    }

}

/* =========================================================
   PNW – KOREKTA POŁOŻENIA MENU DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    #page-header #page-navigation {
        position: relative !important;
        left: 20px !important;
    }

}