/**
 * pysiecmenu - pasek nawigacji kategorii. Namespace .pysiec-menu*, zero zależności.
 * Wartości (promienie, cienie, hover) 1:1 z surowego pliku źródłowego makiety
 * (sesja 2026-09-15) - patrz custom.css dla pełnego zestawu zmiennych.
 */

.pysiec-menu {
  --pysiec-menu-bg: var(--pysiec-bg, #faf8f3);
  --pysiec-menu-border: var(--pysiec-line-20, rgba(62, 47, 35, .2));
  --pysiec-menu-text: var(--pysiec-text, #1a1a18);
  --pysiec-menu-accent: var(--pysiec-brand, #b08858);
  --pysiec-menu-hover-bg: var(--pysiec-line-12, rgba(62, 47, 35, .12));
  /* Ciemniejsze odcienie akcentów (kontrast >= 4,5:1 na kremowym tle; #8fa35c miał 2,6:1) */
  --pysiec-menu-new: #5d7030;
  --pysiec-menu-sale: #a64f46; /* dawny #d9a7a0 = 2,0:1 */

  background: var(--pysiec-menu-bg);
  font-size: 0.875rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pysiec-menu__list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* Świadomie BEZ max-width/margin-inline-auto ani flex-grow - lista ma się kurczyć do
     realnej treści (kategorie), nie rozciągać na całą szerokość .pysiec-menu (flex),
     inaczej robi się z niej ogromny, niewidoczny "martwy" hitbox (znalezione w DevTools,
     sesja 2026-09-15). Domyślne flex:0 1 auto na tym elemencie jako dziecku .pysiec-menu
     (patrz wyżej, teraz display:flex) już daje shrink-to-fit. */
  /* margin-left z makiety (linia 59 źródła) - brakowało go, pasek kategorii siedział
     przy samej lewej krawędzi zamiast być popchnięty w stronę środka, zgłoszone przez
     użytkownika (sesja 2026-09-17). */
  margin-left: clamp(0px, 3vw, 44px);
}

.pysiec-menu__item {
  position: relative;
}

/* Selektory języka/waluty (pysieclangselector/pysieccurrencyselector, hook
   displayPysiecMenuTrailing) - osobny div-sąsiad ul.pysiec-menu__list (NIE <li> w środku,
   poprawka z sesji 2026-09-15 - patrz komentarz w menu.tpl). Dociśnięty do prawej
   krawędzi przez margin-left:auto (patrz reguła niżej) - wyrównany z Koszykiem nad nim.
   Ukryty na mobile - tam te same moduły renderują się osobno w ul.pysiec-menu__mobile-list
   (patrz niżej). */
.pysiec-menu__trailing {
  display: flex;
  align-items: center;
  gap: 6px;
  /* margin-left:auto BRAKOWAŁO mimo komentarza w menu.tpl opisującego dokładnie
     to zachowanie - PLN/PL siedziały zaraz za linkami kategorii zamiast być
     dociśnięte do prawej krawędzi (nie wyrównane z Koszykiem nad nimi, zgłoszone
     przez użytkownika zrzutem ekranu, sesja 2026-09-17). */
  margin-left: auto;
}

/**
 * Kolejność PLN/PL zamieniona przez CSS order, nie przez zmianę kolejności hooków
 * w BO (oba moduły wiszą na tym samym hooku 'displayPysiecMenuTrailing' - kolejność
 * ich wykonania to pozycja w bazie, do której nie mam dostępu z tej sesji SFTP).
 * Na żądanie użytkownika: PL (język) przed PLN (waluta), sesja 2026-09-17.
 * Ten sam hook renderuje się DRUGI RAZ na mobile (.pysiec-menu__mobile-item--utility,
 * patrz menu.tpl) - selektor musi objąć oba miejsca, inaczej desktop i mobile mają
 * różną kolejność (znalezione podczas audytu, sesja 2026-09-17).
 */
.pysiec-menu__trailing .pysiec-langselector,
.pysiec-menu__mobile-item--utility .pysiec-langselector {
  order: 1;
}

.pysiec-menu__trailing .pysiec-currencyselector,
.pysiec-menu__mobile-item--utility .pysiec-currencyselector {
  order: 2;
}

.pysiec-menu__toggle,
.pysiec-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  background: none;
  border: 0;
  border-radius: var(--pysiec-radius-pill, 999px);
  padding: 0.5rem 0.75rem;
  color: var(--pysiec-menu-text);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* Hover w makiecie to tło-pigułka, NIE zmiana koloru tekstu (poza Nowości/Promocje,
   które mają swój stały kolor i tylko dostają tło na hover). */
.pysiec-menu__toggle:hover,
.pysiec-menu__link:hover,
.pysiec-menu__toggle:focus-visible,
.pysiec-menu__link:focus-visible {
  background: var(--pysiec-menu-hover-bg);
  color: var(--pysiec-menu-text);
}

.pysiec-menu__link--new {
  color: var(--pysiec-menu-new);
}

.pysiec-menu__link--sale {
  color: var(--pysiec-menu-sale);
}

.pysiec-menu__link--new:hover,
.pysiec-menu__link--new:focus-visible {
  color: var(--pysiec-menu-new);
}

.pysiec-menu__link--sale:hover,
.pysiec-menu__link--sale:focus-visible {
  color: var(--pysiec-menu-sale);
}

/* Odstęp między pigułkami jest matematycznie identyczny wszędzie (4px, flex
   gap na .pysiec-menu__list) - ale "Sklep" obok "Dla kota" (dwa krótkie
   wyrazy z rzędu) wygląda optycznie na stłoczone, mimo że liczby się zgadzają.
   Dodatkowy margines TYLKO tu, żeby oddzielić wizualnie "Sklep" (stałe wejście
   do wszystkich kategorii) od reszty menu kategorii. Zgłoszone przez
   użytkownika zrzutem ekranu, sesja 2026-09-26. */
.pysiec-menu__link--shop {
  margin-right: 0.5rem;
}

.pysiec-menu__chevron {
  font-size: 1rem;
  opacity: .6;
  transition: transform 0.15s ease;
}

.pysiec-menu__item--mega.is-open .pysiec-menu__chevron {
  transform: rotate(180deg);
}

.pysiec-menu__item--mega.is-open .pysiec-menu__toggle {
  background: var(--pysiec-menu-hover-bg);
}

/* --- Dropdown panel (desktop) - wszystkie kolumny naraz, bez przełączania --- */

.pysiec-menu__panel {
  position: absolute;
  top: calc(100% - 4px);
  left: clamp(14px, 4vw, 32px);
  z-index: 1000;
  /* 680px dosłownie z makiety (linie 63/107) - 42rem (672px) było przybliżeniem. */
  width: min(680px, calc(100vw - 2 * clamp(14px, 4vw, 32px)));
  background: #fff;
  border: 1px solid var(--pysiec-menu-border);
  border-radius: var(--pysiec-radius-xl, 22px);
  box-shadow: var(--pysiec-shadow-panel, 0 24px 48px rgba(62, 47, 35, .16));
}

.pysiec-menu__panel[hidden] {
  display: none;
}

.pysiec-menu__panel-inner {
  padding: 1.375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.375rem;
}

/* Grid kolumn, ZAGNIEŻDŻONY w zewnętrznym flex .panel-inner - 1:1 z makiety
   (linie 64/108). flex:2 1 320px na tym wrapperze, nie na pojedynczych kolumnach -
   inaczej (poprzedni stan, sesja 2026-09-17) kolumny i kafel promo były płaskimi
   rodzeństwami jednego flexa i kafel łapał flex-grow:1 na całą szerokość panelu,
   kiedy 3 kolumny nie mieściły się w jednym rzędzie. */
.pysiec-menu__columns {
  flex: 2 1 320px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
}

.pysiec-menu__column {
  min-width: 0;
}

.pysiec-menu__column-title {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pysiec-menu-new);
}

.pysiec-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.125rem;
}

.pysiec-menu__links a {
  display: block;
  margin-left: -0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--pysiec-radius-sm, 10px);
  color: var(--pysiec-menu-text);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}

.pysiec-menu__links a:hover,
.pysiec-menu__links a:focus-visible {
  background: var(--pysiec-menu-hover-bg);
  color: var(--pysiec-menu-text);
}

.pysiec-menu__tile {
  /* 180px dosłownie z makiety (linie 93/137: flex:1 1 180px) - 11rem (176px) było
     przybliżeniem. */
  flex: 1 1 180px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: var(--pysiec-cream, #e8dcc5);
  border-radius: var(--pysiec-radius-md, 16px);
  padding: 1rem;
  text-decoration: none;
  color: var(--pysiec-menu-text);
}

.pysiec-menu__tile:hover,
.pysiec-menu__tile:focus-visible {
  background: var(--pysiec-cream-hover, #dfd0b2);
}

.pysiec-menu__tile-image {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(
    135deg,
    #dccdaf 0 10px,
    var(--pysiec-cream, #e8dcc5) 10px 20px
  );
  border-radius: 0.75rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(62, 47, 35, .7);
  padding: 0.5rem;
}

.pysiec-menu__tile-title {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.25;
}

.pysiec-menu__tile-description {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--pysiec-menu-text);
}

.pysiec-menu__tile-cta {
  margin-top: auto;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--pysiec-brand, #b08858);
}

/* --- Mobile: offcanvas + <details> akordeon, brak wsparcia hover --- */

@media (max-width: 991.98px) {
  .pysiec-menu__list {
    display: none;
  }

  .pysiec-menu__trailing {
    display: none;
  }
}

.pysiec-menu__mobile[hidden] {
  display: none;
}

.pysiec-menu__mobile {
  position: fixed;
  inset: 0;
  z-index: 1050;
}

.pysiec-menu__mobile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, 0.4);
}

.pysiec-menu__mobile-panel {
  position: relative;
  height: 100%;
  width: min(20rem, 85vw);
  background: #fff;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pysiec-menu__mobile-close {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: 0;
  padding: 0.5rem;
  font: inherit;
  color: var(--pysiec-menu-text);
  cursor: pointer;
}

.pysiec-menu__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Podbite z 0.25rem - bez linii pod pozycjami (patrz komentarz niżej)
     odstępy same muszą czytelnie rozdzielać wiersze. */
  gap: 0.5rem;
}

/* Linia pod KAŻDĄ pozycją (Sklep/Dla kota/.../Promocje = 8 linii pod rząd)
   + gap 0.25rem na liście wyglądały na "za dużo linii" na żywo - zgłoszone
   zrzutem ekranu, sesja 2026-09-28. Usunięte per-pozycja, zamiast tego
   zwykły odstęp z gapu na .pysiec-menu__mobile-list robi separację. */
.pysiec-menu__mobile-link,
.pysiec-menu__mobile-details summary {
  display: block;
  padding: 0.75rem 0.5rem;
  color: var(--pysiec-menu-text);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.pysiec-menu__mobile-link--new,
.pysiec-menu__mobile-link.pysiec-menu__link--new {
  color: var(--pysiec-menu-new);
}

.pysiec-menu__mobile-link--sale,
.pysiec-menu__mobile-link.pysiec-menu__link--sale {
  color: var(--pysiec-menu-sale);
}

.pysiec-menu__mobile-details summary {
  list-style: none;
}

.pysiec-menu__mobile-details summary::-webkit-details-marker {
  display: none;
}

.pysiec-menu__mobile-details-body {
  padding: 0.25rem 0.5rem 1rem;
}

.pysiec-menu__mobile-tab-label {
  margin: 0.75rem 0 0.25rem;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pysiec-menu-new);
}

.pysiec-menu__mobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.pysiec-menu__mobile-links a {
  color: var(--pysiec-menu-text);
  text-decoration: none;
}

/* Selektory języka/waluty na mobile - ostatnia pozycja w offcanvas, odseparowana
   linią od kategorii, oba <select> obok siebie. */
.pysiec-menu__mobile-item--utility {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 0.5rem 0.25rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--pysiec-menu-border);
}

/* Zdjęcie kafelka wgrane w BO; bez zdjęcia zostają paski (kafelek z samym tekstem). */
.pysiec-menu__tile-image--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Wąski desktop (992-1199px): 8 linków + PL/PLN nie mieściły się w szerokości (przy ~1000px
   pasek miał 1051px i cała strona przewijała się w bok). Mniejsze odstępy tylko w tym
   przedziale. Sesja 2026-10-19. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .pysiec-menu {
    gap: 8px;
  }

  .pysiec-menu__list {
    margin-left: 0;
    padding: 0.25rem 0;
    gap: 0;
  }

  .pysiec-menu__toggle,
  .pysiec-menu__link {
    padding: 0.5rem 0.5rem;
    gap: 0.25rem;
  }
}