/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*--- Ogolne ---*/

.no-margin p {
	margin-block-end: 0 !important;
}

/*--- Kolory ---*/
.color-secondary-300 {
	color: var(--e-global-color-3f40515) !important;
	display: inline;
}
.color-primary-500 {
	color: var(--e-global-color-74f170a) !important;
	display: inline;
}

.color-neutral-600 {
	color: var(--e-global-color-7ed1b7b) !important;
	display: inline;	
}

.color-neutral-700 {
	color: var(--e-global-color-db4573d) !important;
}

/*--- Reset ---*/
.elementor-widget .elementor-icon-list-icon + .elementor-icon-list-text {
  padding-inline-start: 0 !important;
}

.elementor-widget.elementor-widget-icon-list .elementor-icon-list-icon svg {
  margin: 0 !important;
}

/*--- GSAP - Lenis smooth-scroll ---*/

html {
  scroll-behavior: auto !important;
}
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}


/*--- Hero - Link card green - Efekt tła przesuwającego się od dołu do góry przy hover/active ---*/
.custom-hover-bg-green {
  position: relative;
  overflow: hidden;
  background-color: var(--e-global-color-1cdb11b) !important;
  z-index: 0;
}

.custom-hover-bg-green::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* Domyślnie ustawiony kolor tła na hover */
  background-color: var(--e-global-color-74a9c11) !important;
  /* Startujemy poza widocznym obszarem (od dołu) */
  transform: translateY(100%);
  /* Przejścia dla transformacji i zmiany koloru */
  transition: transform 0.5s ease, background-color 0.5s ease;
  pointer-events: none;
  z-index: -1;
}

/* Stan hover – pseudo-element przesuwa się do góry */
.custom-hover-bg-green:hover::before {
  transform: translateY(0);
}

/* Stan active – gdy klikamy, pseudo-element również przesuwa się do góry 
   oraz zmienia kolor tła na var(--e-global-color-74f170a) */
.custom-hover-bg-green:active::before {
  transform: translateY(0);
  background-color: var(--e-global-color-74f170a) !important;
}

/*--- Hero - Link card yellow - Efekt tła przesuwającego się od dołu do góry przy hover/active ---*/
.custom-hover-bg-yellow {
  position: relative;
  overflow: hidden;
  background-color: var(--e-global-color-c4cf960) !important;
  z-index: 0;
}

.custom-hover-bg-yellow::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* Domyślnie ustawiony kolor tła na hover */
  background-color: var(--e-global-color-5c9b137) !important;
  /* Startujemy poza widocznym obszarem (od dołu) */
  transform: translateY(100%);
  /* Przejścia dla transformacji i zmiany koloru */
  transition: transform 0.5s ease, background-color 0.5s ease;
  pointer-events: none;
  z-index: -1;
}

/* Stan hover – pseudo-element przesuwa się do góry */
.custom-hover-bg-yellow:hover::before {
  transform: translateY(0);
}

/* Stan active – gdy klikamy, pseudo-element również przesuwa się do góry 
   oraz zmienia kolor tła na var(--e-global-color-6081723) */
.custom-hover-bg-yellow:active::before {
  transform: translateY(0);
  background-color: var(--e-global-color-6081723) !important;
}

/*--- Hero - Link card green - Efekt przesunięcia ikony---*/
/* Kontener główny – ukrywa zawartość wychodzącą poza jego granice */
.custom-hover-bg-green {
  position: relative;
  overflow: hidden;
}

/* Kontener ikony – wymusza stałe wymiary i usuwa odstępy */
.custom-icon-list .elementor-icon-list-icon {
  position: relative;
  width: 21px !important;
  height: 20px !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
  line-height: 0;
}

/* SVG wewnątrz kontenera – pozycjonujemy absolutnie i ustawiamy animację */
.custom-icon-list .elementor-icon-list-icon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 21px;
  height: 20px;
  transform: translateX(0) !important;
  transition: transform 0.2s ease-in-out !important;
}

/* Na hover głównego kontenera – przesuwamy SVG o 21px w prawo */
.custom-hover-bg-green:hover .custom-icon-list .elementor-icon-list-icon svg {
  transform: translateX(21px) !important;
}

/* Pseudo-element ::before, który będzie reprezentował ikonę wpadającą z lewej */
.custom-hover-bg-green .custom-icon-list .elementor-icon-list-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -21px; /* Poza lewym brzegiem */
  width: 21px;
  height: 20px;
  
/* Ustawiamy kolor, aby dopasować do ikony – tutaj currentColor, ale możesz podać konkretny kolor */
  background-color: var(--e-global-color-c791d76) !important;
  
/* Używamy maski, by uzyskać kształt SVG – podmień URL na ścieżkę do swojego pliku SVG lub data-uri */
  mask: url("/wp-content/uploads/2025/03/right-down.svg") no-repeat center;
  -webkit-mask: url("/wp-content/uploads/2025/03/right-down.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  opacity: 0; /* Początkowo niewidoczny */
  transform: translateX(0);
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Na hover pseudo-element przesuwa się o 21px (czyli z -21px do 0) i staje się widoczny */
.custom-hover-bg-green:hover .custom-icon-list .elementor-icon-list-icon::before {
  transform: translateX(21px);
  opacity: 1;
}

/*--- Hero - Link card yellow - Efekt przesunięcia ikony---*/
/* Kontener główny – ukrywa zawartość wychodzącą poza jego granice */
.custom-hover-bg-yellow {
  position: relative;
  overflow: hidden;
}
/* Na hover głównego kontenera – przesuwamy SVG o 21px w prawo */
.custom-hover-bg-yellow:hover .custom-icon-list .elementor-icon-list-icon svg {
  transform: translateX(21px) !important;
}

/* Pseudo-element ::before, który będzie reprezentował ikonę wpadającą z lewej */
.custom-hover-bg-yellow .custom-icon-list .elementor-icon-list-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -21px; /* Poza lewym brzegiem */
  width: 21px;
  height: 20px;
  
/* Ustawiamy kolor, aby dopasować do ikony – tutaj currentColor, ale możesz podać konkretny kolor */
  background-color: var(--e-global-color-7ed1b7b) !important;
  
/* Używamy maski, by uzyskać kształt SVG – podmień URL na ścieżkę do swojego pliku SVG lub data-uri */
  mask: url("/wp-content/uploads/2025/03/right-down-2.svg") no-repeat center;
  -webkit-mask: url("/wp-content/uploads/2025/03/right-down-2.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
  opacity: 0; /* Początkowo niewidoczny */
  transform: translateX(0);
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Na hover pseudo-element przesuwa się o 21px (czyli z -21px do 0) i staje się widoczny */
.custom-hover-bg-yellow:hover .custom-icon-list .elementor-icon-list-icon::before {
  transform: translateX(21px);
  opacity: 1;
}


/*--- Primary button ---*/
/* Upewnij się, że element <a> (przycisk) jest pozycjonowany relatywnie */
.primaty-button-green a.jet-button__instance {
  position: relative;
  z-index: 1;
}

/* Pseudo-element ::after, który symuluje wewnętrzne obramowanie */
.primaty-button-green a.jet-button__instance::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease;
  z-index: 3;
  border-radius: 8px;
}

/* Na stanie :active lub :focus pseudo-element zmienia kolor obramowania */
.primaty-button-green a.jet-button__instance:active::after,
.primaty-button-green a.jet-button__instance:focus::after {
  border-color: var(--e-global-color-74f170a) !important;
}

/*--- Secondary button ---*/
/* Upewnij się, że element <a> (przycisk) jest pozycjonowany relatywnie */
.secondary-button-yellow a.jet-button__instance {
  position: relative;
  z-index: 1;
}

/* Pseudo-element ::after, który symuluje wewnętrzne obramowanie */
.secondary-button-yellow a.jet-button__instance::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease;
  z-index: 3;
  border-radius: 8px;
}

/* Na stanie :active lub :focus pseudo-element zmienia kolor obramowania */
.secondary-button-yellow a.jet-button__instance:active::after,
.secondary-button-yellow a.jet-button__instance:focus::after {
  border-color: var(--e-global-color-3f40515) !important;
}

/*--- Invidental button ---*/

/* Ustawienia dla widgetu tekstowego – tło, które ma być widoczne w hover */
.incidental-button-label {
  position: relative;
  background-color: var(--e-global-color-c4cf960) !important; /* tło hover */
  z-index: 1;
  overflow: hidden;
}

/* Pseudo-element ::before – przykrywa cały widget domyślnym tłem (idle) */
.incidental-button-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--e-global-color-3f40515) !important; /* tło idle */
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.3s ease;
  z-index: 0;
}

/* Na hover na kontenerze, pseudo-element kurczy się, odsłaniając tło hover */
.incidental-button:hover .incidental-button-label::before {
  transform: scaleX(0);
}

/* Wymuszamy, aby tekst był ponad pseudo-elementem */
.incidental-button-label p {
  position: relative;
  z-index: 2;
  /* Opcjonalnie: ustaw kolor tekstu, by był czytelny na obu tłach */
  color: inherit;
}

/* Pseudo-element ::after – dla stanu active, początkowo schowany (przesunięty w dół) */
.incidental-button-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--e-global-color-c791d76) !important; /* kolor active */
  transform: translateY(100%);
  transition: transform 0.3s ease;
  /* Ustawiamy ::after ponad idle tłem, ale pod tekstem */
  z-index: 1;
}

/* Po aktywacji – pseudo-element przesuwa się do góry (do pozycji 0) */
.incidental-button:active .incidental-button-label::after {
  transform: translateY(0);
}

/* Opcjonalnie – na stanie active możemy ukryć idle tło */
.incidental-button:active .incidental-button-label::before {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/*--- Invidental button na elemencie unfold ---*/

/* Główny kontener przycisku */
.jet-unfold__button {
  display: inline-block;
}

/* Element tekstowy – tło widoczne po hover */
.jet-unfold__button-text {
  position: relative;
  background-color: var(--e-global-color-c4cf960) !important; /* tło hover */
  z-index: 2;  /* zawartość (tekst) na wierzchu */
  overflow: hidden; /* ukrywa pseudo-elementy wychodzące poza obszar */
}

/* Pseudo-element ::before – idle tło */
.jet-unfold__button-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--e-global-color-3f40515) !important; /* idle tło */
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.3s ease;
  z-index: -1; /* ustawiamy za zawartością */
}

/* Efekt hover – idle tło kurczy się, odsłaniając tło hover */
.jet-unfold__button:hover .jet-unfold__button-text::before {
  transform: scaleX(0);
}

/* Pseudo-element ::after – efekt pressed/active */
.jet-unfold__button-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--e-global-color-c791d76) !important; /* kolor active */
  transform: translateY(100%); /* początkowo schowany */
  transition: transform 0.3s ease;
  z-index: -1; /* również za zawartością */
}

/* Na stanie active – pseudo-element przesuwa się do góry */
.jet-unfold__button:active .jet-unfold__button-text::after {
  transform: translateY(0);
}


/*--- Wyswietlanie postow loop grid ---*/

/* Główny kontener (link) */
.post-container-wrapper {
  overflow: hidden;
  position: relative;
}

/* Kontener z tłem obrazkowym – efekt zoom na zdjęcie */
.post-image-effect {
 background-size: 100% !important;
 transition: background-size 0.3s ease-in-out !important;
}

/* Po najechaniu na główny kontener zwiększamy background-size, co daje efekt zoom */
.post-container-wrapper:hover .post-image-effect {
  background-size: 110% !important;
}

/*--- Footer ---*/
/* === Footer button hover styl z animowaną kreską === */
.footer-button .elementor-button {
  position: relative;
  font-weight: 600;
  color: var(--e-global-color-3e4e497); /* Tekst domyślny */
  text-decoration: none;
  overflow: hidden; /* Żeby pseudo-element nie wystawał */
}

/* Animowana kreska pod tekstem */
.footer-button .elementor-button::after {
  content: '';
  position: absolute;
  left: 0;
  transform: translateY(2px); /* Lekko nad krawędzią przycisku */
  width: 0;
  height: 1px;
  background-color: var(--e-global-color-7ed1b7b);
  transition: width 0.3s ease-in-out;
}

/* Efekt hover */
.footer-button .elementor-button:hover::after {
  width: 100%;
}

.footer-button .elementor-button.active::after {
  width: 100% !important;
}

/*--- Ikony social media---*/

/* Kontener ikony (element <a> z klasą elementor-icon wewnątrz .social-media-icons) */
.social-media-icons .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Pseudo-element ::before – efekt hover */
.social-media-icons .elementor-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  background-color: var(--e-global-color-6081723);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  transition: transform 0.3s ease;
  z-index: 0;
}

/* Na hover – ::before rozrasta się */
.social-media-icons .elementor-icon:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

/* Pseudo-element ::after – efekt active: w stanie spoczynku schowany poniżej */
.social-media-icons .elementor-icon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 36px;
  background-color: var(--e-global-color-db4573d);
  border-radius: 50%;
  transform: translateY(100%);
  transform-origin: bottom;
  transition: transform 0.3s ease;
  z-index: 0;
}

/* Na active – ::after przesuwa się do góry, wypełniając kontener */
.social-media-icons .elementor-icon:active::after {
  transform: translateY(0);
}

/* Opcjonalnie – w stanie active ukrywamy efekt hover, aby nie mieszały się oba efekty */
.social-media-icons .elementor-icon:active::before {
  transform: translate(-50%, -50%) scale(0);
}

/* SVG pozostaje na wierzchu */
.social-media-icons .elementor-icon svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
}

/*--- JetProductGallery---*/
/* Upewnij się, że kontener miniatury ma określoną wysokość (JetProductGallery
   często ustawia ją inline - np. style="height: 63.3333px;").
   Poniższy kod wymusi, by obrazek wypełniał tę przestrzeń w formie "cover". */
/* miniaturka */
.pellet-gallery .jet-woo-swiper-control-thumbs__item-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* kluczowe, aby ukryć nadmiar obrazu przy object-fit: cover */
}

.pellet-gallery .jet-woo-swiper-control-thumbs__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* wypełnia cały kontener, przycinając nadmiar */
  object-position: center;  /* wyśrodkowanie */
  display: block;           /* zapobiega niepożądanym odstępom w trybie inline */
}


.pellet-gallery .jet-woo-swiper-control-thumbs__item {
padding: 4px !important;
background-color: var(--e-global-color-5c9b137) !important;
transition: background-color 0.3s ease-in-out !important;
}

.pellet-gallery .swiper-slide-thumb-active {
background-color: var(--e-global-color-3f40515) !important;
}

.pellet-gallery .jet-woo-swiper-control-thumbs__item-image {
border-radius: 8px;
}

/* Upewnij się, że kontener obrazu nie pokazuje niczego poza swoim obszarem */
.pellet-gallery .jet-woo-product-gallery__image-item {
  overflow: hidden !important;
}

/* Styl dla obrazka wewnątrz kontenera */
.pellet-gallery .jet-woo-product-gallery__image-item .jet-woo-product-gallery__image img {
  width: 100% !important;
  height: 733px !important;
  object-fit: cover !important;       /* wypełnia cały obszar, przycinając nadmiar */
  object-position: center !important; /* środek obrazka jest wycentrowany */
  display: block !important;
}

@media (max-width: 1024px) { 
.pellet-gallery .jet-woo-product-gallery__image-item .jet-woo-product-gallery__image img {
  height: 500px !important;
}
}

@media (max-width: 767px) {
.pellet-gallery .jet-woo-product-gallery__image-item .jet-woo-product-gallery__image img {
  height: 300px !important;
}	
}

.pellet-gallery .jet-woo-product-gallery-slider {
  border-radius: 12px !important;
}

/*--- Karuzela krok po kroku ---*/
.swiper-slide-active .slide-box {
    background-color: var( --e-global-color-3f40515 ) !important;
}

.anim-circle {
  width: 8px;
  height: 8px;
  background-color: var(--e-global-color-c791d76);
  border-radius: 50%;
  transition: all 0.3s ease; /* płynna animacja dla zmiany rozmiaru i koloru */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Stan aktywny – gdy rodzic otrzyma klasę .swiper-slide-active */
.swiper-slide-active .anim-circle {
  width: 32px;
  height: 32px;
  background-color: var(--e-global-color-3f40515);
}

/* Pseudo-element dla ikony – teraz widoczny */
.anim-circle::after {
  content: '';
  display: block;
  width: 0; /* Domyślnie 0, by nie zajmował miejsca */
  height: 0;
  opacity: 0; /* Ukryte na starcie */
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
  background-image: url('/wp-content/uploads/2025/03/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Aktywacja – ikona się pojawia */
.swiper-slide-active .anim-circle::after {
  width: 16px; /* Dodajemy rozmiar, by był widoczny */
  height: 16px;
  opacity: 1; /* Teraz jest widoczny */
}

/* Progress bar*/
.swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal {
  max-width: 100px;
}
.swiper-pagination-progressbar-fill {
  background-color: var(--e-global-color-3e4e497) !important;
}

.swiper-pagination-progressbar {
  background: var(--e-global-color-c791d76);
}

/* Ustawienie progress, nawigacja*/
.elementor-swiper-button-prev {
  background-color: var(--e-global-color-c791d76) !important;
}
/* Upewnij się, że główny kontener slidera pozwala na wyświetlanie elementów w jednym wierszu */
.step-by-step-slider {
  text-align: right !important; /* proste wyśrodkowanie elementów inline */
}
.step-by-step-slider .e-n-carousel {
  margin-bottom: 24px;
}

/* Sprawiamy, że progress bar nie jest absolutnie pozycjonowany i staje się elementem inline */
.step-by-step-slider .swiper-pagination.swiper-pagination-progressbar {
  position: static !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 24px 0 0 !important; /* odstępy między przyciskami a paskiem */
  width: 100px !important;  /* dopasuj do swojego layoutu */
}

/* Styl dla przycisków nawigacyjnych */
.step-by-step-slider .elementor-swiper-button-prev,
.step-by-step-slider .elementor-swiper-button-next {
  position: static !important;
  vertical-align: middle !important;
  margin: 0 2px !important;
}

/*--- Accordion - faq ---*/

.accordion-faq .e-n-accordion-item {
    border-radius: 12px;
    border: 1px solid var(--e-global-color-7ed1b7b);
}

/* Kontener ikony – musi mieć pozycjonowanie relatywne i overflow hidden */
.e-n-accordion-item-title-icon {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

/* Pseudo-element ::after – animowany overlay z nowym kolorem tła */
.e-n-accordion-item-title-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--e-global-color-c4cf960); /* docelowy kolor fill */
  /* Zaczynamy od 0% (niewidoczny) i rozprzestrzeniamy do pełnego obszaru */
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.3s ease;
  z-index: -1; /* umieszczamy pod SVG, żeby stroke był widoczny */
  pointer-events: none;
}

/* Na hover (na rodzicu tytułu) pseudo-element ::after rozszerza się */
.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon::after {
  clip-path: circle(150% at 50% 50%);
}

/* SVG path – standardowo ma fill #FFE2A0; ustawiamy pozycjonowanie, by był powyżej pseudo-elementu */
.e-n-accordion-item-title-icon svg path {
  fill: var(--e-global-color-3f40515);
  transition: fill 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Na hover – ustaw fill na transparent, by widoczny był pseudo-element z tłem */
.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon svg path {
  fill: #F4F0E7 !important;
}

.accordion-faq-wrapper .elementor-shape-bottom {
border-bottom: 200px solid var(--e-global-color-6081723);
}

body.elementor-editor-active .accordion-faq-wrapper .elementor-shape-bottom {
  display: none;
}

/* Obracanie ikony active */

.accordion-faq .e-n-accordion-item-title-icon .arrow-icon {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.accordion-faq .e-n-accordion-item-title-icon .e-opened .arrow-icon {
  transform: rotate(180deg);
}

/* Fix ikony - tablet mobile */
@media (max-width: 1024px) {
	.e-n-accordion-item-title-icon {
		overflow: visible;
}
}

/*--- Breadcrumbs ---*/
.custom-breadcrumbs .elementor-inline-item a {
  font-weight: 600 !important;
  color: var(--e-global-color-3e4e497) !important;
  position: relative; /* Umożliwia pozycjonowanie pseudo-elementu względem linka */
  text-decoration: none;
}

.custom-breadcrumbs .elementor-inline-item a::after {
  content: '';
  position: absolute;
  left: 0;
  width: 0;
  transform: translateY(10px);
  height: 1px; /* Grubość linii – możesz dostosować */
  background-color: var(--e-global-color-7ed1b7b); /* Kolor linii */
  transition: width 0.3s ease-in-out; /* Czas i rodzaj animacji */
}

.custom-breadcrumbs .elementor-inline-item a:hover::after {
  width: 100%; /* Pełna szerokość linka przy hover */
} 

.custom-breadcrumbs span.elementor-icon-list-text {
    padding: 7px 0;
}

/*--- Formularz kontaktowy ---*/
.contact-form-wrapper .elementor-field:not(.elementor-select-wrapper):not(.elementor-acceptance-field) {
  border-bottom: 1px solid var(--e-global-color-0195054) !important;
  border-top: 1px solid var(--e-global-color-6081723) !important;
  border-left: 1px solid var(--e-global-color-6081723) !important;
  border-right: 1px solid var(--e-global-color-6081723) !important;
}

.contact-form-wrapper .elementor-field-group input.elementor-field-textual:hover,
.contact-form-wrapper .elementor-form-fields-wrapper textarea.elementor-field-textual:hover {
  border-bottom: 1px solid var(--e-global-color-0195054) !important;
  border-top: 1px solid var(--e-global-color-0195054) !important;
  border-left: 1px solid var(--e-global-color-0195054) !important;
  border-right: 1px solid var(--e-global-color-0195054) !important;
}


.contact-form-wrapper .elementor-field-group input.elementor-field-textual:focus,
.contact-form-wrapper .elementor-form-fields-wrapper textarea.elementor-field-textual:focus {
  box-shadow: none !important;
  outline: 0;
  border: 1px solid var(--e-global-color-3e4e497) !important;
  background-color: var(--e-global-color-c4cf960) !important;
}


.contact-form-wrapper .elementor-form-fields-wrapper input.elementor-field-textual:hover,
.contact-form-wrapper .elementor-form-fields-wrapper textarea.elementor-field-textual:hover {
  background-color: var(--e-global-color-c4cf960) !important;
}

/*--- Checkbox Kontakt ---*/
/* Podstawowy styl checkboxa */
.contact-form-wrapper .elementor-acceptance-field {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid var(--e-global-color-c791d76) !important;
  border-radius: 2px !important;
  background-color: var(--e-global-color-5c9b137) !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-block !important;
}

/* Efekt hover – dla niezaznaczonego checkboxa, gdy nie ma klasy instant-uncheck */
.contact-form-wrapper .elementor-acceptance-field:not(:checked):not(.instant-uncheck)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: var(--e-global-color-c791d76);
  transition: height 0.15s ease-in-out;
  pointer-events: none;
  z-index: 2;
}
.contact-form-wrapper .elementor-field-type-acceptance:hover .elementor-acceptance-field:not(:checked):not(.instant-uncheck)::after {
  transition: height 0.15s ease-in-out 0.2s;
  height: 100%;
}

/* Efekt hover dla checkboxa z klasą .instant-uncheck, gdy jest hoverowany */
/* Dzięki temu, po odkliknięciu, jeśli kursor nadal jest nad checkboxem, efekt hover pojawi się od razu */
.contact-form-wrapper .elementor-acceptance-field.instant-uncheck:hover::after {
  transition: none !important;
  height: 100% !important;
  opacity: 1 !important;
}

/* Efekt zaznaczenia – tło wypełniające (grow od środka) */
/* Używamy ::before do animacji wypełnienia */
.contact-form-wrapper .elementor-acceptance-field::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--e-global-color-6faa1e1);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease-in-out;
  z-index: 1;
}
.contact-form-wrapper .elementor-acceptance-field:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

/* Efekt zaznaczenia – ikona SVG */
.contact-form-wrapper .elementor-acceptance-field:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  background-image: url("/wp-content/uploads/2025/03/check3.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.contact-form-wrapper .elementor-acceptance-field:checked::after {
  opacity: 1;
}

/* Natychmiastowy reset efektów po odkliknięciu */
.contact-form-wrapper .elementor-acceptance-field.instant-uncheck::before {
  transition: all 0.15s ease-in-out !important;
  transform: translate(-50%, -50%) scale(0) !important;
}
.contact-form-wrapper .elementor-acceptance-field.instant-uncheck::after {
  transition: all 0.15s ease-in-out !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* Styl dla etykiety (label) z polem akceptacji */
.contact-form-wrapper .elementor-field-type-acceptance label {
  display: inline-flex;
  align-items: center; /* Wypoziomowanie tekstu względem inputa */
  font-family: var(--e-global-typography-4aea241-font-family), Sans-serif !important;
  font-size: var(--e-global-typography-4aea241-font-size) !important;
  font-weight: var(--e-global-typography-4aea241-font-weight) !important;
  line-height: var(--e-global-typography-4aea241-line-height) !important;
  letter-spacing: var(--e-global-typography-4aea241-letter-spacing) !important;
  color: var(--e-global-color-7ed1b7b) !important;
  margin-left: 10px !important; /* oddalenie linku od poprzedzającego tekstu */
}

/* Styl dla linku wewnątrz etykiety */
.contact-form-wrapper .elementor-field-type-acceptance label a {
  color: var(--e-global-color-7ed1b7b);
  text-decoration: none;
  border-bottom: 1px solid var(--e-global-color-7ed1b7b); /* podkreślenie 1px */
  position: relative;
}

/* Dodanie ikony na końcu linku przy użyciu pseudo-elementu ::after */
.contact-form-wrapper .elementor-field-type-acceptance label::after {
  content: "";
  display: inline-block;
  background-image: url("/wp-content/uploads/2025/03/external-link.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 14px;  /* dostosuj w razie potrzeby */
  height: 14px; /* dostosuj w razie potrzeby */
  margin-left: 4px; /* oddalenie ikony od tekstu */
  vertical-align: middle;
}

.contact-form-wrapper .elementor-field-subgroup .elementor-field-option {
	display: flex;
}

.contact-form-wrapper .elementor-field-type-acceptance {
  margin-top: -8px;
}

.contact-form-wrapper .elementor-field-textual {
padding: 8px 16px !important;
}

.contact-form-wrapper .elementor-field-subgroup .elementor-field-option {
	flex-wrap: wrap;
}

/*--- Po wysylce formularza ---*/
/* Kontener sukcesu ukryty domyślnie */
.contact-form-success-container {
  display: none;
  transition: all 0.5s ease;
}

/* Klasa visible wymusza wyświetlenie kontenera sukcesu */
.contact-form-success-container.visible {
  display: block !important;
}

/* Komunikaty formularza */
.elementor-widget-form .elementor-message {
font-family: var( --e-global-typography-9a06041-font-family ), Sans-serif !important;
font-size: var( --e-global-typography-9a06041-font-size ) !important;
font-weight: var( --e-global-typography-9a06041-font-weight ) !important;
line-height: var( --e-global-typography-9a06041-line-height ) !important;
letter-spacing: var( --e-global-typography-9a06041-letter-spacing ) !important;
margin: 10px 0 0 0;
}
.elementor-message.elementor-message-danger {
color: var(--e-global-color-c3e3afe) !important;
}

.elementor-message.elementor-message-danger::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-inline-end: 5px;
  vertical-align: top;
  background: url("/wp-content/uploads/2025/03/Error.svg") no-repeat center;
  background-size: contain;
}

/*--- Blog archiwum ---*/
.blog-post-filter .e-filter {
padding: 8px;
background-color: var( --e-global-color-c4cf960 );
border-radius: 99px;
}
/*--- Blog paginacja ---*/
/* Bazowy styl numerów stron (bez prev/next) */
.elementor-pagination .page-numbers:not(.prev):not(.next) {
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background-color: var(--e-global-color-5c9b137);
  border: 1px solid var(--e-global-color-c791d76);
  border-radius: 50%;
  position: relative;
  margin: 0 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Wewnętrzny okrąg – pseudo-element ::before, przylegający do głównego obramowania */
.elementor-pagination .page-numbers:not(.prev):not(.next)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid var(--e-global-color-5c9b137);
  border-radius: 50%;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* Tekst (numery stron) – wycentrowany dzięki flex */
.elementor-pagination .page-numbers:not(.prev):not(.next) span,
.elementor-pagination .page-numbers:not(.prev):not(.next) a {
  position: relative;
  z-index: 2;
  font-weight: bold;
}

/* Efekt hover – fade in zmienia tło i border */
.elementor-pagination .page-numbers:not(.prev):not(.next):hover {
  background-color: var(--e-global-color-6081723);
  border-color: var(--e-global-color-7ed1b7b);
}

/* Animacja dla stanu pressed (aktywnego) – efekt "od góry do dołu" */
@keyframes fillDown {
  from {
    background-size: 100% 0%;
    background-position: top;
  }
  to {
    background-size: 100% 100%;
    background-position: bottom;
  }
}

/* Stan pressed – gdy przycisk jest wciśnięty */
.elementor-pagination .page-numbers:not(.prev):not(.next):active {
  background: var(--e-global-color-7ed1b7b);
  border-color: var(--e-global-color-7ed1b7b);
  animation: fillDown 0.5s forwards;
  color: var(--e-global-color-5c9b137) !important;
}

/* Podczas stanu pressed – zmiana pseudo-elementu ::before */
.elementor-pagination .page-numbers:not(.prev):not(.next):active::before {
  border-color: var(--e-global-color-7ed1b7b);
}

/* Stan current – aktywny numer strony */
.elementor-pagination .page-numbers:not(.prev):not(.next).current {
  background: var(--e-global-color-7ed1b7b);
  border-color: var(--e-global-color-7ed1b7b);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.elementor-pagination .page-numbers:not(.prev):not(.next).current::before {
  border-color: var(--e-global-color-7ed1b7b);
}

/* Styl dla przycisków Prev i Next (ikony) */
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background-color: var(--e-global-color-5c9b137);
  border: 1px solid var(--e-global-color-c791d76);
  border-radius: 50%;
  position: relative;
  margin: 0 4px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  /* Ukrywamy tekst */
  color: transparent;
  text-indent: -9999px;
}

/* Wewnętrzny okrąg dla Prev i Next – pseudo-element ::before */
.elementor-pagination .page-numbers.prev::before,
.elementor-pagination .page-numbers.next::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid var(--e-global-color-5c9b137);
  border-radius: 50%;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

/* Ikony dla Prev i Next – pseudo-element ::after */
.elementor-pagination .page-numbers.prev::after,
.elementor-pagination .page-numbers.next::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
}

/* Ustawienie ikony dla Prev */
.elementor-pagination .page-numbers.prev::after {
  background-image: url("/wp-content/uploads/2025/03/chevron-left.svg");
}

/* Ustawienie ikony dla Next */
.elementor-pagination .page-numbers.next::after {
  background-image: url("/wp-content/uploads/2025/03/chevron-right.svg");
}

/* Efekt hover dla Prev i Next – zmiana tła oraz border */
.elementor-pagination .page-numbers.prev:hover,
.elementor-pagination .page-numbers.next:hover {
  background-color: var(--e-global-color-6081723);
  border-color: var(--e-global-color-7ed1b7b) !important;
}

.elementor-pagination .page-numbers.prev:hover::before,
.elementor-pagination .page-numbers.next:hover::before {
  border-color: var(--e-global-color-5c9b137);
}

/*--- Blog wpis ---*/

/* === Styl hover linków wewnątrz wybranych tagów === */
.post-content-area p a,
.post-content-area li a,
.post-content-area blockquote a {
  font-weight: 500;
  color: var(--e-global-color-3e4e497);
  text-decoration: none;
  position: relative;
}

/* Pseudo-element z animowaną kreską */
.post-content-area p a::after,
.post-content-area li a::after,
.post-content-area blockquote a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background-color: var(--e-global-color-7ed1b7b);
  transition: width 0.3s ease-in-out;
}

/* Efekt przy najechaniu */
.post-content-area p a:hover::after,
.post-content-area li a:hover::after,
.post-content-area blockquote a:hover::after {
  width: 100%;
}

.no-margin-blog p:last-of-type {
  margin-bottom: 0 !important;
}

/*--- Nasza Jakosc - step by step ---*/
/* Twoje oryginalne style pozostają bez zmian */

.scroll-quality-text-wrapper > div {
  opacity: 1;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Styl aktywnego kontenera – zmiana tła */
.scroll-quality-text-wrapper > div.active {
  background-color: var(--e-global-color-3f40515) !important;
}


.scroll-quality-gallery .jet-gallery-swiper-thumb {
  margin-top: -65px;
  padding: 0 20px;
}

.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* kluczowe, aby ukryć nadmiar obrazu przy object-fit: cover */
}

.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease-in-out;
  transform: scale(1);
}

.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item-image:hover img {
  transform: scale(1.1); /* Możesz podbić np. do 1.15 dla mocniejszego efektu */
}

.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item {
  padding: 4px !important;
  background-color: var(--e-global-color-5c9b137) !important;
  transition: background-color 0.3s ease-in-out !important;
  border-radius: 12px;
  position: relative; /* potrzebne do pozycjonowania pseudo-elementu */
  overflow: visible !important; /* zapewnia, że pseudo-element nie będzie przycinany */
}

.scroll-quality-gallery .swiper-slide-thumb-active {
  background-color: var(--e-global-color-1cdb11b) !important;
}

.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item-image {
  border-radius: 8px;
  max-height: 112px;
}

/* Upewnij się, że kontener obrazu nie pokazuje niczego poza swoim obszarem */
.scroll-quality-gallery .jet-woo-product-gallery__image-item {
  overflow: hidden !important;
}

/* Styl dla obrazka wewnątrz kontenera */
.scroll-quality-gallery .jet-woo-product-gallery__image-item .jet-woo-product-gallery__image img {
  width: 100% !important;
  height: 500px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
	border-radius: 16px !important;
}

.scroll-quality-gallery .jet-woo-product-gallery-slider {
  border-radius: 12px !important;
}

.scroll-quality-gallery .swiper-slide-active .jet-woo-swiper-control-thumbs__item-image {
  opacity: 1 !important;
}

/* Nadpisujemy overflow wrappera miniatur, aby pseudo-element mógł być widoczny */
.scroll-quality-gallery .swiper-wrapper {
  overflow: visible !important;
}

/* Nowe reguły dla kwadracików z numerami */

/* Pseudo-element z numerem – kwadrat 32x32px, wycentrowany poziomo, wychodzący poniżej miniaturki */
.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  bottom: 0; /* Ustawiamy dolną krawędź pseudo-elementu na dolnej krawędzi rodzica */
  left: 50%;
  transform: translate(-50%, 50%); /* Przesunięcie w dół o 50% wysokości (16px) */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: var(--e-global-typography-4aea241-font-family), Sans-serif;
  font-size: var(--e-global-typography-4aea241-font-size);
  font-weight: var(--e-global-typography-4aea241-font-weight);
  line-height: var(--e-global-typography-4aea241-line-height);
  letter-spacing: var(--e-global-typography-4aea241-letter-spacing);
}

/* Styl dla nieaktywnej miniaturki – kwadrat wypełniony kolorem i numer w innym kolorze */
.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item:not(.swiper-slide-thumb-active)::after {
  background-color: var(--e-global-color-6081723);
  color: var(--e-global-color-db4573d);
}

/* Styl dla aktywnej miniaturki – kwadrat z innym tłem i numerem w innym kolorze */
.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item.swiper-slide-thumb-active::after {
  background-color: var(--e-global-color-1cdb11b);
  color: var(--e-global-color-6081723);
}

/* Numeracja – przypisanie numerów dla kolejnych miniatur */
.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item:nth-child(1)::after {
  content: "1";
}
.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item:nth-child(2)::after {
  content: "2";
}
.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item:nth-child(3)::after {
  content: "3";
}
.scroll-quality-gallery .jet-woo-swiper-control-thumbs__item:nth-child(4)::after {
  content: "4";
}

.scroll-quality-gallery .swiper-container {
	overflow: visible !important;
}

.scroll-quality-gallery .jet-woo-swiper-gallery-thumbs .swiper-slide  {
	opacity: 1;
}

/* Blog */

.blog-table-of-content .elementor-toc__list-item {
	margin-bottom: 0 !important;
	padding: 6px 26px !important;
}

.blog-table-of-content .elementor-toc__list-wrapper {
	border-left: 2px solid var(--e-global-color-c791d76) !important;
}

/* Reset głównej listy */
.blog-list ul {
  margin: 0 0 8px 0;
  padding-left: 0;
  list-style: none;
}
.blog-list ul:last-child {
  margin-bottom: 0;
}

/* Główne LI – pierwszy poziom */
.blog-list > ul > li {
  position: relative;
  padding-left: 14px; /* 4px na marker + 10px odstępu */
  margin-bottom: 16px; /* teraz 16px, jak chcesz */
}
.blog-list > ul > li:last-child {
  margin-bottom: 0;
}

/* Marker dla głównych LI – używamy ::before, ustawiamy top: 0.5em */
.blog-list > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;  /* wyrównanie do linii tekstu – dostosuj, jeśli potrzeba */
  width: 4px;
  height: 4px;
  background-color: var(--e-global-color-74f170a);
  border-radius: 50%;
}

/* Zagnieżdżone UL */
.blog-list li ul {
  margin-left: 20px;
  margin-bottom: 8px;
  padding-left: 0;
  list-style: none;
}
.blog-list li ul:last-child {
  margin-bottom: 0;
}

/* Zagnieżdżone LI */
.blog-list li ul li {
  position: relative;
  padding-left: 14px;
  margin-top: 8px;
}
.blog-list li ul li:last-child {
  margin-bottom: 0;
}

/* Marker dla LI w zagnieżdżonych UL – wycentrowany pionowo */
.blog-list li ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: var(--e-global-color-74f170a);
  border-radius: 50%;
  transform: translateY(-50%);
}

.blog-list-numbers ol {
  margin: 0;
  padding-left: 0;
  list-style: decimal inside; /* Marker wewnątrz listy */
}

.blog-list-numbers ol li {
  margin-bottom: 16px;      /* odstęp między elementami LI */
  text-indent: -19px;       /* przesuwa pierwszą linię o 10px w lewo, by marker "wychodził" */
  padding-left: 19px;       /* odsunięcie całego tekstu od markera o 10px */
}

.blog-list-numbers ol li:last-child {
  margin-bottom: 0;
}

.blog-list-numbers ol li::marker {
  margin-right: 10px; /* odstęp między markerem a tekstem */
}

figcaption {
	font-style: normal;
}

/*--- Punkty odbioru ---*/
/* Domyślny stan inputa w Search Filter */
.search-point .jet-search-filter__input {
  border-top: 1px solid var(--e-global-color-6081723) !important;
  border-right: 1px solid var(--e-global-color-6081723) !important;
  border-left: 1px solid var(--e-global-color-6081723) !important;
  border-bottom: 1px solid var(--e-global-color-0195054) !important;
}

/* Stan hover – przy najechaniu myszką */
.search-point .jet-search-filter__input:hover {
  border: 1px solid var(--e-global-color-0195054) !important;
  background-color: var(--e-global-color-c4cf960) !important;
}

/* Stan focus – gdy pole jest aktywne */
.search-point .jet-search-filter__input:focus {
  box-shadow: none !important;
  outline: 0;
  border: 1px solid var(--e-global-color-3e4e497) !important;
  background-color: var(--e-global-color-c4cf960) !important;
}

.punkty-dobioru-right-column {
  height: 700px;
}
.punkty-dobioru-list {
  flex: 1;
  overflow-y: auto;
  /* Zapewniamy, że zawartość nie "wchodzi" pod scrollbar */
  padding-right: 16px;
  box-sizing: border-box;
}

/* Stylizacja scrollbara dla przeglądarek opartych na WebKit (Chrome, Safari) */
.punkty-dobioru-list::-webkit-scrollbar {
  width: 4px;
}

/* Ukrycie arrow buttons w Chrome */
.punkty-dobioru-list::-webkit-scrollbar-button {
  display: none;
}

.punkty-dobioru-list::-webkit-scrollbar-track {
  background: var(--e-global-color-c791d76);
  border-radius: 2px; /* Zaokrąglamy górę i dół przy szerokości 4px */
}

.punkty-dobioru-list::-webkit-scrollbar-thumb {
  background: var(--e-global-color-3e4e497);
  border-radius: 2px;
}

/* Stylizacja scrollbara w Firefox */
.punkty-dobioru-list {
  scrollbar-width: thin;
  scrollbar-color: var(--e-global-color-3e4e497) var(--e-global-color-c791d76);
}

/*--- Popupy ----*/
.custom-popup {
  background: rgba(254, 250, 241, 0);
  backdrop-filter: blur(6px);
}

.elementor-popup-modal:not([style="display: none;"]) {
    transition: all .3s;
    opacity: 1!important;
}

div.elementor-popup-modal[style="display: none;"] {
    transition: all .3s;
    opacity: 0;
    display: flex!important;
    z-index: -5;
}

.elementor-popup-modal[style="display: none;"]>div {
    display:none
}

.elementor-popup-modal {
    -webkit-animation:wrd_fadein .5s cubic-bezier(.39,.575,.565,1.000);
    animation:wrd_fadein .5s cubic-bezier(.39,.575,.565,1.000)
}

@-webkit-keyframes wrd_fadein {
    0%{opacity:0} 
    100% {opacity:1}
}

@keyframes wrd_fadein{
    0% {opacity:0} 
	100% {opacity:1}
} 

.dialog-close-button.dialog-lightbox-close-button:focus {
	outline: 2px solid var(--e-global-color-6faa1e1) !important;
	transition: ease-in-out .3s;
}

/* Reset głównej listy */
.popup-list ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.blog-list ul:last-child {
  margin-bottom: 0;
}

/* Główne LI – pierwszy poziom */
.popup-list > ul > li {
  position: relative;
  padding-left: 14px; /* 4px na marker + 10px odstępu */
  margin-bottom: 8px; /* teraz 16px, jak chcesz */
}
.popup-list > ul > li:last-child {
  margin-bottom: 0;
}

/* Marker dla głównych LI – używamy ::before, ustawiamy top: 0.5em */
.popup-list > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;  /* wyrównanie do linii tekstu – dostosuj, jeśli potrzeba */
  width: 4px;
  height: 4px;
  background-color: var(--e-global-color-74f170a);
  border-radius: 50%;
}

/* Zagnieżdżone UL */
.popup-list li ul {
  margin-left: 20px;
  margin-bottom: 8px;
  padding-left: 0;
  list-style: none;
}
.popup-list li ul:last-child {
  margin-bottom: 0;
}

/* Zagnieżdżone LI */
.popup-list li ul li {
  position: relative;
  padding-left: 14px;
  margin-top: 8px;
}
.popup-list li ul li:last-child {
  margin-bottom: 0;
}

/* Marker dla LI w zagnieżdżonych UL – wycentrowany pionowo */
.popup-list li ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  background-color: var(--e-global-color-74f170a);
  border-radius: 50%;
  transform: translateY(-50%);
}

/*--- CookieYes ---*/

/* Główne okienko CookiesYes */

.cky-consent-container .cky-consent-bar {
	border: 2px solid #F4F0E7 !important
	border-radius: 20px !important;
	box-shadow: none !important;
}
.cky-btn {
  border-radius: 8px !important;
}

.cky-overlay {
	background-color: #FEFAF1E6 !important;
	backdrop-filter: blur(6px) !important;
	opacity: 1 !important;
}

.cky-modal {
	box-shadow: none !important;
	border: 2px solid #F4F0E7 !important;
}

button.cky-show-desc-btn {
	color: var(--e-global-color-3e4e497) !important;
}

.cky-accordion-header .cky-always-active {
	color: var(--e-global-color-1cdb11b) !important;
}

.cky-audit-table {
	background-color: var(--e-global-color-c791d76) !important;
}

.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
  display: none;
}

/* CookieBot */

#CookiebotWidget {
z-index: auto !important;
}

/* Stylizacja scrollbara dla przeglądarek opartych na WebKit (Chrome, Safari) */
.cky-preference-body-wrapper::-webkit-scrollbar {
  width: 4px;
}

/* Ukrycie arrow buttons w Chrome */
.cky-preference-body-wrapper::-webkit-scrollbar-button {
  display: none;
}

.cky-preference-body-wrapper::-webkit-scrollbar-track {
  background: var(--e-global-color-c791d76);
  border-radius: 2px; /* Zaokrąglamy górę i dół przy szerokości 4px */
}

.cky-preference-body-wrapper::-webkit-scrollbar-thumb {
  background: var(--e-global-color-3e4e497);
  border-radius: 2px;
}

/* Stylizacja scrollbara w Firefox */
.cky-preference-body-wrapper {
  scrollbar-width: thin;
  scrollbar-color: var(--e-global-color-3e4e497) var(--e-global-color-c791d76);
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}

/*--- Header ---*/
.smart-header {
  transition: transform 0.3s ease;
  will-change: transform;
}

.smart-header.is-hidden {
  transform: translateY(-100%);
}

/* Efekt trzęsienia ikony telefonu */
.phone-header:hover .elementor-icon-list-icon {
  animation: phone-shake 0.4s ease-in-out;
}

@keyframes phone-shake {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-15deg); }
  60% { transform: rotate(10deg); }
  80% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

/*--- Page Transtion ---*/
body {
  opacity: 0;
  transition: opacity 0.4s ease;
  margin: 0;
  background-color: var(--e-global-color-c4cf960);
	overflow-x: hidden;
}

body.page-loaded {
  opacity: 1;
}

body.transition-out {
  opacity: 0;
}

/*--- Polityka ---*/
.polityka-lista ul {
  margin: 0 0 16px 0;
  padding-left: 0;
  list-style: none;
}

.polityka-lista ul li {
  position: relative;
  padding-left: 14px; /* miejsce na marker */
  margin-bottom: 12px;
}

/* Marker przed każdym li */
.polityka-lista ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  background-color: var(--e-global-color-74f170a); /* dowolny globalny kolor */
  border-radius: 50%;
}

/*-- Mobile menu --*/

/* Ustawienie wrappera tak, by nie rozszerzał się ponad SVG */
.elementor-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 0;
}

/* Dopasowanie SVG do środka i poprawna wielkość */
.elementor-icon-wrapper svg {
  display: block;
  height: 100%;
  max-height: 40px; /* lub inna wartość */
  width: auto;
}