/**
 * ps_mainmenu – [custom] wygląd menu głównego
 *
 * Wszystkie zmiany wyglądu menu trzymamy w tym pliku (ładowany przez hook actionFrontControllerSetMedia,
 * po theme.css). Zachowanie (kaskada poziomów, wysokość do przewijania) jest w views/js/mainmenu-custom.js.
 *
 * Spis:
 *  0. Zmienne – kolory, rozmiary (najprostsze miejsce na poprawki)
 *  1. Kolor czcionki (czarny)
 *  2. Lista poziomu 1 (lewa kolumna)
 *  3. Listy poziomu 2 i 3 (kaskada)
 *  4. Ikonki – miniatury kategorii
 *  5. Przewijanie długich list
 *  6. Menu mobilne
 *  7. Menu w hooku displayWMainMenu (wyzwalacz w wybranym miejscu strony)
 *  8. Izolacja od stylów otoczenia (bez podkreśleń, linii, obracania strzałki; listy od lewej)
 *  9. Próg menu desktop / mobilne: 992 px
 * 10. Menu mobilne: "Produkty" w panelu bocznym motywu (przechodzenie w podkategorie i powrót)
 * 11. Przycisk "Pełna oferta" (hook displayWMainMenu) – wygląd i położenie przy lewej krawędzi
 */

/* ==========================================================================
   0. Zmienne
   ========================================================================== */
.ps-mainmenu {
  --wmm-color: #000;                                /* kolor czcionki w menu */
  --wmm-hover-color: #000;                          /* kolor czcionki po najechaniu / aktywnej pozycji */
  --wmm-hover-bg: var(--bs-tertiary-bg, #f2f2f2);   /* tło pozycji po najechaniu / aktywnej */
  --wmm-border: var(--bs-border-color, #dee2e6);    /* linie oddzielające kolumny */
  --wmm-radius: var(--bs-border-radius, 0);

  --wmm-font-size: 1rem;
  --wmm-item-py: 0.375rem;                          /* odstęp pionowy wewnątrz pozycji */
  --wmm-item-px: 0.75rem;                           /* odstęp poziomy wewnątrz pozycji */
  --wmm-item-gap: 0.125rem;                         /* odstęp między pozycjami */
  --wmm-col-py: 1.25rem;                            /* górny/dolny margines kolumn */
  --wmm-col-px: 1.25rem;                            /* odstęp kolumny od linii podziału */

  --wmm-l1-width: 33.3333%;                         /* szerokość kolumny poziomu 1 (reszta: poziom 2 i 3 po równo) */
  --wmm-fade: 2.5rem;                               /* wygaszenie dołu kolumny, gdy jest co przewijać */

  --wmm-thumb-size: 32px;                           /* rozmiar ikonki (miniatury kategorii) */
  --wmm-thumb-gap: 0.75rem;                         /* odstęp ikonki od tekstu */
  --wmm-deep-thumb-size: 24px;                      /* ikonka na poziomie 4+ */

  /* przycisk "Pełna oferta" wstawiony hookiem displayWMainMenu (sekcja 11) –
     kształt i kolory jak "Czytaj więcej", czcionka jak "Magnetyczny Blog" */
  --wmm-trigger-bg: #009899;                        /* tło przycisku */
  --wmm-trigger-bg-hover: #007a7a;                  /* tło po najechaniu / przy otwartym menu */
  --wmm-trigger-color: #fff;                        /* napis i strzałka */
  --wmm-trigger-radius: 0.2rem;
  --wmm-trigger-py: 0.5rem;
  --wmm-trigger-px: 1.25rem;
  --wmm-trigger-font: "Noto Sans", sans-serif;
  --wmm-trigger-font-size: 1rem;                    /* jak "Magnetyczny Blog": 1rem / 700 / 24 px */
  --wmm-trigger-weight: 700;
  --wmm-trigger-line-height: 1.5;
  --wmm-trigger-transform: none;                    /* "uppercase" = wielkie litery jak w "Czytaj więcej" */
  --wmm-trigger-offset: 15px;                       /* odstęp od turkusowej linii – jak przy "Magnetyczny Blog" */
}

/* ==========================================================================
   1. Kolor czcionki (czarny)
   ========================================================================== */

/* wyzwalacz "Produkty" + strzałka */
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-link,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-link:hover,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-link:focus,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle:hover,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle:focus,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link {
  color: var(--wmm-color);
}

/* poziom 1 (lewa kolumna) */
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item,
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item:hover,
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item:focus,
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item.active,
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item.active:focus,
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item.active:active {
  color: var(--wmm-color);
}

/* poziom 2, 3 i głębiej */
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-cascade .wmm-link,
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-cascade .wmm-link:visited {
  color: var(--wmm-color);
}

/* ==========================================================================
   2. Lista poziomu 1 (lewa kolumna) – układ jak w motywie, ciaśniej + ikonki
   ========================================================================== */

/* trzy kolumny o równej szerokości (motyw: col-sm-3 / col-sm-9) */
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__row > .submenu__left {
  flex: 0 0 auto;
  width: var(--wmm-l1-width);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__row > .submenu__right {
  flex: 0 0 auto;
  width: calc(100% - var(--wmm-l1-width));
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left {
  gap: var(--wmm-item-gap);
  padding-block: var(--wmm-col-py);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item {
  flex-shrink: 0;
  gap: var(--wmm-thumb-gap);
  padding: var(--wmm-item-py) var(--wmm-item-px);
  font-size: var(--wmm-font-size);
  font-weight: 400;
  line-height: 1.3;
  border-radius: var(--wmm-radius);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item:hover,
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item.active {
  color: var(--wmm-hover-color);
  background-color: var(--wmm-hover-bg);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item:focus {
  background-color: var(--wmm-hover-bg);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item .wmm-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* strzałka z motywu ma zostać przy prawej krawędzi */
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left .submenu__left-item[data-ps-has-child="true"]::after {
  flex-shrink: 0;
  margin-left: auto;
}

/* ==========================================================================
   3. Listy poziomu 2 i 3 (kaskada)
   [poziom 1] | [poziom 2] | [poziom 3 – pokazywany po najechaniu na pozycję poziomu 2]
   ========================================================================== */
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__right {
  display: flex;
  flex-direction: column;
  padding-block: 0;
}

/* panel prawej części: 2 kolumny zamiast siatki 3–4 grup (motyw ustawia display: grid/none) */
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__right .submenu__right-items.wmm-cascade {
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-col {
  min-width: 0;
  padding-block: var(--wmm-col-py);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-col--l2 {
  padding-right: var(--wmm-col-px);
  border-right: 0.0625rem solid var(--wmm-border);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-col--l3 {
  padding-left: var(--wmm-col-px);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-list {
  display: flex;
  flex-direction: column;
  gap: var(--wmm-item-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-item {
  flex-shrink: 0;
  margin: 0;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-link {
  display: flex;
  gap: var(--wmm-thumb-gap);
  align-items: center;
  padding: var(--wmm-item-py) var(--wmm-item-px);
  font-size: var(--wmm-font-size);
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  border-radius: var(--wmm-radius);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-link .wmm-label {
  flex: 1 1 auto;
  min-width: 0;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-link:hover,
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-item.is-open > .wmm-link {
  color: var(--wmm-hover-color);
  background-color: var(--wmm-hover-bg);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-link:focus-visible {
  background-color: var(--wmm-hover-bg);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-item.current > .wmm-link {
  font-weight: 600;
}

/* strzałka przy pozycjach poziomu 2, które mają poziom 3 (jak w lewej kolumnie) */
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-item--parent > .wmm-link::after {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: auto;
  font-family: "Material Icons", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "liga";
  line-height: 1;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  content: "\e315";
  -webkit-font-smoothing: antialiased;
}

/* panele poziomu 3 – widoczny tylko aktywny */
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-panel {
  display: none;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-panel.is-active {
  display: flex;
}

/* poziom 4 i głębiej – wcięta lista pod rodzicem w kolumnie poziomu 3 */
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-list--deep {
  --wmm-thumb-size: var(--wmm-deep-thumb-size);
  gap: 0;
  padding-left: calc(var(--wmm-item-px) + 0.75rem);
  margin-top: var(--wmm-item-gap);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-list--deep .wmm-link {
  padding-block: 0.25rem;
  font-size: 0.9375rem;
}

/* ==========================================================================
   4. Ikonki – miniatury kategorii ("Miniatura kategorii")
   Pusta ikonka trzyma miejsce, żeby teksty w kolumnie były wyrównane.
   Gdy w danej liście nie ma żadnej miniatury, miejsce na ikonki jest ukrywane.
   ========================================================================== */
.ps-mainmenu .wmm-thumb {
  display: inline-flex;
  flex: 0 0 var(--wmm-thumb-size);
  align-items: center;
  justify-content: center;
  width: var(--wmm-thumb-size);
  height: var(--wmm-thumb-size);
  overflow: hidden;
}

.ps-mainmenu .wmm-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left:not(:has(.wmm-thumb img)) .wmm-thumb,
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-list:not(:has(.wmm-thumb img)) .wmm-thumb {
  display: none;
}

/* ==========================================================================
   5. Przewijanie długich list
   Każda kolumna przewija się osobno; wysokość (--wmm-max-h) liczy JS: od górnej krawędzi
   rozwijanego panelu do dołu okna. Kółko myszy nad panelem nie przewija strony pod spodem.
   ========================================================================== */
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-scroll {
  max-height: var(--wmm-max-h, calc(100vh - 220px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #b5b5b5 transparent;
  scrollbar-width: thin;
}

/* JS dodaje klasę, gdy poniżej są jeszcze pozycje – dół kolumny lekko się wygasza */
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-scroll.wmm-scroll--more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--wmm-fade)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--wmm-fade)), transparent);
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-scroll::-webkit-scrollbar {
  width: 6px;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-scroll::-webkit-scrollbar-thumb {
  background-color: #b5b5b5;
  border-radius: 3px;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
   6. Menu mobilne – czarna czcionka + ikonki
   ========================================================================== */
.ps-mainmenu.ps-mainmenu--mobile .menu a,
.ps-mainmenu.ps-mainmenu--mobile .menu a:hover,
.ps-mainmenu.ps-mainmenu--mobile .menu .menu__link:active,
.ps-mainmenu.ps-mainmenu--mobile .menu .menu__title,
.ps-mainmenu.ps-mainmenu--mobile .menu .menu__toggle-child {
  color: var(--wmm-color);
}

.ps-mainmenu.ps-mainmenu--mobile .menu .menu__link {
  display: flex;
  flex: 1 1 auto;
  gap: var(--wmm-thumb-gap);
  align-items: center;
  min-width: 0;
}

.ps-mainmenu.ps-mainmenu--mobile .menu__list:not(:has(.wmm-thumb img)) .wmm-thumb {
  display: none;
}

/* ==========================================================================
   7. Menu w hooku displayWMainMenu – {hook h='displayWMainMenu'} w szablonie motywu
   (np. w jednej linii z "Magnetyczny Blog"). Rozwijany panel zajmuje szerokość najbliższego
   przodka z position: relative/sticky (w Hummingbird: cały nagłówek) i otwiera się pod "Produkty".
   ========================================================================== */
.ps-mainmenu.ps-mainmenu--hook {
  display: inline-flex;
  align-items: center;
  order: 0; /* motyw ustawia order: -1 / 1, co w wierszu flex przesuwało menu na początek/koniec */
}

.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree {
  gap: 0;
  padding: 0;
  margin: 0;
}

/* panel nie dziedziczy typografii z miejsca wstawienia (np. pogrubienia/wyśrodkowania linii z linkami) */
.ps-mainmenu.ps-mainmenu--hook .submenu {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}

/* wygląd przycisku (tło, czcionka, położenie) – sekcja 11 */

/* ==========================================================================
   8. Izolacja od stylów otoczenia
   Menu wstawione hookiem stoi między innymi linkami nagłówka, a ich reguły dla ul / li / a
   (podkreślenie po najechaniu, wyśrodkowanie, ramki/linie, separatory, przesunięcia) nie mogą
   zmieniać menu. Dlatego w tej sekcji – i tylko tutaj – jest !important.
   ========================================================================== */

/* --- podkreślenia z innych menu (np. .jxmegamenu li:hover { text-decoration: underline }) ---
   Podkreślenie ustawione na elemencie li obejmuje cały tekst w środku i nie da się go zdjąć
   z samych linków – trzeba je zdjąć z tego li:
   1) wszystkie ul/li menu (pasują do reguł typu ".jxmegamenu li:hover", gdy menu stoi w jxmegamenu),
   2) li innego menu, w którym stoi nasze menu – tylko wtedy, gdy kursor jest nad naszym menu. */
.ps-mainmenu ul,
.ps-mainmenu li,
.ps-mainmenu ul:hover,
.ps-mainmenu li:hover {
  text-decoration: none !important;
}

li:has(.ps-mainmenu.ps-mainmenu--desktop:hover) {
  text-decoration: none !important;
}

/* --- wyzwalacz "Produkty": bez podkreślenia, linii, tła i obracania strzałki --- */
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > .ps-mainmenu__tree-item,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > .ps-mainmenu__tree-item > .ps-mainmenu__tree-item-wrapper,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-link,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-dropdown-toggle {
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > .ps-mainmenu__tree-item::before,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > .ps-mainmenu__tree-item::after,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-link::before,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-link::after,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-dropdown-toggle::before {
  display: none !important;
  content: none !important;
}

/* strzałka przy "Produkty" stoi w miejscu (motyw obraca ją o 180° po otwarciu) */
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-dropdown-toggle::after {
  text-decoration: none !important;
  border: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* --- bez ramek po kliknięciu (fokus / aktywny link / podświetlenie dotknięcia) ---
   Dotyczy menu desktopowego i mobilnego. Przy obsłudze klawiaturą pozycja z fokusem
   jest zaznaczona tylko tłem, tak jak po najechaniu myszą. */
.ps-mainmenu a,
.ps-mainmenu button,
.wmm-m-view a,
.wmm-m-view button {
  -webkit-tap-highlight-color: transparent;
}

.ps-mainmenu a:focus,
.ps-mainmenu a:focus-visible,
.ps-mainmenu a:active,
.ps-mainmenu button:focus,
.ps-mainmenu button:focus-visible,
.ps-mainmenu button:active,
.wmm-m-view a:focus,
.wmm-m-view a:focus-visible,
.wmm-m-view a:active,
.wmm-m-view button:focus,
.wmm-m-view button:focus-visible,
.wmm-m-view button:active {
  outline: none !important;
  box-shadow: none !important;
}

.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-link:focus-visible,
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .ps-mainmenu__tree-dropdown-toggle:focus-visible,
.ps-mainmenu.ps-mainmenu--desktop .submenu a.submenu__left-item:focus-visible,
.ps-mainmenu.ps-mainmenu--desktop .submenu a.wmm-link:focus-visible {
  background-color: var(--wmm-hover-bg) !important;
}

/* panel bez górnej linii */
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .submenu {
  border-top: 0 !important;
}
.wmm-label {
    font-weight: 500 !important;
}

/* Panel otwiera się zaraz pod nagłówkiem strony (JS: positionBelowHeader). Ten niewidoczny pas
   nad panelem wypełnia odstęp między "Produkty" a panelem, żeby panel nie zamykał się,
   gdy kursor jedzie w dół przez resztę nagłówka. Wysokość (--wmm-bridge) liczy JS. */
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree .submenu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--wmm-bridge, 0px);
  content: "";
}

/* --- listy w panelu (poziom 1, 2, 3 i głębiej): zawsze od lewej krawędzi --- */
.ps-mainmenu.ps-mainmenu--desktop .submenu,
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__left,
.ps-mainmenu.ps-mainmenu--desktop .submenu .submenu__right,
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-col,
.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-label {
  text-align: left !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu ul.wmm-list {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu ul.wmm-list:not(.wmm-panel),
.ps-mainmenu.ps-mainmenu--desktop .submenu ul.wmm-list.wmm-panel.is-active {
  display: flex !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu ul.wmm-list.wmm-panel:not(.is-active) {
  display: none !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu ul.wmm-list.wmm-list--deep {
  padding-left: calc(var(--wmm-item-px) + 0.75rem) !important;
  margin-top: var(--wmm-item-gap) !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu li.wmm-item {
  display: block !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu li.wmm-item::before,
.ps-mainmenu.ps-mainmenu--desktop .submenu li.wmm-item::after,
.ps-mainmenu.ps-mainmenu--desktop .submenu a.wmm-link::before,
.ps-mainmenu.ps-mainmenu--desktop .submenu a.submenu__left-item::before {
  display: none !important;
  content: none !important;
}

/* linki: bez podkreśleń (również strzałek), ramek i przesunięć – także po najechaniu */
.ps-mainmenu.ps-mainmenu--desktop .submenu a.wmm-link,
.ps-mainmenu.ps-mainmenu--desktop .submenu a.submenu__left-item {
  display: flex !important;
  justify-content: flex-start !important;
  float: none !important;
  margin: 0 !important;
  text-align: left !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu a.wmm-link {
  padding: var(--wmm-item-py) var(--wmm-item-px) !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu .wmm-list--deep a.wmm-link {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu a.submenu__left-item {
  padding: var(--wmm-item-py) var(--wmm-item-px) !important;
}

.ps-mainmenu.ps-mainmenu--desktop .submenu a.wmm-link *,
.ps-mainmenu.ps-mainmenu--desktop .submenu a.wmm-link::after,
.ps-mainmenu.ps-mainmenu--desktop .submenu a.submenu__left-item *,
.ps-mainmenu.ps-mainmenu--desktop .submenu a.submenu__left-item::after {
  text-decoration: none !important;
}

/* ==========================================================================
   9. Próg menu desktop / mobilne: 992 px (tak jak w jxmegamenu)
   Motyw przełącza menu przy 1200 px (xl). Tutaj – niezależnie od klas Bootstrapa i reguł
   z innych plików – menu desktopowe (.wmm-desktop-nav) pokazuje się od 992 px,
   a ikonka menu mobilnego (hamburger) tylko poniżej 992 px.
   Zmiana progu: oba min-width poniżej (+ col-lg w views/templates/hook/ps_mainmenu.tpl).
   ========================================================================== */
.ps-mainmenu .ps-mainmenu__desktop.wmm-desktop-nav {
  display: none !important;
}

@media (min-width: 992px) {
  .ps-mainmenu .ps-mainmenu__desktop.wmm-desktop-nav {
    display: block !important;
  }

  .ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__mobile-toggle,
  .ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__mobile-toggle .menu-toggle {
    display: none !important;
  }

  /* motyw zmienia kolejność kolumny menu w nagłówku dopiero od 1200 px */
  .ps-mainmenu.ps-mainmenu--desktop:not(.ps-mainmenu--hook) {
    order: 1;
  }
}

/* ==========================================================================
   10. Menu mobilne (< 992 px): "Produkty" w panelu bocznym motywu
   Wiersz "Produkty" pochodzi z hooka displayWMainMenu, który w tym sklepie renderuje się
   także w panelu (header.tpl -> displayTop -> jxmegamenu). Po kliknięciu lista kategorii
   zastępuje treść panelu (JS: views/js/mainmenu-custom.js). Wygląd dopasowany do panelu:
   wiersze 14 px / 600, linie #eee, akcent #009899.
   ========================================================================== */
.wmm-m,
.wmm-m-view {
  --wmm-m-color: #232323;                  /* tekst */
  --wmm-m-accent: #009899;                 /* strzałki, linia pod tytułem */
  --wmm-m-border: #eee;                    /* linie między wierszami */
  --wmm-m-soft-bg: #f9f9f9;                /* tło wiersza "wróć" i po dotknięciu */
  --wmm-m-font-size: 1rem;                 /* wszystkie pozycje (z !important – inne style panelu nie zmienią) */
  --wmm-m-thumb-size: 28px;                /* ikonka kategorii */
  --wmm-m-arrow-width: 45px;               /* pole ze strzałką po prawej */
}

.ps-mainmenu .wmm-m {
  display: none !important;
}

@media (max-width: 991.98px) {
  .ps-mainmenu.ps-mainmenu--hook {
    display: block;
    width: 100%;
  }

  .ps-mainmenu .wmm-m {
    display: block !important;
  }
}

.wmm-m-hidden {
  display: none !important;
}

.wmm-m-host {
  overflow-x: hidden;
}

/* strzałka rysowana w CSS (bez zależności od fontu z ikonami) */
.wmm-m .wmm-m-chevron,
.wmm-m-view .wmm-m-chevron {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.wmm-m-view .wmm-m-chevron--back {
  transform: rotate(135deg);
}

/* --- wiersz "Produkty" w menu motywu --- */
.wmm-m .wmm-m-entries {
  margin: 0;
  padding: 0;
}

.wmm-m .wmm-m-entry {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 12px calc(var(--wmm-m-arrow-width) + 10px) 12px 15px;
  margin: 0;
  font: inherit;
  font-size: var(--wmm-m-font-size) !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wmm-m-color);
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--wmm-m-border);
  border-radius: 0;
  box-shadow: none;
}

.wmm-m .wmm-m-entry__arrow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wmm-m-arrow-width);
  color: var(--wmm-m-accent);
  border-left: 1px solid var(--wmm-m-border);
}

/* --- lista kategorii w panelu --- */
.wmm-m-view {
  width: 100%;
  font-size: var(--wmm-m-font-size) !important;
  color: var(--wmm-m-color);
  text-align: left;
}

.wmm-m-view .wmm-m-back {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 15px;
  margin: 0;
  font: inherit;
  font-size: var(--wmm-m-font-size) !important;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wmm-m-color);
  text-align: left;
  cursor: pointer;
  background: var(--wmm-m-soft-bg);
  border: 0;
  border-bottom: 1px solid var(--wmm-m-border);
  border-radius: 0;
}

.wmm-m-view .wmm-m-back .wmm-m-chevron {
  margin-left: 3px;
  color: var(--wmm-m-accent);
}

.wmm-m-view .wmm-m-heading {
  padding: 14px 15px 10px;
  font-size: var(--wmm-m-font-size) !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wmm-m-color);
  border-bottom: 2px solid var(--wmm-m-accent);
}

.wmm-m-view .wmm-m-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wmm-m-view .wmm-m-item {
  display: flex;
  align-items: stretch;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--wmm-m-border);
}

.wmm-m-view .wmm-m-link {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 10px 15px;
  font-size: var(--wmm-m-font-size) !important;
  font-weight: 600;
  line-height: 1.35;
  color: var(--wmm-m-color);
  text-decoration: none !important;
}

.wmm-m-view .wmm-m-link:hover,
.wmm-m-view .wmm-m-link:active {
  color: var(--wmm-m-accent);
  background: var(--wmm-m-soft-bg);
}

.wmm-m .wmm-m-entry__label,
.wmm-m-view .wmm-m-label,
.wmm-m-view .wmm-m-back__label {
  font-size: var(--wmm-m-font-size) !important;
}

.wmm-m-view .wmm-m-label {
  flex: 1 1 auto;
  min-width: 0;
}

.wmm-m-view .wmm-m-next {
  display: flex;
  flex: 0 0 var(--wmm-m-arrow-width);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  color: var(--wmm-m-accent);
  cursor: pointer;
  background: none;
  border: 0;
  border-left: 1px solid var(--wmm-m-border);
  border-radius: 0;
}

.wmm-m-view .wmm-m-next:active {
  background: var(--wmm-m-soft-bg);
}

.wmm-m-view .wmm-thumb {
  display: inline-flex;
  flex: 0 0 var(--wmm-m-thumb-size);
  align-items: center;
  justify-content: center;
  width: var(--wmm-m-thumb-size);
  height: var(--wmm-m-thumb-size);
  overflow: hidden;
}

.wmm-m-view .wmm-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wmm-m-view .wmm-m-list:not(:has(.wmm-thumb img)) .wmm-thumb {
  display: none;
}

/* fokus z klawiatury – tylko tło (ramki wyłączone w sekcji 8) */
.wmm-m .wmm-m-entry:focus-visible,
.wmm-m-view button:focus-visible,
.wmm-m-view a:focus-visible {
  background: var(--wmm-m-soft-bg);
}

/* przejścia między poziomami */
@keyframes wmm-m-in-fwd {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wmm-m-in-back {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.wmm-m-anim-fwd {
  animation: wmm-m-in-fwd 0.22s ease-out;
}

.wmm-m-anim-back {
  animation: wmm-m-in-back 0.22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .wmm-m-anim-fwd,
  .wmm-m-anim-back {
    animation: none;
  }
}

/* ==========================================================================
   11. Przycisk "Pełna oferta" (hook displayWMainMenu, >= 992 px)
   Kształt i kolory jak przyciski "Czytaj więcej" (tło #009899, po najechaniu #007a7a,
   zaokrąglenie .2rem), czcionka jak "Magnetyczny Blog" (Noto Sans, 1rem, 700), biały napis.
   Napis ustawia się w konfiguracji modułu (panel "Przycisk menu"). Wartości – zmienne w sekcji 0.
   ========================================================================== */
/* reguły jxmegamenu dla "li" (np. .submenu-jx li { margin-top: 15px }) nie mogą przesuwać przycisku */
.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree > .ps-mainmenu__tree-item {
  padding: 0 !important;
  margin: 0 !important;
}

.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree > .ps-mainmenu__tree-item > .ps-mainmenu__tree-item-wrapper {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: var(--wmm-trigger-py) var(--wmm-trigger-px);
  cursor: pointer;
  background: var(--wmm-trigger-bg) !important;
  border-radius: var(--wmm-trigger-radius) !important;
  transition: background-color 0.2s;
}

/* ciemniejsze tło po najechaniu i dopóki menu jest otwarte (kursor nad panelem) */
.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree > .ps-mainmenu__tree-item:hover > .ps-mainmenu__tree-item-wrapper,
.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree > .ps-mainmenu__tree-item > .ps-mainmenu__tree-item-wrapper:has(:focus-visible) {
  background: var(--wmm-trigger-bg-hover) !important;
}

/* Napis i strzałka zawsze tej samej wielkości: reguły jxmegamenu, np.
   "ul.jxmegamenu.clearfix.top-level-menu.jxmegamenu_item.jxmen a { font-size: 1rem !important }",
   mają wyższy priorytet niż zwykły selektor, a przegrywały tylko ze stanem :hover – stąd
   "powiększanie" po najechaniu. Podwójna klasa .ps-mainmenu podnosi priorytet we wszystkich stanach. */
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-link,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-link:hover,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-link:focus,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-link:focus-visible,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-link:active,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle:hover,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle:focus,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle:focus-visible,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle:active {
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--wmm-trigger-font) !important;
  font-size: var(--wmm-trigger-font-size) !important;
  font-weight: var(--wmm-trigger-weight) !important;
  line-height: var(--wmm-trigger-line-height) !important;
  color: var(--wmm-trigger-color) !important;
  text-transform: var(--wmm-trigger-transform) !important;
  letter-spacing: normal !important;
  white-space: nowrap;
  background: none !important;
  transform: none !important;
}

.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree .ps-mainmenu__tree-item .ps-mainmenu__tree-dropdown-toggle::after {
  color: var(--wmm-trigger-color) !important;
}

/* przycisk się nie powiększa ani nie przesuwa po najechaniu */
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree > .ps-mainmenu__tree-item,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree > .ps-mainmenu__tree-item:hover,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree > .ps-mainmenu__tree-item > .ps-mainmenu__tree-item-wrapper,
.ps-mainmenu.ps-mainmenu.ps-mainmenu--hook .ps-mainmenu__tree > .ps-mainmenu__tree-item:hover > .ps-mainmenu__tree-item-wrapper {
  font-size: var(--wmm-trigger-font-size) !important;
  transform: none !important;
}

/* Przy lewej krawędzi linii z "Magnetyczny Blog"; linki bloga zostają na swoim miejscu:
   - po prawej stronie stoi niewidoczny element tej samej szerokości co przycisk
     (--wmm-trigger-w ustawia JS), więc linki są dalej wyśrodkowane; na wąskich ekranach
     ten element kurczy się pierwszy, żeby linki się nie ściskały,
   - napis przycisku stoi w tej samej linii co napisy bloga (odstęp od linii minus padding). */
@media (min-width: 992px) {
  .submenu-jx > .ps-mainmenu.ps-mainmenu--hook {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: calc(var(--wmm-trigger-offset) - var(--wmm-trigger-py));
    margin-right: auto;
  }

  .submenu-jx:has(> .ps-mainmenu.ps-mainmenu--hook) > li {
    flex-shrink: 0;
    align-self: flex-start;
  }

  .submenu-jx:has(> .ps-mainmenu.ps-mainmenu--hook)::after {
    flex: 0 100 var(--wmm-trigger-w, 0px);
    margin-left: auto;
    content: "";
  }
}