/* NG08 Step 35.2.3 — Mega Menu CSS Isolation */

/*
 * The Products page owns generic selectors such as .products-showcase and
 * .products-index. The mega menu reuses those historical class names.
 * Scope and normalize the header component so page-specific CSS cannot leak in.
 */

header#header .mega-menu{
    color:#fff;
}

header#header .mega-menu .mega-shell.products-showcase{
    background:#17352D !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.14) !important;
}

header#header .mega-menu .products-lead{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        ) !important;
    color:#fff !important;
    border-right:1px solid rgba(255,255,255,.12) !important;
}

header#header .mega-menu .products-lead .mega-eyebrow{
    color:#B7D532 !important;
}

header#header .mega-menu .products-lead h3{
    color:#F8F7F2 !important;
}

header#header .mega-menu .products-lead p{
    color:rgba(248,247,242,.70) !important;
}

header#header .mega-menu .products-feature-list span{
    color:rgba(248,247,242,.72) !important;
    border-color:rgba(255,255,255,.14) !important;
    background:transparent !important;
}

header#header .mega-menu .mega-all{
    color:#fff !important;
}

header#header .mega-menu .mega-all span{
    background:#B7D532 !important;
    color:#17352D !important;
}

header#header .mega-menu .products-index.ng-dynamic-category-index{
    background:#17352D !important;
    color:#fff !important;
}

header#header .mega-menu .ng-category-mega-card{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.018)
        ) !important;
    border-color:rgba(255,255,255,.07) !important;
    color:#fff !important;
}

header#header .mega-menu .ng-category-mega-card.is-primary{
    background:
        linear-gradient(
            180deg,
            rgba(183,213,50,.055),
            rgba(255,255,255,.02)
        ) !important;
    border-color:rgba(183,213,50,.42) !important;
}

header#header .mega-menu .ng-category-mega-card strong{
    color:#fff !important;
}

header#header .mega-menu .ng-category-mega-card__number{
    color:#DDE6C5 !important;
}

header#header .mega-menu .ng-category-mega-card__arrow{
    color:#B7D532 !important;
}

/* Prevent generic Products-page card rules from altering mega cards */
header#header .mega-menu .products-index > *{
    max-width:none !important;
    margin:0 !important;
}

header#header .mega-menu .products-index img{
    border-radius:0 !important;
}

/*
 * Keep the component opaque. Background photography/video from the current
 * page must never show through the menu surface.
 */
header#header .mega-menu,
header#header .mega-menu .mega-shell.products-showcase,
header#header .mega-menu .products-lead,
header#header .mega-menu .products-index{
    backdrop-filter:none !important;
}

/* Preserve the existing geometric refinement. */
header#header .mega-menu .products-index.ng-count-5{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}

@media(max-width:1180px){
    header#header .mega-menu .products-index.ng-count-5{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}