/* v87-mobile-drawer.css — 2026-08-27
 * ==========================================================================
 * Warstwa paneli szuflady mobilnej (nawigacja w głąb) + menu główne na telefonie.
 *
 * KOLORY: wyłącznie zmienne motywu — --primary, --primary-d, --dark, --text,
 * --text-l, --bg2, --border, --border-l, --r. Żadnego koloru na sztywno, żeby
 * zmiana palety w Customizerze nadal przechodziła na szufladę.
 *
 * CZEGO TEN PLIK NIE DOTYKA: .mm-cats, .mm-cat-item, .mm-sub, .mm-expand,
 * .mm-brands i .mm-brand-* — te bloki zostają dokładnie takie, jakie były,
 * bo hbt-frontend.js KLONUJE je do desktopowego mega-dropdownu kategorii.
 * Panele są warstwą dookoła nich, nie zamiast nich.
 *
 * Ładowany na wp_head 10003 (patrz core/mobile-drawer.php) — musi być ZA
 * legacy-main.css, inaczej reguły .mm-body przegrałyby kolejnością.
 * ==========================================================================
 */

/* ── Stos paneli ─────────────────────────────────────────────────────────
 * .mm-body zachowuje swoje miejsce w kolumnie flex szuflady, ale przestaje
 * być samo obszarem przewijania — przewijają się teraz pojedyncze panele. */
.mobile-menu .mm-body.hbt-mm-stos {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.hbt-mm-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
}
.hbt-mm-panel.hbt-jest { transform: translateX(0); }
.hbt-mm-panel.hbt-za   { transform: translateX(-26%); }

@media (prefers-reduced-motion: reduce) {
    .hbt-mm-panel { transition: none; }
}

/* ── Kafle zakupowe (Sklep / Promocje / Nowości / Maszyny) ───────────────
 * Kolor paska nawigacji, żeby na telefonie czytały się jako ten sam element
 * co czarny pasek na desktopie. */
.hbt-mm-kafle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
}
.hbt-mm-kafel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 62px;
    padding: 11px 12px;
    border-radius: var(--r, 8px);
    background: var(--dark, #1a1714);
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
}
.hbt-mm-kafel strong {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.hbt-mm-kafel span {
    font-size: 11px;
    opacity: .62;
}
.hbt-mm-kafel--akcent { background: var(--primary, #7cb342); }
.hbt-mm-kafel:focus-visible {
    outline: 2px solid var(--primary-l, #a5d66c);
    outline-offset: 2px;
}

/* ── Wiersze nawigacji ───────────────────────────────────────────────────
 * 48 px wysokości: w audycie z 2026-08-27 naliczyłem w szufladzie od 64 do
 * 125 celów dotyku poniżej 40 px. */
.hbt-mm-grupa {
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-l, #6b6b6b);
    padding: 13px 16px 6px;
    border-top: 1px solid var(--border-l, #e8e8e8);
}
.hbt-mm-wiersz {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 48px;
    padding: 8px 16px;
    border: 0;
    border-bottom: 1px solid var(--border-l, #e8e8e8);
    background: none;
    color: var(--text, #222);
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.hbt-mm-wiersz > i {
    flex: 0 0 20px;
    width: 20px;
    text-align: center;
    color: var(--primary-d, #4a7a24);
    font-size: 14px;
}
.hbt-mm-wiersz .hbt-mm-etykieta { flex: 1 1 auto; }
.hbt-mm-wiersz .hbt-mm-licz {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-l, #6b6b6b);
    font-variant-numeric: tabular-nums;
}
.hbt-mm-wiersz .hbt-mm-strzalka {
    flex: 0 0 auto;
    color: var(--text-l, #6b6b6b);
    font-size: 13px;
}
.hbt-mm-wiersz:focus-visible {
    outline: 2px solid var(--primary-d, #4a7a24);
    outline-offset: -2px;
}
.hbt-mm-wiersz--mocny .hbt-mm-etykieta { font-weight: 600; }

/* „Zobacz wszystko" na szczycie każdego panelu drugiego poziomu */
.hbt-mm-wiersz--wszystko {
    background: color-mix(in srgb, var(--primary, #7cb342) 12%, transparent);
}
.hbt-mm-wiersz--wszystko .hbt-mm-etykieta {
    color: var(--primary-d, #4a7a24);
    font-weight: 600;
}

/* ── Pasek „wstecz" nad stosem paneli ────────────────────────────────────
 * Pierwsze podejście umieszczało ten przycisk w .mm-header — i było błędne:
 * motyw ukrywa ten blok regułą `.mobile-menu .mm-header { display:none }`
 * poniżej 992 px, więc na telefonie przycisk miał szerokość 0. Test na żywo
 * pokazał, że po wejściu w panel ukryte były OBA wyjścia (wstecz i zamknij),
 * bo oba siedziały w tym samym nagłówku. Stąd własny pasek, widoczny tylko
 * na głębszych poziomach, z własnym krzyżykiem. */
.hbt-mm-pasek-wstecz {
    display: none;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-l, #e8e8e8);
    background: var(--bg2, #f7f7f5);
}
.mobile-menu.hbt-glebiej .hbt-mm-pasek-wstecz { display: flex; }

.hbt-mm-zamknij {
    margin-left: auto;
    border: 0;
    background: none;
    padding: 8px 10px;
    min-height: 44px;
    min-width: 44px;
    color: var(--text-l, #6b6b6b);
    font-size: 16px;
    cursor: pointer;
}
.hbt-mm-zamknij:focus-visible {
    outline: 2px solid var(--primary-d, #4a7a24);
    outline-offset: -2px;
}

.hbt-mm-wstecz {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: none;
    padding: 4px 0;
    min-height: 44px;
    color: var(--text, #222);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}
.hbt-mm-wstecz i { color: var(--primary-d, #4a7a24); }
.hbt-mm-wstecz:focus-visible {
    outline: 2px solid var(--primary-d, #4a7a24);
    outline-offset: 2px;
}
/* .mm-header jest w tym motywie ukryty poniżej 992 px (reguła zastana), więc
 * pasek wstecz stoi osobno nad stosem paneli — patrz komentarz w header.php.
 * Wyszukiwarka chowa się na głębszych poziomach, żeby nie sugerować, że szuka
 * w obrębie panelu. */
.mobile-menu.hbt-glebiej .mm-search { display: none; }

/* ── Nagłówek strony nie może zasłaniać góry szuflady ────────────────────
 * Przy otwartym menu header.site-header przechodzi w position:fixed z
 * z-index:10050, a szuflada ma top:54px i z-index:10001 — czyli nagłówek
 * rysuje się NAD nią. legacy-main.css zwija z tego powodu wiersz
 * wyszukiwarki (`body.menu-open .hbt-mobile-search-row { max-height:0 }`),
 * ale poprawka z 2026-07-18 w ux.css (czytelność na ekranach <360px)
 * dołożyła `min-height:68px` i `overflow:visible !important` — a min-height
 * z definicji wygrywa z max-height. Od tamtej pory nagłówek zostawał wysoki
 * na 121px i przykrywał górne 67px szuflady: jej własne pole wyszukiwania
 * było niewidoczne i nieklikalne (elementFromPoint w jego środku zwracał
 * HEADER.site-header). Domykamy te dwie właściwości TYLKO przy otwartym
 * menu — poza tym stanem poprawka z ux.css działa dalej.
 * Specyficzność: (0,2,1) bije `html body .hbt-mobile-search-row` (0,1,2). */
@media (max-width: 991px) {
    body.menu-open .hbt-mobile-search-row {
        min-height: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    /* Po zwinięciu wiersza treść nagłówka ma 53px (52px pasek logo + 1px
     * krawędź), ale sam nagłówek trzyma min-height:72px i nadal wchodził
     * 18px na szufladę — górne 6px jej pola wyszukiwania łapało kliknięcie
     * nagłówka. Źródła tego min-height nie ma w żadnej regule arkusza
     * pasującej do .site-header (przeszukane wszystkie 51 arkuszy przez
     * CSSOM), więc najpewniej pochodzi z krytycznego CSS wstrzykiwanego
     * przez LiteSpeed — dlatego nadpisujemy je tutaj zamiast poprawiać u
     * źródła. 54px = dokładnie `top` szuflady, więc krawędzie się stykają. */
    body.menu-open header.site-header {
        min-height: 54px !important;
    }
}

/* ── Stopka kontaktowa: przyklejona, poza obszarem przewijania ───────────
 * Wcześniej .mm-contact siedziała na końcu przewijanej listy — żeby
 * zadzwonić, trzeba było przewinąć 328 pozycji. */
.mobile-menu > .mm-contact {
    flex-shrink: 0;
    margin: 0;
}
.mobile-menu > .mm-contact p { margin: 2px 0; }

/* Panele przejmują przewijanie, więc marka i kategorie nie potrzebują już
 * własnych marginesów zewnętrznych wewnątrz panelu. */
.hbt-mm-panel > .mm-cats { border-top: 0; }
.hbt-mm-panel > .mm-brands { padding-bottom: 24px; }