/* Hlavni menu — Akce button + patra (storeys).
   Wrapper drzi Akce vlevo (pevna sirka, vertikalni text) + <nav> vpravo.
   Patra flex 1 1 0 — rovnomerne rozprostrena do dostupne sirky.

   Vsechny selektory pro top-level <ul> pouzivaji `> ul` (direct child),
   aby nested dropdown <ul> uvnitr <li> nedostal flex layout (musi zustat
   block + dropdown logika z style-2.css: display: none !important / hover
   block !important). */

/* === Wrapper === */
.menu_wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-top: 24px;            /* matchuje puvodni nav margin-top */
    border-top: 1px solid #F2F3F5;
}

/* Override nav vlastni margin/border — wrapper je preberá. */
header .dolni .menu_wrapper > nav {
    margin-top: 0;
    border-top: none;
}

/* === Akce button === */
.akce_menu_btn {
    flex: 0 0 40px;
    width: 40px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    color: #fff;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transition: background 0.2s ease;
    user-select: none;
}

.akce_menu_btn:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    color: #fff;
}

.menu_wrapper--akce-active .akce_menu_btn {
    background: linear-gradient(135deg, #b71c1c 0%, #8b1414 100%);
}

/* === Nav (patra) === */
.menu_nav {
    flex: 1 1 auto;
    min-width: 0;                /* prevents overflow */
}

/* TOP-LEVEL ul jen — nested dropdown <ul> v <li> zustanou block (jejich
   display: none/block !important pro hover toggle z style-2.css funguje
   nezavisle).

   !important nutny: style-2.css:818 ma `header .dolni nav ul {display: block !important}`
   ktere by jinak prebilo (vyssi specificita element).

   Override sirky <li> (puvodne 20% pri max-width: 1240px) a <a> (138px
   z style-2.css:973) take vyzaduje !important. */
.menu_wrapper .menu_nav > ul {
    display: flex !important;
    flex-wrap: nowrap;
}

.menu_wrapper .menu_nav > ul > li {
    flex: 1 1 0 !important;
    min-width: 0;
    width: auto !important;
}

.menu_wrapper .menu_nav > ul > li > a {
    width: 100% !important;
}

/* === Featured akce banner (stranka /akce/) ===
   Promo karty top kategorii z EshopConfig AKCE_FEATURED_CATEGORIES. */
.akce_featured {
    margin: 0 0 20px;
    padding: 16px 20px 20px;
    background: linear-gradient(135deg, #fef5f5 0%, #fde8e8 100%);
    border-left: 4px solid #c62828;
    border-radius: 8px;
}

.akce_featured__title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #c62828;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.akce_featured__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.akce_featured__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    padding: 12px 10px;
    text-decoration: none;
    color: #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.akce_featured__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(198, 40, 40, 0.18);
    color: #c62828;
}

.akce_featured__img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: 8px;
}

.akce_featured__name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
}

.akce_featured__count {
    font-size: 11px;
    color: #c62828;
    font-weight: 600;
    background: #fde8e8;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Pocet akcnich produktu v sidebar (.podkategorie_kat) — cerveny badge
   v pravem hornim rohu karty (position: absolute). Drive inline za nazvem
   mohl wrappnout text na 2 radky (line-height: 82px na .podkategorie_kat a)
   → karta overflow do sliders dole. */
.podkategorie_kat a {
    vertical-align: top !important;
    overflow: hidden;
}

.podkategorie_kat__count {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #f0f0f0;
    color: #666 !important;
    font-weight: 600;
    font-size: 10px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
}

/* === Mobile header fix ===
   Drive (<=1240px): .logo height: 35px ale .logo > a je 51px tall (logo image)
   → preteklo 16px dolu. .search ma margin-top: 10px ktery prekryval bottom
   logo image. Plus .logo > a ma line-height: 100px (nesmyslne velka pro
   inline-block). Reseni: min-height auto-fit na logo + clear+margin na search.
   Aplikuje se jen na malych obrazovkach, desktop layout intaktni. */
@media (max-width: 1240px) {
    header .dolni .logo {
        height: auto !important;
        min-height: 60px;
        margin-bottom: 12px;
        text-align: center;
    }
    header .dolni .logo a {
        line-height: normal !important;   /* override 100px */
        max-width: 100%;
        background-size: contain !important;
    }
    header .dolni .search {
        clear: both;
        margin-top: 18px !important;
    }
    header .dolni .search input {
        max-width: calc(100% - 51px);     /* search button je 51px */
    }
}

/* === Responzive === */
@media (max-width: 1240px) {
    /* Mobile: navrat na puvodni layout (hamburger toggle pres display).
       Flex na > ul zrusen, aby display: none/block hamburger logika
       fungovala. */
    .menu_wrapper .menu_nav > ul {
        display: none !important;
    }
    .menu_wrapper .menu_nav > ul > li {
        width: 20% !important;
        flex: none !important;
    }
    .akce_menu_btn {
        padding: 0 4px;
    }
}