/* ===================================================================
   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 znak STRAMA linii Bathroom Design (ten sam co na kaflu strony 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:150px;height:22px;margin:0 0 20px;
  background:url("/media/konfigurator/znaki/logo-strama-bd-znak.svg?v=1") 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.
   Od 2026-10-20 to prawdziwy <img class="p-hero-grafika"> w content_page.html
   (z width/height i fetchpriority, więc liczy się jako LCP i ma alt), a nie tło
   CSS plus ukryty PNG z hero_image. Plik wstawiony bezpośrednio ścieżką, bo
   rendition fill-... przyciąłby kadr 16:9 do 1,37:1 i zabrał biel pod nagłówek.
   Pole hero_image w CMS zostaje (og:image). Cała grafika widoczna: contain. */
body.page-slug-panele-lazienkowe #main .p-hero-media{
  box-shadow:none;border:0;min-height:0;height:auto;margin-right:0;background:#fff;align-self:center;
}
/* premium-pages.css daje obrazom hero min-height 440 px i cover, a motion.js
   parallaksę (inline transform): przy grafice kreskowej obie rzeczy ucinały boki */
body.page-slug-panele-lazienkowe #main .p-hero-media .p-hero-grafika{
  display:block;position:static;inset:auto;width:100%;height:auto;min-height:0;max-height:none;
  aspect-ratio:16/9;object-fit:contain;object-position:center;filter:none;opacity:1;
  transform:none !important;
}
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 ------------------------------------------
   Treść Bathroom Design (październik 2026): stats | image_text | decor_explorer
   | technical_table | przegladarka_listew | mounting_options | image_text
   | gallery | pasek_pobran | faq | cta.
   Tła wiązane z TYPEM bloku, nie z pozycją (pozycja przesuwa się przy każdej
   zmianie treści, patrz historia z FAQ na ciemnym tle). */
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 > .block-stats{background:var(--granat)}
body.page-slug-panele-lazienkowe #main .stream-content > .block-technical_table,
body.page-slug-panele-lazienkowe #main .stream-content > .block-mounting_options{background:var(--chlod)}
body.page-slug-panele-lazienkowe #main .stream-content > .block-gallery{background:var(--n50)}
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}
/* 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}
}
@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}
}


/* ==== Przegladarka listew 3D (profile alu Bathroom Design) ==========
   Kopia sekcji 16 z panele-scienne.css (linie 703-889, 2026-10-20) z selektorem
   zawezonym do tej strony: panele-scienne.css nie laduje sie na /panele-lazienkowe/.
   Zmiana tam = powtorzyc tutaj. */
@media (max-width:900px){html:has(body.page-slug-panele-lazienkowe){scroll-snap-type:none}}
/* Zapora na poziomy rozjazd: cokolwiek w srodku strony chwilowo wystaje poza
   ekran (np. plotno WebGL, zanim model-viewer nada mu wlasny rozmiar),
   nie ma prawa rozepchnac strony. `clip` zamiast `hidden`, bo `hidden`
   robi z elementu kontener przewijania i psuje position:sticky. */
@media (max-width:900px){
body.page-slug-panele-lazienkowe #main{overflow-x:clip}
body.page-slug-panele-lazienkowe #main .pl3-media{contain:paint}
}
/* ---- 16. przegladarka_listew: przekroj + model 3D + pasek dekorow ---
   Sekcja na caly ekran ze scroll-snapem, jak konfigurator dekorow. Scena jest
   dwudzielna: po lewej rysunek przekroju (ten sam we wszystkich dekorach), po
   prawej model GLB w wybranym dekorze. Pod spodem POZIOMY pasek dekorow -
   kafle o JEDNYM rozmiarze, ze strzalkami na desktopie. */
body.page-slug-panele-lazienkowe #main .pl3-section{padding:0;background:transparent;scroll-snap-align:start;scroll-margin-top:108px}
/* height, nie min-height: dopiero wtedy flex rozdziela wysokosc i scena dostaje
   reszte. Przy min-height model-viewer bral swoja wysokosc wlasna i sekcja
   rosla ponad ekran. */
body.page-slug-panele-lazienkowe #main .pl3-shell{height:calc(100dvh - 108px);min-height:560px;display:flex;flex-direction:column;justify-content:center;gap:16px;padding-top:18px;padding-bottom:18px}
body.page-slug-panele-lazienkowe #main .pl3-naglowek{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42ch);gap:10px 32px;align-items:end}
body.page-slug-panele-lazienkowe #main .pl3-h{font-family:Poppins,Arial,sans-serif;font-weight:600;color:var(--granat);font-size:clamp(24px,2.5vw,34px);line-height:1.14;letter-spacing:-.018em;margin:0}
body.page-slug-panele-lazienkowe #main .pl3-intro{color:var(--szary);font-size:15.5px;line-height:1.55;margin:0}
body.page-slug-panele-lazienkowe #main .pl3-item{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--linia);padding:16px}
body.page-slug-panele-lazienkowe #main .pl3-listwy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.page-slug-panele-lazienkowe #main .pl3-listwa{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1px solid var(--linia);border-radius:0;cursor:pointer;text-align:left;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
body.page-slug-panele-lazienkowe #main .pl3-listwa-rys{flex:0 0 72px;width:72px;height:26px;object-fit:contain;object-position:left center}
body.page-slug-panele-lazienkowe #main .pl3-listwa-txt{min-width:0}
body.page-slug-panele-lazienkowe #main .pl3-listwa-nazwa{display:block;font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:14px;line-height:1.25;color:var(--granat);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.page-slug-panele-lazienkowe #main .pl3-listwa-kod{display:block;font-size:12px;color:var(--szary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.page-slug-panele-lazienkowe #main .pl3-listwa:hover{border-color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-listwa[aria-pressed="true"]{border-color:var(--nieb);box-shadow:inset 0 -3px 0 var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-scena{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
/* Obraz POZYCJONOWANY na wszystkich czterech krawedziach: procenty wysokosci
   w siatce nie rozwiazywaly sie tak, jak trzeba, i rysunek wychodzil poza
   komorke na waskim ekranie. Przy podanych wszystkich insetach i width/height
   auto element ZASTEPOWANY (img) i tak bierze rozmiar wlasny, wiec szerokosc
   i wysokosc liczymy jawnie z calc, a object-fit dba o proporcje. */
/* Globalne `img{display:block}` wygrywa z regula UA `[hidden]{display:none}`,
   wiec ukryte przekroje trzeba wygasic jawnie - inaczej widac wszystkie trzy. */
body.page-slug-panele-lazienkowe #main .pl3-plakietka{position:absolute;left:0;top:0;z-index:2;padding:8px 14px;font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--szary);pointer-events:none}
/* Okno modelu ma STALA proporcje 16:9 i jest wysrodkowane w tym, co zostalo
   z wysokosci sekcji. Przy oknie rozciaganym na cala reszte wychodzil pas
   3:1, w ktorym listwa 300 mm lezala jak kreska - proporcje nie trzymaly sie
   kupy. */
body.page-slug-panele-lazienkowe #main .pl3-media{position:relative;width:100%;max-width:calc((100% - 0px));aspect-ratio:16/9;max-height:100%;margin:0 auto;background:var(--chlod);overflow:hidden;display:grid;place-items:center}
/* touch-action tez w CSS, nie tylko atrybutem: gest w pionie ma przewijac
   strone, a nie obracac model. */
body.page-slug-panele-lazienkowe #main .pl3-media model-viewer{width:100%;height:100%;background:var(--chlod);--poster-color:transparent;touch-action:pan-y}
body.page-slug-panele-lazienkowe #main .pl3-czekaj{margin:0;padding:0 24px;text-align:center;color:var(--szary);font-size:13.5px}
body.page-slug-panele-lazienkowe #main .pl3-podpis{flex:0 0 auto;margin:0;padding:10px 2px 0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
body.page-slug-panele-lazienkowe #main .pl3-podpis-nazwa{font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:14.5px;color:var(--granat)}
body.page-slug-panele-lazienkowe #main .pl3-podpis-dekor{font-size:13.5px;color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-stopka{flex:0 0 auto}
body.page-slug-panele-lazienkowe #main .pl3-etykieta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 8px;font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--szary)}
body.page-slug-panele-lazienkowe #main .pl3-wskazowka{font-family:Roboto,Arial,sans-serif;font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--szary)}
body.page-slug-panele-lazienkowe #main .pl3-pas{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}
body.page-slug-panele-lazienkowe #main .pl3-strzalka{width:34px;height:34px;display:grid;place-items:center;background:#fff;border:1px solid var(--linia);border-radius:0;color:var(--granat);cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease)}
body.page-slug-panele-lazienkowe #main .pl3-strzalka svg{width:18px;height:18px;display:block}
body.page-slug-panele-lazienkowe #main .pl3-strzalka:hover{border-color:var(--nieb);color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-strzalka[disabled]{opacity:.3;cursor:default;border-color:var(--linia);color:var(--granat)}
body.page-slug-panele-lazienkowe #main .pl3-dekory{display:grid;grid-auto-flow:column;grid-auto-columns:92px;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
body.page-slug-panele-lazienkowe #main .pl3-dekor{display:flex;flex-direction:column;gap:6px;padding:6px;background:#fff;border:1px solid var(--linia);border-radius:0;cursor:pointer;text-align:center;scroll-snap-align:start;transition:border-color .2s var(--ease)}
body.page-slug-panele-lazienkowe #main .pl3-dekor img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
/* Wysokosc = DOKLADNIE dwa wiersze (2 x 13 px). Przy wartosci dobranej na oko
   trzeci wiersz byl przyciety w polowie liter i kafle wygladaly na rozjechane. */
body.page-slug-panele-lazienkowe #main .pl3-dekor span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:26px;font-size:10.5px;line-height:13px;color:var(--szary)}
body.page-slug-panele-lazienkowe #main .pl3-dekor:hover{border-color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-dekor:hover span{color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-dekor[aria-pressed="true"]{border-color:var(--nieb);box-shadow:inset 0 0 0 2px var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-dekor[aria-pressed="true"] span{color:var(--nieb)}
@media (max-width:1100px){
body.page-slug-panele-lazienkowe #main .pl3-naglowek{grid-template-columns:minmax(0,1fr)}
/* Na telefonie rysunek przekroju dostaje STALA wysokosc: przy udziale
   procentowym schodzil do ok. 90 px i opisy wymiarow bylo widac, ale nie
   dalo sie ich odczytac. Model bierze reszte. */
body.page-slug-panele-lazienkowe #main .pl3-scena{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
/* Listwa lezy poziomo, wiec okno tez musi byc szersze niz wyzsze. W kadrze
   zblizonym do kwadratu kamera musi sie odsunac o tyle, zeby zmiescila sie
   DLUGOSC - i model robi sie maly, z pustymi pasami nad i pod. */
body.page-slug-panele-lazienkowe #main .pl3-media{aspect-ratio:16/10;width:100%;height:auto;max-height:100%}
body.page-slug-panele-lazienkowe #main .pl3-dekory{grid-auto-columns:64px;gap:8px}
body.page-slug-panele-lazienkowe #main .pl3-dekor img{width:64px;height:64px}
body.page-slug-panele-lazienkowe #main .pl3-etykieta{margin:0 0 6px}
body.page-slug-panele-lazienkowe #main .pl3-podpis{padding:8px 2px 0}
body.page-slug-panele-lazienkowe #main .pl3-podpis-nazwa{font-size:13px}
body.page-slug-panele-lazienkowe #main .pl3-podpis-dekor{font-size:12.5px}
body.page-slug-panele-lazienkowe #main .pl3-intro{display:none}
body.page-slug-panele-lazienkowe #main .pl3-h{font-size:22px}
}
@media (max-width:720px){
body.page-slug-panele-lazienkowe #main .pl3-section{scroll-margin-top:66px;scroll-snap-align:none}
body.page-slug-panele-lazienkowe #main .pl3-shell{height:auto;min-height:0;gap:12px;padding-top:12px;padding-bottom:12px}
body.page-slug-panele-lazienkowe #main .pl3-item{padding:12px;gap:12px}
body.page-slug-panele-lazienkowe #main .pl3-listwy{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
body.page-slug-panele-lazienkowe #main .pl3-listwa{flex-direction:column;align-items:flex-start;gap:2px;padding:6px 6px 7px}
body.page-slug-panele-lazienkowe #main .pl3-listwa-rys{flex:0 0 auto;width:100%;height:14px}
body.page-slug-panele-lazienkowe #main .pl3-listwa-nazwa{font-size:11px;line-height:1.2;white-space:normal}
body.page-slug-panele-lazienkowe #main .pl3-listwa-kod{font-size:9.5px;line-height:1.2;white-space:normal}
body.page-slug-panele-lazienkowe #main .pl3-listwa{padding:6px 10px;gap:8px}
body.page-slug-panele-lazienkowe #main .pl3-listwa-rys{flex:0 0 54px;width:54px;height:22px}
body.page-slug-panele-lazienkowe #main .pl3-listwa-nazwa{font-size:13px}
body.page-slug-panele-lazienkowe #main .pl3-listwa-kod{font-size:11.5px}
body.page-slug-panele-lazienkowe #main .pl3-dekory{grid-auto-columns:72px;gap:6px}
body.page-slug-panele-lazienkowe #main .pl3-strzalka{width:30px;height:30px}
body.page-slug-panele-lazienkowe #main .pl3-pas{gap:6px}
}
/* maly kadr w lewym gornym rogu: POWIEKSZENIE tekstury wybranego dekoru.
   Model ogladany z dystansu nie pokazuje usloju ani ziarna, a to o nie
   pyta klient przy wyborze dekoru. */
body.page-slug-panele-lazienkowe #main .pl3-mini{position:absolute;left:14px;top:14px;z-index:2;width:clamp(96px,14%,150px);aspect-ratio:1/1;background:#fff;border:1px solid var(--linia);overflow:hidden}
body.page-slug-panele-lazienkowe #main .pl3-mini img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(2.6);transform-origin:center}
/* Na telefonie kwadrat z tekstura musi byc MALY: przy 14% szerokosci zaslanial
   listwe, gdy model zostal obrocony do konca. Blok stoi PO regule ogolnej,
   bo przy rownej specyficznosci liczy sie kolejnosc, a @media samo z siebie
   nie wygrywa. */
@media (max-width:720px){
body.page-slug-panele-lazienkowe #main .pl3-mini{left:8px;top:8px;width:60px}
}
@media (max-width:420px){
body.page-slug-panele-lazienkowe #main .pl3-mini{width:52px}
}
/* pasek dekorow: probki bez ramek-pudelek, nazwa tylko przy wybranym */
/* min-width:0 jest KONIECZNE: element siatki domyslnie nie kurczy sie ponizej
   swojej zawartosci, wiec pasek 21 probek rozpychal cala strone w poziomie
   zamiast przewijac sie w srodku. */
body.page-slug-panele-lazienkowe #main .pl3-dekory{display:grid;grid-auto-flow:column;grid-auto-columns:56px;gap:8px;min-width:0;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-x:contain}
body.page-slug-panele-lazienkowe #main .pl3-dekor{display:block;padding:0;background:none;border:0;border-radius:0;cursor:pointer;scroll-snap-align:start;line-height:0}
body.page-slug-panele-lazienkowe #main .pl3-dekor img{display:block;width:56px;height:56px;object-fit:cover;border:1px solid var(--linia);transition:outline-color .18s var(--ease),transform .18s var(--ease)}
body.page-slug-panele-lazienkowe #main .pl3-dekor span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.page-slug-panele-lazienkowe #main .pl3-dekor:hover img{outline:2px solid var(--nieb);outline-offset:2px}
body.page-slug-panele-lazienkowe #main .pl3-dekor[aria-pressed="true"] img{outline:2px solid var(--nieb);outline-offset:2px;transform:scale(1.04)}
/* ---- pasek dekorow v2: bez systemowego suwaka i bez pudelek ----------
   Systemowy pasek przewijania pod probkami wygladal jak element formularza,
   a strzalki w ramkach ciagnely wzrok mocniej niz same dekory. Teraz:
   - probki sa wieksze i same niosa zaznaczenie (obwodka + uniesienie),
   - konce paska gasna maska, wiec od razu widac, ze jest czego szukac dalej,
   - strzalki plywaja NAD paskiem i pokazuja sie dopiero pod kursorem,
     a na dotyku znikaja calkiem (tam dziala palec),
   - zamiast suwaka jest cienka kreska postepu, liczona w listwy3d.js. */
body.page-slug-panele-lazienkowe #main .pl3-stopka{position:relative}
body.page-slug-panele-lazienkowe #main .pl3-etykieta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 10px;font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--granat)}
body.page-slug-panele-lazienkowe #main .pl3-wskazowka{font-family:Roboto,Arial,sans-serif;font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--szary)}
body.page-slug-panele-lazienkowe #main .pl3-pas{position:relative;display:block;min-width:0;padding-bottom:10px}
body.page-slug-panele-lazienkowe #main .pl3-dekory{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px;min-width:0;scroll-snap-type:x proximity;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--pl3-zanik-l,0px),#000 calc(100% - var(--pl3-zanik-p,0px)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--pl3-zanik-l,0px),#000 calc(100% - var(--pl3-zanik-p,0px)),transparent 100%)}
body.page-slug-panele-lazienkowe #main .pl3-dekory::-webkit-scrollbar{display:none}
body.page-slug-panele-lazienkowe #main .pl3-dekor{flex:0 0 auto;display:block;width:58px;padding:0;background:none;border:0;border-radius:0;cursor:pointer;scroll-snap-align:center;line-height:0}
body.page-slug-panele-lazienkowe #main .pl3-dekor img{display:block;width:58px;height:58px;object-fit:cover;border:0;outline:0;box-shadow:0 0 0 1px var(--linia);transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
body.page-slug-panele-lazienkowe #main .pl3-dekor span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.page-slug-panele-lazienkowe #main .pl3-dekor:hover img{box-shadow:0 0 0 1px var(--nieb);transform:translateY(-2px)}
body.page-slug-panele-lazienkowe #main .pl3-dekor:focus-visible img{box-shadow:0 0 0 2px var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-dekor[aria-pressed="true"] img{box-shadow:0 0 0 2px var(--nieb),0 8px 18px rgba(16,32,52,.16);transform:translateY(-3px)}
/* kreska postepu zamiast systemowego suwaka */
body.page-slug-panele-lazienkowe #main .pl3-pas:after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:2px;background:linear-gradient(90deg,transparent,var(--linia) 12px,var(--linia) calc(100% - 12px),transparent)}
body.page-slug-panele-lazienkowe #main .pl3-pas:before{content:"";position:absolute;bottom:4px;height:2px;z-index:2;background:var(--nieb);opacity:.85;width:var(--pl3-udzial,100%);left:calc(2px + (100% - 4px - var(--pl3-udzial,100%)) * var(--pl3-post,0));transition:left .18s var(--ease)}
body.page-slug-panele-lazienkowe #main .pl3-pas.pl3-bez-suwaka:before,body.page-slug-panele-lazienkowe #main .pl3-pas.pl3-bez-suwaka:after{display:none}
/* strzalki plywaja nad koncami paska */
body.page-slug-panele-lazienkowe #main .pl3-strzalka{position:absolute;top:calc(50% - 7px);transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);border:1px solid var(--linia);box-shadow:0 6px 18px rgba(16,32,52,.14);color:var(--granat);cursor:pointer;opacity:0;transition:opacity .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
body.page-slug-panele-lazienkowe #main .pl3-strzalka svg{width:16px;height:16px;display:block}
body.page-slug-panele-lazienkowe #main .pl3-strzalka[data-pl3d-przewin="-1"]{left:-4px}
body.page-slug-panele-lazienkowe #main .pl3-strzalka[data-pl3d-przewin="1"]{right:-4px}
body.page-slug-panele-lazienkowe #main .pl3-pas:hover .pl3-strzalka,body.page-slug-panele-lazienkowe #main .pl3-strzalka:focus-visible{opacity:1}
body.page-slug-panele-lazienkowe #main .pl3-strzalka:hover{border-color:var(--nieb);color:var(--nieb)}
body.page-slug-panele-lazienkowe #main .pl3-strzalka[disabled]{opacity:0;pointer-events:none}
@media (hover:none){
body.page-slug-panele-lazienkowe #main .pl3-strzalka{display:none}
}
@media (max-width:720px){
body.page-slug-panele-lazienkowe #main .pl3-dekory{gap:8px;padding:4px 2px 10px}
body.page-slug-panele-lazienkowe #main .pl3-dekor{width:52px}
body.page-slug-panele-lazienkowe #main .pl3-dekor img{width:52px;height:52px}
body.page-slug-panele-lazienkowe #main .pl3-dekor[aria-pressed="true"] img{transform:translateY(-2px);box-shadow:0 0 0 2px var(--nieb),0 5px 12px rgba(16,32,52,.16)}
body.page-slug-panele-lazienkowe #main .pl3-pas{padding-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
body.page-slug-panele-lazienkowe #main .pl3-dekor img,body.page-slug-panele-lazienkowe #main .pl3-dekor:hover img,body.page-slug-panele-lazienkowe #main .pl3-dekor[aria-pressed="true"] img{transform:none;transition:none}
body.page-slug-panele-lazienkowe #main .pl3-dekory{scroll-behavior:auto}
}
/* Zakladki listw na telefonie: kafel byl wysoki na trzy wiersze i spychal
   model w dol. Przekroj idzie na gore, nazwa ma dwa wiersze, kod jeden. */
@media (max-width:720px){
body.page-slug-panele-lazienkowe #main .pl3-listwy{gap:6px}
body.page-slug-panele-lazienkowe #main .pl3-listwa{flex-direction:column;align-items:stretch;gap:4px;padding:8px 7px 9px;text-align:left}
body.page-slug-panele-lazienkowe #main .pl3-listwa-rys{flex:0 0 auto;width:100%;height:16px;object-position:center}
body.page-slug-panele-lazienkowe #main .pl3-listwa-nazwa{font-size:11.5px;line-height:1.18;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.page-slug-panele-lazienkowe #main .pl3-listwa-kod{font-size:9.5px;line-height:1.2;margin-top:1px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.page-slug-panele-lazienkowe #main .pl3-listwa[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--nieb)}
}
body.page-slug-panele-lazienkowe #main .pl3-stopka[hidden]{display:none}
/* Zakladki profili: na tej stronie sa DWA profile, a siatka miala trzy kolumny,
   wiec trzecia stala pusta, a dluzsze nazwy (DE „Start-/Endprofil”) ucinaly sie
   wielokropkiem. Teraz tyle kolumn, ile profili, a nazwa ma do dwoch wierszy
   i lamie sie takze wewnatrz dlugiego wyrazu, zamiast znikac pod „…”. */
body.page-slug-panele-lazienkowe #main .pl3-listwy{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
body.page-slug-panele-lazienkowe #main .pl3-listwa-nazwa{white-space:normal;text-overflow:clip;overflow-wrap:anywhere;hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:720px){
body.page-slug-panele-lazienkowe #main .pl3-listwy{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}