@media only screen and (min-width: 769px) {
    :root {
        --mayflower-blue: #30a0d0;
    }

    /* Mobile-only My Account / Welcome must never appear in the desktop megamenu row */
    .page-header .mayflower-my-account,
    .page-header #rw-menutop > li.mayflower-my-account,
    .nav-sections .mayflower-my-account,
    #rw-menutop > li.mayflower-my-account,
    .page-header .mayflower-mobile-welcome,
    #rw-menutop > li.mayflower-mobile-welcome {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        pointer-events: none !important;
    }

    /* MF-178: logo moved to purple bar — compact white nav, menu centered in the bar */
    .page-header .header.content {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        min-height: 0 !important;
        /* Equal vertical padding for true optical center of uppercase nav */
        padding: 12px 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Magento clearfix pseudos become flex items and skew vertical centering */
    .page-header .header.content::before,
    .page-header .header.content::after {
        display: none !important;
        content: none !important;
    }

    .page-header .header.content .logo {
        display: none !important;
    }

    /*
     * Magento keeps Account/Settings section panes in the DOM on desktop.
     * If those panes stay in the flex row (esp. with width:100%), they steal
     * space and shove the visible menu left. Hide them on desktop.
     */
    .page-header .header.content .sections.nav-sections .nav-sections-item-title,
    .page-header .header.content .sections.nav-sections .nav-sections-item-content:not([id="store.menu"]),
    .page-header .header.content .sections.nav-sections .nav-sections-item-content[id="store.links"],
    .page-header .header.content .sections.nav-sections .nav-sections-item-content[id="store.settings"] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
    }

    .page-header .header.content .sections.nav-sections {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 0 !important;
    }

    .page-header .header.content .sections.nav-sections .nav-sections-items,
    .page-header .header.content .sections.nav-sections .nav-sections-item-content[id="store.menu"],
    .page-header .header.content .sections.nav-sections .nav-sections-item-content[id="store.menu"] > .page-main {
        margin: 0 auto !important;
        padding: 0 !important;
        min-height: 0 !important;
        float: none !important;
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .page-header .header.content .sections.nav-sections .navigation,
    .page-header .header.content .rootmenu,
    .page-header .header.content .rootmenu > .rootmenu-list,
    .page-header .header.content #rw-menutop {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        min-height: 0 !important;
        text-align: center !important;
    }

    /* Keep top menu row like prior state (no filled blue strip). */
    .page-header .header.content .topmenu_main,
    .page-header .header.content .rootmenu,
    .page-header .header.content .rootmenu > .rootmenu-list,
    .page-header .header.content #rw-menutop {
        background: transparent !important;
    }

    .page-header .header.content .sections.nav-sections .navigation > ul {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-header .header.content .sections.nav-sections .navigation > ul > li > a {
        white-space: nowrap;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Real desktop rootways menu — shrink-wrap and center as a group. */
    .page-header .header.content .rootmenu > .rootmenu-list,
    .page-header .header.content .rootmenu .rootmenu-list,
    .page-header .header.content #rw-menutop.rootmenu-list,
    .page-header .header.content #rw-menutop {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /*
     * Admin megamenu custom CSS uses display:table/table-cell on the top row.
     * That breaks absolute dropdown positioning and leaves a dead hover gap.
     */
    .page-header .header.content .rootmenu > .rootmenu-list > li,
    .page-header .header.content .rootmenu .rootmenu-list > li {
        display: block !important;
        float: none !important;
        clear: none !important;
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 0 !important;
        border-right: 1px solid var(--mayflower-blue) !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li:last-child {
        border-right: 0 !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li::after,
    .page-header .header.content .rootmenu > .rootmenu-list > li::before {
        content: none !important;
        display: none !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li > a {
        padding: 0 20px !important;
        line-height: 1.2 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        letter-spacing: 0.005em !important;
        white-space: nowrap !important;
        background: transparent !important;
        color: #4a4a4a !important;
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li > a em,
    .page-header .header.content .rootmenu > .rootmenu-list > li > a .main-category-name,
    .page-header .header.content .rootmenu > .rootmenu-list > li > a .main-category-name em {
        font-size: inherit !important;
        line-height: inherit !important;
        font-weight: inherit !important;
    }

    /* Full-width mega menu panel (Burton-style), aligned to the viewport. */
    .page-header {
        position: relative;
        z-index: 200;
    }

    .page-header .rootmenu {
        position: static;
    }

    /* Full-width panels anchor to .page-header bottom (li stays static). */
    .page-header .rootmenu > .rootmenu-list > li {
        position: static;
    }

    .page-header .rootmenu > .rootmenu-list > li.hover {
        z-index: 360;
    }

    /* Invisible bridge across the header gap so the cursor never leaves the <li>. */
    .page-header .rootmenu > .rootmenu-list > li.hover::after {
        content: '' !important;
        display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 80px;
        z-index: 359;
        pointer-events: auto;
        background: transparent;
    }

    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu,
    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.linksmenu,
    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.clearfix.linksmenu,
    .page-header .rootmenu > .rootmenu-list > li > .halfmenu,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel {
        top: 100% !important;
        left: 50% !important;
        right: auto !important;
        /* Centered panel — page background shows on both sides. */
        width: min(1320px, calc(100vw - 3rem)) !important;
        max-width: min(1320px, calc(100vw - 3rem)) !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        transform: translate(-50%, 0) !important;
        padding: 1.75rem 2rem 2rem !important;
        /* Burton-style thin light border on all sides. */
        border: 1px solid #dedede !important;
        border-top: 1px solid #dedede !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
        box-sizing: border-box;
        background: #fff !important;
        z-index: 350 !important;
        max-height: calc(100vh - 110px);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        /*
         * Burton-style megamenu fade (desktop only).
         * Opacity/visibility only — do not transition margin/padding bridge.
         * Hide delay keeps the panel briefly so moving between top categories crossfades.
         */
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
        transition-delay: 0.5s !important;
        /* Rootways sets .linksmenu to 13px — reset panel base. */
        font-size: 14px !important;
    }

    /* Closed panels must not capture clicks (full-width panel sits over the page). */
    .page-header .rootmenu > .rootmenu-list > li:not(.hover) > .megamenu,
    .page-header .rootmenu > .rootmenu-list > li:not(.hover) > .halfmenu,
    .page-header .rootmenu > .rootmenu-list > li:not(.hover) > .mayflower-megamenu-panel {
        pointer-events: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
        transition-delay: 0.5s !important;
    }

    .page-header .rootmenu > .rootmenu-list > li.hover > .megamenu,
    .page-header .rootmenu > .rootmenu-list > li.hover > .halfmenu,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel {
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translate(-50%, 0) !important;
        /* Pull panel up into the header gap so the cursor stays on a hover target. */
        margin-top: -80px !important;
        padding-top: calc(2rem + 80px) !important;
        /* Match Burton: brief delay then fade in */
        transition: opacity 0.3s ease-in, visibility 0s linear 0s !important;
        transition-delay: 0.2s !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu,
        .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.linksmenu,
        .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.clearfix.linksmenu,
        .page-header .rootmenu > .rootmenu-list > li > .halfmenu,
        .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel,
        .page-header .rootmenu > .rootmenu-list > li:not(.hover) > .megamenu,
        .page-header .rootmenu > .rootmenu-list > li:not(.hover) > .halfmenu,
        .page-header .rootmenu > .rootmenu-list > li:not(.hover) > .mayflower-megamenu-panel,
        .page-header .rootmenu > .rootmenu-list > li.hover > .megamenu,
        .page-header .rootmenu > .rootmenu-list > li.hover > .halfmenu,
        .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel {
            transition: none !important;
            transition-delay: 0s !important;
        }
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .root-col-1,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .root-col-1.clearfix {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        float: none !important;
        padding: 0 !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns-wrap,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel [class*="root-sub-col-"].mayflower-megamenu-columns-wrap {
        width: 100% !important;
        float: none !important;
    }

    /* Honor admin "Sub-category Columns" — flex row of column lists. */
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none;
        margin: 0;
        gap: 0;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup {
        display: block !important;
        flex: 1 1 0 !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 1.5rem !important;
        box-sizing: border-box;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup:first-child,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup:first-child {
        padding-left: 0 !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup:last-child,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup:last-child {
        padding-right: 0 !important;
    }

    /* Burton-style super-thin vertical dividers between columns. */
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup + .level2-popup,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup + ul {
        border-left: 1px solid #e6e6e6 !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .linksmenu ul > li,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .level2-popup > li {
        clear: none !important;
        float: none !important;
        width: 100% !important;
    }

    .rootmenu > .rootmenu-list .fullmenu ul > li > a,
    .rootmenu > .rootmenu-list .halfmenu ul > li > a {
        display: block !important;
        line-height: 20px !important;
        white-space: normal !important;
        overflow-wrap: break-word;
        min-width: 0 !important;
    }

    /* Parent category headings (Burton-style). */
    .rootmenu .mayflower-megamenu-group {
        clear: none !important;
        margin-bottom: 1.15rem !important;
        padding: 0 !important;
    }

    .rootmenu .mayflower-megamenu-parent {
        margin: 0 0 0.45rem;
    }

    .rootmenu .mayflower-megamenu-parent-link {
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    .rootmenu .mayflower-megamenu-parent-link:hover,
    .rootmenu .mayflower-megamenu-parent-link:focus {
        background: transparent !important;
        text-decoration: none !important;
    }

    .rootmenu .mayflower-megamenu-parent-title,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-parent-title,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-parent-link .level2-name.sub-cat-name {
        display: block;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: var(--mayflower-blue) !important;
        text-transform: none;
        letter-spacing: 0.01em;
        text-decoration: none !important;
    }

    .rootmenu .mayflower-megamenu-parent-link:hover .mayflower-megamenu-parent-title {
        color: var(--mayflower-blue);
        text-decoration: none !important;
    }

    /*
     * Rootways "underline on hover" uses `.level2-popup > li:hover .sub-cat-name`.
     * Hovering one child keeps the parent li:hover, so every sibling gets underlined.
     * Scope underlines to the single hovered child row only.
     */
    .rootmenu > .rootmenu-list .mayflower-megamenu-panel .level2-popup > li.mayflower-megamenu-group:hover .mayflower-megamenu-children .sub-cat-name,
    .rootmenu > .rootmenu-list .mayflower-megamenu-panel .level2-popup > li.mayflower-megamenu-group:hover .mayflower-megamenu-children a,
    .rootmenu > .rootmenu-list .mayflower-megamenu-panel .level2-popup > li.mayflower-megamenu-group:hover .mayflower-megamenu-children .mayflower-megamenu-child-link {
        text-decoration: none !important;
    }

    .rootmenu .mayflower-megamenu-group:hover .mayflower-megamenu-parent-title {
        text-decoration: none !important;
    }

    /*
     * Subcategories under each parent — always visible when the panel is open
     * (not hover flyouts). Only apply while li.hover so visibility:visible on
     * children cannot escape a closed parent and block the page.
     */
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel .mayflower-megamenu-children,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel ul.level3-popup,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel.linksmenu ul .level3-popup,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel.linksmenu ul > li .level3-popup,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel.linksmenu ul > li:hover .level3-popup {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .rootmenu .mayflower-megamenu-children {
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    .rootmenu .mayflower-megamenu-child-item {
        margin: 0 !important;
        padding: 0 !important;
    }

    .rootmenu .mayflower-megamenu-child-link,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-child-link,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children .mayflower-megamenu-child-name,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children .level3-name.sub-cat-name,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children a .sub-cat-name {
        display: block !important;
        padding: 0.3rem 0 0.3rem 1rem !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        color: #4a4a4a !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    /* Rootways .linksmenu { font-size: 13px } applies to all dropdown anchors. */
    .rootmenu > .rootmenu-list .mayflower-megamenu-panel.linksmenu ul > li > a,
    .rootmenu > .rootmenu-list .mayflower-megamenu-panel.fullmenu ul > li > a {
        font-size: inherit !important;
    }

    /* Underline only the child row under the cursor (must follow base none rules above). */
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children > li:hover > a,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children > li:hover > a:hover,
    .rootmenu .mayflower-megamenu-child-item:hover > .mayflower-megamenu-child-link,
    .rootmenu .mayflower-megamenu-child-item:hover > .mayflower-megamenu-child-link:hover,
    .rootmenu .mayflower-megamenu-child-link:hover,
    .rootmenu .mayflower-megamenu-child-link:focus,
    .rootmenu .mayflower-megamenu-child-item:focus-within > .mayflower-megamenu-child-link,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children > li:hover .mayflower-megamenu-child-name,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children > li:hover .level3-name.sub-cat-name,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children > li:hover .sub-cat-name,
    .rootmenu .mayflower-megamenu-child-link:hover .mayflower-megamenu-child-name,
    .rootmenu .mayflower-megamenu-child-link:hover .sub-cat-name {
        color: var(--mayflower-blue) !important;
        text-decoration: underline !important;
        background: transparent !important;
    }

    .rootmenu .mayflower-megamenu-group:hover .mayflower-megamenu-children > li:not(:hover) > a,
    .rootmenu .mayflower-megamenu-group:hover .mayflower-megamenu-children > li:not(:hover) .mayflower-megamenu-child-name,
    .rootmenu .mayflower-megamenu-group:hover .mayflower-megamenu-children > li:not(:hover) .sub-cat-name {
        text-decoration: none !important;
    }

    .rootmenu .mayflower-megamenu-group .cat_img_as_icon,
    .rootmenu .mayflower-megamenu-group > a > .cat_img_as_icon {
        display: none !important;
    }

    /* Custom links injected at end of All Products (e.g. What's New). */
    .rootmenu .mayflower-megamenu-custom-link .cat-arrow,
    .rootmenu .mayflower-megamenu-custom-link > a > .cat-arrow {
        display: none !important;
    }

    .rootmenu .mayflower-megamenu-custom-link .mayflower-megamenu-parent-link {
        padding: 0 !important;
    }

    /* Keep top menu hover background neutral (avoid blue highlight). */
    .rootmenu .rootmenu-list > li:hover > a,
    .rootmenu .rootmenu-list > li > a:hover {
        background: transparent !important;
        color: #4a4a4a !important;
    }

    /* Also neutralize active/current states after category click. */
    .rootmenu .rootmenu-list > li.active > a,
    .rootmenu .rootmenu-list > li.current > a,
    .rootmenu .rootmenu-list > li > a.active,
    .rootmenu .rootmenu-list > li > a.current,
    .rootmenu .rootmenu-list > li > a.current-cat,
    .rootmenu .rootmenu-list > li > a.current-category {
        background: transparent !important;
        color: #4a4a4a !important;
    }

    .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.linksmenu .level2-popup > li > a .cat-arrow,
    .rootmenu > .rootmenu-list > li > .halfmenu .level2-popup > li > a .cat-arrow,
    .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.linksmenu .mayflower-megamenu-group > .rootmenu-click {
        display: none !important;
    }

    /* Other menu types: suppress deep flyouts when present. */
    .rootmenu > .rootmenu-list > li .halfwidth-popup-sub-sub {
        display: none !important;
    }

    /*
     * Attribute-filter panels have no subcategory strip — just Filter By.
     */
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel.mayflower-attr-filter-panel .mayflower-megamenu-columns-wrap {
        width: 100% !important;
        float: none !important;
        max-width: none;
        margin: 0;
    }

    /* ---- Filter By Attributes (category mega menus) ---- */
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel .mayflower-attr-filter-section,
    .page-header .rootmenu > .rootmenu-list > li.hover > .megamenu .mayflower-attr-filter-section,
    .page-header .rootmenu > .rootmenu-list > li.hover > .halfmenu .mayflower-attr-filter-section {
        display: block !important;
        clear: both;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border-top: none;
        box-sizing: border-box;
        text-align: left !important;
    }

    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel .mayflower-attr-filter-section--standalone {
        padding: 0.25rem 0 0;
    }

    .rootmenu .mayflower-attr-filter-heading {
        display: block !important;
        margin: 0 0 0.75rem;
        padding: 0;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #9a9a9a !important;
        line-height: 1.2;
        box-sizing: border-box;
    }

    /*
     * Shift "Filter By" one column to the right so it sits over By Brand.
     * Four equal columns → first column is 25% wide.
     */
    .page-header .rootmenu .mayflower-attr-filter-section--has-categories > .mayflower-attr-filter-heading > .mayflower-attr-filter-heading-label {
        display: block !important;
        width: 75% !important;
        max-width: 75% !important;
        margin: 0 0 0 25% !important;
        padding-left: 1.35rem !important;
        border-left: 1px solid #e6e6e6 !important;
        box-sizing: border-box !important;
    }

    .rootmenu .mayflower-attr-filter-section:not(.mayflower-attr-filter-section--has-categories) .mayflower-attr-filter-heading-label {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Four equal columns — heading is outside this grid. */
    .rootmenu .mayflower-attr-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        align-items: start;
        width: 100%;
    }

    .rootmenu .mayflower-attr-filter-section:not(.mayflower-attr-filter-section--has-categories) .mayflower-attr-filter-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .rootmenu .mayflower-attr-group {
        min-width: 0;
        margin: 0 !important;
        padding: 0 1.35rem !important;
        float: none !important;
        width: auto !important;
        clear: none !important;
        border-left: 1px solid #e6e6e6;
        box-sizing: border-box;
    }

    .rootmenu .mayflower-attr-filter-grid > .mayflower-attr-group:first-child,
    .rootmenu .mayflower-attr-filter-grid > .mayflower-attr-group--categories {
        border-left: none;
        padding-left: 0 !important;
    }

    .rootmenu .mayflower-attr-filter-grid > .mayflower-attr-group:last-child {
        padding-right: 0 !important;
    }

    .rootmenu .mayflower-attr-group-heading {
        margin: 0 0 0.65rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid #f0f0f0;
    }

    .rootmenu .mayflower-attr-group-heading .mayflower-megamenu-parent-title {
        color: var(--mayflower-blue) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    /* Keep option lists visible (not Rootways flyouts). */
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel .mayflower-attr-filter-section .mayflower-megamenu-children,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel .mayflower-attr-filter-section ul.level3-popup,
    .page-header .rootmenu > .rootmenu-list > li.hover > .megamenu .mayflower-attr-filter-section .mayflower-megamenu-children,
    .page-header .rootmenu > .rootmenu-list > li.hover > .megamenu .mayflower-attr-filter-section ul.level3-popup,
    .page-header .rootmenu > .rootmenu-list > li.hover > .halfmenu .mayflower-attr-filter-section .mayflower-megamenu-children,
    .page-header .rootmenu > .rootmenu-list > li.hover > .halfmenu .mayflower-attr-filter-section ul.level3-popup {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        list-style: none !important;
    }

    .rootmenu .mayflower-attr-group--dense .mayflower-attr-group-options {
        column-count: 2;
        column-gap: 1.25rem;
    }

    .rootmenu .mayflower-attr-group-options > li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        width: auto !important;
        list-style: none !important;
    }

    .rootmenu .mayflower-attr-group-options .mayflower-megamenu-child-link,
    .rootmenu .mayflower-attr-group-options .mayflower-megamenu-child-name {
        padding: 0.28rem 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #4a4a4a !important;
    }

    .rootmenu .mayflower-attr-group-options .mayflower-megamenu-child-link:hover,
    .rootmenu .mayflower-attr-group-options .mayflower-megamenu-child-link:hover .mayflower-megamenu-child-name {
        color: var(--mayflower-blue) !important;
        text-decoration: underline !important;
    }

    .rootmenu .mayflower-attr-see-more .mayflower-megamenu-child-name {
        font-weight: 600 !important;
        color: var(--mayflower-blue) !important;
    }

    .rootmenu .mayflower-attr-see-more .mayflower-megamenu-child-link {
        margin-top: 0.15rem;
    }

    @media only screen and (max-width: 1200px) {
        .rootmenu .mayflower-attr-filter-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .page-header .rootmenu .mayflower-attr-filter-section--has-categories > .mayflower-attr-filter-heading > .mayflower-attr-filter-heading-label {
            width: auto !important;
            max-width: none !important;
            margin-left: 0 !important;
            padding-left: 0 !important;
            border-left: none !important;
        }

        .rootmenu .mayflower-attr-group {
            border-left: none;
            padding: 0 1rem 0.5rem 0 !important;
        }

        .rootmenu .mayflower-attr-filter-grid > .mayflower-attr-group:nth-child(even) {
            padding-left: 1rem !important;
            border-left: 1px solid #e6e6e6;
        }

        .rootmenu .mayflower-attr-group--dense .mayflower-attr-group-options {
            column-count: 2;
        }
    }

}

/* Always hide default bullets (covers FOUC if override media query is delayed). */
.page-header .rootmenu-list,
.page-header .rootmenu-list > li,
.page-header #rw-menutop,
.page-header #rw-menutop > li {
    list-style: none !important;
    list-style-type: none !important;
}
.page-header .rootmenu-list > li::marker,
.page-header #rw-menutop > li::marker {
    content: none !important;
}

/*
 * Mobile hamburger drawer: load LAST (after menu_default.css) so Magento tabs
 * + Rootways table-cell / white link colors cannot blank the Menu panel.
 */
@media only screen and (max-width: 767.98px) {
    /*
     * Kill Magento Luma slide-drawer width (calc(100% - 54px)).
     * Must stay identical for nav-open AND closing (nav-open removed first),
     * otherwise the panel jumps wider and category arrows shift right.
     */
    html .nav-sections,
    html .sections.nav-sections,
    html.nav-before-open .nav-sections,
    html.nav-before-open .sections.nav-sections,
    html.nav-open .nav-sections,
    html.nav-open .sections.nav-sections {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-gutter: stable;
        box-sizing: border-box !important;
        transition: height 0.46s ease-in-out, visibility 0.46s ease-in-out !important;
        background-color: #fff !important;
    }

    html .sections.nav-sections {
        height: 0 !important;
        visibility: hidden;
        pointer-events: none;
        z-index: 25;
    }

    html.nav-open .sections.nav-sections {
        height: calc(100vh - 56px) !important;
        visibility: visible;
        pointer-events: auto;
        /* Above fixed purple panel (z-index 30) so Magento's dim overlay can't block taps */
        z-index: 40 !important;
    }

    /*
     * Magento Luma paints .nav-toggle:after as a full-screen dimmer for the
     * partial-width slide drawer. Our menu is full-bleed under the header, so
     * that overlay lands on top of the links and blocks navigation.
     */
    html.nav-open .action.nav-toggle:after,
    html.nav-open .nav-toggle:after,
    .page-header .panel.wrapper .action.nav-toggle:after {
        display: none !important;
        content: none !important;
        background: none !important;
        pointer-events: none !important;
    }

    html.nav-open .page-wrapper,
    html.nav-before-open .page-wrapper {
        left: 0 !important;
        transition: none !important;
    }

    .nav-sections-item-title:has(> a[href="#store.links"]),
    .nav-sections-item-title:has(> a[href="#store.settings"]),
    .nav-sections-item-content[id="store.links"],
    .nav-sections-item-content[id="store.settings"] {
        display: none !important;
    }

    .nav-sections-item-title:has(> a[href="#store.menu"]) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        border: 0 !important;
        float: none !important;
    }

    .nav-sections-item-content[id="store.menu"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        float: none !important;
        margin-top: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .nav-sections-item-content[id="store.menu"] > .page-main,
    .nav-sections-item-content[id="store.menu"] .rootmenu,
    .nav-sections-item-content[id="store.menu"] .rootmenu-list,
    .nav-sections-item-content[id="store.menu"] #rw-menutop {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        float: none !important;
        height: auto !important;
    }

    .nav-sections .rootmenu-list > li,
    .nav-sections .rootmenu-list.mobile-sub > li,
    .nav-sections #rw-menutop > li {
        display: block !important;
        float: none !important;
        clear: none !important;
        width: 100% !important;
        height: auto !important;
        position: relative;
    }

    .nav-sections .rootmenu-list > li > a,
    .nav-sections .rootmenu-list.mobile-sub > li > a,
    .nav-sections #rw-menutop > li > a,
    .nav-sections #rw-menutop > li.custom-menus > a,
    .nav-sections #rw-menutop > li.mayflower-my-account > a,
    .nav-sections .mayflower-my-account-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #222 !important;
        background: #fff !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        padding: 14px 40px 14px 16px !important;
        border: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        text-decoration: none !important;
        transition: background-color 0.15s ease;
    }

    .nav-sections .rootmenu-list > li > a:hover,
    .nav-sections .rootmenu-list > li > a:active,
    .nav-sections #rw-menutop > li > a:hover,
    .nav-sections #rw-menutop > li > a:active,
    .nav-sections .mayflower-my-account-toggle:hover,
    .nav-sections .mayflower-my-account-toggle:active {
        background: #f5f6f8 !important;
    }

    /* Hide welcome shell on desktop megamenu (KO lives in #rw-menutop markup) */
    .page-header .mayflower-mobile-welcome {
        display: none !important;
    }

    .nav-sections .mayflower-mobile-welcome {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .nav-sections .mayflower-mobile-welcome-inner {
        display: block !important;
        padding: 14px 16px !important;
        background: #f0f2f5 !important;
        border-bottom: 1px solid #e5e7eb !important;
        color: #333 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }

    .nav-sections .mayflower-mobile-welcome span,
    .nav-sections .mayflower-mobile-welcome a,
    .nav-sections .mayflower-mobile-welcome .logged-in {
        color: #333 !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }

    .nav-sections .rootmenu-list > li > .rootmenu-click,
    .nav-sections #rw-menutop > li > .rootmenu-click {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 40 !important;
        width: 40px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        cursor: pointer !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    /* Nested subcategory carets also stay on the parent row */
    .nav-sections .mayflower-megamenu-group.has-children > .rootmenu-click,
    .nav-sections .mayflower-attr-group.has-children > .rootmenu-click {
        height: 48px !important;
        max-height: 48px !important;
        top: 0 !important;
    }

    .nav-sections .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow,
    .nav-sections #rw-menutop > li > .rootmenu-click > .rootmenu-arrow {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 6px !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
        background: transparent !important;
        border-right: 2px solid #444 !important;
        border-bottom: 2px solid #444 !important;
        transform: translateY(-70%) rotate(45deg);
        box-sizing: border-box !important;
    }

    /*
     * My Account — mirror other #rw-menutop rows exactly.
     * Other items: menu_default `li { padding: 0 30px }` + link `padding-left: 16px`.
     * Use [id="store.menu"] so we beat head-override / Luma header.links rules.
     */
    [id="store.menu"] #rw-menutop > li.mayflower-my-account,
    [id="store.menu"] .mayflower-my-account,
    .nav-sections #rw-menutop > li.mayflower-my-account,
    .nav-sections .mayflower-my-account {
        position: relative !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 30px !important;
        background: #fff !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        float: none !important;
        clear: none !important;
    }

    [id="store.menu"] .mayflower-my-account::after,
    .nav-sections .mayflower-my-account::after {
        display: none !important;
        content: none !important;
    }

    [id="store.menu"] .mayflower-my-account > .mayflower-my-account-toggle,
    .nav-sections .mayflower-my-account > .mayflower-my-account-toggle {
        display: block !important;
        position: relative !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px 40px 14px 16px !important;
        color: #222 !important;
        background: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        border: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* Caret sits in the 30px right gutter (same visual edge as .rootmenu-click) */
    [id="store.menu"] .mayflower-my-account > .mayflower-my-account-toggle:after,
    .nav-sections .mayflower-my-account > .mayflower-my-account-toggle:after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: -24px !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-right: 2px solid #444 !important;
        border-bottom: 2px solid #444 !important;
        transform: translateY(-70%) rotate(45deg);
        box-sizing: border-box !important;
    }

    [id="store.menu"] .mayflower-my-account.is-open > .mayflower-my-account-toggle:after,
    .nav-sections .mayflower-my-account.is-open > .mayflower-my-account-toggle:after {
        transform: translateY(-20%) rotate(225deg);
    }

    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
    }

    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel[hidden],
    .nav-sections .mayflower-my-account .mayflower-my-account-panel[hidden] {
        display: none !important;
    }

    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul.header.links,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul.header.links,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul {
        display: block !important;
        flex-direction: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        border: 0 !important;
        background: #fff !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul.header.links > li,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul > li,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul.header.links > li,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul > li {
        display: block !important;
        float: none !important;
        clear: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul.header.links > li > a,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul > li > a,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul.header.links > li > a,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul > li > a {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 14px 16px 14px 20px !important;
        line-height: 1.35 !important;
        color: #222 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-transform: none !important;
        text-decoration: none !important;
        border: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: #fff !important;
    }

    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul.header.links > li > a:hover,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul.header.links > li > a:active,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul > li > a:hover,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul > li > a:active,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul.header.links > li > a:hover,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul.header.links > li > a:active,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul > li > a:hover,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul > li > a:active {
        background: #f5f6f8 !important;
        color: #222 !important;
        text-decoration: none !important;
    }

    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel .greet.welcome,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel .quick-order-link,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul.header.links.quick-order-link,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel .header-icon,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel .authorization-link-divider,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul.header.links > li:empty,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul.header.links > li:not(:has(> a)),
    .nav-sections .mayflower-my-account .mayflower-my-account-panel .greet.welcome,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel .quick-order-link,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul.header.links.quick-order-link,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel .header-icon,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel .authorization-link-divider,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul.header.links > li:empty,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul.header.links > li:not(:has(> a)) {
        display: none !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel .authorization-link-text,
    [id="store.menu"] .mayflower-my-account .mayflower-my-account-panel ul > li > a span,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel .authorization-link-text,
    .nav-sections .mayflower-my-account .mayflower-my-account-panel ul > li > a span {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        text-decoration: none !important;
    }

    .nav-sections .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow::before,
    .nav-sections .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow::after,
    .nav-sections #rw-menutop > li > .rootmenu-click > .rootmenu-arrow::before,
    .nav-sections #rw-menutop > li > .rootmenu-click > .rootmenu-arrow::after {
        display: none !important;
        content: none !important;
    }

    .nav-sections .rootmenu-list > li.mayflower-mobile-expanded > .rootmenu-click > .rootmenu-arrow,
    .nav-sections .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow.rootmenu-rotate {
        transform: translateY(-20%) rotate(225deg);
    }

    /* Do not set max-width:100% on .nav-sections — Magento parent % shrinks the drawer. */
    .nav-sections-item-content[id="store.menu"],
    .nav-sections .rootmenu,
    .nav-sections .rootmenu-list,
    .nav-sections #rw-menutop {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    html.nav-open,
    html.nav-open body {
        overflow-x: hidden !important;
    }

    .nav-sections .rootmenu-list > li:not(.mayflower-mobile-expanded) > .megamenu,
    .nav-sections .rootmenu-list > li:not(.mayflower-mobile-expanded) > .halfmenu,
    .nav-sections .rootmenu-list > li:not(.mayflower-mobile-expanded) > .mayflower-megamenu-panel,
    .nav-sections #rw-menutop > li:not(.mayflower-mobile-expanded) > .megamenu,
    .nav-sections #rw-menutop > li:not(.mayflower-mobile-expanded) > .mayflower-megamenu-panel {
        display: none !important;
    }

    .nav-sections .rootmenu-list > li.mayflower-mobile-expanded > .megamenu,
    .nav-sections .rootmenu-list > li.mayflower-mobile-expanded > .halfmenu,
    .nav-sections .rootmenu-list > li.mayflower-mobile-expanded > .mayflower-megamenu-panel,
    .nav-sections #rw-menutop > li.mayflower-mobile-expanded > .megamenu,
    .nav-sections #rw-menutop > li.mayflower-mobile-expanded > .mayflower-megamenu-panel {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .nav-sections .rootmenu-list > li > .megamenu,
    .nav-sections .rootmenu-list > li > .halfmenu,
    .nav-sections .rootmenu-list > li > .mayflower-megamenu-panel,
    .nav-sections #rw-menutop > li > .megamenu,
    .nav-sections #rw-menutop > li > .mayflower-megamenu-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .nav-sections .mayflower-megamenu-columns,
    .nav-sections .mayflower-megamenu-columns-wrap,
    .nav-sections [class*="root-col-"],
    .nav-sections [class*="root-sub-col-"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /*
     * Foil / What's New subcategory accordions — mirror Latex expand behaviour.
     * Rootways keeps .level3-popup at display:none !important until hover.
     */
    .nav-sections .mayflower-megamenu-group.has-children > .mayflower-megamenu-children,
    .nav-sections .mayflower-megamenu-group.has-children > .level3-popup,
    .nav-sections .mayflower-megamenu-group.has-children > ul.level3-popup {
        display: none !important;
    }

    .nav-sections .mayflower-megamenu-group.mayflower-mobile-expanded > .mayflower-megamenu-children,
    .nav-sections .mayflower-megamenu-group.mayflower-mobile-expanded > .level3-popup,
    .nav-sections .mayflower-megamenu-group.mayflower-mobile-expanded > ul.level3-popup {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    /*
     * Unified mobile accordion rows for ALL submenu types
     * (Foil category groups, What's New leaves, Latex attr filters).
     * One padding / divider / caret language so expanded panels match.
     */
    .nav-sections .mayflower-megamenu-panel,
    .nav-sections .megamenu,
    .nav-sections .halfmenu,
    .nav-sections .mayflower-megamenu-columns,
    .nav-sections .mayflower-megamenu-columns-wrap,
    .nav-sections .level2-popup,
    .nav-sections .mayflower-attr-filter-section,
    .nav-sections .mayflower-attr-filter-grid {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        column-count: 1 !important;
        grid-template-columns: none !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
    }

    .nav-sections .rootmenu-list > li.mayflower-mobile-expanded > .megamenu,
    .nav-sections .rootmenu-list > li.mayflower-mobile-expanded > .halfmenu,
    .nav-sections .rootmenu-list > li.mayflower-mobile-expanded > .mayflower-megamenu-panel,
    .nav-sections #rw-menutop > li.mayflower-mobile-expanded > .megamenu,
    .nav-sections #rw-menutop > li.mayflower-mobile-expanded > .mayflower-megamenu-panel {
        max-height: none !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .nav-sections .mayflower-megamenu-group,
    .nav-sections .mayflower-attr-group,
    .nav-sections .level2-popup > li,
    .nav-sections .mayflower-megamenu-child-item {
        display: block !important;
        float: none !important;
        clear: none !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
        background: #fff !important;
        box-sizing: border-box !important;
    }

    .nav-sections .mayflower-megamenu-parent,
    .nav-sections .mayflower-attr-group-heading,
    .nav-sections .mayflower-megamenu-parent.mayflower-attr-group-heading {
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #fff !important;
    }

    .nav-sections .mayflower-attr-filter-heading {
        display: none !important;
    }

    /* Level-2 parent rows (Foil Everyday, Latex By Brand, What's New leaves) */
    .nav-sections .mayflower-megamenu-parent-link,
    .nav-sections .mayflower-megamenu-group > a.mayflower-megamenu-parent-link,
    .nav-sections .mayflower-megamenu-group > a,
    .nav-sections .level2-popup > li > a,
    .nav-sections .mayflower-attr-group-heading > .mayflower-megamenu-parent-title,
    .nav-sections .mayflower-attr-group-heading .mayflower-megamenu-parent-title {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 14px 52px 14px 20px !important;
        line-height: 1.35 !important;
        color: #222 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        text-decoration: none !important;
        border: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: #fff !important;
    }

    /* Titles nested inside a parent link — typography only (no second row chrome) */
    .nav-sections .mayflower-megamenu-parent-link .mayflower-megamenu-parent-title,
    .nav-sections .mayflower-megamenu-parent-link .level2-name,
    .nav-sections .mayflower-megamenu-parent-link .sub-cat-name,
    .nav-sections .mayflower-megamenu-group > a .sub-cat-name,
    .nav-sections .mayflower-megamenu-group > a .level2-name,
    .nav-sections .level2-popup > li > a .sub-cat-name {
        display: inline !important;
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        line-height: inherit !important;
    }

    /* Level-3 / leaf option rows */
    .nav-sections .mayflower-megamenu-children,
    .nav-sections .level3-popup,
    .nav-sections .mayflower-attr-group-options {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        background: #fff !important;
        box-shadow: none !important;
        border: 0 !important;
        column-count: 1 !important;
    }

    .nav-sections .mayflower-megamenu-children .mayflower-megamenu-child-link,
    .nav-sections .mayflower-megamenu-children > li > a,
    .nav-sections .level3-popup > li > a,
    .nav-sections .mayflower-attr-group-options .mayflower-megamenu-child-link,
    .nav-sections .mayflower-attr-see-more .mayflower-megamenu-child-link {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 14px 16px 14px 32px !important;
        line-height: 1.35 !important;
        color: #222 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        border: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        background: #fff !important;
    }

    .nav-sections .mayflower-megamenu-children .mayflower-megamenu-child-name,
    .nav-sections .mayflower-megamenu-children .level3-name,
    .nav-sections .mayflower-megamenu-children .sub-cat-name,
    .nav-sections .mayflower-attr-group-options .mayflower-megamenu-child-name {
        display: inline !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        background: transparent !important;
    }

    .nav-sections .mayflower-attr-group-options {
        display: none;
    }

    .nav-sections .mayflower-attr-group.mayflower-mobile-expanded > .mayflower-attr-group-options,
    .nav-sections .mayflower-attr-group.mayflower-mobile-expanded > .level3-popup {
        display: block !important;
    }

    .nav-sections .mayflower-attr-group--dense .mayflower-attr-group-options {
        column-count: 1 !important;
    }

    /* Nested carets — same hit area + chevron as top-level */
    .nav-sections .mayflower-megamenu-group.has-children > .rootmenu-click,
    .nav-sections .mayflower-attr-group.has-children > .rootmenu-click {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 40 !important;
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        cursor: pointer !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    .nav-sections .mayflower-megamenu-group > .rootmenu-click > .rootmenu-arrow,
    .nav-sections .mayflower-attr-group > .rootmenu-click > .rootmenu-arrow,
    .nav-sections .level2-popup .rootmenu-click > .rootmenu-arrow {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: 6px !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-right: 2px solid #444 !important;
        border-bottom: 2px solid #444 !important;
        transform: translateY(-70%) rotate(45deg);
        box-sizing: border-box !important;
        float: none !important;
    }

    .nav-sections .mayflower-megamenu-group > .rootmenu-click > .rootmenu-arrow::before,
    .nav-sections .mayflower-megamenu-group > .rootmenu-click > .rootmenu-arrow::after,
    .nav-sections .mayflower-attr-group > .rootmenu-click > .rootmenu-arrow::before,
    .nav-sections .mayflower-attr-group > .rootmenu-click > .rootmenu-arrow::after,
    .nav-sections .level2-popup .rootmenu-click > .rootmenu-arrow::before,
    .nav-sections .level2-popup .rootmenu-click > .rootmenu-arrow::after {
        display: none !important;
        content: none !important;
    }

    .nav-sections .mayflower-megamenu-group.mayflower-mobile-expanded > .rootmenu-click > .rootmenu-arrow,
    .nav-sections .mayflower-attr-group.mayflower-mobile-expanded > .rootmenu-click > .rootmenu-arrow,
    .nav-sections .mayflower-megamenu-group > .rootmenu-click > .rootmenu-arrow.rootmenu-rotate,
    .nav-sections .mayflower-attr-group > .rootmenu-click > .rootmenu-arrow.rootmenu-rotate {
        transform: translateY(-20%) rotate(225deg);
    }

    /* Hide Rootways desktop arrows inside mobile drawer rows */
    .nav-sections .cat-arrow,
    .nav-sections .has-sub-cat:after {
        display: none !important;
        content: none !important;
    }

    /*
     * Kill Bootstrap / sticky-touch underlines. Match Latex Balloons typography:
     * subcategory parents bold + black; leaf/grandchild links normal; never underlined.
     */
    .nav-sections .rootmenu a,
    .nav-sections .rootmenu a:link,
    .nav-sections .rootmenu a:visited,
    .nav-sections .rootmenu a:hover,
    .nav-sections .rootmenu a:focus,
    .nav-sections .rootmenu a:active,
    .nav-sections .rootmenu a:focus-visible,
    .nav-sections .rootmenu li:hover > a,
    .nav-sections .rootmenu li:focus-within > a,
    .nav-sections .rootmenu .sub-cat-name,
    .nav-sections .rootmenu .mayflower-megamenu-parent-title,
    .nav-sections .rootmenu .mayflower-megamenu-child-name,
    .nav-sections .rootmenu .level2-name,
    .nav-sections .rootmenu .level3-name,
    .nav-sections .rootmenu a:hover .sub-cat-name,
    .nav-sections .rootmenu a:hover .mayflower-megamenu-parent-title,
    .nav-sections .rootmenu a:hover .mayflower-megamenu-child-name,
    .nav-sections .rootmenu li:hover .sub-cat-name,
    .nav-sections .rootmenu li:hover .mayflower-megamenu-parent-title,
    .nav-sections .rootmenu li:hover .mayflower-megamenu-child-name,
    .nav-sections .rootmenu .mayflower-megamenu-group:hover .mayflower-megamenu-parent-title,
    .nav-sections .rootmenu .mayflower-megamenu-children > li:hover > a,
    .nav-sections .rootmenu .mayflower-megamenu-child-link:hover,
    .nav-sections .rootmenu .mayflower-megamenu-parent-link:hover {
        text-decoration: none !important;
        -webkit-text-decoration: none !important;
        text-decoration-line: none !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .nav-sections .rootmenu .mayflower-megamenu-parent-link,
    .nav-sections .rootmenu .mayflower-megamenu-parent-link:hover,
    .nav-sections .rootmenu .mayflower-megamenu-parent-link:focus,
    .nav-sections .rootmenu .mayflower-megamenu-parent-link:active,
    .nav-sections .rootmenu .mayflower-megamenu-group > a,
    .nav-sections .rootmenu .mayflower-megamenu-group > a:hover,
    .nav-sections .rootmenu .level2-popup > li > a,
    .nav-sections .rootmenu .level2-popup > li > a:hover {
        color: #222 !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        background: #fff !important;
    }

    .nav-sections .rootmenu .mayflower-megamenu-parent-title,
    .nav-sections .rootmenu .mayflower-megamenu-parent-link .sub-cat-name,
    .nav-sections .rootmenu .mayflower-megamenu-parent-link .level2-name,
    .nav-sections .rootmenu .level2-popup > li > a .sub-cat-name,
    .nav-sections .rootmenu .mayflower-attr-group-heading .mayflower-megamenu-parent-title {
        color: #222 !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-decoration: none !important;
    }

    .nav-sections .rootmenu .mayflower-megamenu-children .mayflower-megamenu-child-link,
    .nav-sections .rootmenu .mayflower-megamenu-children .mayflower-megamenu-child-link:hover,
    .nav-sections .rootmenu .mayflower-megamenu-children .mayflower-megamenu-child-link:focus,
    .nav-sections .rootmenu .mayflower-megamenu-children .mayflower-megamenu-child-link:active,
    .nav-sections .rootmenu .mayflower-megamenu-children > li > a,
    .nav-sections .rootmenu .mayflower-megamenu-children > li > a:hover,
    .nav-sections .rootmenu .level3-popup > li > a,
    .nav-sections .rootmenu .level3-popup > li > a:hover,
    .nav-sections .rootmenu .mayflower-attr-group-options .mayflower-megamenu-child-link,
    .nav-sections .rootmenu .mayflower-attr-group-options .mayflower-megamenu-child-link:hover {
        color: #222 !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        background: #fff !important;
    }

    .nav-sections .rootmenu .mayflower-megamenu-children .mayflower-megamenu-child-name,
    .nav-sections .rootmenu .mayflower-megamenu-children .level3-name,
    .nav-sections .rootmenu .mayflower-megamenu-children .sub-cat-name,
    .nav-sections .rootmenu .mayflower-attr-group-options .mayflower-megamenu-child-name {
        color: inherit !important;
        font-weight: 400 !important;
        text-decoration: none !important;
    }
}

/* =============================================================================
   iPad only (769–1024): megamenu polish — does not touch phone or desktop.
   ============================================================================= */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .page-header .header.content {
        padding: 10px 8px !important;
    }

    .page-header .rootmenu > .rootmenu-list > li.hover::after {
        height: 36px;
    }

    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu,
    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.linksmenu,
    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.clearfix.linksmenu,
    .page-header .rootmenu > .rootmenu-list > li > .halfmenu,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel {
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
        padding: 1.25rem 1.25rem 1.5rem !important;
        max-height: calc(100vh - 130px);
        font-size: 13px !important;
    }

    .page-header .rootmenu > .rootmenu-list > li.hover > .megamenu,
    .page-header .rootmenu > .rootmenu-list > li.hover > .halfmenu,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel {
        margin-top: -36px !important;
        padding-top: calc(1.25rem + 36px) !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns {
        flex-wrap: wrap !important;
        gap: 0.75rem 0;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup {
        flex: 1 1 30% !important;
        min-width: 160px !important;
        max-width: 50% !important;
        padding: 0 0.85rem !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup:first-child,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup:first-child {
        padding-left: 0 !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup:last-child,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup:last-child {
        padding-right: 0 !important;
    }

    .rootmenu .mayflower-megamenu-parent-link,
    .rootmenu .mayflower-megamenu-parent-title,
    .rootmenu .mayflower-megamenu-parent-link .sub-cat-name,
    .rootmenu .level2-popup > li > a .sub-cat-name {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .rootmenu .mayflower-megamenu-children .mayflower-megamenu-child-link,
    .rootmenu .mayflower-megamenu-children .mayflower-megamenu-child-name,
    .rootmenu .mayflower-megamenu-children > li > a,
    .rootmenu .level3-popup > li > a {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .rootmenu > .rootmenu-list .fullmenu ul > li > a,
    .rootmenu > .rootmenu-list .halfmenu ul > li > a {
        line-height: 18px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* iPad portrait: compact top-level row (menu_default uses li padding 0 30px). */
@media screen and (min-width: 768px) and (max-width: 999.98px) {
    .page-header .header.content .rootmenu > .rootmenu-list,
    .page-header .header.content .rootmenu .rootmenu-list,
    .page-header .header.content #rw-menutop.rootmenu-list {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        column-gap: 0 !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li,
    .page-header .header.content .rootmenu .rootmenu-list > li,
    .page-header .header.content #rw-menutop.rootmenu-list > li {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-right: none !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li > a,
    .page-header .header.content .rootmenu .rootmenu-list > li > a,
    .page-header .header.content #rw-menutop.rootmenu-list > li > a {
        padding: 4px 5px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    /* Keep carets for touch expand; place after the label (DOM prepends them first). */
    .page-header .header.content .rootmenu > .rootmenu-list > li,
    .page-header .header.content .rootmenu .rootmenu-list > li,
    .page-header .header.content #rw-menutop.rootmenu-list > li {
        display: inline-flex !important;
        flex-direction: row;
        align-items: center;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li > a,
    .page-header .header.content .rootmenu .rootmenu-list > li > a,
    .page-header .header.content #rw-menutop.rootmenu-list > li > a {
        order: 1;
        padding-right: 2px !important;
        border: 0 !important;
        border-right: 0 !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li > .rootmenu-click,
    .page-header .header.content .rootmenu .rootmenu-list > li > .rootmenu-click {
        order: 2;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: static !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 0 0 2px !important;
        padding: 0 !important;
        vertical-align: middle;
        flex: 0 0 12px;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow,
    .page-header .header.content .rootmenu .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow {
        /* Real down-chevron triangle — NOT border-right/bottom (that renders as an "L"). */
        position: static !important;
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        margin: 1px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
        border-style: solid !important;
        border-width: 5px 4px 0 4px !important;
        border-color: #888 transparent transparent transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page-header .header.content .rootmenu > .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow::before,
    .page-header .header.content .rootmenu > .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow::after,
    .page-header .header.content .rootmenu .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow::before,
    .page-header .header.content .rootmenu .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow::after {
        content: none !important;
        display: none !important;
    }
}

/*
 * iPad (portrait + landscape): expanded megamenus.
 * Desktop override only starts at 769px, so 768px portrait gets broken
 * relative/tiny panels. Tablet also needs tighter columns and no desktop
 * hover-bridge (-80px margin / huge top padding).
 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .page-header {
        position: relative !important;
        z-index: 200;
    }

    .page-header .rootmenu,
    .page-header .header.content .rootmenu {
        position: static !important;
    }

    .page-header .rootmenu > .rootmenu-list > li,
    .page-header .header.content .rootmenu > .rootmenu-list > li {
        position: static !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu,
    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.linksmenu,
    .page-header .rootmenu > .rootmenu-list > li > .megamenu.fullmenu.clearfix.linksmenu,
    .page-header .rootmenu > .rootmenu-list > li > .halfmenu,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel,
    .page-header .header.content .rootmenu > .rootmenu-list > li > .megamenu,
    .page-header .header.content .rootmenu > .rootmenu-list > li > .halfmenu,
    .page-header .header.content .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel {
        /* Keep display free for Rootways slideToggle / sticky hover — hide with opacity. */
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        right: auto !important;
        width: calc(100vw - 1.25rem) !important;
        max-width: calc(100vw - 1.25rem) !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        transform: translateX(-50%) !important;
        padding: 1rem 1.15rem 1.25rem !important;
        border: 1px solid #dedede !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
        box-sizing: border-box !important;
        background: #fff !important;
        z-index: 400 !important;
        max-height: calc(100vh - 150px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        font-size: 14px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: none !important;
        transition-delay: 0s !important;
        float: none !important;
    }

    .page-header .rootmenu > .rootmenu-list > li.hover > .megamenu,
    .page-header .rootmenu > .rootmenu-list > li.hover > .halfmenu,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel,
    .page-header .header.content .rootmenu > .rootmenu-list > li.hover > .megamenu,
    .page-header .header.content .rootmenu > .rootmenu-list > li.hover > .halfmenu,
    .page-header .header.content .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin-top: 0 !important;
        padding-top: 1rem !important;
        transform: translateX(-50%) !important;
        transition: none !important;
        transition-delay: 0s !important;
    }

    /* Kill desktop hover bridge pseudo on tablet */
    .page-header .rootmenu > .rootmenu-list > li.hover::after,
    .page-header .header.content .rootmenu > .rootmenu-list > li.hover::after {
        content: none !important;
        display: none !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .root-col-1,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .root-col-1.clearfix {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        float: none !important;
        padding: 0 !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns-wrap,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel [class*="root-sub-col-"].mayflower-megamenu-columns-wrap {
        width: 100% !important;
        float: none !important;
    }

    /* Wrap columns so 3–4 col menus don't crush on portrait; don't stretch sparse menus. */
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup {
        display: block !important;
        flex: 0 1 280px !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        min-width: 160px !important;
        max-width: calc(50% - 0.5rem) !important;
        margin: 0 0 1rem !important;
        padding: 0 0.9rem 0.35rem !important;
        box-sizing: border-box !important;
        border-left: none !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup + .level2-popup,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup + ul[class*="root-col-"].level2-popup {
        border-left: 1px solid #e6e6e6 !important;
    }

    /* On wrapped rows, don't keep a left rule on the first item of the row */
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup:nth-child(odd),
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup:nth-child(odd) {
        border-left: none !important;
        padding-left: 0.15rem !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .linksmenu ul > li,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .level2-popup > li {
        clear: none !important;
        float: none !important;
        width: 100% !important;
        position: relative !important;
    }

    /* Inner expand carets — children stay open on tablet; hide the orphan chevrons. */
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .rootmenu-click,
    .page-header .rootmenu > .rootmenu-list > li > .megamenu .rootmenu-click,
    .page-header .rootmenu > .rootmenu-list > li > .halfmenu .rootmenu-click {
        display: none !important;
    }

    .rootmenu .mayflower-megamenu-parent,
    .rootmenu .mayflower-megamenu-parent-link {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    .rootmenu .mayflower-megamenu-parent-title,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-parent-title,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-parent-link .level2-name.sub-cat-name {
        font-size: 13px !important;
        line-height: 1.3 !important;
        display: inline !important;
    }

    .rootmenu .mayflower-megamenu-child-link,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children .sub-cat-name,
    .rootmenu .mayflower-megamenu-panel .mayflower-megamenu-children a {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    /* Children lists must stay open/visible under parents on tablet */
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel .mayflower-megamenu-children,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel ul.level3-popup,
    .page-header .rootmenu > .rootmenu-list > li.hover > .mayflower-megamenu-panel.linksmenu ul .level3-popup,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-children,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel ul.level3-popup {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 0 0 0.15rem !important;
        float: none !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        transform: none !important;
    }
}

/* Portrait: prefer 2-column megamenu grid that fills the panel width */
@media screen and (min-width: 768px) and (max-width: 999.98px) {
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup {
        flex: 1 1 calc(50% - 1rem) !important;
        max-width: 50% !important;
        min-width: 0 !important;
    }
}

/* iPad landscape: allow up to 4 compact columns */
@media screen and (min-width: 1000px) and (max-width: 1024px) {
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup,
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup {
        flex: 0 1 220px !important;
        max-width: calc(25% - 0.5rem) !important;
        min-width: 0 !important;
    }

    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > .level2-popup:nth-child(4n + 1),
    .page-header .rootmenu > .rootmenu-list > li > .mayflower-megamenu-panel .mayflower-megamenu-columns > ul[class*="root-col-"].level2-popup:nth-child(4n + 1) {
        border-left: none !important;
    }
}