.elementor-widget-section .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-section .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}/* Start custom CSS for section, class: .elementor-element-19edb17 *//* ============================================================
   LIVIN ŁEBA - FINAL HEADER
   WordPress + Elementor Pro + UAE + Astra

   WKLEJ DO:
   Zewnętrzna Sekcja → Zaawansowane → Custom CSS

   `.elementor-18 .elementor-element.elementor-element-19edb17` oznacza wyłącznie tę jedną sekcję Elementora.
   ============================================================ */


/* ============================================================
   1. SECTION SHELL + DESIGN TOKENS
   ============================================================ */

.elementor-18 .elementor-element.elementor-element-19edb17 {
  --lh-warm-white: #FFF9F0;
  --lh-sand: #F5EFE4;
  --lh-card: #FFFFFF;

  --lh-navy: #102A2C;
  --lh-muted: #5F6F73;

  --lh-turquoise: #1BAFC2;
  --lh-deep-sea: #0E6F78;

  --lh-sun: #F6A623;
  --lh-sun-hover: #E89516;

  --lh-beige-border: #E7DED0;

  position: -webkit-sticky;
  position: sticky;

  top: 0;

  z-index: 999;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  isolation: isolate;
}


/* ============================================================
   2. WORDPRESS ADMIN BAR OFFSET

   Publiczny frontend:
   top: 0

   Zalogowany administrator:
   32px desktop
   46px mniejsze ekrany WordPress
   ============================================================ */

body.admin-bar .elementor-18 .elementor-element.elementor-element-19edb17 {
  top: 32px;
}


@media screen and (max-width: 782px) {

  body.admin-bar .elementor-18 .elementor-element.elementor-element-19edb17 {
    top: 46px;
  }

}


/* ============================================================
   3. CLASSIC ELEMENTOR SECTION RESET

   Reset dotyczy TYLKO tej sekcji.
   Chroni przed:
   - 10px paddingiem Elementora
   - column gaps
   - widget spacing
   - ograniczoną szerokością wrapperów
   - ucięciem mobile panelu
   ============================================================ */

.elementor-18 .elementor-element.elementor-element-19edb17 > .elementor-container,
.elementor-18 .elementor-element.elementor-element-19edb17 > .elementor-container > .elementor-row {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* Classic Elementor direct columns */
.elementor-18 .elementor-element.elementor-element-19edb17 > .elementor-container > .elementor-column,
.elementor-18 .elementor-element.elementor-element-19edb17 > .elementor-container > .elementor-row > .elementor-column {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* Column wrappers */
.elementor-18 .elementor-element.elementor-element-19edb17 .elementor-column,
.elementor-18 .elementor-element.elementor-element-19edb17 .elementor-column-wrap {
  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* Widget wrappers */
.elementor-18 .elementor-element.elementor-element-19edb17 .elementor-widget-wrap,
.elementor-18 .elementor-element.elementor-element-19edb17 .elementor-element-populated {
  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* Remove Elementor widget bottom spacing */
.elementor-18 .elementor-element.elementor-element-19edb17 .elementor-widget:not(:last-child) {
  margin-bottom: 0 !important;
}


/* HTML widget shell */
.elementor-18 .elementor-element.elementor-element-19edb17 .elementor-widget-html {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* HTML widget container */
.elementor-18 .elementor-element.elementor-element-19edb17 .elementor-widget-html > .elementor-widget-container,
.elementor-18 .elementor-element.elementor-element-19edb17 .elementor-widget-html .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* ============================================================
   4. HEADER COMPONENT
   ============================================================ */

.livin-header-shell {
  position: relative;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  overflow: visible;

  background:
    var(--lh-warm-white);

  border-bottom:
    1px solid
    rgba(231, 222, 208, 0.9);

  color:
    var(--lh-navy);

  font-family:
    "Montserrat",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;

  box-sizing:
    border-box;

  animation:
    livin-header-enter
    0.6s
    cubic-bezier(0.16, 0.84, 0.44, 1)
    both;

  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    backdrop-filter 0.35s ease,
    -webkit-backdrop-filter 0.35s ease;
}


/* Local box sizing only */
.livin-header-shell *,
.livin-header-shell *::before,
.livin-header-shell *::after {
  box-sizing:
    border-box;
}


/* ============================================================
   5. HEADER ENTRANCE ANIMATION
   ============================================================ */

@keyframes livin-header-enter {

  from {
    opacity: 0;

    transform:
      translateY(-8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* ============================================================
   6. SCROLLED STATE

   Celowo NIE zmieniamy wysokości headera.
   Dzięki temu:
   - brak layout jump
   - brak CLS
   - sticky pozostaje stabilny

   Zmieniamy:
   - przezroczystość
   - blur
   - cień
   - separację
   ============================================================ */

.livin-header-shell.livin-header--scrolled {
  background:
    rgba(255, 249, 240, 0.86);

  border-bottom-color:
    rgba(231, 222, 208, 0.96);

  -webkit-backdrop-filter:
    saturate(140%)
    blur(14px);

  backdrop-filter:
    saturate(140%)
    blur(14px);

  box-shadow:
    0 10px 30px -18px
    rgba(16, 42, 44, 0.34);
}


/* ============================================================
   7. INNER LAYOUT
   ============================================================ */

.livin-header-inner {
  display: flex;

  align-items: center;

  gap: 28px;

  width: 100%;
  max-width: 1260px;

  min-width: 0;

  margin:
    0 auto;

  padding:
    16px 40px;
}


/* ============================================================
   8. BRAND
   ============================================================ */

.livin-header-brand {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  flex-shrink:
    0;

  margin-right:
    auto;

  color:
    var(--lh-navy);

  text-decoration:
    none;
}


.livin-header-brand-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  border-radius:
    50%;

  background:
    var(--lh-deep-sea);

  color:
    #FFFFFF;

  box-shadow:
    0 8px 18px -12px
    rgba(14, 111, 120, 0.7);

  transition:
    transform
    0.35s
    cubic-bezier(0.16, 0.84, 0.44, 1),

    box-shadow
    0.35s
    ease;
}


.livin-header-brand-svg {
  display:
    block;

  width:
    20px;

  height:
    20px;
}


.livin-header-brand:hover
.livin-header-brand-icon {
  transform:
    translateY(-1px)
    scale(1.055);

  box-shadow:
    0 12px 24px -12px
    rgba(14, 111, 120, 0.8);
}


.livin-header-brand-name {
  font-size:
    21px;

  line-height:
    1.1;

  font-weight:
    700;

  letter-spacing:
    -0.02em;

  white-space:
    nowrap;
}


/* ============================================================
   9. DESKTOP NAVIGATION
   ============================================================ */

.livin-header-nav {
  flex-shrink:
    0;

  min-width:
    0;
}


.livin-header-nav-list {
  display:
    flex;

  align-items:
    center;

  gap:
    30px;

  list-style:
    none;

  margin:
    0;

  padding:
    0;
}


.livin-header-nav-list li {
  margin:
    0;

  padding:
    0;
}


.livin-header-nav-link {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  padding:
    7px 2px;

  color:
    var(--lh-navy);

  font-size:
    15px;

  line-height:
    1.2;

  font-weight:
    500;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    color
    0.25s
    ease;
}


.livin-header-nav-link::after {
  content:
    "";

  position:
    absolute;

  left:
    2px;

  right:
    2px;

  bottom:
    1px;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--lh-deep-sea);

  transform:
    scaleX(0);

  transform-origin:
    left center;

  transition:
    transform
    0.3s
    cubic-bezier(0.16, 0.84, 0.44, 1);
}


.livin-header-nav-link:hover,
.livin-header-nav-link:focus-visible {
  color:
    var(--lh-deep-sea);
}


.livin-header-nav-link:hover::after,
.livin-header-nav-link:focus-visible::after {
  transform:
    scaleX(1);
}


/* ============================================================
   10. LANGUAGE SWITCHER
   ============================================================ */

.livin-header-language {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    2px;

  flex-shrink:
    0;

  padding:
    4px;

  border:
    1px solid
    var(--lh-beige-border);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.84);

  box-shadow:
    0 6px 18px -16px
    rgba(16, 42, 44, 0.5);
}


.livin-header-language-chip {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    38px;

  height:
    30px;

  padding:
    0 10px;

  border-radius:
    999px;

  color:
    var(--lh-muted);

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    600;

  text-decoration:
    none;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}


.livin-header-language-chip:hover,
.livin-header-language-chip:focus-visible {
  color:
    var(--lh-navy);

  background:
    var(--lh-sand);
}


.livin-header-language-chip--active,
.livin-header-language-chip--active:hover,
.livin-header-language-chip--active:focus-visible {
  color:
    #FFFFFF;

  background:
    var(--lh-deep-sea);
}


/* ============================================================
   11. PRIMARY CTA
   ============================================================ */

.livin-header-cta {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  height:
    46px;

  min-height:
    46px;

  flex-shrink:
    0;

  padding:
    0 26px;

  border-radius:
    999px;

  overflow:
    hidden;

  background:
    var(--lh-sun);

  color:
    var(--lh-navy);

  font-size:
    15px;

  line-height:
    1;

  font-weight:
    600;

  text-decoration:
    none;

  white-space:
    nowrap;

  box-shadow:
    0 8px 18px -10px
    rgba(246, 166, 35, 0.82);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}


.livin-header-cta::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    -65%;

  width:
    42%;

  height:
    100%;

  pointer-events:
    none;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.52),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left
    0.65s
    ease;
}


.livin-header-cta:hover {
  background:
    var(--lh-sun-hover);

  color:
    var(--lh-navy);

  transform:
    translateY(-2px);

  box-shadow:
    0 14px 26px -12px
    rgba(246, 166, 35, 0.96);
}


.livin-header-cta:hover::before {
  left:
    125%;
}


/* ============================================================
   12. MOBILE TOGGLE
   ============================================================ */

.livin-header-mobile-toggle {
  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  width:
    46px;

  height:
    46px;

  min-width:
    46px;

  min-height:
    46px;

  flex:
    0 0 46px;

  margin:
    0;

  padding:
    0;

  border:
    1px solid
    var(--lh-beige-border);

  border-radius:
    12px;

  background:
    rgba(255, 255, 255, 0.9);

  color:
    var(--lh-navy);

  cursor:
    pointer;

  box-shadow:
    0 6px 16px -14px
    rgba(16, 42, 44, 0.5);

  -webkit-appearance:
    none;

  appearance:
    none;

  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}


.livin-header-mobile-toggle:hover {
  border-color:
    rgba(14, 111, 120, 0.34);

  background:
    #FFFFFF;

  transform:
    translateY(-1px);
}


.livin-header-mobile-bars {
  position:
    relative;

  display:
    block;

  width:
    22px;

  height:
    16px;
}


.livin-header-mobile-bars span {
  position:
    absolute;

  left:
    0;

  width:
    100%;

  height:
    2px;

  border-radius:
    999px;

  background:
    currentColor;

  transition:
    transform 0.3s ease,
    opacity 0.2s ease,
    top 0.3s ease;
}


.livin-header-mobile-bars span:nth-child(1) {
  top:
    0;
}


.livin-header-mobile-bars span:nth-child(2) {
  top:
    7px;
}


.livin-header-mobile-bars span:nth-child(3) {
  top:
    14px;
}


/* Hamburger → X */

.livin-header--menu-open
.livin-header-mobile-bars
span:nth-child(1) {
  top:
    7px;

  transform:
    rotate(45deg);
}


.livin-header--menu-open
.livin-header-mobile-bars
span:nth-child(2) {
  opacity:
    0;
}


.livin-header--menu-open
.livin-header-mobile-bars
span:nth-child(3) {
  top:
    7px;

  transform:
    rotate(-45deg);
}


/* ============================================================
   13. MOBILE PANEL
   ============================================================ */

.livin-header-mobile-panel {
  position:
    absolute;

  top:
    100%;

  left:
    0;

  right:
    0;

  z-index:
    20;

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  width:
    100%;

  max-height:
    calc(100dvh - 78px);

  padding:
    18px 24px 26px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  background:
    rgba(255, 249, 240, 0.98);

  border-bottom:
    1px solid
    var(--lh-beige-border);

  box-shadow:
    0 18px 34px -20px
    rgba(16, 42, 44, 0.38);

  opacity:
    0;

  transform:
    translateY(-10px);

  pointer-events:
    none;

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}


/* Closed menu genuinely removed from layout/tab order */
.livin-header-mobile-panel[hidden] {
  display:
    none !important;
}


/* Open state */
.livin-header--menu-open
.livin-header-mobile-panel {
  opacity:
    1;

  transform:
    translateY(0);

  pointer-events:
    auto;
}


/* ============================================================
   14. MOBILE NAVIGATION
   ============================================================ */

.livin-header-mobile-nav {
  display:
    flex;

  flex-direction:
    column;
}


.livin-header-mobile-link {
  display:
    flex;

  align-items:
    center;

  min-height:
    48px;

  padding:
    13px 4px;

  border-bottom:
    1px solid
    rgba(245, 239, 228, 0.98);

  color:
    var(--lh-navy);

  font-size:
    17px;

  line-height:
    1.25;

  font-weight:
    600;

  text-decoration:
    none;

  opacity:
    0;

  transform:
    translateY(7px);

  transition:
    color 0.2s ease;
}


.livin-header-mobile-link:hover,
.livin-header-mobile-link:focus-visible {
  color:
    var(--lh-deep-sea);
}


/* Stagger */
.livin-header--menu-open
.livin-header-mobile-link {
  animation:
    livin-header-item-in
    0.4s
    ease
    forwards;
}


.livin-header--menu-open
.livin-header-mobile-link:nth-child(1) {
  animation-delay:
    0.05s;
}


.livin-header--menu-open
.livin-header-mobile-link:nth-child(2) {
  animation-delay:
    0.10s;
}


.livin-header--menu-open
.livin-header-mobile-link:nth-child(3) {
  animation-delay:
    0.15s;
}


.livin-header--menu-open
.livin-header-mobile-link:nth-child(4) {
  animation-delay:
    0.20s;
}


@keyframes livin-header-item-in {

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}


/* ============================================================
   15. MOBILE LANGUAGE SWITCHER
   ============================================================ */

.livin-header-mobile-language {
  display:
    inline-flex;

  align-self:
    flex-start;

  align-items:
    center;

  gap:
    2px;

  padding:
    4px;

  border:
    1px solid
    var(--lh-beige-border);

  border-radius:
    999px;

  background:
    #FFFFFF;
}


/*
   Większe touch targety tylko w panelu mobilnym.
   Desktop zachowuje kompaktową wersję.
*/
.livin-header-mobile-language
.livin-header-language-chip {
  min-width:
    44px;

  height:
    40px;

  padding-left:
    10px;

  padding-right:
    10px;
}


/* ============================================================
   16. MOBILE CTA
   ============================================================ */

.livin-header-cta--mobile {
  width:
    100%;

  height:
    50px;

  min-height:
    50px;
}


/* ============================================================
   17. FOCUS STATES
   ============================================================ */

.livin-header-shell a:focus-visible,
.livin-header-shell button:focus-visible {
  outline:
    2px solid
    var(--lh-deep-sea);

  outline-offset:
    3px;
}


/* ============================================================
   18. COMPACT DESKTOP
   ============================================================ */

@media (max-width: 1180px) {

  .livin-header-inner {
    gap:
      20px;

    padding-left:
      28px;

    padding-right:
      28px;
  }


  .livin-header-nav-list {
    gap:
      22px;
  }


  .livin-header-language-chip {
    min-width:
      34px;

    padding-left:
      8px;

    padding-right:
      8px;
  }


  .livin-header-cta {
    padding-left:
      22px;

    padding-right:
      22px;
  }

}


/* ============================================================
   19. TABLET / MOBILE MENU
   ============================================================ */

@media (max-width: 1024px) {

  .livin-header-nav,
  .livin-header-language,
  .livin-header-shell
  > .livin-header-inner
  > .livin-header-cta {
    display:
      none;
  }


  .livin-header-mobile-toggle {
    display:
      inline-flex;
  }


  .livin-header-inner {
    gap:
      18px;

    padding:
      13px 24px;
  }


  .livin-header-mobile-panel {
    padding-left:
      24px;

    padding-right:
      24px;
  }

}


/* ============================================================
   20. MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .livin-header-inner {
    padding:
      12px 18px;
  }


  .livin-header-brand {
    gap:
      10px;
  }


  .livin-header-brand-icon {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }


  .livin-header-brand-name {
    font-size:
      19px;
  }


  .livin-header-mobile-toggle {
    width:
      44px;

    height:
      44px;

    min-width:
      44px;

    min-height:
      44px;

    flex-basis:
      44px;
  }


  .livin-header-mobile-panel {
    max-height:
      calc(100dvh - 68px);

    padding:
      16px 18px 22px;
  }

}


/* ============================================================
   21. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 360px) {

  .livin-header-inner {
    padding-left:
      14px;

    padding-right:
      14px;
  }


  .livin-header-brand-name {
    font-size:
      18px;
  }


  .livin-header-brand-icon {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;
  }


  /*
   * Celowo minimum 44px.
   * Nie schodzimy do 42px.
   */
  .livin-header-mobile-toggle {
    width:
      44px;

    height:
      44px;

    min-width:
      44px;

    min-height:
      44px;

    flex-basis:
      44px;
  }

}


/* ============================================================
   22. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .livin-header-shell,
  .livin-header-brand-icon,
  .livin-header-cta,
  .livin-header-cta::before,
  .livin-header-nav-link::after,
  .livin-header-mobile-panel,
  .livin-header-mobile-link,
  .livin-header-mobile-toggle,
  .livin-header-mobile-bars span {
    animation:
      none !important;

    transition:
      none !important;
  }


  .livin-header-mobile-link {
    opacity:
      1;

    transform:
      none;
  }

}
/* ============================================================
   LIVIN ŁEBA - HARD STICKY FIX
   WordPress + Elementor + UAE + Astra

   Wklej NA SAMYM KOŃCU obecnego CSS headera.
   Ten blok nadpisuje wcześniejsze position: sticky.
   ============================================================ */


/* ============================================================
   1. OUTER ELEMENTOR SECTION

   Sekcja zostaje w normalnym flow strony i rezerwuje miejsce
   pod fixed header, dzięki czemu hero nie wchodzi pod header.
   ============================================================ */

.elementor-18 .elementor-element.elementor-element-19edb17 {
  position:
    relative !important;

  top:
    auto !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-height:
    73px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    visible !important;

  z-index:
    9999 !important;

  isolation:
    auto !important;
}


/* ============================================================
   2. ACTUAL HEADER - FIXED / STICKY BEHAVIOR
   ============================================================ */

.livin-header-shell {
  position:
    fixed !important;

  top:
    0;

  left:
    0;

  right:
    0;

  width:
    100%;

  max-width:
    none;

  z-index:
    9999;

  margin:
    0;

  /*
   * Izolowana warstwa renderowania.
   * Pomaga utrzymać płynny blur i shadow podczas scrolla.
   */
  will-change:
    background-color,
    box-shadow;

  backface-visibility:
    hidden;
}


/* ============================================================
   3. WORDPRESS ADMIN BAR
   Tylko dla zalogowanego administratora.
   ============================================================ */

body.admin-bar
.livin-header-shell {
  top:
    32px;
}


@media screen and (max-width: 782px) {

  body.admin-bar
  .livin-header-shell {
    top:
      46px;
  }

}


/* ============================================================
   4. SCROLLED STATE
   Mocniejsza separacja od treści po scrollu.
   ============================================================ */

.livin-header-shell.livin-header--scrolled {
  background:
    rgba(255, 249, 240, 0.90);

  -webkit-backdrop-filter:
    saturate(145%)
    blur(14px);

  backdrop-filter:
    saturate(145%)
    blur(14px);

  border-bottom-color:
    rgba(231, 222, 208, 0.98);

  box-shadow:
    0 10px 30px -18px
    rgba(16, 42, 44, 0.36);
}


/* ============================================================
   5. MOBILE / TABLET RESERVED HEIGHT
   Pasek desktop/tablet ma ok. 72-73px.
   Na małym mobile ok. 68-69px.
   ============================================================ */

@media (max-width: 480px) {

  .elementor-18 .elementor-element.elementor-element-19edb17 {
    min-height:
      69px !important;
  }

}


/* ============================================================
   6. MOBILE PANEL
   Panel pozostaje przypięty bezpośrednio pod fixed headerem.
   ============================================================ */

.livin-header-mobile-panel {
  z-index:
    10000;
}/* End custom CSS */