/* --- CZERWONY "DO KOSZYKA", HOVER: NIEBIESKI --- */
button.cart-btn.btn-success,
.btn-success.cart-btn,
.btn-success.abs-btn-amount-cart,
button.btn-success.abs-btn-amount-cart {
    background-color: #e61919 !important;
    color: #fff !important;
    border-color: #e61919 !important;
    font-weight: 700 !important;
    transition: background-color 0.2s, border-color 0.2s !important;
}

button.cart-btn.btn-success:hover,
.btn-success.cart-btn:hover,
.btn-success.abs-btn-amount-cart:hover,
button.btn-success.abs-btn-amount-cart:hover,
button.cart-btn.btn-success:focus,
.btn-success.cart-btn:focus,
.btn-success.abs-btn-amount-cart:focus,
button.btn-success.abs-btn-amount-cart:focus {
    background-color: #124578 !important;
    border-color: #124578 !important;
    color: #fff !important;
}


body *[class*="cart-box-content"] {
    background: #fff !important;
}




/* --- RESZTA PRZYCISKÓW: NIEBIESKI #124578 --- */
button.abs-button-checkout.btn.btn-primary,
button.abs-button-checkout.btn.btn-primary:active,
.btn.btn-primary,
.btn.btn-primary:active,
.btn-success,
.btn-success:active {
    background-color: #124578 !important;
    color: #fff !important;
    border-color: #124578 !important;
    font-weight: 600 !important;
    transition: background-color 0.2s, border-color 0.2s !important;
}

button.abs-button-checkout.btn.btn-primary:hover,
button.abs-button-checkout.btn.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background-color: #0e3459 !important; /* ciemniejszy wariant do hover */
    color: #fff !important;
    border-color: #0e3459 !important;
}

/* --- POWIADOMIENIA/BANERY INFO – #124578 --- */
.message-wrapper.notify_info {
  background-color: #124578 !important;
  color: #fff !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600 !important;
}
.message-wrapper.notify_info .growl-close {
  color: #fff !important;
}
.message-wrapper.notify_info li {
  color: #fff !important;
}

/* --- CZARNY PRZYCISK "PRZEJDŹ DO KOSZYKA" W BANERZE POWIADOMIEŃ --- */
.message-wrapper.notify_info .btn,
.message-wrapper.notify_info .abs-btn,
.message-wrapper.notify_info button {
  background-color: #124578 !important;
  color: #fff !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 18px !important;
  letter-spacing: 0.5px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  transition: background-color 0.2s, color 0.2s;
}

.message-wrapper.notify_info .btn:hover,
.message-wrapper.notify_info .abs-btn:hover,
.message-wrapper.notify_info button:hover,
.message-wrapper.notify_info .btn:focus,
.message-wrapper.notify_info .abs-btn:focus,
.message-wrapper.notify_info button:focus {
  background-color: #fff !important;
  color: #111 !important;
  border: 1.5px solid #124578 !important;
  font-weight: 900 !important;
}

/* TYLKO PRZYCISKI: WYCZYŚĆ KOSZYK, MODYFIKUJ, POWRÓT DO SKLEPU, ZMIEŃ KOSZYK */
.abs-btn-amount-clear,
.abs-btn-amount-edit,
.abs-btn-amount-back,
.abs-btn-amount-change {
    color: #124578 !important;
    font-weight: 900 !important;     /* Pogrubiona czcionka */
    font-size: 13px !important;      /* Nieco mniejsze */
    background: transparent !important;
    border: 2px solid #124578 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 5px 15px !important;    /* Lekko zmniejszone */
    transition: background 0.15s, color 0.15s, border 0.15s;
    letter-spacing: normal !important;
    cursor: pointer;
}

/* INTERAKTYWNOŚĆ (hover/focus) */
.abs-btn-amount-clear:hover,
.abs-btn-amount-clear:focus,
.abs-btn-amount-edit:hover,
.abs-btn-amount-edit:focus,
.abs-btn-amount-back:hover,
.abs-btn-amount-back:focus,
.abs-btn-amount-change:hover,
.abs-btn-amount-change:focus {
    background: #eaf2fa !important; /* Bardzo jasny niebieski */
    color: #0e3459 !important;      /* Ciemniejszy niebieski */
    border-color: #0e3459 !important;
    text-decoration: none !important;
    outline: none !important;
}





/* --- Główne style --- */

/* Hover efekt dla kart produktów */
.abs-layout-product-full, 
.abs-layout-product-gallery {
  transition: all 0.3s ease !important;
}
.abs-layout-product-full:hover, 
.abs-layout-product-gallery:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
  z-index: 10 !important;
  background-color: #fff !important;
  border-radius: 10px !important;
}

/* Górne ikony (koszyk, mail, user itd.) */
.abs-header-icons a,
.abs-header-icons a span,
.abs-header-icons a i {
  color: #000000 !important;
}

/* Górna belka logowanie/rejestracja */
.abs-header-menu-top .navbar-right li {
  margin-right: 4px !important;
}
.abs-header-menu-top .navbar-right li a {
  color: #000 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-family: 'Arial', 'Helvetica', sans-serif !important;
  letter-spacing: 0.3px !important;
}

/* Menu główne - desktop */
.navbar-nav > li > a {
  font-size: 15px !important;
  padding: 8px 22px !important;
  line-height: 22px !important;
  font-weight: 800 !important;
  font-family: 'Arial', 'Helvetica', sans-serif !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: all 0.2s ease !important;
}
.navbar-nav > li > a:hover {
  color: #e61919 !important;
}

/* Mega menu - desktop */
.abs-mega-menu-container a {
  color: #000000 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}
.abs-mega-menu-container a:hover {
  color: #e61919 !important;
  font-weight: 900 !important;
  transform: scale(1.05) !important;
}

/* Boczne menu kategorii */
.abs-side-menu li a {
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
  color: #000 !important;
}
.abs-side-menu li a:hover {
  color: #e61919 !important;
  font-weight: 700 !important;
  transform: scale(1.03) !important;
}

/* Tło strony */
body {
  background-color: #f7f9fc !important;
}

/* Stopka */
.abs-panel-footer, 
.abs-panel-footer.panel-body, 
.abs-panel-footer .panel-body, 
footer, 
.abs-footer, 
.abs-footer-container {
  background-color: #222222 !important;
  color: #ffffff !important;
}
.abs-panel-footer.panel-body .list-group-item {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Powiększenie produktów bocznych */
.abs-products-media.list-group-item {
  padding: 15px !important;
  min-height: 160px !important;
  display: flex !important;
  align-items: center !important;
}
.abs-products-media.list-group-item .media-left img {
  max-width: 100px !important;
  max-height: 100px !important;
  width: 100px !important;
  height: 100px !important;
}
.abs-products-media.list-group-item .media-body {
  padding-left: 10px !important;
  display: block !important;
}
.abs-products-media.list-group-item .media-body h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* --- MENU MOBILNE --- */
@media (max-width: 991px) {
  .abs-header .navbar-collapse,
  .abs-header .navbar-collapse ul.nav,
  .abs-header .navbar-collapse ul.nav li {
    background-color: #ffffff !important;
  }






  .abs-header .navbar-collapse ul.nav > li > a {
    color: #000000 !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease-in-out !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .abs-header .navbar-collapse ul.nav > li > a:hover,
  .abs-header .navbar-collapse ul.nav > li > a:focus,
  .abs-header .navbar-collapse ul.nav > li > a:active {
    color: #e61919 !important;
    font-weight: 700 !important;
    transform: translateX(5px) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Naprawa aktywnego linka (usuń niebieskie pole) */
  .abs-header .navbar-collapse ul.nav > li.active,
  .abs-header .navbar-collapse ul.nav > li.active > a {
    background-color: transparent !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: none !important;
  }
}


@media (max-width: 991px) {
  /* Link aktywny w menu rozwijanym (z klasą 'highlighted') */
  .abs-mega-menu-container a.highlighted {
    background-color: #ffffff !important;  /* tło białe */
    color: #000000 !important;             /* czarny tekst */
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
    text-shadow: none !important;
  }

  /* Po najechaniu */
  .abs-mega-menu-container a.highlighted:hover {
    color: #e61919 !important;              /* interaktywny czerwony */
    background-color: #f5f5f5 !important;   /* lekko szare tło przy hover */
    transform: translateX(4px) !important;
  }
}

@media (max-width: 991px) {
  /* Białe tło, czarny tekst w menu rozwijanym */
  ul[id^="sm-"].mega-menu.dropdown-menu a.abs-textify-link.highlighted,
  ul[id^="sm-"].mega-menu.dropdown-menu a.abs-textify-link.highlighted:hover,
  ul[id^="sm-"].mega-menu.dropdown-menu a.abs-textify-link.highlighted:focus,
  ul[id^="sm-"].mega-menu.dropdown-menu a.abs-textify-link.highlighted:active {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    text-shadow: none !important;
    transition: all 0.3s ease !important;
  }

  /* Opcjonalny efekt przy najechaniu */
  ul[id^="sm-"].mega-menu.dropdown-menu a.abs-textify-link.highlighted:hover {
    transform: translateX(4px) !important;
    color: #e61919 !important;
  }
}


@media (max-width: 991px) {
  /* Mobilne menu rozwijane – poprawka koloru tekstu */
  ul[id^="sm-"][class*="mega-menu"].dropdown-menu a.abs-textify-link {
    color: #ffffff !important;
    background-color: transparent !important;
    font-weight: 500 !important;
    transition: all 0.3s ease-in-out !important;
  }

  ul[id^="sm-"][class*="mega-menu"].dropdown-menu a.abs-textify-link:hover,
  ul[id^="sm-"][class*="mega-menu"].dropdown-menu a.abs-textify-link:focus,
  ul[id^="sm-"][class*="mega-menu"].dropdown-menu a.abs-textify-link.highlighted,
  ul[id^="sm-"][class*="mega-menu"].dropdown-menu li.active > a {
    color: #ffffff !important;
    background-color: inherit !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
}


@media (max-width: 991px) {
  /* Dla linków w rozwijanym menu mobilnym */
  ul[id^="sm-"].dropdown-menu li > a.abs-textify-link,
  ul[id^="sm-"].dropdown-menu li.active > a,
  ul[id^="sm-"].dropdown-menu li > a.highlighted,
  ul[id^="sm-"].dropdown-menu li > a:focus,
  ul[id^="sm-"].dropdown-menu li > a:active {
    color: #ffffff !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
  }

  /* Opcjonalnie: efekt po najechaniu */
  ul[id^="sm-"].dropdown-menu li > a:hover {
    color: #e61919 !important;
    transform: translateX(4px) !important;
    background-color: transparent !important;
  }
}

.abs-mega-menu-header {
  font-weight: 800 !important; /* Mocne pogrubienie */
  font-size: 14px !important;  /* Można powiększyć, jeśli chcesz */
  text-transform: uppercase !important; /* Na wszelki wypadek */
  color: #000000 !important;   /* Czarny tekst */
  padding: 8px 0 !important;
}


@media (max-width: 991px) {
  .abs-mega-menu-header {
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    padding: 8px 0 !important;
  }
}


@media (max-width: 991px) {
  /* Styl dla nagłówków kategorii (GAŚNICE itd.) */
  .abs-mega-menu-container .abs-mega-menu-header > a {
    font-weight: 800 !important;
    font-size: 15px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    display: inline-block !important;
    padding: 6px 0 !important;
  }

  .abs-mega-menu-container .abs-mega-menu-header > a:hover {
    color: #e61919 !important;
    transform: translateX(4px) !important;
  }
}


@media (max-width: 991px) {
  /* WYRAŹNE WYTŁUSZCZENIE kategorii w menu mobilnym */
  .abs-mega-menu-container .abs-mega-menu-header > a {
    font-weight: 900 !important;
    font-size: 17px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    display: inline-block !important;
    padding: 8px 0 !important;
    letter-spacing: 0.5px !important;
  }

  .abs-mega-menu-container .abs-mega-menu-header > a:hover {
    color: #e61919 !important;
    transform: translateX(4px) !important;
  }
}


@media (max-width: 991px) {
  .abs-mega-menu-container .abs-mega-menu-header > a {
    font-weight: 900 !important;
    font-size: 18px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    display: inline-block !important;
    padding: 8px 0 !important;
    letter-spacing: 0.5px !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  .abs-mega-menu-container .abs-mega-menu-header > a:hover {
    color: #e61919 !important;
    transform: translateX(4px) !important;
  }
}

@media (max-width: 991px) {
  /* Główne kategorie (np. GAŚNICE, SZAFKI OCHRONNE) */
  .abs-mega-menu-container .abs-mega-menu-header > a {
    font-weight: 900 !important;
    font-size: 18px !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    display: inline-block !important;
    padding: 8px 0 !important;
    letter-spacing: 0.5px !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  .abs-mega-menu-container .abs-mega-menu-header > a:hover {
    color: #e61919 !important;
    transform: translateX(4px) !important;
  }

  /* Podkategorie (np. Gaśnice domowe, Szafki na zawory) */
  .abs-mega-menu-container li > a:not(.abs-mega-menu-header > a) {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #000000 !important;
    background: transparent !important;
    padding: 6px 0 !important;
    display: inline-block !important;
    font-family: Arial, Helvetica, sans-serif !important;
    transition: all 0.2s ease-in-out !important;
  }

  .abs-mega-menu-container li > a:not(.abs-mega-menu-header > a):hover {
    color: #e61919 !important;
    transform: translateX(3px) !important;
  }
}


/* === Zmiany wizualne kategorii i podkategorii w mega menu === */

/* Główne kategorie (GAŚNICE, HYDRANTY itd.) */
.abs-mega-menu-container .abs-mega-menu-header {
  font-size: 18px !important;       /* większy rozmiar */
  font-weight: 900 !important;      /* pogrubione */
  color: #000000 !important;        /* czarny kolor */
  text-transform: uppercase !important;
  font-family: Arial, Helvetica, sans-serif !important;
  margin-bottom: 10px !important;
}

/* Podkategorie */
.abs-mega-menu-container ul > li > a:not(.abs-mega-menu-header a) {
  font-size: 15px !important;       /* większy rozmiar */
  font-weight: 600 !important;      /* lekko pogrubione */
  color: #333333 !important;        /* ciemniejszy tekst */
  font-family: Arial, Helvetica, sans-serif !important;
  padding: 4px 0 !important;
  display: block !important;
  line-height: 1.6 !important;
  transition: all 0.2s ease-in-out !important;
}


/* Zmniejszenie odstępu między główną kategorią a podkategoriami */
.abs-mega-menu-container .abs-mega-menu-header {
  margin-bottom: 4px !important;  /* wcześniej było np. 10px */
  padding-bottom: 0 !important;
}

.abs-mega-menu-container ul {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Mocniejsze pogrubienie głównych kategorii */
.abs-mega-menu-container .abs-mega-menu-header {
  font-weight: 1000 !important; /* wcześniej było 800–900 */
}


.abs-mega-menu-header,
.abs-mega-menu-header > a {
  all: unset !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  color: #000 !important;
  display: block !important;
  text-transform: uppercase !important;
  font-family: Arial, Helvetica, sans-serif !important;
}


/* Większy odstęp nad każdą główną kategorią w mega menu */
.abs-mega-menu-header {
  margin-top: 20px !important; /* zwiększ odstęp przed nagłówkiem */
}
.abs-mega-menu-header:first-child {
  margin-top: 0 !important; /* pierwszy nagłówek bez odstępu */
}

/* Większy odstęp nad każdą główną kategorią w mega menu */
.abs-mega-menu-header {
  margin-top: 40px !important; /* zwiększamy z np. 20px do 40px */
}
.abs-mega-menu-header:first-child {
  margin-top: 0 !important;
}

.abs-mega-menu-container ul > li > a:not(.abs-mega-menu-header a) {
  padding: 2px 0 !important;
  line-height: 1.4 !important;
}

.abs-mega-menu-container ul > li > a:not(.abs-mega-menu-header a):hover {
  font-weight: 900 !important;
  color: #000000 !important;
  transform: translateX(3px) !important;
  text-shadow: 0.3px 0.3px 0 #000000 !important;
}


/* Główna kategoria aktywna (np. GAŚNICE na czerwono) */
.abs-side-menu li.active > a,
.abs-side-menu li.open > a {
  color: #e61919 !important;
  font-weight: 800 !important;
}

/* Hover na podkategorie – czarny, pogrubiony, przesunięcie */
.abs-side-menu li a:hover {
  color: #000000 !important;            /* czarny tekst */
  font-weight: 800 !important;          /* mocne pogrubienie */
  transform: translateX(3px) !important;/* delikatne przesunięcie */
  transition: all 0.2s ease-in-out !important;
}

/* Styl domyślny podkategorii (przed najechaniem) */
.abs-side-menu li a {
  color: #000000 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.abs-side-menu li a {
  font-weight: 500 !important;
  color: #000 !important;
  transition: transform 0.15s ease-in-out !important; /* tylko przesunięcie */
}

.abs-side-menu li a:hover {
  color: #000000 !important;
  font-weight: 900 !important;
  transform: translateX(4px) !important;
}

/* === MEGA MENU - efekty na desktopie === */

/* Domyślny styl dla wszystkich linków */
.abs-mega-menu-container a {
  color: #000000 !important;
  font-weight: 500 !important;
  display: inline-block !important;
  transition: none !important;
}

/* Hover dla PODKATEGORII (np. Gaśnice domowe) */
.abs-mega-menu-container ul > li > a:not(.abs-mega-menu-header a):hover {
  color: #000000 !important;             /* czarny tekst */
  font-weight: 900 !important;           /* mocne pogrubienie */
  transform: translateX(3px) !important; /* lekki ruch */
  transition: transform 0.1s ease-out !important;
}

/* Hover dla GŁÓWNYCH KATEGORII (np. GAŚNICE) */
.abs-mega-menu-container .abs-mega-menu-header > a:hover {
  color: #e61919 !important;             /* czerwony */
  font-weight: 900 !important;
  transform: translateX(3px) !important;
  transition: transform 0.1s ease-out !important;
}


@media (max-width: 991px) {
  #logo-mobile {
    height: 40px !important;       /* Zwiększa widoczną wysokość */
    width: auto !important;        /* Zachowuje proporcje */
    max-height: unset !important;  /* Usuwa ograniczenie */
  }
}


@media (max-width: 991px) {
  #logo-mobile {
    height: auto !important;
    width: 140px !important;
    max-width: 100% !important;
    image-rendering: -webkit-optimize-contrast; /* poprawa ostrości */
    image-rendering: crisp-edges;
  }

  .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


@media (max-width: 991px) {
  #logo-mobile {
    width: 160px !important;     /* większa szerokość */
    height: auto !important;     /* zachowanie proporcji */
    max-height: 60px !important; /* opcjonalnie – ogranicz wysokość */
    image-rendering: crisp-edges !important;
    display: block !important;
  }

  .navbar-brand {
    padding: 4px 0 !important;   /* dodaj lekki margines pionowy */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


@media (max-width: 991px) {
  #logo-mobile {
    width: auto !important;
    height: 40px !important; /* zwiększ wysokość */
    max-height: 50px !important;
    display: block !important;
  }

  .navbar-brand {
    height: auto !important;
    padding: 5px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .navbar-header {
    min-height: 60px !important; /* zapewnij wystarczającą przestrzeń */
  }
}


@media (max-width: 991px) {
  #logo-mobile {
    height: auto !important;
    width: auto !important;
    max-height: 40px !important;
    max-width: 140px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 5px 10px !important;
  }

  .navbar-header {
    min-height: 50px !important;
  }
}


@media (max-width: 991px) {
  .navbar-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 10px !important; /* delikatny margines po bokach */
    min-height: 60px !important; /* trochę więcej miejsca pionowo */
  }

  #logo-mobile {
    height: auto !important;
    width: auto !important;
    max-height: 40px !important;
    max-width: 120px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}


@media (max-width: 991px) {
  .navbar-header {
    display: flex !important;
    justify-content: flex-start !important; /* wyrównanie do lewej */
    align-items: center !important;
    padding: 0 10px !important;
    min-height: 60px !important;
    position: relative !important;
  }

  #logo-mobile {
    max-height: 40px !important;
    max-width: 120px !important;
    object-fit: contain !important;
    margin-left: 20px !important; /* <== PRZESUNIĘCIE W PRAWO */
    display: block !important;
  }
}

@media (max-width: 991px) {
  .navbar-header {
    display: flex !important;
    justify-content: center !important; /* <== CENTRUJE logo */
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
  }

 @media (max-width: 991px) {
  .navbar-header {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 60px !important;
    width: 100% !important;
    padding: 0 48px !important; /* <-- rezerwuje miejsce z lewej i prawej */
    box-sizing: border-box !important;
  }

 @media (max-width: 991px) {
  .navbar-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    height: 60px !important;
    padding: 0 60px !important; /* Zostawia miejsce na przyciski po bokach */
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .navbar-brand {
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }

  @media (max-width: 991px) {
  .navbar-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 60px !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .navbar-brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: auto !important;
  }

  #logo-mobile {
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Ukryj ewentualny przycisk powrotu */
  .mobile-menu-button, #mobileMenuReturnBtn {
    display: none !important;
  }
}


@media (max-width: 991px) {
  .navbar-header {
    display: flex !important;
    justify-content: center !important; /* CENTRUM */
    align-items: center !important;
    height: 80px !important; /* Większa przestrzeń dla logo */
    width: 100% !important;
  }

  .navbar-brand {
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
  }

  #logo-mobile {
    height: 75px !important;       /* BARDZO DUŻE logo */
    width: auto !important;
    max-width: 95% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Ukrycie przycisków nawigacyjnych */
  .mobile-menu-button,
  #mobileMenuReturnBtn {
    display: none !important;
  }
}



/* Ustaw czerwony kolor ikony lupki w polu wyszukiwania */
.abs-header .btn.btn-default .abs-icon-search {
  color: #e61919 !important;
  fill: currentColor !important; /* dla SVG font-iconów */
}

/* Ustaw też sam przycisk, by dziedziczył czerwony */
.abs-header .btn.btn-default {
  color: #e61919 !important;
}


.abs-icon-search svg {
  stroke: #e61919 !important;
  fill: #e61919 !important;
}





button.btn.btn-default span.abs-icon-search::before {
  color: #e61919 !important;
}










/* Ikona lupki - kolor czarny */
.abs-header .btn.btn-default .abs-icon-search,
.abs-header .btn.btn-default .abs-icon-search svg {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: #000000 !important;
}

/* Przycisk wyszukiwania - czarny */
.abs-header .btn.btn-default {
  color: #000000 !important;
  background: transparent !important;
  border: none !important;
}

/* Checkboxy i etykiety pod wyszukiwarką – kolor czarny */
.abs-search-options .checkbox label,
.abs-search-options .checkbox span,
.abs-search-options-links,
.abs-search-options {
  color: #000000 !important;
  font-weight: 500 !important;
}

/* Styl tekstu "DOSTĘPNE 'OD RĘKI'", "SZUKAJ TAKŻE W OPISACH..." */
.abs-search-options span,
.abs-search-options label {
  color: #000000 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}




/* Efekt interaktywny dla WSZYSTKICH banerów/wstawek */
.abs-html-injection img,
.abs-panel-body img,
.abs-banner img,
.abs-home-widget img {
  border-radius: 14px;
  transition: box-shadow 0.22s, transform 0.22s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  cursor: pointer;
}

.abs-html-injection img:hover,
.abs-panel-body img:hover,
.abs-banner img:hover,
.abs-home-widget img:hover,
.abs-html-injection img:active,
.abs-panel-body img:active,
.abs-banner img:active,
.abs-home-widget img:active {
  /* Tylko powiększenie i lekki cień – bez zmiany jasności! */
  transform: scale(1.045);
  box-shadow: 0 8px 26px rgba(0,0,0,0.14);
}




@media (max-width: 991px) {
  .abs-header-light-content-row,
  .navbar-header,
  .abs-header .navbar-header {
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
  }
  .abs-header-light-content-row .navbar-brand,
  .navbar-brand {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .abs-header-light-content-row .navbar-brand img,
  .navbar-brand img.logo-desktop,
  .navbar-brand img.logo-mobile,
  .abs-header .navbar-brand img,
  #logo-mobile {
    max-height: 52px !important;
    height: 52px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }
}


.abs-panel-footer .panel-body .list-group-item:first-child {
    color: #e61919 !important;       /* Czerwony jak przycisk DO KOSZYKA */
    font-weight: 900 !important;     /* Bardziej wyboldowane */
    text-transform: uppercase !important; /* Dla efektu */
    letter-spacing: 0.3px !important;
}


@media (max-width: 991px) {
  .abs-panel-footer .panel-body .list-group-item {
    color: #ffffff !important;
  }

  .abs-panel-footer .panel-body .list-group-item:first-child {
    color: #ffffff !important;
  }
}


@media (max-width: 991px) {
  /* Wszystkie elementy listy w stopce: kolor biały, normalna czcionka */
  .abs-panel-footer .panel-body .list-group-item {
    color: #ffffff !important;
    font-weight: 400 !important;
  }

  /* Tylko pierwszy element (nagłówek kategorii): pogrubiony */
  .abs-panel-footer .panel-body .list-group .list-group-item:first-child {
    font-weight: 700 !important;
  }
}


@media (max-width: 991px) {
  /* Wszystkie linki – domyślnie białe i niepogrubione */
  .abs-panel-footer .panel-body a.list-group-item {
    color: #ffffff !important;
    font-weight: 400 !important;
  }

  /* Główne nagłówki stopki (np. POMOC, REGULAMIN, FIREPOL) – czerwone i pogrubione */
  .abs-panel-footer .panel-body .panel-heading {
    color: #e61919 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
  }

  /* Nadpisanie nietypowych elementów, które wyglądają jak podlinki a są nagłówkiem */
  .abs-panel-footer .panel-body a.list-group-item[aria-expanded="true"] {
    color: #e61919 !important;
    font-weight: 700 !important;
  }
}


@media (max-width: 991px) {
  /* Podlinki (normalna grubość, białe) */
  .abs-panel-footer .panel-body .list-group-item {
    color: #ffffff !important;
    font-weight: 400 !important;
  }

  /* Nagłówki typu <div class="panel-heading"> – czerwone i grube */
  .abs-panel-footer .panel-heading {
    color: #e61919 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
  }

  /* Nagłówki które są linkiem (np. rozwijane) */
  .abs-panel-footer .panel-body a.list-group-item[aria-expanded="true"] {
    color: #e61919 !important;
    font-weight: 700 !important;
  }

  /* Dodatkowe zabezpieczenie – jeśli któryś z głównych nagłówków ma pierwsze dziecko jako <a> */
  .abs-panel-footer .panel-body .list-group .list-group-item:first-child[aria-expanded="true"] {
    color: #e61919 !important;
    font-weight: 700 !important;
  }
}


/* Efekt kliknięcia - kolor tła + biały tekst */
@media (max-width: 991px) {
  .abs-form-input.radio-specialb input[type="radio"]:checked + label,
  .abs-form-input.radio-special input[type="radio"]:checked + label {
    background-color: #2b3d4f !important;
    color: #ffffff !important; /* tekst na biało */
    border-color: #2b3d4f !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  /* Efekt dotyku */
  .abs-form-input.radio-specialb label,
  .abs-form-input.radio-special label {
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
  }

  .abs-form-input.radio-specialb label:active,
  .abs-form-input.radio-special label:active {
    transform: scale(0.97);
  }
}

/* ANIMACJA WYBORU DOSTAWY I PŁATNOŚCI */
.abs-form-input.radio-special input[type="radio"]:checked + label,
.abs-form-input.radio-special input[type="radio"]:active + label {
    background-color: #2b3d4f !important;
    color: #ffffff !important;
    border-color: #124578 !important;
    transition: all 0.2s ease-in-out !important;
}

/* WYBÓR DOSTAWY I PŁATNOŚCI - KOLOR PO ZAZNACZENIU */
.abs-delivery-item.selected,
.abs-payment-item.selected,
.abs-delivery-item.active,
.abs-payment-item.active {
    background-color: #124578 !important;
    color: #ffffff !important;
    border-color: #124578 !important;
    transition: all 0.2s ease-in-out !important;
}

.abs-delivery-item.selected label,
.abs-payment-item.selected label,
.abs-delivery-item.active label,
.abs-payment-item.active label {
    color: #ffffff !important;
}

/* Styl po wybraniu opcji dostawy/płatności */
.abs-form-input.radio-special.abs-slctd label {
    background-color: #124578 !important;
    color: #ffffff !important;
    border-color: #2b3d4f !important;
}

/* Cena w wybranym kafelku (biała przy zaznaczeniu) */
.abs-form-input.radio-special.abs-slctd label .abs-item-price-amount,
.abs-form-input.radio-special.abs-slctd label .abs-item-price-amount strong,
.abs-form-input.radio-special.abs-slctd label .abs-item-price-amount span {
    color: #ffffff !important;
}


/* ===========================
   SZERSZY SKLEP NA DUŻYCH MONITORACH
   (wklej na sam KONIEC CSS)
   =========================== */

/* 1) Rozciągnij główne kontenery do szerokości ekranu */
body,
.abs-page,
.abs-container,
.abs-content,
.abs-main,
.abs-main-content,
.abs-layout,
.abs-layout-content,
.abs-panel,
.abs-panel-body {
  max-width: 100% !important;
}

/* 2) Najważniejsze: zwiększ maks. szerokość Bootstrapowego kontenera */
.container {
  width: 100% !important;
  max-width: 1640px !important;   /* <- tu sterujesz “docelową” szerokością na desktop */
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}

/* 3) Jeszcze szerzej na ultra-szerokich ekranach (opcjonalnie) */
@media (min-width: 1600px) {
  .container { max-width: 1760px !important; }
}

@media (min-width: 1900px) {
  .container { max-width: 1920px !important; }
}

/* 4) Jeśli gdzieś masz zagnieżdżone “container w container” — to często zwęża układ */
.container .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}




/* =========================================
   WAPRO HYBRYD – SZERSZY UKŁAD NA DUŻYCH EKRANACH
   WKLEJ NA SAM KONIEC CSS
   ========================================= */

@media (min-width: 1400px) {
  html body .container,
  html body .abs-container,
  html body .abs-page,
  html body .abs-content,
  html body .abs-main,
  html body .abs-main-content,
  html body .abs-layout,
  html body .abs-layout-content,
  html body .abs-panel,
  html body .abs-panel-body,
  html body .row {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  html body .container .container,
  html body .container .row .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 1600px) {
  html body .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (min-width: 1900px) {
  html body .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}



/* ===========================
   WAPRO – ROZSZERZENIE UKŁADU (FINAL FIX)
   =========================== */

@media (min-width: 1200px) {

  /* Główny kontener bootstrap */
  body .container {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Najważniejsze – WAPRO layout */
  body .abs-layout,
  body .abs-layout-content,
  body .abs-main,
  body .abs-main-content,
  body .abs-content {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* GRID – to często blokuje szerokość */
  body .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* KOLUMNY – żeby się nie ściskały */
  body [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

}

/* Ultra szerokie ekrany */
@media (min-width: 1600px) {
  body .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}


/* WAPRO HYBRYD – nadpisanie szerokości kontenera */
html {
  --container-width: 94vw !important;
}

@media (min-width: 1600px) {
  html {
    --container-width: 96vw !important;
  }
}

@media (min-width: 1900px) {
  html {
    --container-width: 97vw !important;
  }
}