/* Derived from original ROLLINK Desktop Mega Menu and hierarchy fix. */

    .site-header,
    .masthead,
    .header-main,
    .header-v2,
    .electro-header{
        overflow:visible !important;
    }

    .rollink-megabar{
        position:relative;
        z-index:9999999 !important;
        background:linear-gradient(180deg,#f4c616 0%,#e3b10a 100%);
        border-bottom:1px solid rgba(0,0,0,.08);
        box-shadow:0 4px 14px rgba(0,0,0,.07);
    }

    .rollink-megabar > .wrap{
        position:relative;
        max-width:1280px;
        margin:0 auto;
        padding:8px 12px;
    }

    /* HIDE HAMBURGER ON DESKTOP */
    @media (min-width:993px){
        .menu-toggle,
        .navbar-toggler,
        .hamburger,
        .site-header .menu-toggle,
        .site-header .navbar-toggler,
        .electro-navbar-toggler,
        .handheld-header .menu-toggle,
        button[aria-controls="site-navigation"]{
            display:none !important;
        }
    }

    /* ROOT MENU */
    .rollink-megabar > .wrap > ul{
        display:flex;
        flex-wrap:wrap !important;
        justify-content:center;
        align-items:center;
        gap:8px;
        list-style:none;
        margin:0;
        padding:0;
        overflow:visible !important;
        white-space:normal !important;
    }

    .rollink-megabar > .wrap > ul > li{
        position:static;
        flex:0 0 auto;
    }

    .rollink-megabar > .wrap > ul > li > a{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:36px;
        padding:8px 14px;
        border-radius:999px;
        background:rgba(255,255,255,.42);
        border:1px solid rgba(255,255,255,.45);
        color:#1f1f1f;
        text-decoration:none;
        text-transform:uppercase;
        font-size:12px;
        font-weight:800;
        letter-spacing:.02em;
        line-height:1;
        white-space:nowrap;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
        transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
    }

    .rollink-megabar > .wrap > ul > li > a:hover{
        background:rgba(255,255,255,.85);
        border-color:rgba(0,0,0,.08);
        color:#111;
        box-shadow:0 4px 12px rgba(0,0,0,.08);
        transform:translateY(-1px);
    }

    .rollink-megabar > .wrap > ul > li.open > a{
        background:#fff;
        border-color:rgba(0,0,0,.08);
        color:#111;
        box-shadow:0 8px 18px rgba(0,0,0,.10);
        transform:none;
    }

    /* PANEL WRAPPER */
    .rollink-megabar > .wrap > ul > li > .rollink-mega{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        display:none !important;
        padding-top:12px;
        z-index:99999999 !important;
        pointer-events:auto;
    }

    .rollink-megabar > .wrap > ul > li.open > .rollink-mega{
        display:block !important;
    }

    /* REAL CENTERED PANEL */
    .rollink-mega .inner{
        width:fit-content;
        max-width:min(1040px, calc(100vw - 32px));
        margin:0 auto;
        background:#fff;
        border:1px solid #ececec;
        border-radius:20px;
        box-shadow:0 24px 55px rgba(0,0,0,.14);
        padding:18px;
        overflow:hidden;
    }

    /* GRID */
    .rollink-mega .grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(220px,220px));
        gap:16px;
        align-items:start;
        justify-content:center;
    }

    /* COLUMN */
    .rollink-mega .col{
        width:220px;
        min-width:0;
        background:#fff;
        border:1px solid #ededed;
        border-radius:14px;
        padding:14px 14px 12px;
        box-shadow:0 1px 3px rgba(0,0,0,.03);
        transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .rollink-mega .col:hover{
        border-color:#e4d39a;
        box-shadow:0 10px 24px rgba(0,0,0,.08);
        transform:translateY(-2px);
    }

    .rollink-mega .col-title{
        margin:0 0 10px;
        padding-bottom:8px;
        border-bottom:1px solid #f0f0f0;
        font-size:13px;
        font-weight:800;
        line-height:1.35;
        text-transform:uppercase;
        letter-spacing:.02em;
        color:#151515;
        word-break:break-word;
        overflow-wrap:anywhere;
    }

    .rollink-mega .col-title a{
        color:inherit;
        text-decoration:none;
    }

    .rollink-mega .col-title a:hover{
        color:#a97f00;
    }

    .rollink-mega ul{
        list-style:none;
        margin:0;
        padding:0;
    }

    .rollink-mega li{
        margin:0;
        padding:0;
    }

    .rollink-mega li + li{
        margin-top:2px;
    }

    .rollink-mega li a{
        display:flex;
        align-items:flex-start;
        gap:8px;
        padding:7px 8px;
        border-radius:8px;
        color:#474747;
        text-decoration:none;
        font-size:13px;
        line-height:1.4;
        font-weight:500;
        white-space:normal;
        word-break:break-word;
        overflow-wrap:anywhere;
        transition:background .14s ease, color .14s ease, transform .14s ease;
    }

    .rollink-mega li a::before{
        content:"›";
        color:#d1a000;
        font-size:16px;
        line-height:1;
        font-weight:800;
        flex:0 0 auto;
        margin-top:1px;
    }

    .rollink-mega li a:hover{
        background:#faf7ea;
        color:#111;
        transform:translateX(2px);
    }

    .rollink-mega .col-more{
        margin-top:10px;
        padding-top:8px;
        border-top:1px solid #f0f0f0;
    }

    .rollink-mega .col-more a{
        display:inline-flex;
        align-items:center;
        gap:6px;
        font-size:12px;
        font-weight:700;
        line-height:1.2;
        color:#b48800;
        text-decoration:none;
    }

    .rollink-mega .col-more a::after{
        content:"→";
        font-size:12px;
        line-height:1;
    }

    .rollink-mega .col-more a:hover{
        color:#111;
    }

    @media (max-width:1200px){
        .rollink-mega .grid{
            grid-template-columns:repeat(auto-fit,minmax(205px,205px));
        }
        .rollink-mega .col{
            width:205px;
        }
    }

    /* MOBILE */
    @media (max-width:992px){
        .rollink-megabar > .wrap > ul{
            flex-wrap:nowrap !important;
            overflow-x:auto !important;
            white-space:nowrap !important;
            justify-content:flex-start !important;
            scrollbar-width:none;
        }

        .rollink-megabar > .wrap > ul::-webkit-scrollbar{
            display:none;
        }

        .rollink-megabar > .wrap > ul > li > .rollink-mega{
            position:static;
            left:auto;
            right:auto;
            top:auto;
            padding-top:8px;
        }

        .rollink-mega .inner{
            width:auto;
            max-width:none;
            padding:14px;
            border-radius:14px;
            box-shadow:0 10px 24px rgba(0,0,0,.10);
        }

        .rollink-mega .grid{
            grid-template-columns:1fr 1fr;
            gap:12px;
        }

        .rollink-mega .col{
            width:auto;
        }

        .rollink-megabar > .wrap > ul > li > a{
            font-size:11px;
            padding:8px 12px;
            min-height:34px;
        }
    }

    @media (max-width:640px){
        .rollink-mega .grid{
            grid-template-columns:1fr;
        }
    }

        .header-v2 .departments-menu,
        .site-header .departments-menu,
        #departments-menu,
        #departments-menu-dropdown,
        .electro-vertical-menu,
        .vertical-menu,
        .navbar-vertical{
            display:none !important;
        }

/* Original ROLLINK navy/masonry fix — exact visual overrides. */
.rollink-mega .grid,
.rollink-megabar .grid,
.rollink-mega .inner .grid {
    display: block !important;
    column-count: 4 !important;
    column-gap: 20px !important;
    width: 100% !important;
    height: auto !important;
}
@media (max-width: 1200px) {
    .rollink-mega .grid, .rollink-megabar .grid, .rollink-mega .inner .grid {
        column-count: 3 !important;
    }
}
.rollink-mega .col,
.rollink-megabar .col {
    display: inline-block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 20px !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}
.rollink-mega .col-title,
.rollink-mega .col-title a {
    color: #003366 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    text-decoration: none !important;
    transition: color 0.16s ease !important;
}
.rollink-mega .col-title a:hover { color: #e3b10a !important; }
.rollink-mega li a,
.rollink-mega ul li a,
.rollink-mega .col ul li a {
    color: #555555 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}
.rollink-mega li a:hover,
.rollink-mega ul li a:hover {
    color: #000000 !important;
    background: #faf7ea !important;
}
.rollink-mega .col-more,
.rollink-mega .col-more a,
.rollink-mega a[href*="view_all"] {
    color: #111111 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    display: inline-block !important;
    margin-top: 4px !important;
}
.rollink-mega .col-more a:hover { color: #b48800 !important; }
.rollink-mega .col-more a::after,
.rollink-mega li a::before {
    display: none !important;
    content: "" !important;
}

/* 1.1.1 COMPACT HOTFIX — restore v1.0 geometry, guard against theme overrides.
   No fixed-height / overflow-y scrolling panel. Four narrow masonry columns.
   This file intentionally has high-specificity selectors so Electro / theme
   plugin selectors cannot expand the panel to the full browser viewport. */
@media (min-width: 993px) {
  .rollink-megabar > .wrap > ul > li > .rollink-mega {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner {
    box-sizing: border-box !important;
    display: block !important;
    width: min(1040px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: min(1040px, calc(100vw - 32px)) !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px 15px !important;
  }
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner > .grid {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    column-count: 4 !important;
    column-gap: 12px !important;
  }
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner > .grid > .col {
    box-sizing: border-box !important;
    display: inline-block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 10px 11px 9px !important;
    break-inside: avoid !important;
  }
  .rollink-mega .col-title { margin-bottom: 6px; padding-bottom: 6px; }
  .rollink-mega li a { padding-top: 4px; padding-bottom: 4px; }
  .rollink-mega .col-more { margin-top: 5px; padding-top: 5px; }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner {
    width: min(900px, calc(100vw - 32px)) !important;
    max-width: min(900px, calc(100vw - 32px)) !important;
  }
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner > .grid {
    column-count: 3 !important;
  }
}
@media (max-width: 992px) {
  .rollink-megabar { display: none !important; }
}
.rollink-megabar a:focus-visible { outline: 3px solid #003366 !important; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .rollink-megabar a, .rollink-mega .col { transition: none !important; transform: none !important; }
}

/* ================================================================
   ROLLINK Navigation 1.2 — premium-light desktop (no images/fonts).
   Maintains original centered 1040px panel, compact four-column
   masonry, click-to-open behavior and supplier category visibility.
   ================================================================ */
@media (min-width: 993px) {
  .rollink-megabar {
    background: linear-gradient(90deg, #f7cd1a 0%, #ffdc39 49%, #eeb909 100%);
    box-shadow: 0 3px 9px rgba(8, 31, 55, .07);
  }
  .rollink-megabar > .wrap { padding-top: 7px; padding-bottom: 7px; }
  .rollink-megabar > .wrap > ul { gap: 6px; }
  .rollink-megabar > .wrap > ul > li > a {
    border: 1px solid rgba(29, 51, 62, .15);
    background: rgba(255,255,255,.47);
    color: #172d45;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
  }
  .rollink-megabar > .wrap > ul > li > a:hover,
  .rollink-megabar > .wrap > ul > li > a:focus-visible { background: #fff9e3; }
  .rollink-megabar > .wrap > ul > li.open > a {
    color: #fff;
    background: #06365e;
    border-color: #06365e;
    box-shadow: 0 3px 8px rgba(3,32,57,.16);
  }
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner {
    padding: 12px 14px 13px !important;
    border: 1px solid #e7ebf0;
    border-top: 3px solid #ffcd17;
    border-radius: 17px;
    box-shadow: 0 18px 42px rgba(5,30,50,.15), 0 2px 7px rgba(5,30,50,.035);
    background: #fff;
  }
  /* Simple 37px discovery row instead of large promotional imagery. */
  .rollink-mega .rlx-panel-heading {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 0 2px 8px;
    margin: 0 1px 10px; border-bottom: 1px solid #ecf0f3;
    min-height: 34px;
  }
  .rollink-mega .rlx-panel-heading-copy {
    display:flex; align-items:baseline; gap: 10px; min-width: 0;
  }
  .rollink-mega .rlx-panel-eyebrow {
    color: #987520; text-transform: uppercase; font-size: 10px;
    font-weight: 800; letter-spacing: .11em; flex-shrink: 0;
  }
  .rollink-mega .rlx-panel-root {
    color: #06365e; font-weight: 850; font-size: 14px;
    line-height: 1.3; letter-spacing: .015em;
  }
  .rollink-mega .rlx-shop-root {
    display: inline-flex; align-items:center; gap: 9px;
    border: 1px solid #e9c45c;
    background: #fff8e4; color: #062f52 !important;
    padding: 7px 11px; border-radius: 999px;
    text-decoration: none !important; white-space: nowrap;
    line-height: 1.1; font-size: 11px; font-weight: 800;
    flex-shrink: 0;
  }
  .rollink-mega .rlx-shop-root:hover,
  .rollink-mega .rlx-shop-root:focus-visible {
    border-color: #cfa20d; background: #ffe998;
    color: #082c4a !important;
  }
  .rollink-mega .rlx-visit-arrow { font-size: 14px; line-height:1; }
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner > .grid { column-gap: 12px !important; }
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner > .grid > .col {
    padding: 10px 11px 9px !important; margin-bottom: 10px !important;
    border: 1px solid #e5eaf0; border-left: 3px solid #f4cb2c;
    background: linear-gradient(115deg,#fffefa, #fff 30%);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(5,35,56,.035);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
  }
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner > .grid > .col:hover,
  .rollink-megabar > .wrap > ul > li > .rollink-mega > .inner > .grid > .col:focus-within {
    border-color: #e2c56c; border-left-color: #b88700;
    background: #fffdf6;
    box-shadow: 0 3px 11px rgba(5,35,56,.08);
    transform: none;
  }
  .rollink-mega .col-title {
    margin-bottom: 5px !important; padding-bottom: 6px !important;
    border-color: #e7edf3; line-height: 1.35;
  }
  .rollink-mega .col-title a {
    display: inline-block; padding: 2px 0; color: #073c67 !important;
  }
  .rollink-mega .col-title a:hover,
  .rollink-mega .col-title a:focus-visible {
    color: #9b7000 !important; text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
  }
  .rollink-mega .col ul li a {
    color: #414e5d !important;
    border-radius: 7px; padding: 5px 6px;
    transition: background .13s ease, color .13s ease;
  }
  .rollink-mega .col ul li a:hover,
  .rollink-mega .col ul li a:focus-visible {
    color: #092b48 !important; background: #fff2c5 !important;
    transform: none !important;
  }
  .rollink-mega .col-more { margin-top: 5px !important; padding-top: 6px !important; }
  .rollink-mega .col-more a {
    color: #0a3a60 !important; text-decoration: none !important;
    padding: 3px 0; font-weight: 800 !important;
  }
  .rollink-mega .col-more a:hover,
  .rollink-mega .col-more a:focus-visible {
    color: #9a7400 !important; text-decoration: underline !important;
    text-underline-offset: 3px;
  }
  .rollink-mega .col-more a::after {
    display: inline-block !important; content: " ↗" !important;
    font-size: 12px; padding-left: 4px;
  }
}
@media (min-width: 993px) and (max-width: 1199px) {
  .rollink-mega .rlx-panel-eyebrow { display: none; }
  .rollink-mega .rlx-shop-root { font-size: 10px; padding: 7px 9px; }
}
@media (max-width: 992px) {
  /* Desktop navigation remains hidden: the native Electro hamburger
     triggers our optimized mobile drawer instead. */
  .rollink-megabar { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rollink-mega .col, .rollink-megabar > .wrap > ul > li > a { transition: none !important; }
}