/* NG08 Step 35.2.1 — Balanced dynamic mega-menu grid */

/*
 * Primary category remains visually emphasized without consuming
 * two grid columns. This prevents 5 categories from wrapping 4+1.
 */
.ng-category-mega-card.is-primary{
    grid-column:auto !important;
}

.ng-category-mega-card.is-primary::after{
    content:"Primary";
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    padding:5px 7px;
    border-radius:999px;
    background:#B7D532;
    color:#17352D;
    font:800 7px/1 Manrope,sans-serif;
    letter-spacing:.09em;
    text-transform:uppercase;
}

/* 1–5 categories: always one balanced row on desktop */
.products-index.ng-count-1{grid-template-columns:minmax(0,1fr) !important}
.products-index.ng-count-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.products-index.ng-count-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.products-index.ng-count-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.products-index.ng-count-5{grid-template-columns:repeat(5,minmax(0,1fr)) !important}

/* Even multi-row counts stay perfectly balanced */
.products-index.ng-count-6{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.products-index.ng-count-8{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.products-index.ng-count-10{grid-template-columns:repeat(5,minmax(0,1fr)) !important}

/*
 * 7 categories:
 * 4 on first row, 3 equal-width cards centered on second row.
 * Use 8 logical tracks; every card spans 2.
 */
.products-index.ng-count-7{
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
}
.products-index.ng-count-7>.ng-category-mega-card{
    grid-column:span 2 !important;
}
.products-index.ng-count-7>.ng-category-mega-card:nth-child(5){
    grid-column:2 / span 2 !important;
}
.products-index.ng-count-7>.ng-category-mega-card:nth-child(6){
    grid-column:4 / span 2 !important;
}
.products-index.ng-count-7>.ng-category-mega-card:nth-child(7){
    grid-column:6 / span 2 !important;
}

/*
 * 9 categories:
 * 5 on first row, 4 equal-width cards centered on second row.
 * Ten logical tracks; every card spans 2.
 */
.products-index.ng-count-9{
    grid-template-columns:repeat(10,minmax(0,1fr)) !important;
}
.products-index.ng-count-9>.ng-category-mega-card{
    grid-column:span 2 !important;
}
.products-index.ng-count-9>.ng-category-mega-card:nth-child(6){
    grid-column:2 / span 2 !important;
}
.products-index.ng-count-9>.ng-category-mega-card:nth-child(7){
    grid-column:4 / span 2 !important;
}
.products-index.ng-count-9>.ng-category-mega-card:nth-child(8){
    grid-column:6 / span 2 !important;
}
.products-index.ng-count-9>.ng-category-mega-card:nth-child(9){
    grid-column:8 / span 2 !important;
}

/* More than 10: five equal cards per row. */
.products-index.ng-count-many{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}

/*
 * Keep cards slightly shorter as the number grows so the mega-menu
 * remains compact instead of becoming a second page.
 */
.products-index.ng-count-6 .ng-category-mega-card,
.products-index.ng-count-7 .ng-category-mega-card,
.products-index.ng-count-8 .ng-category-mega-card,
.products-index.ng-count-9 .ng-category-mega-card,
.products-index.ng-count-10 .ng-category-mega-card,
.products-index.ng-count-many .ng-category-mega-card{
    min-height:138px;
}
.products-index.ng-count-6 .ng-category-mega-card__body,
.products-index.ng-count-7 .ng-category-mega-card__body,
.products-index.ng-count-8 .ng-category-mega-card__body,
.products-index.ng-count-9 .ng-category-mega-card__body,
.products-index.ng-count-10 .ng-category-mega-card__body,
.products-index.ng-count-many .ng-category-mega-card__body{
    min-height:138px;
}

/* Laptop: favor balanced rows over squeezing tiny cards */
@media(max-width:1180px){
    .products-index.ng-count-5,
    .products-index.ng-count-6{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .products-index.ng-count-7,
    .products-index.ng-count-8,
    .products-index.ng-count-9,
    .products-index.ng-count-10,
    .products-index.ng-count-many{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }

    .products-index.ng-count-7>.ng-category-mega-card,
    .products-index.ng-count-9>.ng-category-mega-card{
        grid-column:auto !important;
    }
}

/* Mobile/tablet menu structure retains two equal columns */
@media(max-width:760px){
    .products-index.ng-dynamic-category-index,
    .products-index.ng-count-1,
    .products-index.ng-count-2,
    .products-index.ng-count-3,
    .products-index.ng-count-4,
    .products-index.ng-count-5,
    .products-index.ng-count-6,
    .products-index.ng-count-7,
    .products-index.ng-count-8,
    .products-index.ng-count-9,
    .products-index.ng-count-10,
    .products-index.ng-count-many{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .products-index.ng-count-7>.ng-category-mega-card,
    .products-index.ng-count-9>.ng-category-mega-card{
        grid-column:auto !important;
    }
}