/*
 Theme Name: Joyas Business Agency Child
 Theme URI: https://athemeart.com/downloads/joyas/
 Description: Child: 1 menu (bez lupy), sticky header, mobilny toggle, okładki full width/height, hero z panoramą + Tuesday.
 Author: You
 Template: joyas-shop
 Version: 1.0.0
 Text Domain: joyas-business-agency-child
*/

/* =========================
   ZMIENNE GLOBALNE (EDYTUJ)
   ========================= */
:root{
  /* Header / hero */
  --header-h: 56px;
  --header-bar: 10px;/*56px;*/
  --logo-desktop: 64px;
  --site-header-h: 30px !important;      /* podaj wysokość sticky menu, jeśli inne */
  --sticky-h: 30px;
  --hero-h: calc(100vh - var(--sticky-h));

  /* Panorama / animacje */
  --speed: 500;              /* px/s (ruch tła) */
  --fade-time: 1s;
  --td-duration: .9s;
  --td-ease: cubic-bezier(.2,.6,.2,1);
  --caption-y: 33%;
  --cap-blur: 14px;

  /* KOLORY 3 BOKSÓW (EDYTUJ TYLKO TE TRZY) */
  --cap-left-base:  rgba(255,193,7,0.50);  /* lewy: lekko biały */
  --cap-mid-base:   rgba(255,193,7,0.35);    /* środkowy: lekko żółty (amber) */
  --cap-right-base: rgba(255,193,7,0.40);    /* prawy: lekko brązowy */
}

/* Reset drobny */
html, body{ margin:0; overflow-x:clip; }
body{ padding-top:var(--header-h); }

/* =========================
   HEADER (sticky, menu, logo)
   ========================= */
#masthead.site-header{
  position:fixed !important; top:0; left:0; right:0; z-index:10000;
  background:rgba(0,0,0,.70) !important; border:0 !important; box-shadow:none !important;
}
#masthead .header_wrap,
#masthead .container,
#masthead .jc-header-inner{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
#masthead .jc-header-inner{ min-height:var(--header-bar) !important; }
#masthead .menu > li > a,
#masthead .site-title,
#masthead .jc-right i,
#masthead .site-branding,
#masthead .woocommerce a{ color:#fff !important; }
#masthead .menu > li > a:hover{ opacity:.85; }

.admin-bar #masthead.site-header{ top:32px; }
@media (max-width:782px){ .admin-bar #masthead.site-header{ top:46px; } }

/* Logo (desktop) */
@media (min-width:993px){
  #masthead .jc-header-inner{ min-height:var(--header-bar) !important; height:var(--header-bar) !important; overflow:visible; display:flex; align-items:center; justify-content:flex-start; gap:16px; }
  #masthead .jc-brand{ overflow:visible; display:flex; align-items:center; }
  #masthead .site-branding img, #masthead .custom-logo{
    height:var(--logo-desktop) !important; width:auto; max-height:none !important; display:block;
    margin-top: /*calc((var(--header-bar) - var(--logo-desktop))/2);*/
  }
}

/* Menu ogólne */
.jc-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.jc-nav .menu{ list-style:none; margin:0; padding:0; }
.header-icon .searchbar-action,
.header-icon li.flex-fill.flex-grow-1{ display:none !important; } /* ukryj lupę */

/* Desktop menu (≥993px) */
@media (min-width:993px){
  .jc-toggle{ display:none !important; }
  #jc-primary-nav{ position:static !important; display:block !important; transform:none !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; margin-left:auto !important; }
  #jc-primary-nav .menu{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:0 !important; }
  #jc-primary-nav .menu > li{ position:relative; display:inline-block !important; padding:0 14px !important; }
  #jc-primary-nav .menu > li + li::before{
    content:""; position:absolute; left:0; top:50%; width:1px; height:16px; transform:translateY(-50%) rotate(24deg);
    background:rgba(255,255,255,.45); pointer-events:none;
  }
  #jc-primary-nav .menu > li > a{
    display:inline-block !important; padding:12px 0 !important; text-decoration:none !important; line-height:1.1 !important; color:#fff !important;
  }
  #masthead .jc-right{ margin-left:24px !important; }
}

/* Mobile menu (≤992px) */
@media (max-width:992px){
  .jc-toggle{
    display:inline-flex !important; align-items:center; justify-content:center;
    background:transparent; border:0; color:#fff; font-size:22px; padding:6px;
    position:relative; z-index:10002;
  }
  #jc-primary-nav{
    display:none !important; position:fixed !important; top:var(--header-h); left:0; right:0; z-index:10001;
    max-height:calc(100vh - var(--header-h)); background:rgba(0,0,0,.92); overflow-y:auto; padding:12px 18px;
  }
  body.nav-open #jc-primary-nav{ display:block !important; }
  #jc-primary-nav .menu{ display:flex !important; flex-direction:column !important; gap:6px !important; list-style:none !important; margin:0 !important; padding:0 !important; }
  #jc-primary-nav .menu > li{ padding:0 !important; }
  #jc-primary-nav .menu > li > a{ padding:10px 0 !important; border-bottom:1px solid rgba(255,255,255,.08); color:#fff !important; text-decoration:none !important; }
}

/* =========================
   HERO / HEADER HERO
   ========================= */
#child-header-hero.header-hero{
  position: relative; min-height: var(--hero-h); overflow: hidden;
}
@supports (height: 100dvh){
  #child-header-hero.header-hero{ min-height: 100dvh; }
}

#child-header-hero .header-hero__bg{
  position:absolute !important; inset:0 !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; z-index:0 !important;
}
#child-header-hero .header-hero__overlay{
  position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none;
}

.site-main, main, #content, .content, .container:first-child{
  margin-top: 0 !important; padding-top: 0 !important; border-top:0 !important;
}
body.has-panorama { padding-top: 0 !important; } /* gdy JS już kompensuje header */

/* =========================
   PANORAMA (SLIDES + CAPTION)
   ========================= */
#panorama,
.header-anime,
.header_anime,
#header-anime{
  position: relative;
  width: 100%;
  height: 100vh;               /* możesz zmienić: np. clamp(420px,75vh,900px) */
  overflow: hidden !important;
  background: #000;            /* fallback */
	 object-fit: contain ;
}

/* Overlay pod obrazem (opcjonalny przyciemniany woal) */
#panorama::after{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.20);
  z-index:1; pointer-events:none;
}

/* Slajdy jako tło (warstwa 2) */
.bgslide{
  position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; background-position:50% 50%;
  opacity:0; transition:opacity var(--fade-time) ease; will-change:background-position, transform, opacity; z-index:2;
}
.bgslide.visible{ opacity:1 !important; }

/* Ruch tła */
@keyframes bgPanXLeft  { from{ background-position:100% 50%; } to{ background-position:0% 50%; } }
@keyframes bgPanXRight { from{ background-position:0% 50%; }   to{ background-position:100% 50%; } }
@keyframes bgPanYUp    { from{ background-position:50% 100%; } to{ background-position:50% 0%; } }
@keyframes bgPanYDown  { from{ background-position:50% 0%; }   to{ background-position:50% 100%; } }

.bgslide.pan-x-left  { animation: bgPanXLeft  var(--travel-time, 12s) linear forwards; }
.bgslide.pan-x-right { animation: bgPanXRight var(--travel-time, 12s) linear forwards; }
.bgslide.pan-y-up    { animation: bgPanYUp    var(--travel-time, 12s) linear forwards; }
.bgslide.pan-y-down  { animation: bgPanYDown  var(--travel-time, 12s) linear forwards; }

/* Video jako slajd */
.videoslide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity var(--fade-time) ease; z-index:2;
}
.videoslide.visible{ opacity:1 !important; }

/* IMG sterowane przez JS (gdy używany obraz zamiast tła) */
/*#panorama img.slide{
  position:absolute; top:50%; left:0; transform:translate3d(0,-50%,0);
  height:100% !important; width:auto !important; max-width:none !important;
  display:block; will-change:transform,opacity; backface-visibility:hidden; z-index:2;
}*/
/*22.09*/
/* IMG sterowane przez JS – bez zniekształceń */
#panorama img.slide{
  position:absolute; inset:0;           /* wypełnij kontener */
  width:100% !important;
  height:100% !important;
  object-fit:cover;                      /* brak spłaszczania, może lekko przyciąć */
  object-position:center center;
  display:block;
  max-width:none !important;
  transform:none !important;             /* wyłącz translateY(-50%) */
  will-change:opacity;                   /* transform już niepotrzebny */
  backface-visibility:hidden;
  z-index:2;
}


/* Pojedynczy caption (gdy użyty w motywie) */
#panorama .caption{
  position:absolute; top:var(--caption-y); left:auto; right:auto; transform:none;
  max-width:min(33vw,520px); color:#fff; opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:3;
}
#panorama .caption.show{ opacity:1; }
#panorama .caption.left{
  left:4vw; text-align:left;  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0)); padding:12px 16px;
}
#panorama .caption.right{
  right:4vw; text-align:right; background:linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,0)); padding:12px 16px;
}
#panorama .caption .label{ font-size:clamp(18px,2.4vw,28px); font-weight:600; line-height:1.25; }

/* Tuesday fallback dla animacji tekstu */
#panorama .animated{ animation-duration:var(--td-duration); animation-fill-mode:both; animation-timing-function:var(--td-ease); }

/* Gdy panorama aktywna – schowaj tło fallback w hero */
.has-panorama #child-header-hero .header-hero__bg{ display:none !important; }

/* =========================
   TRZY BOKSY (caption-strip)
   ========================= */
/* Kontener z trzema kolumnami (warstwa 999, nad slajdami) */
#panorama .caption-strip{
  position: absolute; inset: 0; display: flex; z-index: 999; pointer-events: none;
}

/* Wspólne style każdej kolumny */
#panorama .cap{
  flex: 0 0 33.3333%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 2.2vw, 28px); box-sizing: border-box; color: #fff;
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
  /* WAŻNE: czyścimy ewentualne poprzednie tło ustawione skrótem background */
  background: none !important;
}

/* Gradienty — tylko background-image, żeby nie był kasowany przez background-color gdzie indziej */
#panorama .cap--left{
  background-image: linear-gradient( 90deg, var(--cap-left-base),  rgba(0,0,0,0)) !important;
}
#panorama .cap--mid{
  background-image: linear-gradient(180deg, var(--cap-mid-base),   rgba(0,0,0,0)) !important;
}
#panorama .cap--right{
  background-image: linear-gradient(270deg, var(--cap-right-base), rgba(0,0,0,0)) !important;
}

/* Tekst w środku */
#panorama .cap__label{
  width: 100%; max-width: 28ch; text-align: center;
  font-size: clamp(16px, 2.2vw, 30px); line-height: 1.25; font-weight: 700;
  opacity: 0; animation-duration: var(--td-duration, .9s); animation-timing-function: var(--td-ease, ease); animation-fill-mode: both;
}

/* Stagger wejścia (1 → 2 → 3) — jeśli korzystasz z Tuesday */
#panorama .cap:nth-child(1) .cap__label{ animation-delay: .00s; }
#panorama .cap:nth-child(2) .cap__label{ animation-delay: .12s; }
#panorama .cap:nth-child(3) .cap__label{ animation-delay: .24s; }

/* Mobile: układ pionowy */
@media (max-width: 768px){
  #panorama .caption-strip{ flex-direction: column; }
  #panorama .cap{ flex: 1 0 auto; }
}

/* =========================
   OKŁADKI / BLOKI FULL-WIDTH
   ========================= */
.content-area.container .wp-block-cover,
.content-area.container .wp-block-group.alignfull,
.wp-block-cover.alignfull{
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  padding-left:0 !important; padding-right:0 !important;
}
.wp-block-cover{ min-height:100vh; background-size:cover; background-position:center; position:relative; z-index:0; }
.wp-block-cover__inner-container{ max-width:min(1200px,92vw); margin:0 auto; padding:clamp(16px,3vw,40px); }
.wp-block-cover__image-background{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* =========================
   DROBNE WARSTWY / PORZĄDEK
   ========================= */
#panorama::after{ z-index:1 !important; }
.bgslide, .videoslide, #panorama img.slide{ z-index:2 !important; }
#panorama .caption, #panorama .caption-strip{ z-index:3 !important; } /* strip i klasyczny caption nad slajdami */

/*22.09*/
/* Stabilne proporcje panoramy */
#panorama{
  aspect-ratio: 16 / 9;                  /* utrzymaj stałe ratio */
  height: auto;                           /* wysokość z ratio */
  min-height: clamp(420px, 70vh, 100dvh); /* nie rób się zbyt niski, ale pozwól na full screen */
}

/* Gdy JS/markup wymusza pełny ekran absolutem – upewnij się, że nadpisujesz: */
#child-header-hero #panorama{
  inset:auto; position:relative !important; /* jeżeli wcześniej dawałeś absolute+inset:0 */
}

/* Koniec pliku */

/* === FIX: pełny ekran dla nagłówka + widoczne napisy w boksach === */

/* 1) Pełny viewport */
#child-header-hero.header-hero{
  min-height: 100dvh !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
#child-header-hero #panorama{
  position: absolute !important;
  inset: 0 !important;        /* top/right/bottom/left: 0 */
  height: 100% !important;    /* wypełnia rodzica */
}
body.has-panorama{ padding-top: 0 !important; }  /* bez podbicia treści */

/* 2) Napisy — nie ukrywaj etykiet */
#panorama .cap__label{
  opacity: 1 !important;        /* poprzednio 0 – dlatego zniknęły */
}

/* (opcjonalnie) jeśli któryś „debug” zostawiał tło na .cap, wyczyść je: */
#panorama .cap{ background: none !important; }

/* Gradienty z Twoich zmiennych (zostają jak wcześniej) */
#panorama .cap--left{
  background-image: linear-gradient( 90deg, var(--cap-left-base),  rgba(0,0,0,0)) !important;
}
#panorama .cap--mid{
  background-image: linear-gradient(180deg, var(--cap-mid-base),   rgba(0,0,0,0)) !important;
}
#panorama .cap--right{
  background-image: linear-gradient(270deg, var(--cap-right-base), rgba(0,0,0,0)) !important;
}

/* === FIX: hamburger na mobile + porządek warstw === */

/* 1) Pasek nagłówka i szuflada menu MUSZĄ być ponad animacją */
#masthead.site-header{ z-index: 200000 !important; }
#jc-primary-nav{ z-index: 200001 !important; }     /* panel mobilny */
.jc-toggle{ position: relative; z-index: 200002 !important; }  /* przycisk hamburgera */

/* 2) Hero/panorama pod nagłówkiem (ale nadal nad tłem strony) */
#child-header-hero.header-hero{ z-index: 100 !important; }
#child-header-hero #panorama{ z-index: 101 !important; }
#panorama::after{ z-index: 102 !important; }       /* overlay */
.bgslide, .videoslide, #panorama img.slide{ z-index: 103 !important; }
#panorama .caption, #panorama .caption-strip{ z-index: 104 !important; }

/* 3) Upewnij się, że panorama NIE nachodzi pod przycisk hamburgera
      — żadnych transform/filters na #masthead, które tworzą nowy stacking context */
#masthead.site-header{
  transform: none !important;
  filter: none !important;
}

/* (opcjonalne) jeśli nadal coś zasłania strefę headera, możesz
   ograniczyć klikalność panoramy tylko na pasku headera:
   #child-header-hero{ pointer-events: none; }
   #child-header-hero *{ pointer-events: auto; }
   — zwykle NIE jest potrzebne po ustawieniu z-index powyżej. */

/* === POWIĘKSZONE LITERY W MENU (tylko desktop) === */
/*@media (min-width: 993px){
  #jc-primary-nav .menu > li > a {
    font-size: clamp(16px, 1.0vw, 20px) !important;
    line-height: 1.3;
    font-weight: 400; /* normal 
  }
}*/
@media (min-width: 993px){
  #jc-primary-nav .menu > li > a {
    font-size: clamp(17px, 1.3vw, 24px) !important;
    line-height: 1.35;
    font-weight: 400;
  }
}
/*@media (min-width: 993px){
  #jc-primary-nav .menu > li > a {
    font-size: clamp(18px, 1.6vw, 28px) !important;
    line-height: 1.4;
    font-weight: 400;
  }
}
/* --------- */------------------------------------------KONIEC WIELKOŚCI LITER MENU-------*/

/* --- Anchor offset sterowany wysokością logo --- 
 :root{
  /* Dodatkowy zapas (zmień np. na 0px albo 24px itd.) 
  --anchor-extra: 24px;
}

/* Globalnie dla elementów z id (kotwice) 
[id]{
  /* Jeśli nie ma logo, fallback na --site-header-h lub 40px 
  scroll-margin-top: calc(var(--logo-h, var(--site-header-h, 400px)) + var(--anchor-extra));
}
*/
/* ============================
   UNIWERSALNE NACHODZENIE TEKSTU NA OBRAZ ORAZ ANIMACJA
   (dla Cover + Columns oraz Media & Text)
   ============================ */

.overlap-section {
  --overlap: 80px;   /* jak mocno nachodzi (px) */
  --card-bg: #fff;   /* tło „kartki” pod tekstem (opcjonalnie) */
  --card-pad: 16px;  /* wewnętrzny odstęp akapitu */
}

/* Uporządkowanie warstw i layoutu */
.overlap-section .wp-block-cover__inner-container,
.overlap-section .wp-block-group__inner-container {
  position: relative;
}

.overlap-section .wp-block-columns,
.overlap-section .wp-block-media-text {
  align-items: center;
  position: relative;
}

/* Obrazki: niech wypełniają kolumnę normalnie */
.overlap-section img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* „Kartka” dla treści tekstowej (czytelność) */
.overlap-section p,
.overlap-section .wp-block-paragraph {
  display: inline-block;
  background: var(--card-bg);
  padding: var(--card-pad);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  position: relative;
  z-index: 2; /* nad obrazem */
}

/* ——— WARIANTY DLA BLOKU COLUMNS ——— */

/* [TEKST][OBRAZ] — tekst w lewej kolumnie nachodzi w prawo */
.overlap-section .wp-block-columns > .wp-block-column:first-child p,
.overlap-section .wp-block-columns > .wp-block-column:first-child .wp-block-paragraph {
  margin-right: calc(var(--overlap) * -1);
}

/* [OBRAZ][TEKST] — tekst w prawej kolumnie nachodzi w lewo */
.overlap-section .wp-block-columns > .wp-block-column:last-child p,
.overlap-section .wp-block-columns > .wp-block-column:last-child .wp-block-paragraph {
  margin-left: calc(var(--overlap) * -1);
}

/* Jeżeli masz 2+ kolumny, łap kombinacje z sąsiednim obrazem */
.overlap-section .wp-block-columns > .wp-block-column p:has(+ * img),
.overlap-section .wp-block-columns > .wp-block-column .wp-block-paragraph:has(+ * img) {
  margin-right: calc(var(--overlap) * -1);
}
.overlap-section .wp-block-columns > .wp-block-column:has(img) + .wp-block-column p,
.overlap-section .wp-block-columns > .wp-block-column:has(img) + .wp-block-column .wp-block-paragraph {
  margin-left: calc(var(--overlap) * -1);
}

/* ——— WARIANTY DLA BLOKU MEDIA & TEXT ——— */
/* [MEDIA][TEXT] — standardowy układ */
.overlap-section .wp-block-media-text .wp-block-media-text__content p,
.overlap-section .wp-block-media-text .wp-block-media-text__content .wp-block-paragraph {
  margin-left: calc(var(--overlap) * -1);
}

/* Gdy odwrócony układ (media z prawej) */
.overlap-section .wp-block-media-text.is-image-fill[style*="grid-template-columns"] .wp-block-media-text__content p,
.overlap-section .wp-block-media-text.has-media-on-right .wp-block-media-text__content p,
.overlap-section .wp-block-media-text.has-media-on-right .wp-block-media-text__content .wp-block-paragraph {
  margin-left: 0;
  margin-right: calc(var(--overlap) * -1);
}

/* ——— Fallback bezpieczny (gdy :has nie działa / dziwne mark-upy) ——— */
/* Jeśli coś nie łapie: dodaj kolumnie z tekstem klasę pomocniczą .is-text */
.overlap-section .wp-block-columns > .wp-block-column.is-text p,
.overlap-section .wp-block-columns > .wp-block-column.is-text .wp-block-paragraph {
  margin-left: 0;
  margin-right: 0;
}
/* i ustaw ręcznie kierunek: .overlap-right lub .overlap-left */
.overlap-section .wp-block-column.is-text.overlap-right p,
.overlap-section .wp-block-column.is-text.overlap-right .wp-block-paragraph { margin-right: calc(var(--overlap) * -1); }
.overlap-section .wp-block-column.is-text.overlap-left  p,
.overlap-section .wp-block-column.is-text.overlap-left  .wp-block-paragraph  { margin-left:  calc(var(--overlap) * -1); }

/* ——— Mobile: wyłącz nakładanie ——— */
@media (max-width: 781px){
  .overlap-section p,
  .overlap-section .wp-block-paragraph {
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none;
  }
}
.overlap-section p,
.overlap-section .wp-block-paragraph {
  position: relative;
  top: 80px; /* opuszczenie w dół */
}
/* === Animacja wejścia/wyjścia dla akapitów w overlap-section === */
.overlap-section{
  --overlap-y: 20px;   /* DELIKATNE „płynięcie” w pionie */
  --in-dur: 1.9s;      /* czas wejścia */
  --out-dur: 1.5s;     /* czas wyjścia */
}

.overlap-section p,
.overlap-section .wp-block-paragraph{
  opacity: 0;
  transform: translateY(calc(var(--overlap-y) + 16px));
  transition:
    transform var(--in-dur) cubic-bezier(.2,.7,.2,1),
    opacity   var(--in-dur) cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
  position: relative;
}

.overlap-section p.in,
.overlap-section .wp-block-paragraph.in{
  opacity: 1;
  transform: translateY(var(--overlap-y));
}

/* krótsze wyjście */
.overlap-section p.out,
.overlap-section .wp-block-paragraph.out{
  transition-duration: var(--out-dur);
}

@media (prefers-reduced-motion: reduce){
  .overlap-section p,
  .overlap-section .wp-block-paragraph{
    transition: none !important;
    opacity: 1 !important;
    transform: translateY(var(--overlap-y)) !important;
  }
}

/* ====== Animacje obrazków w overlap-section ====== */
.overlap-section{
  --img-shift: 2vw;   /* jak daleko startuje obraz od krawędzi */
  --img-in-dur: 0.9s;  /* czas wejścia obrazka */
  --img-out-dur: 0.5s; /* czas wyjścia obrazka */
}

/* stan początkowy dla WSZYSTKICH obrazków (ukrywamy + włączamy transition) */
.overlap-section img{
  opacity: 0;
  transition:
    transform var(--img-in-dur) cubic-bezier(.2,.7,.2,1),
    opacity   var(--img-in-dur) cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}

/* COLUMNS: kierunek startu zależnie od położenia kolumny */
.overlap-section .wp-block-columns > .wp-block-column:first-child img{
  transform: translateX(calc(-1 * var(--img-shift)));
}
.overlap-section .wp-block-columns > .wp-block-column:last-child img{
  transform: translateX(var(--img-shift));
}

/* MEDIA & TEXT: domyślnie media po LEWEJ → start z LEWEJ */
.overlap-section .wp-block-media-text .wp-block-media-text__media img{
  transform: translateX(calc(-1 * var(--img-shift)));
}
/* gdy media po PRAWEJ → start z PRAWEJ */
.overlap-section .wp-block-media-text.has-media-on-right .wp-block-media-text__media img{
  transform: translateX(var(--img-shift));
}

/* po „uaktywnieniu” przez JS */
.overlap-section img.in{
  opacity: 1;
  transform: translateX(0);
}
/* krótsze wyjście */
.overlap-section img.out{
  transition-duration: var(--img-out-dur);
}

/* szacunek dla prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .overlap-section img{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ====== Wycentrowanie obrazów w kolumnach ====== */
.overlap-section .wp-block-column,
.overlap-section .wp-block-media-text__media {
  display: flex;
  justify-content: center; /* poziomo */
  align-items: center;     /* pionowo */
}

.overlap-section img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------- */

/* domyślnie ciemny tekst na jasnej „kartce” */
.overlap-section .overlap-text {
  color:#f9f3f1;
 /* background:#fff;*/
}

/* dla okładek, gdzie chcesz jasny tekst na przyciemnionym tle – dodaj klasę overlap-dark na tej okładce */
.overlap-section.overlap-dark .overlap-text {
  color:#f9f3f1;
  background:rgba(0,0,0,.45);
}
/* === FIX: kolumny mają układ blokowy, a nie flex-centrowanie === */
.overlap-section .wp-block-column{
  display: block !important;   /* ważne: przywraca normalny przepływ */
  text-align: initial;
  position: relative;
}

/* === FIX: przesuwamy CAŁĄ kolumnę z tekstem, nie pojedyncze akapity === */
.overlap-section { --overlap: 80px; } /* dostosuj siłę nachodzenia */

.overlap-section .wp-block-column.is-text{
  position: relative;
  z-index: 2;                  /* tekst ponad kolumną z obrazkiem */
}
.overlap-section .wp-block-column.is-text.overlap-right{
  margin-right: calc(var(--overlap) * -1);  /* [TEKST][OBRAZ] */
}
.overlap-section .wp-block-column.is-text.overlap-left{
  margin-left:  calc(var(--overlap) * -1);  /* [OBRAZ][TEKST] */
}

/* akapity w środku mają normalne marginesy (nie przesuwamy ich już) */
.overlap-section .overlap-text{
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: inline-block;
  /*background: #fff;            /* lub przez .overlap-dark na okładce – patrz niżej */
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  position: relative;
  z-index: 2;
  /* odstęp pionowy między wieloma akapitami w tej samej kolumnie */
  margin-block: clamp(12px, 2vw, 24px) !important;
}

/* Kolumna z obrazem może zostać pod spodem (opcjonalnie) */
.overlap-section .wp-block-column:not(.is-text){
  position: relative;
  z-index: 1;
}

/* Obrazy – centrowanie w obrębie kolumny (bez nadawania flex na całej kolumnie) */
.overlap-section .wp-block-image,
.overlap-section .wp-block-media-text__media{
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlap-section .wp-block-image{ margin-block: clamp(12px,2vw,24px) !important; }
.overlap-section img{
  display:block; height:auto; max-width:100%;
}

/* Animacje zostają jak były: .overlap-text / img dostają klasę .in z IO */

/* Mobile: wyłącz nachodzenie kolumny dla czytelności */
@media (max-width: 781px){
  .overlap-section .wp-block-column.is-text.overlap-right,
  .overlap-section .wp-block-column.is-text.overlap-left{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 27.08*/
/* === 0) Ustawienia / odstępy w kolumnie tekstowej === */
.overlap-section{
  --overlap: 80px;                 /* siła nakładania kolumny tekstowej na obraz */
  --stack-gap: clamp(12px, 2vw, 24px); /* pionowy odstęp między kartkami w kolumnie */
}

/* === 1) Kolumny mają normalny przepływ (nie flex na całej kolumnie) === */
.overlap-section .wp-block-column{
  display: block !important;
  position: relative;
  text-align: initial;
}

/* === 2) Przesuwamy CAŁĄ kolumnę z tekstem (nie pojedyncze <p>) === */
.overlap-section .wp-block-column.is-text{
  position: relative;
  z-index: 2; /* tekst nad kolumną z obrazem */
}
.overlap-section .wp-block-column.is-text.overlap-right{ /* [TEKST][OBRAZ] */
  margin-right: calc(var(--overlap) * -1);
}
.overlap-section .wp-block-column.is-text.overlap-left{  /* [OBRAZ][TEKST] */
  margin-left:  calc(var(--overlap) * -1);
}

/* === 3) „Kartka” dla akapitów i LIST (ol/ul) w kolumnie tekstowej === */
/* .overlap-text nadawana w JS na: p, .wp-block-paragraph, ul, ol, .wp-block-list */
.overlap-section .overlap-text{
  display: inline-block;
  background: #fff;        /* zmień globalnie jeśli wolisz inny */
  color: #111;
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  position: relative;
  z-index: 2;
  margin-block: var(--stack-gap) !important; /* odstęp między wieloma kartkami */
  max-width: 100%;
  line-height: 1.5;
}

/* wersja ciemna na konkretnej okładce: dodaj klasę overlap-dark na Cover */
.overlap-section.overlap-dark .overlap-text{
  background: rgba(0,0,0,.45);
  color: #000;
}

/* === 4) Styl list wewnątrz „kartki” === */
.overlap-section .overlap-text ul,
.overlap-section .overlap-text ol,
.overlap-section .overlap-text.wp-block-list{
  margin: 0;                   /* reset wewnętrzny */
  padding-left: 1.25em;        /* wcięcie na punktor/numer */
  list-style-position: inside; /* numer/punkt w obrysie kartki */
}
.overlap-section .overlap-text li{
  margin-block: 0.35em;        /* przerwy między wierszami listy */
}
.overlap-section .overlap-text li > ul,
.overlap-section .overlap-text li > ol{ /* zagnieżdżenia */
  margin-top: 0.35em;
  padding-left: 1.25em;
}

/* === 5) Kolumna z obrazem może być „pod spodem” (opcjonalnie) === */
.overlap-section .wp-block-column:not(.is-text){
  position: relative;
  z-index: 1;
}

/* === 6) Obrazy wyśrodkowane (ale nie flex na całej kolumnie) === */
.overlap-section .wp-block-image,
.overlap-section .wp-block-media-text__media{
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlap-section img{
  display: block;
  height: auto;
  max-width: 100%;
}

/* === 7) Mobile: wyłącz nakładanie kolumny dla czytelności === */
@media (max-width: 781px){
  .overlap-section .wp-block-column.is-text.overlap-right,
  .overlap-section .wp-block-column.is-text.overlap-left{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === Ustawienia wspólne === */
.overlap-section{
  --overlap: 80px;                       /* jak mocno tekst nachodzi na obraz */
  --stack-gap: clamp(12px, 2vw, 24px);   /* pionowy odstęp między kartkami */
}

/* === KOLUMNY: kolumna tekstowa przesuwana jako całość === */
.overlap-section .wp-block-column{ display:block !important; position:relative; }
.overlap-section .wp-block-column.is-text{ position:relative; z-index:2; }
.overlap-section .wp-block-column.is-text.overlap-right{ margin-right: calc(var(--overlap) * -1); } /* [TEKST][OBRAZ] */
.overlap-section .wp-block-column.is-text.overlap-left { margin-left:  calc(var(--overlap) * -1); } /* [OBRAZ][TEKST] */

/* === MEDIA & TEXT: przesuwamy kontener treści === */
.overlap-section .wp-block-media-text{ position:relative; }
.overlap-section .wp-block-media-text__content.is-text{ position:relative; z-index:2; }
.overlap-section .wp-block-media-text__content.is-text.overlap-right{ margin-right: calc(var(--overlap) * -1); } /* media po PRAWEJ → tekst po LEWEJ */
.overlap-section .wp-block-media-text__content.is-text.overlap-left { margin-left:  calc(var(--overlap) * -1); } /* media po LEWEJ → tekst po PRAWEJ */

/* „Kartki” dla akapitów i LIST (ol/ul) – również w Media & Text */
.overlap-section .overlap-text{
  display:inline-block;
  background:#fff; color:#111;           /* zmień na potrzeby: .overlap-section.overlap-dark */
  padding:16px 18px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  position:relative; z-index:2;
  margin-block: var(--stack-gap) !important;
  max-width:100%;
  line-height:1.5;
}
/* wersja z jasnym tekstem na ciemnym tle – dodaj klasę .overlap-dark na konkretnej okładce */
.overlap-section.overlap-dark .overlap-text{ background:rgba(0,0,0,.45); color:#fff; }

/* Listy wewnątrz kartki */
.overlap-section .overlap-text ul,
.overlap-section .overlap-text ol,
.overlap-section .overlap-text.wp-block-list{
  margin:0;
  padding-left:1.25em;
  list-style-position:inside;
}
.overlap-section .overlap-text li{ margin-block:.35em; }
.overlap-section .overlap-text li > ul,
.overlap-section .overlap-text li > ol{ margin-top:.35em; padding-left:1.25em; }

/* Obraz w Media & Text – ładne centrowanie (bez rozpychania) */
.overlap-section .wp-block-media-text__media{ display:flex; justify-content:center; align-items:center; }
.overlap-section .wp-block-media-text__media img{ display:block; height:auto; max-width:100%; }

/* Mobile: wyłącz nakładanie dla czytelności */
@media (max-width: 781px){
  .overlap-section .wp-block-column.is-text.overlap-right,
  .overlap-section .wp-block-column.is-text.overlap-left,
  .overlap-section .wp-block-media-text__content.is-text.overlap-right,
  .overlap-section .wp-block-media-text__content.is-text.overlap-left{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}
/* 0) Wyłącz dawny offset na <p> – to on powoduje nakładanie się z listą */
.overlap-section p,
.overlap-section .wp-block-paragraph{
  top: 0 !important;              /* zamiast np. top:80px */
}

/* === Overlap: wspólna KARTA dla p + list === */
.overlap-section{
  --stack-gap: clamp(12px, 2vw, 24px); /* odstęp między kartami kolumny */
  --card-pad: 16px 18px;
}

/* Kolumny / content M&T: normalny przepływ */
.overlap-section .wp-block-column,
.overlap-section .wp-block-media-text__content{
  display:block !important;
  position:relative;
}

/* Przesuwamy CAŁĄ część tekstową (kolumnę lub content M&T) */
.overlap-section .wp-block-column.is-text.overlap-right{ margin-right: calc(var(--overlap, 80px) * -1); }
.overlap-section .wp-block-column.is-text.overlap-left { margin-left:  calc(var(--overlap, 80px) * -1); }
.overlap-section .wp-block-media-text__content.is-text.overlap-right{ margin-right: calc(var(--overlap, 80px) * -1); }
.overlap-section .wp-block-media-text__content.is-text.overlap-left { margin-left:  calc(var(--overlap, 80px) * -1); }

/* WSPÓLNA KARTA – to na niej jest tło, cień i padding */
.overlap-section .overlap-card{
  background:#fff;
  color:#111;
  padding: var(--card-pad);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  margin-block: var(--stack-gap) !important;
  position: relative;
  z-index: 2;
  max-width: 100%;
}

/* Wersja ciemna dla okładki z jasnym tekstem */
.overlap-section.overlap-dark .overlap-card{
  background: rgba(0,0,0,.45);
  color: #fff;
}

/* Elementy wewnątrz karty — żadnych własnych teł/cieni/paddingów */
.overlap-section .overlap-card .overlap-text{
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: block;
  line-height: 1.5;
}

/* Odstęp między elementami wewnątrz jednej karty */
.overlap-section .overlap-card .overlap-text + .overlap-text{
  margin-top: clamp(8px, 1.2vw, 14px) !important;
}

/* Listy wewnątrz karty */
.overlap-section .overlap-card ul,
.overlap-section .overlap-card ol,
.overlap-section .overlap-card .wp-block-list{
  margin: 0;
  padding-left: 1.25em;
  list-style-position: inside;
}
.overlap-section .overlap-card li{ margin-block: .35em; }
.overlap-section .overlap-card li > ul,
.overlap-section .overlap-card li > ol{ margin-top:.35em; padding-left:1.25em; }

/* ANIMACJA: karta animuje, dzieci nie potrzebują animacji */
.overlap-section .overlap-card{
  opacity: 0;
  transform: translateY(20px);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.overlap-section .overlap-card.in{ opacity:1; transform: translateY(0); }

/* Jeśli gdzieś zostały animacje na .overlap-text, w karcie je gasimy */
.overlap-section .overlap-card .overlap-text{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Mobile: bez nachodzenia kolumny/contentu */
@media (max-width: 781px){
  .overlap-section .wp-block-column.is-text.overlap-right,
  .overlap-section .wp-block-column.is-text.overlap-left,
  .overlap-section .wp-block-media-text__content.is-text.overlap-right,
  .overlap-section .wp-block-media-text__content.is-text.overlap-left{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* === BOXY/KARTY: bursztynowe tło zamiast białego === */
.overlap-section{
  --card-bg: #fcb90061;   /* globalny kolor karty */
  --card-text: #111;      /* kolor tekstu na tej karcie */
}

/* Karta (akapit + lista sklejone) */
.overlap-section .overlap-card{
  background: var(--card-bg) !important; /* nadpisuje inline z JS */
  color: var(--card-text);
}

/* Fallback: gdy jakiś pojedynczy overlap-text nie został zgrupowany w kartę */
.overlap-section .overlap-text{
  background: var(--card-bg);
  color: var(--card-text);
}

/* Wewnątrz karty elementy NIE mają własnych teł (zostawiamy) */
.overlap-section .overlap-card .overlap-text{
  background: transparent !important;
  color: inherit !important;
}

/* === Sticky footer (zawsze widoczna) === */
:root{
  --stick-footer-bg: rgba(0,0,0,.85);   /* tło stopki */
  --stick-footer-fg: #fff;              /* kolor tekstu/ikon */
  --stick-footer-h: 32px;               /* bazowa, JS nadpisze realną wysokość */
  --stick-footer-maxw: 1200px;          /* szerokość treści */
}

.site-stick-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200005;
  background: var(--stick-footer-bg);
  color: var(--stick-footer-fg);
  backdrop-filter: saturate(120%) blur(6px);
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(0);
  transition: transform .35s ease;
}

.site-stick-footer a{ color: inherit; text-decoration: none; }
.site-stick-footer a:hover{ text-decoration: underline; }

.site-stick-footer .site-stick-inner{
  max-width: var(--stick-footer-maxw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  font-size:14px;
}

/* przycisk zamknięcia (opcjonalny) */
.site-stick-footer .site-stick-close{
  appearance:none; border:0; background:transparent; color:inherit; font-size:20px;
  line-height:1; cursor:pointer; padding:4px 6px; margin-left:auto;
  opacity:.8;
}
.site-stick-footer .site-stick-close:hover{ opacity:1; }

/* gdy ukryta (po kliknięciu X) */
body.is-stick-footer-hidden .site-stick-footer{ transform: translateY(110%); }

/* zostaw miejsce na stopkę, żeby nie zasłaniała treści końca strony */
body:not(.is-stick-footer-hidden){
  padding-bottom: calc(var(--stick-footer-h) + env(safe-area-inset-bottom, 0px));
}

/* Mobile drobne zagęszczenie */
@media (max-width: 600px){
  .site-stick-footer .site-stick-inner{ gap:8px 12px; }
}

/* === Sticky footer: wyśrodkowanie i paleta === */
:root{
  --stick-footer-bg: rgba(0,0,0,.85);
  --stick-footer-fg: #fff;
  --stick-accent: #fcb900;            /* AMBER dla ikonek/punktów */
  --stick-footer-maxw: 1200px;
}

/* sam kontener stopki masz już dodany wcześniej – tu tylko korekty layoutu */
.site-stick-footer{
  background: var(--stick-footer-bg);
  color: var(--stick-footer-fg);
  position: fixed; left:0; right:0; bottom:0; z-index:200005;
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: saturate(120%) blur(6px);
}
.site-stick-footer a{ color: var(--stick-footer-fg); text-decoration: none; }
.site-stick-footer a:hover{ text-decoration: underline; }

.site-stick-inner{
  max-width: var(--stick-footer-maxw);
  margin-inline: auto;
  position: relative;               /* dla absolutnego X */
  display: grid;
  justify-items: center;            /* WYŚRODKOWANIE wszystkiego */
  gap: 6px 16px;
  text-align: center;               /* wyśrodkuj też tekst */
}

/* brand nad pozycjami */
.stick-brand{ font-weight: 700; }

/* lista pozycji z ikonkami – też centrowana */
.stick-items{
  display: flex;
  align-items: center;
  justify-content: center;          /* WYŚRODKUJ W RZĘDZIE */
  flex-wrap: wrap;
  gap: 10px 18px;
}

/* pojedyncza pozycja */
.stick-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  white-space: nowrap;              /* nie łam „+48 …” itp. */
}

/* ikonki w kolorze akcentu */
.icon{
  width: 18px; height: 18px;
  flex: 0 0 18px;
  color: var(--stick-accent);
}

/* przycisk zamknięcia – absolutnie po prawej, by nie psuć centrowania */
.site-stick-close{
  appearance: none; border: 0; background: transparent;
  color: var(--stick-footer-fg); font-size: 22px; line-height: 1;
  cursor: pointer; opacity: .8;
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 4px 6px;
}
.site-stick-close:hover{ opacity: 1; }

/* zostaw miejsce pod stronę (to masz już w poprzednim CSS-ie; dopinamy tylko wizual) */
body:not(.is-stick-footer-hidden){
  padding-bottom: calc(var(--stick-footer-h, 64px) + env(safe-area-inset-bottom, 0px));
}

/* mobile: minimalne przerwy */
@media (max-width: 600px){
  .stick-items{ gap: 8px 12px; }
}

/* === Sticky footer: bursztynowe tło, konturowe ikonki, cookies === */
:root{
  --stick-footer-bg: #fcb90061;   /* półprzezroczysty amber jak w kartach */
  --stick-footer-fg: #111;        /* ciemny tekst dla kontrastu */
  --stick-accent: #7a5a00;        /* ciemniejszy amber dla obrysów ikon */
  --stick-footer-maxw: 1200px;
}

.site-stick-footer{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200005;
  background: var(--stick-footer-bg);
  color: var(--stick-footer-fg);
  border-top: 1px solid rgba(0,0,0,.12);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: saturate(120%) blur(6px);
  transform: translateY(0);
  transition: transform .35s ease;
}
.site-stick-footer a{ color: var(--stick-footer-fg); text-decoration: none; }
.site-stick-footer a:hover{ text-decoration: underline; }

/* wyśrodkowanie całości */
.site-stick-inner{
  max-width: var(--stick-footer-maxw);
  margin-inline: auto;
  position: relative;           /* dla absolutnego X */
  display: grid;
  justify-items: center;
  gap: 6px 16px;
  text-align: center;
}

.stick-brand{ font-weight: 700; }

/* lista pozycji z ikonkami (wyśrodkowana i zawijana) */
.stick-items{
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 18px;
}
.stick-item{
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1.2; white-space: nowrap;
}

/* konturowe ikony: stroke zamiast fill */
.icon{ width: 18px; height: 18px; flex: 0 0 18px; }
.icon-outline{
  stroke: var(--stick-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* X po prawej — nie psuje centrowania */
.site-stick-close{
  appearance:none; border:0; background:transparent;
  color: var(--stick-footer-fg); font-size:22px; line-height:1;
  cursor:pointer; opacity:.8;
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  padding:4px 6px;
}
.site-stick-close:hover{ opacity:1; }

/* cookies w tej samej szynie */
.stick-cookies{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 2px;
}
.stick-cookies a{ text-decoration: underline; }
.cookie-accept{
  appearance:none; border: 1.5px solid var(--stick-accent);
  background: transparent; color: var(--stick-footer-fg);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  font: inherit;
}
.cookie-accept:hover{
  background: var(--stick-accent);
  color: #fff;
}

/* zaakceptowane cookies → ukryj moduł */
.has-cookie-ok .stick-cookies{ display: none; }

/* ukryta cała stopka (po X) */
body.is-stick-footer-hidden .site-stick-footer{ transform: translateY(110%); }

/* zostaw miejsce na stopkę, by nie zasłaniała końcówki strony */
body:not(.is-stick-footer-hidden){
  padding-bottom: calc(var(--stick-footer-h, 64px) + env(safe-area-inset-bottom, 0px));
}

/* mobile – drobne zagęszczenie */
@media (max-width: 600px){
  .stick-items{ gap: 8px 12px; }
}
/* --- STOPKA: grid z kolumną dla przycisku X --- */
.site-stick-inner{
  max-width: var(--stick-footer-maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto; /* [kolumna treści] [kolumna X] */
  align-items: center;
  justify-items: center;   /* środek w kolumnie treści */
  gap: 6px 16px;
  text-align: center;
  position: relative;      /* już niepotrzebne absolutne pozycjonowanie X */
}

/* elementy treści idą do kolumny 1 (wyśrodkowane) */
.stick-brand,
.stick-items,
.stick-cookies{ grid-column: 1; }

/* przycisk zamknięcia do kolumny 2, bez absolute – nie koliduje z treścią */
.site-stick-close{
  position: static !important;   /* nadpisuje poprzednie absolute */
  grid-column: 2;
  grid-row: 1 / -1;              /* wyśrodkuj przez kilka wierszy */
  justify-self: end;
  align-self: center;
  transform: none !important;
  margin-left: 8px;
  z-index: 1;                    /* na wszelki wypadek ponad SVG */
}

/* ikony konturowe zostają jak były */
.icon{ width:18px; height:18px; flex:0 0 18px; }
.icon-outline{
  stroke: var(--stick-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* bursztynowe tło + czytelny tekst */
.site-stick-footer{
  background: var(--stick-footer-bg, #fcb90061);
  color: var(--stick-footer-fg, #111);
}

/* mobile: ciut ciaśniej */
@media (max-width: 600px){
  .stick-items{ gap: 8px 12px; }
}


/* ===============================
   OVERRIDES — Overlap & Sticky Footer (final)
   =============================== */

/* --- Overlap cards: amber background + block flow + no top offset --- */
.overlap-section{
  --card-bg: #fcb90061;
  --card-text: #111;
  --stack-gap: clamp(12px, 2vw, 24px);
  --overlap: 80px;
}

.overlap-section p,
.overlap-section .wp-block-paragraph{ top: 0 !important; }

.overlap-section .wp-block-column,
.overlap-section .wp-block-media-text__content{
  display:block !important; position:relative;
}

.overlap-section .wp-block-column.is-text.overlap-right,
.overlap-section .wp-block-media-text__content.is-text.overlap-right{ margin-right: calc(var(--overlap) * -1); }
.overlap-section .wp-block-column.is-text.overlap-left,
.overlap-section .wp-block-media-text__content.is-text.overlap-left{ margin-left:  calc(var(--overlap) * -1); }

/* wspólna karta (p + listy) */
.overlap-section .overlap-card{
  background: var(--card-bg) !important;
  color: var(--card-text);
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  margin-block: var(--stack-gap) !important;
  position: relative; z-index: 2; max-width: 100%;
  opacity: 0; transform: translateY(20px);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.overlap-section .overlap-card.in{ opacity:1; transform:none; }

/* elementy w karcie nie mają własnych teł/animacji */
.overlap-section .overlap-card .overlap-text{
  background: transparent !important; color: inherit !important;
  padding: 0 !important; box-shadow: none !important;
  margin: 0 !important; display: block; line-height: 1.5;
  opacity: 1 !important; transform: none !important; transition: none !important;
}
.overlap-section .overlap-card .overlap-text + .overlap-text{
  margin-top: clamp(8px, 1.2vw, 14px) !important;
}

/* fallback: pojedyncza „kartka”, gdy coś nie zgrupowało się w .overlap-card */
.overlap-section .overlap-text{
  background: var(--card-bg);
  color: var(--card-text);
  margin-block: var(--stack-gap) !important;
}

/* listy wewnątrz kart/pojedynczych kartek */
.overlap-section .overlap-card ul,
.overlap-section .overlap-card ol,
.overlap-section .overlap-text ul,
.overlap-section .overlap-text ol{
  margin:0; padding-left:1.25em; list-style-position: inside;
}
.overlap-section .overlap-card li,
.overlap-section .overlap-text li{ margin-block: .35em; }
.overlap-section .overlap-card li > ul,
.overlap-section .overlap-card li > ol,
.overlap-section .overlap-text li > ul,
.overlap-section .overlap-text li > ol{ margin-top:.35em; padding-left:1.25em; }

/* mobile: bez nakładania kolumny/contentu */
@media (max-width: 781px){
  .overlap-section .wp-block-column.is-text.overlap-right,
  .overlap-section .wp-block-column.is-text.overlap-left,
  .overlap-section .wp-block-media-text__content.is-text.overlap-right,
  .overlap-section .wp-block-media-text__content.is-text.overlap-left{
    margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* --- Sticky footer (amber translucent, outline icons, cookies, X po PRAWEJ) --- */
:root{
  --stick-footer-bg: #fcb90061;
  --stick-footer-fg: #111;
  --stick-accent: #7a5a00;
  --stick-footer-maxw: 1200px;
  --stick-x-w: 40px;
}

.site-stick-footer{
  position: fixed; left:0; right:0; bottom:0; z-index:200005;
  background: var(--stick-footer-bg); color: var(--stick-footer-fg);
  border-top: 1px solid rgba(0,0,0,.12);
  padding: 10px 16px;
  padding-right: calc(16px + var(--stick-x-w)); /* rezerwa na X po prawej */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: saturate(120%) blur(6px);
  transform: translateY(0); transition: transform .35s ease;
}
.site-stick-footer a{ color: var(--stick-footer-fg); text-decoration: none; }
.site-stick-footer a:hover{ text-decoration: underline; }

/* X po prawej krawędzi belki */
.site-stick-footer > .site-stick-close{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: var(--stick-x-w); text-align: center;
  appearance: none; border: 0; background: transparent;
  color: var(--stick-footer-fg); font-size: 22px; line-height: 1;
  cursor: pointer; opacity: .8; padding: 4px 6px; z-index: 2;
}
.site-stick-footer > .site-stick-close:hover{ opacity: 1; }

/* wyśrodkowana treść */
.site-stick-inner{
  max-width: var(--stick-footer-maxw);
  margin-inline: auto;
  display: grid; grid-template-columns: 1fr;
  justify-items: center; gap: 6px 16px; text-align: center;
  position: relative;
}
.stick-brand{ font-weight: 700; }
.stick-items{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 10px 18px; }
.stick-item{ display:inline-flex; align-items:center; gap:8px; line-height:1.2; white-space:nowrap; }

/* konturowe ikonki (stroke) */
.icon{ width:18px; height:18px; flex:0 0 18px; }
.icon-outline{ stroke: var(--stick-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* cookies w tej samej belce */
.stick-cookies{ display:inline-flex; align-items:center; gap:10px; margin-top:2px; }
.stick-cookies a{ text-decoration: underline; }
.cookie-accept{
  appearance:none; border:1.5px solid var(--stick-accent);
  background: transparent; color: var(--stick-footer-fg);
  border-radius:999px; padding:6px 12px; cursor:pointer; font:inherit;
}
.cookie-accept:hover{ background: var(--stick-accent); color:#fff; }
.has-cookie-ok .stick-cookies{ display:none; }

/* schowanie całej stopki */
body.is-stick-footer-hidden .site-stick-footer{ transform: translateY(110%); }

/* podbij dół strony, by stopka nic nie zasłaniała */
body:not(.is-stick-footer-hidden){
  padding-bottom: calc(var(--stick-footer-h, 64px) + env(safe-area-inset-bottom, 0px));
}

/* mobile zagęszczenie */
@media (max-width: 600px){
  .stick-items{ gap: 8px 12px; }
}


/* === FIX: Sticky footer — X zawsze po prawej, jednowierszowo (obsługa obu markupów) === */
:root{ --stick-x-w: 44px; } /* większy target dotykowy */

.site-stick-footer{
  padding-right: calc(16px + var(--stick-x-w));
}

/* CASE A: przycisk X jest BEZPOŚREDNIM dzieckiem .site-stick-footer */
.site-stick-footer > .site-stick-close{
  position: absolute !important;
  right: 8px; top: 50%; transform: translateY(-50%);
  width: var(--stick-x-w);
  text-align: center;
  appearance: none; border: 0; background: transparent;
  color: var(--stick-footer-fg, #111);
  font-size: 22px; line-height: 1;
  cursor: pointer; opacity: .8; padding: 4px 6px; z-index: 3;
}
.site-stick-footer > .site-stick-close:hover{ opacity: 1; }

/* CASE B: przycisk X jest W ŚRODKU .site-stick-inner (fallback bez zmiany PHP) */
.site-stick-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-items: center;
}
.site-stick-inner > .site-stick-close{
  position: static !important;
  transform: none !important;
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: end;
  align-self: center;
  width: var(--stick-x-w);
}
/* dopilnuj, by treść była w kolumnie 1 i wyśrodkowana */
.stick-brand, .stick-items, .stick-cookies{ grid-column: 1; justify-self: center; }


/* === PATCH: Sticky footer without close button === */
.site-stick-footer{ padding-right: 16px !important; } /* no reserved space for X */
.site-stick-footer > .site-stick-close{ display: none !important; }
.site-stick-inner{
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
}
:root{ --stick-x-w: 0px !important; }

/* === Sticky footer: wszystko w JEDNEJ LINII (desktop) === */
.site-stick-inner{
  display: flex !important;
  align-items: center;
  justify-content: center;       /* całość wyśrodkowana */
  gap: 10px 18px;
  flex-wrap: nowrap;             /* bez zawijania na desktopie */
  text-align: center;            /* tekst w środku */
}

/* trzy segmenty obok siebie */
.stick-brand,
.stick-items,
.stick-cookies{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;           /* nie łam linii w segmencie */
}

/* kosmetyka */
.stick-items{ gap: 10px 18px; }
.stick-item{ gap: 8px; }
.stick-cookies{ gap: 10px; margin-left: 14px; }

/* jeśli dalej „za wąsko”, możesz zwiększyć max-szerokość szyny: */
:root{ --stick-footer-maxw: 1400px; }  /* było 1200px — opcjonalnie */

/* Mobile / węższe ekrany: pozwól zawijać się ładnie w 2–3 rzędy */
@media (max-width: 900px){
  .site-stick-inner{ flex-wrap: wrap; }
  .stick-brand, .stick-items, .stick-cookies{ white-space: normal; }
  .stick-cookies{ margin-left: 0; }
}

/* minimalna wysokość belki, by cookie nie „spychało” elementów */
.site-stick-footer{ min-height: 48px; }

/* === Sticky footer: tryb kompaktowy (niższa belka + mniejsze odstępy) === */
:root{
  --stick-footer-maxw: 1400px;   /* opcjonalnie: odrobinę szerzej, by wszystko mieściło się w 1 linii */
}

/* niższa belka: mniej pionowego paddingu i mniejsze minimum */
.site-stick-footer{
  padding-top: 6px !important;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: 40px !important;   /* było 48px */
}

/* ciaśniejsze odstępy w środku (brand/items/cookies) */
.site-stick-inner{
  gap: 6px 12px !important;
}

/* mniejsze przerwy między pozycjami i w pozycjach */
.stick-items{ gap: 8px 12px !important; }
.stick-item{ gap: 6px !important; }

/* cookies bliżej opisu + mniejszy guzik */
.stick-cookies{
  gap: 8px !important;
  margin-left: 8px !important;   /* było ~14px; reguluje odstęp od opisu */
}
.cookie-accept{
  padding: 4px 10px !important;  /* było większe */
  line-height: 1.1;
}

/* delikatnie ciaśniejsza typografia w belce */
.site-stick-footer,
.stick-item,
.stick-cookies{
  line-height: 1.2 !important;
}

/* (opcjonalnie) na bardzo wąskich ekranach zostaw trochę „oddechu” dla klikalności */
@media (max-width: 600px){
  .site-stick-footer{
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 44px !important;
  }
}



/* === TYTUŁY W NAKŁADKACH PANORAMY (3 boksy) === */
:root{
  --cap-title-size: clamp(22px, 3.6vw, 58px);
  --cap-title-gap: clamp(6px, 1.0vw, 14px);
  --cap-title-bg: rgba(0,0,0,.55);      /* półprzezroczyste tło */
  --cap-title-blur: 6px;
  --cap-title-radius: 14px;
}

#panorama .cap__title{
  margin: 0 0 var(--cap-title-gap) 0;
  padding: .35em .6em;
  display: inline-block;
  font-size: var(--cap-title-size);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: var(--cap-title-bg);
  -webkit-backdrop-filter: saturate(120%) blur(var(--cap-title-blur));
  backdrop-filter: saturate(120%) blur(var(--cap-title-blur));
  border-radius: var(--cap-title-radius);
  pointer-events: auto;   /* pozwala klikać linki wewnątrz h1, jeśli będą */
  opacity: 1;             /* wchodzimy razem z całym boksem (transform/opacity grupy) */
}

/* Ujednolicenie układu wewnątrz kolumny (tytuł nad etykietą) */
#panorama .cap > div{ flex-direction: column; }

/* === ŚRODEK WSTĘGI DLA H1 NA OKŁADKACH === */
/* ——— H1 na okładkach: wstęga od lewej krawędzi; tekst centralnie; grubość = wysokość napisu ——— */
:root{
  /* geometria */
  --cover-diag-angle: -45deg;   /* kąt wstęgi */
  --cover-diag-top: 30vh;       /* pion do górnej krawędzi okładki */
  --cover-diag-sin: 0.70711;    /* sin(|kąt|) dla 45° */
  --cover-diag-inv-sin: 1.41421;/* 1/sin(|kąt|) dla 45° */
  --cover-diag-length: calc(var(--cover-diag-top) * var(--cover-diag-inv-sin)); /* długość wstęgi do krawędzi okładki */
  --cover-diag-font: "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --cover-diag-weight: 100;       /* docelowo „Thin” */
}

/* Jeśli przeglądarka nie wspiera zmiennej osi wagi – użyj 300 Light */
@supports not (font-variation-settings: normal){
  :root{ --cover-diag-weight: 300; }
}
  /* typografia → z tego policzymy grubość paska */
  --cover-diag-lh: 1.05;        /* line-height H1 */
  --cover-diag-pad: 0.35em;     /* pionowy padding H1 (góra+dół) */

  /* GRUBOŚĆ WSTĘGI = wysokość tekstu z paddingiem (skalowalna) */
  --cover-diag-thickness-scale: 1; /* zwiększ do 1.1…1.2 jeśli chcesz więcej „powietrza” */
  --cover-diag-thickness: calc( var(--cover-diag-thickness-scale) * ( (1em * var(--cover-diag-lh)) + (2 * var(--cover-diag-pad)) ) );
}

.wp-block-cover{ position: relative; overflow: hidden; }

.wp-block-cover__inner-container > h1:first-child,
.wp-block-cover__inner-container > h1.cover-title{
  position: absolute;
  margin: 0;
  display: block;
  width: var(--cover-diag-length);        /* długość wzdłuż wstęgi → pozwala wycentrować tekst */
  text-align: center;                     /* środek wstęgi */
  white-space: nowrap;

  /* start wstęgi = lewa krawędź viewportu + kompensacja połowy grubości */
  left: calc( (100% - 100vw)/2 - (var(--cover-diag-thickness) * 0.5 * var(--cover-diag-sin)) );
  top: var(--cover-diag-top);

  /* obrót wokół punktu startu (bez translate) */
  transform: rotate(var(--cover-diag-angle));
  transform-origin: left center;

  /* typografia i wewnętrzny „oddech” – TE wartości sterują też grubością wstęgi */
  line-height: var(--cover-diag-lh);
  padding: var(--cover-diag-pad) .6em;

  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  background: none !important;
  z-index: 2;
    font-family: var(--cover-diag-font);
  font-weight: var(--cover-diag-weight);
  font-variation-settings: "wght" var(--cover-diag-weight); /* dla variable fontów */
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility;
}

/* Tło wstęgi – dopasowane grubością do napisu */
.wp-block-cover__inner-container > h1:first-child::before,
.wp-block-cover__inner-container > h1.cover-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: max(200vw, 200vh);               /* zapas na skosy */
  height: var(--cover-diag-thickness);    /* = wysokość napisu */
  z-index: -1;
  background: var(--cover-title-bg, rgba(0,0,0,.55));
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-radius: var(--cover-title-radius, 16px);
}

/* MOBILE: -40° → inne sin / 1/sin; możesz też skorygować top i skalę grubości */
@media (max-width: 782px){
  :root{
    --cover-diag-angle: -40deg;
    --cover-diag-top: 12vh;
    --cover-diag-sin: 0.64279;      /* sin(40°) */
    --cover-diag-inv-sin: 1.55572;  /* 1/sin(40°) */
    --cover-diag-length: calc(var(--cover-diag-top) * var(--cover-diag-inv-sin));
    --cover-diag-thickness-scale: 1;/* np. 1.05, gdy chcesz ciut grubiej na mobile */
  }
}

/* === Odsunięcie tekstu od lewej krawędzi wzdłuż wstęgi === */
:root{
  /* ile chcesz odsunąć napis – ustaw „na oko”; rośnie razem z viewportem */
  --cover-diag-bias: clamp(24px, 5vw, 96px);

  /* utrzymujemy spójność z poprzednim kodem (grubość wstęgi liczy się z padY) */
  --cover-diag-padX: .6em;   /* poziomy „oddech” */
  --cover-diag-padY: .35em;  /* pionowy „oddech” */
  --cover-diag-pad: var(--cover-diag-padY);
}

/* H1 na okładce – tylko korekta paddingów: więcej z lewej = napis przesunięty w prawo */
.wp-block-cover__inner-container > h1:first-child,
.wp-block-cover__inner-container > h1.cover-title{
  padding: var(--cover-diag-padY) var(--cover-diag-padX);
  padding-left: calc(var(--cover-diag-padX) + var(--cover-diag-bias));
}

/* Możesz też dać ciut mniejszy bias na mobile */
@media (max-width: 782px){
  :root{ --cover-diag-bias: clamp(16px, 6vw, 48px); }
}

/* === FIX: H1 na wstędze – centrum bez przesunięcia, „powietrze” po obu stronach === */

/* 1) Wyłącz jednostronny bias (zapobiega rozjechaniu środka) */
:root{
  --cover-diag-bias: 0px !important;
}

/* 2) Dodaj symetryczny zapas poziomy (zwiększa odstęp od lewej,
      ale zachowuje wycentrowanie napisu) */
:root{
  --cover-diag-padX: .6em;                 /* bazowy oddech (masz już w CSS) */
  --cover-diag-padX-extra: clamp(12px, 2vw, 32px);
}

.wp-block-cover__inner-container > h1:first-child,
.wp-block-cover__inner-container > h1.cover-title{
  /* szerokość i wyśrodkowanie – zostają bez zmian */
  width: var(--cover-diag-length) !important;         /* długość wzdłuż wstęgi */
  text-align: center !important;

  /* symetryczne „powietrze” – NIE rozcentrowuje */
  padding-left:  calc(var(--cover-diag-padX) + var(--cover-diag-padX-extra)) !important;
  padding-right: calc(var(--cover-diag-padX) + var(--cover-diag-padX-extra)) !important;
}

/* === FIX: ukośny H1 – centracja po osi wstęgi, bez „rozpychania” paddingami === */

/* Geometria (45°) – jeśli zmienisz kąt, daj znać, podam nowe wartości sin/inv-sin */
:root{
  --cover-diag-angle: -45deg;
  --cover-diag-top: 20vh;

  /* trygonometria dla |kąt| = 45° */
  --cover-diag-sin: 0.70711;     /* sin(45°) */
  --cover-diag-inv-sin: 1.41421; /* 1/sin(45°) */
  --cover-diag-half: calc(var(--cover-diag-top) * var(--cover-diag-inv-sin) / 2); /* połowa długości wstęgi */

  /* typografia → cienka Roboto Condensed już u Ciebie jest */
  --cover-diag-lh: 1.05;
  --cover-diag-padY: .35em;
  --cover-diag-padX: .6em;
  --cover-diag-thickness-scale: 1; /* 0.95–1.15 jeśli chcesz cieńszą/grubszą belkę */
  --cover-diag-thickness: calc(var(--cover-diag-thickness-scale) * ((1em * var(--cover-diag-lh)) + (2 * var(--cover-diag-padY))));
}

/* Kotwica dla absolutów */
.wp-block-cover{ position: relative; overflow: hidden; }

/* 1) Reset starych reguł (szerokości/biasów) */
.wp-block-cover__inner-container > h1:first-child,
.wp-block-cover__inner-container > h1.cover-title{
  /* NIE używamy już szerokości = długość wstęgi */
  width: max-content !important;
  text-align: left !important;

  /* ZERO jednostronnego biasu */
  padding-left: var(--cover-diag-padX) !important;
  padding-right: var(--cover-diag-padX) !important;
  padding-top: var(--cover-diag-padY) !important;
  padding-bottom: var(--cover-diag-padY) !important;
}

/* 2) Start wstęgi na lewej krawędzi + kompensacja grubości w pionie */
.wp-block-cover__inner-container > h1:first-child,
.wp-block-cover__inner-container > h1.cover-title{
  position: absolute;
  left: calc((100% - 100vw)/2 - (var(--cover-diag-thickness) * 0.5 * var(--cover-diag-sin))) !important;
  top: var(--cover-diag-top) !important;

  /* KLUCZ: najpierw ustawiamy środek H1 w połowie wstęgi, potem obrót.
     (prawo→lewo: rotate stosuje się jako pierwszy, więc translateX-y są po osi wstęgi) */
  transform: translateX(-50%) translateX(var(--cover-diag-half)) rotate(var(--cover-diag-angle)) !important;
  transform-origin: left center !important;

  line-height: var(--cover-diag-lh);
  font-weight: 100; /* Roboto Condensed Thin */
  color: #fff;
  background: none !important;
  z-index: 2;
}

/* 3) Tło wstęgi – dopasowane grubością do napisu */
.wp-block-cover__inner-container > h1:first-child::before,
.wp-block-cover__inner-container > h1.cover-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: max(200vw, 200vh);
  height: var(--cover-diag-thickness);
  z-index: -1;
  background: var(--cover-title-bg, rgba(0,0,0,.55));
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-radius: var(--cover-title-radius, 16px);
  left: calc((100% - 100vw)/2 - (var(--cover-diag-thickness) * 0.5 * var(--cover-diag-sin)) - 1px) !important;
}

/* 4) Mobile (40°): podmieniamy tylko geometrie */
@media (max-width: 782px){
  :root{
    --cover-diag-angle: -40deg;
    --cover-diag-top: 12vh;
    --cover-diag-sin: 0.64279;     /* sin(40°) */
    --cover-diag-inv-sin: 1.55572; /* 1/sin(40°) */
    --cover-diag-half: calc(var(--cover-diag-top) * var(--cover-diag-inv-sin) / 2);
  }
}

/* === H1 na okładkach — start przy lewej krawędzi, tekst idealnie na środku,
       zawijanie w obrębie wstęgi (działa także przy --cover-diag-top: 20vh) === */

/* Geometria dla kąta 45° (zmień tylko jeśli użyjesz innego kąta) */
:root{
  --cover-diag-angle: -45deg !important;
  --cover-diag-sin: 0.70711 !important;      /* sin(45°) */
  --cover-diag-inv-sin: 1.41421 !important;  /* 1/sin(45°) */

  /* Twoje aktualne położenie */
  --cover-diag-top: 20vh !important;

  /* Typografia i grubość paska (z tekstu) */
  --cover-diag-lh: 1.05 !important;
  --cover-diag-padY: .35em !important;
  --cover-diag-padX: .6em !important;
  --cover-diag-thickness-scale: 1 !important;
  --cover-diag-thickness: calc(var(--cover-diag-thickness-scale) * ((1em * var(--cover-diag-lh)) + (2 * var(--cover-diag-padY)))) !important;
}

/* Wyłącz wszelkie stare „biasy” i nadpisania padding-left */
:root{ --cover-diag-bias: 0px !important; }

.wp-block-cover{ position: relative; overflow: hidden; }

.wp-block-cover__inner-container > h1:first-child,
.wp-block-cover__inner-container > h1.cover-title{
  position: absolute !important;

  /* start wstęgi przy lewej krawędzi viewportu + kompensacja grubości */
  left: calc((100% - 100vw)/2 - (var(--cover-diag-thickness) * 0.5 * var(--cover-diag-sin))) !important;
  top: var(--cover-diag-top) !important;

  /* obrót wokół punktu startu (bez translate, żeby nie „odkleić” od krawędzi) */
  transform: rotate(var(--cover-diag-angle)) !important;
  transform-origin: left center !important;

  /* DŁUGOŚĆ WSTĘGI do górnej krawędzi okładki */
  width: calc(var(--cover-diag-top) * var(--cover-diag-inv-sin)) !important;
  min-height: var(--cover-diag-thickness) !important;

  /* KLUCZ: centrowanie treści i zawijanie w obrębie paska */
  display: grid !important;
  place-items: center !important;      /* horyzontalnie i pionowo na środku */
  text-align: center !important;
  white-space: normal !important;      /* POZWÓL ZAWIJAĆ TEKST */
  text-wrap: balance;                  /* ładniejsze łamanie, gdy wspierane */
  word-break: break-word;              /* awaryjnie łamie bardzo długie słowa */

  /* symetryczny „oddech” (nie psuje środka) */
  padding: var(--cover-diag-padY) var(--cover-diag-padX) !important;

  line-height: var(--cover-diag-lh) !important;
  color: #fff;
  background: none !important;
  z-index: 2 !important;
}

/* Tło wstęgi — pod tekstem, grubość = wysokość napisu */
.wp-block-cover__inner-container > h1:first-child::before,
.wp-block-cover__inner-container > h1.cover-title::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: max(200vw, 200vh);
  height: var(--cover-diag-thickness);
  z-index: -1;
  background: var(--cover-title-bg, rgba(0,0,0,.55));
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-radius: var(--cover-title-radius, 16px);
}

/* Mobile: jeśli używasz -40°, podmień stałe */
@media (max-width: 782px){
  :root{
    --cover-diag-angle: -40deg !important;
    --cover-diag-top: 12vh !important;
    --cover-diag-sin: 0.64279 !important;
    --cover-diag-inv-sin: 1.55572 !important;
  }
}
/* === PATCH: diagonalny H1 — naprawa pudełka i idealne centrowanie === */
:root{
  /* Twoje aktualne ustawienia */
  --cover-diag-angle: -45deg !important;
  --cover-diag-top:35vh !important;
  --cover-diag-sin: 0.70711 !important;
  --cover-diag-inv-sin: 1.41421 !important;

  /* typografia → grubość paska z tekstu */
  --cover-diag-lh: 1.05 !important;
  --cover-diag-padY: .35em !important;
  --cover-diag-padX: .6em !important;
  --cover-diag-thickness: calc((1em * var(--cover-diag-lh)) + (2 * var(--cover-diag-padY))) !important;

  /* długość odcinka wzdłuż wstęgi (do krawędzi okładki) */
  --cover-diag-length: calc(var(--cover-diag-top) * var(--cover-diag-inv-sin)) !important;

  /* Zgaś stary jednostronny „bias” */
  --cover-diag-bias: 0px !important;
}

/* H1: start przy lewej krawędzi, długość = odcinek, treść idealnie wycentrowana */
html body .wp-block-cover__inner-container > h1:first-child,
html body .wp-block-cover__inner-container > h1.cover-title{
  position: absolute !important;
  left: calc((100% - 100vw)/2 - (var(--cover-diag-thickness) * 0.5 * var(--cover-diag-sin))) !important;
  top: var(--cover-diag-top) !important;
  transform: rotate(var(--cover-diag-angle)) !important;
  transform-origin: left center !important;

  width: var(--cover-diag-length) !important;
  min-height: var(--cover-diag-thickness) !important;

  /* CENTROWANIE TEKSTU */
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  white-space: normal !important;  /* pozwól się zawijać, jeśli tytuł długi */

  padding: var(--cover-diag-padY) var(--cover-diag-padX) !important;
  line-height: var(--cover-diag-lh) !important;
  color:#fff; background:none !important; z-index:2 !important;
}

/* TŁO WSTĘGI: przywróć kotwiczenie do LEWEJ KRAWĘDZI H1 */
html body .wp-block-cover__inner-container > h1:first-child::before,
html body .wp-block-cover__inner-container > h1.cover-title::before{
  content:"";
  position:absolute; inset-block:auto; top:50%;
  transform: translateY(-50%);
  left: 0 !important;             /* <— nadpisuje błędne „left: calc(...)” w pliku */
  right: auto !important;

  width: max(200vw, 200vh);
  height: var(--cover-diag-thickness);
  z-index:-1;
  background: var(--cover-title-bg, rgba(0,0,0,.55));
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  border-radius: var(--cover-title-radius, 16px);
}

/* === MOBILE OVERRIDE: poziomy H1 na górze okładki (bez wstęgi) === */
@media (max-width: 782px){
  /* U góry, bez obrotu i bez absolutów */
  html body .wp-block-cover__inner-container > h1:first-child,
  html body .wp-block-cover__inner-container > h1.cover-title{
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    transform-origin: initial !important;

    width: 100% !important;
    min-height: 0 !important;
    display: block !important;

    /* zwykły, poziomy tytuł */
    text-align: left !important;           /* zmień na center, jeśli wolisz */
    white-space: normal !important;
    padding: .6rem 1rem !important;
    margin: .5rem 0 0 !important;

    /* opcjonalnie mniejszy rozmiar na mobile */
    font-size: clamp(18px, 6vw, 28px) !important;
    line-height: 1.15 !important;

    z-index: 2 !important;
    background: none !important;
  }

  /* Wyłącz tło wstęgi */
  html body .wp-block-cover__inner-container > h1:first-child::before,
  html body .wp-block-cover__inner-container > h1.cover-title::before{
    content: none !important;
  }

  /* Upewnij się, że zawartość okładki nie centruje wszystkiego pionowo */
  html body .wp-block-cover__inner-container{
    display: block !important;             /* zamiast flex-centrowania Gutenberga */
  }
}
/* === MOBILE: tło pod poziomym H1 na okładce === */
@media (max-width: 782px){
  :root{
    --cover-mobile-bg: var(--cover-title-bg, rgba(0,0,0,.55));
    --cover-mobile-blur: 10px;
    --cover-mobile-radius: 14px;
  }

  html body .wp-block-cover__inner-container > h1:first-child,
  html body .wp-block-cover__inner-container > h1.cover-title{
    background: var(--cover-mobile-bg) !important;
    -webkit-backdrop-filter: saturate(120%) blur(var(--cover-mobile-blur));
    backdrop-filter: saturate(120%) blur(var(--cover-mobile-blur));
    border-radius: var(--cover-mobile-radius) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  /* (Opcjonalnie) wariant „full-bleed” – pasek na całą szerokość,
     jeśli okładka ma wewnętrzne paddingi: odkomentuj 5 linii poniżej */
 
  html body .wp-block-cover__inner-container > h1:first-child,
  html body .wp-block-cover__inner-container > h1.cover-title{
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 0 !important;
	
  }
  
}


/* === OFFSET KOTWIC POD STICKY MENU (globalnie i per-element) === */
:root{
  --anchor-extra: 0px; /* dodatkowy zapas, np. 12px */
}

/* Mobile: własny zapas nad kotwicą (np. 12px) */
@media (max-width: 782px){
  :root{ --anchor-extra: 0px; }

/* globalnie dla przewijania do #hash (wspierane w nowoczesnych przeglądarkach) */
html{
  scroll-padding-top: calc(
    var(--nav-height, var(--logo-h, var(--header-h, 64px))) + var(--anchor-extra, 0px)
  ) !important;
}

/* a to samo per-kotwica, gdyby przeglądarka zignorowała scroll-padding */
[id]{
  scroll-margin-top: calc(
    var(--nav-height, var(--logo-h, var(--header-h, 64px))) + var(--anchor-extra, 0px)
  ) !important;
}
/* === MOBILE: pasek = hamburger + 10px (i poprawny offset kotwic) === */
@media (max-width: 782px){
  :root{
    /* Ustaw docelową wysokość przycisku (jeśli chcesz inną, zmień tu) */
    --hamburger-h: 30px;
    --nav-mobile-h: calc(var(--hamburger-h) + 10px);

    /* Podmień zmienną używaną do offsetu kotwic */
    --nav-height: var(--nav-mobile-h) !important;
  }

  /* Pasek na wysokość hamburgera + 10px */
  .new-nav{
    height: var(--nav-mobile-h) !important;
    min-height: var(--nav-mobile-h) !important;
    padding: 0 !important;
    display: grid !important;
    align-items: center !important;
  }

  /* Wewnętrzny kontener wyrównany do wysokości paska */
  .new-nav__inner{
    height: var(--nav-mobile-h) !important;
    min-height: var(--nav-mobile-h) !important;
    display: grid !important;
    grid-template-columns: 1fr auto; /* logo po lewej, hamburger po prawej */
    align-items: center !important;
    gap: .5rem;
  }

  /* Sam przycisk hamburgera – kwadrat o zadanej wysokości */
  .new-nav__toggle{
    height: var(--hamburger-h) !important;
    width:  var(--hamburger-h) !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
  }

  /* Logo zmniejszamy tak, by mieściło się w pasku */
  .new-nav__brand img,
  .custom-logo{
    max-height: calc(var(--nav-mobile-h) - 5px) !important;
    height: auto !important;
    width: auto !important;
  }

  /* (opcjonalnie) wyrównaj linki w pasku do środka pionowo */
  .new-nav a{
    line-height: var(--nav-mobile-h) !important;
  }
}
/* === ANCHOR OFFSET — BLOK KANONICZNY (desktop + mobile) === */

/* Twoje wartości: zmień tu jeśli trzeba */
:root{
  --anchor-extra-desktop: 16px;  /* zapas nad kotwicą na desktopie */
  --anchor-extra-mobile: 12px;   /* zapas na mobile (782px i mniej) */
}

/* Ustal aktywne --anchor-extra per breakpoint (z !important, by przebić stare bloki) */
@media (min-width: 783px){
  :root{ --anchor-extra: var(--anchor-extra-desktop)!important; }
}
@media (max-width: 782px){
  :root{ --anchor-extra: var(--anchor-extra-mobile) !important; }
}

/* Stosuj offset zarówno dla scrolującego kontenera html, jak i body (różnie bywa) */
html, body{
  scroll-padding-top: calc(
    var(--nav-height, var(--logo-h, var(--site-header-h, 64px))) + var(--anchor-extra, 0px)
  ) !important;
}

/* Fallback per–element (gdy przeglądarka zignoruje scroll-padding) */
[id]{
  scroll-margin-top: calc(
    var(--nav-height, var(--logo-h, var(--site-header-h, 64px))) + var(--anchor-extra, 0px)
  ) !important;
}

/* === ANCHOR OFFSET — FINAL / DESKTOP WINS === */
:root{
  --anchor-extra-desktop: 16px;  /* zapas nad kotwicą na desktopie */
  --anchor-extra-mobile: 6px;   /* zapas na mobile (już masz, zostawiamy) */
}

/* Wymuś poprawny zapas na desktopie */
@media (min-width: 783px){
  :root{ --anchor-extra: var(--anchor-extra-desktop) !important; }
  html, body{
    scroll-padding-top: calc(
      var(--nav-height, var(--logo-h, var(--site-header-h, 64px))) + var(--anchor-extra)
    ) !important;
  }
  [id]{
    scroll-margin-top: calc(
      var(--nav-height, var(--logo-h, var(--site-header-h, 64px))) + var(--anchor-extra)
    ) !important;
  }
}

/* (opcjonalnie) jeżeli używasz paska administratora na desktopie */
@media (min-width: 783px){
  body.admin-bar{ --anchor-extra: calc(var(--anchor-extra-desktop) + 32px) !important; }
}

/* === ANCHOR OFFSET — HARD OVERRIDE (DESKTOP) === */
/* Nie ruszamy Twojego mobile; tylko desktop. */
@media (min-width: 783px){
  :root{
    /* ustaw swój zapas; jeśli masz admin barra, dodaj +32px */
    --anchor-extra-desktop: 16px;
  }

  /* Zsumowany offset (realna wysokość paska + zapas) */
  :root{
    --_navh: var(--nav-height, var(--logo-h, var(--site-header-h, 64px)));
    --_anchor-gap: calc(var(--_navh) + var(--anchor-extra, var(--anchor-extra-desktop)));
  }

  /* 1) Przeglądarki wspierające scroll-padding */
  html, body{
    scroll-padding-top: var(--_anchor-gap) !important;
  }

  /* 2) Fallback per-element (gdy #hash ląduje „pod” stickym) */
  :where([id]){
    scroll-margin-top: var(--_anchor-gap) !important;
  }
}

/* Admin bar na desktopie → dodaj 32px */
@media (min-width: 783px){
  body.admin-bar{ --anchor-extra-desktop: calc(var(--anchor-extra-desktop) + 32px) !important; }
}

/* === ANCHOR OFFSET — HARD OVERRIDE (MOBILE) === */
@media (max-width: 782px){
  :root{
    /* ile zapasu chcesz nad sekcją na mobile */
    --anchor-extra-mobile: 50px;
    /* aktywna zmienna używana w obliczeniach */
    --anchor-extra: var(--anchor-extra-mobile) !important;

    /* jeśli ustalasz wysokość paska z hamburgera, to już masz:
       --nav-height: var(--nav-mobile-h) !important;  (z poprzedniego kroku)
       jeśli nie – zostaw fallbacki: */
    --_navh: var(--nav-height, var(--logo-h, var(--site-header-h, 56px)));
  }

  html, body{
    scroll-padding-top: calc(var(--_navh) + var(--anchor-extra)) !important;
  }
  :where([id]){
    scroll-margin-top: calc(var(--_navh) + var(--anchor-extra)) !important;
  }

  /* Pasek admina WP na mobile ma ~46px */
  body.admin-bar{ --anchor-extra: calc(var(--anchor-extra-mobile) + 46px) !important; }
}

/* Spójne ustawienia dla wszystkich coverów z klasą .cover-std */
.cover-std .wp-block-column.is-text.overlap-left{
  margin-left: calc(var(--overlap, clamp(24px, 5vw, 80px)) * -1);
}
.cover-std .wp-block-column.is-text.overlap-right{
  margin-right: calc(var(--overlap, clamp(24px, 5vw, 80px)) * -1);
}
/* Jeśli któraś okładka dostanie przypadkowy padding/align — zerujemy: */
.cover-std .wp-block-cover__inner-container{ margin: 0; }

/* Stała stopka całkiem wyłączona, gdy hidden */
.site-stick-footer[hidden]{
  display: none !important;
  transform: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
/* Gdy belka jest ukryta → zero rezerwy na dole strony */
body.is-stick-footer-hidden{
  padding-bottom: 0 !important;
  --stick-footer-h: 0 !important;
}
/*--------------
/* Cookie belka: ukryta do czasu "reveal" */
.site-stick-footer[hidden]{
  display: none !important;      /* nie uczestniczy w układzie, nie jest „contentful” */
}

/* Minimalny koszt layoutu po pokazaniu (brak efektów ubocznych) */
.site-stick-footer{
  contain: layout paint;         /* separacja – mniejsze koszty przeliczania */
  will-change: transform;        /* jeśli belka wjeżdża animacją */
}

/* Tekst w jednej linii na małych ekranach (mniej zajętości, mniejsza szansa na LCP) */
.site-stick-footer .cookie-consent span{
  text-wrap: balance;
  max-inline-size: 70ch;         /* ogranicz szerokość bloku tekstu */
}