/* v1.8.0 — persistent mobile bottom bar (hamburger + MENU label).
 * Mobile only (< 1024px, matching the archive sidebar breakpoint), fixed
 * bottom-left, stays visible while scrolling. Brand tokens. */

.w-mobile-menu {
    display: none; /* mobile-only below */
}

@media (max-width: 1023.98px) {

    .w-mobile-menu {
        position: fixed;
        left: var(--w-space-3, 12px);
        bottom: calc(var(--w-space-3, 12px) + env(safe-area-inset-bottom, 0px));
        z-index: 9990; /* above content, below the JetMobileMenu overlay (10000+) */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 58px;
        height: 58px;
        padding: 6px 4px;
        background: var(--w-navy, #1A365D);
        color: #fff;
        border: none;
        border-radius: 50%;
        box-shadow: 0 4px 14px rgba(26, 54, 93, 0.35);
        cursor: pointer;
        transition: background 150ms ease;
    }

    .w-mobile-menu:hover,
    .w-mobile-menu:focus-visible {
        background: var(--w-aqua-dark, #0E7490);
    }

    .w-mobile-menu__icon {
        display: inline-flex;
        line-height: 0;
    }

    .w-mobile-menu__label {
        font: 600 9px/1.2 var(--w-font, sans-serif);
        letter-spacing: 0.08em;
        color: #fff;
    }
}

/* ---------- CTA row inside the opened mobile menu (v1.8.1) ----------
 * Košík + Môj účet under the category list. Rendered by MobileMenuBar's
 * script into .jet-mobile-menu__container-inner; the container slides in
 * from the right with transparent bg — give the row its own card look
 * so it reads as a footer action zone, separate from the tree rows. */

.w-mobile-menu__actions {
    display: flex;
    flex: 0 0 auto; /* v1.8.2: stay fixed in the flex column while the tree
     * body below flexes as branches expand/collapse */
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(14, 116, 144, 0.15); /* aqua-dark hairline */
    margin-bottom: 4px;
}

.w-mobile-menu__cta {
    flex: 1 1 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    font: 600 14px/1 var(--w-font, sans-serif);
    border-radius: var(--w-radius, 8px);
    text-decoration: none;
    cursor: pointer;
}

.w-mobile-menu__cta--acct {
    color: var(--w-navy, #1A365D);
    background: #fff;
    border: 1.5px solid var(--w-navy, #1A365D);
}

.w-mobile-menu__cta--cart {
    color: #fff;
    background: var(--w-cta, #EB3D0A);
    border: 1.5px solid var(--w-cta, #EB3D0A);
}

.w-mobile-menu__cta:active {
    transform: translateY(1px);
}