/* Loop Group By — structural layout only (style via toolkit title CSS).
 *
 * Titles occupy a full loop row. Wrappers are display:contents so looped
 * items stay grid/flex children of the Divi column and keep its column
 * count, gaps, wrap, and alignment. Do not size titles with flex-basis 100%
 * (that is the main axis, so it becomes height inside a column-flex parent).
 *
 * Loop Extended Title font CSS (GroupByTitleStyles) targets:
 *   .tiiny-loop-grouped[data-tiiny-group-scope="<order-class>"] .tiiny-loop-group__title
 * VB StyleContainer still uses :has({{selector}}) for live Divi font UI.
 */

/* Flex loops default to nowrap. Wrap so a 100% title can take its own line.
   Pack leftover stretch space (tall sibling columns) after the items. */
.tiiny-loop-grouped {
	flex-wrap: wrap;
	align-content: start;
}

.tiiny-loop-group,
.tiiny-loop-group__items {
	display: contents;
}

.tiiny-loop-group.is-tiiny-loop-group-empty {
	display: none !important;
}

.tiiny-loop-group__title,
[data-tiiny-vb-group-title] {
	scroll-margin-top: 1rem;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
	/* Grid loops: full row so the heading does not sit in cell 1. */
	grid-column: 1 / -1;
	justify-self: stretch;
	align-self: start;
	/* Flex loops: content height, full width. Basis auto — not 100%. */
	flex: 0 0 auto;
}

.tiiny-group-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.85rem;
	align-items: baseline;
}

.tiiny-group-jump__link {
	text-decoration: none;
}

.tiiny-group-jump__link[hidden] {
	display: none !important;
}

.tiiny-group-jump__notice {
	margin: 0;
	font-size: 0.9em;
}