/*!
 * Hosting Explorers — Mega-Menu & Primary-Nav stylesheet
 * ------------------------------------------------------------------
 * SINGLE SOURCE OF TRUTH for the header navigation + the four mega
 * dropdowns. Every rule that used to be scattered across main.css now
 * lives here, in its original cascade order, so editing the menu means
 * editing ONE file.
 *
 * Loaded immediately AFTER main.css (see inc/enqueue.php), so the
 * rendered result is byte-for-byte identical to before this split —
 * only the location changed, not a single value.
 *
 * Rules are kept in source order on purpose: some selectors are legacy
 * layers overridden by later ones. The blocks that actually WIN on a
 * desktop (>=1025px) screen are the ".hexp-mega-fw" media block and the
 * inner-grid rule (".hexp-mega-fw .hexp-mega-inner") near the bottom —
 * that inner-grid rule is where the column count lives.
 * ================================================================== */

.hexp-main-nav {
    display: flex;
    flex: 1;
    justify-content: center;
}
.hexp-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.hexp-menu > .hexp-nav-item,
.hexp-menu > li {
    position: relative;
}
.hexp-menu a,
.hexp-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--hexp-gray-700);
    border-radius: 8px;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap;
}
.hexp-menu a:hover,
.hexp-nav-link:hover {
    background: var(--hexp-gray-100);
    color: var(--hexp-navy);
}
.hexp-nav-link i.fa-chevron-down {
    font-size: 11px;
    opacity: 0.6;
    transition: transform 0.2s;
}
.hexp-nav-item:hover .hexp-nav-link i.fa-chevron-down {
    transform: rotate(180deg);
}
.hexp-coupon-badge {
    background: var(--hexp-green);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--hexp-radius-full);
    margin-left: 4px;
}
.hexp-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    padding: 28px;
    min-width: 600px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 32px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s;
    border: 1px solid var(--hexp-gray-200);
}
.hexp-nav-item:hover .hexp-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.hexp-mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--hexp-gray-700);
    transition: all 0.15s;
}
.hexp-mega-item:hover {
    background: var(--hexp-blue-50);
    color: var(--hexp-primary);
}
.hexp-mega-link {
    grid-column: span 2;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--hexp-gray-200);
    color: var(--hexp-primary);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hexp-mega-3col {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px 32px;
    min-width: 820px;
    padding: 24px 28px;
}
.hexp-mega-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 8px;
    color: var(--hexp-text);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease;
    white-space: nowrap;
}
.hexp-mega-item:hover {
    background: #f3f4f6;
    color: var(--hexp-primary);
}
.hexp-mega-item span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hexp-mega-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    flex-shrink: 0;
}
.hexp-mega-tag.tag-orange {
    background: #FFF4E6;
    color: #F97316;
}
.hexp-mega-tag.tag-green {
    background: #E8F8EE;
    color: #16A34A;
}
.hexp-mega-tag.tag-blue {
    background: #E6F0FF;
    color: #2563EB;
}
.hexp-mega-tag.tag-red {
    background: #FFE6E6;
    color: #DC2626;
}
.hexp-mega-tag.tag-purple {
    background: #F3E8FF;
    color: #9333EA;
}
.hexp-mega-tag.tag-amber {
    background: #FEF3C7;
    color: #D97706;
}
.hexp-mega-link {
    grid-column: 1/-1;
    padding: 14px 12px;
    border-top: 1px solid #E5E7EB;
    margin-top: 8px;
    font-weight: 700;
    color: var(--hexp-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.hexp-mega-link i {
    transition: transform .2s ease;
}
.hexp-mega-link:hover i {
    transform: translateX(4px);
}
.hexp-coupon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hexp-orange);
    color: #fff;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    margin: 0 6px;
}
@media (max-width: 1024px) {
    .hexp-mega-3col {
        min-width: auto;
        grid-template-columns: 1fr 1fr;
    }
}
html[dir=rtl] .hexp-mega-link i {
    transform: scaleX(-1);
}
html[dir=rtl] .hexp-mega-link:hover i {
    transform: scaleX(-1) translateX(4px);
}
.hexp-mega-3col {
    min-width: 820px;
}
.hexp-mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    min-height: 44px;
}
.hexp-mega-item > span:first-child {
    flex: 1;
    line-height: 1.4;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.hexp-mega-tag {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
    max-width: fit-content;
}
.hexp-mega-item > span:first-child {
    -webkit-line-clamp: 2 !important;
    font-size: 13.5px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.hexp-mega-item {
    min-height: 44px !important;
    padding: 9px 12px !important;
    align-items: center !important;
}
.hexp-nav-item {
    position: relative;
}
.hexp-mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    z-index: 100;
}
.hexp-nav-item:hover > .hexp-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.hexp-nav-item:last-child > .hexp-mega-menu,
.hexp-nav-item:nth-last-child(2) > .hexp-mega-menu {
    left: auto;
    right: 0;
    transform: translateY(8px);
}
.hexp-nav-item:last-child:hover > .hexp-mega-menu,
.hexp-nav-item:nth-last-child(2):hover > .hexp-mega-menu {
    transform: translateY(0);
}
@media (max-width:1024px) {
    .hexp-mega-3col {
        min-width: auto !important;
        grid-template-columns: 1fr !important;
    }
    .hexp-mega-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        display: none;
    }
    .hexp-nav-item.open > .hexp-mega-menu {
        display: block;
    }
}
.hexp-nav-link {
    font-size: 14px !important;
    padding: 8px 14px !important;
}
.hexp-coupon-badge {
    min-width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
}
.hexp-mega-3col {
    min-width: 760px !important;
    max-width: 840px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px 16px !important;
    padding: 18px !important;
}
.hexp-mega-item {
    min-height: auto !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    align-items: center !important;
    border-radius: 6px;
}
.hexp-mega-item > span:first-child {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
}
.hexp-mega-tag {
    padding: 2px 7px !important;
    font-size: 9px !important;
    flex-shrink: 0;
}
.hexp-mega-link {
    margin-top: 6px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
}
.hexp-mega-item:hover {
    background: #F1F5FF !important;
}
.hexp-nav-item-quiz {
    display: flex;
    align-items: center;
}
.hexp-nav-link-quiz {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff !important;
    font-weight: 700 !important;
    transition: transform .15s, box-shadow .15s, background .15s;
    position: relative;
}
.hexp-nav-link-quiz:hover {
    background: linear-gradient(135deg, #1d4ed8, #6d28d9) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.hexp-nav-link-quiz i.fa-wand-magic-sparkles {
    font-size: 12px;
    opacity: 1;
    color: #fde68a;
}
.hexp-nav-quiz-badge {
    background: #fbbf24;
    color: #78350f;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 99px;
    letter-spacing: .5px;
    margin-left: 2px;
    line-height: 1;
}
@media (max-width:1280px) {
    .hexp-main-nav {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        /* Drawer width adapts to screen size:
		     - phone (≤640px): 86vw, max 360px
		     - tablet portrait (641-1023px): 380px (fixed) — leaves backdrop visible
		     - tablet landscape (1024-1100px): 420px */
        width: min(86vw, 360px);
        max-width: 360px;
        background: #fff;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 80px 0 32px;
        box-shadow: -12px 0 36px rgba(15,23,42,0.18);
        transform: translateX(110%);
        transition: transform .35s cubic-bezier(.32,.72,.27,1);
        z-index: 10;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: none;
    }
}
@media (min-width:641px) and (max-width:1023px) {
    .hexp-main-nav {
        width: 380px;
        max-width: 380px;
    }
}
@media (min-width:1024px) and (max-width:1280px) {
    .hexp-main-nav {
        width: 420px;
        max-width: 420px;
    }
}
@media (max-width:1280px) {
    html[dir=rtl] .hexp-main-nav {
        right: auto;
        left: 0;
        transform: translateX(-110%);
        box-shadow: 12px 0 36px rgba(15,23,42,0.18);
    }
    body.hexp-mobile-open .hexp-main-nav {
        transform: translateX(0);
    }
    .hexp-main-nav .hexp-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .hexp-main-nav .hexp-nav-item {
        width: 100%;
        border-bottom: 1px solid #f1f5f9;
        position: relative;
        /* not static — creates a fresh stacking root for safety */
        z-index: 1;
        opacity: 0;
        transition: opacity .35s ease;
    }
    body.hexp-mobile-open .hexp-main-nav .hexp-nav-item {
        opacity: 1;
    }
    body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(1) {
        transition-delay: .15s;
    }
    body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(2) {
        transition-delay: .21s;
    }
    body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(3) {
        transition-delay: .27s;
    }
    body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(4) {
        transition-delay: .33s;
    }
    body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(5) {
        transition-delay: .39s;
    }
    body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(6) {
        transition-delay: .45s;
    }
    body.hexp-mobile-open .hexp-main-nav .hexp-nav-item:nth-child(7) {
        transition-delay: .51s;
    }
    .hexp-main-nav .hexp-nav-link {
        padding: 16px 24px;
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 52px;
        cursor: pointer;
    }
    .hexp-main-nav .hexp-nav-link:hover {
        background: #f8fafc;
    }
    .hexp-main-nav .hexp-nav-link i.fa-chevron-down {
        transition: transform .25s ease;
        font-size: 12px;
        opacity: .5;
    }
    .hexp-nav-item.is-mobile-open > .hexp-nav-link i.fa-chevron-down {
        transform: rotate(180deg);
        opacity: 1;
        color: var(--hexp-primary);
    }
    .hexp-main-nav .hexp-mega-menu {
        position: static !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        min-width: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        padding: 8px 16px 16px !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        background: #f8fafc !important;
        margin: 0 !important;
    }
    .hexp-nav-item.is-mobile-open > .hexp-mega-menu {
        display: block !important;
    }
    .hexp-main-nav .hexp-mega-item,
	.hexp-main-nav .hexp-mega-link {
        padding: 12px 14px !important;
        font-size: 14px !important;
        border-radius: 8px;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    .hexp-main-nav .hexp-mega-item:hover {
        background: #fff !important;
    }
    .hexp-main-nav .hexp-mega-item:not(:last-child) {
        border-bottom: 1px solid #eef2f7;
    }
    .hexp-main-nav .hexp-mega-link {
        color: var(--hexp-primary);
        font-weight: 700;
        margin-top: 6px;
    }
}
.hexp-mega-menu,
.hexp-mega-3col {
    width: min(760px, 92vw);
    min-width: 0;
    max-width: 92vw;
    padding: 24px 28px;
    gap: 6px 28px;
}
@media (max-width: 768px) {
    .hexp-mega-menu,
	.hexp-mega-3col {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
}
.hexp-main-nav {
    min-width: 0;
    /* critical: otherwise the long menu refuses to shrink and pushes monthly-pick off-screen */
    flex: 1 1 auto;
}
.hexp-menu {
    flex-wrap: nowrap;
    /* keep one line; tighten padding instead if cramped */
}
@media (max-width:1280px) {
    body.hexp-mobile-open .hexp-main-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .hexp-main-nav {
        padding: 0 !important
    }
    .hexp-main-nav .hexp-menu {
        padding: 8px 0 24px !important;
        gap: 0 !important;
        flex-direction: column;
        width: 100%;
    }
    .hexp-main-nav .hexp-nav-item {
        width: 100%;
        border-bottom: 1px solid #f1f5f9;
    }
    .hexp-main-nav .hexp-nav-item:last-child {
        border-bottom: none;
    }
    .hexp-main-nav .hexp-menu a,
	.hexp-main-nav .hexp-nav-link {
        padding: 14px 22px !important;
        font-size: 15px !important;
        border-radius: 0 !important;
        justify-content: space-between !important;
        width: 100%;
    }
    .hexp-main-nav .hexp-menu a:hover,
	.hexp-main-nav .hexp-nav-link:hover {
        background: #f8fafc !important;
    }
    .hexp-main-nav .hexp-mega-menu {
        padding: 0 0 8px 22px;
        background: #f8fafc;
    }
    .hexp-main-nav .hexp-mega-menu a {
        padding: 11px 14px !important;
        font-size: 14px !important;
        color: #475569 !important;
    }
}
@media (max-width:480px) {
    .hexp-main-nav .hexp-menu a,
	.hexp-main-nav .hexp-nav-link {
        padding: 13px 18px !important;
        font-size: 14.5px !important
    }
}
@media (max-width:1280px) {
    .hexp-main-nav {
        /* Hardware acceleration — keeps the drawer painted on its own
		   layer so URL-bar reflow doesn't shake it. */
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3d(110%, 0, 0);
        transform: translate3d(110%, 0, 0);
        /* Simpler ease — the cubic-bezier had a slight overshoot that
		   could feel like a wiggle. */
        transition: transform .28s ease-out !important;
    }
    body.hexp-mobile-open .hexp-main-nav {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
    .hexp-main-nav {
        overflow-x: hidden !important;
    }
    .hexp-main-nav .hexp-mega-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 0 6px !important;
        background: #f8fafc !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        /* Collapsed by default; expands via accordion when JS adds .is-mobile-open */
        max-height: 0;
        overflow: hidden !important;
        opacity: 0;
        visibility: hidden;
        transition: max-height .28s ease, opacity .2s ease, visibility .2s ease, padding .2s ease;
    }
    .hexp-main-nav .hexp-nav-item:hover > .hexp-mega-menu {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transform: none !important;
        padding: 0 !important;
    }
    .hexp-main-nav .hexp-nav-item.is-mobile-open > .hexp-mega-menu {
        max-height: 800px;
        opacity: 1;
        visibility: visible;
        transform: none !important;
        padding: 4px 0 8px !important;
    }
    .hexp-main-nav .hexp-mega-menu .hexp-mega-item {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 11px 14px 11px 38px !important;
        font-size: 14px !important;
        color: #475569 !important;
        min-height: auto !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
    .hexp-main-nav .hexp-mega-menu .hexp-mega-item > span:first-child {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-line-clamp: 1 !important;
    }
    .hexp-main-nav .hexp-mega-link {
        grid-column: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 14px 12px 38px !important;
        margin-top: 4px !important;
        border-top: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        color: #2563eb !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
    .hexp-main-nav .hexp-mega-link i,
	.hexp-main-nav .hexp-mega-link:hover i {
        transform: none !important;
        font-size: 11px !important;
    }
    .hexp-main-nav .hexp-nav-link i.fa-chevron-down {
        transition: transform .2s ease;
    }
    .hexp-main-nav .hexp-nav-item.is-mobile-open > .hexp-nav-link i.fa-chevron-down {
        transform: rotate(180deg);
    }
    .hexp-main-nav .hexp-nav-item:hover > .hexp-nav-link i.fa-chevron-down {
        transform: rotate(0deg) !important;
    }
    .hexp-main-nav .hexp-nav-item > .hexp-nav-link i.fa-chevron-down {
        transform: rotate(0deg) !important;
    }
    .hexp-main-nav .hexp-nav-item.is-mobile-open > .hexp-nav-link i.fa-chevron-down {
        transform: rotate(180deg) !important;
    }
}
@media (min-width: 1025px) {
    .hexp-main-nav {
        position: static;
    }
    .hexp-nav-item {
        position: static;
    }
    .hexp-mega-menu.hexp-mega-fw {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        display: block !important;
        /* not a grid anymore */
        grid-template-columns: none !important;
        padding: 0 !important;
        border: none !important;
        border-top: 1px solid #eef1f5 !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 22px 48px rgba(15,23,42,.12) !important;
        background: #ffffff !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        z-index: 999 !important;
        /* v3.9.16 — no downward translate: the panel touches the bar at
           top:100% so there is NO dead gap for the cursor to fall into on
           the way down. Reveal is opacity-only. */
        transform: none !important;
        transition: opacity .2s ease, visibility .2s ease !important;
    }
    .hexp-nav-item:hover > .hexp-mega-menu.hexp-mega-fw {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    /* v3.9.16 — HOVER BRIDGE (belt and braces).
       Even with the panel flush at top:100%, sub-pixel rounding can leave a
       1px seam. This invisible strip at the very top of the panel guarantees
       the hover chain is continuous from the nav item into the panel. It
       lives inside the panel, so it never blocks neighbouring items. */
    .hexp-nav-item > .hexp-mega-menu.hexp-mega-fw::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        height: 12px;
        background: transparent;
    }
    .hexp-mega-menu.hexp-mega-fw .hexp-mega-inner {
        background: #ffffff !important;
    }
    .hexp-mega-menu.hexp-mega-fw .hexp-mega-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px 32px;
        padding: 28px 32px;
    }
    .hexp-mega-menu.hexp-mega-fw .hexp-mega-link {
        grid-column: 1 / -1;
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid #eef1f5;
    }
    .hexp-mega-menu.hexp-mega-fw .hexp-mega-item {
        min-height: 0;
        align-items: center;
    }
}
@media (min-width: 1500px) {
    .hexp-mega-menu.hexp-mega-fw .hexp-mega-inner {
        max-width: 1320px;
    }
}
@media (max-width: 1024px) {
    .hexp-mega-menu.hexp-mega-fw .hexp-mega-inner {
        display: block;
        padding: 0;
        max-width: none;
    }
}
@media (min-width:1281px) {
    .hexp-main-nav {
        display: flex !important;
        min-width: 0;
    }
    .hexp-main-nav .hexp-menu {
        flex-wrap: nowrap;
    }
}
@media (min-width:1281px) and (max-width:1599px) {
    .hexp-menu {
        gap: 2px !important;
    }
    .hexp-menu a,
	.hexp-nav-link {
        padding: 10px 10px !important;
        font-size: 13.5px !important;
    }
}
@media (max-width:1280px) {
    .hexp-main-nav {
        display: none !important;
    }
    body.hexp-mobile-open .hexp-main-nav {
        display: flex !important;
    }
    body.admin-bar .hexp-main-nav {
        top: 32px !important;
    }
}
@media (max-width:782px) {
    body.admin-bar .hexp-main-nav {
        top: 46px !important;
    }
}

/* =========================================================================
 * v3.9.12 — FULL-WIDTH, 4-COLUMN MEGA MENU  (authoritative desktop layout)
 * -------------------------------------------------------------------------
 * THIS is the block to edit for the desktop dropdown. It is intentionally
 * LAST so it has the final say over every legacy layer above — including the
 * old `.hexp-mega-3col { ... repeat(3) !important }` rule that was forcing
 * three columns.
 *
 *   --hexp-mega-cols : items per row. They flow left → right and wrap to a
 *                      NEW ROW automatically when a row fills. Change this
 *                      one number to get 3, 4, 5 … columns.
 *   --hexp-mega-maxw : width of the centered item area inside the bar.
 *
 * The white bar always spans the FULL screen width; the items inside are
 * centered to --hexp-mega-maxw so they line up under the header.
 * ===================================================================== */
:root {
    --hexp-mega-cols: 4;
    --hexp-mega-maxw: 1280px;
}

@media (min-width: 1025px) {

    /* Anchor the panel to the full-width header bar (not the narrow inner
       container and not the nav item), so it can stretch edge to edge. */
    .hexp-header              { position: sticky; }
    .hexp-main-nav,
    .hexp-menu > .hexp-nav-item,
    .hexp-nav-item            { position: static !important; }

    /* The full-width white bar. Animation (fade/slide) is left to the
       earlier .hexp-mega-fw rules — we only set geometry here. */
    .hexp-mega-menu.hexp-mega-fw {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        display: block !important;
        grid-template-columns: none !important;
        padding: 0 !important;
        border: none !important;
        border-top: 1px solid #eef1f5 !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 22px 48px rgba(15, 23, 42, .12) !important;
        background: #ffffff !important;
    }

    /* Centered grid. grid-auto-flow:row => fill a row, then drop to the next. */
    .hexp-mega-menu.hexp-mega-fw .hexp-mega-inner {
        width: 100% !important;
        max-width: var(--hexp-mega-maxw) !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(var(--hexp-mega-cols), 1fr) !important;
        grid-auto-flow: row !important;
        gap: 6px 32px !important;
        padding: 24px 32px !important;
        background: #ffffff !important;
    }

    /* "See all …" link gets its own full-width row at the bottom. */
    .hexp-mega-menu.hexp-mega-fw .hexp-mega-link {
        grid-column: 1 / -1 !important;
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid #eef1f5;
    }

    /* v3.9.17 — KILL THE DEAD STRIP under the button.
       The header has ~14px of padding below the nav buttons, but the mega
       panel only starts at the header's bottom edge (top:100%). That white
       strip belongs to neither the button nor the panel, so the cursor
       crossing it broke :hover and closed the menu. We add an INVISIBLE
       pseudo-element under each nav link that fills the strip down to (and
       slightly past) the header edge — extending the hover catch-area without
       changing padding, margin, background, or the chevron position. One
       continuous hover zone from button → panel. The strip only exists while
       hovering, so it never blocks clicks elsewhere. */
    .hexp-main-nav .hexp-menu > .hexp-nav-item {
        position: relative;
    }
    .hexp-main-nav .hexp-menu > .hexp-nav-item > .hexp-nav-link,
    .hexp-main-nav .hexp-menu > .hexp-nav-item > a {
        position: relative;
    }
    .hexp-main-nav .hexp-menu > .hexp-nav-item > .hexp-nav-link::after,
    .hexp-main-nav .hexp-menu > .hexp-nav-item > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 20px;          /* >= the ~14px header bottom padding */
        background: transparent;
    }
}

/* A touch more breathing room for the item area on very wide screens. */
@media (min-width: 1500px) {
    :root { --hexp-mega-maxw: 1360px; }
}