/* ===== Mobile bottom nav (site-wide, footer.php) + WhatsApp offset coordination.
   Every colour is a var() from navigation.php's :root — no hex values here. ===== */

:root {
    --jv-mnav-h: 64px;
}

.jv-mnav {
    display: none;
}

@media (max-width: 767px) {
    .jv-mnav {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        background: var(--jv-ink);
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
        transition: transform 0.25s ease;
    }

    .jv-mnav.jv-mnav--hidden {
        transform: translateY(100%);
    }

    /* Product page's own sticky buy bar takes priority over the generic
       nav — showing both at once crowds a small screen with two fixed
       bottom bars for one page. */
    .jv-mnav.jv-mnav--suppressed {
        display: none;
    }
}

.jv-mnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    color: var(--jv-line);
    font-family: var(--jv-font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.jv-mnav-item svg {
    width: 21px;
    height: 21px;
    flex: none;
}

.jv-mnav-item.jv-mnav-active {
    color: var(--jv-gold);
}

.jv-mnav-cart-icon {
    position: relative;
    display: flex;
}

.jv-mnav-badge {
    position: absolute;
    top: -6px;
    right: -9px;
    background: var(--jv-gold);
    color: var(--jv-ink);
    font-size: 10px;
    font-weight: 600;
    min-width: 15px;
    height: 15px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

@media (prefers-reduced-motion: reduce) {
    .jv-mnav {
        transition: none;
    }
}

/* Nav visible but in a short-viewport landscape phone: too little vertical
   space for auto-hide toggling to feel anything but twitchy — always show. */
@media (max-height: 450px) and (orientation: landscape) {
    .jv-mnav.jv-mnav--hidden {
        transform: none;
    }
}

/* ----- WhatsApp widget offset while the nav is present ----- */
@media (max-width: 767px) {
    .jv-wa {
        bottom: calc(var(--jv-mnav-h) + 12px);
        transition: bottom 0.25s ease;
    }

    /* On product.php, scrolling down sets BOTH jv-nav-hidden (generic
       scroll-hide) and jv-nav-suppressed (sticky buy bar took over) at the
       same time. Either way, if .jv-wa--lifted is present the sticky bar is
       still on screen and the widget must stay above it — :not() here makes
       sure that pre-existing rule (footer.php's own <style> block) always
       wins over these two. */
    body.jv-nav-hidden .jv-wa:not(.jv-wa--lifted),
    body.jv-nav-suppressed .jv-wa:not(.jv-wa--lifted) {
        bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jv-wa {
        transition: none;
    }
}