/* 1. Pobieramy czcionkę Questrial */
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

/* 2. Ustawienie czcionki dla CAŁEJ strony (również formularze i nagłówki) */
html, body, p, div, span, h1, h2, h3, h4, h5, h6, input, button, select, textarea, a {
    font-family: 'Questrial', sans-serif !important;
}

/* 3. Wymuszenie 14px w menu i panelu górnym */
/* Celujemy dokładnie w klasy z Twojego HTML: .nav-link, .account_link, .slt_link */
#menu_navbar .nav-link,       /* Linki w menu głównym (Obuwie, Odzież...) */
.account_link,                /* Link "Twoje konto" */
.slt_link,                    /* Link "Listy zakupowe" */
.topBasket__price,            /* Cena w koszyku (355,00 zł) */
.wishlist_link {              /* Dodatkowe zabezpieczenie dla listy życzeń */
    font-size: 14px !important;
    
    /* Ustawienia estetyczne */
    padding-left: 8px !important;
    padding-right: 8px !important;
    letter-spacing: 0px !important;
    font-weight: 400 !important;
    text-transform: uppercase; /* Zazwyczaj menu wygląda lepiej wielkimi literami przy tej czcionce */
}

/* 4. Poprawka dla rozwijanego menu (żeby podkategorie też były czytelne) */
.navbar-subnav .nav-link, 
.navbar-subsubnav .nav-link {
     font-size: 14px !important;
}
    
   

/* Wyśrodkowanie menu głównego na komputerach */
@media (min-width: 992px) {
    #menu_categories .navbar-collapse {
        justify-content: center;
    }
    
    #menu_categories .navbar-nav {
        justify-content: center;
        width: 100%; /* Opcjonalnie: rozciąga kontener, by ułatwić centrowanie */
    }
}
/* Ukrycie przycisku RSS na blogu */
#menu_blog_rss {
    display: none !important;
}


/* --- UNIWERSALNA POPRAWKA: TELEFONY I TABLETY (do 1024px) - Wersja Dopasowana --- */

@media only screen and (max-width: 1024px) {
    
    /* 1. Obniżenie bannera - zmniejszyliśmy odstęp */
    .main_page #main_banner1 {
        margin-top: 50px !important; /* Było 85px. Jeśli nadal za dużo, zmień na 60px */
        padding-top: 0px !important;
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
    }

    /* 2. Naprawa uciętego zdjęcia (skalowanie) */
    .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; 
    }
    
    /* 3. Zabezpieczenie kontenera */
    .main_page .swiper-wrapper {
        height: auto !important;
    }
}
/* --- Zmiana układu strony wpisu blogowego na 10%-80%-10% --- */

/* 1. Ukrywamy lewy pasek boczny (menu kategorii, logowanie) */
#container.blog-item_page #layout aside {
    display: none !important;
}

/* 2. Zmuszamy kontener z treścią do zajęcia 100% szerokości (zamiast dzielenia miejsca z paskiem bocznym) */
#container.blog-item_page #layout #content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 3. Ustawiamy szerokość samej treści artykułu na 60% i centrujemy ją */
#container.blog-item_page #blog-item {
    width: 80%;
    margin: 0 auto; /* To polecenie tworzy automatyczne marginesy po lewej i prawej (Twoje "wolne przestrzenie") */
}

/* --- Responsywność (Mobile) --- */
/* Na telefonach i tabletach (poniżej 992px) przywracamy szerokość 100%, 
   aby tekst nie był zbyt wąski i czytelny */
@media (max-width: 991px) {
    #container.blog-item_page #blog-item {
        width: 100%;
        padding: 0 15px; /* Drobny odstęp od krawędzi ekranu */
    }
}
/* --- Naprawa przycisku czatu TYLKO na mobilkach i tabletach (do 1024px) --- */
@media (max-width: 1024px) {
    #grchat-button {
        pointer-events: none !important;
        width: auto !important;
        height: auto !important;
    }

    /* Przywracamy klikalność wnętrza (ikony) tylko na mobile */
    #grchat-button > * {
        pointer-events: auto !important;
    }
}
/* Ukrywamy poziomy pasek przewijania na całej stronie */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Dodatkowe zabezpieczenie dla głównego kontenera */
#layout, #container {
    overflow-x: hidden !important;
}
/* --- SPECJALNY STYL DLA WALENTYNEK (POPRAWIONY) --- */

/* 1. Wygląd ogólny (kolor i styl) */
.nav-link[title="WALENTYNKI"] {
    color: #e60000 !important;
    font-weight: 700 !important;
    
    /* Ustawienie elementów w jednej linii (serce - tekst - serce) */
    display: flex !important;
    align-items: center !important;
    
    /* Domyślnie (Desktop) - dostosowuje się do kontenera */
    justify-content: center; 
}

/* 2. Serduszka przed i po */
.nav-link[title="WALENTYNKI"]::before {
    content: '\2764'; 
    color: #e60000;
    margin-right: 5px;
}

.nav-link[title="WALENTYNKI"]::after {
    content: '\2764'; 
    color: #e60000;
    margin-left: 5px;
}

/* 3. Efekt po najechaniu */
.nav-link[title="WALENTYNKI"]:hover {
    color: #ff4d4d !important;
    text-decoration: none !important; /* Podkreślenie przy serduszkach wygląda źle, więc je usuwamy */
}

/* --- POPRAWKA MOBILNA (Do 1024px) --- */
/* Tutaj wymuszamy wyrównanie do LEWEJ strony */
@media (max-width: 1024px) {
    .nav-link[title="WALENTYNKI"] {
        justify-content: flex-start !important; /* Kluczowa zmiana: wyrównaj do początku (lewej) */
        width: 100% !important; /* Zajmij całą szerokość */
        padding-left: 0px !important; /* Resetujemy padding, jeśli jest za duży */
    }
}