@charset "UTF-8";
/*
Theme Name: Domki dla owadów
Theme URI: https://domkidlaowadow.pl/
Author: Red Point, Piotr Smolarczyk
Description: Motyw blokowy katalogu domków dla owadów — sekcje wstawiane jako patterny (kategoria „Katalog domków”). Bez Elementora, bez wtyczek do layoutu.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: ddo
*/

/* ==========================================================================
   1. Tokeny
   Mapowane na presety theme.json — zmiana palety w edytorze działa też tutaj.
   ========================================================================== */
:root{
  --paper: var(--wp--preset--color--paper, #f6f4ef);
  --paper-2: #efece4;
  --ink: var(--wp--preset--color--ink, #17150f);
  --soft: var(--wp--preset--color--ink-soft, #5a5852);
  --body: #33302a;
  --bee: var(--wp--preset--color--bee, #e0a21c);
  --bee-dark: #b8840f;
  --bee-text: #9a6c07;
  --band: var(--wp--preset--color--band, #232019);
  --hair: rgba(23,21,15,.14);
  --serif: var(--wp--preset--font-family--head, 'Source Serif 4', Georgia, serif);
  --sans: var(--wp--preset--font-family--body, 'Public Sans', system-ui, sans-serif);
  --w: 1180px;
  --pad: 24px;
}

/* ==========================================================================
   2. Baza
   Reset tylko na elementach, których używamy — bez globalnego *{margin:0},
   żeby nie rozwalić bloków rdzenia ani widoku edytora.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;margin:0;padding:0}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,figcaption{margin:0;padding:0}
img{max-width:100%;height:auto}
a{color:inherit}
section[id],div[id],footer[id]{scroll-margin-top:84px}

.wrap{max-width:var(--w);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}


/* nie łam w środku: „10–15 minut”, „16,5 × 10 × 10 cm” itd. (myślnik sam się łamie) */
.nw{white-space:nowrap}

/* Public Sans ma ujemną parę kerningową „półpauza + spacja" (−5,2 px), przez co po „–” i po „-”
   znika odstęp i wychodzi „gotowe –z wypełnieniem”. Source Serif 4 tej pary nie ma.
   Dlatego w tekście kerning wyłączamy, a w nagłówkach (serif) zostaje normalny. */
body{font-kerning:none}
h1,h2,h3,h4,h5,h6,.hero h1,.sec h2,.phead h1,.legal h2{font-kerning:normal}

/* WP dokłada „block gap” kontenerom flow — w naszych sekcjach odstępy liczymy sami */
.hero,.sec,.cta-band,.foot,.phead,.el{--wp--style--block-gap:0}
.hero > *,.sec > *,.phead > *,.el > *{margin-block-start:0}

/* ==========================================================================
   3. Nagłówek strony (template part: header)
   ========================================================================== */
.head{position:sticky;top:0;z-index:80;background:rgba(246,244,239,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.head__in{max-width:var(--w);margin:0 auto;padding:.85rem var(--pad);display:flex;align-items:center;
  justify-content:space-between;gap:28px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.logo svg{flex:none;display:block}
/* Znak z pliku (assets/logo.svg). Wysokość 44 px, bo to rysunek liniowy — w 34 px linie
   schodzą poniżej 1 px i znak wygląda na rozmazany. Szerokość wynika z proporcji 457:320. */
.logo__mark{flex:none;display:block;height:46px;width:auto}
.logo__t{display:flex;flex-direction:column;line-height:1.05}
.logo__n{font-family:var(--serif);font-weight:700;font-size:1.22rem;letter-spacing:-.025em;text-transform:uppercase;line-height:1.05}

/* ---- Menu: blok „Nawigacja" z rdzenia WP -----------------------------------
   Pozycje edytuje się w edytorze strony (Nawigacja), nie w tym pliku.
   `overlayMenu: never` = menu zawsze widoczne, bez panelu modalnego i bez burgera;
   na telefonie zawija się pod logo. Dlatego neutralizujemy markup responsywny bloku. */
.head .wp-block-navigation{display:flex;align-items:center;font-size:.9rem;font-weight:500}
.head .wp-block-navigation__container{display:flex;align-items:center;gap:26px;margin:0;padding:0;
  list-style:none}
.head .wp-block-navigation-item{position:relative}
.head .wp-block-navigation-item__content{display:inline-block;position:relative;padding:.4rem 0;
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500;font-family:var(--sans)}
.head .wp-block-navigation-item__content:hover{opacity:.7}
.head .wp-block-navigation-item.is-current-menu-item > .wp-block-navigation-item__content::after,
.head .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ink)}
/* panel mobilny bloku nie jest używany — zawsze widoczne menu inline */
.head .wp-block-navigation__responsive-container,
.head .wp-block-navigation__responsive-container.is-menu-open{position:static;inset:auto;
  padding:0;background:none;color:inherit}
.head .wp-block-navigation__responsive-container-open,
.head .wp-block-navigation__responsive-container-close{display:none!important}
.head .wp-block-navigation__responsive-dialog{position:static}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--sans);
  font-size:.86rem;font-weight:600;text-decoration:none;padding:.7rem 1.15rem;border:1px solid transparent;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;line-height:1.2}
.btn--bee{background:var(--bee);color:var(--ink);border-color:var(--bee-dark)}
.btn--bee:hover{background:#d3971a;color:var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--ink:hover{background:#000;color:var(--paper)}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(23,21,15,.4)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(23,21,15,.04)}

/* ==========================================================================
   4. Hero
   ========================================================================== */
.hero{padding:clamp(1.8rem,3.4vw,3rem) 0 clamp(1.4rem,3vw,2.4rem)}
.hero__in{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
  gap:clamp(1.8rem,3.8vw,3.4rem);align-items:center}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.55rem);line-height:.98;
  letter-spacing:-.022em;margin:0 0 1.35rem;text-transform:uppercase}
.hero h1 .dot{color:var(--bee)}
/* lead: krótsza miara (mniej znaków w wierszu) + luźniejsza interlinia = mniej „ściany tekstu" */
.hero__lead{font-size:1.03rem;line-height:1.78;color:var(--body);max-width:26.5rem;margin:0}
.hero__lead b,.hero__lead strong{font-weight:600;color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}
.hero__cta .wp-block-button__link{padding:.9rem 1.45rem;font-size:.9rem}

/* infografika w hero: zdjęcie + piny + dymki + wyprowadzenia */
.fig{position:relative;margin:0}
.fig__stack{position:relative}
.fig img{width:100%;height:auto;display:block}

.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:3;
  width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--sans);font-size:.55rem;font-weight:500;color:var(--ink);
  background:rgba(246,244,239,.97);border:1px solid rgba(23,21,15,.4);
  box-shadow:0 0 0 3px rgba(246,244,239,.75),0 1px 4px rgba(23,21,15,.18)}

.bub{position:absolute;left:var(--x);top:var(--y);z-index:4;display:block;text-decoration:none;
  font-family:var(--sans);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(246,244,239,.97);border:1px solid rgba(23,21,15,.3);padding:.16rem .34rem;
  white-space:nowrap;box-shadow:0 2px 8px rgba(23,21,15,.10);
  transition:background .15s,border-color .15s}
.bub:hover,.bub:focus-visible{background:var(--bee);border-color:var(--bee-dark)}
.bub--r{transform:translate(0,-50%)}
.bub--l{transform:translate(-100%,-50%)}

.leaders{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.ldr,.ldr-halo{fill:none;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:left center}
.ldr--r,.ldr-halo.ldr--r{transform-origin:right center}
.ldr{stroke:rgba(23,21,15,.82);stroke-width:1.6}
.ldr-halo{stroke:rgba(246,244,239,1);stroke-width:6}

/* Wejście infografiki — CSS, ale STARTUJE po wczytaniu zdjęcia.
   Klasę .is-loaded dodaje assets/ddo-ui.js w momencie `load` obrazka (albo od razu,
   gdy jest w cache). Wcześniej animacja biegła od sparsowania arkusza — czyli na pustym
   pudełku, bo zdjęcie jeszcze się ściągało — i kończyła się, zanim było co oglądać.
   `animation-fill-mode: both` trzyma klatkę 0% od pierwszego malowania, więc nie ma
   mignięcia stanu końcowego. Bez JS: brak klasy = brak animacji, ale wszystko widoczne. */
/* Stan oczekiwania: gdy JS wystartował, ale zdjęcie jeszcze się ściąga, etykiety czekają.
   Dzięki temu animacja zawsze zastaje pełny kadr, a nie puste pudełko. Gdy JS nie działa
   (brak .has-js), nic nie jest ukrywane — strona wygląda poprawnie bez animacji. */
.has-js .fig:not(.is-loaded) .pin,
.has-js .fig:not(.is-loaded) .bub,
.has-js .fig:not(.is-loaded) .ldr,
.has-js .fig:not(.is-loaded) .ldr-halo{opacity:0}

.fig.is-loaded .pin{animation:ddo-pin .42s cubic-bezier(.2,.8,.25,1.15) both;animation-delay:var(--d,0s)}
.fig.is-loaded .bub{animation:ddo-fade .34s ease-out both;animation-delay:var(--d,0s)}
.fig.is-loaded .ldr,.fig.is-loaded .ldr-halo{animation:ddo-draw .55s cubic-bezier(.2,.85,.3,1) both;animation-delay:var(--d,0s)}
/* kadr zdjęcia osadza się zoomem 1.04 → 1.0 — ten sam ruch, który był w prototypie */
.fig.is-loaded .fig__stack img{animation:ddo-img .6s cubic-bezier(.2,.7,.25,1) both}

@keyframes ddo-pin{
  from{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes ddo-fade{from{opacity:0}to{opacity:1}}
@keyframes ddo-draw{from{opacity:0;transform:scale(.04)}to{opacity:1;transform:scale(1)}}
@keyframes ddo-img{from{transform:scale(1.04)}to{transform:scale(1)}}

/* Ograniczone animacje: piny i linie tylko przenikają (bez skali).
   Zdjęcie zachowuje 4% osadzenie kadru — to poniżej progu ruchu, który
   powoduje dyskomfort (żadnego parallaxu ani przewijania). */
@media (prefers-reduced-motion: reduce){
  .fig.is-loaded .pin{animation-name:ddo-fade}
  .fig.is-loaded .ldr,.fig.is-loaded .ldr-halo{animation-name:ddo-fade}
}

/* Współrzędne pinezek i dymków — jedno miejsce do korekty po podmianie zdjęcia
   (canvas 1:1; piny siedzą na produkcie, dymki przy krawędziach kadru) */
.p1{--x:33%;--y:14%} .p2{--x:27.5%;--y:46%} .p3{--x:30%;--y:80%}
.p4{--x:75%;--y:47%} .p5{--x:45%;--y:66%}
.b1{--x:11%;--y:5%} .b2{--x:11%;--y:33%} .b3{--x:11%;--y:70%}
.b4{--x:88%;--y:30%} .b5{--x:88%;--y:72%}

/* Telefon: TA SAMA geometria co desktop.
   Współrzędne pinów i dymków są procentowe, a SVG wyprowadzeń ma viewBox 0 0 100 100
   z preserveAspectRatio="none", więc cały układ skaluje się razem z kadrem — nie ma
   drugiego zestawu punktów ani osobnej legendy. Zmienia się tylko typografia. */
@media (max-width:760px){
  .pin{width:1.15rem;height:1.15rem;font-size:.52rem}
  .bub{font-size:.46rem;letter-spacing:.05em;padding:.14rem .28rem}
  /* podpisy odsunięte od krawędzi o 2%, żeby przy 320–390 px nie uciekały za kadr */
  .b1{--x:13%} .b2{--x:13%} .b3{--x:13%}
  .b4{--x:87%} .b5{--x:87%}
}

/* ==========================================================================
   5. Pasek CTA
   ========================================================================== */
.cta-band{background:var(--band);color:var(--paper)}
.cta-band__in{max-width:var(--w);margin:0 auto;padding:1.15rem var(--pad);display:flex;align-items:center;
  justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  /* Poniżej ~980 px pasek zawija się na dwie linie. Domyślne `align-content:normal` (=stretch)
     rozciąga linie na całą wysokość kontenera — dopóki treść wypełnia pasek, tego nie widać, ale przy
     krótszym tekście (albo większym paddingiem) telefon z przyciskiem zjeżdża w dół. `center` trzyma
     zawinięte linie na środku. Desktop (jedna linia) bez zmian: zweryfikowane 1280/1440/1920. */
  align-content:center}
.cta-band p{font-size:.95rem;color:rgba(246,244,239,.9);margin:0}
.cta-band p b,.cta-band p strong{color:#fff;font-weight:600}
.cta-band a.phone,.cta-band .phone{font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;
  color:var(--bee);text-decoration:none}
.cta-band p.phone{margin:0}
.cta-band p.phone a{color:var(--bee);text-decoration:none}
/* Numer telefonu: dana liczbowa, nie etykieta — Public Sans 600 + tabular-nums,
   żeby cyfry były równe i numer trzymał się z przyciskiem obok. */
.cta-band p.phone, .cta-band p.phone a, .cta-band a.phone{font-family:var(--sans);
  font-size:.95rem;font-weight:600;letter-spacing:.005em;font-variant-numeric:tabular-nums}
.cta-band a.phone:hover,.cta-band .phone:hover,.cta-band p.phone a:hover{color:#fff}
.cta-band .grp{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}

/* ==========================================================================
   6. Sekcje
   ========================================================================== */
.sec{padding:clamp(2.4rem,5vw,4.2rem) 0}
.sec--tight{padding:clamp(1.8rem,3vw,2.6rem) 0}
.sec__head{max-width:44rem;margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.sec h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.06;
  letter-spacing:-.018em;margin:.55rem 0 .6rem}
.sec h2:first-child{margin-top:0}
.sec p.sub{font-size:.98rem;color:var(--body);max-width:38rem;margin:0}
.sec .more{display:inline-block;margin-top:1rem}

/* trzy rozmiary */
.sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.size{position:relative;border:1px solid var(--hair);background:#fbfaf6;display:flex;flex-direction:column;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.size:hover{border-color:rgba(23,21,15,.34);transform:translateY(-2px);box-shadow:0 14px 30px rgba(23,21,15,.08)}
.size__ph{position:relative;background:var(--paper-2);aspect-ratio:4/3;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:1.1rem}
.size__ph img{width:var(--s,70%);height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 10px 18px rgba(23,21,15,.12))}
.size__ph--s{--s:58%} .size__ph--m{--s:74%} .size__ph--xl{--s:94%}
.size__tag{position:absolute;left:.7rem;top:.7rem;z-index:2;background:rgba(246,244,239,.94);
  border:1px solid var(--hair);font-family:var(--sans);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.22rem .45rem;margin:0}
.size__tag--best{border-color:var(--bee-dark);color:#8a5f05}
.size__body{padding:1.05rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
/* Wymiary: dana, nie etykieta. tabular-nums, żeby „16,5 × 10 × 10" i „50 × 30 × 10"
   stały w jednej linii pionowej — karty czyta się wtedy jak tabelę. */
.size__dim{font-family:var(--sans);font-size:.88rem;font-weight:600;letter-spacing:.008em;
  font-variant-numeric:tabular-nums;margin:0}
.size__dim em{font-style:normal;font-family:var(--sans);font-weight:700;color:var(--bee-text);
  margin-right:.4rem}
.size__nm{font-family:var(--serif);font-size:1.08rem;font-weight:600;line-height:1.2;margin:-.2rem 0 0}
.size__us{font-size:.85rem;color:var(--body);line-height:1.5;margin:0}
.size__list{list-style:none;font-size:.8rem;color:var(--soft);display:grid;gap:.22rem;margin:.15rem 0 .3rem;
  padding:0}
.size__list li{display:flex;gap:.4rem}
.size__list li::before{content:"·";color:var(--bee);font-weight:700}
.size__body .btn{margin-top:auto;font-size:.74rem;padding:.62rem .8rem;white-space:nowrap}

/* zestaw — trzy karty ze zdjęciami */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:.4rem}
.step3{border-top:2px solid var(--ink);padding-top:.9rem}
.step3--card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  margin-bottom:.8rem;border:1px solid var(--hair);background:var(--paper-2)}
.step3 .n{font-family:var(--sans);font-size:.6rem;color:var(--bee-text);letter-spacing:.1em}
.step3 h3{font-size:1rem;font-weight:600;margin:.35rem 0 .3rem;line-height:1.3}
.step3 p{font-size:.85rem;color:var(--body);line-height:1.55;margin:0}

/* zdjęcia w treści */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3vw,2.8rem);align-items:center}
.photo{margin:0}
.photo img{width:100%;height:auto;display:block;border:1px solid var(--hair);background:var(--paper-2)}
.photo figcaption{font-family:var(--sans);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);margin-top:.55rem}
.more{font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bee-text);
  text-decoration:underline;text-underline-offset:3px}
.more a{color:inherit;text-decoration:inherit}
.more:hover,.more a:hover{color:var(--ink)}

/* dwie kolumny (kontakt: formularz + dane firmy) */
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}

/* ---------- slider „gdzie zawiesić” ----------
   Dwa tryby w jednym:
   • bez JS — kadry leżą jeden pod drugim, wszystkie widoczne (nic nie jest ukryte),
   • z JS (html.has-js) — stos z przenikaniem: aktywny kadr w skali 1, poprzedni gaśnie i lekko się
     powiększa. Strzałki, kropki i klawiatura; kropki generują się z liczby slajdów, więc dorzucenie
     zdjęcia w patternie niczego nie wymaga. */
.ddo-slider{position:relative;margin-top:.6rem;--wp--style--block-gap:0}
.ddo-slider__track{position:relative;--wp--style--block-gap:0}
.ddo-slide{margin:0;--wp--style--block-gap:0}
.ddo-slide + .ddo-slide{margin-top:1rem}
.ddo-slide .wp-block-image{margin:0}
.ddo-slide img{width:100%;height:auto;display:block;border-radius:2px;background:var(--paper-2)}
.ddo-slide figcaption,.ddo-slide__cap{margin-top:.55rem;font-size:.78rem;line-height:1.5;color:var(--soft)}
.ddo-slide figcaption b,.ddo-slide__cap b{color:var(--ink);font-weight:600}

/* stała wysokość + object-fit:cover — kadr zajmuje całą szerokość kolumny (bez „wcięcia” z prawej),
   a przycinanie idzie w niebo/trawę, nie w produkt */
html.has-js .ddo-slider__track{height:clamp(320px,40vw,560px);overflow:hidden;
  border-radius:2px;background:var(--paper-2)}
html.has-js .ddo-slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.035);
  transition:opacity .55s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
html.has-js .ddo-slide.is-active{opacity:1;transform:scale(1);pointer-events:auto}
html.has-js .ddo-slide .wp-block-image{height:100%;margin:0}
html.has-js .ddo-slide img{width:100%;height:100%;object-fit:cover}
html.has-js .ddo-slide figcaption,html.has-js .ddo-slide__cap{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:2rem 1rem .8rem;color:#fff;background:linear-gradient(to top,rgba(12,10,8,.62),rgba(12,10,8,0))}
html.has-js .ddo-slide figcaption b,html.has-js .ddo-slide__cap b{color:#fff}

.ddo-slider__bar{display:flex;align-items:center;justify-content:center;gap:.85rem;margin-top:.8rem}
.ddo-slider__btn{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--hair);
  font-family:inherit;
  background:transparent;color:var(--ink);cursor:pointer;font-size:.95rem;line-height:1;
  display:grid;place-items:center;transition:border-color .2s,background .2s}
.ddo-slider__btn:hover{border-color:var(--ink);background:rgba(23,21,15,.05)}
.ddo-slider__btn:focus-visible{outline:2px solid var(--bee-dark);outline-offset:3px}
.ddo-slider__dots{display:flex;gap:.45rem}
.ddo-slider__dot{width:.5rem;height:.5rem;padding:0;border:0;border-radius:50%;font-family:inherit;
  background:rgba(23,21,15,.22);cursor:pointer;transition:background .25s,transform .25s}
.ddo-slider__dot:hover{background:rgba(23,21,15,.45)}
.ddo-slider__dot[aria-current="true"]{background:var(--bee);transform:scale(1.4)}
@media (max-width:640px){ html.has-js .ddo-slider__track{height:clamp(300px,86vw,460px)} }
@media (prefers-reduced-motion: reduce){
  html.has-js .ddo-slide{transition:opacity .25s linear;transform:none}
  html.has-js .ddo-slide.is-active{transform:none}
}
/* faq */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:1rem 0;display:flex;justify-content:space-between;
  gap:1rem;font-size:.98rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--soft)}
.faq details[open] summary::after{content:"–"}
.faq details > p{font-size:.88rem;line-height:1.6;color:var(--body);padding:0 0 1rem;max-width:52rem;margin:0}
/* core/details owija treść w .wp-block-details__content */
.faq .wp-block-details__content p{font-size:.88rem;line-height:1.6;color:var(--body);
  padding:0 0 1rem;max-width:52rem;margin:0}

/* zastosowania — /oferta/ */
.uses{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem}
.use{border-top:2px solid var(--ink);padding-top:.85rem}
.use h3{font-size:1rem;font-weight:600;margin:0 0 .35rem;line-height:1.3}
.use p{font-size:.88rem;color:var(--body);line-height:1.55;margin:0 0 .55rem}
.use ul{list-style:none;padding:0;margin:0;display:grid;gap:.25rem;font-size:.82rem;color:var(--soft)}
.use li{display:flex;gap:.4rem}
.use li::before{content:"·";color:var(--bee);font-weight:700}

/* formularz kontaktowy — markup generuje inc/formularz.php (shortcode [ddo_formularz]) */
.ddo-form{max-width:38rem}
.notice{margin:0 0 1.2rem;padding:.8rem 1rem;font-size:.9rem;line-height:1.5;
  border-left:3px solid var(--bee);background:rgba(224,162,28,.1)}
.notice--err{border-left-color:#b3261e;background:rgba(179,38,30,.07)}
.notice--ok{border-left-color:#2f6b3a;background:rgba(47,107,58,.09)}
.form{display:grid;gap:1rem}
.form__row{display:grid;gap:1rem}
.form__row--2{grid-template-columns:1fr 1fr}
.field{margin:0;display:grid;gap:.35rem}
.field label{font-size:.85rem;font-weight:500;line-height:1.4}
.field .req,.field .opt{font-family:var(--sans);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);font-weight:400}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{
  width:100%;padding:.65rem .75rem;border:1px solid rgba(23,21,15,.3);background:#fbfaf6;
  font-family:var(--sans);font-size:.92rem;color:var(--ink);border-radius:0}
.field input:focus,.field textarea:focus{border-color:var(--bee-dark);
  outline:2px solid rgba(224,162,28,.35);outline-offset:1px}
.field textarea{resize:vertical;min-height:8rem}
.field.field--check{display:flex;gap:.6rem;align-items:flex-start}
.field--check input{width:1.1rem;height:1.1rem;margin:.15rem 0 0;flex:none}
.field--check label{font-size:.8rem;font-weight:400;color:var(--body)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.2rem}
.form__note{font-family:var(--sans);font-size:.6rem;letter-spacing:.06em;color:var(--soft);margin:0}

/* zamówienie */
.order{background:var(--paper-2);border:1px solid var(--hair);padding:clamp(1.4rem,3vw,2.4rem)}
.order__in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
.order h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:.4rem 0 .5rem}
.order p{font-size:.92rem;color:var(--body);max-width:30rem;margin:0 0 .4rem}
.order__box{display:grid;gap:.5rem;font-size:.88rem}
.order__box .tel{font-family:var(--sans);font-size:1.12rem;font-weight:600;letter-spacing:.005em;
  font-variant-numeric:tabular-nums;text-decoration:none;color:var(--ink)}
.order__box .tel:hover{color:var(--bee-text)}
.order__box small,.order__box .lab{font-family:var(--sans);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft);margin-top:.3rem}
.order__box p{margin:0}
.order__box .tel a{color:inherit;text-decoration:none}
.order__box .btn{margin-top:.4rem;justify-content:center}

/* ==========================================================================
   7. Stopka
   ========================================================================== */
.foot{background:var(--band);color:var(--paper);margin-top:clamp(2rem,4vw,3.4rem);padding:2.6rem 0 2rem}
.foot__cols{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:2rem}
.foot h4{font-family:var(--sans);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(246,244,239,.5);margin:0 0 .75rem;font-weight:400}
.foot a,.foot p{display:block;font-size:.82rem;line-height:1.75;color:rgba(246,244,239,.88);
  text-decoration:none;margin:0}
.foot a:hover{color:var(--bee)}

/* ==========================================================================
   8. Podstrona „Co jest w zestawie”
   ========================================================================== */
.phead{padding:clamp(1.6rem,3vw,2.6rem) 0 clamp(1rem,2vw,1.6rem);border-bottom:1px solid var(--hair)}
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;font-family:var(--sans);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--soft);margin-bottom:1.1rem}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.phead h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4vw,3rem);line-height:1.02;
  letter-spacing:-.022em;margin:.6rem 0 .8rem;text-transform:uppercase;max-width:22ch}
.phead .lead{font-size:1.02rem;line-height:1.6;color:var(--body);max-width:44rem;margin:0}
.toc{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}
.toc a{font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border:1px solid var(--hair);padding:.35rem .6rem;background:#fbfaf6}
.toc a:hover{border-color:var(--ink);background:rgba(224,162,28,.14)}

.el{padding:clamp(2rem,4vw,3.4rem) 0;border-bottom:1px solid var(--hair)}
.el__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.4rem,3.5vw,3rem);align-items:start}
.el__fig{margin:0;background:var(--paper-2);border:1px solid var(--hair);padding:1rem}
.el__fig img{width:auto;max-width:100%;height:auto;display:block;margin:0 auto}
.el__fig figcaption{font-family:var(--sans);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soft);margin-top:.7rem;text-align:center}

.el__fig--opis figcaption{text-transform:none;letter-spacing:0;font-size:.72rem;line-height:1.55;
  max-width:56ch;margin-left:auto;margin-right:auto;color:var(--soft)}
.el__fig--opis figcaption em{font-style:italic;text-transform:none}
.el__fig--opis figcaption a{color:var(--bee-text);text-decoration:underline;text-underline-offset:2px}

/* Rysunek techniczny ma własne, drobne podpisy — na telefonie nie może się skurczyć do nieczytelności.
   Zamiast skalowania w dół pozwalamy przesunąć go w bok (ten sam wzorzec co tabele w dokumentach). */
@media (max-width:760px){
  .el__fig--rysunek{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .el__fig--rysunek img{min-width:640px}
  .el__fig--rysunek figcaption::after{content:" · przesuń w bok";opacity:.7}
}
.el h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.08;
  letter-spacing:-.015em;margin:.5rem 0 .7rem}
.el h2 span{font-family:var(--sans);font-size:.7rem;color:var(--bee-text);letter-spacing:.1em;
  margin-right:.5rem;vertical-align:middle;font-weight:500}
.el p{font-size:.95rem;line-height:1.65;color:var(--body);margin:0 0 .8rem;max-width:38rem}
.el dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:1.1rem 0 0;font-size:.88rem;
  max-width:38rem}
.el dt{font-family:var(--sans);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  padding-top:.25rem;white-space:nowrap}
.el dd{color:var(--ink);line-height:1.55;margin:0}
.note{border-left:3px solid var(--bee);background:rgba(224,162,28,.08);padding:.9rem 1.1rem;
  margin-top:1.1rem;font-size:.88rem;line-height:1.6;color:var(--body);max-width:38rem}
.note b,.note strong{color:var(--ink)}
/* naprzemienny układ: klasa, nie :nth-child — patterny stoją w treści obok innych bloków */
.el--rev .el__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.el--rev .el__fig{order:2}

/* ==========================================================================
   9. Mostek do bloków rdzenia
   Patterny używają bloków natywnych (nagłówek, akapit, przycisk, obraz, details),
   więc klasy motywu trzeba przypiąć do tego, co renderuje WordPress.
   ========================================================================== */
figure.wp-block-image.size__ph,figure.wp-block-image.photo,figure.wp-block-image.el__fig,
figure.wp-block-image.fig__img{margin:0}
/* Figura stojąca POD tekstem (nie w siatce .el__in) potrzebuje oddechu od listy/akapitu nad sobą.
   Specyficzność wyższa niż „figure.wp-block-image.el__fig{margin:0}” — inaczej zero wygrywa. */
.wrap > figure.wp-block-image.el__fig{margin-top:clamp(1.8rem,3.4vw,2.8rem)}
/* obrazy stojące bezpośrednio w treści (np. wpisy bloga) zachowują odstęp */
.wp-block-post-content > figure.wp-block-image{margin:0 0 1.5rem}
.step3--card figure.wp-block-image{margin:0 0 .8rem}
.wp-block-image figcaption{margin:0}

.wp-block-buttons{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
/* hero: większy oddech nad przyciskami (ta reguła musi być PO .wp-block-buttons powyżej) */
.hero .hero__cta{gap:.85rem;margin-top:2.2rem}
.wp-block-button{margin:0}
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.86rem;font-weight:600;line-height:1.2;text-decoration:none;
  padding:.7rem 1.15rem;border:1px solid transparent;border-radius:0;
  transition:background .15s,color .15s,border-color .15s}
.wp-block-button.btn--bee .wp-block-button__link{background:var(--bee);color:var(--ink);border-color:var(--bee-dark)}
.wp-block-button.btn--bee .wp-block-button__link:hover{background:#d3971a;color:var(--ink)}
.wp-block-button.btn--ink .wp-block-button__link{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wp-block-button.btn--ink .wp-block-button__link:hover{background:#000;color:var(--paper)}
.wp-block-button.btn--ghost .wp-block-button__link{background:transparent;color:var(--ink);
  border-color:rgba(23,21,15,.4)}
.wp-block-button.btn--ghost .wp-block-button__link:hover{border-color:var(--ink);background:rgba(23,21,15,.04)}

/* nagłówki i akapity: bloki rdzenia nie mogą wnosić własnych odstępów do sekcji */
.hero h1.wp-block-heading,.sec h2.wp-block-heading,.el h2.wp-block-heading,
.step3 h3.wp-block-heading,.box h3.wp-block-heading{margin-top:0}
.wp-block-details{margin:0}

/* ==========================================================================
   10. Responsywność
   ========================================================================== */
@media (max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:1.6rem}
  .sizes{grid-template-columns:1fr}
  .steps3{grid-template-columns:1fr}
  .duo,.order__in{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr 1fr}
  .el__in,.el--rev .el__in{grid-template-columns:1fr}
  .el--rev .el__fig{order:0}
}
/* na telefonie zdjęcia w sekcji „w terenie” przewijają się palcem (scroll-snap) */
@media (max-width:760px){
  .hero{padding-top:1rem}
  .hero h1{font-size:clamp(1.9rem,9vw,2.6rem)}
  .size__body .btn{font-size:.8rem;padding:.72rem .8rem}
  .cta-band__in{padding:1rem var(--pad)}
  .cta-band p{font-size:.88rem}
  .toc a{font-size:.58rem}
  .el dl{grid-template-columns:1fr;gap:.1rem 0}
  .el dt{padding-top:.55rem}
  .uses{grid-template-columns:1fr}
  .form__row--2{grid-template-columns:1fr}
}
/* Telefon: menu zawija się pod logo (bez burgera i bez panelu) */
@media (max-width:760px){
  /* Większa nazwa i wyraźny oddech między logo a menu (życzenie klienta):
     nazwa .92 → 1.06rem, odstęp między rzędami .55 → 1rem, znak 36 → 38 px. */
  .head__in{flex-wrap:wrap;row-gap:1rem;padding-top:.7rem;padding-bottom:.6rem}
  .head .wp-block-navigation{width:100%}
  .head .wp-block-navigation__container{width:100%;justify-content:flex-start;gap:16px;flex-wrap:wrap}
  .head .wp-block-navigation-item__content{font-size:.82rem;padding:.2rem 0}
  .logo svg{width:30px;height:30px}
  .logo__mark{height:44px}
  .logo__n{font-size:1.32rem;letter-spacing:-.03em;line-height:1.05}
  .logo{gap:14px;align-items:center}
}

/* Pięć pozycji w menu musi się zmieścić w JEDNEJ linii także na 390 px.
   Zmierzone przy 390 px: linki 279 px + 3 odstępy po 16 = 343 px, a dostępne jest 342 px,
   czyli o 1 px za dużo i menu zawijało się do drugiego rzędu (nagłówek 85 → 127 px).
   Zmniejszenie odstępu do 11 px i kroju do .8rem daje zapas ~25 px. */
@media (max-width:430px){
  .head .wp-block-navigation__container{gap:11px}
  .head .wp-block-navigation-item__content{font-size:.8rem}
}
/* Telefony 360–380 px: jeszcze ciaśniej, żeby nie zawijać. Poniżej 360 px menu idzie w dwa rzędy
   (nagłówek 121 px) — czytelność jest ważniejsza od jednej linii. */
@media (max-width:380px){
  .head .wp-block-navigation__container{gap:9px}
  .head .wp-block-navigation-item__content{font-size:.76rem}
}

/* ==========================================================================
   10. Dostępność / druk
   ========================================================================== */
:focus-visible{outline:2px solid var(--bee-dark);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Animacje wejścia infografiki są objęte `prefers-reduced-motion: no-preference`,
     więc tutaj nie ma czego wyłączać — piny, dymki i linie są po prostu widoczne. */
}
@media print{
  .head,.mnav,.cta-band,.foot,.size__body .btn{display:none}
  body{background:#fff}
}

/* Etykiety po rezygnacji z mono (blok na KOŃCU pliku — świadomie, żeby wagi nie były
   nadpisane przez reguły komponentów wyżej) (decyzja: dwa kroje — Source Serif 4 + Public Sans).
   Rozstrzelenie i wersaliki są już w regułach wyżej; tu dokładamy wagę, żeby drobne
   podpisy nie zrobiły się wodniste bez monospace'u. */
.bub,.pin,.size__tag,.step3 .n,.photo figcaption,.el__fig figcaption,.more,
.docs .mono,.field .req,.field .opt,.order__box .lab,.foot h4,.crumbs,.toc a,.el dt,
.el h2 span{font-weight:600}
.form__note,.faq summary::after{font-weight:500}

/* ---------- strony tekstowe: polityka prywatności, regulamin ----------
   Dokumenty czytane liniowo: jedna kolumna ~46rem, wyraźny rytm h2, listy z odstępem.
   Klasy: .legal (kontener), .legal__meta (data/podmiot), .legal__box (streszczenie). */
.legal{max-width:46rem;padding-bottom:2rem}
.legal h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.85rem,3.6vw,2.55rem);
  line-height:1.06;letter-spacing:-.015em;margin:0 0 .9rem}
.legal .lead{max-width:44rem;margin-bottom:1.1rem}
.legal h2{font-family:var(--serif);font-size:clamp(1.12rem,1.9vw,1.38rem);line-height:1.22;
  letter-spacing:-.008em;margin:2.4rem 0 .7rem;padding-top:.2rem}
.legal h2 + p{margin-top:0}
.legal p{font-size:.97rem;line-height:1.74;color:var(--body);margin:0 0 .85rem}
.legal ul,.legal ol{margin:0 0 1.05rem;padding-left:1.35rem;font-size:.97rem;line-height:1.72;color:var(--body)}
.legal ul{list-style:none;padding-left:0}
.legal ul > li{position:relative;padding-left:1.15rem;margin-bottom:.5rem}
.legal ul > li::before{content:"";position:absolute;left:0;top:.6em;width:.42rem;height:.42rem;
  background:var(--bee);border-radius:50%}
.legal ol > li{margin-bottom:.6rem;padding-left:.2rem}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--bee-text);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.legal a:hover{color:var(--bee-dark)}
.legal__meta{font-size:.8rem;line-height:1.6;color:var(--soft);border-bottom:1px solid var(--hair);
  padding-bottom:1rem;margin:0 0 1.7rem}
.legal__box{background:var(--paper-2);border-left:3px solid var(--bee);padding:1rem 1.15rem .9rem;
  margin:0 0 2rem}
.legal__box-t{font-family:var(--sans);font-weight:600;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bee-text);margin:0 0 .55rem}
.legal__box ul{margin:0;font-size:.92rem;line-height:1.6}
.legal__box li{margin-bottom:.35rem}
.legal__box li:last-child{margin-bottom:0}
@media (max-width:600px){
  .legal h2{margin-top:1.9rem}
  .legal p,.legal ul,.legal ol{font-size:.95rem}
}

/* ---------- bajer: owad po 30 s bezruchu (assets/ddo-owad.js) ----------
   Element tworzy skrypt; tutaj tylko wygląd i warstwa. Kursor zostaje prawdziwy (wariant A),
   owad go nie zasłania: 34 px, przesunięty o pół szerokości, pointer-events:none. */
#ddo-owad{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  pointer-events:none;z-index:9998;opacity:0;transition:opacity .35s ease;
  will-change:transform;filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))}
#ddo-owad.on{opacity:1}
#ddo-owad svg{display:block;width:100%;height:100%}
@media (prefers-reduced-motion: reduce){ #ddo-owad{display:none} }
@media print{ #ddo-owad{display:none!important} }

/* ---------------------------------------------------------------- blog: lista wpisów */
.wpisy{display:grid;gap:1.35rem;margin:1.9rem 0 0;max-width:46rem}
.wpis{border-top:1px solid var(--hair);padding-top:1.15rem}
.wpis:first-child{border-top:0;padding-top:0}
.wpis__kat{font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bee-text);margin:0 0 .4rem}
.wpis h2{font-family:var(--serif);font-size:clamp(1.16rem,2vw,1.48rem);line-height:1.2;
  letter-spacing:-.01em;margin:0 0 .5rem}
.wpis h2 a{color:var(--ink);text-decoration:none}
.wpis h2 a:hover{color:var(--bee-dark);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
.wpis > p{font-size:.94rem;line-height:1.7;color:var(--body);margin:0 0 .6rem;max-width:44rem}
.wpis__meta{font-size:.74rem;color:var(--soft);letter-spacing:.02em;margin:0}
.wpis__status{color:var(--bee-text)}
.legal .lead + h2{margin-top:1.8rem}
.legal em.lac{font-style:italic}

/* --- Spacing rdzenia vs siatki (poprawka 2026-11-05) ---
   Rdzeń dokłada rodzeństwu w kontenerze `.is-layout-flow` (każdy wp-block-group) `margin-block-start:1.5rem`.
   W układzie JEDNEJKOLUMNOWYM to sensowne odstępy między sekcjami. W siatce wielokolumnowej przesuwa
   drugą i kolejną kolumnę o 24 px w dół — karta „01" stała wyżej niż „02" i „03" (zgłoszenie klienta).
   Podgląd statyczny tego nie reprodukuje, bo pliki site/*.html nie dostają stylów rdzenia.
   Selektor `.wp-block-group` jest istotny: reguła rdzenia dotyczy tylko grup, więc nic więcej nie ruszamy.
   Dopisane po audycie żywej strony: `.head__in` (menu stało 12 px niżej niż logo) i `.uses`
   (druga kolumna sekcji „Zastosowania" startowała 24 px niżej). */
:is(.hero__in,.head__in,.sizes,.steps3,.split,.duo,.uses,.el__in,.cta-band__in,.wpisy).wp-block-group > *{
  margin-block-start:0}

/* Telefony 320–340 px (iPhone SE 1. gen., duże powiększenie): nazwa przy 1.32rem
   łamie się na dwie linie i nagłówek rośnie do 140 px. Niżej — ale nadal większa
   niż wyjściowe .92rem. */
@media (max-width:340px){
  .logo__mark{height:40px}
  .logo__n{font-size:1.16rem}
  .logo{gap:11px}
}