/* =========================================================
   TransTrade Header Scroll Fix
   Stabilny sticky header bez skakania layoutu
   ========================================================= */

:root{
  --tt-header-admin-offset:0px;
}

body.admin-bar{
  --tt-header-admin-offset:32px;
}

@media screen and (max-width:782px){
  body.admin-bar{
    --tt-header-admin-offset:46px;
  }
}

/*
 * Sticky ustawiamy na elemencie zewnętrznym.
 * Nie zmieniamy jego wysokości podczas scrollowania,
 * dlatego treść pod headerem nie wykonuje "skoku".
 */
.tt-header.is-sticky{
  position:sticky!important;
  top:var(--tt-header-admin-offset)!important;
  z-index:9990!important;

  /* wyłączamy animowanie właściwości wpływających na layout */
  transition:
    background-color .22s ease,
    box-shadow .22s ease!important;

  will-change:auto!important;
}

/*
 * Jeżeli starszy kod przy scrollu ustawia padding / wysokość / margin
 * na wrapperze headera, wymuszamy stałą geometrię.
 */
.tt-header,
.tt-header.is-scrolled,
.tt-header.scrolled,
.tt-header.tt-scrolled,
.tt-header.header-scrolled{
  margin-top:0!important;
  margin-bottom:0!important;
}

/*
 * Shell ma stały rozmiar layoutu.
 * Efekt "zmniejszenia" robimy transformacją wizualną,
 * więc dokument nie zmienia wysokości podczas scrollu.
 */
.tt-header__shell{
  transform:translateZ(0) scale(1)!important;
  transform-origin:top center!important;
  transition:
    transform .20s cubic-bezier(.2,.7,.2,1),
    filter .20s ease!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
}

/* kompaktowy stan dodawany przez nasz JS */
.tt-header.tt-header--compact .tt-header__shell{
  transform:translateZ(0) scale(.965)!important;
}

/*
 * Delikatnie zmniejszamy optycznie elementy,
 * ale bez zmiany paddingów i wysokości wrappera.
 */
.tt-header__brand,
.tt-header__nav,
.tt-header__right{
  transform:translateZ(0);
}

/*
 * Starsze klasy scrollujące nie mogą zmieniać geometrii headera.
 * To właśnie zwykle powoduje "podskok" strony.
 */
.tt-header.is-scrolled .tt-header__shell,
.tt-header.scrolled .tt-header__shell,
.tt-header.tt-scrolled .tt-header__shell,
.tt-header.header-scrolled .tt-header__shell{
  padding-top:inherit!important;
  padding-bottom:inherit!important;
}

/* nie animujemy height/min-height/padding globalnie */
.tt-header *,
.tt-header *::before,
.tt-header *::after{
  transition-property:
    color,
    background-color,
    border-color,
    box-shadow,
    opacity,
    transform!important;
}

/* subtelny cień po scrollu */
.tt-header.tt-header--compact{
  box-shadow:0 8px 24px rgba(18,44,78,.055)!important;
}

/* mobilka — bez skalowania, żeby hamburger nie "pływał" */
@media(max-width:767px){
  .tt-header.tt-header--compact .tt-header__shell{
    transform:translateZ(0) scale(1)!important;
  }

  .tt-header.is-sticky{
    top:var(--tt-header-admin-offset)!important;
  }
}

/* preferencja użytkownika: brak animacji */
@media(prefers-reduced-motion:reduce){
  .tt-header,
  .tt-header__shell,
  .tt-header *{
    transition:none!important;
  }
}