/*
 * Aveo Brands Dropdown Fix
 * Only positions the dropdown for the menu item with ID #menu-item-48954.
 */

#menu-item-48954 > .nav-dropdown.aveo-varumarken-positioned {
    position: fixed !important;
    top: var(--aveo-varumarken-top) !important;

    /* Center the popup in the browser window so it is not cut off on the right side. */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    /* Prevent the popup from becoming wider than the screen. */
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;

    z-index: 99999 !important;
}

/* Make sure the dropdown is displayed above the second header row. */
#menu-item-48954 > .nav-dropdown {
    z-index: 99999 !important;
}

/*
 * Separate arrow positioned by JavaScript directly below Brands.
 * Uses a CSS triangle with shadow on both upper edges.
 */
.aveo-varumarken-arrow {
    position: fixed !important;
    top: var(--aveo-varumarken-arrow-top, -9999px) !important;
    left: var(--aveo-varumarken-arrow-left, -9999px) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid #fff !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
    filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, 0.14)) drop-shadow(2px -2px 2px rgba(0, 0, 0, 0.14)) !important;

    /* Placed behind the dropdown so the bottom edge blends into the white popup area. */
    z-index: 99998 !important;
    pointer-events: none !important;
    display: none;
}

.aveo-varumarken-arrow.is-visible {
    display: block !important;
}