.mega-menu {
        display: flex;
        border: 1px solid #eee;
        background: #fff;
        width: 100%;
        height: 500px;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    }

    /* LEFT: parents */
    .mega-menu-left {
        width: 20%;
        border-right: 1px solid #eee;
        background: #f9f9f9;
        overflow-y: auto;
    }
    .mega-menu-left ul { list-style: none; padding: 0; margin: 0; }
    .mega-menu-left li { padding: 12px 15px; cursor: pointer; }
    .mega-menu-left li a { text-decoration: none; color: inherit; font-weight: 600; display: block; }
    .mega-menu-left li.active, .mega-menu-left li:hover { background: #efefef; }

    /* RIGHT split */
    .mega-menu-right {
        width: 80%;
        display: flex;
    }
    .children-container { width: 40%; border-right: 1px solid #eee; padding: 18px; overflow-y: auto; }
    .grandchildren-container { width: 60%; padding: 18px; overflow-y: auto; }

    /* Hide by default */
    .children-for-parent,
    .grandchildren-for-parent {
        display: none;
    }
    .children-for-parent.active,
    .grandchildren-for-parent.active {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    /* Child + Grandchild cards (modern + circular style) */
.cat-card {
    width: 100px;
    text-align: center;
    transition: all 0.25s ease-in-out;
}

.cat-card a {
    text-decoration: none;
    color: #222;
    display: block;
}

/* Child category thumbnails */
.cat-card img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin: 0 auto 6px;
    border-radius: 50%;               /* 🔵 circle */
    background: #f9f9f9;
    border: 2px solid transparent;
    transition: transform 0.25s ease, 
                box-shadow 0.25s ease, 
                border-color 0.25s ease;
}

.cat-card span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    word-break: break-word;
}

/* Hover effect with yellow glow */
.cat-card:hover img {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 14px rgba(254, 215, 0, 0.4); /* 🟡 yellow glow */
    border-color: #fed700;
}

.cat-card:hover span {
    color: #111;
}

/* Grandchildren thumbnails (smaller, also circular) */
.grandchildren-for-parent .cat-card img {
    width: 65px;
    height: 65px;
    border-radius: 50%;               /* 🔵 circle */
}

.grandchildren-for-parent .cat-card span {
    font-size: 12px;
    font-weight: 400;
    color: #666;
}


	.grandchildren-for-parent > ul > li {
		list-style: none;
	}

	.grandchildren-for-parent > ul {
		width: 100%;
	    display: flex;
    	flex-wrap: wrap;
	}

    /* Container adjustments */
    .children-for-parent.active,
    .grandchildren-for-parent.active {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        align-content: flex-start;
        padding-top: 5px;
    }