html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.acnova-mobile-actions,
.acnova-mobile-drawer,
.acnova-mobile-drawer-backdrop {
    display: none;
}

@media (max-width: 1100px) {
    body.has-mobile-actions {
        padding-bottom:
            calc(88px + env(safe-area-inset-bottom));
    }

    body.acnova-menu-open {
        overflow: hidden;
    }

    /*
    |--------------------------------------------------------------------------
    | Compact public header
    |--------------------------------------------------------------------------
    */

    .ac-nav {
        min-height: 70px;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ac-nav > .ac-links,
    .ac-nav nav.ac-links,
    .ac-nav .nav-links,
    .ac-nav .ac-nav-links {
        display: none !important;
    }

    .ac-brand {
        min-width: 0 !important;
    }

    .ac-brand strong {
        font-size: 16px !important;
    }

    .ac-brand span {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
    |--------------------------------------------------------------------------
    | Bottom navigation
    |--------------------------------------------------------------------------
    */

    .acnova-mobile-actions {
        position: fixed;

        left: 12px;
        right: 12px;
        bottom:
            calc(10px + env(safe-area-inset-bottom));

        z-index: 10020;

        display: grid !important;
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 6px;

        padding: 8px;

        background:
            rgba(5, 28, 18, .96);

        border:
            1px solid
            rgba(59, 211, 116, .28);

        border-radius: 22px;

        box-shadow:
            0 20px 55px
            rgba(0, 0, 0, .34);

        backdrop-filter:
            blur(18px);

        -webkit-backdrop-filter:
            blur(18px);
    }

    .acnova-mobile-nav-item {
        min-width: 0;
        min-height: 58px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;

        padding: 6px 3px;

        color: #d9e9df;

        background: transparent;

        border:
            1px solid transparent;

        border-radius: 15px;

        font: inherit;
        text-decoration: none;

        cursor: pointer;

        transition:
            background .18s ease,
            border-color .18s ease,
            color .18s ease,
            transform .18s ease;
    }

    .acnova-mobile-nav-item strong {
        width: 29px;
        height: 29px;

        display: grid;
        place-items: center;

        color: #b8f3cc;

        background:
            rgba(57, 217, 121, .12);

        border:
            1px solid
            rgba(57, 217, 121, .18);

        border-radius: 10px;

        font-size: 13px;
        line-height: 1;
    }

    .acnova-mobile-nav-item span {
        width: 100%;

        overflow: hidden;

        color: inherit;

        font-size: 10px;
        font-weight: 850;
        line-height: 1.15;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .acnova-mobile-nav-item.active {
        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                rgba(22, 167, 94, .34),
                rgba(36, 199, 120, .16)
            );

        border-color:
            rgba(74, 222, 128, .30);
    }

    .acnova-mobile-nav-item.active strong {
        color: #052e16;
        background: #62e994;
        border-color: #62e994;
    }

    .acnova-mobile-nav-item:active {
        transform: scale(.97);
    }

    .acnova-mobile-more {
        appearance: none;
        -webkit-appearance: none;
    }

    .acnova-mobile-more strong {
        font-size: 14px;
        letter-spacing: 1px;
    }

    /*
    |--------------------------------------------------------------------------
    | Drawer backdrop
    |--------------------------------------------------------------------------
    */

    .acnova-mobile-drawer-backdrop {
        position: fixed;
        inset: 0;

        z-index: 10030;

        display: block;

        background:
            rgba(1, 10, 6, .60);

        opacity: 0;

        backdrop-filter:
            blur(3px);

        -webkit-backdrop-filter:
            blur(3px);

        transition:
            opacity .22s ease;
    }

    .acnova-mobile-drawer-backdrop.open {
        opacity: 1;
    }

    /*
    |--------------------------------------------------------------------------
    | Drawer
    |--------------------------------------------------------------------------
    */

    .acnova-mobile-drawer {
        position: fixed;

        left: 12px;
        right: 12px;
        bottom:
            calc(88px + env(safe-area-inset-bottom));

        z-index: 10040;

        display: grid;
        grid-template-rows:
            auto minmax(0, 1fr);

        max-height:
            min(74vh, 720px);

        overflow: hidden;

        color: #ffffff;

        background:
            linear-gradient(
                180deg,
                #10291d,
                #07150e
            );

        border:
            1px solid
            rgba(74, 222, 128, .28);

        border-radius: 25px;

        box-shadow:
            0 28px 80px
            rgba(0, 0, 0, .48);

        opacity: 0;

        transform:
            translateY(30px)
            scale(.98);

        visibility: hidden;

        transition:
            opacity .22s ease,
            transform .22s ease,
            visibility .22s ease;
    }

    .acnova-mobile-drawer.open {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        visibility: visible;
    }

    .acnova-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;

        padding: 18px 18px 15px;

        border-bottom:
            1px solid
            rgba(255, 255, 255, .10);
    }

    .acnova-drawer-header small {
        display: block;

        margin-bottom: 3px;

        color: #66e795;

        font-size: 10px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .acnova-drawer-header h2 {
        margin: 0;

        color: #ffffff;

        font-size: 21px;
        line-height: 1.2;
    }

    .acnova-drawer-close {
        flex: 0 0 44px;

        width: 44px;
        height: 44px;

        display: grid;
        place-items: center;

        color: #ffffff;
        background:
            rgba(255, 255, 255, .08);

        border:
            1px solid
            rgba(255, 255, 255, .14);

        border-radius: 14px;

        font-size: 27px;
        line-height: 1;

        cursor: pointer;
    }

    .acnova-drawer-body {
        display: grid;
        gap: 18px;

        padding: 17px;

        overflow-y: auto;

        overscroll-behavior: contain;
    }

    .acnova-drawer-section {
        display: grid;
        gap: 9px;
    }

    .acnova-drawer-section h3 {
        margin: 0;

        color: #7aeaa1;

        font-size: 10px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .acnova-drawer-links {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .acnova-drawer-link {
        min-width: 0;
        min-height: 48px;

        display: flex;
        align-items: center;

        padding: 11px 13px;

        color: #eaf7ef;

        background:
            rgba(255, 255, 255, .055);

        border:
            1px solid
            rgba(255, 255, 255, .09);

        border-radius: 14px;

        font-size: 12px;
        font-weight: 780;
        line-height: 1.35;

        text-decoration: none;
    }

    .acnova-drawer-link:hover,
    .acnova-drawer-link:focus-visible {
        color: #ffffff;

        background:
            rgba(30, 166, 74, .24);

        border-color:
            rgba(74, 222, 128, .30);
    }

    .acnova-drawer-button {
        width: 100%;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
}

@media (max-width: 560px) {
    .acnova-mobile-actions {
        left: 8px;
        right: 8px;
        bottom:
            calc(7px + env(safe-area-inset-bottom));

        padding: 7px 5px;

        border-radius: 19px;
    }

    .acnova-mobile-nav-item {
        min-height: 55px;
    }

    .acnova-mobile-nav-item span {
        font-size: 9px;
    }

    .acnova-mobile-drawer {
        left: 8px;
        right: 8px;
        bottom:
            calc(80px + env(safe-area-inset-bottom));

        max-height: 76vh;

        border-radius: 22px;
    }

    .acnova-drawer-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 370px) {
    .acnova-mobile-actions {
        grid-template-columns:
            repeat(5, minmax(48px, 1fr));

        overflow-x: auto;
    }

    .acnova-mobile-nav-item span {
        font-size: 8px;
    }
}