/* E2A Mega Menu styles */
.e2a-mega-panel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    background: transparent;
    pointer-events: none;
    transition: opacity .15s ease;
    opacity: 0;
}
.e2a-mega-panel.is-open {
    pointer-events: auto;
    opacity: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
    box-sizing: border-box;
}

.e2a-mega-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.e2a-mega-columns { display: grid; gap: 24px; padding: 24px; }
.layout-four_col_image .e2a-mega-columns { grid-template-columns: repeat(4, 1fr) minmax(220px, 28%); }
.layout-three_col_image .e2a-mega-columns { grid-template-columns: repeat(3, 1fr) minmax(220px, 28%); }
.layout-two_col_wide_image .e2a-mega-columns { grid-template-columns: repeat(2, 1fr) minmax(320px, 1.2fr); }
.layout-ten_col .e2a-mega-columns { grid-template-columns: repeat(10, minmax(0, 1fr)); }

.e2a-mega-col-image img { width: 100%; height: auto; display: block; border-radius: 6px; }

.e2a-mega-menu { list-style:none; margin:0; padding:0; }
.e2a-mega-menu li { margin: 0 0 8px; }
.e2a-mega-menu a { text-decoration:none; color: inherit; display:inline-block; }

/* Top-level menu items: semi-bold and one step larger */
.e2a-mega-menu > li > a {
    font-weight: 600;
    font-size: 1.125em;
}

/* Sub-menu items: normal weight */
.e2a-mega-menu .sub-menu a,
.e2a-mega-menu ul.sub-menu a {
    font-weight: 400;
    font-size: 1em;
}

/* Nested parent categories (children that have their own children) */
.e2a-mega-menu .sub-menu li.menu-item-has-children > a,
.e2a-mega-menu ul.sub-menu li.menu-item-has-children > a {
    font-weight: 600;
}

/* Submenu handling: EXPANDED by default; collapsible when parent has .is-closed */
.e2a-mega-menu li.menu-item-has-children > a { position: relative; padding-right: 18px; }
.e2a-mega-menu li.menu-item-has-children > a:after {
    content: "▴";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: .7;
}
/* Show all submenus by default (any nesting depth) */
.e2a-mega-menu .sub-menu,
.e2a-mega-menu ul.sub-menu {
    display: block !important;
    margin-top: 6px;
    padding-left: 14px;
    list-style: none;
}
.e2a-mega-menu .sub-menu .sub-menu,
.e2a-mega-menu ul.sub-menu ul.sub-menu {
    margin-top: 4px;
    padding-left: 12px;
}
/* Hide only when parent is explicitly closed */
.e2a-mega-menu li.is-closed > .sub-menu,
.e2a-mega-menu li.is-closed > ul.sub-menu { display: none !important; }
.e2a-mega-menu li.is-closed > a:after { content: "▾"; }

@media (max-width: 980px){
    /* Two-column menu on tablets, image drops below */
    .layout-four_col_image .e2a-mega-columns,
    .layout-two_col_wide_image .e2a-mega-columns,
    .layout-three_col_image .e2a-mega-columns {
        grid-template-columns: 1fr 1fr;
        gap:16px;
        padding:16px;
    }
    .layout-ten_col .e2a-mega-columns {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
        padding: 16px;
    }
    .e2a-mega-col-image {
        grid-column: 1 / -1;
    }
}
@media (max-width: 600px){
    /* Phone layout: compact, scrollable, and with two menu columns to reduce height */
    .e2a-mega-panel {
        /* allow vertical scroll inside the panel on small screens */
        align-items: flex-start;
    }
    .e2a-mega-inner {
        max-width: 100%;
        margin: 8px;
        border-radius: 6px;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .layout-four_col_image .e2a-mega-columns,
    .layout-two_col_wide_image .e2a-mega-columns,
    .layout-three_col_image .e2a-mega-columns,
    .layout-ten_col .e2a-mega-columns {
        /* two narrow columns so more items fit without excessive scroll */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:10px;
        padding:12px 10px 14px;
    }
    .e2a-mega-menu li {
        margin: 0 0 4px;
    }
    .e2a-mega-menu a {
        font-size: 13px;
        line-height: 1.35;
    }
    .e2a-mega-menu > li > a {
        font-size: 14px;
    }
    .e2a-mega-col-image {
        grid-column: 1 / -1;
        max-width: 180px;
        margin: 4px auto 0;
    }
    .e2a-mega-col-image img {
        width: 100%;
        height: auto;
        max-height: 130px;
        object-fit: cover;
    }
}


