.elementor-17605 .elementor-element.elementor-element-53c39cb{--display:flex;--min-height:70vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--overlay-opacity:0.7;--overlay-mix-blend-mode:darken;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17605 .elementor-element.elementor-element-53c39cb::before, .elementor-17605 .elementor-element.elementor-element-53c39cb > .elementor-background-video-container::before, .elementor-17605 .elementor-element.elementor-element-53c39cb > .e-con-inner > .elementor-background-video-container::before, .elementor-17605 .elementor-element.elementor-element-53c39cb > .elementor-background-slideshow::before, .elementor-17605 .elementor-element.elementor-element-53c39cb > .e-con-inner > .elementor-background-slideshow::before, .elementor-17605 .elementor-element.elementor-element-53c39cb > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#00000045;--background-overlay:'';}.elementor-17605 .elementor-element.elementor-element-62b873c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-17605 .elementor-element.elementor-element-943ac74{text-align:center;font-family:"Oswald", Sans-serif;font-size:14px;font-weight:400;}.elementor-17605 .elementor-element.elementor-element-80e8bb9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17605 .elementor-element.elementor-element-80e8bb9{text-align:start;}.elementor-17605 .elementor-element.elementor-element-80e8bb9 .elementor-heading-title{font-family:"Oswald", Sans-serif;font-size:45px;}.elementor-17605 .elementor-element.elementor-element-399070c > .elementor-widget-container{margin:0px 0px 0px 0px;padding:10px 0px 10px 0px;}.elementor-17605 .elementor-element.elementor-element-399070c{font-family:"Raleway", Sans-serif;font-size:20px;font-weight:400;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-17605 .elementor-element.elementor-element-f03db6c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17605 .elementor-element.elementor-element-ad73d79 > .elementor-widget-container{margin:30px 30px 30px 30px;}.elementor-17605 .elementor-element.elementor-element-ad73d79{text-align:center;}.elementor-17605 .elementor-element.elementor-element-ad73d79 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:28px;font-weight:500;color:#E7B472;}.elementor-17605 .elementor-element.elementor-element-d8d32ee{font-family:"Poppins", Sans-serif;font-size:17px;color:#FFFFFF;}.elementor-17605 .elementor-element.elementor-element-3283cb9{--display:flex;--margin-top:15px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-17605 .elementor-element.elementor-element-ee6c1d1 > .elementor-widget-container{margin:15px 0px 0px 0px;padding:0px 0px 15px 0px;}.elementor-17605 .elementor-element.elementor-element-ee6c1d1{text-align:center;}.elementor-17605 .elementor-element.elementor-element-ee6c1d1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:400;color:#FFFFFFBA;}.elementor-17605 .elementor-element.elementor-element-da4dc16{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 10px;--row-gap:0px;--column-gap:10px;--margin-top:35px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;}.elementor-17605 .elementor-element.elementor-element-d02f114{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17605 .elementor-element.elementor-element-dfdcaba{text-align:center;}.elementor-17605 .elementor-element.elementor-element-dfdcaba .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:19px;font-weight:500;color:#29FF00;}.elementor-17605 .elementor-element.elementor-element-ccaac38{font-family:"Poppins", Sans-serif;font-size:15px;color:#FFFFFF;}.elementor-17605 .elementor-element.elementor-element-63e7438{text-align:center;font-family:"Poppins", Sans-serif;font-size:13px;}.elementor-17605 .elementor-element.elementor-element-52c6508{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17605 .elementor-element.elementor-element-a140d07{text-align:center;}.elementor-17605 .elementor-element.elementor-element-a140d07 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:19px;font-weight:500;color:#916EFF;}.elementor-17605 .elementor-element.elementor-element-02011be{font-family:"Poppins", Sans-serif;font-size:15px;color:#FFFFFF;}.elementor-17605 .elementor-element.elementor-element-88a3aee{text-align:center;font-family:"Poppins", Sans-serif;font-size:13px;}.elementor-17605 .elementor-element.elementor-element-f68b98a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17605 .elementor-element.elementor-element-df6c665{text-align:center;}.elementor-17605 .elementor-element.elementor-element-df6c665 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:19px;font-weight:500;color:#FF6969;}.elementor-17605 .elementor-element.elementor-element-a6c4751{font-family:"Poppins", Sans-serif;font-size:15px;color:#FFFFFF;}.elementor-17605 .elementor-element.elementor-element-476b366{text-align:center;font-family:"Poppins", Sans-serif;font-size:13px;}.elementor-17605 .elementor-element.elementor-element-7decc02{--display:flex;--min-height:25vh;--overlay-opacity:0.2;--margin-top:30px;--margin-bottom:-40px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17605 .elementor-element.elementor-element-7decc02:not(.elementor-motion-effects-element-type-background), .elementor-17605 .elementor-element.elementor-element-7decc02 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-17605 .elementor-element.elementor-element-7decc02::before, .elementor-17605 .elementor-element.elementor-element-7decc02 > .elementor-background-video-container::before, .elementor-17605 .elementor-element.elementor-element-7decc02 > .e-con-inner > .elementor-background-video-container::before, .elementor-17605 .elementor-element.elementor-element-7decc02 > .elementor-background-slideshow::before, .elementor-17605 .elementor-element.elementor-element-7decc02 > .e-con-inner > .elementor-background-slideshow::before, .elementor-17605 .elementor-element.elementor-element-7decc02 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-17605 .elementor-element.elementor-element-8c44171{--display:flex;--min-height:25vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;}.elementor-17605 .elementor-element.elementor-element-8c44171:not(.elementor-motion-effects-element-type-background), .elementor-17605 .elementor-element.elementor-element-8c44171 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://protegostudio.pl/wp-content/uploads/2026/01/Projekt-bez-nazwy-47.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-17605 .elementor-element.elementor-element-8c44171::before, .elementor-17605 .elementor-element.elementor-element-8c44171 > .elementor-background-video-container::before, .elementor-17605 .elementor-element.elementor-element-8c44171 > .e-con-inner > .elementor-background-video-container::before, .elementor-17605 .elementor-element.elementor-element-8c44171 > .elementor-background-slideshow::before, .elementor-17605 .elementor-element.elementor-element-8c44171 > .e-con-inner > .elementor-background-slideshow::before, .elementor-17605 .elementor-element.elementor-element-8c44171 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0000006E;--background-overlay:'';}.elementor-17605 .elementor-element.elementor-element-4bbf9f7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-17605 .elementor-element.elementor-element-261f81c{text-align:start;}.elementor-17605 .elementor-element.elementor-element-261f81c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:25px;font-weight:600;color:#FFFFFF;}.elementor-17605 .elementor-element.elementor-element-f09d993{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-17605 .elementor-element.elementor-element-98a6fa9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17605 .elementor-element.elementor-element-98a6fa9 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-17605 .elementor-element.elementor-element-98a6fa9 .elementor-button{font-family:"Poppins", Sans-serif;}@media(max-width:1068px){.elementor-17605 .elementor-element.elementor-element-53c39cb{--min-height:35vh;}.elementor-17605 .elementor-element.elementor-element-80e8bb9 .elementor-heading-title{font-size:35px;}.elementor-17605 .elementor-element.elementor-element-399070c{font-size:18px;}.elementor-17605 .elementor-element.elementor-element-ad73d79 .elementor-heading-title{font-size:25px;}.elementor-17605 .elementor-element.elementor-element-ee6c1d1{text-align:center;}.elementor-17605 .elementor-element.elementor-element-ee6c1d1 .elementor-heading-title{font-size:18px;}.elementor-17605 .elementor-element.elementor-element-dfdcaba .elementor-heading-title{font-size:17px;}.elementor-17605 .elementor-element.elementor-element-7decc02{--min-height:15vh;--margin-top:30px;--margin-bottom:-40px;--margin-left:0px;--margin-right:0px;}.elementor-17605 .elementor-element.elementor-element-8c44171{--min-height:15vh;}.elementor-17605 .elementor-element.elementor-element-261f81c .elementor-heading-title{font-size:19px;}}@media(max-width:767px){.elementor-17605 .elementor-element.elementor-element-53c39cb{--min-height:40vh;}.elementor-17605 .elementor-element.elementor-element-62b873c{--justify-content:center;}.elementor-17605 .elementor-element.elementor-element-943ac74 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17605 .elementor-element.elementor-element-943ac74{font-size:10px;}.elementor-17605 .elementor-element.elementor-element-80e8bb9 .elementor-heading-title{font-size:22px;}.elementor-17605 .elementor-element.elementor-element-399070c > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-17605 .elementor-element.elementor-element-399070c{font-size:12px;}.elementor-17605 .elementor-element.elementor-element-ad73d79 .elementor-heading-title{font-size:16px;}.elementor-17605 .elementor-element.elementor-element-d8d32ee{text-align:center;font-size:14px;}.elementor-17605 .elementor-element.elementor-element-ee6c1d1 .elementor-heading-title{font-size:15px;}.elementor-17605 .elementor-element.elementor-element-da4dc16{--gap:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-17605 .elementor-element.elementor-element-ccaac38{font-size:14px;}.elementor-17605 .elementor-element.elementor-element-63e7438{font-size:12px;}.elementor-17605 .elementor-element.elementor-element-a140d07 .elementor-heading-title{font-size:17px;}.elementor-17605 .elementor-element.elementor-element-02011be{font-size:14px;}.elementor-17605 .elementor-element.elementor-element-88a3aee{font-size:12px;}.elementor-17605 .elementor-element.elementor-element-df6c665 .elementor-heading-title{font-size:17px;}.elementor-17605 .elementor-element.elementor-element-a6c4751{font-size:14px;}.elementor-17605 .elementor-element.elementor-element-476b366{font-size:12px;}.elementor-17605 .elementor-element.elementor-element-7decc02{--min-height:30vh;}.elementor-17605 .elementor-element.elementor-element-8c44171{--min-height:30vh;}.elementor-17605 .elementor-element.elementor-element-261f81c .elementor-heading-title{font-size:16px;}.elementor-17605 .elementor-element.elementor-element-98a6fa9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-17605 .elementor-element.elementor-element-98a6fa9 .elementor-button{font-size:12px;}}@media(min-width:768px){.elementor-17605 .elementor-element.elementor-element-53c39cb{--width:100%;}.elementor-17605 .elementor-element.elementor-element-d02f114{--width:33%;}.elementor-17605 .elementor-element.elementor-element-52c6508{--width:33%;}.elementor-17605 .elementor-element.elementor-element-f68b98a{--width:33%;}.elementor-17605 .elementor-element.elementor-element-7decc02{--width:100%;}.elementor-17605 .elementor-element.elementor-element-4bbf9f7{--width:75%;}.elementor-17605 .elementor-element.elementor-element-f09d993{--width:25%;}}@media(min-width:1069px){.elementor-17605 .elementor-element.elementor-element-8c44171:not(.elementor-motion-effects-element-type-background), .elementor-17605 .elementor-element.elementor-element-8c44171 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for text-editor, class: .elementor-element-943ac74 */.protego-crumbs{
display:flex;
align-items:center;
gap:10px;
margin:0 0 10px 0;
font-size: 13px;
line-height: 1.2;
opacity: .9;
}
.protego-crumbs a{
color: rgba(255,255,255,.78);
text-decoration: none;
}
.protego-crumbs a:hover{
color: rgba(255,255,255,.95);
text-decoration: underline;
text-underline-offset: 3px;
}
.protego-crumbs__sep{
color: rgba(255,255,255,.35);
}
.protego-crumbs__current{
color: rgba(255,255,255,.60);
}
/* =========================
BREADCRUMB – minimal, ale ciekawy HOVER
(typografia i kolor bazowy zostają z Elementora)
========================= */
/* usuń podkreślenia i nie blokuj typografii */
.protego-crumbs a{
text-decoration: none !important;
color: inherit; /* <- Elementor rządzi kolorem */
position: relative;
display: inline-block;
padding: 0 .12em; /* minimalny “hit area”, wygląda premium */
transition: filter .18s ease, opacity .18s ease;
}
/* =========================
BREADCRUMB – Elementor steruje typografią
Hover = tylko zmiana koloru
========================= */
/* Breadcrumb ma DZIEDZICZYĆ typografię z Elementora */
.elementor-widget-text-editor .protego-crumbs,
.elementor-widget-text-editor .protego-crumbs *{
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
}
/* Linki: bez podkreślenia, kolor bazowy = z Elementora */
.elementor-widget-text-editor .protego-crumbs a{
color: inherit !important; /* <- normalny kolor ustawiasz w Elementorze */
text-decoration: none !important;
transition: color .15s ease;
}
/* Hover: tylko zmiana koloru (bez turkusu) */
.elementor-widget-text-editor .protego-crumbs a:hover{
color: var(--crumb-hover, var(--b, #FFB020)) !important;
/* fallback: amber; jeśli w hero masz --b (np. sportowy), to weźmie go automatycznie */
}
/* Obecna strona (nie link): lekko spokojniej, ale bez blurów */
.elementor-widget-text-editor .protego-crumbs .protego-crumbs__current{
opacity: .82;
}
/* =========================
BREADCRUMB – firmowy hover (głęboki turkus)
Elementor steruje typografią
========================= */
/* dziedziczenie typografii z Elementora */
.elementor-widget-text-editor .protego-crumbs,
.elementor-widget-text-editor .protego-crumbs *{
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
}
/* linki: bez podkreślenia, bazowy kolor z Elementora */
.elementor-widget-text-editor .protego-crumbs a{
color: inherit !important;
text-decoration: none !important;
transition: color .15s ease;
}
/* hover: głęboki turkus (firmowy) */
.elementor-widget-text-editor .protego-crumbs a:hover{
color: #00CFA6 !important; /* deep teal */
}
/* bieżąca strona */
.elementor-widget-text-editor .protego-crumbs .protego-crumbs__current{
opacity: .82;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-399070c */.protego-script{
font-family: "Allura", cursive !important;
font-weight: 400 !important;
}
.protego-meta{
font-family: inherit; /* zostaje font z Elementora */
font-weight: inherit;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-53c39cb *//* =========================================
PROTEGO – LISTY W KARTACH: przywróć rytm + kropki + scroll
(wklej NA SAM KONIEC)
========================================= */
/* 1) scroll tylko gdy trzeba (zostaje uniwersalnie) */
@media (min-width: 1024px){
.protego-card .protego-card__list{
max-height: 330px;
overflow: auto;
padding-right: 10px;
overscroll-behavior: contain;
}
}
/* 2) TWARDY reset stylu listy – dokładnie w środku widgetu Elementora */
.protego-card .protego-card__list .elementor-widget-container ul{
margin: 0 !important;
padding-left: 0 !important;
list-style: none !important; /* wyłączamy marker, bo robimy własne kropki */
}
/* 3) RYT M: tu ustawiasz „oddech” (to jest ten efekt, który zniknął) */
.protego-card .protego-card__list .elementor-widget-container li{
position: relative !important;
margin: 0 0 12px 0 !important; /* <-- odstęp między punktami (było “jak wcześniej”) */
padding-left: 22px !important; /* <-- miejsce na kropkę + oddech */
line-height: 1.62 !important; /* <-- odstęp w samym tekście */
}
/* LECZNICZY – NATURA / WELLNESS / jaśniej i mocniej niż relaks */
.protego-hero--healing{
background:
/* “sage glow” (natura) – lewa góra */
radial-gradient(1150px 680px at 18% 18%, rgba(110, 255, 190, .32), transparent 62%),
/* ciepłe “honey light” (spa) – prawa góra */
radial-gradient(980px 620px at 86% 14%, rgba(255, 204, 120, .26), transparent 66%),
/* mięta/premium highlight (środek) */
radial-gradient(780px 480px at 52% 38%, rgba(0, 230, 168, .16), transparent 70%),
/* perłowe rozjaśnienie (żeby nie było mdło) */
radial-gradient(820px 420px at 55% 10%, rgba(255,255,255,.16), transparent 72%),
/* dół delikatnie przyciemniony pod czytelność */
radial-gradient(900px 650px at 55% 112%, rgba(0,0,0,.18), transparent 62%),
/* baza – jaśniejsza, “oliwkowo-grafitowa” */
linear-gradient(180deg, #2f3b36 0%, #141a18 100%);
}
/* LECZNICZY: winieta delikatna (żeby nie zabijać jasności) */
.protego-hero--healing::after{
opacity: .32;
background:
radial-gradient(1000px 560px at 50% 10%, rgba(255,255,255,.18), transparent 60%),
radial-gradient(900px 650px at 50% 115%, rgba(0,0,0,.10), transparent 66%);
}
/* opcjonalnie: bardzo subtelne odcięcie od tła strony */
.protego-hero--healing{
outline: 1px solid rgba(255,255,255,.06);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-da4dc16 *//* =========================
PROTEGO – KARTY (FINAL / ACCENT / CLEAN)
- stabilny hover (bez flash / bez wpływu na sąsiadów)
- spójna typografia list + optycznie równe „kropki”
- scroll kolorowany per karta
========================= */
/* UKŁAD 3 KART */
.protego-cards{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:stretch;
}
/* AKCENTY (stałe, żywe) */
.protego-card--ok { --accent:#00E6A8; }
.protego-card--warn { --accent:#8A6CFF; }
.protego-card--no { --accent:#FF3B5C; }
/* KARTA */
.protego-card{
position:relative;
overflow:hidden;
border-radius:22px;
padding:18px 18px 16px;
border:1px solid rgba(255,255,255,.10);
background:
radial-gradient(900px 520px at 10% 0%, rgba(255,255,255,.05), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
rgba(10,14,20,.92);
/* stabilny cień (nie brudzi sąsiadów) */
box-shadow: 0 22px 44px -28px rgba(0,0,0,.85);
/* tylko transform animujemy */
transition: transform .16s ease;
display:flex;
flex-direction:column;
/* stabilizacja renderingu podczas animacji */
will-change: transform;
transform: translate3d(0,0,0);
backface-visibility: hidden;
/* porządek warstw pseudo-elementów */
isolation: isolate;
z-index: 0;
}
.protego-card:hover{
transform: translate3d(0,-2px,0);
z-index: 5;
}
/* Pasek u góry */
.protego-card::before{
content:"";
position:absolute;
top:0; left:0; right:0;
height:4px;
background: var(--accent);
opacity:.95;
}
/* Delikatna poświata */
.protego-card::after{
content:"";
position:absolute;
inset:auto -35% -55% auto;
width:520px; height:520px;
background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
filter: blur(10px);
opacity:.45;
pointer-events:none;
}
/* NAGŁÓWKI – kolor akcentu */
.protego-card :is(h1,h2,h3,.elementor-heading-title){
color: var(--accent) !important;
}
/* Separator pod nagłówkiem (neutralny, subtelny) */
.protego-card .elementor-widget-heading{
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* chowamy
w kartach (żeby nie robiły się podwójne linie) */
.protego-card hr{ display:none !important; }
/* =========================
LISTY – CLEAN + „OPTYCZNE” KROPKI
(zamiast ::marker, bo bywa nadpisywany przez motyw)
========================= */
/* obszar listy (żeby stopka siedziała na dole) */
.protego-card__list{
flex: 1 1 auto;
padding-bottom: 6px; /* oddech przed stopką */
}
/* reset timeline / motywowych ozdobników tylko w kartach */
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) ul{
margin: 0 !important;
padding-left: 0 !important;
list-style: none !important;
border-left: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* jeśli motyw dorzuca pseudo-elementy do list – ucinamy je */
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) ul::before,
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) ul::after,
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) li::after{
content:none !important;
display:none !important;
}
/* LI: rytm i wcięcie pod własną kropkę */
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) li{
position: relative;
margin: 0 0 6px 0;
padding-left: 18px; /* miejsce na kropkę */
line-height: 1.45;
}
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) li:last-child{
margin-bottom: 0;
}
/* Elementor czasem wkłada do
→ robi dziury */
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) li p{
margin: 0 !important;
display: inline;
}
/* kropka – optycznie idealnie przy pierwszej linii */
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) li::before{
content:"";
position:absolute;
left:0;
top: .62em; /* optyczne wyrównanie */
width:6px;
height:6px;
border-radius:999px;
background: var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* =========================
STOPKA – kolor akcentu + glow
========================= */
.protego-card__footer{
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed rgba(255,255,255,.14);
}
.protego-card__footer .elementor-widget-container{
color: var(--accent);
text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.protego-card__footer .elementor-widget-container p{ margin: 0; }
/* delikatnie mocniejszy glow dla „warn” (opcjonalnie) */
.protego-card--warn :is(h1,h2,h3,.elementor-heading-title),
.protego-card--warn .protego-card__footer .elementor-widget-container{
text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* =========================
SCROLL (desktop) + kolor per karta
========================= */
@media (min-width: 1024px){
.protego-card__list{
max-height: 330px;
overflow: auto;
padding-right: 10px;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: var(--accent) rgba(255,255,255,.06);
}
.protego-card__list::-webkit-scrollbar{ width: 8px; }
.protego-card__list::-webkit-scrollbar-track{
background: rgba(255,255,255,.06);
border-radius: 999px;
}
.protego-card__list::-webkit-scrollbar-thumb{
background: var(--accent);
border-radius: 999px;
border: 2px solid rgba(10,14,20,.92);
}
.protego-card__list::-webkit-scrollbar-thumb:hover{
filter: brightness(1.12);
}
}
/* mobile ciaśniej */
@media (max-width: 768px){
.protego-cards{ gap:12px; }
.protego-card{ padding:16px 16px 14px; }
.protego-card :is(.protego-card__list, .elementor-widget-text-editor) li{ margin-bottom: 7px; }
}
/* =========================================
PROTEGO – HOTFIX po edycji treści (Elementor)
- przywraca zwarte odstępy
- czyści puste /
- scroll, gdy treści za dużo
========================================= */
/* scroll na liście (żeby stopka zawsze była na dole) */
.protego-card__list{
flex: 1 1 auto;
overflow: auto;
padding-right: 10px;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: var(--accent) rgba(255,255,255,.06);
}
/* wysokość listy: desktop / mobile */
@media (min-width: 1024px){
.protego-card__list{ max-height: 330px; }
}
@media (max-width: 1023px){
.protego-card__list{ max-height: 60vh; }
}
/* twardy reset listy w obrębie .protego-card__list */
.protego-card__list :where(ul,ol){
margin: 0 !important;
padding-left: 0 !important;
list-style: none !important;
}
/* rytm punktów (ważne: !important, bo motyw/Elementor potrafi nadpisać) */
.protego-card__list :where(li){
position: relative;
margin: 0 0 6px 0 !important;
padding-left: 18px !important;
line-height: 1.45 !important;
}
.protego-card__list :where(li:last-child){
margin-bottom: 0 !important;
}
/* najczęstszy winowajca “dziur”: w
+ czasem puste akapity */
.protego-card__list :where(li p){
margin: 0 !important;
display: inline !important;
}
.protego-card__list :where(li p:empty){
display: none !important;
}
/* usuń puste punkty (często powstają przez puste linie w edytorze) */
.protego-card__list :where(li:empty){
display: none !important;
}
/* kropka: zawsze w kolorze karty */
.protego-card__list :where(li)::before{
content:"";
position:absolute;
left:0;
top:.62em;
width:6px;
height:6px;
border-radius:999px;
background: var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* scroll webkit */
@media (min-width: 1024px){
.protego-card__list::-webkit-scrollbar{ width: 8px; }
.protego-card__list::-webkit-scrollbar-track{
background: rgba(255,255,255,.06);
border-radius: 999px;
}
.protego-card__list::-webkit-scrollbar-thumb{
background: var(--accent);
border-radius: 999px;
border: 2px solid rgba(10,14,20,.92);
}
}
/* =========================================
PROTEGO – LISTY W KARTACH: przywróć rytm + kropki + scroll
(wklej NA SAM KONIEC)
========================================= */
/* 1) scroll tylko gdy trzeba (zostaje uniwersalnie) */
@media (min-width: 1024px){
.protego-card .protego-card__list{
max-height: 330px;
overflow: auto;
padding-right: 10px;
overscroll-behavior: contain;
}
}
/* 2) TWARDY reset stylu listy – dokładnie w środku widgetu Elementora */
.protego-card .protego-card__list .elementor-widget-container ul{
margin: 0 !important;
padding-left: 0 !important;
list-style: none !important; /* wyłączamy marker, bo robimy własne kropki */
}
/* 3) RYT M: tu ustawiasz „oddech” (to jest ten efekt, który zniknął) */
.protego-card .protego-card__list .elementor-widget-container li{
position: relative !important;
margin: 0 0 12px 0 !important; /* <-- odstęp między punktami (było “jak wcześniej”) */
padding-left: 22px !important; /* <-- miejsce na kropkę + oddech */
line-height: 1.62 !important; /* <-- odstęp w samym tekście */
}
.protego-card .protego-card__list .elementor-widget-container li:last-child{
margin-bottom: 0 !important;
}
/* 4) usuń „dziury” robione przez w środku
(ale NIE ściskaj tekstu) */
.protego-card .protego-card__list .elementor-widget-container li p{
margin: 0 !important; /* to kluczowe */
}
/* 5) kropka – jedna, równa, zawsze w kolorze karty */
.protego-card .protego-card__list .elementor-widget-container li::before{
content: "" !important;
position: absolute !important;
left: 0 !important;
top: .68em !important; /* optycznie równo względem pierwszej linii */
width: 7px !important;
height: 7px !important;
border-radius: 999px !important;
background: var(--accent) !important;
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}
/* 6) jeśli gdzieś wrócił marker (podwójne kropki) – odetnij */
.protego-card .protego-card__list .elementor-widget-container li::marker{
content: "" !important;
}
/* =========================================================
PATCH TOUCH UX — karty wskazań/przeciwwskazań
Desktop: scroll wewnątrz listy
Tablet + mobile: brak wewnętrznego scrolla, scrolluje się cała strona
Wklej NA SAM DÓŁ
========================================================= */
/* 1) Desktop / większe ekrany — scroll w środku zostaje */
@media (min-width: 1024px){
.protego-card .protego-card__list{
max-height: 330px !important;
overflow: auto !important;
padding-right: 10px !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
}
/* 2) Tablet + telefon — WYŁĄCZ scroll wewnętrzny (koniec z "pułapką" dotyku) */
@media (max-width: 1023px){
.protego-card .protego-card__list{
max-height: none !important; /* zamiast 60vh */
height: auto !important;
overflow: visible !important; /* klucz */
padding-right: 0 !important;
overscroll-behavior: auto !important; /* nie blokuj scroll chain */
-webkit-overflow-scrolling: auto;
touch-action: auto;
}
/* Na mobile scrollbary i tak niepotrzebne */
.protego-card .protego-card__list::-webkit-scrollbar{
width: 0 !important;
height: 0 !important;
}
}
/* 3) Asekuracja: jeśli Elementor/motyw łapie dotyk na wewnętrznych warstwach */
.protego-card .protego-card__list,
.protego-card .protego-card__list *{
pointer-events: auto;
}
/* =========================================================
PATCH HYBRYDOWY — phone vs tablet (Elementor: 767 / 1068)
- PHONE: brak wewnętrznego scrolla
- TABLET: scroll wewnętrzny wraca + lepszy UX dotyku
========================================================= */
/* 1) TELEFON (<=767) — bez wewnętrznego scrolla */
@media (max-width: 767px){
.protego-card .protego-card__list{
max-height: none !important;
height: auto !important;
overflow: visible !important;
padding-right: 0 !important;
overscroll-behavior: auto !important;
-webkit-overflow-scrolling: auto;
touch-action: auto;
}
.protego-card .protego-card__list::-webkit-scrollbar{
width: 0 !important;
height: 0 !important;
}
}
/* 2) TABLET (768–1068) — scroll wewnętrzny wraca */
@media (min-width: 768px) and (max-width: 1068px){
.protego-card .protego-card__list{
/* wracamy do scrolla, ale w bardziej "tabletowym" zakresie */
max-height: clamp(240px, 34vh, 360px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 8px !important;
/* KLUCZ: pozwól scroll chain iPage -> strona po dojściu do końca */
overscroll-behavior-y: auto !important;
overscroll-behavior-x: contain !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: var(--accent) rgba(255,255,255,.06);
}
/* scrollbar webkit także na tablecie */
.protego-card .protego-card__list::-webkit-scrollbar{ width: 8px; }
.protego-card .protego-card__list::-webkit-scrollbar-track{
background: rgba(255,255,255,.06);
border-radius: 999px;
}
.protego-card .protego-card__list::-webkit-scrollbar-thumb{
background: var(--accent);
border-radius: 999px;
border: 2px solid rgba(10,14,20,.92);
}
}
/* 3) DESKTOP (>=1069) — zostaje jak było, ale twardo dla pewności */
@media (min-width: 1069px){
.protego-card .protego-card__list{
max-height: 330px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 10px !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-98a6fa9 *//**
* ================================================================
* PRZYCISK — ELECTRIC BLUE NEON (scope: .ps-ex-btn--electric)
* Kolor bazowy bierze z lewej karty: --browse-ring-2 (#58E0FF fallback)
* ================================================================
*/
/* Kolory/parametry tylko dla tego wariantu */
.ps-ex-btn--electric{
--ex-color: var(--browse-ring-2, #58E0FF); /* obrys domyślny (electric blue) */
--ex-hover: #66F6FF; /* obrys po hover (jaśniejszy neon) */
--ex-gloss: rgba(255,255,255,.20); /* połysk */
}
/* Docelowy element przycisku */
.ps-ex-btn--electric .elementor-button,
.ps-ex-btn--electric a.elementor-button,
.ps-ex-btn--electric .elementor-button-link{
position: relative;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #fff !important;
overflow: hidden; /* trzymamy pseudo-elementy w środku */
isolation: isolate; /* tekst nad warstwami */
/* brak width tutaj – szerokość kontroluje Elementor */
}
/* Tekst/ikona nad warstwami */
.ps-ex-btn--electric .elementor-button .elementor-button-content-wrapper{
position: relative;
z-index: 2;
}
/* Skórka: cienkie, neonowe obramowanie + lekko przyciemnione wnętrze */
.ps-ex-btn--electric .elementor-button::before,
.ps-ex-btn--electric a.elementor-button::before,
.ps-ex-btn--electric .elementor-button-link::before{
content:"";
position:absolute; inset:0;
border-radius: inherit; /* przejmuje radius z Elementora */
box-sizing:border-box;
background: rgba(0,0,0,.22); /* delikatnie przyciemnia tło */
border: 2px solid var(--ex-color); /* ELECTRIC BLUE */
box-shadow:
0 0 0 1px rgba(88,224,255,.12), /* subtelny ring */
0 10px 20px rgba(0,0,0,.25); /* cień w dół */
transition: border-color .25s ease, box-shadow .25s ease, filter .25s ease;
z-index: 0;
}
/* Połysk przesuwający się po hover */
.ps-ex-btn--electric .elementor-button::after,
.ps-ex-btn--electric a.elementor-button::after,
.ps-ex-btn--electric .elementor-button-link::after{
content:"";
position:absolute; top:0; left:-110%;
width:75%; height:100%;
background: linear-gradient(90deg, transparent, var(--ex-gloss), transparent);
transform: skewX(-25deg);
transition: left .8s ease;
z-index: 1;
}
.ps-ex-btn--electric .elementor-button:hover::after,
.ps-ex-btn--electric a.elementor-button:hover::after,
.ps-ex-btn--electric .elementor-button-link:hover::after{
left: 150%;
}
/* Hover: jaśniejszy neon + delikatny „glow” */
.ps-ex-btn--electric .elementor-button:hover::before,
.ps-ex-btn--electric a.elementor-button:hover::before,
.ps-ex-btn--electric .elementor-button-link:hover::before{
border-color: var(--ex-hover);
box-shadow:
0 0 8px rgba(102,246,255,.35),
0 0 0 1px rgba(102,246,255,.18),
0 12px 24px rgba(0,0,0,.28);
filter: brightness(1.02);
}
/* === ELECTRIC button: hover = TURKUS === */
.ps-ex-btn--electric{
--ex-hover: #00D9C0; /* turkus na hover */
}
/* dopasowany „glow” pod turkus — nadpisuje wcześniejsze */
.ps-ex-btn--electric .elementor-button:hover::before,
.ps-ex-btn--electric a.elementor-button:hover::before,
.ps-ex-btn--electric .elementor-button-link:hover::before{
border-color: var(--ex-hover) !important;
/* użyj koloru z var --ex-hover do poświaty */
box-shadow:
0 0 8px color-mix(in srgb, var(--ex-hover) 40%, transparent),
0 0 0 1px color-mix(in srgb, var(--ex-hover) 24%, transparent),
0 12px 24px rgba(0,0,0,.28) !important;
}
/* fallback gdy color-mix nie jest dostępny */
@supports not (color-mix(in srgb, white 50%, black 50%)){
.ps-ex-btn--electric .elementor-button:hover::before,
.ps-ex-btn--electric a.elementor-button:hover::before,
.ps-ex-btn--electric .elementor-button-link:hover::before{
box-shadow:
0 0 8px rgba(0,217,192,.35),
0 0 0 1px rgba(0,217,192,.18),
0 12px 24px rgba(0,0,0,.28) !important;
}
}/* End custom CSS */