.elementor-18 .elementor-element.elementor-element-c2a035a{--display:flex;--min-height:85vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-18 .elementor-element.elementor-element-bdbc2a2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 45px) 0px;}.elementor-18 .elementor-element.elementor-element-c8850e3{width:100%;max-width:100%;margin:55px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-18 .elementor-element.elementor-element-adf2dfd{margin:65px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-18 .elementor-element.elementor-element-adf2dfd.elementor-element{--align-self:center;}.elementor-18 .elementor-element.elementor-element-aa521da{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:65px;--padding-bottom:65px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-b6d2de2{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-ff2f894{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:45px;--padding-bottom:65px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-7c30218{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-7d4b2d9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:65px;--padding-bottom:95px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-1ed84b3.elementor-element{--align-self:stretch;}.elementor-18 .elementor-element.elementor-element-186d5c5{--swiper-slides-to-display:4;--swiper-slides-gap:20px;padding:15px 15px 15px 15px;--swiper-pagination-size:8px;--dots-normal-color:var( --e-global-color-primary );--dots-hover-color:var( --e-global-color-c10748e );--swiper-pagination-spacing:40px;}.elementor-18 .elementor-element.elementor-element-186d5c5 .swiper-slide > .elementor-element{height:100%;}.elementor-18 .elementor-element.elementor-element-186d5c5 .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:5px;--swiper-pagination-bullet-vertical-gap:5px;}.elementor-18 .elementor-element.elementor-element-752238a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:65px;--padding-bottom:95px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-e428e4e.elementor-element{--align-self:stretch;}.elementor-18 .elementor-element.elementor-element-8504c7e{--swiper-slides-to-display:3;--swiper-slides-gap:20px;padding:15px 15px 15px 15px;--swiper-pagination-size:8px;--dots-normal-color:var( --e-global-color-primary );--dots-hover-color:var( --e-global-color-c10748e );--swiper-pagination-spacing:40px;}.elementor-18 .elementor-element.elementor-element-8504c7e .swiper-slide > .elementor-element{height:100%;}.elementor-18 .elementor-element.elementor-element-8504c7e .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:5px;--swiper-pagination-bullet-vertical-gap:5px;}.elementor-18 .elementor-element.elementor-element-9cb66b3{--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;--padding-top:0px;--padding-bottom:120px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-59f4aad{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:120px;--padding-bottom:120px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-59f4aad:not(.elementor-motion-effects-element-type-background), .elementor-18 .elementor-element.elementor-element-59f4aad > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-704c7df );}.elementor-18 .elementor-element.elementor-element-67dc0a4{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-3da01bc{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:85px;--padding-bottom:45px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-0f11146{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-0934db5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:35px;--padding-bottom:65px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-2e7c9a9{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-18 .elementor-element.elementor-element-1ce790c{--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;}:root{--page-title-display:none;}@media(min-width:2400px){.elementor-18 .elementor-element.elementor-element-186d5c5{--swiper-slides-to-display:3;}.elementor-18 .elementor-element.elementor-element-8504c7e{--swiper-slides-to-display:3;}}@media(max-width:1366px){.elementor-18 .elementor-element.elementor-element-186d5c5{--swiper-slides-to-display:3;}.elementor-18 .elementor-element.elementor-element-8504c7e{--swiper-slides-to-display:3;}}@media(max-width:1200px){.elementor-18 .elementor-element.elementor-element-186d5c5{--swiper-slides-to-display:3;}.elementor-18 .elementor-element.elementor-element-8504c7e{--swiper-slides-to-display:3;}}@media(max-width:1024px){.elementor-18 .elementor-element.elementor-element-186d5c5{--swiper-slides-to-display:2;}.elementor-18 .elementor-element.elementor-element-8504c7e{--swiper-slides-to-display:2;}}@media(max-width:880px){.elementor-18 .elementor-element.elementor-element-c2a035a{--padding-top:45px;--padding-bottom:45px;--padding-left:25px;--padding-right:25px;}.elementor-18 .elementor-element.elementor-element-186d5c5{--swiper-slides-to-display:2;}.elementor-18 .elementor-element.elementor-element-8504c7e{--swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-18 .elementor-element.elementor-element-186d5c5{--swiper-slides-to-display:1;}.elementor-18 .elementor-element.elementor-element-8504c7e{--swiper-slides-to-display:1;}}/* Start custom CSS for shortcode, class: .elementor-element-c8850e3 *//* =========================================================
   NEUROEXPERT — AJAX SEARCH LITE / PREMIUM EDITION
   Wyszukiwarka (hero / header / globalnie)

   Co nowego w tej wersji:
   • Color-coded badges kategorii (Encyklopedia / Suplement / Zalecenie / Blog)
   • Premium hover: lewy niebieski accent strip + lekki shift w prawo
   • Stagger fade-in dla wyników (kaskadowa animacja)
   • Większe radiusy, miększe cienie
   • Custom CSS spinner zamiast ASL-owego SVG
   • Większy, "premium" focus ring
   • Lepszy "Więcej wyników" z animowaną strzałką
   • Empty state z ikoną
========================================================= */


/* =========================================================
   ZMIENNE — PEŁNA PALETA NEUROEXPERT
========================================================= */

.asl_w,
.asl_r {
  /* — paleta główna — */
  --asl-primary:           #1577AF;
  --asl-primary-hover:     #11618E;
  --asl-primary-soft:      #EAF4FA;       /* "Tło Akcent" */
  --asl-primary-glow:      rgba(21, 119, 175, 0.18);

  /* — tekst — */
  --asl-text:              #0F172A;       /* "Drugorzędny" */
  --asl-text-soft:         #1E293B;
  --asl-muted:             #475569;       /* "Tekst" */
  --asl-placeholder:       #94A3B8;
  --asl-autocomplete:      #CBD5E1;

  /* — tła i bordery — */
  --asl-bg:                #FFFFFF;
  --asl-bg-soft:           #F8FAFC;       /* "Tło" */
  --asl-border:            #E2E8F0;
  --asl-border-soft:       #F1F5F9;       /* "Border" */

  /* — kategorie (Custom Colors z palety) — */
  --asl-cat-enc:           #1577AF;        /* Encyklopedia: niebieski */
  --asl-cat-enc-bg:        #EAF4FA;
  --asl-cat-sup:           #10B981;        /* Suplement: zielony */
  --asl-cat-sup-bg:        #CCFDF5;
  --asl-cat-zal:           #A855F7;        /* Zalecenie: fiolet */
  --asl-cat-zal-bg:        #FAEEFF;
  --asl-cat-post:          #475569;        /* Blog/Post: szary */
  --asl-cat-post-bg:       #F1F5F9;

  /* — typografia — */
  --asl-font-body:         "Para", sans-serif;
  --asl-font-title:        "Title", serif;

  /* — przejścia — */
  --asl-ease:              cubic-bezier(0.22, 1, 0.36, 1);
  --asl-transition:        0.22s var(--asl-ease);
  --asl-transition-fast:   0.16s var(--asl-ease);

  /* — radiusy — */
  --asl-radius-box:        1.5rem;
  --asl-radius-drop:       1.25rem;
  --asl-radius-item:       0.875rem;
  --asl-radius-btn:        0.875rem;
  --asl-radius-pill:       999px;
}


/* =========================================================
   1. GŁÓWNY KONTENER
========================================================= */

div.asl_w {
  width: 100% !important;
  max-width: 868px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  font-family: var(--asl-font-body) !important;
}


/* =========================================================
   2. BIAŁY BOX WYSZUKIWARKI — premium look
========================================================= */

div.asl_w .probox {
  width: 100% !important;
  height: 84px !important;
  padding: 18px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;

  background: var(--asl-bg) !important;
  background-image: none !important;
  border: 1px solid var(--asl-border) !important;
  border-radius: var(--asl-radius-box) !important;

}





div.asl_w .prosettings { display: none !important; }


/* =========================================================
   3. WRAPPER POLA TEKSTOWEGO + LUPA
========================================================= */

div.asl_w .proinput {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;

  height: auto !important;
  margin: 0 !important;
  padding: 6px 50px 6px 12px !important;

  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  font-family: var(--asl-font-body) !important;
}

/* Lupa po lewej */
div.asl_w .proinput::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 14px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transition: opacity var(--asl-transition);
}

/* Lupa staje się niebieska gdy pole jest aktywne */
div.asl_w .probox:focus-within .proinput::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%231577AF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E");
}

div.asl_w .proinput form {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 32px !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   4. POLA TEKSTOWE
========================================================= */

div.asl_w .proinput input.orig,
div.asl_w .proinput input.autocomplete {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 32px !important;
  line-height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  font-family: var(--asl-font-body) !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-indent: 0 !important;
  transform: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;
}

div.asl_w .proinput input[type="search"]::-webkit-search-decoration,
div.asl_w .proinput input[type="search"]::-webkit-search-cancel-button,
div.asl_w .proinput input[type="search"]::-webkit-search-results-button,
div.asl_w .proinput input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}

div.asl_w .proinput input.orig {
  color: var(--asl-text) !important;
  z-index: 2 !important;
}

div.asl_w .proinput input.autocomplete {
  color: var(--asl-autocomplete) !important;
  z-index: 1 !important;
}

div.asl_w .proinput input.orig::placeholder {
  color: var(--asl-placeholder) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}


/* =========================================================
   5. CUSTOM SPINNER (PRELOADER) + PRZYCISK X
========================================================= */

/* Ukrywamy domyślny SVG/GIF ASL (dla spinnera i przycisku X) */
div.asl_w .proloading > *,
div.asl_w .proloading img,
div.asl_w .proloading svg,
div.asl_w .proclose > *,
div.asl_w .proclose img,
div.asl_w .proclose svg {
  display: none !important;
}

div.asl_w .proloading {
  position: absolute !important;
  right: 165px !important;
  top: 50% !important;

  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  z-index: 10 !important;

  /* Własny CSS spinner */
  border: 2.5px solid var(--asl-border) !important;
  border-top-color: var(--asl-primary) !important;
  border-radius: 50% !important;
  background: transparent !important;

  /* Centrowanie pionowe + animacja rotacji w jednym transformie */
  animation: asl-spin 0.7s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes asl-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}

/* Przycisk X (czyść) — premium chip
   UWAGA: NIE wymuszamy display, bo plugin sam ustawia display:none
   gdy pole jest puste. X-y wewnątrz pozycjonujemy absolutnie. */
div.asl_w .proclose {
  position: absolute !important;
  right: 165px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  z-index: 10 !important;

  background: var(--asl-border-soft) !important;
  border-radius: 50% !important;
  cursor: pointer !important;

  transition: background var(--asl-transition) !important;
}

div.asl_w .proclose:hover {
  background: var(--asl-border) !important;
}

/* "X" — pseudo-elementy wycentrowane absolutnie wewnątrz proclose */
div.asl_w .proclose::before,
div.asl_w .proclose::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;

  width: 10px;
  height: 1.5px;
  background: var(--asl-muted);
  border-radius: 1px;
}

div.asl_w .proclose::before { transform: translate(-50%, -50%) rotate(45deg); }
div.asl_w .proclose::after  { transform: translate(-50%, -50%) rotate(-45deg); }


/* =========================================================
   6. PRZYCISK SZUKAJ — premium
========================================================= */

div.asl_w .promagnifier {
  position: static !important;
  flex-shrink: 0 !important;

  width: auto !important;
  height: 48px !important;
  padding: 0 30px !important;
  margin-left: 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background-color: var(--asl-primary) !important;
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 100%) !important;
  border: none !important;
  border-radius: var(--asl-radius-btn) !important;

  box-shadow:
    0 1px 2px rgba(21, 119, 175, 0.2),
    0 4px 12px -2px rgba(21, 119, 175, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;

  transition:
    background-color var(--asl-transition),
    box-shadow var(--asl-transition),
    transform var(--asl-transition-fast) !important;
}

div.asl_w .promagnifier:hover {
  background-color: var(--asl-primary-hover) !important;
  box-shadow:
    0 2px 4px rgba(21, 119, 175, 0.25),
    0 8px 20px -4px rgba(21, 119, 175, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

div.asl_w .promagnifier:active {
  transform: translateY(0) !important;
}

div.asl_w .promagnifier:focus-visible {
  outline: 3px solid var(--asl-primary-glow);
  outline-offset: 3px;
}

div.asl_w .promagnifier .innericon,
div.asl_w .promagnifier svg {
  display: none !important;
}

div.asl_w .promagnifier::after {
  content: "Szukaj";

  font-family: var(--asl-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
}


/* =========================================================
   7. DROPDOWN WYNIKÓW
========================================================= */

div.asl_r,
div.asl_r.asl_r_1 {
  margin-top: 14px !important;
  padding: 10px !important;
  overflow: hidden !important;

  background: var(--asl-bg) !important;
  border: 1px solid var(--asl-border) !important;
  border-radius: var(--asl-radius-drop) !important;

  box-shadow:
    0 4px 8px -2px rgba(15, 23, 42, 0.06),
    0 16px 32px -8px rgba(15, 23, 42, 0.12),
    0 32px 64px -16px rgba(15, 23, 42, 0.12) !important;

  font-family: var(--asl-font-body) !important;
}

div.asl_r .results {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* =========================================================
   8. WIERSZ WYNIKU + STAGGER FADE-IN
========================================================= */

div.asl_r .item,
div.asl_r .resdrg .item {
  position: relative !important;
  overflow: hidden !important;

  padding: 14px 16px 14px 20px !important;
  margin: 0 0 2px 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: var(--asl-radius-item) !important;

  opacity: 0;
  animation: asl-fade-in 0.32s var(--asl-ease) forwards;

  transition:
    background-color var(--asl-transition),
    transform var(--asl-transition) !important;
}

/* Stagger — kaskada wyników */
div.asl_r .item:nth-child(1) { animation-delay: 0.00s; }
div.asl_r .item:nth-child(2) { animation-delay: 0.04s; }
div.asl_r .item:nth-child(3) { animation-delay: 0.08s; }
div.asl_r .item:nth-child(4) { animation-delay: 0.12s; }
div.asl_r .item:nth-child(5) { animation-delay: 0.16s; }
div.asl_r .item:nth-child(6) { animation-delay: 0.20s; }
div.asl_r .item:nth-child(n+7) { animation-delay: 0.24s; }

@keyframes asl-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lewy accent strip — wjeżdża przy hover */
div.asl_r .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--asl-primary);
  opacity: 0;
  transform: translateX(-3px);
  transition:
    opacity var(--asl-transition),
    transform var(--asl-transition);
}

div.asl_r .item:hover,
div.asl_r .item.hovered {
  background: var(--asl-bg-soft) !important;
  transform: translateX(2px) !important;
}

div.asl_r .item:hover::before,
div.asl_r .item.hovered::before {
  opacity: 1;
  transform: translateX(0);
}

/* Delikatna kreska między wierszami */
div.asl_r .item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px;
  right: 16px;
  bottom: -1px;
  height: 1px;
  background: var(--asl-border-soft);
  pointer-events: none;
}

div.asl_r .item:hover:not(:last-child)::after {
  background: transparent;
}

div.asl_r .item .asl_content {
  display: block !important;
  width: 100% !important;
}

div.asl_r .item .etc:empty { display: none !important; }
div.asl_r .item .clear { display: none !important; }


/* =========================================================
   9. COLOR-CODED CATEGORY BADGES
   Plugin dodaje klasy do .item — wykorzystujemy je do badge przed h3
========================================================= */

/* h3 jako flex z badge inline */
div.asl_r .item .asl_content h3 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Wspólne style badge — domyślnie szary (post/blog) */
div.asl_r .item .asl_content h3::before {
  content: "Wpis";
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;

  height: 22px !important;
  padding: 0 10px !important;

  font-family: var(--asl-font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  border-radius: var(--asl-radius-pill) !important;
  color: var(--asl-cat-post) !important;
  background: var(--asl-cat-post-bg) !important;
}

/* Encyklopedia — niebieski */
div.asl_r .item.asl_r_encyklopedia .asl_content h3::before {
  content: "Encyklopedia";
  color: var(--asl-cat-enc) !important;
  background: var(--asl-cat-enc-bg) !important;
}

/* Suplementy — zielony */
div.asl_r .item.asl_r_suplementy .asl_content h3::before {
  content: "Suplement";
  color: var(--asl-cat-sup) !important;
  background: var(--asl-cat-sup-bg) !important;
}

/* Zalecenia — fiolet */
div.asl_r .item.asl_r_zalecenia .asl_content h3::before {
  content: "Zalecenie";
  color: var(--asl-cat-zal) !important;
  background: var(--asl-cat-zal-bg) !important;
}

/* Post / Blog — szary */
div.asl_r .item.asl_r_post .asl_content h3::before {
  content: "Blog";
  color: var(--asl-cat-post) !important;
  background: var(--asl-cat-post-bg) !important;
}


/* =========================================================
   10. TYTUŁ WPISU (Title font)
========================================================= */

div.asl_r .item h3,
div.asl_r .item .asl_content h3 {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;

  font-family: var(--asl-font-title) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em;
  color: var(--asl-text) !important;
}

div.asl_r .item h3 a,
div.asl_r .item a.asl_res_url {
  display: inline !important;

  font-family: var(--asl-font-title) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: var(--asl-text) !important;

  background: transparent !important;
  border: none !important;

  transition: color var(--asl-transition) !important;
}

div.asl_r .item:hover h3 a,
div.asl_r .item:hover a.asl_res_url {
  color: var(--asl-primary) !important;
}


/* =========================================================
   11. OPIS / FRAGMENT (Para font)
========================================================= */

div.asl_r .item .asl_desc,
div.asl_r .item .asl_content .asl_desc {
  margin: 0 !important;
  padding: 0 !important;

  font-family: var(--asl-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: var(--asl-muted) !important;
}


/* =========================================================
   12. PODŚWIETLENIE SZUKANEGO SŁOWA — ważne rozróżnienie!

   Plugin używa <span class="overlap"> w DWÓCH różnych miejscach:
   • w <a class="asl_res_url"> — to OVERLAY całego itemu
     (position:absolute, 100%×100%, służy do hover/selected effect).
     Wyłączamy go, bo mamy własny lewy accent strip + tło hover.
   • w <div class="asl_desc"> — to INLINE highlighter podświetlający
     słowa dopasowane do query. Ten stylizujemy jako "pill".
========================================================= */

/* OVERLAY w tytule — wyłączamy */
div.asl_r .item a.asl_res_url > .overlap {
  display: none !important;
}

/* HIGHLIGHT w opisie — inline pill */
div.asl_r .item .asl_desc .overlap {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;

  padding: 1px 4px !important;
  margin: 0 !important;

  background: var(--asl-primary-soft) !important;
  color: var(--asl-primary) !important;
  font-weight: 700 !important;
  font-family: inherit !important;

  border-radius: 4px !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Puste .overlap (brak dopasowania w danym fragmencie) — ukryć */
div.asl_r .item .overlap:empty {
  display: none !important;
}


/* =========================================================
   13. "WIĘCEJ WYNIKÓW" — wyraźny CTA

   Plugin renderuje strukturę:
     <p class="showmore">
       <span>Więcej wyników...</span>
     </p>
   plus własny border-bottom na <span> (reset poniżej).

   Stylizujemy jako pełnoprawny CTA: jasnoniebieskie tło,
   na hover staje się intensywnym primary z białym tekstem.
========================================================= */

div.asl_r .showmore,
div.asl_r p.showmore {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  margin: 10px 0 0 0 !important;
  padding: 14px 20px !important;

  background: var(--asl-primary-soft) !important;
  border: none !important;
  border-radius: var(--asl-radius-item) !important;

  font-family: var(--asl-font-body) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: var(--asl-primary) !important;
  text-align: center !important;
  cursor: pointer !important;

  transition:
    background var(--asl-transition),
    color var(--asl-transition),
    box-shadow var(--asl-transition) !important;
}

/* Strzałka — flex gap utrzymuje ją obok tekstu, nie pod nim */
div.asl_r .showmore::after,
div.asl_r p.showmore::after {
  content: '→' !important;
  display: inline-block !important;
  font-size: 1.125rem !important;
  line-height: 1 !important;
  transition: transform var(--asl-transition) !important;
}

/* <span> wewnątrz — reset border-bottom dodawanego przez plugin */
div.asl_r .showmore span,
div.asl_r p.showmore span {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  color: inherit !important;

  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Hover — premium "lift" z białym tekstem */
div.asl_r .showmore:hover,
div.asl_r p.showmore:hover {
  background: var(--asl-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -2px rgba(21, 119, 175, 0.35) !important;
}

div.asl_r .showmore:hover::after,
div.asl_r p.showmore:hover::after {
  transform: translateX(5px) !important;
}

/* Linki w środku — dziedziczą po rodzicu */
div.asl_r .showmore a,
div.asl_r p.showmore a {
  color: inherit !important;
  text-decoration: none !important;

  font-family: var(--asl-font-body) !important;
  font-weight: 700 !important;
}


/* =========================================================
   14. EMPTY STATE
========================================================= */

div.asl_r .noresults {
  padding: 32px 16px !important;
  text-align: center !important;

  font-family: var(--asl-font-body) !important;
  font-size: 0.9375rem !important;
  color: var(--asl-muted) !important;
}

div.asl_r .noresults::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM12 9v3m0 3h.008v-.008H12V15z' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  opacity: 0.7;
}


/* =========================================================
   15. RESPONSYWNOŚĆ
========================================================= */

@media (max-width: 767px) {
  div.asl_w .probox {
    height: 64px !important;
    padding: 12px !important;
    border-radius: 1.25rem !important;
  }

  div.asl_w .proinput {
    padding: 4px 40px 4px 8px !important;
  }

  div.asl_w .proinput::before {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  div.asl_w .proinput input.orig,
  div.asl_w .proinput input.autocomplete {
    font-size: 1rem !important;
  }

  div.asl_w .promagnifier {
    height: 42px !important;
    padding: 0 18px !important;
    margin-left: 8px !important;
  }

  div.asl_w .promagnifier::after {
    font-size: 0.875rem !important;
  }

  div.asl_w .proloading,
  div.asl_w .proclose {
    right: 105px !important;
    width: 18px !important;
    height: 18px !important;
  }

  div.asl_r {
    border-radius: 1rem !important;
    padding: 8px !important;
  }

  div.asl_r .item {
    padding: 12px 12px 12px 16px !important;
  }

  div.asl_r .item h3 {
    font-size: 1rem !important;
  }

  div.asl_r .item .asl_desc {
    font-size: 0.8125rem !important;
  }

  div.asl_r .item .asl_content h3::before {
    height: 20px !important;
    padding: 0 8px !important;
    font-size: 0.625rem !important;
  }
}


/* =========================================================
   16. REDUKCJA ANIMACJI (a11y)
========================================================= */

@media (prefers-reduced-motion: reduce) {
  div.asl_w *,
  div.asl_r * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Spinner zostaje — niezbędny do oznaczenia ładowania */
  div.asl_w .proloading {
    animation-duration: 0.7s !important;
    animation-iteration-count: infinite !important;
  }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-adf2dfd */```css
/* ============================================================
   NeuroExpert — Stats Counter
   Wklej do: Elementor → Ustawienia strony → Własny CSS
   LUB: Elementor → Site Settings → Custom CSS
   ============================================================ */

.ne-stats-bar,
.ne-stats-bar * {
  box-sizing: border-box;
}

.ne-stats-bar {
  --ne-bg: #ffffff;
  --ne-border: #e2e8f0;
  --ne-text: #0f172a;
  --ne-muted: #64748b;
  --ne-accent: #1577af;
  --ne-accent-bg: #eaf4fa;
  --ne-radius: 16px;
  --ne-icon-size: 44px;
  --ne-gap: 16px;
  --ne-separator-gap: clamp(24px, 4vw, 40px);

  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 14px 24px !important;

  background: var(--ne-bg);
  border: 1px solid var(--ne-border);
  border-radius: var(--ne-radius);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
}

/* Pojedyncza kolumna/statystyka */
.ne-stats-bar .ne-stat {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: max-content;
  gap: var(--ne-gap);
}

/* Ikona */
.ne-stats-bar .ne-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ne-icon-size);

  width: var(--ne-icon-size);
  height: var(--ne-icon-size);
  border-radius: 12px;

  background: var(--ne-accent-bg);
  color: var(--ne-accent);
}

.ne-stats-bar .ne-stat__icon svg {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* Treść */
.ne-stats-bar .ne-stat__body {
  display: flex;
  flex-direction: column;
  min-width: max-content;
  gap: 3px;
}

/* Liczba — !important potrzebne, bo Elementor często nadpisuje style strong */
.ne-stats-bar .ne-stat__num {
  display: block;
  margin: 0 !important;
  padding: 0 !important;

  font-family: 'Title', Merriweather, Georgia, serif;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em;

  color: var(--ne-text) !important;
}

.ne-stats-bar .ne-stat__num.ne-pulsing {
  color: var(--ne-accent) !important;
}

/* Opis */
.ne-stats-bar .ne-stat__lbl {
  display: block;
  margin: 0 !important;
  padding: 0 !important;

  font-family: 'Para', Inter, system-ui, sans-serif;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.35;

  color: var(--ne-muted);
  white-space: nowrap;
}

/* Separator */
.ne-stats-bar .ne-stat__sep {
  flex: 0 0 1px;
  align-self: stretch;

  width: 1px;
  margin: 4px var(--ne-separator-gap);

  background: var(--ne-border);
}

/* Animacja +1 */
@keyframes ne-bounce {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(1.07) translateY(-2px);
  }

  70% {
    transform: scale(0.97);
  }

  100% {
    transform: scale(1);
  }
}

.ne-stats-bar .ne-stat__num.ne-pulse {
  animation: ne-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .ne-stats-bar .ne-stat__num.ne-pulse {
    animation: none;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .ne-stats-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    max-width: 100%;
    padding: 0 !important;
  }

  .ne-stats-bar .ne-stat {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 18px 20px;
  }

  .ne-stats-bar .ne-stat__body {
    min-width: 0;
  }

  .ne-stats-bar .ne-stat__lbl {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ne-stats-bar .ne-stat__sep {
    flex: 0 0 1px;
    align-self: auto;

    width: auto;
    height: 1px;
    margin: 0 20px;
  }
}
```/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c2a035a *//* 1. Główny kontener z płynniejszym gradientem na dole */
.hero-main-con {
position: relative;
overflow: hidden;
background-color: #2B9ADA2B !important;

/* Czysty kod bez komentarzy w środku + wymuszenie !important */
background-image:
linear-gradient(to top, rgba(248, 250, 252, 1) 0%, rgba(248, 250, 252, 0.95) 15%, rgba(248, 250, 252, 0.75) 40%, rgba(248, 250, 252, 0.4) 65%, rgba(248, 250, 252, 0.1) 85%, rgba(248, 250, 252, 0) 100%),
radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.58) 1px, transparent 0) !important;

background-size: 100% 450px, 40px 40px !important;
background-position: bottom left, top left !important;
background-repeat: no-repeat, repeat !important;
}

/* 2. Jasnoniebieska, rozmyta poświata w prawym górnym rogu */
.hero-main-con::before {
content: "";
position: absolute;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
background-color: #4fb4ee;
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
pointer-events: none;
z-index: 0;
}

/* 3. Subtelna, biała poświata z lewej strony */
.hero-main-con::after {
content: "";
position: absolute;
top: 150px;
left: -100px;
width: 300px;
height: 300px;
background-color: #ffffff;
border-radius: 50%;
filter: blur(80px);
opacity: 0.1;
pointer-events: none;
z-index: 0;
}

/* 4. Bezpieczeństwo warstw (Z-index) */
.hero-main-con > * {
position: relative;
z-index: 1;
}/* End custom CSS */
/* Start custom CSS for loop-carousel, class: .elementor-element-186d5c5 *//* Zdejmujemy ukrywanie zawartości z całej karuzeli i poszczególnych slajdów */
.elementor-18 .elementor-element.elementor-element-186d5c5 .elementor-widget-container,
.elementor-18 .elementor-element.elementor-element-186d5c5 .swiper,
.elementor-18 .elementor-element.elementor-element-186d5c5 .swiper-wrapper,
.elementor-18 .elementor-element.elementor-element-186d5c5 .swiper-slide {
    overflow: visible !important;
}

/* Ponieważ wyłączyliśmy overflow, karuzela może powodować poziomy pasek przewijania 
na całej stronie. Musimy to zablokować na kontenerze rodzica. */
.elementor-18 .elementor-element.elementor-element-186d5c5 {
    overflow-x: hidden !important; 
    overflow-y: visible !important;
}/* End custom CSS */
/* Start custom CSS for loop-carousel, class: .elementor-element-8504c7e *//* Zdejmujemy ukrywanie zawartości z całej karuzeli i poszczególnych slajdów */
.elementor-18 .elementor-element.elementor-element-8504c7e .elementor-widget-container,
.elementor-18 .elementor-element.elementor-element-8504c7e .swiper,
.elementor-18 .elementor-element.elementor-element-8504c7e .swiper-wrapper,
.elementor-18 .elementor-element.elementor-element-8504c7e .swiper-slide {
    overflow: visible !important;
}

/* Ponieważ wyłączyliśmy overflow, karuzela może powodować poziomy pasek przewijania 
na całej stronie. Musimy to zablokować na kontenerze rodzica. */
.elementor-18 .elementor-element.elementor-element-8504c7e {
    overflow-x: hidden !important; 
    overflow-y: visible !important;
}/* End custom CSS */