/* Website bottom navigation (Phase 3, 2026-10-23). Phones only; nothing here applies on a desktop. */
.km-bottom-nav{ display:none; }

@media (max-width:700px){
    .km-bottom-nav{
        display:flex;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:9990;
        align-items:stretch;
        justify-content:space-around;
        padding:6px 4px calc(6px + env(safe-area-inset-bottom));
        background:#ffffff;
        border-top:1px solid #dbeee2;
        box-shadow:0 -4px 14px rgba(15,23,42,.08);
    }
    .km-bn-item{
        flex:1 1 0;
        min-width:0;
        min-height:48px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:2px;
        color:#475569;
        text-decoration:none;
        font-size:11px;
        font-weight:800;
        border-radius:10px;
    }
    .km-bn-item[hidden]{ display:none; }
    .km-bn-ico{ font-size:19px; line-height:1; }
    .km-bn-lbl{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.1; }
    .km-bn-item.is-active{ color:#15803d; }
    .km-bn-item.is-active .km-bn-lbl{ font-weight:950; }
    .km-bn-item:focus-visible{ outline:3px solid rgba(21,128,61,.42); outline-offset:-2px; }

    /* keep every fixed bottom thing clear of the bar */
    body.km-has-bottom-nav{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
    body.km-has-bottom-nav .km-sticky-bar{ bottom:calc(70px + env(safe-area-inset-bottom)); }
    body.km-has-bottom-nav .km-whatsapp-float{ bottom:calc(78px + env(safe-area-inset-bottom)); }
    body.km-has-bottom-nav .km-back-to-top{ bottom:calc(78px + env(safe-area-inset-bottom)); }
    /* a full-screen panel (mini cart, modals) covers the bar */
    body.km-cart-open .km-bottom-nav,
    body.km-mini-cart-open .km-bottom-nav,
    body.mini-cart-open .km-bottom-nav,
    body.cart-open .km-bottom-nav{ display:none; }
}