/**
 * Vstack Layout Fixes CSS
 *
 * Bootstrap's .vstack defaults to align-items: stretch, which blockifies
 * and stretches any non-flex child (d-inline, d-inline-block, d-block) to
 * fill the full cross-axis width, regardless of the child's own display
 * utility class - e.g. a <p class="d-inline-block"> badge becomes a
 * full-width bar instead of a content-hugging pill.
 *
 * This is invisible in the block editor, where the child sits inside
 * Gutenberg's own block-list wrapper <div> rather than being a direct flex
 * item, but it always applies on the real frontend where the child IS a
 * direct .vstack child.
 *
 * Scoped to these specific display utilities (not .vstack itself) so
 * layouts that rely on stretch by default - e.g. product cards filling
 * their grid column - are unaffected; a child only opts out of stretching
 * when it's explicitly marked as shrink-to-content via one of these
 * classes.
 */

.vstack > .d-inline,
.vstack > .d-inline-block,
.vstack > .d-block {
	align-self: flex-start;
}