/*
 * АИО — мобильная кнопка меню.
 *
 * Иконка не использует span и не пересекается
 * со штатными стилями старого hamburger-меню.
 */

@media (max-width: 900px) {
    html body
    button[data-aio-mobile-menu-toggle] {
        position: relative !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    html body
    button[data-aio-mobile-menu-toggle]
    > .aio-car-menu-icon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #111214 !important;
        transform: translate(-50%, -50%) !important;
        pointer-events: none !important;
    }

    html body
    button[data-aio-mobile-menu-toggle]
    > .aio-car-menu-icon
    > svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        opacity: 1 !important;
        transform: none !important;
        transition: opacity .16s ease !important;
    }

    html body
    button[data-aio-mobile-menu-toggle]
    .aio-car-menu-silhouettes {
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.15 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        vector-effect: non-scaling-stroke !important;
    }

    html body
    button[data-aio-mobile-menu-toggle]
    .aio-car-menu-cross {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        opacity: 0 !important;
        transform: scale(.86) !important;
        transition:
            opacity .16s ease,
            transform .16s ease !important;
    }

    html body
    button[data-aio-mobile-menu-toggle]
    .aio-car-menu-cross::before,
    html body
    button[data-aio-mobile-menu-toggle]
    .aio-car-menu-cross::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        width: 24px !important;
        height: 1.2px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: currentColor !important;
        transform-origin: center !important;
    }

    html body
    button[data-aio-mobile-menu-toggle]
    .aio-car-menu-cross::before {
        transform:
            translate(-50%, -50%)
            rotate(45deg) !important;
    }

    html body
    button[data-aio-mobile-menu-toggle]
    .aio-car-menu-cross::after {
        transform:
            translate(-50%, -50%)
            rotate(-45deg) !important;
    }

    html body
    button[data-aio-mobile-menu-toggle][aria-expanded="true"]
    .aio-car-menu-icon
    > svg {
        opacity: 0 !important;
    }

    html body
    button[data-aio-mobile-menu-toggle][aria-expanded="true"]
    .aio-car-menu-cross {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

@media (min-width: 901px) {
    html body .aio-car-menu-icon {
        display: none !important;
    }
}