/* --- Začátek kódu Mega Menu --- */

/* Cílíme pouze na desktop */
body.desktop {

    /* 1. Příprava rodiče */
    /* Najdeme položku "Oblečení a vybavení" (ID 2466) */
    /* Musí být static, aby se menu mohlo roztáhnout */
    .menu-item-2466 {
        position: static !important;
    }

    /* * FINÁLNÍ FIX PRO PŘEKRÝVÁNÍ
     * Dáme vysoký z-index rodiči, ALE JEN KDYŽ JE OTEVŘENÝ
     * (když má na sobě Shoptet třídu .is-open)
    */
    .menu-item-2466.is-open {
        z-index: 1001 !important;
    }

    /* 2. Hlavní kontejner Mega Menu */
    /* Cílíme na ul.menu-level-2, POUZE POKUD JE RODIČ OTEVŘENÝ */
    .menu-item-2466.is-open ul.menu-level-2 {
        /* Přepneme na flexbox, aby se vešly sloupce vedle sebe */
        display: flex !important;
        flex-direction: row;
        
        /* Styl kontejneru */
        width: 100vw; /* Roztažení na celou šířku okna */
        max-width: 1200px; /* Upravte podle šířky vašeho webu */
        left: 50% !important; /* Vystředění */
        transform: translateX(-50%);
        padding: 24px;
        box-sizing: border-box; /* Důležité pro správné zarovnání */
        background-color: #ffffff;
        border-top: 1px solid #eee;
        z-index: 1001 !important; /* Pojistka z-indexu i zde */
    }

    /* 3. Levý sloupec (Seznam odkazů) */
    /* Toto je div, který vytvoří náš JS */
    /* Tyto styly se aplikují, až když je rodič viditelný, takže jsou v pořádku */
    .mega-menu-links {
        flex: 1 1 35%; /* Šířka levého sloupce */
        max-width: 350px; /* Maximální šířka */
        padding-right: 24px;
        box-sizing: border-box;
    }

    /* 4. Pravý sloupec (Hero sekce) */
    /* Toto je div, který vytvoří náš JS */
    .mega-menu-hero-content {
        flex: 1 1 65%; /* Šířka pravého sloupce */
        position: relative; /* Pro pozicování textu */
        
        /* === ZMĚNA ZDE: Vráceno min-height === */
        min-height: 640px; /* Nastavíme minimální výšku, abychom zajistili zobrazení obrázku */
        /* Výšku můžete upravit podle potřeby, nebo se roztáhne podle levého sloupce */

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        transition: background-image 0.3s ease-in-out;
        opacity: 0; /* Skryjeme, dokud není aktivní */

        /* === ZMĚNA ZDE: Odstraněny flex styly === */
        /* display: flex;  */ /* Již nepotřebujeme */
        /* align-items: stretch; */ /* Již nepotřebujeme */
    }

    /* Zobrazí se, až JS přidá třídu */
    .mega-menu-hero-content.is-active {
        opacity: 1;
    }

    /* Odkaz přes celou Hero sekci */
    .mega-menu-hero-link {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Zarovná text dolů */
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 32px;
        text-decoration: none;
        border-radius: 8px; /* Musí odpovídat rodiči */
        
        /* Efekt ztmavení pro lepší čitelnost textu */
        background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);

        /* === ZMĚNA ZDE: height: 100% je nyní správně === */
        height: 100%; /* Roztáhne odkaz na celou výšku rodiče */
    }

    /* 5. Texty v Hero sekci */
    .mega-menu-hero-text {
        color: #ffffff;
    }

    .mega-menu-hero-title {
        /* H2 nadpis */
        font-size: 2.5rem; /* 40px */
        font-weight: 700;
        margin: 0 0 8px 0;
        color: #ffffff;
    }

    .mega-menu-hero-p {
        /* Podtext */
        font-size: 1.1rem; /* 18px */
        margin: 0 0 24px 0;
        max-width: 450px;
        color: #ffffff;
    }

    /* 6. Tlačítko v Hero sekci */
    .mega-menu-hero-link .btn {
        /* Použijeme Shoptet třídu 'btn' a přizpůsobíme ji */
        background-color: #e60000; /* Příklad červené barvy */
        color: #ffffff;
        border: none;
        padding: 12px 24px;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: 4px;
        display: inline-block; /* Aby se zobrazilo správně */
        width: auto; /* Automatická šířka */
        text-decoration: none;
        transition: background-color 0.2s;
    }
    
    .mega-menu-hero-link .btn:hover {
        background-color: #c40000; /* Tmavší červená při hoveru */
        color: #ffffff;
    }

    /* 7. Stylování položek v levém sloupci */
    .mega-menu-links > li {
        list-style: none !important; /* Skryjeme odrážky */
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important; /* Důležité pro zarovnání obrázku */
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .mega-menu-links > li:last-child {
        border-bottom: none;
    }

    .mega-menu-links > li > a {
        /* Odkaz (název kategorie) */
        flex-grow: 1; /* Odkaz zabere většinu místa */
        padding: 14px 10px;
        text-decoration: none;
        color: #333;
        font-weight: 600;
        font-size: 1rem;
        transition: color 0.2s;
    }
    
    .mega-menu-links > li:hover > a {
        color: #e60000; /* Zvýraznění při hoveru */
    }

    /* 8. Obrázky u položek vlevo */
    /* Cílíme na div, který je hned vedle odkazu */
    .mega-menu-links > li > div.menu-image {
        flex-shrink: 0; /* Obrázek se nebude zmenšovat */
        width: 50px;
        height: 50px;
        margin-right: 15px; /* Odsazení vpravo */
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }

    /* ZDE SI PŘIDEJTE OBRÁZKY PRO LEVÝ SLOUPCEC 
      (Podle screenshotu mají ID 1263, 1977, 1983)
    */
    .menu-item-1263 > div.menu-image {
      /* background-image: url('URL_MALEHO_OBRAZKU_HELMY'); */
    }
    .menu-item-1977 > div.menu-image {
      /* background-image: url('URL_MALEHO_OBRAZKU_BOTY'); */
    }
    .menu-item-1983 > div.menu-image {
      /* background-image: url('URL_MALEHO_OBRAZKU_CHRANICE'); */
    }
    /* ... přidejte další podle potřeby ... */

}
/* --- Konec kódu Mega Menu --- */