/**
 * Bull Menu - Mega Menu Styles (Simplified)
 *
 * @author    Bullmade
 * @copyright Bullmade
 */

/* Variables */
:root {
    --bm-bg: #fff;
    --bm-text: #333;
    --bm-accent: #000;
    --bm-border: #e5e5e5;
    --bm-shadow: 0 8px 30px rgba(0,0,0,.12);
}

/* Base */
.bm-menu {
    position: relative;
    background: var(--bm-bg);
    display: flex;
    align-items: center;
    width: 100%;
}

/* Mobile Toggle */
.bm-toggle {
    display: none;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0.5rem;
    border: none;
    background: none;
    font: 600 16px/1 inherit;
    color: var(--bm-text);
    cursor: pointer;
}

.bm-toggle-icon {
    position: relative;
    width: 22px;
    height: 14px;
}

.bm-toggle-icon::before,
.bm-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: .3s;
}

.bm-toggle-icon::before { top: 0; box-shadow: 0 6px 0 currentColor; }
.bm-toggle-icon::after { bottom: 0; }

.bm-toggle[aria-expanded="true"] .bm-toggle-icon::before {
    top: 6px;
    transform: rotate(45deg);
    box-shadow: none;
}

.bm-toggle[aria-expanded="true"] .bm-toggle-icon::after {
    bottom: 6px;
    transform: rotate(-45deg);
}

/* Nav List */
.bm-nav {
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 1200px) {
    html.bm-menu-desktop-open #header {
        position: relative;
        z-index: 1000;
    }

    .bm-menu {
        min-height: 54px;
        border-top: 1px solid var(--bm-border);
        border-bottom: 1px solid var(--bm-border);
    }

    .bm-nav {
        max-width: 1500px;
        margin-inline: auto;
        padding-inline: 15px;
    }

    .bm-nav > .bm-item > a {
        min-height: 52px;
        padding: 10px 9px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
    }
}

/* Nav heading - hidden in horizontal mode, shown in vertical */
.bm-nav-heading {
    display: none;
}

/* Menu Items */
.bm-item {
    position: static;
    list-style: none;
}

.bm-item > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0.5rem;
    color: var(--bm-text);
    font: 500 14px/1.2 inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.bm-item > a:hover { color: var(--bm-accent); }

.bm-item > a > i { font-size: 16px; opacity: .8; }

.bm-item > a > span {
    display: block;
}

.bm-item > a > span::first-letter {
    text-transform: uppercase !important;
}

.bm-item > a > span small {
    font: 400 11px/1.2 inherit;
    opacity: .7;
}

/* Label Badge */
.bm-item > a > b {
    padding: 2px 8px;
    font: 600 10px/1.4 inherit;
    text-transform: uppercase;
    color: #fff;
    background: var(--bm-accent);
    border-radius: 3px;
}

/* Dropdown Arrow */
.bm-item.has-dropdown > a::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cGF0aCBkPSJNMjEzLjY2LDEwMS42NmwtODAsODBhOCw4LDAsMCwxLTExLjMyLDBsLTgwLTgwQTgsOCwwLDAsMSw1My42Niw5MC4zNEwxMjgsMTY0LjY5bDc0LjM0LTc0LjM1YTgsOCwwLDAsMSwxMS4zMiwxMS4zMloiPjwvcGF0aD48L3N2Zz4=");
    transition: transform .2s;
}

.bm-item.has-dropdown:hover > a::after { transform: rotate(180deg); }

/* Dropdown Panel */
.bm-drop {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    width: 100vw;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: .25s;
    z-index: 1000;
    overflow: visible;
}

.bm-drop::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    transform: translateY(100%);
    background: linear-gradient(to bottom, rgba(0,0,0,.08), transparent);
    pointer-events: none;
}

.bm-drop > .container {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 20px;
    padding: 10px 30px;
}
@media(min-width: 1200px) {
    .bm-drop {
        background: #fff;
    }

    .bm-vertical .bm-item > .bm-drop,
    .bm-vertical .bm-item.vertical > .bm-drop {
        width: max-content;
    }
}

.bm-item.has-dropdown:hover > .bm-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cover header border with ::before */
.bm-drop::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: #fff;
    transform: translateY(-100%);
}

/* Dropdown Banner Image */
.bm-banner {
    grid-column: 1 / -1;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 4px;
}

/* HTML Content (inline in menu) */
.bm-item.is-html {
    display: flex;
    align-items: center;
}
.bm-html-inline {
    display: flex;
    align-items: center;
    height: 100%;
}
.bm-html-inline img {
    max-height: 40px;
    width: auto;
}

/* Image Link */
.bm-item.is-image-link .bm-image-link {
    display: flex;
    align-items: center;
    height: 100%;
}
.bm-item.is-image-link .bm-image-link img {
    max-height: 40px;
    width: auto;
    display: block;
}

/* Category List */
.bm-cats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 5px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bm-cats a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: var(--bm-text);
    font-width: 500;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}

.bm-cats a:hover { color: var(--bm-accent); }

.bm-cats img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.bm-cats ul {
    list-style: none;
    margin: 0;
    padding: 5px 0 5px 15px;
}

.bm-cats ul a {
    font: 400 13px/1.2 inherit;
    padding: 5px 0;
}

/* Submenu */
.bm-sub {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each .bm-sub-col is one grid cell (one menu column); its items stack vertically. */
.bm-sub-col { list-style: none; }
.bm-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

.bm-sub .bm-item { position: relative; }

.bm-sub .bm-item > a {
    padding: 8px 0;
    white-space: normal;
}

.bm-sub .bm-item > a > img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* Nested Submenus */
.bm-sub .bm-drop {
    position: static;
    display: block;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.bm-sub .bm-sub {
    display: block;
    padding-top: 5px;
}

.bm-sub .bm-sub .bm-item > a {
    font: 400 13px/1.2 inherit;
    color: #666;
    padding: 5px 0;
}

.bm-sub .bm-sub .bm-item > a:hover { color: var(--bm-accent); }

/* Vertical Menu (per-item vertical inside horizontal bar) */
.bm-item.vertical {
    position: relative;
}

.bm-item.vertical > .bm-drop {
    left: 0;
    right: auto;
    width: 220px;
    overflow: visible;
    position: absolute;
}

.bm-item.vertical > .bm-drop > .container {
    display: block !important;
    padding: 0;
    overflow: visible;
    height: 100%;
    position: relative;
}

/* Vertical .bm-sub - the list of depth 2 items */
.bm-item.vertical > .bm-drop .bm-sub {
    display: block !important;
    grid-template-columns: none !important;
    overflow: visible;
    padding: 0;
    margin: 0;
}

/* Depth 2 items - NO position:relative so flyouts align to top */
.bm-item.vertical > .bm-drop .bm-sub > .bm-item {
    position: static !important;
}

.bm-item.vertical > .bm-drop .bm-sub > .bm-item:last-child {
    border-bottom: none;
}

.bm-item.vertical > .bm-drop .bm-sub > .bm-item > a {
    display: block;
    padding: 12px 20px;
    position: relative;
}

/* Arrow for depth 2 items with children */
.bm-item.vertical > .bm-drop .bm-sub > .bm-item.has-dropdown > a::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0) !important;
    border: 4px solid transparent;
    border-left-color: currentColor;
    border-top-color: transparent !important;
}

/* Depth 3 flyout - all flyouts aligned to same Y position */
.bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 500px);
    background: var(--bm-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    height: 100%;
    transition: .2s;
    z-index: 1000;
}

.bm-item.vertical > .bm-drop .bm-sub > .bm-item:hover > .bm-drop {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop > .container {
    display: block !important;
    padding: 0;
    width: max-content;
}

/* Depth 3 category list inside flyout - multi-column layout */
.bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop .bm-cats {
    display: flex !important;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    grid-template-columns: none !important;
    padding: 0;
    margin: 0;
    height: 400px;
    max-height: 60vh;
}

.bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop .bm-cats > li {
    list-style: none;
    box-sizing: border-box;
}

.bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop .bm-cats > li:last-child {
    border-bottom: none;
}

.bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop .bm-cats a {
    display: block;
    padding: 8px 16px;
    color: var(--bm-text);
    font-size: 13px;
    white-space: nowrap;
}

.bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop .bm-cats a:hover {
    color: var(--bm-accent);
    background: rgba(0,0,0,.03);
}

.bm-item.vertical .bm-banner {
    margin: 0 15px 15px;
    width: calc(100% - 30px);
}

/* Flyout Heading - depth 2 name as depth 3 heading */
.bm-flyout-heading {
    display: block;
    padding: 6px 8px !important;
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.5 !important;
    color: var(--bm-text);
    text-transform: none;
}

/* Flyout heading inside vertical menu flyout */
.bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop .bm-flyout-heading {
    white-space: nowrap;
}

/* Backdrop overlay for focus */
.bm-item.has-backdrop::before {
    content: '';
    position: fixed;
    inset: 0;
    top: 100px;
    background: #0003;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
    z-index: 99;
    pointer-events: none;
}

.bm-item.has-backdrop:hover::before {
    opacity: 1;
    visibility: visible;
}

.bm-item.has-backdrop > .bm-drop {
    z-index: 100;
}

/* Desktop horizontal-menu interaction layer. The module JS adds
   .bm-menu-enhanced only after binding all close paths, so no-JS keeps the
   original hover behaviour and every menu link remains available. */
.bm-menu-backdrop {
    display: none;
}

@media (min-width: 1200px) {
    .bm-menu.bm-desktop-submenu-open {
        z-index: 1001;
    }

    .bm-menu.bm-menu-enhanced > .bm-nav {
        position: relative;
        z-index: 1000;
    }

    .bm-menu.bm-menu-enhanced > .bm-nav > .bm-item.has-dropdown:hover > .bm-drop {
        opacity: 0;
        visibility: hidden;
        transform: none;
    }

    .bm-menu.bm-menu-enhanced > .bm-nav > .bm-item.has-dropdown:hover > a::after {
        transform: none;
    }

    .bm-menu.bm-menu-enhanced > .bm-nav > .bm-item.has-dropdown.bm-desktop-open > .bm-drop {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        z-index: 1001;
    }

    .bm-menu.bm-menu-enhanced > .bm-nav > .bm-item.has-dropdown.bm-desktop-open > a::after {
        transform: rotate(180deg);
    }

    .bm-menu.bm-menu-enhanced > .bm-nav > .bm-item.has-backdrop::before {
        display: none;
    }

    .bm-menu.bm-menu-enhanced .bm-menu-backdrop {
        position: fixed;
        display: block;
        top: var(--bm-menu-backdrop-top, 0);
        right: 0;
        bottom: 0;
        left: 0;
        border: 0;
        background: rgba(0, 0, 0, .46);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility .2s ease;
        z-index: 999;
    }

    .bm-menu.bm-menu-enhanced.bm-desktop-submenu-open .bm-menu-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* The dropdown box already uses the theme's real .container. Remove the
       extra module-only inset so its first/last columns share those gutters. */
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > .bm-drop > .container {
        padding-right: 0;
        padding-left: 0;
    }

    /* Column authorship falls back to the first item when no explicit
       .bm-presentation-column exists. Style both the pre-JS and enhanced DOM. */
    .bm-menu:not(.bm-vertical) .bm-sub-col > .bm-col-list > .bm-item:first-child > a,
    .bm-menu:not(.bm-vertical) .bm-sub-col > .bm-col-list > .bm-item.bm-col-head > a,
    .bm-menu:not(.bm-vertical) .bm-sub-col > .bm-col-list > .bm-item.bm-presentation-column > a {
        font-size: 14px;
        font-weight: 700;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    /* At this tier the long fourth USP intersects the two utility links even
       after the existing third USP is removed by the theme. Keep the two core
       fulfilment messages and both utility links, and drop only that duplicate
       advice message until the full desktop width is available. */
    #header .usper .wrapper > span:nth-child(4) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-menu-backdrop {
        transition: none !important;
    }
}

/* Mobile */
@media (max-width: 1199px) {
    .bm-menu {
        order: -1;
    }

    .bm-nav-header {
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 0.5rem;
        border-bottom: 1px solid var(--bm-border);
    }

    .bm-nav-header img {
        height: 38px;
        width: auto;
    }

    .bm-nav-header .bm-toggle {
        width: fit-content;
    }

    .bm-toggle {
        display: flex;
    }

    .bm-vertical {
        margin-top: 0 !important;
    }

    .bm-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 360px;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        background: var(--bm-bg);
        box-shadow: var(--bm-shadow);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .3s;
        z-index: 9999;
    }

    .bm-nav.open {
        display: flex;
        flex-wrap: nowrap;
        transform: translateX(0);
    }

    /* Mobile Items */
    .bm-item {
        position: relative;
        border-bottom: 1px solid var(--bm-border);
    }

    .bm-item > a {
        padding: 12px 0.5rem;
        font-size: 15px;
    }

    .bm-item.has-dropdown > a::after {
        margin-left: auto;
        margin-right: 1rem;
        scale: 2.25;
    }

    .bm-item.open > a::after { transform: rotate(180deg); }

    /* Mobile Dropdown */
    .bm-drop {
        position: static;
        display: none;
        width: auto;
        background: #f5f5f5;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .bm-drop > .container {
        display: block;
        padding: 10px 15px 10px 20px;
        max-width: none;
    }

    .bm-item.open > .bm-drop { display: block; }

    .bm-banner { max-height: 150px; margin-bottom: 15px; }

    .bm-cats, .bm-sub { display: block; }

    .bm-cats li { border-bottom: 1px solid rgba(0,0,0,.05); }
    .bm-cats li:last-child { border: none; }
    .bm-cats a { padding: 12px 0; }
    .bm-cats img { width: 32px; height: 32px; }
    .bm-cats ul { padding-left: 20px; border-left: 2px solid var(--bm-border); margin-left: 10px; }

    .bm-sub .bm-item { border: none; }
    .bm-sub .bm-item > a { padding: 10px 0; font-size: 14px; }

    /* Collapse each dropdown column into its own submenu.
       .bm-has-cols and .bm-col-head are added by mega-menu.js, so if that script
       never runs the column stays flat and readable rather than shut with no way
       to open it. */
    .bm-sub-col.bm-has-cols { border-bottom: 1px solid rgba(0,0,0,.05); }
    .bm-sub-col.bm-has-cols:last-child { border-bottom: none; }

    .bm-sub-col.bm-has-cols > .bm-col-list > .bm-item { display: none; }

    .bm-sub-col.bm-has-cols > .bm-col-list > .bm-col-head,
    .bm-sub-col.bm-has-cols.bm-col-open > .bm-col-list > .bm-item { display: block; }

    .bm-sub-col.bm-has-cols > .bm-col-list > .bm-col-head > a {
        display: flex;
        align-items: center;
        font-weight: 600;
    }

    .bm-sub-col.bm-has-cols > .bm-col-list > .bm-col-head > a::after {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cGF0aCBkPSJNMjEzLjY2LDEwMS42NmwtODAsODBhOCw4LDAsMCwxLTExLjMyLDBsLTgwLTgwQTgsOCwwLDAsMSw1My42Niw5MC4zNEwxMjgsMTY0LjY5bDc0LjM0LTc0LjM1YTgsOCwwLDAsMSwxMS4zMiwxMS4zMloiPjwvcGF0aD48L3N2Zz4=");
        margin-left: auto;
        margin-right: 1rem;
        scale: 2.25;
        transition: transform .2s;
    }

    .bm-sub-col.bm-has-cols.bm-col-open > .bm-col-list > .bm-col-head > a::after {
        transform: rotate(180deg);
    }

    /* Keep third-level links aligned with their column heading. Compact rows
       and subtle separators make long mobile columns easier to scan. */
    .bm-sub-col.bm-has-cols.bm-col-open > .bm-col-list > .bm-item:not(.bm-col-head) > a {
        align-items: center !important;
        min-height: 38px !important;
        padding: 6px 0 !important;
        border-top: 1px solid rgba(0, 0, 0, .08) !important;
    }

    /* Disable backdrop on mobile */
    .bm-item.has-backdrop::before {
        display: none !important;
    }

    /* Reset ALL vertical menu styling on mobile */
    .bm-item.vertical {
        position: relative !important;
    }

    .bm-item.vertical > .bm-drop {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        overflow: visible !important;
    }

    .bm-item.vertical > .bm-drop > .container {
        display: block !important;
        padding: 10px 15px 10px 20px !important;
        height: auto !important;
        position: static !important;
        overflow: visible !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub {
        display: block !important;
        position: static !important;
        overflow: visible !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item {
        position: relative !important;
        border-bottom: 1px solid rgba(0,0,0,.05);
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item:last-child {
        border-bottom: none;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item > a {
        display: flex !important;
        padding: 10px 0 !important;
        position: static !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item.has-dropdown > a::after {
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin-left: auto;
        border: 4px solid transparent !important;
        border-top-color: currentColor !important;
        border-left-color: transparent !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item.has-dropdown.open > a::after {
        transform: rotate(180deg) !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        background: transparent !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: none !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item.open > .bm-drop {
        display: block !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop > .container {
        display: block !important;
        padding: 0 0 0 15px !important;
        width: auto !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop .bm-cats {
        display: block !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        align-content: unset !important;
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
    }

    .bm-item.vertical > .bm-drop .bm-sub > .bm-item > .bm-drop .bm-cats > li {
        width: auto !important;
        max-width: none !important;
    }

    /* Mobile flyout heading */
    .bm-flyout-heading {
        padding: 10px 0;
        background: transparent;
        border-bottom: none;
        font-size: 13px;
        color: #666;
    }
}

@media (max-width: 575px) {
    .bm-nav { width: 100%; max-width: none !important; }
    .bm-toggle { font-size: 14px; }
}

/* ============================================
   Vertical Sidebar Mode (.bm-vertical)
   Elgiganten-style multi-column flyout
   ============================================ */

.bm-menu.bm-vertical {
    display: block;
    background: var(--bm-bg);
    border-radius: 0 0 8px 8px;
    overflow: visible;
    position: relative;
    z-index: 100;
}

/* Elevate the left-column stacking contexts so flyouts render above main content */
#left-column .offcanvas-body {
    z-index: 50;
}

#left-column .sticky {
    z-index: 100;
}

#left-column .sticky.bm-sticky {
    position: fixed;
    z-index: 1000;
    margin-top: 7rem;
}

.bm-vertical .bm-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
}

.bm-vertical .bm-item,
.bm-vertical .bm-item.vertical,
.bm-vertical .bm-item.has-backdrop {
    position: static !important;
}

/* Backdrop in vertical mode: keep it but ensure menu column renders above it */
.bm-vertical .bm-item.has-backdrop::before {
    z-index: 40;
}

.bm-vertical .bm-item > a {
    position: relative;
    z-index: 50;
}

/* Background layer on the nav to shield it from the backdrop */
.bm-vertical .bm-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f5f5f5;
    z-index: 45;
    pointer-events: none;
}

.bm-vertical .bm-item:last-child {
    border-bottom: none;
}

.bm-vertical .bm-item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    white-space: normal;
    font-size: 16px;
    font-weight: 400;
    color: var(--bm-text);
    text-decoration: none;
    transition: background .15s, color .15s;
    border-radius: 0;
}

/* Item icon/image sizing */
.bm-vertical .bm-item > a > .bm-item-image {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 100%;
    flex-shrink: 0;
}

.bm-vertical .bm-item > a > i {
    width: 28px;
    text-align: center;
    font-size: 18px;
    opacity: .7;
    flex-shrink: 0;
}

/* Hover: light blue/purple background */
.bm-vertical .bm-item > a:hover,
.bm-vertical .bm-item.has-dropdown:hover > a {
    background: #e8e0f0;
    color: var(--bm-text);
}

/* Right-pointing chevron arrow for top-level items with children */
.bm-vertical .bm-nav > .bm-item.has-dropdown > a::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E") !important;
    display: inline-block !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    border-right: none !important;
    border-bottom: none !important;
    transform: none !important;
    opacity: .5;
    transition: opacity .15s !important;
    position: static !important;
    background: none !important;
}

.bm-vertical .bm-nav > .bm-item.has-dropdown:hover > a::after {
    opacity: .8;
}

/* Flyout dropdown to the right */
.bm-vertical .bm-item > .bm-drop,
.bm-vertical .bm-item.vertical > .bm-drop {
    position: absolute;
    left: 100%;
    top: 0;
    right: auto;
    width: min(800px, calc(100vw - 300px));
    background: var(--bm-bg);
    border-left: 1px solid var(--bm-border);
    box-shadow: 8px 0 20px rgba(0,0,0,.06);
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity .15s, visibility .15s;
    z-index: 1000;
    overflow: hidden;
}

.bm-vertical .bm-drop::before,
.bm-vertical .bm-drop::after {
    display: none;
}

.bm-vertical .bm-item.has-dropdown:hover > .bm-drop {
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
}

/* Reset grid to block layout for sidebar flyout */
.bm-vertical .bm-item > .bm-drop > .container,
.bm-vertical .bm-item.vertical > .bm-drop > .container {
    display: block !important;
    padding: 0;
    max-width: none;
    height: auto;
    position: static;
    overflow: visible;
}

/* Flyout heading - bold column title */
.bm-vertical .bm-flyout-heading {
    display: block;
    padding: 8px 16px 7px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bm-text);
    border-bottom: none;
    margin-top: 6px;
    margin-bottom: 2px;
    margin-left: 20px;
}

/* Multi-column grid layout within flyout */
.bm-vertical .bm-sub {
    display: block;
    column-width: 160px;
    column-gap: 10px;
}

.bm-vertical .bm-sub .bm-item {
    border-bottom: none;
}

.bm-vertical .bm-sub .bm-item:last-child {
    border-bottom: none;
}

/* Depth 2 items inside flyout */
.bm-vertical .bm-sub > .bm-item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--bm-text);
    text-decoration: none;
    transition: background .15s;
}

.bm-vertical .bm-sub > .bm-item > a:hover {
    background: #e8e0f0;
}

.bm-vertical .bm-sub > .bm-item > a > .bm-item-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Depth 2 items with children - chevron */
.bm-vertical .bm-sub > .bm-item.has-dropdown > a::after {
    content: '';
    margin-left: auto;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .5;
}

.bm-vertical .bm-sub > .bm-item.has-dropdown:hover > a::after {
    opacity: .8;
}

/* Depth 3 flyout panel */
.bm-vertical .bm-sub > .bm-item > .bm-drop {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    width: max-content;
    min-width: 260px;
    max-width: calc(100vw - 600px);
    min-height: 100%;
    background: var(--bm-bg);
    border-left: 1px solid var(--bm-border);
    box-shadow: 8px 0 20px rgba(0,0,0,.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, visibility .15s;
    z-index: 1001;
}

.bm-vertical .bm-sub > .bm-item:hover > .bm-drop {
    opacity: 1;
    visibility: visible;
}

.bm-vertical .bm-sub > .bm-item > .bm-drop > .container {
    display: block !important;
    padding: 0;
    width: max-content;
    min-width: 260px;
}

/* Third-level items: teal/blue colored links */
.bm-vertical .bm-sub .bm-sub {
    display: block;
    padding: 0;
}

.bm-vertical .bm-sub .bm-sub .bm-item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #0078a0;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.bm-vertical .bm-sub .bm-sub .bm-item > a:hover {
    background: #f0f7fa;
    color: #005a7a;
}

.bm-vertical .bm-sub .bm-sub .bm-item > a > .bm-item-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Category list in sidebar flyout */
.bm-vertical .bm-cats {
    display: block;
    column-width: 160px;
    column-gap: 10px;
    padding: 0px 16px 10px;
    margin: 0;
    list-style: none;
}

.bm-vertical .bm-cats > li {
    break-inside: avoid;
}

.bm-vertical .bm-cats > li {
    list-style: none;
}

.bm-vertical .bm-cats a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    font-size: 14px;
    color: #0078a0;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s;
}

.bm-vertical .bm-cats a:hover {
    background: #f0f7fa;
}

.bm-vertical .bm-cats img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.bm-vertical .bm-cats ul {
    padding-left: 0;
    border: none;
    margin: 0;
}

.bm-vertical .bm-cats ul a {
    padding-left: 56px;
    font-size: 13px;
}

/* Match flyout sub-item height to top-level vertical menu item.
   Theme custom.css shrinks top item img to 28x28 at <=1520px, 38x38 above.
   Mirror the same breakpoint here so sub items always match.
   Higher specificity (.bm-menu.bm-vertical) + !important to beat theme custom.css. */
@media (min-width: 1200px) {
    .bm-menu.bm-vertical .bm-cats > li > a,
    .bm-menu.bm-vertical .bm-cats > li > ul > li > a {
        padding: 5px 12px !important;
        gap: 12px;
    }

    .bm-menu.bm-vertical .bm-cats > li > ul > li > a {
        padding-left: 28px !important;
    }

    .bm-menu.bm-vertical .bm-cats > li > a > img,
    .bm-menu.bm-vertical .bm-cats > li > ul > li > a > img {
        width: 38px !important;
        height: 38px !important;
        object-fit: cover;
        border-radius: 100%;
        flex-shrink: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1520px) {
    .bm-menu.bm-vertical .bm-cats > li > a,
    .bm-menu.bm-vertical .bm-cats > li > ul > li > a {
        gap: 8px;
    }

    .bm-menu.bm-vertical .bm-cats > li > a > img,
    .bm-menu.bm-vertical .bm-cats > li > ul > li > a > img {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Nested category flyouts in sidebar: depth 2 and 3 each open flyout on hover */

/* Force single-column block list so flyouts position cleanly */
.bm-vertical .bm-cats {
    column-width: auto !important;
    column-count: auto !important;
    column-gap: normal !important;
}

/* Depth 2 li — STATIC so depth-3 flyout aligns to top of depth-1 .bm-drop */
.bm-vertical .bm-cats > li {
    position: static;
}

/* Depth 3 flyout panel (the <ul> child of a depth-2 li) */
.bm-vertical .bm-cats > li > ul {
    position: absolute;
    left: 100%;
    top: 0;
    min-height: 100%;
    width: max-content;
    min-width: 320px;
    max-width: calc(100vw - 600px);
    background: var(--bm-bg);
    border-left: 1px solid var(--bm-border);
    box-shadow: 8px 0 20px rgba(0,0,0,.06);
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity .15s, visibility .15s;
    z-index: 1001;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bm-vertical .bm-cats > li:hover > ul {
    opacity: 1;
    visibility: visible;
}

/* Depth 3 flyout: split into 2 columns when more than 12 items (desktop only).
   Use CSS grid (row-major), NOT CSS multi-column. Multi-column (column-count)
   fills top-to-bottom down column 1, then column 2 — so reading left-to-right
   scrambles the position order (item 1, item 15, item 2, item 16, ...). Grid
   with the default row auto-flow places items 1,2 / 3,4 / 5,6, so the visual
   reading order matches the DOM/position order. */
@media (min-width: 1200px) {
    .bm-vertical .bm-cats > li > ul:has(> li:nth-child(13)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0;
        padding-right: 10px;
    }

    /* Heading spans both columns and stays at the top of the flyout. */
    .bm-vertical .bm-cats > li > ul:has(> li:nth-child(13)) > li:has(> .bm-flyout-heading) {
        grid-column: 1 / -1;
    }
}

/* Depth 3 li — STATIC so depth-4 flyout aligns to top of depth-3 panel */
.bm-vertical .bm-cats > li > ul > li {
    position: static;
    list-style: none;
}

/* Depth 4 flyout panel */
.bm-vertical .bm-cats > li > ul > li > ul {
    position: absolute;
    left: 100%;
    top: 0;
    min-height: 100%;
    width: max-content;
    min-width: 260px;
    max-width: calc(100vw - 600px);
    background: var(--bm-bg);
    border-left: 1px solid var(--bm-border);
    box-shadow: 8px 0 20px rgba(0,0,0,.06);
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity .15s, visibility .15s;
    z-index: 1002;
    padding: 0;
    margin: 0;
    list-style: none;
}

.bm-vertical .bm-cats > li > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
}

/* Indented links inside flyout panels (heading keeps own padding) */
.bm-vertical .bm-cats > li > ul a:not(.bm-flyout-heading),
.bm-vertical .bm-cats > li > ul > li > ul a:not(.bm-flyout-heading) {
    padding-left: 16px;
    white-space: nowrap;
}

/* Force flyout heading inside .bm-cats to match depth-2 heading appearance */
.bm-vertical .bm-cats .bm-flyout-heading {
    display: block;
    gap: 0;
    color: var(--bm-text);
    font-weight: 700;
    font-size: 18px !important;
    background: transparent;
    margin-bottom: 2px;
    margin-left: 0;
}

.bm-vertical .bm-cats .bm-flyout-heading:hover {
    background: transparent;
}

/* Right-arrow indicator for items with a child flyout */
.bm-vertical .bm-cats li:has(> ul) > a {
    position: relative;
    padding-right: 24px;
}

.bm-vertical .bm-cats li:has(> ul) > a::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    opacity: .5;
}

/* Override per-item .vertical sub-item rules inside sidebar */
.bm-vertical .bm-item.vertical > .bm-drop .bm-sub > .bm-item {
    position: static !important;
}

.bm-vertical .bm-item.vertical > .bm-drop .bm-sub > .bm-item > a {
    display: flex;
    padding: 9px 16px;
}

/* Nav heading (top of first column) */
.bm-vertical .bm-nav-heading {
    display: block;
    padding: 14px 16px 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bm-text);
    position: relative;
    z-index: 50;
    border-bottom: none;
    margin-bottom: 2px;
}

/* Mobile: reset vertical mode to standard mobile drawer */
@media (max-width: 1199px) {
    .bm-menu.bm-vertical {
        display: block;
    }

    .bm-vertical .bm-nav {
        display: flex;
        flex-direction: column;
    }

    .bm-vertical .bm-nav::before {
        display: none;
    }

    .bm-vertical .bm-nav-heading {
        display: block;
        padding: 12px 16px 8px;
        font-size: 15px;
        font-weight: 700;
    }

    .bm-vertical .bm-item {
        border-bottom: 1px solid var(--bm-border);
    }

    .bm-vertical .bm-drop {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        background: #f5f5f5;
        border-left: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: none;
    }

    .bm-vertical .bm-item.has-dropdown > a::after {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cGF0aCBkPSJNMjEzLjY2LDEwMS42NmwtODAsODBhOCw4LDAsMCwxLTExLjMyLDBsLTgwLTgwQTgsOCwwLDAsMSw1My42Niw5MC4zNEwxMjgsMTY0LjY5bDc0LjM0LTc0LjM1YTgsOCwwLDAsMSwxMS4zMiwxMS4zMloiPjwvcGF0aD48L3N2Zz4=");
        width: auto;
        height: auto;
        border: none;
        margin-left: auto;
        transform: scale(2.25);
        opacity: 1;
    }

    .bm-vertical .bm-item.open > a::after {
        transform: rotate(180deg);
    }

    .bm-vertical .bm-item.open > .bm-drop {
        display: block;
    }

    .bm-vertical .bm-drop > .container {
        padding: 10px 15px 10px 20px !important;
    }

    .bm-vertical .bm-sub > .bm-item > .bm-drop {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
    }

    .bm-vertical .bm-sub > .bm-item.has-dropdown > a::after {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cGF0aCBkPSJNMjEzLjY2LDEwMS42NmwtODAsODBhOCw4LDAsMCwxLTExLjMyLDBsLTgwLTgwQTgsOCwwLDAsMSw1My42Niw5MC4zNEwxMjgsMTY0LjY5bDc0LjM0LTc0LjM1YTgsOCwwLDAsMSwxMS4zMiwxMS4zMloiPjwvcGF0aD48L3N2Zz4=");
        width: auto;
        height: auto;
        border: none;
        transform: scale(2.25);
        opacity: 1;
    }

    .bm-vertical .bm-cats {
        display: block;
        columns: unset;
        column-width: unset;
        column-gap: unset;
        flex-direction: unset;
        flex-wrap: unset;
        max-height: none;
        padding: 0;
    }

    .bm-vertical .bm-sub {
        display: block;
        columns: unset;
        column-width: unset;
        column-gap: unset;
    }

    .bm-vertical .bm-cats a,
    .bm-vertical .bm-sub .bm-sub .bm-item > a {
        color: var(--bm-text);
    }

    /* Mobile: depth-2+ sub-category expand/collapse */
    .bm-cats li.has-children > a {
        position: relative;
    }

    .bm-cats li.has-children > a::after {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAyNTYgMjU2Ij48cGF0aCBkPSJNMjEzLjY2LDEwMS42NmwtODAsODBhOCw4LDAsMCwxLTExLjMyLDBsLTgwLTgwQTgsOCwwLDAsMSw1My42Niw5MC4zNEwxMjgsMTY0LjY5bDc0LjM0LTc0LjM1YTgsOCwwLDAsMSwxMS4zMiwxMS4zMloiPjwvcGF0aD48L3N2Zz4=");
        margin-left: auto;
        transform: scale(1.75);
        transition: transform .15s ease;
        flex-shrink: 0;
    }

    .bm-cats li.has-children.open > a::after {
        transform: scale(1.75) rotate(180deg);
    }

    /* Override desktop hover-driven absolute positioning of nested <ul> on mobile */
    .bm-vertical .bm-cats > li > ul,
    .bm-cats li.has-children > ul {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        transition: max-height .2s ease, visibility 0s linear .2s;
    }

    .bm-cats li.has-children.open > ul {
        visibility: visible;
        max-height: none;
        overflow: visible;
        padding: 5px 0 5px 15px;
        transition: max-height .2s ease, visibility 0s linear 0s;
    }

    /* Disable hover-driven open from desktop CSS at mobile width */
    .bm-vertical .bm-cats > li:hover > ul {
        visibility: hidden;
    }

    .bm-vertical .bm-cats > li.has-children.open:hover > ul,
    .bm-vertical .bm-cats > li.has-children.open > ul {
        visibility: visible;
    }
}

/* Vertical Menu Header & Footer */
.bm-vertical-header,
.bm-vertical-footer {
    font-size: 14px;
    color: var(--bm-text) !important;
}

.bm-vertical-header img,
.bm-vertical-footer img {
    max-width: 100%;
    height: auto;
}

/* Device Visibility */
@media (min-width: 1200px) {
    .bm-hide-desktop { display: none !important; }
}

@media (max-width: 1199px) {
    .bm-hide-mobile { display: none !important; }
}

/* Accessibility */
.bm-item > a:focus,
.bm-cats a:focus {
    outline: 2px solid var(--bm-accent);
    outline-offset: 2px;
}
.bm-title-mobile { display: none; }
@media (min-width: 1200px) {
    .bm-desktop-hidden { display: none !important; }
}
@media (max-width: 1199px) {
    .bm-mobile-hidden { display: none !important; }
    .bm-title-desktop { display: none; }
    .bm-title-mobile { display: inline; }
}