/**
 * 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;
}

/* 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: column;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

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

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

@media(min-width: 992px) and (max-width: 1280px) {
    .bm-item:nth-last-of-type(1),
    .bm-item:nth-last-of-type(2),
    .bm-item:nth-last-of-type(3) {
        display: 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: 992px) {
    .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;
}

/* Mobile */
@media (max-width: 991px) {
    .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; }

    /* 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: 992px) {
    .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: 992px) 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: 992px) {
    .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: 991px) {
    .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: 992px) {
    .bm-hide-desktop { display: none !important; }
}

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

/* Accessibility */
.bm-item > a:focus,
.bm-cats a:focus {
    outline: 2px solid var(--bm-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Horizontal top bar (dahl theme) — replaces ets_megamenu's nav 1:1.
   bm_menu ships as a VERTICAL menu (.bm-nav is flex-flow:column above and no
   row rule exists), so the horizontal bar is added here rather than in the
   theme. Scoped to :not(.bm-vertical) so the vertical/sidebar mode is
   untouched, and to >=992px so the existing mobile drawer still applies.

   Values measured off the live ets_megamenu nav at 1440px viewport:
     container  max-width 1450px, padding 0 30px   (matches .container)
     nav        height 50px
     ul         display:flex, justify-content:space-between, inner width 1365
     items      14px / weight 500, rgb(0,0,0), text-transform none
   ========================================================================== */
@media (min-width: 992px) {
    .bm-menu:not(.bm-vertical) {
        display: block;
        width: 100%;
        max-width: 1450px;
        margin: 0 auto;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav {
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-height: 50px;
    }

    /* the burger belongs to the mobile drawer only */
    .bm-menu:not(.bm-vertical) > .bm-toggle,
    .bm-menu:not(.bm-vertical) .bm-nav-header {
        display: none;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a {
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        color: #000;
        text-transform: none;
        white-space: nowrap;
    }
}

@media (min-width: 992px) {
    /* .bm-nav-header carries Bootstrap .d-flex (display:flex !important) and is a flex
       child of .bm-nav, so space-between handed it the first slot and pushed the first
       menu item 34px right of the container edge. Desktop has no drawer header. */
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-nav-header {
        display: none !important;
    }

    /* ets rendered the labels in pure black; .bm-item > a { color: var(--bm-text) }
       (#232323) was winning on specificity. */
    /* Scoped on the nav's own id (#bm-menu), NOT on #header: the dahl theme only emits
       <header id="header"> on the homepage and checkout layouts - every other page renders
       a bare <header class="">, so the whole parity block below was dead there and the
       imported ets HTML blocks stayed display:flex (1401px wide in a 218px column, 929px
       of page overflow). #bm-menu.bm-menu keeps the same specificity as #header .bm-menu. */
    /* #header a in the theme is an ID selector, so class-only rules lose to it. */
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a,
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a > span {
        color: #000;
    }
}

/* --------------------------------------------------------------------------
   Dropdown panel, matched to the ets_megamenu panel measured on this theme
   at 1440px (values from the live DOM, not estimated):
     .bm-drop      <- ets panel:          position absolute, spans the container
                                          (w 1425 incl. the 30px container pad),
                                          background #fff, padding 30px, no border/shadow
     .bm-drop > .container <- .submenu-wrap: inner width 1365, no own padding
     .bm-sub-col   <- .ets_mm_block:       218px wide, 9px horizontal gap
     .bm-sub-col > a   <- block heading:   16px / 500, #000, line-height 17.6px
     .bm-col-list a    <- child link:      14px / 300, #000, line-height 30px
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* anchor the panel to the container, not to the <li>, so it spans full width */
    .bm-menu:not(.bm-vertical) { position: relative; }
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item { position: static; }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > .bm-drop {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 30px;
        background: #fff;
        border: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    .bm-menu:not(.bm-vertical) .bm-drop > .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .bm-menu:not(.bm-vertical) .bm-drop .bm-sub {
        display: grid;
        grid-template-columns: repeat(auto-fill, 218px);
        column-gap: 9px;
        row-gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bm-menu:not(.bm-vertical) .bm-drop .bm-sub-col {
        width: 218px;
        margin: 0;
    }

    /* #header wins over the theme's `#header a` colour rule */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-sub-col > a {
        font: 500 16px/17.6px inherit;
        font-size: 16px;
        font-weight: 500;
        line-height: 17.6px;
        color: #000;
    }

    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-col-list a {
        font-size: 14px;
        font-weight: 300;
        line-height: 30px;
        color: #000;
        padding: 0;
        white-space: normal;
    }
}

@media (min-width: 992px) {
    /* The theme's `.container` rule (padding: 0 30px) outranked the plain class
       selector above and shifted the columns 30px right of ets's x=28. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop > .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* bm_menu has no heading class: the first li in each .bm-col-list IS the group
       heading, the rest are its children. ets rendered heading 16/500, children 14/300. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-col-list > li.bm-item:first-child > a {
        font-size: 16px;
        font-weight: 500;
        line-height: 17.6px;
    }
}

@media (min-width: 992px) {
    /* Nested items were inheriting the horizontal bar's flex/height rules, so rows sat
       17px apart while the text needs the 30px line-height ets used - they overlapped.
       Force plain block flow inside the panel. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-col-list,
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-col-list > li.bm-item {
        display: block;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-col-list > li.bm-item > a {
        display: block;
        height: auto;
        min-height: 0;
        line-height: 30px;
        padding: 0;
        white-space: normal;
    }

    /* the group heading keeps ets's tighter 17.6px leading */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-col-list > li.bm-item:first-child > a {
        line-height: 17.6px;
        margin-bottom: 8px;
    }
}

@media (min-width: 992px) {
    /* The columns hold nested <ul>s (group -> its links). Earlier rules only reset the
       DIRECT children, so the deeper lists still inherited the horizontal bar's flex row
       and the links piled up sideways. Reset every list level inside the panel. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop ul,
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop li {
        display: block;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        flex: none;
        width: auto;
    }

    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop li > a {
        display: block;
        height: auto;
        min-height: 0;
        line-height: 30px;
        padding: 0;
        white-space: normal;
        font-size: 14px;
        font-weight: 300;
        color: #000;
    }

    /* group heading: first link in each column keeps ets's 16/500 */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-col-list > li:first-child > a {
        font-size: 16px;
        font-weight: 500;
        line-height: 17.6px;
        margin-bottom: 8px;
    }

    /* columns themselves must stay grid items at the measured 218px */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-sub-col { width: 218px; }
}

@media (min-width: 992px) {
    /* .bm-sub is itself a <ul>, so the blanket ul reset above turned the 218px column
       grid back into a block and stacked the groups vertically. Restore it. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop ul.bm-sub {
        display: grid;
        grid-template-columns: repeat(auto-fill, 218px);
        column-gap: 9px;
        row-gap: 0;
        align-items: start;
    }
}

@media (min-width: 992px) {
    /* The theme's .container is `display:grid; 642.5px 642.5px`, which split the panel
       into two halves. ets's equivalent (.submenu-wrap) was a plain block. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop > .container {
        display: block;
    }

    /* Imported ets blocks land as li.bm-item.is-html > div.bm-html-inline, and that div is
       flex row nowrap - it laid the links out sideways at ~33px each. Stack them. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-html-inline {
        display: block;
    }

    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-html-inline a {
        display: block;
        width: auto;
        line-height: 30px;
        white-space: normal;
        font-size: 14px;
        font-weight: 300;
        color: #000;
    }
}

@media (min-width: 992px) {
    /* The imported ets HTML wraps each link in its own block and separates them with <br>.
       Links are already display:block here, so the <br> doubles the row pitch (59px
       measured vs ets's 30px). Collapse the wrappers and drop the redundant breaks. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-html-inline p,
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-html-inline div,
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-html-inline span {
        margin: 0;
        padding: 0;
        line-height: 30px;
    }

    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-html-inline br {
        display: none;
    }
}

@media (min-width: 992px) {
    /* The theme's own .container rule kept winning and left 30px of side padding, so the
       block row was 1305px instead of ets's 1365px. At 218px + 9px gap that fits only 5
       blocks, and a 6th (e.g. Smykker's "Armbånd") wrapped onto a second row. ets fitted
       6 in one row: 6*218 + 5*9 = 1353 <= 1365. !important because the theme file is
       off-limits and .container outranks any class selector reachable from here. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop > .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   Final parity pass against production, all values read off dahlsgravering.dk
   at 1440px (theme custom.css line refs in comments):
     - no carets: ets hides .mm_arrow (display:none)
     - hover pill: custom.css:515  .mm_menus_li:hover .mm_menu_content_title
                   { background:#f2efe9; border-radius:16px }, title pad 5px 15px
     - weight: custom.css:5354 base 300; only .medium items are 500 (5372).
       Production has Bestsellers/Tilbud/Nyheder at 500, the other nine at 300.
       Forcing 500 on every item was wrong.
     - blocks: 220px wide, 230px pitch => 10px gap (was 218/9)
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. production hides the dropdown carets */
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a > .bm-caret,
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a svg.bm-caret,
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a > i,
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item.has-dropdown > a::after {
        display: none !important;
    }

    /* 2. hover pill sits on the label span, not the link */
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a > span {
        display: block;
        padding: 5px 15px;
        border-radius: 16px;
        background: transparent;
        transition: background .2s;
    }
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:hover > a > span {
        background: #f2efe9;
    }
    /* the link itself must not add padding on top of the span's */
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a {
        padding: 0;
    }

    /* 3. production default weight is 300, not 500 */
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a,
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a > span {
        font-weight: 300;
    }

    /* 4. dropdown blocks are 220px on a 230px pitch */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop ul.bm-sub {
        grid-template-columns: repeat(auto-fill, 220px);
        column-gap: 10px;
    }
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop .bm-sub-col {
        width: 220px;
    }
}

@media (min-width: 992px) {
    /* Production marks Bestsellers / Tilbud / Nyheder with ets's `medium` class, which
       custom.css:5372 renders at weight 500. bm_menu has no per-item weight flag in its
       schema (ps_bm_menu has no bold column), so match them by position instead.
       .bm-nav's first child is the (hidden) .bm-nav-header, hence nth-child(2..4). */
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-child(2) > a,
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-child(2) > a > span,
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-child(3) > a,
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-child(3) > a > span,
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-child(4) > a,
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-child(4) > a > span {
        font-weight: 500;
    }
}

@media (min-width: 992px) {
    /* 220px blocks + 10px gaps need 1370px for six columns but the row is 1365, so the
       sixth ("Armbånd" under Smykker) wrapped out of sight. Production gets away with a
       230px pitch because its panel is full-bleed (custom.css:5380 margin-left:-50vw).
       Keeping the 220px block width and using a 9px gap fits six columns in exactly
       1365px (6*220 + 5*9). Pitch is 229 vs production's 230 - 1px per column, 5px by
       the last one - which is a far smaller error than losing a whole column. */
    #bm-menu.bm-menu:not(.bm-vertical) .bm-drop ul.bm-sub {
        grid-template-columns: repeat(auto-fill, 220px);
        column-gap: 9px;
    }
}

/* ---------------------------------------------------------------------------
   Mobile parity with ets_megamenu (production).

   Production does NOT give the burger a row of its own: ets renders
   .ybc-menu-toggle inside .ets_mm_megamenu, whose box is ZERO pixels high, and
   themes/dahl/assets/css/custom.css:6108/6316/6950 pulls the button up into the
   logo row with position:absolute + bottom:72px.

   Measured on https://www.dahlsgravering.dk/ at 390x844 (2026-07-29):
     .ybc-menu-toggle   x=15  y=60  w=22 h=16   absolute, left:0, bottom:72px
     logo img           y=47        search-top  y=89        wrapper y=148 h=0
     .mm_menus_ul       fixed, w=280, h=100dvh, z-index 10000

   bm_menu's .bm-toggle is a static full-width flex button, so it added a 41px
   row under the search box and pushed the whole page down. Same trick here:
   zero-height wrapper, absolutely positioned button.

   The left offsets are taken straight off production: its .container has 15px
   padding at 390px (left:0 -> x=15) and none at 768px (left:16px -> x=16), and
   bm_menu is a direct child of #header with no container of its own.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .bm-menu:not(.bm-vertical) {
        display: block;
        position: relative;
        height: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .bm-menu:not(.bm-vertical) > .bm-toggle.toggle-open {
        display: block;
        position: absolute;
        /* measured on prod: x=16 at 768px, x=15 at 390px */
        left: 16px;
        bottom: 72px;
        width: 22px;
        height: 16px;
        margin: 0;
        padding: 0;
        border: 0;
        /* the theme's own hamburger, so the icon is identical to production
           rather than bm_menu's 25x25 inline SVG squashed to 22x16 */
        background: url(../img/hamburger.svg) no-repeat;
    }

    .bm-menu:not(.bm-vertical) > .bm-toggle.toggle-open svg {
        display: none;
    }

    /* ---- the drawer itself -------------------------------------------------
       Production (.mm_menus_ul) is a 280px beige panel holding white rounded
       cards, not bm_menu's flat white full-bleed list. Measured on prod:
         panel     w=280  padding=10px  background #f3ebdb  z-index 10000
         heading   li.mm_heading "Kategorier"  white  radius 8px  h=46
                   20px/600, margin-bottom 5px
         close     img x-cross.svg, absolute top:8px right:-1px
         items     white, h=57, link padding 10px 15px, 14px, colour #484848;
                   the first three (Bestsellers/Tilbud/Nyheder) are weight 500,
                   the rest weight 300
         cards     first three form one rounded card (5px gap after it), the
                   remaining items form a second card
         arrow     40x40 at the right, a 13px/1px black "+" built from two
                   pseudo-element rules; opened hides the vertical stroke, so
                   the plus becomes a minus (megamenu.css:2794)
       ----------------------------------------------------------------------- */
    .bm-menu:not(.bm-vertical) > .bm-nav {
        width: 280px;
        max-width: 280px;
        z-index: 10000;
        background: #f3ebdb;
        /* 280 - 10 - 25 = 245, the card width production renders (its cards sit at
           x=10 and end at 255, leaving a wider beige gutter on the right) */
        padding: 10px 25px 10px 10px;
    }

    /* base rule hides it (it was only ever used by a commented-out markup block) */
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-nav-header .bm-nav-heading {
        display: block;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        min-height: 46px;
        padding: 10px;
        margin: 0 0 5px;
        background: #fff;
        border: 0;
        border-radius: 8px;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-nav-header .bm-nav-heading {
        font-size: 20px;
        font-weight: 600;
        line-height: 26px;
        color: #000;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-nav-header .bm-toggle {
        width: auto;
        padding: 0;
        border: 0;
        background: none;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-nav-header .bm-toggle svg {
        display: block;
        width: 20px;
        height: 20px;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item {
        margin: 0;
        background: #fff;
        border: 0;
    }

    /* card 1: the three plain links. card 2: everything with a submenu.
       nth-of-type counts .bm-item only - .bm-nav-header is a div, not an li. */
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-of-type(1) {
        border-radius: 8px 8px 0 0;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-of-type(3) {
        border-radius: 0 0 8px 8px;
        margin-bottom: 5px;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-of-type(4) {
        border-radius: 8px 8px 0 0;
    }

    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:last-child {
        border-radius: 0 0 8px 8px;
    }

    /* #header prefix: theme.css has "#header a { color: #232323 }", and one id beats
       any number of classes, so an unprefixed selector loses the colour here. */
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > a {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        min-height: 57px;
        padding: 10px 15px;
        font-size: 14px;
        font-weight: 300;
        line-height: 26px;
        color: #484848;
    }

    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item:nth-of-type(-n+3) > a {
        font-weight: 500;
    }

    /* "+" instead of bm_menu's chevron */
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item.has-dropdown > a::after {
        content: '';
        position: absolute;
        /* top:5px, not 50%: the li grows to hold the expanded submenu, so a
           percentage put the sign halfway down the open list (prod: top:5px) */
        top: 5px;
        right: 0;
        width: 40px;
        height: 40px;
        margin: 0;
        scale: 1;
        transform: none;
        background:
            linear-gradient(#000, #000) center / 13px 1px no-repeat,
            linear-gradient(#000, #000) center / 1px 13px no-repeat;
    }

    /* opened: drop the vertical stroke so the plus reads as a minus */
    .bm-menu:not(.bm-vertical) > .bm-nav > .bm-item.has-dropdown.open > a::after {
        transform: none;
        background: linear-gradient(#000, #000) center / 13px 1px no-repeat;
    }

    /* ---- expanded submenu inside the drawer --------------------------------
       bm_menu's .bm-html-inline is display:flex, so in a 245px card the block's
       links laid out in one 632px row and gave the whole page a horizontal
       scrollbar. Production stacks them: the block keeps its <br>s and the links
       are inline with a 30px line-height.
       Measured on prod (Til hvem expanded, 390px):
         .mm_columns_ul   x=10 w=245  transparent  padding 0 30px
         first link       x=45  16px/500  #232323  line-height 17.6px
         rest             x=45  14px/300  #484848  line-height 30px
       ----------------------------------------------------------------------- */
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > .bm-drop {
        background: transparent;
    }

    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav > .bm-item > .bm-drop > .container {
        /* 35px left, not 30: prod's text sits at x=45 (10 card + 30 panel + 5 li) */
        padding: 0 30px 0 35px;
        max-width: none;
    }

    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav .bm-drop .bm-html-inline {
        display: block;
    }

    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav .bm-drop .bm-html-inline a {
        display: inline;
        font-size: 14px;
        font-weight: 300;
        line-height: 30px;
        color: #484848;
    }

    /* the bold heading is the column title bm_menu emits, exactly as on desktop -
       production's own heading is the first link of its html block, so styling both
       bold would show the title twice */
    #bm-menu.bm-menu:not(.bm-vertical) > .bm-nav .bm-drop .bm-col-list > li.bm-item:first-child > a {
        font-size: 16px;
        font-weight: 500;
        line-height: 17.6px;
        color: #232323;
        margin-bottom: 8px;
    }
}

@media (max-width: 767px) {
    .bm-menu:not(.bm-vertical) > .bm-toggle.toggle-open {
        left: 15px;
    }
}