[data-region-name="1"]:has(.beforeTiles) .ui-widget:first-child {
    display: none;
}

/* 1. Parent: Set the Grid and Gap */
[data-region-name="1"]:has(.beforeTiles) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important; /* Forces all items in a row to match tallest height */
    gap: 16px;
    justify-content: flex-start;
}

/* 2. Hide the Anchor Widget */
.ui-widget:has(.beforeTiles) {
    /*display: none !important;*/
}
[data-region-name="1"]:has(.beforeTiles) > div {
	display: none;
}

/* 3. The Tile Wrappers: Basic sizing */
/* Using 0 0 (no grow, no shrink) ensures the last tile stays the correct width */
.ui-widget:has(.beforeTiles) ~ .ui-widget {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important; /* Remove any SF default margins that cause misalignment */
}

/* 4. Column Width Math (16px gap) */
.ui-widget:has(.beforeTiles.col-4) ~ .ui-widget {
    flex: 0 0 calc(25% - 12px) !important;
}
.ui-widget:has(.beforeTiles.col-5) ~ .ui-widget {
    flex: 0 0 calc(20% - 12.8px) !important;
}

/* 5. THE HEIGHT FIX: The Vertical Flex Chain
   We must force EVERY container inside the widget to grow, 
   otherwise the white box (slds-col) won't reach the bottom. */
.ui-widget:has(.beforeTiles) ~ .ui-widget,
.ui-widget:has(.beforeTiles) ~ .ui-widget > div,
.ui-widget:has(.beforeTiles) ~ .ui-widget .js-content,
.ui-widget:has(.beforeTiles) ~ .ui-widget .forceCommunityTileLayout,
.ui-widget:has(.beforeTiles) ~ .ui-widget .slds-grid_vertical {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Clear fixed heights */
}

/* 6. Target the actual white box with the border/background */
.ui-widget:has(.beforeTiles) ~ .ui-widget .slds-col {
    flex: 1 1 auto !important;
    height: 100% !important;
}

/* 7. Hide "Empty" Audience Slots */
.ui-widget:has(.beforeTiles) ~ .ui-widget:empty,
.ui-widget:has(.beforeTiles) ~ .ui-widget[aria-hidden="true"] {
    display: none !important;
    flex: 0 0 0 !important;
}

/* 8. Mobile Fixes */
@media (max-width: 768px) {
    .ui-widget:has(.beforeTiles) ~ .ui-widget {
        flex: 0 0 100% !important;
    }
}

/* 1. Locate the .ui-widget that contains the banner, 
   2. Target the .ui-widget immediately following it,
   3. Within that widget, hide everything in .primaryFieldRow EXCEPT the first <div> child
*/
.ui-widget:has(.companyAccountBeforeBanner) + .ui-widget .primaryFieldRow > :not(div:first-child) {
    display: none !important;
}

/* 1. Locate the same target .ui-widget
   2. Hide the .secondaryFields class entirely
*/
.ui-widget:has(.companyAccountBeforeBanner) + .ui-widget .secondaryFields {
    display: none !important;
}

.ui-widget:has(.companyAccountBeforeBanner) + .ui-widget .secondaryFields {
    display: none !important;
}

.ui-widget:has(.companyAccountBeforeBanner) + .ui-widget .highlights {
    height: 40px !important;
}