/* Ababink - Mega menu (front). Wlasny, samodzielny styl - nie zaleza od
   niedokumentowanych klas JS motywu (patrz docs/plan/modul-mega-menu.md). */

/* Szerokosc i kolejnosc w wierszu naglowka daja klasy siatki na <nav> w menu.tpl -
   tutaj tylko to, czego Bootstrap nie zalatwia. min-width:0 jest konieczne, zeby
   dlugi pasek mogl sie kurczyc zamiast rozpychac wiersz. */
.abmm {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Szuflada jest kontenerem listy. Na desktopie ma byc przezroczysta dla ukladu -
   caly wyglad paska robi .abmm__list, tak jak przed wprowadzeniem hamburgera. */
.abmm__drawer {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.abmm__burger,
.abmm__drawer-head,
.abmm__overlay { display: none; }

.abmm__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.abmm__item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.abmm__link {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Odstep poziomy dobrany tak, zeby pasek z ikonkami zmiescil sie w jednym
       wierszu w 840 px, ktore daje mu naglowek motywu. */
    padding: 0.6rem 0.55rem;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}

.abmm__link:hover,
.abmm__link:focus {
    color: var(--bs-primary, #2fb5d2);
}

.abmm__icon { height: 18px; width: 18px; object-fit: contain; }

/* ------------------------------- ikonki pozycji ------------------------------ */

/*
 * Same rysunki siedza w views/css/glyphs.css - arkuszu wspolnym z zapleczem,
 * zeby pracownik wybierajac ikonke widzial ja, a nie sama angielska nazwe.
 * Tutaj zostaja wylacznie rzeczy zalezne od miejsca, w ktorym ikonka stoi.
 */

/*
 * ⚠ Na waskim komputerze ikonki znikaja z PASKA, a w szufladzie zostaja.
 *
 * Naglowek motywu przydziela menu stala szerokosc, ktora miedzy 992 a 1400 px jest
 * mniejsza niz suma pozycji z ikonkami - pasek zawijal sie wtedy do drugiego wiersza
 * i spychal logo z wyszukiwarka. Ponizej 992 px menu jest juz szuflada, w ktorej
 * kazda pozycja ma wlasny wiersz i miejsca nie brakuje, wiec tam ikonki zostaja
 * i sa najbardziej przydatne (lista pionowa skanuje sie po ikonach).
 *
 * Zmierzone: pasek 763 px przy 1400 px okna wobec 751 px sumy pozycji z ikonkami,
 * i 620 px przy 1200 px okna wobec 604 px sumy bez ikonek.
 */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .abmm__glyph { display: none; }
}

.abmm__badge {
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: 700;
}

.abmm__countdown {
    font-size: 0.7rem;
    color: var(--bs-danger, #dc3545);
    font-weight: 600;
}

/* ⚠ Wyroznienie pozycji menu jest CELOWO tylko strukturalne: klasa `--highlight`
   (potrzebna pomiarowi GA4 w menu.tpl) i glif dobrany w panelu. Zadnego wlasnego koloru.
   Bylo tu `color: var(--bs-danger)`, czyli czerwien od komunikatow o bledach - na oliwkowej
   palecie sklepu gryzla sie z reszta paska. Przy okazji ta regula wygrywala z
   `.abmm__link:hover` (ta sama specyficznosc, ale stala nizej), wiec wyrozniona pozycja
   nie reagowala na najechanie tak jak sasiadki. Napis ma czytac sie jak kazdy inny w menu -
   `.abmm__link` ma `color: inherit`, wiec brak reguly zalatwia sprawe sam. */

.abmm__toggle {
    display: none;
    border: none;
    background: transparent;
    padding: 0 10px;
    cursor: pointer;
}

.abmm__toggle-icon {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.abmm__toggle[aria-expanded="true"] .abmm__toggle-icon {
    transform: rotate(-135deg);
}

.abmm__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 16px;
    min-width: 220px;
}

/* Szerokosc panelu jest ustawieniem pozycji menu - lista trzech odnosnikow CMS
   nie ma wygladac jak rozlegly panel kategorii. */
.abmm__panel--w-auto { min-width: 200px; max-width: 90vw; }
.abmm__panel--w-narrow { width: 260px; }
.abmm__panel--w-medium { width: 520px; max-width: 90vw; }
.abmm__panel--w-wide { width: 800px; max-width: 92vw; }

/* Pelna szerokosc = szerokosc calego paska menu. Panel jest pozycjonowany wzgledem
   pozycji, wiec dla tego wariantu odbieramy jej kontekst pozycjonowania i przejmuje
   go <nav>. Przegladarka bez :has() (sprzed 2023) pokaze po prostu panel przy pozycji. */
.abmm { position: relative; }
.abmm__item:has(> .abmm__panel--w-full) { position: static; }
.abmm__panel--w-full { left: 0; right: 0; width: auto; }

/* ⚠ Panel SZEROKI wyrownany do lewej krawedzi PASKA, a nie do swojej pozycji.
   Panel ma 800 px, a pozycja stojaca w prawej czesci paska daje mu tyle miejsca,
   ile zostalo do krawedzi okna - reszta wychodzi poza ekran i jest nieosiagalna,
   bo zjechanie mysza w bok zamyka panel. Zmierzone na trickovy.sk przed poprawka:
   przy oknie 1200 panel "Produkty" wychodzil o 108 px, przy 1024 - "Prilezitosti"
   o 84 px i "Produkty" o 83 px; przy 1400 i 1920 miescil sie, wiec wady nie widac
   na szerokim monitorze.

   ⚠ Regula jest niezalezna od LICZBY POZYCJI w pasku - wariant `:nth-last-child(-n+2)`
   dzialalby na dzisiejszym menu i przestal po dolozeniu szostej pozycji, po cichu.

   ⚠ Dotyczy WYLACZNIE wariantu `wide`: `full` ma juz wlasne pozycjonowanie wzgledem
   paska (wyzej), a `narrow` (260 px) i `medium` (520 px) mieszcza sie pod swoja
   pozycja. Dzieki temu poprawka nie rusza garibald.ro, ktory uzywa `medium` i `full`. */
.abmm__item:has(> .abmm__panel--w-wide) { position: static; }
.abmm__panel--w-wide { left: 0; }

.abmm__item--open > .abmm__panel {
    display: block;
}

/* ⚠ Panel nie moze wyjsc poza dolna krawedz ekranu - inaczej ostatni rzad kolumn
   jest NIEOSIAGALNY: klient nie ma jak do niego zjechac, bo zjechanie mysza zamyka
   panel. Zmierzone na tym sklepie przed dolozeniem tej reguly: panel "Cadouri pentru"
   ma 903 px, wiec przy oknie 1400x1000 wychodzil o 54 px, a przy 1200x900 o 189 px -
   czyli caly rzad "Sport / Natura / Animale / Acasa" byl poza zasiegiem.

   100dvh, nie 100vh: na przegladarkach mobilnych 100vh nie uwzglednia chowajacego sie
   paska adresu. 170px to wysokosc naglowka z paskiem menu plus margines. */
.abmm__panel {
    max-height: calc(100dvh - 170px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Siatka 12-kolumnowa na CSS Grid, nie na flexie z calc() - grid liczy odstepy sam,
   wiec szerokosci sa dokladne, a "nowy wiersz" to jedna wlasciwosc zamiast rozporki. */
.abmm__columns {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 20px;
    align-items: start;
}

.abmm__column {
    grid-column: span var(--abmm-col-width, 3);
    min-width: 0;
}

.abmm__column--nowy-wiersz {
    grid-column: 1 / span var(--abmm-col-width, 3);
}

/* --- blok: linki --- */
.abmm-block__title {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--bs-secondary-color, #6c757d);
}

.abmm-block__links { list-style: none; margin: 0; padding: 0; }
.abmm-block__links li { margin-bottom: 6px; }
.abmm-block__links a {
    color: inherit;
    text-decoration: none;
    display: flex;
    /* ⚠ `start`, nie `center`: etykiety w tym menu potrafia zawinac sie na dwie
       linie ("Cadouri pentru mire si mireasa"), a przy wysrodkowaniu ikonka
       laduje wtedy miedzy wierszami zamiast przy pierwszym. */
    align-items: start;
    gap: 8px;
}
.abmm-block__links a:hover { color: var(--bs-primary, #2fb5d2); text-decoration: underline; }

/* Ikona linku ma stala ramke, zeby etykiety w liscie zaczynaly sie w jednej osi
   niezaleznie od proporcji wgranego pliku. */
.abmm-block__link-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* --- blok: baner --- */
.abmm-block--banner {
    display: block;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    height: 180px;
    background: #333;
}

.abmm-block__banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* position:absolute + inset:0 (nie min-height:100%) - rodzic ma tylko min-height,
   wiec procentowa wysokosc nie mialaby czego liczyc i badge/justify-content
   liczylyby sie od skurczonego do tresci pudelka, nie od calego kafelka */
.abmm-block__banner-body {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
}

.abmm-block--banner-static { color: #212529; background: var(--bs-light, #f5f5f5); }
.abmm-block--banner-static .abmm-block__banner-body { background: none; color: inherit; }

.abmm-block__banner-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bs-danger, #dc3545);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}

.abmm-block__banner-title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.abmm-block__banner-subtitle {
    font-size: 0.78rem;
    opacity: 0.9;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.abmm-block__banner-countdown { font-size: 0.78rem; font-weight: 700; }
.abmm-block__banner-button {
    display: inline-block;
    margin-top: 2px;
    padding: 3px 9px;
    background: #fff;
    color: #212529;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    align-self: flex-start;
}

/* --- blok: produkty --- */
.abmm-block__products { list-style: none; margin: 0; padding: 0; }
.abmm-block__products li { margin-bottom: 8px; }
.abmm-block__products a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}
.abmm-block__products img { width: 40px; height: 40px; object-fit: cover; border-radius: 3px; }
.abmm-block__product-name { flex: 1 1 auto; font-size: 0.85rem; }
.abmm-block__product-price { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }

/* =================== mobile: hamburger + szuflada z lewej =================== */
/* Pozycje przed logo daja klasy col-auto + order-first na <nav>, nie ten media query.
   Sama lista zostaje akordeonem - tyle ze wewnatrz szuflady, nie w naglowku. */
@media (max-width: 991.98px) {
    .abmm { align-items: center; }

    .abmm__burger {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 44 px, nie 42: minimalny cel dotykowy wg wytycznych Apple i WCAG 2.5.5 */
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    /* trzy kreski z jednego elementu: srodkowa to tlo, skrajne to ::before/::after */
    .abmm__burger-icon,
    .abmm__burger-icon::before,
    .abmm__burger-icon::after {
        display: block;
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }

    .abmm__burger-icon { position: relative; }

    .abmm__burger-icon::before,
    .abmm__burger-icon::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .abmm__burger-icon::before { top: -7px; }
    .abmm__burger-icon::after { top: 7px; }

    .abmm__drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: min(86vw, 340px);
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.22);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .abmm--otwarte .abmm__drawer { transform: none; }

    .abmm__drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }

    .abmm__drawer-title { font-weight: 700; }

    .abmm__drawer-close {
        border: 0;
        background: transparent;
        font-size: 1.6rem;
        line-height: 1;
        padding: 0 6px;
        cursor: pointer;
        color: inherit;
    }

    .abmm__overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .abmm__overlay[hidden] { display: none; }
    .abmm--otwarte .abmm__overlay { opacity: 1; }

    /* strona pod szuflada nie ma sie przewijac razem z nia */
    body.abmm-bez-przewijania { overflow: hidden; }
    /* nowrap jest konieczne: przy kierunku kolumnowym zawijanie tworzy osobne linie,
       a kazda dostaje szerokosc swojej tresci - pozycje i ich linie rozdzielajace
       przestaja siegac krawedzi ekranu */
    .abmm__list { flex-direction: column; flex-wrap: nowrap; gap: 0; width: 100%; }
    .abmm__item { flex-flow: row wrap; align-items: center; border-top: 1px solid rgba(0, 0, 0, 0.08); }
    .abmm__link { flex: 1 1 auto; }
    /* ⚠ Cel dotykowy, nie ozdobnik: sama strzalka ma 8 px wysokosci, wiec przycisk
       rozwijania byl praktycznie nieklikalny palcem i lamal WCAG 2.5.8 (min. 24x24).
       align-self:stretch daje mu cala wysokosc wiersza pozycji. */
    .abmm__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        align-self: stretch;
        min-width: 48px;
        min-height: 48px;
    }
    .abmm__panel {
        /* panel to trzecia komorka wiersza - musi zejsc pod link i strzalke */
        flex: 1 0 100%;
        display: none;
        position: static;
        /* ⚠⚠ ZDEJMUJEMY max-height i overflow z reguly desktopowej. W szufladzie panel
           jest akordeonem WEWNATRZ elementu, ktory sam sie przewija - wlasny scroll
           dawalby przewijanie zagniezdzone, czyli palec na panelu przewija panel,
           a palec obok przewija szuflade. Zmierzone przed poprawka: panel miał 3489 px
           tresci w oknie 674 px, wiec ostatnie kolumny byly praktycznie nieosiagalne.
           Na telefonie akordeon ma sie rozwinac w calosci, a przewija szuflada. */
        max-height: none;
        overflow-y: visible;
        box-shadow: none;
        border-radius: 0;
        padding: 8px 8px 8px 20px;
        min-width: 0;
        max-width: none;
        background: #fafafa;
    }
    .abmm__item--open > .abmm__panel { display: block; }
    /* w szufladzie kazdy uklad schodzi do jednej kolumny - ustawienia szerokosci
       panelu i lamania wierszy dotycza wylacznie desktopu */
    .abmm__panel--w-auto,
    .abmm__panel--w-narrow,
    .abmm__panel--w-medium,
    .abmm__panel--w-wide,
    .abmm__panel--w-full { width: auto; min-width: 0; max-width: none; }
    .abmm__columns { grid-template-columns: 1fr; gap: 12px; }
    .abmm__column,
    .abmm__column--nowy-wiersz { grid-column: 1 / -1; }

    /* ⚠ Cel dotykowy w akordeonie, nie ozdobnik. Zmierzone na 390 px (2026-09-09):
       link w panelu mial 26 px wysokosci, a wiersze staly co 32 px - czyli 6 px
       martwej przerwy miedzy kazdymi dwoma, w ktora trafial palec. Wiersz ma dzis
       min. 44 px i zero przerwy, wiec kazde dotkniecie listy trafia w jakis link.
       Koszt: dluzsza szuflada (53 linki x 44 zamiast x 32 px) - przewija sie sama. */
    .abmm-block__links li { margin-bottom: 0; }
    .abmm-block__links a { min-height: 44px; padding: 9px 0; align-items: center; }
    .abmm-block__links a .abmm-block__glyph { align-self: center; }
}

/* Animacja szuflady to ozdoba - przy ustawieniu systemowym "mniej ruchu" znika,
   ale samo otwieranie dziala tak samo. */
@media (prefers-reduced-motion: reduce) {
    .abmm__drawer,
    .abmm__overlay { transition: none; }
}

/* Ikonka przy linku w panelu: mniejsza i wyciszona wobec pozycji paska, zeby
   prowadzila wzrok, a nie konkurowala z etykieta. Kolor wraca do pelnego przy
   najechaniu razem z tekstem, bo dziedziczy currentColor. */
.abmm-block__glyph {
  width: 0.95em;
  opacity: 0.55;

  /* ⚠ Ramka ikonki ma wysokosc WIERSZA, a rysunek jest w niej srodkowany - nie
     odwrotnie. Link jest fleksem z `align-items: start` (etykiety zawijaja sie na
     dwie linie, wiec srodkowanie calego linku wpychaloby ikonke miedzy wiersze),
     a przy `start` gorna krawedz ramki siada na zerze. Ikonka wysoka na 0.95em
     stala wiec 3,9 px NAD srodkiem pierwszego wiersza - zmierzone na kazdym z 75
     linkow panelu, choc widac to bylo dopiero przy etykiecie dwuwierszowej, gdzie
     ikonka ladowala przy samej gorze bloku wysokiego na 48 px.

     `mask-size` musi byc podany wprost, bo w regule wspolnej jest `contain` -
     przy wyzszej ramce rozciagnalby rysunek zamiast go wysrodkowac. Pozycjonuje
     go `mask-position: center` z tamtej reguly.

     Wysokosc idzie z `1lh`, czyli z wiersza tego konkretnego elementu, wiec sklep
     rodziny z innym `line-height` dopasuje sie sam; `1.5em` zostaje zapasem dla
     przegladarek sprzed 2023 roku, gdzie `lh` jeszcze nie ma. */
  height: 1.5em;
  height: 1lh;
  -webkit-mask-size: 0.95em;
  mask-size: 0.95em;
}

.abmm-block__links a:hover .abmm-block__glyph,
.abmm-block__links a:focus .abmm-block__glyph {
  opacity: 1;
}