/* Nagłówek witryny na telefonie, tylko na nowej stronie głównej (02.10.2026; z prototypu hero/v5b-mobile, 30.09).
   Igor: „na mobile pobaw się headerem, bo też zabiera cenne miejsce hero — hamburger zwykły, bez takich dopełniaczy…
   bez przycisku zapychacza »Bezpłatna wycena«; uściśnij to, ale z głową, jak najbardziej można, i zrób responsywnie”,
   potem: „wielkość hamburgera zwiększyłbym mocniej, aby klient się domyślił, że jest, i dał logo po lewej, a hamburger
   po prawej (hamburger nie musi mieć takich paddingów dalej, jak ma)”.
   Tylko telefony (≤ 767 px; tablet i komputer bez zmian). Nadpisuje style wtyczki aslandi-oze-header wyłącznie na tej
   stronie: każda reguła zaczyna się od klasy body.aslandi-sg-strona (dodaje ją wtyczka aslandi-strona-glowna; w labie
   zloz-strone.py), więc reszta witryny jest bez zmian, a reguły wygrywają niezależnie od kolejności arkuszy.
   - pasek 56 px zamiast 76 px: najniżej, przy którym zostaje cel dotyku 48 px hamburgera i czytelne logo,
   - logo po lewej, 36 px wysokości, przy lewym marginesie treści,
   - hamburger po prawej (tam sięga kciuk), ikona 32 px z grubszą kreską; bez ramki, tła i „pudełka” — prawa krawędź
     kresek równa z marginesem treści (przycisk 48 px, ikona w środku); na dotyk tylko krótkie przygaśnięcie, zmiana
     przy najechaniu wyłącznie dla myszy (na telefonie :hover zostawał po dotknięciu jako kwadrat),
   - szuflada menu wysuwa się z prawej, od przycisku (dotąd z lewej); w szufladzie zostają telefon i wycena,
   - bez przycisku wyceny i telefonu w pasku (wycena jest w hero),
   - bezpieczne obszary ekranów z wycięciem (env(safe-area-inset-*)),
   - hero liczy wysokość nagłówka ze zmiennej --hs-hdr, więc treść hero podjeżdża o 20 px. */
@media (max-width: 767px) {
  body.aslandi-sg-strona :is(.aoze-header__bar, .aoze-header__inner) { min-height: 56px; }
  /* pasek od razu w zieleni marki, jak po przewinięciu i na innych stronach witryny (Igor 02.10: „header, nawigacja
     strony musi być brandowy ciemny zielony kolor, a nie szaro-biały”): w hero z filmem na górze film zaczyna się pod
     nagłówkiem, więc przezroczysty pasek pokazywał jasne tło sekcji; kolory i cień ze stylu wtyczki nagłówka */
  body.aslandi-sg-strona .aoze-header[data-surface="transparent"]:not(.is-scrolled):not(.is-menu-open) .aoze-header__bar {
    background: linear-gradient(135deg, var(--aoze-green, #123f2d) 0%, var(--aoze-green-2, #19583f) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.1); box-shadow: var(--aoze-shadow, 0 18px 44px rgba(4, 18, 12, 0.26)); }
  body.aslandi-sg-strona .aoze-header__inner { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  body.aslandi-sg-strona .aoze-header__actions { display: none; }
  body.aslandi-sg-strona .aoze-logo { grid-column: 1; grid-row: 1; justify-self: start; max-width: min(150px, 42vw); }
  body.aslandi-sg-strona .aoze-logo img { max-height: 36px; max-width: 140px; }
  body.aslandi-sg-strona .aoze-header__hamburger { grid-column: 2; grid-row: 1; justify-self: end; width: 48px; height: 48px; padding: 0; border: 0;
    border-radius: 0; background: none; box-shadow: none; -webkit-tap-highlight-color: transparent; transition: opacity 120ms ease; }
  body.aslandi-sg-strona .aoze-header__hamburger:is(:hover, :focus, :focus-visible) { border: 0; background: none; }
  body.aslandi-sg-strona .aoze-header__hamburger:active { opacity: 0.6; }
  body.aslandi-sg-strona .aoze-header__hamburger:focus-visible { outline: 2px solid rgba(234, 217, 164, 0.9); outline-offset: -2px; border-radius: 10px; }
  body.aslandi-sg-strona .aoze-header__hamburger svg { width: 32px; height: 32px; stroke-width: 2.4; }
  /* szuflada z prawej, od przycisku */
  body.aslandi-sg-strona .aoze-drawer__panel { left: auto; right: 10px; transform: translateX(calc(100% + 18px)); }
  body.aslandi-sg-strona .aoze-drawer.is-open .aoze-drawer__panel { transform: translateX(0); }
  /* zamknięta szuflada bez cienia: panel stoi tuż za prawą krawędzią ekranu, a jego cień (78 px rozmycia) przyciemniał
     pas ok. 60 px przy prawej krawędzi całej strony (przegląd 02.10.2026); przy otwieraniu cień wraca razem z panelem */
  body.aslandi-sg-strona .aoze-drawer__panel { transition: transform 0.24s ease, box-shadow 0.24s ease; }
  body.aslandi-sg-strona .aoze-drawer:not(.is-open) .aoze-drawer__panel { box-shadow: none; }
  body.aslandi-sg-strona .hs--dzielony { --hs-hdr: 56px; }
}
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  body.aslandi-sg-strona .aoze-header__hamburger:hover { opacity: 0.8; }
}