/* ==========================================================================
   MASTER CSS - MIDIAMO (Zaktualizowany)
   ========================================================================== */

/* 1. Pobieranie czcionki Questrial (MUSI BYĆ NA SAMEJ GÓRZE) */
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

/* ==========================================================================
   GLOBALNE USTAWIENIA CZCIONKI
   ========================================================================== */
:root {
    --font-family: 'Questrial', sans-serif !important;
    --font-family-headline: 'Questrial', sans-serif !important;
    --menu-categories-5-title-font-family: 'Questrial', sans-serif !important;
    --menu-categories-5-font-family: 'Questrial', sans-serif !important;
    --product-name-font-family: 'Questrial', sans-serif !important;
    --article-title-font-family: 'Questrial', sans-serif !important;
    --footer-headline-font-family: 'Questrial', sans-serif !important;
    --footer-link-font-family: 'Questrial', sans-serif !important;
}

/* Wymuszenie czcionki na sztywno dla wszystkich elementów */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, div, input, textarea, button, .btn, .menu__link {
    font-family: 'Questrial', sans-serif !important;
}

/* ==========================================================================
   KOREKTA POGRUBIEŃ (NOWOŚĆ - Naprawa "zmywania się" liter)
   ========================================================================== */
/* Dla wszystkich elementów pogrubionych (ceny, strong, b) dodajemy oddech */
strong, b, .bold, .strong, .price, .product-price, .projector_price_value {
    letter-spacing: 0.8px !important; /* Rozsuwamy litery o niemal 1 piksel */
}

/* Dla nagłówków, które są większe, rozsuwamy jeszcze mocniej */
h1, h2, h3, h4, h5, h6, .cms_h1, .cms_h2, .cms_h3 {
    letter-spacing: 1px !important;
    font-weight: bold !important; /* Wymuszamy bold, żeby zachować hierarchię */
}

/* ==========================================================================
   MENU GŁÓWNE
   ========================================================================== */
#menu_categories ul li a,
#menu_navbar ul li a,
.menu__item a {
    font-family: 'Questrial', sans-serif !important;
    font-size: 13px !important;
    /* Tutaj zostawiamy 0px lub bardzo mały spacing, bo w menu zależy nam na miejscu */
    letter-spacing: 0px !important; 
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-weight: 400 !important;
}

/* Wyśrodkowanie menu na komputerach */
@media (min-width: 992px) {
    #menu_categories .navbar-collapse {
        justify-content: center;
    }
    #menu_categories .navbar-nav {
        justify-content: center;
        width: 100%;
    }
}

/* Ukrycie przycisku RSS */
#menu_blog_rss {
    display: none !important;
}

/* ==========================================================================
   POPRAWKI MOBILNE (BANNERY)
   ========================================================================== */
@media only screen and (max-width: 1024px) {
    .main_page #main_banner1 {
        margin-top: 50px !important;
        padding-top: 0px !important;
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
    }
    .main_page .main_slider__item,
    .main_page .swiper-slide,
    .main_page #main_banner1 img {
        height: auto !important; 
        min-height: auto !important; 
        width: 100% !important; 
        object-fit: contain !important; 
    }
    .main_page .swiper-wrapper {
        height: auto !important;
    }
}

/* ==========================================================================
   BLOG - POPRAWA CZYTELNOŚCI
   ========================================================================== */
#container.blog-item_page #layout aside {
    display: none !important;
}

#container.blog-item_page #layout #content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
}

#container.blog-item_page #blog-item {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: block;
}

@media (max-width: 991px) {
    #container.blog-item_page #blog-item {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }
}