/* =========================================================
   NOWOCZESNA CZCIONKA
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');


/* =========================================================
   PODSTAWA
========================================================= */
body {
    font-family: 'Outfit', Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0.2px;

/* =========================================================
   WAPRO – NAGŁÓWKI PANELI BOLD
========================================================= */
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.abs-panel-main .panel-heading h1,
.abs-panel-main .panel-heading h2,
.abs-panel-main .panel-heading h3,
.abs-panel-main .panel-heading h4 {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

/* jeśli gdzieś jeszcze nie łapie */
h1, h2, h3, h4 {
    font-weight: 700 !important;
}
    text-transform: none;
    background: #fff; /* zabezpieczenie przed czarną stroną */
}


/* =========================================================
   MENU – DUŻE LITERY
========================================================= */
nav a,
.menu a,
.navbar a {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}


/* =========================================================
   KATEGORIE
========================================================= */
.sidebar a,
.category a,
.categories a {
    font-weight: 500;
    font-size: 15px;
    padding: 6px 0;
    display: block;
}


/* =========================================================
   PRODUKTY
========================================================= */
.product-name,
.product-title,
.product a {
    font-weight: 500;
    font-size: 15px;
}


/* =========================================================
   NAGŁÓWKI
========================================================= */
h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: 0.5px;
}


/* =========================================================
   PODKATEGORIE – CZARNA CZCIONKA + FORMAT ZDANIOWY
========================================================= */
.sidebar li li a,
.categories li li a,
.category li li a,
.menu li li a,
nav li li a,
ul.children a,
ul.sub-menu a,
ul.submenu a,
ul.dropdown-menu a,
.sidebar ul ul li:not(:first-child) > a {
    color: #000 !important;
    text-transform: capitalize !important;
}


/* =========================================================
   TRZECI POZIOM PODKATEGORII – NORMALNA GRUBOŚĆ
========================================================= */
.sidebar li li li a,
.categories li li li a,
.category li li li a,
.menu li li li a,
nav li li li a,
ul.children li li a,
ul.sub-menu li li a,
ul.submenu li li a,
ul.dropdown-menu li li a {
    font-weight: 400 !important;
}


/* =========================================================
   H1 NAZWY PRODUKTU – DUŻE LITERY (WAPRO)
========================================================= */
h1.abs-product-name {
    text-transform: uppercase !important;
}


/* =========================================================
   NAZWY PRODUKTÓW – DUŻE LITERY
========================================================= */
td a,
.product-list a,
.products a,
.grid a,
.list a,
a[href*=",p"] {
    text-transform: uppercase !important;
}


/* =========================================================
   FADE IN PRZY ŁADOWANIU STRONY
   ✔ BEZ transform
   ✔ BEZ CZARNEJ STRONY
   ✔ COOKIE BAR OK
========================================================= */

html {
    opacity: 0;
    animation: fadeInPage 0.6s ease-out forwards;
}

@keyframes fadeInPage {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* =========================================================
   COOKIE BAR – PEWNE PRZYPINANIE
========================================================= */
#cookie-info,
.cookie-bar,
.cookies {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 9999;
}
/* =========================================================
   WAPRO – GŁÓWNE KATEGORIE MEGA MENU (WIELKIE + BOLD)
========================================================= */

#mainMenu 
.abs-mega-menu-container 
li.abs-mega-menu-links-box 
> ul[aria-label] 
> li:first-child > a,
#mainMenu 
.abs-mega-menu-container 
li.abs-mega-menu-links-box 
> ul[aria-label] 
> li:first-child > a > span:first-child {
    text-transform: uppercase !important;
    font-weight: 700 !important;
}
/* =========================================================
   WAPRO – PODKATEGORIA DUŻYMI LITERAMI + ZIELONY
========================================================= */

.abs-side-menu span.abs-all-cat-name,
li.abs-root-link span.abs-all-cat-name {
    text-transform: uppercase !important;
    letter-spacing: 1px;
    color: #2e7d32 !important;   /* zielony jak w menu */
}
.abs-side-menu li.abs-root-link a span.abs-all-cat-name {
    color: #2e7d32 !important;
}
/* =========================================================
   WAPRO – JEDNAKOWY ROZMIAR ZDJĘĆ NA LIŚCIE PRODUKTÓW
========================================================= */

/* kontener zdjęcia w tabeli/listingu */
.product-list img,
.products img,
td img[src*="/towary/"],
.abs-product-image img {
    width: 80px !important;      /* ← zmień na ile chcesz */
    height: 80px !important;     /* ← musi być taka sama */
    object-fit: contain !important; /* żeby nie ucinało */
    display: block;
    margin: auto;
}

/* opcjonalnie – żeby kolumna była równa */
.product-list td:first-child {
    width: 100px;
}
/* =========================================================
   WAPRO – RÓWNE ZDJĘCIA NA LIŚCIE PRODUKTÓW (PEWNA WERSJA)
========================================================= */

/* wszystkie obrazki w tabelach produktów */
table img,
.product-list img,
.products img,
td img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
}

/* jeśli obrazek jest w divie jako tło */
td div[style*="background-image"] {
    width: 80px !important;
    height: 80px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
a.no-caps,
.abs-cms-page a.no-caps,
.abs-footer a.no-caps,
.abs-menu a.no-caps {
    text-transform: none !important;
}
/* ukrycie wszystkiego po nazwie użytkownika */
.abs-dropdown-user b span:not(:first-child) {
    display: none !important;
}
/* ==== WAPRO CHECKOUT – ukrycie oddziału przy nazwie ==== */

body[data-controller="checkout"] b span:not(:first-child),
body[data-controller="checkout"] strong span:not(:first-child),
body[data-controller="checkout"] .abs-store-desc,
body[data-controller="checkout"] .comma {
    display: none !important;
}
/* ukryj nazwę klienta / firmy / miasta w headerze */
.selected-division {
    display: none !important;
}
/* ukryj "Wybierz Oddział/Magazyn" w menu użytkownika */
#selectDivisionBtn {
    display: none !important;
}
/* =========================================================
   WAPRO – LINKI POD WYSZUKIWARKĄ W JEDNYM WIERSZU
========================================================= */

.abs-search-options-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 8px;                /* odstęp między linkami */
    justify-content: center; /* albo flex-start jeśli chcesz do lewej */
}

.abs-search-options-links a {
    display: inline-block !important;
}

/* jeśli separator "|" robi problem */
.abs-search-options-links br {
    display: none !important;
}
/* =========================================================
   MOBILE – POZIOMY SCROLL LINKÓW POD WYSZUKIWARKĄ
   (najlepsze dla WAPRO B2B)
========================================================= */

@media (max-width: 768px) {

    .abs-search-options-links {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px;
        padding: 6px 10px;
        -webkit-overflow-scrolling: touch;
    }

    /* ukryj kreski |
       (WAPRO wstawia je jako tekst) */
    .abs-search-options-links *:not(a) {
        display: none !important;
    }

    .abs-search-options-links a {
        flex: 0 0 auto;
        white-space: nowrap;
        background: #eef3f0;
        padding: 8px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    /* opcjonalnie – schowaj pasek scrolla */
    .abs-search-options-links::-webkit-scrollbar {
        display: none;
    }
}
/* =========================================================
   MOBILE – USUNIĘCIE KRESEK "|" W WAPRO
========================================================= */

@media (max-width: 768px) {

    /* ukryj wszystko co NIE jest linkiem */
    .abs-search-options-links > *:not(a) {
        display: none !important;
    }

    /* jeśli kreska jest tekstem w pseudo elemencie */
    .abs-search-options-links::before,
    .abs-search-options-links::after {
        content: none !important;
    }
}
@media (max-width: 768px) {

    .abs-search-options-links {
        font-size: 0;
    }

    .abs-search-options-links a {
        font-size: 13px;
    }
}
/* =========================================================
   MOBILE – WYŚRODKOWANIE TEKSTU W KAFELKACH
========================================================= */

@media (max-width: 768px) {

    .abs-search-options-links a {
        display: flex !important;
        align-items: center;      /* pionowo */
        justify-content: center;  /* poziomo */
        text-align: center;
        line-height: 1.2;
        min-height: 42px;         /* równa wysokość */
        padding: 6px 10px;
    }
}
.abs-search-options-links a {
    background: #e8f5e9;
    color: #2e7d32 !important;
    font-weight: 600;
}
/* =========================================================
   MOBILE – NIE UCINAJ PIERWSZEGO KAFELKA
========================================================= */

@media (max-width: 768px) {

    /* kontener scrolla */
    .abs-search-options-links {
        padding-left: 15px !important;
        margin-left: 0 !important;
        scroll-padding-left: 15px;
    }

    /* pierwszy link */
    .abs-search-options-links a:first-child {
        margin-left: 0 !important;
    }
/* =========================================================
   MOBILE – SCROLL TYLKO MENU, NIE CAŁA STRONA
========================================================= */

@media (max-width: 768px) {

    .abs-search-options-links {
        display: flex !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding-left: 10px !important;

        /* 🔥 kluczowe */
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .abs-search-options-links a:first-child {
        margin-left: 0 !important;
    }
.abs-search-options a[href="/search/pl.html"]{
    background:#2e8b57 !important;
    color:#fff !important;
    border:none !important;
}
/* "Wszystkie produkty" jak normalne menu */
.abs-header-menu-main li.all-categories-tree > a{
    background:#258b5b !important;   /* ten sam zielony co menu */
    color:#fff !important;
    padding:10px 15px !important;
    border-radius:0 !important;
    box-shadow:none !important;
    font-weight:400 !important;
}
/* wszystkie przyciski menu jak "Wszystkie produkty" */
.abs-header-menu-main li > a{
    background:#ffffff !important;
    color:#333 !important;
    border:none !important;
    padding:10px 15px !important;
    border-radius:0 !important;
}

/* hover */
.abs-header-menu-main li > a:hover{
    background:#f2f2f2 !important;
    color:#000 !important;
}
label[for^="accessibilitySwitch"]{
    display:flex !important;
    align-items:center !important;      /* góra/dół środek */
    justify-content:center !important;  /* lewo/prawo środek */

    height:42px !important;             /* taka sama jak LOGOWANIE */
    line-height:42px !important;        /* kasuje ich dziwny line-height */
    padding:0 !important;               /* usuwa ich padding */

    font-size:16px !important;
    text-transform:uppercase !important;
}
}
}
/* usuwa biały pasek z lewej */
span.button-std-floated.float-left{
    display:none !important;
}

/* idealne centrowanie napisu */
label[for^="accessibilitySwitch"]{
    text-transform:uppercase !important;
    font-size:17px !important;

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

    width:100% !important;
    padding:10px 15px !important;
    box-sizing:border-box !important;
}

/* ukryj WSZYSTKO w sekcji kontaktowej */
.abs-company-data-col * {
  display: none !important;
}

/* pokaż TYLKO blok "Oddział Pułtusk" (ten z adresem) */
.abs-company-data-col .panel-body > div:nth-of-type(4),
.abs-company-data-col .panel-body > div:nth-of-type(4) * {
  display: block !important;
}

/* pokaż formularz */
#contact-form,
#contact-form * {
  display: block !important;
}

/* ukryj prawą kolumnę */
.abs-company-data-col-2 {
  display: none !important;
}

/* rozciągnij */
.abs-company-data-col {
  width: 100% !important;
}
/* usuń dokładnie ten napis */
.abs-company-data-container > h2 {
  display: none !important;
}
/* ukryj wszystkie boxy w panelu */
.abs-simple-panel {
  display: none !important;
}

/* pokaż tylko pierwszy (logo) */
.abs-simple-panel:first-of-type {
  display: block !important;
}
/* ukrywa tylko nagłówek formularza z panelu */
.panel-heading {
  display: none !important;
}
/* absolutne wyłączenie wszystkich efektów kliknięcia */
*:focus,
*:focus-visible,
*:active,
*:hover {
  outline: none !important;
  box-shadow: none !important;
}

/* usuwa mobilne podświetlenie */
* {
  -webkit-tap-highlight-color: transparent !important;
}
/* dla linków, przycisków i divów (często tam siedzi problem) */
a, button, div, img {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
a, button, .product, .swiper-slide {
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

a:active,
button:active,
.product:active,
.swiper-slide:active {
  transform: scale(0.97);
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2), 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
}
/* MEGA MENU – clean premium */
.categories,
#categories,
.nav-categories,
.mega-menu {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08) !important;
  padding: 25px !important;
  margin-top: 10px;
  border: 1px solid #f0f0f0;
}

/* HOVER – subtelny, nie nachalny */
.categories a:hover {
  background: #f6f9f6;
  border-radius: 6px;
}
/* DELIKATNE ODSEPAROWANIE OD BELKI */
li:hover .categories,
li:hover #categories,
li:hover .nav-categories,
li:hover .mega-menu {
  transform: translateY(5px);
  transition: 0.2s ease;
}
/* PRZYWRÓĆ TOGGLE W KOSZYKU (IMPORT / EKSPORT) */
#cart-box-content .panel-heading,
.abs-filters .panel-heading,
.abs-filter-toggle-panel {
    display: block !important;
}

/* upewnij się że sam przycisk też jest widoczny */
a.abs-filter-toggle {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}