/* ==========================================================================
   KUPKARTONY.PL - POŁĄCZONE, PROFESJONALNE STYLE (ZGODNE Z SEO)
   ========================================================================== */

/* --- SEKCJA 1: KARTA PRODUKTU (ZDJĘCIE) --- */
.images-container .product-cover,
#content .product-cover {
    max-width: 100% !important;
}

/* --- SEKCJA 2: STRUKTURA KOLUMN SKLEPU (PC od 768px) --- */
@media (min-width: 768px) {
    /* Lewa kolumna dostaje pożądaną, dużą szerokość (25%) */
    body[class*="layout-left-column"] #left-column,
    body[class*="layout-both-columns"] #left-column {
        width: 25.000000% !important;
        flex: 0 0 25.000000% !important;
        max-width: 25.000000% !important;
    }
    /* GDY AKTYWNA JEST TYLKO LEWA KOLUMNA (Strona kategorii i Najczęściej kupowane) */
    body.layout-left-column #content-wrapper {
        width: 75.000000% !important;
        flex: 0 0 75.000000% !important;
        max-width: 75.000000% !important;
    }
    /* GDY AKTYWNE SĄ OBIE KOLUMNY NA RAZ (Strona główna) */
    body.layout-both-columns #content-wrapper {
        width: 58.333333% !important;
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
    }
    body.layout-both-columns #right-column {
        width: 16.666666% !important;
        flex: 0 0 16.666666% !important;
        max-width: 16.666666% !important;
    }
}

/* --- SEKCJA 3: GÓRNE MENU I LOGO KUPKARTONY.PL (PC od 768px) --- */
@media (min-width: 768px) {
    #_desktop_logo {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }
    img.logo {
        width: 250px !important; 
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Wycięcie starego górnego menu obok logo */
    .header-top .row:first-child #_desktop_top_menu,
    .header-top .row:first-child [id*="top_menu"] {
        display: none !important;
    }

    /* Układ dla nowego wiersza menu pod logo */
    .desktop-logo-row {
        align-items: center !important;
    }
    .desktop-menu-box {
        margin-top: 20px !important;
        border-top: 1px solid #e5e5e5 !important;
        padding-top: 15px !important;
    }
    .primary-menu-wrapper {
        padding-left: 15px !important;
    }

    /* Poziome, jednowierszowe menu główne */
    #_desktop_top_menu_box #top-menu, 
    #_desktop_top_menu_box .js-top-menu {
        display: flex !important;
        justify-content: flex-start !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    #_desktop_top_menu_box #top-menu > li {
        margin-right: 35px !important;
        margin-left: 0 !important;
        display: inline-block !important;
    }
    #_desktop_top_menu_box #top-menu a {
        padding-left: 0 !important;
        font-weight: 600;
        color: #232323;
        text-transform: uppercase;
        font-size: 14px;
    }
    /* UX FIX: Efekt najechania myszką na linki w menu na PC */
    #_desktop_top_menu_box #top-menu a:hover {
        color: #24b9d7 !important;
        text-decoration: none !important;
    }

}

/* --- SEKCJA 4: RESPONSYWNE LOGO NA TELEFONACH (Mniej niż 768px) --- */
@media (max-width: 767px) {
    img.logo {
        max-width: 140px !important; 
        width: 100% !important;
        height: auto !important;
        display: block;
        margin: 0 auto;
    }
}

/* --- SEKCJA 5: NAGŁÓWKI, BANERY I OPISY KATEGORII (ZGODNE Z SEO) --- */
.custom-category-header {
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}
.custom-category-title {
    display: block !important;
    width: 100% !important;
}
.custom-cover-wrapper {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
}
.fallback-height {
    height: auto !important;
}
.custom-description-block {
    clear: both !important;
    display: block !important;
    margin-top: 15px !important;
}

/* --- SEKCJA 6: SIATKA PODKATEGORII NA LISTACH PRODUKTÓW (ZGODNE Z SEO) --- */
.custom-subcategories-box {
    border: none !important; 
    box-shadow: none !important; 
    background: transparent !important;
}
.subcategory-title-spacing {
    margin-top: 15px !important;
}
.subcategories-clean-grid {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}
@media (min-width: 992px) {
    .subcategories-clean-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
#subcategories, 
#subcategories ul, 
#subcategories li,
.subcategory-clean-item {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    text-align: center !important;
    margin-bottom: 10px !important;
}
#subcategories a.clean-img-link {
    display: block !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(229, 229, 229, 0.5) !important;
    transition: box-shadow 0.2s ease-in-out !important;
    background: #ffffff !important;
}
#subcategories .subcategory-clean-item:hover a.clean-img-link {
    box-shadow: 0 0 0 3px #7a7a7a !important; 
    border-color: transparent !important;
}
#subcategories .clean-img-link img {
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#subcategories .clean-img-link img,
#subcategories .subcategory-clean-item:hover .clean-img-link img {
    transform: none !important;
    scale: 1 !important;
    transition: none !important;
    width: 100% !important;
    height: auto !important;
}
#subcategories .subcategory-clean-name,
#subcategories .subcategory-clean-name:hover,
#subcategories .subcategory-clean-item:hover .subcategory-clean-name {
    color: #7a7a7a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* --- SEKCJA 7: PROFESJONALNA KONFIGURACJA I FORMATOWANIE STOPKI SKLEPU --- */
.custom-footer-sep {
    margin-top: 0px !important; 
    border-top: 2px solid #bcbcbc !important; 
    padding-top: 15px !important; 
    padding-bottom: 15px !important; 
    text-align: center !important;
}
.custom-footer-text {
    font-size: 12px !important; /* UX MINIMUM: W pełni bezpieczny i czytelny rozmiar dla Google i oka */
    line-height: 1.4 !important; 
    color: #7a7a7a !important; 
    text-align: center !important;
}
.custom-footer-copyright {
    font-size: 14px !important; /* Wyraźny, grubszy główny napis Copyright - idealny balans */
    margin: 0 0 4px 0 !important; 
    font-weight: bold !important; 
    color: #333 !important; 
    text-align: center !important;
}
.custom-footer-seo {
    font-size: 12px !important; /* Pełna czytelność opisu SEO bez ryzyka błędów w Google Lighthouse */
    max-width: 750px !important; 
    margin: 0 auto 4px auto !important; 
    text-align: center !important;
}
.custom-footer-author {
    font-size: 12px !important; /* Podnosimy najniższy napis z 10px do 12px - koniec z maczkami na ekranie */
    margin: 4px 0 0 0 !important; 
    color: #aab2bd !important; 
    text-align: center !important;
}



/* --- SEKCJA 8: BEZBŁĘDNA SYNTATYKA UNICODE DLA LINKÓW STOPKI (ZGODNE Z SEO) --- */
.links a[href*="promocje"], .links a[id*="prices-drop"] { font-size: 0 !important; }
.links a[href*="promocje"]::after, .links a[id*="prices-drop"]::after { content: "Promocje" !important; font-size: 14px !important; }
.links a[href*="nowe-produkty"], .links a[id*="new-products"] { font-size: 0 !important; }
.links a[href*="nowe-produkty"]::after, .links a[id*="new-products"]::after { content: "Nowe produkty" !important; font-size: 14px !important; }
.links a[href*="najczesciej-kupowane"], .links a[href*="bestsellery"], .links a[id*="best-sales"] { font-size: 0 !important; }
.links a[href*="najczesciej-kupowane"]::after, .links a[href*="bestsellery"]::after, .links a[id*="best-sales"]::after { content: "Najcz\0119\015B ciej kupowane" !important; font-size: 14px !important; }
.links a[href*="kontakt"], .links a[id*="contact"] { font-size: 0 !important; }
.links a[href*="kontakt"]::after, .links a[id*="contact"]::after { content: "Kontakt" !important; font-size: 14px !important; }
.links a[href*="mapa-strony"], .links a[href*="sitemap"] { font-size: 0 !important; }
.links a[href*="mapa-strony"]::after, .links a[href*="sitemap"]::after { content: "Mapa strony" !important; font-size: 14px !important; }




/* --- GLOBALNY CLEARFIX STRUKTURY (BEZWZGLĘDNA LIKWIDACJA PUSTEGO BIAŁEGO EKRANU) --- */
@media (min-width: 768px) {
    body.page-contact #header, 
    body.page-contact #wrapper,
    body.page-best-sales #header, 
    body.page-best-sales #wrapper {
        overflow: clip !important; /* Brutalnie i bezpiecznie ścina wirtualne balony scrolla (1031px i 1627px) do rzeczywistego wymiaru ekranu */
    }
}

/* --- IDEALNE ODSTĘPY WG STANDARDÓW TYPOGRAFII --- */

#main h2, 
.page-cms h2, 
.cms-page-content h2 {
    margin-top: 2.5rem !important;    /* ok. 40px - czytelna przestrzeń od góry */
    margin-bottom: 0.8rem !important; /* ok. 13px - mniejszy dystans do tekstu poniżej */
    display: block !important;
}

#main h2 + p, 
.page-cms h2 + p, 
.cms-page-content h2 + p {
    margin-top: 0.8rem !important;    /* zachowanie idealnego dystansu dla akapitu */
    display: block !important;
}

/* --- BLOK PROMO OBOK LOGO (DESKTOP) --- */
.header-promo-text {
    position: absolute;
    left: 30%;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1.4;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 10;
}

.header-promo-text .promo-line-1,
.header-promo-text .promo-line-2 {
    font-weight: normal;
    color: #1b5e20;
    font-size: 13px;
    text-transform: uppercase;
}

.header-promo-text .promo-line-1 {
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
}

/* IDEALNE WYRÓWNANIE: 35px odsuwa literę "P" dokładnie pod literę "S" */
.header-promo-text .promo-line-2 {
    padding-left: 38px !important;
}

/* ŻÓŁTY ZNACZEK 24H */
.header-promo-text .badge-24h {
    background-color: #f1c40f;
    color: #000;
    padding: 1px 5px;
    font-weight: bold;
    border-radius: 3px;
    font-size: 11px;
    margin-right: 6px;
    line-height: 1;
    display: inline-block;
}

/* Zmiana tła menu na jasnoszary i dodanie bocznych odstępów na PC */
@media (min-width: 992px) {
    #header .header-top #top-menu,
    #header .header-top .menu {
        background-color: #f1f1f1 !important; /* Twój jasnoszary kolor */
        padding-left: 5px !important;       /* Odstęp od lewej krawędzi */
        padding-right: 5px !important;      /* Odstęp od prawej krawędzi (dla symetrii) */
    }
}


/* Zmiana wysokości headera na PC */
@media (min-width: 992px) {
    #header .header-nav {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    #header .header-top {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #header .logo {
        max-height: 125px; /* Zmniejsza logo tylko na desktopie */
    }
}

/* ==========================================================================
   START: NAPRAWA MENU POZIOMEGO - IDEALNA I ZWARTA SIATKA BEZ ROZSTRZELENIA
   ========================================================================== */

/* 1. Dopasowanie całego okna dymka do szerokości tekstu */
#header .top-menu .sub-menu {
    width: max-content !important; /* Dymek rozszerza się idealnie do szerokości całej siatki */
    min-width: 350px;              /* Bezpieczne minimum dla małej liczby kategorii */
    max-width: 1110px;             /* Maksymalna blokada, żeby nie wyszedł poza szerokość strony */
    left: 0 !important;            
    right: auto !important;
    margin: 0 !important;
    padding: 25px !important;      /* Elegancki margines wewnątrz dymka */
    box-shadow: 0 4px 20px rgba(0,0,0,0.12); /* Nowoczesny, miękki cień */
}

/* 2. Tworzenie równej siatki opartej o szerokość najdłuższego słowa */
#header .top-menu .sub-menu ul[data-depth="1"] {
    display: grid !important;
    /* max-content sprawia, że kolumna dopasowuje się do najdłuższego tekstu i nie pozwala mu się złamać ani najechać na inne */
    grid-template-columns: repeat(4, max-content) !important; 
    /* Bezpieczne, stałe odstępy: 14px w pionie (wiersze), 40px w poziomie (kolumny) */
    gap: 14px 40px !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Czyszczenie starych, blokujących stylów z szablonu Classic */
#header .top-menu .sub-menu ul[data-depth="1"] > li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important; /* Blokuje łamanie pojedynczej nazwy kategorii do drugiego wiersza */
}

/* ==========================================================================
   KONIEC: NAPRAWA MENU POZIOMEGO - IDEALNA I ZWARTA SIATKA BEZ ROZSTRZELENIA
   ========================================================================== */


/* ==========================================================================
   START: FABRYCZNE IKONY (MATERIAL ICONS) - DUŻE, GRUBE I PRZY SAMEJ KRAWĘDZI
   ========================================================================== */

/* 1. Usunięcie gigantycznego fabrycznego paddingu całego bloku menu bocznego */
#left-column .block-categories {
    padding-right: 5px !important;    /* Uwalnia masę miejsca na tekst */
}

/* 2. Maksymalne rozciągnięcie listy kategorii na nowo uzyskaną przestrzeń */
#left-column .block-categories .category-top-menu,
#left-column .block-categories .category-sub-menu {
    padding-right: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* KOREKTA UX: Bezpieczny bufor dla tekstu linków, aby długie słowa NIE najeżdżały na plusiki */
#left-column .block-categories .category-sub-menu li a {
    padding-right: 35px !important;   /* Zmusza tekst do zatrzymania się 35px przed brzegiem */
    display: inline-block !important;
    width: 100% !important;
}

/* 3. Przypięcie ikon 1. poziomu sztywno do góry (nie zjadą w dół po rozwinięciu) */
#left-column .block-categories .collapse-icons {
    position: absolute !important;
    right: 0 !important;              /* Przypięcie sztywno do samego prawego brzegu ramki */
    left: auto !important;
    top: 0 !important;                /* Sztywno na samej górze wiersza */
    margin: 0 !important;
    padding: 0 !important;
    width: 30px !important;           /* Stała, bezpieczna strefa kliku */
    height: 30px !important;          /* Mała, stała wysokość chroni przed rozciąganiem w pionie */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#left-column .block-categories .collapse-icons i {
    font-size: 24px !important;       /* Duży, wyraźny rozmiar */
    font-weight: 900 !important;      /* Maksymalne pogrubienie ikony fabrycznej */
    color: #232323 !important;        /* Wyraźny czarny kolor */
}

/* 4. Przypięcie strzałek głębszych poziomów (wnuków) sztywno do góry */
#left-column .block-categories .arrows {
    position: absolute !important;
    right: 0 !important;              /* Przypięcie sztywno do samego prawego brzegu ramki */
    left: auto !important;
    top: 0 !important;                /* Sztywno na samej górze wiersza */
    margin: 0 !important;
    padding: 0 !important;
    width: 30px !important;
    height: 25px !important;          /* Mała, stała wysokość */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#left-column .block-categories .arrows i {
    font-size: 20px !important;       /* Rozmiar dla głębszych podkategorii */
    font-weight: 900 !important;      /* Maksymalne pogrubienie ikony */
    color: #414141 !important;
}

/* ==========================================================================
   KONIEC: FABRYCZNE IKONY (MATERIAL ICONS) - DUŻE, GRUBE I PRZY SAMEJ KRAWĘDZI
   ========================================================================== */

/* ==========================================================================
   START: PRZYWRÓCENIE FORMATOWANIA I SZEROKOŚCI TEKSTU (PC + MOBILE)
   ========================================================================== */

/* GLOBALNIE NA PC: Białe pudełko trzyma szerokość baneru, a tekst zyskuje idealne, równe odstępy z każdej strony */
#custom-text,
#custom-text.card-block {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    
    /* SYMETRYCZNE ODSTĘPY WEWNĘTRZNE (PADDINGI) */
    padding-top: 25px !important;    /* Stała baza od góry */
    padding-bottom: 25px !important; /* Stała baza od dołu */
    padding-left: 20px !important;   /* Odsuwa tekst od lewej ściany */
    padding-right: 20px !important;  /* Odsuwa tekst od prawej ściany */
}

/* LIKWIDACJA NIESYMETRYCZNOŚCI: Kasujemy ukryty margines pierwszego elementu na górze */
#custom-text > *:first-child,
#custom-text p:first-child,
#custom-text h1:first-child, #custom-text h2:first-child, #custom-text h3:first-child {
    margin-top: 0 !important;
}

/* SPECJALNIE NA MOBILE: Na telefonach jeszcze bardziej zaciskamy marginesy, by oszczędzić miejsce */
@media (max-width: 767px) {
    #custom-text,
    #custom-text.card-block {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 10px !important;   
        padding-right: 10px !important;  
    }
}

/* 1. Wymuszenie działania pogrubienia tekstu (tagi strong i b) */
#custom-text strong, 
#custom-text b {
    font-weight: bold !important;
}

/* 2. Wymuszenie działania kursywy (tagi em i i) */
#custom-text em, 
#custom-text i {
    font-style: italic !important;
}

/* 3. Przywrócenie i ujednolicenie rozmiarów dla nagłówków w tekście oraz stron systemowych */
#custom-text h1, #custom-text .h1, .everblock h1, .everblock .h1, .page-title { font-size: 1.375rem !important; font-weight: bold !important; margin-bottom: 1rem !important; }
#custom-text h2, #custom-text .h2, .everblock h2, .everblock .h2 { font-size: 1.125rem !important; font-weight: bold !important; margin-bottom: 1rem !important; }
#custom-text h3, #custom-text .h3, .everblock h3, .everblock .h3, .block-title { font-size: 1rem !important; font-weight: bold !important; margin-bottom: 1rem !important; }



/* 3a. Ujednolicenie zwykłego tekstu i list dla #custom-text oraz .everblock (ZMODYFIKOWANE NA REM) */
#custom-text p, #custom-text li, 
.everblock p, .everblock li {
    font-size: 0.875rem !important;   /* 14px */
    line-height: 1.5 !important;      
}


/* 4. Przywrócenie widoczności standardowych list wypunktowanych */
#custom-text ul {
    list-style-type: disc !important;
    padding-left: 20px !important;
    margin-bottom: 1rem !important;
}
#custom-text li {
    display: list-item !important;
}

/* 5. ELASTYCZNE WYRÓWNANIE: Pełna synchronizacja z ikonami edytora (TinyMCE) */

/* Domyślny stan: jeśli nic nie ustawisz w edytorze, tekst ma być od lewej zamiast wyśrodkowany */
#custom-text p, 
#custom-text div, 
#custom-text h1, #custom-text h2, #custom-text h3 {
    text-align: left;
}

/* SŁOWNIK KLAS EDYTORA: Te reguły dynamicznie wykonają to, co klikniesz w panelu */
#custom-text .text-justify, 
#custom-text p.text-justify, 
#custom-text div[style*="text-align: justify"] {
    text-align: justify !important;
    text-justify: inter-word !important;
}

#custom-text .text-left, 
#custom-text p.text-left, 
#custom-text div[style*="text-align: left"] {
    text-align: left !important;
}

#custom-text .text-center, 
#custom-text p.text-center, 
#custom-text div[style*="text-align: center"] {
    text-align: center !important;
}

#custom-text .text-right, 
#custom-text p.text-right, 
#custom-text div[style*="text-align: right"] {
    text-align: right !important;
}

/* CHIRURGICZNE UJEDNOLICENIE NAGŁÓWKÓW TEKSTOWYCH (BEZ RUSZANIA STOPKI, MENU I BOCZNEGO BLOKU) */

/* 1. Bezwzględne wyłączenie caps locka dla nazw kategorii (mocny i sprawdzony zestaw celowników) */
.block-category h1,
.block-category h1.h1,
.block-category .title-category,
#js-product-list-header h1,
.page-header h1 {
    text-transform: none !important;
}

/* 2. Bezwzględne wyłączenie caps locka dla nazw produktów na kartach produktów */
.page-product h1,
h1.page-title,
.product-information h1,
#main h1.h1 {
    text-transform: none !important;
}

/* 3. Wyłączenie przymusowego caps locka dla nagłówków w Twoim tekście na stronie głównej */
#custom-text h1, #custom-text .h1,
#custom-text h2, #custom-text .h2,
#custom-text h3, #custom-text .h3 {
    text-transform: none !important;
}

/* ==========================================================================
   7. PROFESJONALNA KOREKTA STRON CMS: Estetyczny oddech tekstu wewnątrz bloku
   ========================================================================== */

/* Zabezpieczenie eleganckiego, równego oddechu dla tekstu wewnątrz białego pudełka */
.page-cms .page-content,
.page-cms #content {
    padding-top: 25px !important;    /* Tekst ma swój idealny dystans (taki sam jak na stronie głównej) */
    padding-bottom: 25px !important; /* Estetyczny dół bloku */
}

/* Likwidacja dodatkowego marginesu pierwszego elementu nad tekstem, by nie dublował odległości */
.page-cms .page-content > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   KONIEC: REPOZYTORIUM ZMIAN - WERSJA REKURENCYJNA I STABILNA
   ========================================================================== */


/* ==========================================================================
   9. POPRAWKA NAWIGACJI MOBILNEJ: Reset klas popover i sub-menu na telefonach
   ========================================================================== */
@media (max-width: 767px) {
    /* UX/SEO MAXIMUM: Domyślnie menu mobilne jest całkowicie schowane i nie zajmuje przestrzeni (LIKWIDACJA BIAŁEJ DZIURY) */
    #header .popover.sub-menu,
    #header .popover.sub-menu.js-sub-menu {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* POKAZYWANIE: Gdy menu dostaje klasę otwarcia od Bootstrapa, przywracamy blok i nadajemy mu styl pionowy */
    #header .popover.sub-menu.in,
    #header .popover.sub-menu.show,
    #header .popover.sub-menu.js-sub-menu.in,
    #header .popover.sub-menu.show {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        background: transparent !important; /* Likwiduje białe pudełko z PC na telefonie */
        padding: 10px 0 10px 15px !important; /* Daje ładny oddech i wcięcie w prawo dla podkategorii */
    }

    /* Zmuszamy listę ul wewnątrz popovera do równego spadania w pionie (w dół) */
    #header .popover.sub-menu ul.top-menu,
    #header .popover.sub-menu ul {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Każda pojedyncza podkategoria (li) układa się pionowo jedna pod drugą */
    #header .popover.sub-menu li.category,
    #header .popover.sub-menu li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        background: transparent !important;
    }
}



/* ==========================================================================
   10. GLOBALNA ROSZADA KOLEKCJONERSKIEJ NA MOBILE (MOCNE SEO - UNIWERSALNE)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Uruchomienie pionowego układu dla głównego wiersza kolumn */
    #index #wrapper .row,
    .page-category #wrapper .row,
    .page-cms #wrapper .row,
    #wrapper .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Zabezpieczenie pełnej szerokości dla wszystkich potencjalnych kolumn */
    #content-wrapper,
    #left-column,
    #right-column {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* 3. TWARDE ROZSTAWIENIE KOLEJNOŚCI - BEZ POZOSTAWIANIA MIEJSCA NA DOMYSŁY BAZY: */
    #content-wrapper { order: 1 !important; margin-bottom: 30px !important; } /* Środek (Produkty) - ZAWSZE NA SAMEJ GÓRZE */
    #left-column      { order: 2 !important; }                                 /* Lewa kolumna (Menu/Filtry) - ZAWSZE W ŚRODKU */
    #right-column     { order: 3 !important; }                                 /* Prawa kolumna (Boczny pasek) - ZAWSZE NA SAMYM DOLE */
}
/* ==========================================================================
   KONIEC OSTATECZNIE OCZYSZCZONEGO UKŁADU - 100% CZYSTE SEO
   ========================================================================== */



/* ==========================================================================
   11. POPRAWKA EDYTORA CMS: Odblokowanie elastycznego wyśrodkowania obrazków
   ========================================================================== */
.page-cms img[style*="margin-left: auto"],
.page-cms img[style*="margin-right: auto"],
.page-cms img[style*="margin-left:auto"],
.page-cms img[style*="margin-right:auto"] {
    display: block !important;
    float: none !important; /* Rozbijamy to agresywne lewe pływanie szablonu CMS */
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================================
   11. GLOBALNY SŁOWNIK KLAS EDYTORA: Elastyczne wyśrodkowanie obrazków CMS
   ========================================================================== */
/* Reguła uderza TYLKO w te obrazki na stronach CMS, które mają w kodzie marginesy auto po wyśrodkowaniu w panelu */
.page-cms img[style*="margin-left: auto"],
.page-cms img[style*="margin-right: auto"],
.page-cms img[style*="margin-left:auto"],
.page-cms img[style*="margin-right:auto"] {
    display: block !important;
    float: none !important; /* Bezwzględnie niszczymy lewe pływanie szablonu, które ściąga grafikę do boku */
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================================
   12. POPRAWKA UX: Niezależne efekty najechania (hover) w menu bocznym
   ========================================================================== */

/* REAKCJA TEKSTU: Tylko gdy kursor stoi bezpośrednio na linku tekstowym */
#left-column .block-categories li a:hover,
#left-column .block-categories .category-sub-menu li a:hover,
#left-column .block-categories .subcategory-clean-name:hover {
    color: #24b9d7 !important; /* Tekst robi się niebieski */
    text-decoration: none !important;
}

/* REAKCJA IKONY: Tylko gdy kursor stoi bezpośrednio na strefie plusika/strzałki */
#left-column .block-categories .collapse-icons:hover i,
#left-column .block-categories .arrows:hover i {
    color: #24b9d7 !important; /* Sam plusik robi się niebieski, tekst obok zostaje szary */
}


/* --- 13. POPRAWKA LINKÓW W EVERBLOCK: Szary domyślnie, niebieski na hover --- */
.everblock a,
#left-column .everblock li a {
    color: #7a7a7a !important;        /* Twój standardowy szary kolor ze stopki i menu */
    text-decoration: none !important; /* Usuwa domyślne podkreślenie linku */
}

.everblock a:hover,
#left-column .everblock li a:hover {
    color: #24b9d7 !important;        /* Twój firmowy niebieski kolor przy najechaniu myszką */
}

/* --- 14. RESPONSYWNOŚĆ I WYŚRODKOWANIE OBRAZKÓW W EVERBLOCK --- */
.everblock img {
    max-width: 100% !important;  /* Blokuje obrazek, by nigdy nie był szerszy niż kolumna */
    height: auto !important;     /* Pilnuje, aby obrazek nie został zniekształcony (proporcje) */
    display: block !important;   /* Wymagane, aby automatyczne marginesy zadziałały */
    margin-left: auto !important;  /* Automatyczny margines z lewej */
    margin-right: auto !important; /* Automatyczny margines z prawej (razem środkują obrazek) */
}



/* --- 15. DEDYKOWANE ODSTĘPY GÓRNE DLA NAGŁÓWKÓW TYLKO W EVERBLOCK --- */
.everblock h1, .everblock .h1,
.everblock h2, .everblock .h2,
.everblock h3, .everblock .h3 {
    margin-top: 1.5625rem !important; /* Odpowiednik 25px - odsuwa nagłówek od elementów powyżej */
}

/* ==========================================================================
   ---- 16 Dedykowane, czyste style dla podstrony OFERTA z tabelą responsywną 7 wierszy
   ========================================================================== */

/* ==========================================================================
   Pancerny układ oparty na unikalnym ID dla strony CMS
   ========================================================================== */

/* Styl dla całego bloku */
#moje-wiersze-cms {
  width: 100%;
}

/* Pojedynczy wiersz i linia pod nim - domyślnie na mobile (pionowo) */
#moje-wiersze-cms .wiersz {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 15px 0 !important;
  border-bottom: 1px solid #4E4E4E !important;
}

/* Usuwamy linię pod ostatnim wierszem */
#moje-wiersze-cms .wiersz:last-child {
  border-bottom: none !important;
}

/* Centrowanie obrazka na mobile */
#moje-wiersze-cms .foto {
  width: 100% !important;
  text-align: center !important;
}

/* Blokada wymiarów obrazka 120x90 */
#moje-wiersze-cms .foto img {
  max-width: 220px !important;
  /*width: 220px !important;*/
  height: auto !important;
  display: inline-block !important;
}

/* Tekst na mobile */
#moje-wiersze-cms .tekst {
  width: 100% !important;
}

/* Wymuszenie marginesów H2 na mobile (1rem od góry odpycha od zdjęcia) */
#moje-wiersze-cms .tekst h2 {
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

/* Reset marginesów akapitu */
#moje-wiersze-cms .tekst p {
  /*margin: 0 !important;*/
  padding: 0 !important;
}


/* REGUŁY DLA KOMPUTERÓW (ekrany od 768px w górę) */
@media (min-width: 768px) {
  
  /* Przełączenie wiersza w poziom na PC */
  #moje-wiersze-cms .wiersz {
    flex-direction: row !important;
  }

  /* Szerokość kolumny z obrazkiem na PC i wyrównanie do lewej */
  #moje-wiersze-cms .foto {
    width: 28% !important;
    text-align: left !important;
  }

  /* Szerokość kolumny z tekstem na PC + bezpieczny odstęp od foto */
  #moje-wiersze-cms .tekst {
    width: 72% !important;
    padding-left: 20px !important;
  }

  /* Zerowanie górnego marginesu H2 na PC dla idealnego wyrównania ze zdjęciem */
  #moje-wiersze-cms .tekst h2 {
    margin-top: 0 !important;
  }
}

/* ----17 /* 1. Reset wielkich liter na liście produktów */
.products .product-title a, 
.product-miniature .product-title a {
    text-transform: none !important;
}

/* 2. Wyświetlanie ceny i słowa brutto w jednej linii oraz centrowanie pod kafelkami */
.product-miniature .product-price-and-shipping {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

/* 3. Usunięcie marginesów tekstu podatku na liście i karcie produktu ORAZ wyłączenie pogrubienia */
.product-prices .tax-shipping-delivery-label,
.product-miniature .tax-shipping-delivery-label {
    display: inline-block;
    margin: 0;
    font-weight: normal !important; /* To zdejmie pogrubienie i czcionka będzie cienka */
    font-size: 0.85rem;
    color: #232323;
}


/* 4. Wyrównanie ceny do prawej na karcie produktu */
#add-to-cart-or-refresh .product-price {
    display: inline-block;
    max-width: 100%;
    color: #24b9d7;
    margin-left: 20%;
    font-size: 1.3rem;
    margin-right: 10px; 
}
/* 5. Zmiana koloru WYŁĄCZNIE samej ceny (pod kafelkami oraz na karcie produktu) */
.product-price,
.product-miniature .price {
    color: #24b9d7 !important; /* Tutaj wpisz swój NOWY, idealny kolor ceny (np. czerwony, zielony, czarny) */
}

/* ---- 18 Stylizacja dłuższego opisu na kafelkach produktów */
.product-description-short {
    font-size: 0.85rem;
    color: #666666;
    margin-top: 6px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.5;
    padding: 0 10px;
}

/* ---19 Pogrubienie nazw produktów na kafelkach (lista i strona główna) */
.product-title a {
    font-weight: 700 !important; /* Wymuszenie mocnego pogrubienia */
    color: #232323; /* Opcjonalnie: głęboka czerń, aby nazwa była wyraźniejsza */
}

/* ---- 20  Wymuszenie małej litery dla słowa brutto na karcie produktu */
.product-prices .tax-shipping-delivery-label {
    text-transform: lowercase !important;
}