/* ======================================================= */
/* FINÁLNÍ OPRAVA MENU A SUBMENU - CITYBEX                 */
/* ======================================================= */

/* --- A. DESKTOP VERZE (Nad 901px) --- */
@media (min-width: 901px) {
    /* Změna šířky pouze pro hlavičku */
    #header .container.navigation-wrapper {
        max-width: 100% !important;   /* Pro hlavičku na celou šířku obrazovky */
        /* NEBO zadejte konkrétní hodnotu, např. 1800px */
        width: 100% !important;
        padding-left: 40px !important;  /* Odsazení obsahu od krajů */
        padding-right: 40px !important;
        margin: 0 auto !important;      /* Vycentrování */
    }
    /* Zarovnání celé horní lišty doprava */
    .top-nav {
        display: flex !important;
        justify-content: flex-end !important; /* Přesune obsah na pravou stranu */
        gap: 15px !important;                 /* Mezery mezi ikonami a textem */
        margin-left: auto !important;         /* Pojistka pro odtlačení */
    }
    /* Skrytí e-mailu */
    .top-nav-link.email { 
        display: none !important; 
    }

    /* Skrytí telefonu */
    .top-nav-link.phone { 
        display: none !important; 
    }

    /* Skrytí ikony panáčka (přihlášení/registrace) */
    .top-nav-link.login { 
        display: none !important; 
    }
    
    /* Skrytí textu "Prázdný košík" (ponechá jen ikonu, pokud ji chcete) */
    .cart-status > span {
        display: none !important;
    }
    /* 1. RESET KONTEJNERŮ - základní viditelnost */
    .navigation-in, 
    .navigation-in-menu,
    #navigation .navigation-in {
        position: static !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    /* 2. SKRYTÍ HAMBURGERU NA DESKTOPU */
    .menu-helper, .menu-helper.visible, [data-testid="hamburgerMenu"], .menu-item-more {
        display: none !important;
    }

    /* 3. STYLING HLAVIČKY */
    header#header {
        position: sticky !important;
        top: 0 !important;
        background: #ffffff !important;
        z-index: 1000 !important;
        /* VARIANTY STÍNU (vyberte si jednu): */
    
    /* Varianta A: Výraznější a hlubší stín (doporučeno) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    
    /* Varianta B: Velmi měkký, ale široký stín */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; */
    
    /* Varianta C: Ostrý, moderní stín */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; */
    }

    #header .navigation-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 15px 20px !important;
    }

    .site-name img {
        max-height: 55px !important;
        margin-bottom: 10px;
    }

    /* 4. HLAVNÍ LIŠTA MENU */
    ul.menu-level-1 {
        display: flex !important;
        justify-content: center !important;
        gap: 30px !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Položka menu (rodič) */
    ul.menu-level-1 > li {
        position: relative !important; /* Důležité pro pozicování podmenu */
        display: block !important;
        visibility: visible !important;
    }

    /* 5. VZHLED ODKAZŮ A HOVER LINKA */
    ul.menu-level-1 > li > a {
        font-family: 'Roboto', sans-serif !important;
        font-weight: 300 !important;
        font-size: 1.4rem !important;
        text-transform: uppercase;
        color: #222222 !important;
        text-decoration: none;
        padding: 10px 15px !important;
        display: block !important;
    }

    /* Oprava hover linky - nyní se váže na konkrétní <a> */
    ul.menu-level-1 > li > a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: #ffa600;
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    ul.menu-level-1 > li:hover > a::after {
        width: 80%; /* Linka se ukáže jen při hoveru na daný LI */
    }

    /* 6. SUBMENU (Úroveň 2) - Oprava funkčnosti */
    ul.menu-level-2 {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background: #ffffff !important;
        min-width: 300px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
        display: none !important; /* Standardně schované */
        z-index: 2000 !important;
        padding: 10px 0 !important;
        list-style: none !important;
        text-align: left !important;
        margin-left: -20px;
    }

    /* Zobrazení submenu při najetí */
    ul.menu-level-1 > li:hover > ul.menu-level-2 {
        display: block !important;
    }
    @media (min-width: 768px) {
    
    /* posun submenu */
    
    .navigation-in ul.menu-level-2 {
    margin-left:20px;
       
    }

    /* Položky v submenu */
    ul.menu-level-2 li {
        display: block !important;
        width: 100% !important;
    }

    ul.menu-level-2 li a {
        padding: 10px 20px !important;
        font-size: 1.2rem !important;
        text-transform: none !important;
        color: #444 !important;
        display: block !important;
        transition: background 0.2s;
    }

    ul.menu-level-2 li a:hover {
        background: #f8f8f8 !important;
        color: #ffa600 !important;
    }
    /* 1. Zmenšení hlavičky a úprava prostoru */
#header .navigation-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 5px 20px !important; /* Výrazně snížený padding */
    margin-top: 30px !important; /* Prostor pro logo, které je nad ním */
}

/* 2. Stylování loga do horní navigace */
.site-name {
    position: absolute !important;
    top: -35px !important; /* Posun nahoru do úrovně kontaktů */
    left: 20px !important; /* Zarovnání vlevo v horní liště */
    margin: 0 !important;
    z-index: 1001 !important;
}

.site-name img {
    max-height: 45px !important; /* Malé logo vhodné do tenké horní lišty */
    width: auto !important;
}
    
}




/* --- B. MOBILNÍ VERZE --- */
@media (max-width: 900px) {
    header#header { position: sticky !important; top: 0 !important; }
}
/* Animace pro plynulé mizení */
header#header {
    transition: transform 0.3s ease-in-out !important;
}

/* Třída, kterou JavaScript přidá při skrollování dolů */
.header-hidden {
    transform: translateY(-50px) !important; /* Posune hlavičku nahoru o výšku top-nav */
}

/* Zajistíme, aby top-nav měl pevnou výšku pro správný posun */
.top-nav {
    height: 40px; /* Upravte podle skutečné výšky vaší lišty */
}