/* Force header line break after Storage Box (6th child) */
.header-widgets {
  flex-wrap: wrap;
}
.header-widgets > *:nth-child(6)::after {
  content: "";
  flex-basis: 100%;
  display: block;
}

/* Dashboard tab: flex-wrap container */
#layout-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Desktop: first 3 groups — 3 columns */
.services-group:nth-child(-n+3) {
  flex: 0 0 calc(33.333% - 7px) !important;
  max-width: calc(33.333% - 7px) !important;
}

/* Desktop: next 4 groups — 4 columns */
.services-group:nth-child(n+4):nth-child(-n+7) {
  flex: 0 0 calc(25% - 8px) !important;
  max-width: calc(25% - 8px) !important;
}

/* Mobile: single column for ALL groups */
@media (max-width: 768px) {
  #layout-groups > .services-group {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}