/*
 * Growino.cz — oranžová kolečka pod ikonami v horní liště
 *   hledání, přihlášení, košík i hamburger = oranžová (#F4845F)
 *   (25. 9. 2026 sjednoceno na přání — dřív koralová/modrá/tyrkysová)
 * Platí na VŠECH šířkách (desktop i mobil). Řeší jen ikony, ne layout.
 * Načíst AŽ ZA growino-responsive-core.css.
 *
 * Kolečko je ::after s z-index:-1 (za obsahem), takže ikona i počítadlo
 * košíku zůstávají nad ním samy — NIC nezvedáme a NEsaháme na overflow,
 * aby se neodhalil skrytý popisek "Nákupní košík".
 */

/* --- pryč s dělicími čárami ---
 * Shoptet je kreslí barvou --_color-header-button-border: mezi ikonami
 * (border-left na > a a .top-nav-button) a za celou skupinou (border-right
 * na .navigation-buttons = čára za košíkem). Průhledná barva je zruší všechny
 * najednou na všech šířkách, borders nulujeme pro jistotu i přímo. */
#header {
    --_color-header-button-border: transparent !important;
}
#header .navigation-buttons {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* --- základ: prostor pro kolečko --- */
#header .navigation-buttons > a,
#header .navigation-buttons > button,
#header .navigation-buttons .top-nav-button {
    position: relative !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* --- kolečko = ::after ZA ikonou (z-index:-1) --- */
#header .navigation-buttons [data-target="search"]::after,
#header .navigation-buttons .top-nav-button-login::after,
#header .navigation-buttons [data-target="cart"]::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* --- barvy jednotlivých koleček --- */
#header .navigation-buttons [data-target="search"]::after,
#header .navigation-buttons .top-nav-button-login::after,
#header .navigation-buttons [data-target="cart"]::after { background: #F4845F !important; } /* oranžová */

/* --- glyf ikony bílý (nad kolečkem je automaticky, protože kolečko je -1) --- */
#header .navigation-buttons [data-target="search"]::before,
#header .navigation-buttons .top-nav-button-login::before,
#header .navigation-buttons [data-target="cart"]::before {
    color: #fff !important;
}

/* --- menší kolečka na užších displejích + hamburger na mobilu --- */
@media (max-width: 991px) {
    #header .navigation-buttons [data-target="search"]::after,
    #header .navigation-buttons .top-nav-button-login::after,
    #header .navigation-buttons [data-target="cart"]::after,
    #header .navigation-buttons [data-target="navigation"]::after {
        width: 38px !important;
        height: 38px !important;
    }
    /* na mobilu je 3. viditelná ikona hamburger — oranžové kolečko také */
    #header .navigation-buttons [data-target="navigation"]::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 50% !important;
        background: #F4845F !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }
    #header .navigation-buttons [data-target="navigation"]::before {
        color: #fff !important;
    }
}

@media (max-width: 520px) {
    #header .navigation-buttons [data-target="search"]::after,
    #header .navigation-buttons .top-nav-button-login::after,
    #header .navigation-buttons [data-target="cart"]::after,
    #header .navigation-buttons [data-target="navigation"]::after {
        width: 34px !important;
        height: 34px !important;
    }
}
/* --- panáček (účet) a košík přesně do středu kolečka --- */
#header .navigation-buttons .top-nav-button-login::before,
#header .navigation-buttons [data-target="cart"]::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
}

/* --- po najetí myší: panáček a košík tyrkysové #009888 (jen zařízení s myší) --- */
#header .navigation-buttons .top-nav-button-login::before,
#header .navigation-buttons [data-target="cart"]::before {
    transition: color .15s ease !important;
}
@media (hover: hover) and (pointer: fine) {
    #header .navigation-buttons .top-nav-button-login:hover::before,
    #header .navigation-buttons .top-nav-button-login:focus-visible::before,
    #header .navigation-buttons [data-target="cart"]:hover::before,
    #header .navigation-buttons [data-target="cart"]:focus-visible::before {
        color: #009888 !important;
    }
}