.fh-mobile-nav {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-nav {
        display: none !important;
    }

    .fh-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(176, 139, 93, 0.34);
        background: rgba(253, 251, 247, 0.97);
        box-shadow: 0 -8px 24px rgba(72, 48, 25, 0.12);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .fh-mobile-nav a {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 58px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        padding: 5px 2px;
        color: #6d4621;
        text-decoration: none;
        text-align: center;
        line-height: 1.15;
        border-radius: 8px;
        font-weight: 600;
    }

    .fh-mobile-nav a.is-active {
        color: #A52A2A;
        background: rgba(165, 42, 42, 0.08);
    }

    .fh-mobile-nav a.has-dot::after {
        content: "";
        position: absolute;
        top: 9px;
        right: calc(50% - 17px);
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #e23b3b;
        box-shadow: 0 0 0 2px rgba(253, 251, 247, 0.96);
    }

    .fh-mobile-nav .fh-nav-icon {
        display: block;
        height: 26px;
        font-size: 24px;
        line-height: 26px;
        font-style: normal;
        font-weight: 400;
    }

    .fh-mobile-nav .fh-nav-label {
        display: block;
        font-size: 12px;
        white-space: nowrap;
    }
}