.child-categories {
    display: flex;
    flex-wrap: wrap;         /* Allows items to move to the next row */
    justify-content: center; /* This centers the items in EVERY row */
    gap: 15px;
    padding: 0;
    list-style: none;        /* Removes bullets if this is a <ul> */
}

.child-category {
    /* (100% / 4) minus gap space to ensure exactly 4 per row */
    flex: 0 1 calc(25% - 15px); 
    min-width: 130px;        /* Prevents buttons from getting too tiny */
    max-width: 250px;        /* Prevents buttons from getting too wide */
    display: flex;
}

.child-category a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 55px;        /* Slightly taller for better 2-line spacing */
    
    text-decoration: none;
    color: #df3550;
    border: 1px solid #df3550;
    background: white;
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    line-height: 1.2;
    transition: all 0.2s ease-in-out;
}

.child-category a:hover {
    color: #444;
    border: 1px solid #444;
}

/* Responsive fix for mobile */
@media (max-width: 600px) {
    .child-category {
        flex: 0 1 calc(50% - 15px); /* 2 per row on small screens */
    }
}