/* ===================================================================
   Panele łazienkowe (/panele-lazienkowe/) - kolorystyka i typografia
   wg księgi znaku STRAMA PANELS, wrzesień 2026.

   WSZYSTKIE reguły są zawężone do body.page-slug-panele-lazienkowe,
   bo szablon home/templates/home/content_page.html jest WSPÓLNY dla
   wszystkich podstron produktowych (/panele-scienne/, /elewacje-aluminiowe/,
   /panele-scienne/panele-klasyczne/ itd.). Nic tutaj nie może wyciec
   na inną stronę.

   Arkusz ładowany PO nowa.css, więc zmienne (--nieb, --granat, --chlod,
   --n50, --linia, --szary, --tekst) i wzorce .btn/.etyk są już dostępne.

   Co ten plik naprawia (strona dziedziczyła stary wzorzec "premium"):
   - kremowe tła #F4F1EA / #F0EDE6 / #F4F2EC  -> biel, --chlod, --n50
   - ciemna zieleń-morska #102B34 w liczbach  -> --granat
   - granat #11375F i cyjan #157CA8 z akcentów -> --nieb / --nieb-800
   - nagłówki "Noto Sans Display" 300-520      -> Poppins 600 (h1 700)
   - ramki i pudełka w kremie                  -> hairline --linia
   - .button w starym kroju                    -> wygląd .btn / .btn--kontur
   =================================================================== */

/* ---- 1. Typografia strony ---------------------------------------- */
body.page-slug-panele-lazienkowe #main h1,
body.page-slug-panele-lazienkowe #main h2,
body.page-slug-panele-lazienkowe #main h3,
body.page-slug-panele-lazienkowe #main h4{
  font-family:Poppins,Arial,sans-serif;
  color:var(--granat);
  letter-spacing:-.015em;
  text-wrap:balance;
}
body.page-slug-panele-lazienkowe #main h1{font-weight:700}
body.page-slug-panele-lazienkowe #main h2,
body.page-slug-panele-lazienkowe #main h3,
body.page-slug-panele-lazienkowe #main h4{font-weight:600}
body.page-slug-panele-lazienkowe #main p,
body.page-slug-panele-lazienkowe #main li{font-family:Roboto,Arial,sans-serif}
body.page-slug-panele-lazienkowe #main .eyebrow{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nieb);
}

/* przyciski: wygląd .btn / .btn--kontur z księgi znaku */
body.page-slug-panele-lazienkowe #main .button{
  gap:12px;padding:15px 26px;border:1px solid var(--nieb);background:var(--nieb);color:#fff;
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:15px;letter-spacing:0;
  border-radius:0;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
body.page-slug-panele-lazienkowe #main .button:hover{background:var(--nieb-800);border-color:var(--nieb-800);color:#fff}
body.page-slug-panele-lazienkowe #main .button--ghost{background:transparent;color:var(--granat);border-color:var(--szary)}
body.page-slug-panele-lazienkowe #main .button--ghost:hover{background:var(--granat);color:#fff;border-color:var(--granat)}

/* ---- 2. Okruszki + hero ------------------------------------------ */
body.page-slug-panele-lazienkowe #main .p-subpage-top{background:#fff}
body.page-slug-panele-lazienkowe #main .p-hero{
  background:#fff;border-bottom:1px solid var(--linia);padding:18px 0 76px;
}
body.page-slug-panele-lazienkowe #main .p-breadcrumbs{padding:26px 0 8px;color:var(--szary);font-size:12px}
body.page-slug-panele-lazienkowe #main .p-breadcrumbs a{color:var(--szary)}
body.page-slug-panele-lazienkowe #main .p-breadcrumbs a:hover{color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .p-breadcrumbs [aria-current="page"]{color:var(--granat)}

/* kreskę zastępuje logo marki produktu (Multipanel), wysokość 20 px jak .marka-img na stronie głównej */
body.page-slug-panele-lazienkowe #main .p-hero-rule{display:none}
body.page-slug-panele-lazienkowe #main .p-hero-copy::before{
  content:"";display:block;width:190px;height:20px;margin:0 0 20px;
  background:url("/media/konfigurator/znaki/logo-multipanel.png") left center/contain no-repeat;
}
body.page-slug-panele-lazienkowe #main .p-hero-title{
  font-family:Poppins,Arial,sans-serif;font-weight:700;color:var(--granat);
  font-size:clamp(36px,4.2vw,58px);line-height:1.06;letter-spacing:-.02em;
  margin:10px 0 18px;max-width:16ch;
}
body.page-slug-panele-lazienkowe #main .p-hero-text{
  color:var(--szary);font-size:18px;line-height:1.55;max-width:52ch;
}
body.page-slug-panele-lazienkowe #main .p-hero-actions{margin-top:26px;gap:12px}

/* Nagłówek strony: grafika marki (kreskowana łazienka z kabiną walk-in i ścianą
   w prawdziwej teksturze betonu Grey Concrete) zamiast fotografii z CMS.
   Wstawiona bezpośrednio ścieżką, bo rendition fill-... przyciąłby kadr 16:9
   do 1,37:1 i zabrał biel przeznaczoną pod nagłówek. Pole hero_image w CMS
   zostaje nietknięte, tylko go tu nie renderujemy: powrót = skasowanie tych
   reguł. Ten sam wzorzec działa na /elewacje-aluminiowe/ i /galeria/. */
body.page-slug-panele-lazienkowe #main .p-hero-media{
  box-shadow:none;border:0;min-height:420px;margin-right:0;
  background:#fff url("/media/konfigurator/znaki/naglowki/lazienka.webp?v=1")
    center center / contain no-repeat;
}
body.page-slug-panele-lazienkowe #main .p-hero-media img,
body.page-slug-panele-lazienkowe #main .p-hero-shade{display:none}
body.page-slug-panele-lazienkowe #main .p-hero-media::after,
body.page-slug-panele-lazienkowe #main .page-hero-media::after{display:none}
body.page-slug-panele-lazienkowe #main .p-hero-grid{align-items:center;gap:56px}

/* ---- 3. Rytm tła sekcji ------------------------------------------
   Kolejność bloków w StreamField (baza, wrzesień 2026):
   1 image_text | 2 section_heading | 3 stats | 4 image_text
   5 decor_explorer (ukryty=True, nie renderuje się) | 6 image_text
   7 decor_tiles | 8 section_heading | 9 card_grid | 10 image_text
   11 realization_strip (brak zdjęć w kategorii, nie renderuje się)
   12 faq | 13 faq | 14 cta
   Tła są naprzemienne: biel / --chlod / --n50, liczby i CTA na --granat. */
body.page-slug-panele-lazienkowe #main .stream-content{background:#fff}
body.page-slug-panele-lazienkowe #main .stream-content > *{background:#fff}
body.page-slug-panele-lazienkowe #main .stream-content > *:nth-child(1),
body.page-slug-panele-lazienkowe #main .stream-content > *:nth-child(7),
body.page-slug-panele-lazienkowe #main .stream-content > *:nth-child(10){background:var(--chlod)}
body.page-slug-panele-lazienkowe #main .stream-content > *:nth-child(6){background:var(--n50)}
body.page-slug-panele-lazienkowe #main .stream-content > *:nth-child(3){background:var(--granat)}
/* Granat po numerze pozycji byl krucha regula: doszedl blok z katalogiem Multipanel,
   numeracja przesunela sie o jeden i ciemne tlo trafilo w drugie FAQ, ktore ma kolory
   tekstu dla jasnego tla (pytania --nieb, odpowiedzi --tekst) - nieczytelne.
   Ciemne tlo wiazemy wiec z typem bloku, a nie z jego pozycja. */
body.page-slug-panele-lazienkowe #main .stream-content > .block-cta{background:var(--granat)}
body.page-slug-panele-lazienkowe #main .stream-content > .block-faq{background:#fff}
body.page-slug-panele-lazienkowe #main .stream-content > .block-faq ~ .block-faq{background:var(--chlod)}
/* sekcje wewnątrz bloków są przezroczyste, żeby tło bloku było widoczne */
body.page-slug-panele-lazienkowe #main .stream-content > * > section{background:transparent}

/* ---- 4. image_text: bez kremowych kart --------------------------- */
body.page-slug-panele-lazienkowe #main .h-imgtext-panel::before{display:none}   /* kremowa ramka wewnętrzna */
body.page-slug-panele-lazienkowe #main .h-imgtext-mark{display:none}            /* znak wodny w cieple tle */
body.page-slug-panele-lazienkowe #main .h-imgtext-panel{
  background:transparent;border:0;box-shadow:none;padding:0;color:var(--tekst);
}
body.page-slug-panele-lazienkowe #main .h-imgtext-panel h2{
  font-size:clamp(26px,2.8vw,38px);line-height:1.14;letter-spacing:-.015em;margin:10px 0 16px;max-width:20ch;
}
body.page-slug-panele-lazienkowe #main .h-imgtext-body{color:var(--tekst);font-size:16.5px;line-height:1.62}
body.page-slug-panele-lazienkowe #main .h-imgtext-body p{margin:0 0 14px}
body.page-slug-panele-lazienkowe #main .h-imgtext-body p:last-child{margin-bottom:0}
body.page-slug-panele-lazienkowe #main .h-imgtext-body strong{font-family:Poppins,Arial,sans-serif;font-weight:600;color:var(--granat)}
body.page-slug-panele-lazienkowe #main .h-imgtext-body ul{margin:0 0 14px;padding-left:20px}
body.page-slug-panele-lazienkowe #main .h-imgtext-body li{margin-bottom:7px}
body.page-slug-panele-lazienkowe #main .h-imgtext-body li::marker{color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .h-imgtext-body a{color:var(--nieb);border-bottom:1px solid rgba(0,110,182,.45);transition:border-color .18s}
body.page-slug-panele-lazienkowe #main .h-imgtext-body a:hover{border-color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .h-imgtext-media img{background:var(--chlod)}
body.page-slug-panele-lazienkowe #main .image-text{background:transparent;gap:64px;align-items:center}

/* ---- 5. section_heading ------------------------------------------ */
body.page-slug-panele-lazienkowe #main .section-heading h2{
  font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.018em;max-width:22ch;
}
body.page-slug-panele-lazienkowe #main .section-heading p:not(.eyebrow){
  color:var(--szary);font-size:17px;line-height:1.6;max-width:52ch;
}

/* ---- 6. stats: liczby Poppins 600, kreska --nieb ------------------ */
body.page-slug-panele-lazienkowe #main .stats-section{background:transparent;color:#fff}
body.page-slug-panele-lazienkowe #main .stats-section{overflow:hidden}
body.page-slug-panele-lazienkowe #main .stats-section .h-stats-watermark{opacity:.05;filter:none}
body.page-slug-panele-lazienkowe #main .stats-section .eyebrow{color:#7fc0ea}
body.page-slug-panele-lazienkowe #main .stats-section h2{color:#fff;font-size:clamp(26px,2.8vw,38px)}
body.page-slug-panele-lazienkowe #main .stats-grid{border-top:1px solid rgba(255,255,255,.16)}
body.page-slug-panele-lazienkowe #main .stats-grid article{border-right:1px solid rgba(255,255,255,.12);padding-top:34px}
body.page-slug-panele-lazienkowe #main .stats-grid article:last-child{border-right:0}
body.page-slug-panele-lazienkowe #main .stats-grid article::before{
  content:"";display:block;width:34px;height:2px;background:var(--nieb);margin:0 0 22px;
}
body.page-slug-panele-lazienkowe #main .stats-grid strong{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:clamp(34px,3.6vw,52px);line-height:1.02;
  letter-spacing:-.03em;color:#fff;margin-bottom:14px;display:block;
}
body.page-slug-panele-lazienkowe #main .stats-grid h3{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:12px;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:6px;
}
body.page-slug-panele-lazienkowe #main .stats-grid p{color:#9fb6c9;font-size:13.5px;line-height:1.5}

/* ---- 6b. stats: wspolna siatka liczb i opisow --------------------
   Wartosci w tym bloku maja skrajnie rozne dlugosci ("0" obok wymiaru
   panelu), wiec dluga wartosc lamala sie na dwie linie i spychala swoj
   opis o cale 53 px nizej niz pozostale. Kreska, liczba, opis i nota
   siedza teraz w tych samych wierszach we wszystkich kolumnach
   (grid-template-rows:subgrid), liczby lapia wspolna linie bazowa
   (align-self:end), a opisy startuja z gory. Nawet gdy ktoras wartosc
   sie zawinie, opisy zostaja rownane. */
body.page-slug-panele-lazienkowe #main .stats-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;row-gap:0;
}
body.page-slug-panele-lazienkowe #main .stats-grid article{
  display:grid;grid-template-rows:subgrid;grid-row:span 4;
  padding:34px 30px 18px 30px;
}
/* pierwsza kolumna jest przyklejona do lewej krawedzi siatki (tak jak
   naglowek sekcji), wiec jej tekst dostaje te sama miare co reszta
   recznie - inaczej lamalby sie w innych miejscach niz sasiedzi. */
body.page-slug-panele-lazienkowe #main .stats-grid article:nth-child(4n+1){padding-left:0}
body.page-slug-panele-lazienkowe #main .stats-grid article:nth-child(4n+1) > *{max-width:calc(100% - 30px)}
body.page-slug-panele-lazienkowe #main .stats-grid article:nth-child(4n){border-right:0}
body.page-slug-panele-lazienkowe #main .stats-grid article::before{align-self:start;margin:0 0 20px}
body.page-slug-panele-lazienkowe #main .stats-grid strong{
  font-size:clamp(30px,2.9vw,46px);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  align-self:end;margin-bottom:16px;
}
body.page-slug-panele-lazienkowe #main .stats-grid h3{align-self:start;margin-bottom:0}
body.page-slug-panele-lazienkowe #main .stats-grid p{align-self:start;margin-top:8px}

/* ---- 7. decor_tiles: płaskie kafle, hairline --------------------- */
body.page-slug-panele-lazienkowe #main .dt-section{background:transparent}
body.page-slug-panele-lazienkowe #main .dt-head h2{font-size:clamp(26px,2.8vw,38px);line-height:1.14;color:var(--granat)}
body.page-slug-panele-lazienkowe #main .dt-lede{color:var(--szary);font-size:16.5px;line-height:1.6;max-width:60ch}
body.page-slug-panele-lazienkowe #main .dt-tile{
  background:#fff;border:1px solid var(--linia);box-shadow:none;border-radius:0;
  transition:border-color .22s var(--ease);
}
body.page-slug-panele-lazienkowe #main .dt-tile:hover{border-color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .dt-media,
body.page-slug-panele-lazienkowe #main .dt-img--brak{background:var(--chlod);overflow:hidden}
body.page-slug-panele-lazienkowe #main .dt-img{background:var(--chlod);transition:transform .5s var(--ease)}
body.page-slug-panele-lazienkowe #main .dt-tile:hover .dt-img{transform:scale(1.04)}
body.page-slug-panele-lazienkowe #main .dt-zoom{background:rgba(23,27,43,.55);color:#fff;border-radius:0}
body.page-slug-panele-lazienkowe #main .dt-body h3{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:17px;line-height:1.25;
  color:var(--granat);letter-spacing:-.005em;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
  text-decoration-thickness:1px;transition:text-decoration-color .22s var(--ease),color .22s var(--ease);
}
body.page-slug-panele-lazienkowe #main .dt-tile:hover .dt-body h3{color:var(--nieb);text-decoration-color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .dt-meta{
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--szary);
}
body.page-slug-panele-lazienkowe #main .dt-code{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:11px;letter-spacing:.1em;color:var(--nieb);
}
body.page-slug-panele-lazienkowe #main .dt-text{color:var(--tekst);font-size:14.5px;line-height:1.5}
body.page-slug-panele-lazienkowe #main .dt-formats{color:var(--szary);font-size:12.5px}
body.page-slug-panele-lazienkowe #main .dt-note{color:var(--szary);font-size:13px;line-height:1.55}

/* ---- 8. card_grid: wiersze z hairline ---------------------------- */
body.page-slug-panele-lazienkowe #main .c-index-section{background:transparent}
body.page-slug-panele-lazienkowe #main .c-index-h{font-size:clamp(26px,2.8vw,38px);line-height:1.14}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-index{border-top:1px solid var(--linia)}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row{border-bottom:1px solid var(--linia);background:transparent}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row-title{
  font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:clamp(22px,2.2vw,30px);
  line-height:1.16;letter-spacing:-.018em;color:var(--granat);
}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row-title a{
  color:inherit;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;
  text-decoration-thickness:1px;transition:text-decoration-color .22s var(--ease),color .22s var(--ease);
}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row:hover .c-row-title,
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row:hover .c-row-title a{
  color:var(--nieb);text-decoration-color:var(--nieb);
}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row-text{color:var(--szary);font-size:15.5px;line-height:1.6}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-num,
body.page-slug-panele-lazienkowe #main .block-card_grid .c-num-folio,
body.page-slug-panele-lazienkowe #main .block-card_grid .c-num-code{
  font-family:Poppins,Arial,sans-serif;font-weight:600;color:var(--nieb);letter-spacing:.08em;
}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-num-folio{color:#CCE2F0}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row:hover .c-num-folio{color:#99C5E2}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row-media{overflow:hidden;background:var(--chlod)}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row-media img{transition:transform .5s var(--ease)}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row:hover .c-row-media img{transform:scale(1.04)}
body.page-slug-panele-lazienkowe #main .block-card_grid .c-row-scrim{background:linear-gradient(0deg,rgba(23,27,43,.55),transparent)}

/* ---- 9. faq: hairline, znak + / - w --nieb, bez pudełek ---------- */
body.page-slug-panele-lazienkowe #main .faq-section{background:transparent}
body.page-slug-panele-lazienkowe #main .faq-section h2{font-size:clamp(26px,2.8vw,38px);line-height:1.14}
body.page-slug-panele-lazienkowe #main .faq-list{border-top:1px solid var(--linia)}
body.page-slug-panele-lazienkowe #main .faq-list details{
  border-bottom:1px solid var(--linia);background:transparent;padding:0;box-shadow:none;
}
body.page-slug-panele-lazienkowe #main .faq-list summary{
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:18px;line-height:1.35;
  letter-spacing:-.005em;color:var(--granat);padding:20px 0;gap:24px;
  transition:color .18s var(--ease);
}
body.page-slug-panele-lazienkowe #main .faq-list summary:hover{color:var(--nieb)}
/* znak w szablonie to "＋"; podmieniamy go na + / - w kolorze marki */
body.page-slug-panele-lazienkowe #main .faq-list summary span{
  font-size:0;line-height:0;color:var(--nieb);transform:none;flex:none;align-self:center;
}
body.page-slug-panele-lazienkowe #main .faq-list summary span::before{
  content:"+";font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:24px;line-height:1;color:var(--nieb);
}
body.page-slug-panele-lazienkowe #main .faq-list details[open] summary{color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .faq-list details[open] summary span{transform:none}
body.page-slug-panele-lazienkowe #main .faq-list details[open] summary span::before{content:"\2212"} /* minus */
body.page-slug-panele-lazienkowe #main .faq-list details > div{
  color:var(--tekst);font-size:15.5px;line-height:1.6;padding:0 56px 22px 0;
}
body.page-slug-panele-lazienkowe #main .faq-list details > div a{color:var(--nieb)}
/* section_heading + card_grid czytają się jak jedna sekcja */
body.page-slug-panele-lazienkowe #main .stream-content > *:nth-child(9) .c-index-section{padding-top:0}
/* dwa bloki FAQ pod sobą czytają się jak jedna sekcja: mniejszy odstęp między nimi */
body.page-slug-panele-lazienkowe #main .stream-content > *:nth-child(13) .faq-section{padding-top:0}

/* ---- 10. cta: granat, biały tekst, przycisk .btn--jasny ---------- */
body.page-slug-panele-lazienkowe #main .cta-section{background:transparent;padding:0}
body.page-slug-panele-lazienkowe #main .cta-panel{
  background:var(--granat);box-shadow:none;border-radius:0;color:#fff;
}
body.page-slug-panele-lazienkowe #main .cta-panel .eyebrow{color:#7fc0ea}
body.page-slug-panele-lazienkowe #main .cta-panel h2{
  font-family:Poppins,Arial,sans-serif;font-weight:600;color:#fff;
  font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.02em;margin:8px 0 14px;max-width:18ch;
}
body.page-slug-panele-lazienkowe #main .cta-panel p:not(.eyebrow){color:#c9d3dc;font-size:17px;line-height:1.55;max-width:46ch}
body.page-slug-panele-lazienkowe #main .cta-panel .button{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.55);margin-top:24px;
}
body.page-slug-panele-lazienkowe #main .cta-panel .button:hover{background:#fff;color:var(--granat);border-color:#fff}
/* przesłona nad zdjęciem w CTA była w starym granacie #0B2540 - przestawiona na --granat,
   z lekkim rozjaśnieniem po prawej, żeby zdjęcie w ogóle było widać */
body.page-slug-panele-lazienkowe #main .cta-panel::after{
  background:linear-gradient(100deg,var(--granat) 18%,rgba(23,27,43,.72) 54%,rgba(23,27,43,.28) 100%);
}
body.page-slug-panele-lazienkowe #main .cta-panel-media img{opacity:1;filter:grayscale(.2)}

/* ---- 11. realization_strip ---------------------------------------
   Dziś blok nie renderuje nic (w galerii nie ma jeszcze zdjęć w kategorii
   "lazienka"), reguły są gotowe na moment, gdy zdjęcia dojdą. */
body.page-slug-panele-lazienkowe #main .rz-strip,
body.page-slug-panele-lazienkowe #main .rz-invite{background:transparent}
body.page-slug-panele-lazienkowe #main .rz-head h2{font-size:clamp(26px,2.8vw,38px);line-height:1.14}
body.page-slug-panele-lazienkowe #main .rz-lede{color:var(--szary);font-size:16.5px;line-height:1.6}
body.page-slug-panele-lazienkowe #main .rz-rail{gap:2px;background:var(--linia)}
body.page-slug-panele-lazienkowe #main .rz-cell{position:relative;background:#fff;overflow:hidden;margin:0}
body.page-slug-panele-lazienkowe #main .rz-cell img{transition:transform .45s var(--ease)}
body.page-slug-panele-lazienkowe #main .rz-cell:hover img{transform:scale(1.05)}
body.page-slug-panele-lazienkowe #main .rz-cell figcaption,
body.page-slug-panele-lazienkowe #main .rz-cell .rz-podpis{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;color:#fff;
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:13px;
  background:linear-gradient(0deg,rgba(23,27,43,.8),transparent);
}
body.page-slug-panele-lazienkowe #main .rz-more,
body.page-slug-panele-lazienkowe #main .rz-invite-link{
  font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:15px;color:var(--nieb);
  border-bottom:1px solid transparent;transition:border-color .18s;
}
body.page-slug-panele-lazienkowe #main .rz-more:hover,
body.page-slug-panele-lazienkowe #main .rz-invite-link:hover{border-color:var(--nieb)}

/* ---- 12. decor_explorer (.kf-) -----------------------------------
   Moduł przeglądarki dekorów ma zaakceptowany przez właściciela układ,
   więc dotykamy wyłącznie koloru akcentu, żeby nie odstawał od księgi. */
body.page-slug-panele-lazienkowe #main .kf-sekcja .eyebrow{color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .kf-filtry button[aria-pressed="true"]{
  background:var(--nieb);border-color:var(--nieb);color:#fff;
}

/* ---- 13. Responsywność ------------------------------------------- */
@media (max-width:1100px){
  body.page-slug-panele-lazienkowe #main .p-hero{padding:12px 0 56px}
  body.page-slug-panele-lazienkowe #main .image-text{gap:36px}
  body.page-slug-panele-lazienkowe #main .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
  body.page-slug-panele-lazienkowe #main .stats-grid article{border-right:0;padding:32px 0 20px}
  body.page-slug-panele-lazienkowe #main .stats-grid article:nth-child(4n+1) > *{max-width:none}
  /* drugi rzad dostaje wlasna kreske, zeby rytm byl taki sam jak u gory */
  body.page-slug-panele-lazienkowe #main .stats-grid article:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:1000px){
  /* premium-pages.css od 1000px składa hero w kolumnę i zeruje odstępy;
     grafika idzie pod tekst na pełną szerokość, cała widoczna (contain) */
  body.page-slug-panele-lazienkowe #main .p-hero-grid{gap:0}
  body.page-slug-panele-lazienkowe #main .p-hero-media{
    min-height:0;aspect-ratio:16/9;background-size:contain;background-position:center center;
  }
}
@media (max-width:820px){
  body.page-slug-panele-lazienkowe #main .faq-list details > div{padding-right:0}
  body.page-slug-panele-lazienkowe #main .h-imgtext-panel h2{max-width:none}
}
@media (max-width:720px){
  body.page-slug-panele-lazienkowe #main .p-hero{padding:8px 0 44px}
  body.page-slug-panele-lazienkowe #main .p-hero-copy::before{width:152px;height:16px;margin-bottom:16px}
  body.page-slug-panele-lazienkowe #main .p-hero-title{font-size:clamp(30px,8.4vw,40px);max-width:none}
  body.page-slug-panele-lazienkowe #main .p-hero-text{font-size:16.5px}
  body.page-slug-panele-lazienkowe #main .p-hero-actions .button{flex:1 1 100%;justify-content:center}
  body.page-slug-panele-lazienkowe #main .h-imgtext-panel{padding:0}
  body.page-slug-panele-lazienkowe #main .h-imgtext-body{font-size:16px}
  body.page-slug-panele-lazienkowe #main .stats-grid article::before{margin-bottom:14px}
  body.page-slug-panele-lazienkowe #main .stats-grid strong{font-size:34px;margin-bottom:12px}
  body.page-slug-panele-lazienkowe #main .faq-list summary{font-size:16.5px;gap:16px;padding:16px 0}
  body.page-slug-panele-lazienkowe #main .faq-list summary span::before{font-size:22px}
  body.page-slug-panele-lazienkowe #main .cta-panel .button{width:100%;justify-content:center}
  /* na waskim ekranie tekst CTA lezy na zdjeciu - przeslona musi byc niemal pelna */
  body.page-slug-panele-lazienkowe #main .cta-panel::after{background:linear-gradient(180deg,var(--granat) 55%,rgba(23,27,43,.9) 100%)}
}
@media (max-width:560px){
  /* na telefonie jedna kolumna: przy dwoch kafelki mialy po 175 px i opisy
     lamaly sie na cztery linie, a rzedy roznily sie wysokoscia */
  body.page-slug-panele-lazienkowe #main .stats-grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  body.page-slug-panele-lazienkowe #main .stats-grid article{padding:26px 0 22px}
  body.page-slug-panele-lazienkowe #main .stats-grid article:first-child{border-top:0}
  body.page-slug-panele-lazienkowe #main .stats-grid article + article{border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:420px){
  body.page-slug-panele-lazienkowe #main .dt-body h3{font-size:16px}
  body.page-slug-panele-lazienkowe #main .p-breadcrumbs{overflow:auto;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  body.page-slug-panele-lazienkowe #main .dt-img,
  body.page-slug-panele-lazienkowe #main .c-row-media img,
  body.page-slug-panele-lazienkowe #main .rz-cell img{transition:none}
  body.page-slug-panele-lazienkowe #main .dt-tile:hover .dt-img,
  body.page-slug-panele-lazienkowe #main .c-row:hover .c-row-media img,
  body.page-slug-panele-lazienkowe #main .rz-cell:hover img{transform:none}
}