/* =====================================================================
   Papahune — HEADER + MEGA MENU
   Wyodrębnione ze: Divi-Child/style.css
   Cel: trzymać cały header/mega-menu poza style.css (Opcja A)
   Brand red: #B7322B
   ===================================================================== */

/* =========================================================
   HEADER (site header, top menu, mega menu, search, mobile)
   ========================================================= */

/* =========================================================
   Papahune: LOGO — wyrównanie do siatki STOPKI (sterowane 1 liczbą)
   Dlaczego tak:
   - Z pomiaru wynika, że #logo jest ABSOLUTE i ma left:0px (względem kontenera nagłówka),
     ale nie mamy poprawnego odczytu lewego marginesu stopki (u Ciebie stopka jest z Theme Buildera
     i nie ma #main-footer, więc selektor w konsoli zwracał null).
   - Zamiast "ruszać" kontenery (co rozwala layout), robimy bezpieczny "nudge" samego logo.
   Jak używać:
   - Zmień TYLKO wartość --ph-logo-nudge-x poniżej (np. -24px) aż logo zrówna się ze stopką.
   ========================================================= */



/* Transparentny header na stronie głównej + delikatny cień */
.home #main-header:not(.et-fixed-header){
  background-color:transparent;
  box-shadow:0 0 30px 0 rgba(0,0,0,.05);
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* Biały (odwrócony) logotyp tylko na HOME, gdy header nie jest przyklejony */
body.home #main-header:not(.et-fixed-header) #logo{
  filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(337deg) brightness(104%) contrast(103%);
}

/* Korekta wymiarów logo SVG i pozycjonowanie */
.et_pb_svg_logo #logo,
.et_pb_svg_logo.et_header_style_split .et-fixed-header .centered-inline-logo-wrap #logo{
  height:unset; max-width:100%;
  position:absolute; top:15px;
}

/* Szerokość kontenera logo w układzie „left” (standard Divi) */
.et_header_style_left .logo_container{ width:210px; z-index:999999; }

/* Zmniejszone odstępy nawigacji po „przyklejeniu” */
.et_header_style_left .et-fixed-header #et-top-navigation,
.et_header_style_split .et-fixed-header #et-top-navigation{
  padding-top:12px;
}

/* Główny kontener nawigacji: odsunięcie od logo i rozciągnięcie */
.et_fixed_nav #et-top-navigation{
  padding:10px 30px 0 200px;
  position:relative; float:left; width:100%;
}

/* Wyższe klikalne pola w pozycjach menu (stabilne — bez „podciągania” na hover) */
#top-menu>li>a,
#top-menu>li>a:hover,
#top-menu>li>a:focus{
  padding-top:13px!important;
  padding-bottom:20px!important;
  transform:none!important;
  margin-top:0!important;
  top:auto!important;
}

/* Ukrycie linku „Account” w desktopowym menu (mamy własną ikonę na mobile) */
#top-menu li.account-link{ display:none; max-height:0; }

/* Korekta pozycji strzałki submenu w Divi */
#top-menu .menu-item-has-children>a:first-child:after{ top:13px; }

/* Pionowy separator po prawej stronie nawigacji — WYŁĄCZONY (ma być niewidoczny) */
#et-top-navigation:after{
  content:'';
  position:absolute; top:0; right:70px; height:100%;
  border-left:0 !important;
  opacity:0 !important;
}

/* (awaryjnie) nawet gdyby jakiś stan nadpisywał separator — nadal ma być niewidoczny */
body:not(.home) #main-header #et-top-navigation:after,
#main-header.et-fixed-header #et-top-navigation:after{
  border-left:0 !important;
  opacity:0 !important;
}

/* Szerokość i wypełnienie wrappera listy menu */
nav#top-menu-nav{ padding-right:30px; width:95%; }
nav#top-menu-nav>ul{ width:100%; }

/* Prawostronny „profil” (jeśli byłby użyty w desktop) */
nav#top-menu-nav li.profile-link{ float:right; padding-right:22px!important; }

/* Ukrycie liczby produktów przy ikonie koszyka w nagłówku Divi */
.et-cart-info{ display:none; }

/* Ikona/koszyk (XOO Side Cart) – neutralny wygląd w headerze */
.xoo-wsc-basket{
  background-color:transparent; box-shadow:none; top:5px;
  transform:translateY(0);
  transition:transform 500ms cubic-bezier(.265,.365,.26,.865);
  will-change:transform;
}
/* Stopka panelu koszyka – UWAGA:
   Nie ustawiamy tu globalnie tła/kolorów, bo to gryzie się z nowym "Papahune" skinem koszyka.
   Styl koszyka jest niżej w sekcji: MINI KOSZYK (xoo-wsc) – PAPAHUNE THEME.
*/
/* .xoo-wsc-footer{ background-color:#323e42; color:#fff; } */

/* Pozycja pola wyszukiwania w nagłówku z pełną szerokością */
.et_fullwidth_nav .et-search-form,
.et_fullwidth_nav .et_close_search_field{ right:120px; }

/* ========== MEGA MENU (rozwijane na całej szerokości) ========== */

/* Szerokość mega-menu: pełny viewport, wyrównane do prawej */
.et_fullwidth_nav #top-menu li.mega-menu>ul{
  right:0!important; left:auto!important;
  width:100vw!important; padding-bottom:50px;
}

/* FIX (Papahune): stabilizacja mega-menu po scrollu i na hover
   Cel:
   - brak „podciągania” linków TOP MENU do góry
   - brak „dziury” między paskiem a panelem mega-menu
   - poprawna pozycja panelu zarówno w normalnym headerze, jak i w et-fixed-header */
@media (min-width:981px){
  #top-menu li.mega-menu{ position: static !important; }

  #top-menu li.mega-menu > ul.sub-menu{
    position: absolute !important;
    top: calc(100% - 1px) !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
  }

  #main-header.et-fixed-header #top-menu li.mega-menu > ul.sub-menu{
    top: calc(100% - 1px) !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
  }

  #top-menu > li > a,
  #top-menu > li > a:hover,
  #top-menu > li > a:focus{
    transform: none !important;
    margin-top: 0 !important;
    top: auto !important;
  }
}


/* [PAPAHUNE] Mega-menu tło: czyste białe (#ffffff), bez przeźroczystości
   - Selektory zawężone do: #top-menu li.mega-menu > ul.sub-menu
   - Nie wpływa na zwykłe dropdowny ani menu mobilne */
#top-menu li.mega-menu > ul.sub-menu{
  --phs-accent: #B7322B;

  background: #ffffff !important;
  background-image: none !important;

  border: 1px solid rgba(183, 50, 43, 0.18) !important;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.12) !important; /* bez cienia u góry */

  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Linki wewnątrz mega-menu – czytelne na jasnym tle */
#top-menu li.mega-menu > ul.sub-menu a{
  color:#111 !important;
}

/* Hover w mega-menu – brandowy akcent */
#top-menu li.mega-menu > ul.sub-menu a:hover{
  color:#B7322B !important;
  background: transparent !important;
}


/* [PAPAHUNE] Mega-menu: ptaszek (✓) po lewej na hover — animacja „rysowania” (reveal od lewej do prawej)
   UWAGA: dotyczy wyłącznie linków listy (bez nagłówków kolumn i kafelków produktowych). */
#top-menu li.mega-menu > ul.sub-menu li:not(.column-title):not(.news-column):not(.hidden-title):not(.product-img){
  overflow: visible;
}

#top-menu li.mega-menu > ul.sub-menu li:not(.column-title):not(.news-column):not(.hidden-title):not(.product-img) > a{
  position: relative;
}

/* Ptaszek poza tekstem (z boku) — bez nachodzenia na litery */
#top-menu li.mega-menu > ul.sub-menu li:not(.column-title):not(.news-column):not(.hidden-title):not(.product-img) > a::before{
  content: "✓";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--phs-accent, #B7322B);
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  /* „rysowanie” = odsłanianie znaku od lewej do prawej (bez rozciągania) */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 240ms ease, opacity 120ms ease;
}

#top-menu li.mega-menu > ul.sub-menu li:not(.column-title):not(.news-column):not(.hidden-title):not(.product-img) > a:hover::before,
#top-menu li.mega-menu > ul.sub-menu li:not(.column-title):not(.news-column):not(.hidden-title):not(.product-img) > a:focus-visible::before{
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* Jeśli Divi / custom CSS dokłada ciemny overlay pseudo-elementami – wyłącz (tylko mega-menu) */
#top-menu li.mega-menu > ul.sub-menu::before,
#top-menu li.mega-menu > ul.sub-menu::after{
  background: transparent !important;
  opacity: 0 !important;
  content: none !important;
}

/* Wygaszenie standardowej animacji Divi (zapobiega „podskokom”) */
/* .nav li.mega-menu:hover>ul{ visibility:hidden; opacity:0; } */
.mega-menu>ul{ border-color:transparent!important; }

/* Ukrycie tytułów kolumn (jeśli służą tylko jako odstęp) */
.mega-menu ul li.hidden-title>a{ font-size:0!important; min-height:39px; }

/* Wyrównania i styl nagłówków kolumn w mega-menu */
.mega-menu ul li.news-column>a{ padding-left:0!important; }

/* SHOP + NEWS: styl „head&cap” (brand red #B7322B, delikatnie przebijający + leciutki cień) */
#top-menu li.mega-menu > ul.sub-menu li.column-title > a,
#top-menu li.mega-menu > ul.sub-menu li.news-column > a,
#top-menu li.mega-menu > ul.sub-menu li.column-title > a:visited,
#top-menu li.mega-menu > ul.sub-menu li.news-column > a:visited{
	font-size:20px!important;
	color: #B7322B !important;
	text-shadow: none !important;
	letter-spacing: 1px;
	font-weight: 700;
	text-transform: uppercase;
}

/* brak zmiany koloru na hover/focus (nagłówki są nieklikalne, ale Divi potrafi je stylować) */
#top-menu li.mega-menu > ul.sub-menu li.column-title > a:hover,
#top-menu li.mega-menu > ul.sub-menu li.news-column > a:hover,
#top-menu li.mega-menu > ul.sub-menu li.column-title > a:focus,
#top-menu li.mega-menu > ul.sub-menu li.news-column > a:focus{
  color: rgba(183, 50, 43, 0.62)!important;
}

/* Mega-menu: nagłówki kolumn NIE są klikalne (bez „rączki” i bez hover-cue) */
#top-menu li.mega-menu > ul.sub-menu li.column-title > a,
#top-menu li.mega-menu > ul.sub-menu li.news-column > a,
#top-menu li.mega-menu > ul.sub-menu li.hidden-title > a{
  cursor: default !important;
  pointer-events: none !important;
}

/* (awaryjnie) nawet jeśli coś złapie hover — bez zmiany koloru nagłówków */
#top-menu li.mega-menu > ul.sub-menu li.column-title > a:hover,
#top-menu li.mega-menu > ul.sub-menu li.news-column > a:hover,
#top-menu li.mega-menu > ul.sub-menu li.hidden-title > a:hover{
  background: transparent !important;
}




.mega-menu ul li.column-title>a:after{
  content:''!important; background:rgba(183, 50, 43, 0.35); width:90%; height:1px;
  position:absolute; left:20px; top:30px!important;
}
/* Dłuższa linia pod nagłówkiem kolumny „news” */
.mega-menu ul li.column-title.news-column>a:after{
  content:''!important; background:rgba(183, 50, 43, 0.35); width:322%; height:1px;
  position:absolute; left:0; top:30px!important;
}

/* Kafle „produktowe” w mega-menu: hover z półprzezroczystością i etykietą */
.mega-menu ul li.product-img{ margin-top:10px!important; }
.mega-menu ul li.product-img a{
    position:relative;
background:#000; padding:0!important; transition:all .5s ease-in-out;
}
.mega-menu ul li.product-img img{ display:flex; }
.mega-menu ul li.product-img img,
.mega-menu ul li.product-img a:hover{ opacity:1; transition:all .5s ease-in-out; }
.mega-menu ul li.product-img a:hover img{ opacity:.6; }


/* Mega menu – CTA "SHOP NOW" jak w panelu (outline -> filled on hover) */
.mega-menu ul li.product-img span{
  font-size:14px;
  font-weight:700;
  border-radius:50px;
  text-transform:uppercase;
  letter-spacing:1px;

  padding:8px 14px;
  width:52%;
  position:absolute;
  bottom:50%;
  left:24%;
  text-align:center;

  /* Stan DOMYŚLNY: outline + czerwony tekst (jak phs-btn-outline) */
  background-color:rgba(255,255,255,0.22);
  color:var(--phs-accent);
  border:1px solid var(--phs-accent);

  /* Delikatny “klikaj mnie” bez tandety */
  box-shadow:0 2px 10px rgba(183, 50, 43, 0.16);

  /* Widoczny zawsze */
  opacity:1;
  transform:translateY(95px);
  cursor:pointer;

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

/* Stan HOVER / FOCUS: wypełniony + biały tekst (jak phs-btn:hover) */
.mega-menu ul li.product-img:hover span,
.mega-menu ul li.product-img a:focus-visible span{
  background-color:var(--phs-accent);
  color:#fff;
  border-color:var(--phs-accent);
  box-shadow:0 4px 12px rgba(183, 50, 43, 0.28);
  transform:translateY(90px) scale(1.02);
}
/* ========== PALETA „FIXED HEADER” (po przyklejeniu) ========== */

/* Ciemny kolor tekstu/ikon po „przyklejeniu” i poza HOME */
#main-header.et-fixed-header #et-top-navigation nav>ul>li>a,
#main-header.et-fixed-header #et_search_icon:before,
.et-fixed-header #top-menu>li>a,
.et-fixed-header #et_search_icon:before,
.et-fixed-header #et_top_search .et-search-form input,
.et-fixed-header .et_search_form_container input,
.et-fixed-header .et_close_search_field:after,
.et-fixed-header #et-top-navigation .et-cart-info,
.xoo-wsc-basket.dark .xoo-wsc-bki{ color:#323e42!important; }

body:not(.home) #main-header #et-top-navigation nav>ul>li>a,
body:not(.home) #main-header #et_search_icon:before,
body:not(.home) #main-header #top-menu>li>a,
body:not(.home) #main-header #et_top_search .et-search-form input,
body:not(.home) #main-header .et_search_form_container input,
body:not(.home) #main-header .et_close_search_field:after,
body:not(.home) #main-header #et-top-navigation .et-cart-info,
body:not(.home) .xoo-wsc-basket .xoo-wsc-bki{ color:#323e42!important; }

/* Dodatkowe formatowanie linków „produktowych” w menu (opcjonalnie) */
#top-menu li.product-link>a{ font-size:16px; font-weight:400; }
#top-menu li.product-link.product-2row>a{ padding-left:30%; }
#top-menu li.product-link.product-3row>a{ padding-left:40%; text-transform:uppercase; }

/* ========== HEADER — RESPONSIVE (MOBILE/TABLET) ========== */

@media (max-width:980px){
  /* Burger */
  #et_mobile_nav_menu{ position:absolute; top:16px; left:0; }

  /* Logo przestaje być absolutne — naturalny flow */
  .et_header_style_left .logo_container,
  .et_pb_svg_logo #logo,
  .et_pb_svg_logo.et_header_style_split .et-fixed-header .centered-inline-logo-wrap #logo{
    position:relative; top:unset;
  }

  /* Biała ikona burgera na HOME */
  .mobile_menu_bar:before{ color:#fff!important; }

  /* Rozciągnięcie kontenera nawigacji do pełnej szerokości */
  .et_fixed_nav #et-top-navigation{ width:100vw; left:-41px; overflow:visible; }

  /* Pozycja lupy (wyszukiwanie) w mobile */
  #et_top_search{ right:100px; top:-38px; position:absolute; float:right; }

  /* Ikona „konto” w mobile + rozwijane submenu */
  #et_top_account{ position:absolute; display:block; top:-32px; right:95px; }
  #et_top_account li.account-link>a{ font-size:0; }
  #et_top_account li.account-link:before{
    font-family:ETmodules!important; color:#fff; display:block; font-size:20px; content:'\e08a';
  }
  body:not(.home) #et_top_account li.account-link:before{ color:#323e42!important; }
  #et_top_account li.account-link>ul{
    transition:all .5s; max-height:0; overflow:hidden; position:absolute; width:200px; background:#fff; right:0;
  }
  #et_top_account li.account-link:hover>ul{
    max-height:500px; padding:20px; border-top:3px solid #b73130;
  }

  /* Mobilne pełnoekranowe menu */
  #mobile_menu{ width:100vw; left:-41px; max-height:90vh; overflow-y:scroll; }
  .et_mobile_menu li a{ color:#b73130!important; }

  /* Ukrycie prawego separatora w mobilnym układzie */
  #et-top-navigation:after{ display:none!important; }
}

@media (max-width:480px){
  /* Dalsza korekta pozycji lupy i konta na bardzo małych ekranach */
  #et_top_search{ right:52px; top:-37px; }
  #et_top_account{ right:57px; }

  /* Dostosowanie separatora do węższego widoku */
  #et-top-navigation:after{ right:110px; }

  /* Centrowanie menu mobilnego względem przesuniętego wrappera */
  #et_mobile_nav_menu{ float:none; margin-left:35px; }
}

@media (max-width:400px){
  /* Subtelne dosunięcie ikony konta jeszcze bardziej w prawo */
  #et_top_account{ right:46px; }
}

/* =====================================================================
   DODATKOWE FIXY HEADERA (były niżej w style.css) — przeniesione tutaj
   ===================================================================== */

@media (min-width:981px){
  #main-header.et-fixed-header #top-menu>li>a,
  #main-header.et-fixed-header #top-menu>li>a:hover,
  #main-header.et-fixed-header #top-menu>li>a:focus{
    padding-top:13px!important;
    padding-bottom:20px!important;
    line-height:1.2em!important;
    transform:none!important;
    margin-top:0!important;
    top:auto!important;
  }
}

/* =========================================================
   FIX (Papahune): TOP MENU „ucieka do góry” po przewinięciu
   Powód: Divi w trybie .et-fixed-header nadpisuje padding/transform/transition
   Rozwiązanie: twarde unieruchomienie kontenerów + linków tylko dla desktop
   ========================================================= */
@media (min-width:981px){
  /* Kontenery (Divi potrafi animować/transformować je przy przejściu w sticky) */
  .et_fixed_nav #main-header.et-fixed-header #et-top-navigation,
  .et_fixed_nav #main-header.et-fixed-header #top-menu-nav{
    transform:none !important;
    transition:none !important;
    top:auto !important;
    margin-top:0 !important;
  }

  /* Ustal pozycję pionową całej nawigacji w sticky (najczęściej to właśnie to „ciągnie” do góry) */
  .et_fixed_nav #main-header.et-fixed-header #et-top-navigation{
    padding-top:12px !important;
    padding-bottom:0 !important;
  }

  /* Linki menu w sticky – wymuszenie geometrii */
  .et_fixed_nav #main-header.et-fixed-header #top-menu>li>a,
  .et_fixed_nav #main-header.et-fixed-header #top-menu>li>a:hover,
  .et_fixed_nav #main-header.et-fixed-header #top-menu>li>a:focus{
    padding-top:13px !important;
    padding-bottom:20px !important;
    line-height:1.2em !important;
    transform:none !important;
    margin-top:0 !important;
    top:auto !important;
  }
}

/* =========================================================
   FIX: Poziomy suwak (overflow-x) na stronach (np. CART)
   Powód: elementy o szerokości 100vw / mega-menu mogą wychodzić poza viewport
   ========================================================= */
html, body{
  overflow-x:hidden;
}


/* =========================================================
   HOTFIX (Papahune): TYLKO "SHOP" po lewej, reszta po prawej
   Jeśli wszystko nadal jest po jednej stronie, to znaczy że #top-menu
   nie ma pełnej szerokości (shrink-to-fit). Poniżej wymuszamy 100% width.
   ========================================================= */
@media (min-width:981px){
  #main-header #et-top-navigation{
    display:flex !important;
    align-items:center !important;
  }

  /* Parent dla UL musi mieć 100% szerokości, inaczej margin-auto nie zadziała */
  #main-header #et-top-navigation nav#top-menu-nav{
    flex:1 1 auto !important;
    width:100% !important;
    max-width:100% !important;
    padding-right:0 !important;
    float:none !important;
  }

  #main-header #et-top-navigation ul#top-menu{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    justify-content:flex-end !important; /* reszta idzie w prawo */
  }

  /* Jedyny element po lewej */
  #main-header #et-top-navigation ul#top-menu > li.mega-menu{
    margin-right:auto !important;
  }

  /* Żeby nic nie mieszało z flex */
  #main-header #et-top-navigation ul#top-menu > li{
    float:none !important;
  }
  /* FIX: usuń cień nagłówka po przyklejeniu (scroll / et-fixed-header) */
#main-header.et-fixed-header{
  box-shadow:none !important;
}

/* (awaryjnie) jeśli cień siedzi na kontenerze wewnętrznym */
#main-header.et-fixed-header .et_menu_container{
  box-shadow:none !important;
}
  
   
}