/* Bergo - poprawki z paczki 2026.09.16 (tura 1)
   Plik wlasny, ladowany po arkuszach Webflow. Kazda regula opisana. */

/* A3 - breadcrumby znikaja z interfejsu; znaczniki zostaja w HTML */
.breadcrumb-bar { display: none !important; }

/* A2 - blokada przeciagania obrazow (Chrome, Safari, Edge)
   Firefox obsluzony przez js/bk-poprawki.js */
img, picture, svg, video, .product1_image, .bk-gal img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
}

/* C2 - szara nakladka na header video: 10 % zamiast 70 % */
.background_video-overlay { opacity: .1 !important; }

/* G5 - pole wyszukiwania w przegladarce zlaczek: lupka zamiast podpowiedzi tekstowej */
.bk-search {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 1.15rem 1.15rem;
  padding-left: 2.6rem !important;
}

/* B3 - wyrownanie ikonek w kafelkach oferty.
   Przyczyna: .rt-no-underline mial justify-content:space-between przy stalej
   wysokosci, wiec akapit 3-wierszowy podjezdzal do gory i rozjezdzal sie
   z napisem "dowiedz sie wiecej". Teraz akapit zawsze zaczyna sie 20 px pod
   tytulem, czyli dokladnie tam, gdzie zaczyna sie tekst przy ikonce. */
.rt-home-four-three-box-data .rt-no-underline {
  justify-content: flex-start !important;
  row-gap: 20px !important;
  grid-row-gap: 20px !important;
}
/* wyzszy blok tekstowy, zeby zdjecie w kazdym kaflu zaczynalo sie na tej samej
   wysokosci takze przy akapicie 3-wierszowym */
.rt-home-four-three-box-data { min-height: 9.5rem !important; }

/* G8 - tytuly modeli w kartach katalogu.
   Przy 16 px nazwy lamaly sie na 1, 2 lub 3 wiersze (15 kart na 142 mialo
   trzy wiersze) i rzedy siatki byly nierowne. Przy 14 px/20 px zadna
   nazwa nie przekracza dwoch wierszy, a staly min-height wyrownuje wszystkie. */
.product1_title-wrapper > * {
  font-size: 14px !important;
  line-height: 20px !important;
}
.product1_title-wrapper { min-height: 40px; }

/* B3 c.d. - wiecej miejsca na tekst w kaflu oferty (zgloszenie 21.09).
   Kolumna ze strzalka miala 104 px przy stalej proporcji 2.5fr/1fr, a jej
   najszerszy napis ("more coming soon") potrzebuje 92 px. Po zwezeniu do
   96 px i zmniejszeniu odstepu z 16 na 12 px tekst dostaje 272 zamiast 260 px
   i angielski opis "Fittings" miesci sie w trzech wierszach zamiast czterech.
   Dzieki temu blok tekstowy wszedzie miesci sie w 9,5rem, wiec zdjecia
   zaczynaja sie i koncza na tej samej wysokosci (152 px od gory, kafel 440 px).
   Na telefonach zostaje uklad wyjsciowy - tam kafle sa jeden pod drugim. */
@media (min-width: 768px) {
  .rt-financial-planning-block {
    grid-template-columns: 1fr 96px !important;
    column-gap: 12px !important;
    grid-column-gap: 12px !important;
  }
}

/* D1-D4 - materialy do pobrania (logika w js/bk-poprawki.js) */
.bk-dl-produkt .res-dl-controls { display: none !important; }
.res-dl-card { position: relative; padding-right: 4.25rem !important; }
.bk-dl-jezyk {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid #0B1020;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0B1020;
  background: #fff;
  pointer-events: none;
}

/* H - standaryzacja obramowan (paczka 2026.09.16).
   Wzorzec = akordeon FAQ TAK JAK JEST WYRENDEROWANY: regula inline w masterach
   `.faq4_accordion{box-shadow:0 12px 32px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06)}`,
   bez ramki, biala karta. (23.09: wczesniej bledna wartosc 0 10px 80px #e3e3e3
   z arkusza Webflow - to cien kafli, nie FAQ.) */
:root { --bk-cien: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); }

/* kafle oferty i karty krokow montazu mialy cien Webflow 0 10px 80px #e3e3e3 - tez na wzorzec FAQ */
.rt-home-four-three-box-one,
.featured_item { box-shadow: var(--bk-cien) !important; }

/* panel rysunkow technicznych - byla linia 1px #DDE1E6 i twardy cien */
.dim-panel {
  border: 0 !important;
  box-shadow: var(--bk-cien) !important;
}
/* karty materialow do pobrania i pasek przegladarki zlaczek - byl cien 0 2px 5px */
.res-dl-card,
.bk-bar,
.product1_item-link {
  box-shadow: var(--bk-cien) !important;
}
.res-dl-card:hover { transform: none !important; }

/* sekcja krokow montazu QLOK: znika szare tlo wokol kart, karty stoja
   bezposrednio na stronie jak FAQ */
.featured_list {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* "okienka" z obrazkami krokow: obraz wypelnia okienko do krawedzi.
   Zrodla to kwadraty 2500x2500 z przezroczystym tlem, w ktorych produkt
   dochodzi do krawedzi kadru - dlatego okienko tez jest kwadratem
   (zadne przyciecie), a szare tlo okienka prześwituje przez przezroczystosc. */
.step-card_media {
  padding: 0 !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.step-by-step_image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
}

/* E1 + I - placeholder video z playerem (paczka 2026.09.16).
   Studzienki: pod panelem rysunkow OUT. QLOK: pod animacja przewijana.
   PN10: w miejscu dawnego napisu "miejsce na video". Wyciszone, w petli,
   z kontrolkami - zgodnie z decyzja Sebastiana z 21.09. */
.bk-video {
  max-width: 80rem;
  margin: 0 auto 4rem;
  padding: 0 5%;
}
.bk-video_player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f4f4f5;
  border-radius: 1.5rem;
  box-shadow: var(--bk-cien);
}
/* .dim-panel ma margin-bottom 4rem - video pod nim dostaje mniejszy odstep od gory */
.dim-panel + .bk-video { margin-top: -1rem; padding: 0; }
/* stary napis-placeholder na animacji przewijanej: znika (animacja dziala,
   napis mylil klienta - zrzuty image11/image12) */
.scrub-placeholder { display: none !important; }

/* F - sekcja Podstawy po przebudowie (paczka 2026.09.16).
   Jedna sekcja zamiast dwoch, 9 ujec w animacji, plakietki "W zestawie 2/3"
   przypiete do ujec 1 i 3, panel czterech akcesoriow z renderami. */

/* 23.09: klient nie chce ramki wokol animacji - foty przezroczyste, bez tla i cienia.
   Klikniecie w obraz przelacza ujecie (js/bk-poprawki.js). */
.bk-anim_maska { cursor: pointer; }

/* plakietki "W zestawie 2/3": grafiki od Sebastiana 23.09 (images/pl-w-zestawie-2.svg, -3.svg,
   EN przez GRAFIKI_EN w wersje.py), 448x480 jak plakietki z katalogu. */
.bk-anim_plakietka {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 180px;
  max-width: 34%;
  height: auto;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 2;
}
.bk-anim_plakietka.is-aktywna { opacity: 1; }

/* panel akcesoriow: rendery zamiast rysunkow wektorowych, ta sama ramka co rysunki techniczne */
.bk-dim-akcesoria { margin-top: 0; }
.bk-dim-akcesoria .bk-dim-render {
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-height: 260px;
}

/* E2 + E3 (wersja 23.09) - komponent studzienki: przenikanie otworz/zamknij,
   wysokosc wg obrazu, lapka i kolory w jednej linii tuz pod obrazem.
   Skrypt na stronie dopina wlasny <style id="sz-style"> PO tym arkuszu, wiec
   kazda regula tutaj ma o jeden poziom wyzsza specyficznosc (prefiks body). */

/* wysokosc komponentu = obraz + wiersz 3,5 rem (bylo min-height 38-40 rem -> pusta luka) */
body .out_component {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 3.5rem !important;
  position: relative !important;
}
/* obraz "zamkniete" plynie w dokumencie i wyznacza wysokosc; "otwarte" lezy na nim */
body .out_component .studzienka-close,
body .out_component .studzienka-open {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  transition: opacity .45s ease;
}
body .out_component .studzienka-close { position: relative !important; opacity: 1; }
body .out_component .studzienka-open {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: calc(100% - 3.5rem) !important;
  opacity: 0;
}
/* efekt przejscia (efekt_przejscia.mp4): jedno ujecie gasnie do bieli, drugie sie wylania.
   Skrypt strony przy is-open daje .studzienka-close display:none!important
   (specyficznosc 0,3,0) - stad tu 0,3,1, zeby obraz zostal w ukladzie i mogl zgasnac. */
body .out_component.is-open .studzienka-close { display: block !important; opacity: 0; }
body .out_component.is-open .studzienka-open  { display: block !important; opacity: 1; }

/* lapka: lewy dolny rog, bez niebieskiego kolka */
body .out_component .click-open_wrapper {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  height: 3.5rem;
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  z-index: 3;
}
body .out_component .click-open_wrapper .icon-embed-small {
  order: 0 !important;
  width: 2rem !important; min-width: 2rem !important;
  height: 2rem !important; min-height: 2rem !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body .out_component .click-open_wrapper .icon-embed-small svg {
  width: 2rem !important; height: 2rem !important; color: #0B1020 !important;
}
body .out_component .click-open_wrapper .icon-embed-small svg path {
  fill: none !important; stroke: #0B1020 !important;
}
body .out_component .click-open_wrapper > div:not(.icon-embed-small) {
  font-size: 1rem; font-weight: 500; color: #0B1020;
}

/* heksagony kolorow: ten sam wiersz, prawa strona; menu jest poza komponentem,
   wiec nachodzi na jego dolne 3,5 rem ujemnym marginesem */
body .tabs-menu.w-tab-menu {
  height: 3.5rem;
  margin-top: -3.5rem !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: .35rem !important;
  padding-right: .25rem;
  position: relative;
  z-index: 4;
  pointer-events: none;
}
body .tabs-menu.w-tab-menu .tab-link { pointer-events: auto; padding: .25rem !important; margin: 0 !important; }
body .tabs-menu.w-tab-menu::before {
  content: "Kolory pokryw:";
  font-size: 1rem; font-weight: 500; color: #0B1020; margin-right: .5rem;
}
html[lang="en"] body .tabs-menu.w-tab-menu::before { content: "Lid colors:"; }
body .studzienka-green_colour,
body .studzienka-dark_colour { width: 1.7rem !important; height: 1.5rem !important; }

/* plakietka heksagonowa produktu: jeden rozmiar dla wszystkich = rozmiar plakietki OUT
   z projektu klienta ("powiekszyc do tego rozmiaru"). Wzorzec OUT: 23% szerokosci komponentu
   o szerokosci 698-702 px = 160-180 px. Wszystkie trzy komponenty maja dzis te sama szerokosc,
   wiec procent daje identyczna plakietke i skaluje sie z ekranem; na duzych ekranach limit 180 px. */
body .out_component .sz-badge {
  width: 25% !important;
  max-width: 180px !important;
  min-width: 120px !important;
  top: 4% !important;
  right: 4% !important;
}

/* ===== 06.10.2026 - uwagi klienta (zrzuty z 05.10) ===== */

/* Kafle oferty (zlaczki, strona glowna): kolko ze strzalka wielkosci tytulu i na jego osi.
   Tytul ma 32 px przy wysokosci wiersza 31 px. Kolko 48 px wystawalo 17 px pod tytul,
   a jego srodek lezal 8,5 px nizej niz srodek napisu. Teraz kolko = wiersz tytulu (31 px):
   gora, dol i srodek rowno z tytulem. Grot w tej samej proporcji co dotad (~28% srednicy).
   Odstep kolko-podpis = odstep tytul-opis (20 px), wiec "dowiedz sie wiecej" / "wiecej wkrotce"
   zaczyna sie na wysokosci pierwszego wiersza opisu. Uklad bez zmian na wszystkich szerokosciach
   (tytul ma 32/31 px od telefonu do 1920). */
.rt-home-four-three-box-data .rt-home-four-arrow-block {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px;
  min-height: 31px;
}
.rt-home-four-three-box-data .rt-home-four-arrow-block .arrow-right { height: 9px !important; width: auto !important; }
.rt-home-four-three-box-data .arrow_wrapper {
  row-gap: 20px !important;
  grid-row-gap: 20px !important;
}

/* Studzienki: odstep miedzy video a sekcja STANDARD o polowe mniejszy (zrzut klienta).
   Bylo: margines pod video 64 px + 48 px gornego odstepu sekcji = 112 px do komponentu.
   Teraz 48 px - tyle samo, co miedzy panelem rysunkow a video. */
.dim-panel + .bk-video { margin-bottom: 0; }