/* ELLIE MOBILE UX FIXES V80
   Zbiorczy, czysty plik CSS (bez observerów) na zgłoszenia front-end mobile.
   Każda sekcja = osobny punkt zgłoszenia. Selektory potwierdzone headlessem 390px na żywym sklepie.
*/

/* ====== #8 — Auto-zoom na pole ilości (iOS zoomuje input <16px) ======
   Recon: #quantity_wanted ma font-size 15px → iOS robi auto-zoom przy tapnięciu.
   Fix: 16px na polach ilości/inputach koszyka i checkoutu na ≤767px. Bez user-scalable=no. */
@media (max-width: 767px) {
  .product-quantity #quantity_wanted,
  .product-quantity input.form-control,
  .product-quantity .qty input,
  .bootstrap-touchspin input,
  .bootstrap-touchspin input.form-control,
  .cart-line .qty input,
  .cart-line input[type="number"],
  .cart-overview input.js-cart-line-product-quantity,
  #checkout input[type="number"],
  #checkout .js-cart-line-product-quantity {
    font-size: 16px !important;
  }
}

/* ====== #13 — "Zobacz koszyk" robi sie bialy na :active/:focus ======
   Recon: kolor marki (DODAJ DO KOSZYKA / Przejdz do zamowienia) = rgb(157,189,231) #9dbde7,
   tekst bialy. "Zobacz koszyk" (.reverse-btn) traci kolor po tapnieciu (stan active/focus).
   Fix: pin pelnego koloru marki we wszystkich stanach. Bez observera. */
.cart-button a.btn.reverse-btn,
.cart-button a.btn.reverse-btn:link,
.cart-button a.btn.reverse-btn:visited,
.cart-button a.btn.reverse-btn:hover,
.cart-button a.btn.reverse-btn:focus,
.cart-button a.btn.reverse-btn:active,
.cart-button a.btn.reverse-btn.active {
  background-color: #9dbde7 !important;
  border-color: #9dbde7 !important;
  color: #fff !important;
  background-image: none !important;
}

/* ====== #5a — Miniaturki galerii zachodza na dolny pasek ======
   Recon: dolny pasek = .pk-mobile-bottom-panel, position:fixed, wysokosc 76px, z-index:auto
   (stad galeria/slick potrafi go przykryc / miniatury na niego zachodza).
   Fix: pasek nad trescia + rezerwa miejsca = wysokosc paska (76px + zapas). */
@media (max-width: 767px) {
  .pk-mobile-bottom-panel {
    z-index: 990 !important; /* nad galeria/slick, ponizej overlay pk-shadow(998)/popup */
  }
  body#product #wrapper,
  body#category #wrapper,
  body#product .product-container,
  body#category #products {
    padding-bottom: 84px !important;
  }
}

/* ====== #6 — nota o darmowej wysylce pod cena (statyczna) ======
   "Brutto" usuniete w product-prices.tpl. Nota na osobnej linii, dyskretna. */
.tax-shipping-delivery-label .ellie-free-shipping-note {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: #4088d1;
}

/* ====== #7 — Rejestracja: korzyści z konta + styl ======
   Angielski tekst "Already have an account?" zastąpiony polską listą korzyści. */
.ellie-register-benefits {
  background: #f8f9fb;
  border-left: 3px solid #9dbde7;
  padding: 16px 20px;
  margin-bottom: 24px;
  border-radius: 4px;
}
.ellie-register-benefits__title {
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
}
.ellie-register-benefits__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.ellie-register-benefits__list li {
  padding: 4px 0;
  padding-left: 20px;
  position: relative;
  color: #555;
}
.ellie-register-benefits__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #9dbde7;
  font-weight: 700;
}
.ellie-register-benefits__login {
  margin: 0;
  font-size: 0.9em;
  color: #666;
}
.ellie-register-benefits__login a {
  color: #9dbde7;
  text-decoration: underline;
}

/* #7b — placeholder podpowiedzi hasla */
input[name="passwd"]::placeholder,
input#field-password::placeholder {
  color: #aaa;
  font-style: italic;
  font-size: 0.9em;
}

/* ====== #5d — Ukryj ikone ciasteczek (pk-cookie-toggler) ======
   Klientka prosila o usuniecie. Przycisk byl widoczny na wszystkich stronach.
   GDPR obslugiwane jest przez baner przy pierwszej wizycie - staly przycisk jest zbedny. */
.pk-cookie-toggler,
.pk-fixed-button.pk-cookie-toggler {
  display: none !important;
}

/* ====== #1/#2/#13 — mobilny naglowek: ikony absolutnie po prawej, logo po lewej ======
   position:absolute na kolumnie ikon — dziala niezaleznie od flex/display rodzica.
   Nie walczymy z Elementorem o flex-row; po prostu wyrywamy ikony z flow i
   przyklejamy je do prawej krawedzi headera. */
@media (max-width: 767px) {
  header#header .elementor-element-10457d43 {
    display: block !important;
    overflow: visible !important;
    position: relative !important;
  }
  header#header .pk-nav { display: none !important; }

  /* Kolumna ikon: absolutnie po prawej, wycentrowana w pionie przez top:0 bottom:0 + flex */
  body:not(#checkout) header#header .elementor-element-57a05491 {
    position: absolute !important;
    right: 8px !important;
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    z-index: 5 !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Kolumna logo: pelna szerokosc minus miejsce na ikony po prawej */
  body:not(#checkout) header#header .elementor-element-629cf4b7 {
    width: 100% !important;
    max-width: calc(100% - 116px) !important;
    overflow: visible !important;
  }

  /* colWrap: usuń padding, widgetWrap: skompaktuj gap */
  body:not(#checkout) header#header .elementor-element-57a05491 > .elementor-column-wrap {
    padding: 0 !important;
  }
  body:not(#checkout) header#header .elementor-element-57a05491 > .elementor-column-wrap > .elementor-widget-wrap {
    gap: 8px !important;
  }

  /* pksignin i pkcart: margin-left:50px ustawiony w Elementorze — zerujemy,
     wymuszamy kompaktową szerokość 36px */
  body:not(#checkout) header#header .elementor-element-57a05491 .elementor-widget-pksignin,
  body:not(#checkout) header#header .elementor-element-57a05491 .elementor-widget-pkcart {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  body:not(#checkout) header#header .elementor-element-57a05491 .elementor-widget-pksignin .elementor-widget-container,
  body:not(#checkout) header#header .elementor-element-57a05491 .elementor-widget-pkcart .elementor-widget-container {
    margin: 0 !important;
  }
}

/* ====== #9 — Ikony platnosci w mini-koszyku (widoczne na mobile) ======
   Obraz payment_logos_*.webp jest w .blockcart .header z klasa .db (display:block).
   Reguła display:none w panelowym custom CSS nie nadpisuje .db!important.
   Fix: ukrywamy przez CSS z !important w tym pliku. */
img.payment-methods-img {
  display: none !important;
  visibility: hidden !important;
}

/* ====== #12 — Siatka produktow na mobile (kategorie/listing) ======
   setupMobileCategory() w customerjs1.js ustawia grid przez inline styles.
   Po AJAX-owym sortowaniu lista produktow jest wymieniana — inline styles znikaja.
   Fix: te same reguly w CSS (zawsze aktywne, przetrwaja AJAX replace). */
@media (max-width: 767px) {
  body#category .product-list-container.grid-container,
  body#new-products .product-list-container.grid-container,
  body#search .product-list-container.grid-container,
  body#prices-drop .product-list-container.grid-container,
  body#best-sales .product-list-container.grid-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body#category .product-list-container.grid-container .product-miniature,
  body#new-products .product-list-container.grid-container .product-miniature,
  body#search .product-list-container.grid-container .product-miniature {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ====== #5b — Strzalki galerii produktu na mobile (klikalne, nad overlayem) ======
   Problem: v41.css ustawia pointer-events:auto tylko dla min-width:768px.
   Na mobile (<768px) strzalki nie odbieraly klikniec. Takze zoomImg mogl przyslaniac.
   Fix: force pointer-events:auto + z-index nad .prod-image-zoom (auto) i .zoomImg. */
@media (max-width: 1024px) {
  body#product .product-cover .ellie-gallery-arrow,
  body#product .product-cover .ellie-gallery-prev,
  body#product .product-cover .ellie-gallery-next,
  body#product .product-cover .ellie-v56-gallery-arrow {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 200 !important;
    position: absolute !important;
    cursor: pointer !important;
  }

  /* zoomImg i .prod-image-zoom nie moga przeslaniac strzalek ani blokować swipe */
  body#product .product-cover img.zoomImg {
    display: none !important;
    pointer-events: none !important;
  }
  body#product .prod-image-zoom {
    pointer-events: none !important;
  }
  body#product .prod-image-zoom picture {
    pointer-events: none !important;
  }
}

/* ANDROID FIX: usuniety — zastapiony przez position:absolute powyzej (dziala wszedie) */