/* ELLIE V82 FIXES — CSS — 2026-07-17
   Warstwa poprawek z listy klientki (mobile M*, desktop D*).
   Ładowana jako OSTATNIA w head.tpl — izolowana, w pełni odwracalna
   (usunięcie <link> z head.tpl cofa całość).
   ───────────────────────────────────────────────────────────────── */

/* ══ M1: Logo ELLIE na mobile ma być klikalne → strona główna ══
   Logo jest poprawnym linkiem (<a href="/">), ale na przekombinowanym
   nagłówku mobilnym (warstwy v20–v57) inny element przechwytuje klik.
   Podnosimy z-index widgetu logo i wymuszamy pointer-events, bez zmiany
   pozycji (pozycję ustala v55). */
@media (max-width: 767px) {
  body:not(#checkout) #header .elementor-widget-pklogo {
    z-index: 50 !important;
    pointer-events: auto !important;
  }
  body:not(#checkout) #header .elementor-widget-pklogo a.header_logo_img {
    pointer-events: auto !important;
    display: block !important;
    position: relative;
    z-index: 51 !important;
  }
  body:not(#checkout) #header .elementor-widget-pklogo a.header_logo_img img.logo {
    pointer-events: auto !important;
  }
}

/* ══ M4: Breadcrumb „Strona główna" → „STRONA GŁÓWNA" (mobile) ══
   Wielkie litery na całym breadcrumbie dla spójności. */
@media (max-width: 767px) {
  nav.breadcrumb ol li span,
  nav.breadcrumb ol li a {
    text-transform: uppercase !important;
  }
}

/* ══ M7: Strona wyszukiwania — usunąć zbędne napisy ══
   Ukrywamy nagłówek „Wyniki wyszukiwania: …" oraz komunikat
   „Brak produktów w tej kategorii". Zostają: „Wyszukaj to, czego szukasz"
   i pole wyszukiwania. Scope: tylko body#search. */
body#search #js-product-list-header,
body#search #product-list-header,
body#search h1#product-list-header {
  display: none !important;
}
body#search #content.page-not-found > h4 {
  display: none !important;
}

/* ══ D8: „W tej samej kategorii" — usunąć niebieskie tło kart ══
   Regresja (tło z panelowego/motywowego CSS). Nadpisujemy na przezroczyste
   na sekcji karuzeli i kartach produktów w niej. Best-effort — do potwierdzenia
   wizualnie, bo źródła niebieskiego nie ma w repo. */
.pk-carousel-categories,
.pk-carousel-categories .carousel-item,
.pk-carousel-categories .product-miniature,
.pk-carousel-categories .thumbnail-container,
.pk-carousel-categories .product-description,
.pk-carousel-categories .product-desc,
/* rozszerzenie: wszystkie karuzele produktu (Ostatnio oglądane, Zobacz także) */
body#product .carousel-item .product-miniature,
body#product .pk-slick-carousel .product-miniature,
body#product .product-footer .product-miniature,
body#product section .product-miniature {
  background: transparent !important;
  background-color: transparent !important;
}

/* ══ M2: Hero — „skaczący" napis SUMMER SALE ══
   Przyczyna: Elementor entrance-animation (klasa .elementor-invisible startuje
   z opacity:0, JS animuje z opóźnieniem → napis „wskakuje"). Wymuszamy
   natychmiastową widoczność i wyłączamy animację. Bezpieczne globalnie. */
.elementor-23010000 .elementor-element-22bde92,
.elementor-23010000 .elementor-element-22bde92.elementor-invisible {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* M2: przycisk hero „ZOBACZ TERAZ" proporcjonalnie mniejszy (mobile)
   Wzmocniony selektor — bije per-element CSS Elementora. */
@media (max-width: 767px) {
  .elementor-element.elementor-element-d875322 a.elementor-button,
  .elementor-element.elementor-element-d875322 a.elementor-button .elementor-button-text {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  body .elementor-element.elementor-element-d875322 a.elementor-button.elementor-size-md,
  body .elementor-23010000 .elementor-element-d875322 a.elementor-button {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }
}

/* ══ M8 / D4: Etykieta rabatu na miniaturze — z powrotem na zdjęcie (góra-lewo) ══
   Obecnie „-40%" nachodzi na swatche kolorów u dołu karty. Przywracamy naturalną
   pozycję Alysum: lewy-górny róg zdjęcia, z dala od swatchy i cen.
   BEST-EFFORT — do potwierdzenia wizualnie. */
.product-miniature .thumbnail-container .product-flags,
.product-miniature .thumbnail-container .product_flags,
.product-miniature .thumbnail-container .product-labels,
.product-miniature .product-flags,
.js-product-miniature .product-flags {
  position: absolute !important;
  inset: 8px auto auto 8px !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
  margin: 0 !important;
  width: auto !important;
}

/* ══ D6: Etykieta rabatu na STRONIE PRODUKTU — na głównym zdjęciu (góra-lewo) ══
   BEST-EFFORT — do potwierdzenia wizualnie. */
body#product #content .product-flags.js-product-flags,
body#product .page-content > .product-flags.js-product-flags,
body#product .col-md-6 > .product-flags.js-product-flags,
body#product .product-cover .product-flags,
body#product .main-image-container .product-flags,
body#product .js-images-container .product-flags,
body#product .product-flags {
  position: absolute !important;
  inset: 12px auto auto 12px !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 30 !important;
}

/* ══ D9: Strzałki galerii produktu — wyśrodkowanie w pionie ══
   Standardowe centrowanie strzałek slidera. BEST-EFFORT. */
body#product .ellie-gallery-arrow,
body#product .images-container .ellie-gallery-arrow,
body#product .product-cover .slick-arrow,
body#product .main-image-container .slick-arrow,
body#product .main-image-container .slick-prev,
body#product .main-image-container .slick-next,
body#product .images-container .slick-arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
}

/* ══ D12: Usuń ręcznie wpisany pasek ikon płatności (BLIK/ING/imoje/MC/VISA) ══
   Wstrzykiwany przez panelowy custom JS jako .ellie-pay-strip. Klientka chce go usunąć. */
.ellie-pay-strip,
.ellie-pay-logo,
.ellie-pay {
  display: none !important;
}

/* ══ D13: Ujednolicenie ikon nagłówka ══
   3 ikony (szukaj/konto/koszyk) z lib.svg są WYPEŁNIONE (fill), a Ulubione (nasz fix v36)
   było KONTUROWE (fill:none, stroke 1.85px). Robimy serce wypełnione jak pozostałe,
   żeby wszystkie 4 wyglądały tak samo (styl z szablonu = filled). */
body:not(#checkout) header#header .ellie-desktop-header-favorite-v36 svg,
body:not(#checkout) header#header .ellie-desktop-header-favorite-v36 svg path {
  fill: rgb(84, 84, 84) !important;
  stroke: rgb(84, 84, 84) !important;
  stroke-width: 1px !important;
}

/* ══ D5: Zoom produktu — każde zdjęcie MIEŚCI SIĘ na ekranie (bez scrollowania w zdjęciu) ══
   Modal #product-modal pokazywał zdjęcia w pełnym rozmiarze (np. 1320px) → trzeba było scrollować.
   Teraz każde zdjęcie skalujemy do wysokości ekranu (contain), wyśrodkowane; scroll przewija
   MIĘDZY zdjęciami ze snapem. Tło modala bez zmian (zgodnie z prośbą). Desktop. */
@media (min-width: 768px) {
  body#product .js-product-images-modal .modal-body,
  body#product #product-modal .modal-body {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
  }
  body#product .js-product-images-modal .modal-body img,
  body#product #product-modal .modal-body img {
    max-height: 100vh !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    scroll-snap-align: center !important;
    flex: 0 0 auto !important;
  }
}

/* ══ M10 / D7 / D14: Brak na stanie — wyszarzony „Powiadom o dostępności" + formularz na klik ══
   Aktywne tylko na produkcie niedostępnym (JS dodaje .ellie-notify-btn / .ellie-notify-form). */
body#product .add-to-cart.ellie-notify-btn {
  background: #b9bcc2 !important;
  border-color: #b9bcc2 !important;
  color: #fff !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
body#product .add-to-cart.ellie-notify-btn:hover {
  background: #a7abb2 !important;
}
/* formularz mailalert: schowany do czasu kliknięcia przycisku */
body#product .js-mailalert.ellie-notify-form {
  display: none !important;
}
body#product .js-mailalert.ellie-notify-form.ellie-notify-open {
  display: block !important;
  margin-top: 12px !important;
}
body#product .ellie-notify-note {
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
}

/* ══ M6: Popup newslettera — mniejszy, zgrabniejszy ══
   Popup #pk-popup miał ~2045px wysokości (zdjęcie 1488px) → trzeba było scrollować.
   Ograniczamy zdjęcie i całość, żeby mieściła się na ekranie. Zamykanie po sukcesie
   obsługuje panelowy JS (ELLIE_NEWSLETTER_POPUP_V2). */
#pk-popup #pkpopup-body img,
#pk-popup img {
  max-height: 34vh !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
#pk-popup #pkpopup-body,
#pk-popup .modal__container {
  max-height: 92vh !important;
  overflow-y: auto !important;
}

/* ══ M8/D4 fix#2: Etykieta rabatu w KARUZELACH na stronie produktu ══
   Na body#product karuzele („W tej samej kategorii" itd.) trzymały flagę na dole karty
   (bottom:10px, przy swatchu). Miniatury w karuzeli mają iść na górę zdjęcia jak na listingu.
   Wysoka specyficzność (#content + głęboki selektor karuzeli) bije regułę motywu.
   NIE dotyczy głównego zdjęcia produktu (to obsługuje D6 osobno). */
body#product #content .carousel-item .product-miniature .thumbnail-container .product-flags,
body#product .carousel-item .product-miniature .thumbnail-container .product-flags,
body#product .pk-slick-carousel .product-miniature .product-flags,
body#product .product-miniature .thumbnail-container .product-flags,
body#product #content .product-miniature .product-flags {
  position: absolute !important;
  inset: 8px auto auto 8px !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
}

/* ══ M3: Menu mobilne — białe tło (koniec różowego) + podkategorie ══ */
@media (max-width: 767px) {
  #ellie-mobile-menu-panel {
    background: #ffffff !important;
  }
  #ellie-mobile-menu-panel .ellie-menu-head {
    background: #ffffff !important;
  }
  /* przycisk rozwijania podkategorii */
  #ellie-mobile-menu-panel .ellie-m3-subtoggle {
    float: right;
    border: 0 !important;
    background: transparent !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #111 !important;
    width: 28px; height: 28px;
    cursor: pointer;
    padding: 0 !important;
    margin-top: -2px;
  }
  /* lista podkategorii — domyślnie zwinięta */
  #ellie-mobile-menu-panel .ellie-m3-sub {
    display: none !important;
    padding: 0 0 6px 16px !important;
  }
  #ellie-mobile-menu-panel .ellie-m3-sub.ellie-m3-open {
    display: block !important;
  }
  #ellie-mobile-menu-panel a.ellie-m3-sublink {
    padding: 11px 0 !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    text-transform: none !important;
  }
}

/* ══ #4 (iOS runda 2): Filtr mobilny — białe tło zamiast różowego (#fffafa) ══ */
@media (max-width: 767px) {
  body #search_filters,
  body #search_filters.pk-fc,
  body #search_filters_wrapper,
  .ellie-v63-category-panel,
  .ellie-v63-category-toggle,
  .ellie-mobile-filter-toggle + * {
    background: #ffffff !important;
    background-color: #ffffff !important;
  }
}

/* ══ #3 (iOS runda 2): Etykiety NOWY + „-40%" nie mogą na siebie nachodzić ══
   Kontener .product-flags jest pozycjonowany (M8/D6), ale pojedyncze flagi muszą PŁYNĄĆ
   (nie być każda absolutnie w tym samym rogu). Układamy je jedna pod drugą / obok siebie. */
.product-miniature .product-flags .product-flag,
.product-miniature .product-flags > li,
body#product .product-flags .product-flag,
body#product .product-flags > li {
  position: static !important;
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin: 0 4px 4px 0 !important;
}

/* ══ #9 (iOS runda 2): Strzałki galerii produktu na MOBILE — wyśrodkuj w pionie ══
   Widoczne strzałki .slick-arrow były przy dole zdjęcia. Wymuszamy środek (jak slick domyślnie). */
@media (max-width: 767px) {
  body#product .slick-slider .slick-arrow,
  body#product .slick-arrow.slick-prev,
  body#product .slick-arrow.slick-next,
  body#product .images-container .slick-arrow,
  body#product [class*="gallery"] .slick-arrow {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
  }
}