/* ==========================================================================
   TECH-2449 - test A/B T02, strony ofertowe: wariant B pierwszego ekranu.
   Ładowane tylko na 366 adresach testu (ABTests::isT02Active). Karta: css/ab-tests/form-card.css.
   Źródło: T02-B-final-v2.html. Wariant B to finał Adama (blok <style data-z="prototyp">) + nakładka
   <style data-z="t02b">. Z bloku „prototyp” zostały WYŁĄCZNIE reguły, które trafiają w elementy div.ab-t02-b
   (sprawdzone w przeglądarce dla ?oferta=0..13 na 1440/1366/1280/390/360) - pasek prototypu, przełączniki
   i niewybrane warianty 1-4 wypadły. Deklaracje 1:1 ze źródła. Z nakładki wypadła opcja tytułu (b),
   oznaczona w prototypie jako poglądowa, nie do wdrożenia.
   Klasy wariantu (pv-on … t02b-opcja-a) stoją na div.ab-t02-b, więc nic tu nie dotyka obecnego hero.
   ========================================================================== */

/* ===== z bloku „prototyp” (finał Adama: pv-4 / pv-g3 / pv-koniec) ===== */
/* ==========================================================================
   PROTOTYP (do wyrzucenia) - 4 warianty B pierwszego ekranu oferty widoczni.com
   Cel: jak najwięcej zgłoszeń. Wariant włącza klasa na <body>: pv-on + pv-1..pv-4.
   Bez tych klas strona jest 1:1 jak dziś (wersja A).
   ========================================================================== */
/* --- co widać w którym wariancie ----------------------------------------- */
.pv-panel, .pv-oceny, .pv-loga { display: none; }
.ab-t02-b.pv-4 .pv-panel { display: flex; }
.ab-t02-b.pv-on .pv-oceny { display: flex; }
.ab-t02-b.pv-on { --pv-top: 0px; }
body.has-topbar .ab-t02-b.pv-on { --pv-top: var(--topbar-h, 41px); }
/* przycisk „Wyślij zapytanie” z hero znika - jego miejsce zajmuje formularz */
.ab-t02-b.pv-on .hero--subpage .section-footer { display: none; }
.pv-oceny { flex-wrap: wrap; gap: 10px; }
.pv-ocena { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font: 500 14px/1.2 "Raleway", sans-serif; white-space: nowrap; }
.pv-ocena b { font-size: 18px; font-weight: 700; }
.pv-ocena svg { width: 17px; height: 17px; }
.pv-ocena small { font-size: 13px; opacity: .85; }
.pv-loga { text-align: center; color: #fff; }
.pv-loga__tyt { display: block; font: 600 12px/1.2 "Raleway", sans-serif; letter-spacing: .6px; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.pv-loga__rzad { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
.pv-loga__rzad img { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
/* ==========================================================================
   KOMPUTER (od 992 px)
   ========================================================================== */
@media (min-width: 992px) {
/* hero rośnie razem z treścią; zdjęcie zostaje tłem */
  .ab-t02-b.pv-on .hero.hero--subpage { display: block; position: relative; overflow: hidden; min-height: 770px; }
  .ab-t02-b.pv-on .hero--subpage > picture { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; }
  .ab-t02-b.pv-on .hero--subpage > picture img { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; }
  .ab-t02-b.pv-on .hero--subpage .hero__content {
    position: relative; left: auto; top: auto; transform: none; margin: 0 auto;
    width: 1200px; max-width: 100%; min-height: inherit; padding-left: 15px; padding-right: 15px;
    justify-content: center; pointer-events: auto;
  
  }
  .ab-t02-b.pv-on .hero__content .hero__headers { display: grid; width: 100%; margin: auto 0; }
  .ab-t02-b.pv-on .hero__headers .hero__text-overlay { grid-area: tytul; }
  .ab-t02-b.pv-on .hero__headers .pv-oceny { grid-area: oceny; }
  .ab-t02-b.pv-on .hero__headers .pv-loga { grid-area: loga; }
/* --- 4. Pół na pół ---------------------------------------------------- */
  .ab-t02-b.pv-4 .hero.hero--subpage { display: grid; grid-template-columns: 1fr 1fr; }
  .ab-t02-b.pv-4 .hero--subpage .hero__content { grid-column: 1; grid-row: 1; width: auto; margin: 0; padding: calc(var(--pv-top) + 92px) 48px 40px 64px; align-items: stretch; }
  .ab-t02-b.pv-4 .hero__content .hero__headers { grid-template-columns: 100%; grid-template-areas: "tytul" "korzysci" "oceny" "ekspert"; }
  .ab-t02-b.pv-4 .hero--subpage .hero__text-overlay { justify-content: flex-start; text-align: left; }
  .ab-t02-b.pv-4 .pv-oceny { margin-top: 26px; }
  .ab-t02-b.pv-4 .hero--subpage .hero__badge-overlay { display: none; }
  .ab-t02-b.pv-4 .pv-panel { grid-column: 2; grid-row: 1; position: relative; z-index: 6; margin-top: calc(var(--pv-top) + 76px); background: #fff; align-items: center; justify-content: center; padding: 24px 48px 26px; }
}
/* niski laptop: ciaśniej, żeby przycisk był nad linią ekranu */
@media (min-width: 992px) and (max-height: 800px) {
  .ab-t02-b.pv-4 .pv-panel { padding-top: 18px; padding-bottom: 18px; }
  .ab-t02-b.pv-4 .pv-oceny { margin-top: 20px; }
}
/* ==========================================================================
   TELEFON (do 991 px): zdjęcie z tytułem i ocenami, pod nim formularz,
   dalej korzyści i ekspert na białym tle
   ========================================================================== */
@media (max-width: 991px) {
  .ab-t02-b.pv-on .hero.hero--subpage { display: grid; grid-template-columns: 100%; min-height: 0; overflow: hidden; background: #fff; }
  .ab-t02-b.pv-on .hero--subpage > picture { position: relative; grid-row: 1 / span 2; grid-column: 1; display: block; width: 100%; height: auto; min-height: 0; max-height: none; }
  .ab-t02-b.pv-on .hero--subpage > picture img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; }
  .ab-t02-b.pv-on .hero--subpage .hero__content, .ab-t02-b.pv-on .hero__content .hero__headers { display: contents; }
  .ab-t02-b.pv-on .hero--subpage .hero__text-overlay { grid-row: 1; grid-column: 1; position: relative; z-index: 6; padding: 88px 15px 14px; }
  .ab-t02-b.pv-on .pv-oceny { grid-row: 2; grid-column: 1; position: relative; z-index: 6; justify-content: center; gap: 8px; padding: 0 12px 22px; }
  .ab-t02-b.pv-on .pv-oceny { flex-wrap: nowrap; gap: 6px; }
  .ab-t02-b.pv-on .pv-ocena { padding: 5px 9px; gap: 5px; font-size: 12px; }
  .ab-t02-b.pv-on .pv-ocena b { font-size: 15px; }
  .ab-t02-b.pv-on .pv-ocena small { font-size: 11.5px; }
  .ab-t02-b.pv-on .pv-ocena svg { width: 14px; height: 14px; }
  .ab-t02-b.pv-on .pv-panel { grid-row: 3; grid-column: 1; position: relative; z-index: 7; }
  .ab-t02-b.pv-on .pv-loga { grid-row: 6; grid-column: 1; padding: 0 15px 26px; color: #000; }
  .ab-t02-b.pv-on .pv-loga__rzad img { filter: grayscale(1); opacity: .75; height: 40px; }
  .ab-t02-b.pv-on .hero--subpage .hero__badge-overlay { display: none; }
  .ab-t02-b.pv-on .hero--subpage .artboard { display: none; }
/* 4. biały panel pod zdjęciem, na całą szerokość */
  .ab-t02-b.pv-4 .pv-panel { display: block; background: #fff; padding: 24px 15px 6px; }
}
/* ==========================================================================
   WARIANT 4 PO WYBORZE ADAMA (11.10): bez ocen, formularz kompaktowy,
   przełącznik koloru formularza: biały / czarny (klasa pv-ciemny)
   ========================================================================== */
.ab-t02-b.pv-kompakt .pv-oceny { display: none !important; }
@media (min-width: 992px) {
  .ab-t02-b.pv-kompakt.pv-4 .hero.hero--subpage { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .ab-t02-b.pv-kompakt.pv-4 .pv-panel { padding: 20px 40px 22px; }
}
@media (max-width: 991px) {
  .ab-t02-b.pv-kompakt .hero--subpage .hero__text-overlay { padding-bottom: 30px; }
  .ab-t02-b.pv-kompakt.pv-4 .pv-panel { padding: 22px 15px 6px; }
}
/* ==========================================================================
   RUNDA 3 (11.10): 4 wersje wariantu 4 - inny format formularza i inne tło.
   Bazowy 4 = panel pv-panel--0; wersje 4.1-4.4 = klasy pv-v1..pv-v4 + panele pv-panel--1..4
   ========================================================================== */
.ab-t02-b.pv-4 .pv-panel:not(.pv-panel--0) { display: none !important; }
/* ==========================================================================
   RUNDA 4 - plik OFERTA (11.10): baza = karta z 4.3, formularz w JEDNYM kroku,
   ostre zdjęcie, telefon na pierwszym miejscu, animacje. Klasy: pv-oferta + pv-o1..pv-o4
   ========================================================================== */
.ab-t02-b.pv-4.pv-oferta .pv-panel { display: none !important; }
.ab-t02-b.pv-oferta .pv-panel { background: transparent !important; }
/* ostre zdjęcie, ciemniej po lewej (tekst), jaśniej po prawej (karta) */
.ab-t02-b.pv-oferta .hero--subpage > picture::before { background: linear-gradient(90deg, rgba(0, 0, 0, .76) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .34) 100%); }
@media (min-width: 992px) {
  .ab-t02-b.pv-oferta .pv-panel { padding: 22px 56px 28px; }
}
/* --- TELEFON: tytuł, zaraz pod nim cała karta z przyciskiem, korzyści pod formularzem --- */
@media (max-width: 991px) {
  .ab-t02-b.pv-oferta .hero--subpage > picture { grid-row: 1 / span 3; }
  .ab-t02-b.pv-oferta .hero--subpage .hero__text-overlay { padding: 80px 15px 16px; }
  .ab-t02-b.pv-oferta .pv-panel { padding: 0 10px 20px !important; }
}
/* niski telefon (np. 360×740, 360×800, iPhone SE): ciaśniej, żeby przycisk wszedł na 1. ekran tam, gdzie się da */
@media (max-width: 991px) and (max-height: 820px) {
  .ab-t02-b.pv-oferta .hero--subpage .hero__text-overlay { padding: 72px 15px 12px; }
}
/* bardzo niski telefon (np. 360×740): bez zielonego nadtytułu - tytuł i tak mówi, jaka to oferta */
@media (max-width: 991px) and (max-height: 760px) {
  .ab-t02-b.pv-oferta .hero--subpage .hero__text-overlay { padding-top: 70px; }
}
/* ==========================================================================
   RUNDA 5 - FINAŁ (11.10): 5 propozycji na bazie wariantu 3 (belka, wjazd karty, strzałka).
   Klasy: pv-final + pv-f1..pv-f5; panele pv-panel--f1..f5. Lewa strona = kolumna (flex), kolejność przez order.
   ========================================================================== */
.ab-t02-b.pv-4.pv-final .pv-panel { display: none !important; }
@media (min-width: 992px) {
  .ab-t02-b.pv-final .hero__content .hero__headers { display: flex; flex-direction: column; align-items: stretch; }
  .ab-t02-b.pv-final .hero__headers .hero__text-overlay { order: 0; }
  .ab-t02-b.pv-final .pv-loga { order: 4; margin-top: 18px; text-align: left; }
  .ab-t02-b.pv-final .pv-loga__rzad { justify-content: flex-start; gap: 20px; }
  .ab-t02-b.pv-final .pv-loga__rzad img { height: 40px; }
}
@media (min-width: 992px) and (max-height: 800px) {
  .ab-t02-b.pv-final .pv-loga { margin-top: 14px; }
}
/* telefon: tytuł i karta na zdjęciu, pod formularzem reszta lewej strony na jasnym (lub czarnym) tle */
@media (max-width: 991px) {
  .ab-t02-b.pv-final .pv-loga { grid-row: 7; grid-column: 1; padding: 18px 15px 26px; }
  .ab-t02-b.pv-final .pv-loga__rzad { gap: 14px; }
}
@media (max-width: 991px) and (max-height: 760px) {
  .ab-t02-b.pv-final .hero--subpage .hero__text-overlay { padding-top: 64px; }
}
@media (max-width: 991px) {
  .ab-t02-b.pv-final .pv-loga__rzad { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; row-gap: 10px; }
}
/* ==========================================================================
   RUNDA 6 (11.10): baza = propozycja 5 (kafelki + pola w 2 kolumnach).
   Lewa strona: pv-g1 opinie / pv-g2 marki / pv-g3 opinie + marki. Jedna karta pv-panel--g dla wszystkich.
   Nowe w karcie: preferowany termin rozmowy (ContactTime + ContactTerm, jak w mechanizmie strony)
   i pasek „Dyżur eksperta” ze zdjęciem na dole karty.
   ========================================================================== */
@media (min-width: 992px) {
  .ab-t02-b.pv-4.pv-g .pv-panel.pv-panel--g { display: flex !important; }
}
@media (max-width: 991px) {
  .ab-t02-b.pv-4.pv-g .pv-panel.pv-panel--g { display: block !important; }
}
.ab-t02-b.pv-kompakt.pv-g3 .pv-oceny { display: flex !important; }
.ab-t02-b.pv-g3 .pv-loga { display: block; }
@media (min-width: 992px) {
  .ab-t02-b.pv-g .pv-oceny { order: 3; margin-top: 22px; }
  .ab-t02-b.pv-g .pv-loga { order: 4; }
  .ab-t02-b.pv-g3 .pv-oceny { margin-top: 18px; }
  .ab-t02-b.pv-g3 .pv-loga { margin-top: 14px; }
  .ab-t02-b.pv-g .pv-loga__rzad img { height: 38px; }
}
@media (max-width: 991px) {
  .ab-t02-b.pv-g .pv-oceny { padding-bottom: 16px; }
}
/* telefon: opinie pod formularzem (nad formularzem spychały przycisk pod dolny pasek) */
@media (max-width: 991px) {
  .ab-t02-b.pv-g .pv-oceny { grid-row: 4; justify-content: center; padding: 18px 12px 0; }
  .ab-t02-b.pv-g .pv-ocena { background: #f0f0f0; border-color: #e3e3e3; color: #000; }
}
/* dopasowanie do wszystkich ofert (różne długości tytułów) */
@media (min-width: 992px) {
  .ab-t02-b.pv-g .pv-panel { align-items: flex-start; padding-top: 18px; }
}
@media (min-width: 992px) and (max-height: 800px) {
  .ab-t02-b.pv-g .pv-oceny { margin-top: 14px; }
  .ab-t02-b.pv-g3 .pv-loga { margin-top: 10px; }
}
@media (max-width: 991px) {
  .ab-t02-b.pv-g .hero--subpage .hero__text-overlay { padding-top: 76px; }
}
@media (max-width: 991px) and (max-height: 820px) {
  .ab-t02-b.pv-g .hero--subpage .hero__text-overlay { padding-top: 68px; padding-bottom: 10px; }
}
@media (max-width: 991px) and (max-height: 760px) {
  .ab-t02-b.pv-g .hero--subpage .hero__text-overlay { padding-top: 62px; }
}
@media (min-width: 992px) {
  .ab-t02-b.pv-koniec .pv-oceny { margin-top: 18px; }
  .ab-t02-b.pv-koniec .pv-loga { margin-top: 18px; max-width: 580px; }
  .ab-t02-b.pv-koniec .pv-loga__tyt { margin-bottom: 8px; }
  .ab-t02-b.pv-koniec .pv-loga__rzad { gap: 22px; }
  .ab-t02-b.pv-koniec .pv-loga__rzad img { height: 44px; opacity: .92; }
}
@media (min-width: 992px) and (max-height: 800px) {
  .ab-t02-b.pv-koniec .pv-oceny { margin-top: 14px; }
  .ab-t02-b.pv-koniec .pv-loga { margin-top: 12px; }
  .ab-t02-b.pv-koniec .pv-loga__rzad img { height: 40px; }
}
@media (max-width: 991px) {
  .ab-t02-b.pv-koniec .pv-oceny { padding-top: 22px; }
  .ab-t02-b.pv-koniec .pv-loga { padding-top: 22px; }
  .ab-t02-b.pv-koniec .pv-loga__rzad img { height: 42px; }
}
@media (min-width: 992px) {
/* hero tak wysokie jak treść (bez pustego pasa) - spod spodu wyłania się początek strony oferty */
  .ab-t02-b.pv-koniec .hero.hero--subpage { min-height: 0; }
  .ab-t02-b.pv-koniec .hero--subpage .hero__content { min-height: 0; padding-bottom: 46px; }
  .ab-t02-b.pv-koniec .pv-panel { padding-bottom: 46px; }
  .ab-t02-b.pv-koniec .pv-loga { margin-top: 22px; }
}
@media (min-width: 992px) and (max-height: 800px) {
  .ab-t02-b.pv-koniec .pv-loga { margin-top: 16px; }
}
/* pusty element szablonu pod treścią hero (na 12 sprawdzonych ofertach zawsze pusty) zajmował 78 px */
.ab-t02-b.pv-koniec .hero--subpage .go-to-section { display: none; }

/* ===== nakładka „t02b” (finał 13-14.10) ===== */
/* ==========================================================================
   T02 · wariant B · FINAŁ (13.10.2026) - nakładka na finał Adama (pv-g3 / pv-koniec).
   Zmiany: bez nadtytułów, tytuł z korzyścią jako <p>, korzyści jako checkboxy,
   karta = wspólny komponent (_wspolne/karta-formularza, osobny <style>), mocniejsze przyciemnienie zdjęcia,
   telefon: opinie na zdjęciu pod formularzem, więcej odstępu wokół tytułu.
   Tokeny strony: zieleń --primary-color #41C207, Raleway, zaokrąglenia karty 10 px, pól 0.
   ========================================================================== */
/* --- przełączanie wariantów: CSS STRONY (webdev). Runda 4: obecny hero ma klasę ab-t02-a, nowy jest w div.ab-t02-b
   (razem z nagłówkami CMS pod hero) i domyślnie ukryty; pokazuje go Omniconvert (CSS wariantu, README).
   Klasy wariantu (pv-on … t02b, t02b-opcja-a) stoją na div.ab-t02-b, nie na <body>: obecny hero zostaje 1:1. --- */
.ab-t02-b { display: none; }
/* poprawka 15.10: wrapper stoi w wierszu flex nagłówka i bez tego dopasowywał szerokość do treści - biały pas obok hero B
   na desktopie, a przy 360 px hero szersze od okna (przewijanie w poziomie) */
.ab-t02-b.t02b-w { width: 100%; }
/* --- tytuł z korzyścią (<p>, nie nagłówek) -------------------------------- */
.t02b-tytul-a { display: none; }
.ab-t02-b.t02b-opcja-a .t02b-tytul-a { display: block; }
.t02b .hero__headers .t02b-tytul p { margin: 0 !important; padding: 0; text-align: left; font-family: "Raleway", sans-serif; color: #fff; text-wrap: balance; }
.t02b .hero__headers .t02b-tytul-a { font-weight: 700; font-size: 50px; line-height: 1.1; letter-spacing: -1.2px; max-width: 15.5em; }
.t02b .hero__headers .t02b-tytul-a.is-long { font-size: 40px; letter-spacing: -.8px; }
/* runda 4: tytuł (a) bierze tekst elementu .title z obecnego hero (bywa długi: branża medyczna 71 znaków, Piotrków 91) */
.t02b .hero__headers .t02b-tytul-a.is-bardzo-long { font-size: 32px; line-height: 1.15; letter-spacing: -.5px; max-width: 22em; }
/* --- korzyści jako checkboxy (wzór: T02-mateusz) ------------------------- */
.t02b-usp { display: none; list-style: none; margin: 0; padding: 0; gap: 14px; text-align: left; }
.ab-t02-b.t02b.pv-on .t02b-usp { display: grid; }
.t02b-usp li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; font: 500 17px/1.4 "Raleway", sans-serif; color: #fff; }
.t02b-usp li::before { content: none !important; }
.t02b-usp i { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--primary-color, #41c207); background: rgba(65, 194, 7, .16); border: 1px solid rgba(65, 194, 7, .55); }
.t02b-usp svg { width: 14px; height: 14px; }
/* --- nagłówki z hero CMS pod hero (tag i treść 1:1) ------------------------ */
.t02b-cms { display: none; }
.ab-t02-b.t02b.pv-on .t02b-cms { display: block; max-width: 1200px; margin: 0 auto; padding: 34px 15px 4px; text-align: center; }
.t02b-cms > * { margin: 0 !important; color: #000 !important; font-family: "Raleway", sans-serif; }
.t02b-cms .title { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -1px; }
.t02b-cms .slogan { margin-top: 8px !important; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -.3px; }
.t02b-cms .slogan:empty { display: none; }
@media (min-width: 992px) {
  .ab-t02-b.t02b .hero__headers .hero__text-overlay { width: 100%; }
  .ab-t02-b.t02b .t02b-usp { order: 2; margin-top: 30px; }
  .ab-t02-b.t02b.pv-koniec .pv-oceny { margin-top: 26px; }
}
/* runda 5 (Mateusz 14.10): więcej powietrza w hero, jak na stronie głównej (T10: karta 193 px od góry strony, 106 px nad dołem sekcji).
   Było 20 / 22 px wokół karty, przez co hero wyglądało na ściśnięte. */
@media (min-width: 992px) {
  .ab-t02-b.t02b.pv-oferta .pv-panel--g { padding-top: 76px !important; padding-bottom: 106px !important; }
}
@media (min-width: 992px) and (max-height: 800px) {
  .t02b .hero__headers .t02b-tytul-a { font-size: 44px; }
  .t02b .hero__headers .t02b-tytul-a.is-long { font-size: 36px; }
  .t02b .hero__headers .t02b-tytul-a.is-bardzo-long { font-size: 29px; }
  .ab-t02-b.t02b .t02b-usp { margin-top: 22px; gap: 10px; }
  .ab-t02-b.t02b.pv-koniec .pv-oceny { margin-top: 18px; }
}
/* --- telefon: tytuł → formularz → opinie → checkboxy → logotypy (3×2) ------ */
@media (max-width: 991px) {
  .t02b .hero__headers .t02b-tytul-a { font-size: 29px; line-height: 1.12; letter-spacing: -.6px; }
  .t02b .hero__headers .t02b-tytul-a.is-long { font-size: 24px; }
  .t02b .hero__headers .t02b-tytul-a.is-bardzo-long { font-size: 21px; line-height: 1.2; }
  .ab-t02-b.t02b .t02b-usp { grid-row: 5; grid-column: 1; gap: 12px; padding: 22px 20px 0; }
  .ab-t02-b.t02b .t02b-usp li { color: #000; font-size: 16px; }
  .ab-t02-b.t02b .t02b-usp i { background: rgba(65, 194, 7, .12); }
  .ab-t02-b.t02b .pv-loga { grid-row: 6; }
  .t02b-cms .title { font-size: 26px; }
  .t02b-cms .slogan { font-size: 17px; }
}
/* --- karta: wspólny komponent _wspolne/karta-formularza (kf-*), tu tylko miejsce w hero ---- */
.t02b-karta { width: 100%; max-width: 450px; }
@media (max-width: 991px) {
  .t02b-karta { max-width: none; }
}
/* --- przyciemnienie zdjęcia: mocniej po stronie tekstu (uwaga Mateusza 13.10, wszystkie oferty) --- */
.ab-t02-b.t02b.pv-oferta .hero--subpage > picture::before { background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .8) 38%, rgba(0, 0, 0, .6) 62%, rgba(0, 0, 0, .46) 100%); }
@media (max-width: 991px) {
/* telefon: tekst jest na całej szerokości - przyciemnienie równe, mocniejsze u góry (tytuł) */
  .ab-t02-b.t02b.pv-oferta .hero--subpage > picture::before { background: linear-gradient(180deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .76) 35%, rgba(0, 0, 0, .7) 100%); }
}
/* --- telefon: więcej powietrza nad i pod tytułem; opinie zostają na zdjęciu, pod formularzem --- */
@media (max-width: 991px) {
  .ab-t02-b.t02b.pv-g .hero--subpage .hero__text-overlay { padding-top: 100px; padding-bottom: 32px; }
  .ab-t02-b.t02b.pv-oferta .hero--subpage > picture { grid-row: 1 / span 4; }
  .ab-t02-b.t02b.pv-oferta .pv-panel { padding: 0 10px !important; }
  .ab-t02-b.t02b.pv-g .pv-oceny { padding: 18px 12px 24px; }
  .ab-t02-b.t02b.pv-g .pv-ocena { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .3); color: #fff; }
  .ab-t02-b.t02b .t02b-usp { padding-top: 26px; }
}
@media (max-width: 991px) and (max-height: 820px) {
  .ab-t02-b.t02b.pv-g .hero--subpage .hero__text-overlay { padding-top: 94px; padding-bottom: 28px; }
}
@media (max-width: 991px) and (max-height: 760px) {
  .ab-t02-b.t02b.pv-g .hero--subpage .hero__text-overlay { padding-top: 88px; padding-bottom: 26px; }
}

/* blok z tytułem i sloganem pod hero B: pokazujemy tylko, gdy niesie nagłówki z obecnego hero (H1/H2/H3) -
   sam tekst w spanach to powtórzenie bez wartości SEO */
.ab-t02-b.t02b.pv-on .t02b-cms:not(:has(h1, h2, h3, h4, h5, h6)) { display: none; }

/* karta 40 px pod menu (było 76 px); lewa kolumna przesunięta o tyle samo, żeby została wyśrodkowana względem karty */
@media (min-width: 992px) {
  .ab-t02-b.t02b.pv-oferta .pv-panel--g { padding-top: 40px !important; }
  .ab-t02-b.t02b.pv-4 .hero--subpage .hero__content { padding-top: calc(var(--pv-top) + 56px); }
}
/* od 1441 px menu jest wyższe (dół na 132-139 px zamiast 117) */
@media (min-width: 1441px) {
  .ab-t02-b.t02b.pv-oferta .pv-panel--g { padding-top: 62px !important; }
  .ab-t02-b.t02b.pv-4 .hero--subpage .hero__content { padding-top: calc(var(--pv-top) + 78px); }
}