/**
 * WordPress nav menu items: desktop / mobile visibility.
 * Breakpoint matches UICore (1025px).
 */

@media (max-width: 1025px) {
    .o4w-menu-desktop-only {
        display: none !important;
    }
}

@media (min-width: 1026px) {
    .o4w-menu-mobile-only {
        display: none !important;
    }
}

/*
 * UiCore adds `uicore-visible` to items in its mobile-menu copy. Keep the
 * explicit O4 hidden state stronger than UiCore's visibility class.
 */
li.menu-item.o4w-menu-hidden,
li.menu-item.o4w-menu-hidden.uicore-visible,
.uicore-mobile-menu-wrapper li.menu-item.o4w-menu-hidden,
.uicore-mobile-menu-wrapper li.menu-item.o4w-menu-hidden.uicore-visible {
    display: none !important;
}

/* Master switch: hide all desktop and mobile header navigation links by default. */
body.o4w-menu-items-disabled .uicore-nav .uicore-menu > li.menu-item,
body.o4w-menu-items-disabled .uicore-mobile-menu-wrapper .uicore-menu > li.menu-item {
    display: none !important;
}

/* Mini-cart lives in the hamburger menu, not the desktop menubar. */
.uicore-navbar:not(.uicore-mobile-menu-wrapper) .o4w-menu-mini-cart {
    display: none !important;
}

/*
 * Hidden by default. Page cache often embeds someone else's cart count, so PHP
 * body classes cannot be trusted. JS / Woo fragments add --visible when the
 * real cart has items. Extra selectors beat UICore `.uicore-visible`.
 */
li.menu-item.o4w-menu-mini-cart,
li.menu-item.o4w-menu-mini-cart.uicore-visible,
.o4w-menu-mini-cart[hidden],
.o4w-menu-mini-cart.o4w-menu-mini-cart--hidden,
.o4w-menu-mini-cart.o4w-menu-mini-cart--hidden.uicore-visible,
body.o4w-cart-empty .o4w-menu-mini-cart,
body.o4w-cart-empty .o4w-menu-mini-cart.uicore-visible,
body.woocommerce-cart .o4w-menu-mini-cart,
body.woocommerce-cart .o4w-menu-mini-cart.uicore-visible {
    display: none !important;
}

body:not(.woocommerce-cart) .uicore-mobile-menu-wrapper li.menu-item.o4w-menu-mini-cart.o4w-menu-mini-cart--visible,
body:not(.woocommerce-cart) .uicore-mobile-menu-wrapper li.menu-item.o4w-menu-mini-cart.o4w-menu-mini-cart--visible.uicore-visible {
    display: block !important;
}

@media (max-width: 1025px) {
    body:not(.woocommerce-cart) li.menu-item.o4w-menu-mini-cart.o4w-menu-mini-cart--visible,
    body:not(.woocommerce-cart) li.menu-item.o4w-menu-mini-cart.o4w-menu-mini-cart--visible.uicore-visible,
    body:not(.woocommerce-cart) li.menu-item.o4w-menu-mini-cart:has(.o4w-menu-mini-cart__badge[data-count]:not([data-count="0"])),
    body:not(.woocommerce-cart) li.menu-item.o4w-menu-mini-cart.uicore-visible:has(.o4w-menu-mini-cart__badge[data-count]:not([data-count="0"])) {
        display: block !important;
    }
}

/* Icon sits on the <a> like submenu arrows (a is max-width 95%, right: 10px). */
.o4w-menu-mini-cart > a {
    position: relative;
}

.o4w-menu-mini-cart__icon {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    display: block;
    line-height: 0;
    pointer-events: none;
}

.o4w-menu-mini-cart__svg {
    display: block;
    width: 16px;
    height: 16px;
}

.o4w-menu-mini-cart__badge {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -6px;
    margin-top: -6px;
    min-width: 1.1em;
    height: 1.1em;
    padding: 0 0.2em;
    border-radius: 1em;
    background: #070707;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1em;
    text-align: center;
    box-sizing: border-box;
}