/* NG08 Step 35.2 — Dynamic multi-category mega menu */

.products-index.ng-dynamic-category-index{
    display:grid;
    grid-template-columns:repeat(var(--ng-category-cols,5),minmax(0,1fr));
    gap:10px;
}

.ng-category-mega-card{
    position:relative;
    min-width:0;
    min-height:160px;
    overflow:hidden;
    border-radius:14px;
    background:#24473D;
    text-decoration:none;
    color:#fff;
    isolation:isolate;
}

.ng-category-mega-card__media{
    position:absolute;
    inset:0;
    z-index:-2;
    background:#24473D;
}

.ng-category-mega-card__media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .35s ease;
}

.ng-category-mega-card__media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(11,32,26,.14) 0%,
        rgba(11,32,26,.68) 100%
    );
}

.ng-category-mega-card__body{
    min-height:160px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:5px;
    padding:16px;
}

.ng-category-mega-card__number{
    font:700 9px/1 Manrope,sans-serif;
    letter-spacing:.13em;
    color:#DDE6C5;
}

.ng-category-mega-card strong{
    display:block;
    font:600 15px/1.18 Manrope,sans-serif;
    color:#fff;
}

.ng-category-mega-card__arrow{
    margin-top:3px;
    font:600 10px/1 Manrope,sans-serif;
    color:#B7D532;
}

.ng-category-mega-card.is-primary{
    grid-column:span 2;
}

.ng-category-mega-card.is-primary strong{
    font-size:18px;
}

@media (hover:hover) and (pointer:fine){
    .ng-category-mega-card:hover .ng-category-mega-card__media img{
        transform:scale(1.035);
    }
}

/* Category counts adapt without PHP/CSS rewrites. */
.products-index.ng-count-1,
.products-index.ng-count-2,
.products-index.ng-count-3{
    --ng-category-cols:3;
}

.products-index.ng-count-4,
.products-index.ng-count-5{
    --ng-category-cols:5;
}

.products-index.ng-count-6{
    --ng-category-cols:3;
}

.products-index.ng-count-7,
.products-index.ng-count-8{
    --ng-category-cols:4;
}

.products-index.ng-count-9,
.products-index.ng-count-10,
.products-index.ng-count-many{
    --ng-category-cols:5;
}

@media(max-width:1180px){
    .products-index.ng-dynamic-category-index{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .ng-category-mega-card.is-primary{
        grid-column:span 1;
    }
}

@media(max-width:760px){
    .products-index.ng-dynamic-category-index{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}