/* 
* INSIDE GROUPING: 
* No divider lines between components that have same background, only 60px of space.
*/
.grouping > div:has(.cross-template-component[class*="--background-gray"]) + div:has(.cross-template-component[class*="--background-gray"]),
.grouping > div:has(.cross-template-component:not([class*="--background-gray"], [class*="--hidden"])) + div:has(.cross-template-component:not([class*="--background-gray"])) {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.grouping > div:has(.cross-template-component[class*="--background-gray"]) + div:has(.cross-template-component[class*="--background-gray"]) .cross-template-component,
.grouping > div:has(.cross-template-component:not([class*="--background-gray"], [class*="--hidden"])) + div:has(.cross-template-component:not([class*="--background-gray"])) .cross-template-component {
  padding-top: 0;
}
/* 
* INSIDE + OUTSIDE GROUPING RULES - NO DIVIDER
*
* If first .cross-template-component inside .grouping has a background, 
* and .cross-template-component preceding .grouping has no background, 
* no dividing line is necessary between them.
*
* If last cross-template-component inside .grouping has no background,
* and first component after .grouping has background, 
* no dividing line is necessary between them.
*/
*:has([class*="--background-gray"]) + .grouping:has(div:first-of-type .cross-template-component:not([class*="--background-gray"], [class*="--hidden"])),
.grouping:has(div:last-of-type .cross-template-component:not([class*="--background-gray"])) + *:has([class*="--background-gray"]) {
  border-top: 0;
  margin-top: 0;
}
/* 
* INSIDE + OUTSIDE GROUPING RULES - ADD DIVIDER
* 
* If first .cross-template-component inside .grouping has same background 
* as the .cross-template-component preceding .grouping, 
* a dividing line is necessary between them.
* 
* If last cross-template-component inside .grouping has same background
* as first component after .grouping,
* a dividing line is necessary between them.
*/
*:has(.cross-template-component:not([class*="--background-gray"], .showcaseWrapper)) + .grouping:has(div:first-of-type .cross-template-component:not([class*="--background-gray"], [class*="--hidden"])),
.grouping:has(div:last-of-type .cross-template-component:not([class*="--background-gray"])) + *:has(.cross-template-component:not([class*="--background-gray"], [class*="--hidden"]):first-of-type),
*:has([class*="--background-gray"]) + .grouping:has(div:first-of-type [class*="--background-gray"]),
.grouping:has(> div:last-of-type [class*="--background-gray"]) + *:has(> div:first-of-type[class*="--background-gray"]) {
  border-top: solid 1px #ededed !important;
  margin-top: -1px !important;
}
/* 
* INSIDE + OUTSIDE GROUPING RULES - SECTION COMPONENT EXCEPTIONS
* 
* If first .cross-template-component__section inside .grouping is visible,
* and the .cross-template-component preceding .grouping has no background, 
* only add 40px of top padding to .cross-template-component__section. 
*/
*:has(.cross-template-component:not([class*="--background-gray"])) + .grouping > .landingpagesection:has(.cross-template-component__section--visible):first-of-type,
.grouping:has(div:last-of-type .cross-template-component:not([class*="--background-gray"])) + .landingpagesection:has(.cross-template-component__section--visible) {
  padding-top: 40px;
}
/* 
* If first .cross-template-component inside .grouping has no background,
* and follows a section component,,
* remove top padding from first .cross-template-component inside .grouping. 
*/
.landingpagesection:has(.cross-template-component__section--visible) + .grouping > div:first-of-type:has(.cross-template-component:not([class*="--background-gray"])) {
  padding-top: 0;
}
/* 
* If first .cross-template-component__section after .grouping is visible,
* and has no background,
* follows a .grouping with .landingpagesection:has(.cross-template-component__section--visible):last-of-type,
* top padding should be 0, to ensure single 60px space between .landingpagesection and next .cross-template-component
*/
.grouping:has(.landingpagesection:last-child .cross-template-component__section--visible) + *:has(.cross-template-component:not([class*="--background-gray"])) {
  padding-top: 0;
}
/* 
* INSIDE + OUTSIDE GROUPING RULES - SHOWCASE COMPONENT EXCEPTIONS
* 
* If first .cross-template-component inside .grouping has no background,
* and is preceded by a showcase component, 
* include no top padding, keeping single 60px bottom padding from Showcase component.  
*/
.showcase + .grouping > div:first-of-type:has(.cross-template-component:not([class*="--background-gray"])) {
  padding-top: 0;
}