.sf-scope {
	/* Ensure WA components remain readable even if the host site uses a small root font-size
	   or the host theme stylesheet is not loaded (e.g. list.php / review.php admin views). */
	--wa-font-size-m: var(--sf-wa-font-size-m, 16px);
	font-size: var(--sf-font-size, var(--sf-wa-font-size-m, 16px));

	/* Some WA parts refer to other tokens that are normally provided by a theme file.
	   Define a minimal consistent set so "small" controls/buttons scale too. */
	--wa-font-size-s: calc(var(--wa-font-size-m) / 1.125);
	--wa-font-size-xs: calc(var(--wa-font-size-s) / 1.125);
	--wa-font-size-2xs: calc(var(--wa-font-size-xs) / 1.125);
	--wa-font-size-l: calc(var(--wa-font-size-m) * 1.125 * 1.125);
	--wa-font-size-xl: calc(var(--wa-font-size-l) * 1.125 * 1.125);
	--wa-font-size-smaller: calc(1em / 1.125);
	--wa-font-size-larger: calc(1em * 1.125 * 1.125);
	--wa-font-size-base: var(--wa-font-size-m);
}

.sf-scope .sf-form { max-width: 960px; margin: 0 auto; }
.sf-scope wa-card { display:block; }
.sf-scope .wa-grid { margin-bottom: var(--wa-space-l); }
.sf-scope .wa-stack { margin-bottom: var(--wa-space-l); }
/* Flex-based layout for predictable wrapping without overlap */
.sf-scope .sf-flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-m);
	align-items: flex-start;
}
.sf-scope .sf-item {
	flex: 1 1 20rem; /* grow to fill row, prefer ~20rem width */
	min-width: 16rem; /* avoid too-narrow fields */
	box-sizing: border-box;
}
/* Dividers should always span the full row */
.sf-scope .sf-divider.sf-item {
	flex: 1 1 100%;
	min-width: 100%;
	max-width: 100%;
}
/* Three size buckets using max-width. On wide screens, small => 3 per row */
.sf-scope .sf-size-s { flex-basis: 33.333%; max-width: 33.333%; }
.sf-scope .sf-size-m { flex-basis: 50%; max-width: 50%; }
.sf-scope .sf-size-l { flex-basis: 100%; max-width: 100%; min-width: 100%; }
@media (max-width: 900px) {
	/* On medium screens, small collapses to two per row; medium to full */
	.sf-scope .sf-size-s { flex-basis: 50%; max-width: 50%; }
	.sf-scope .sf-size-m { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 640px) {
	/* On narrow screens, everything stacks full width */
	.sf-scope .sf-item { flex-basis: 100%; min-width: 100%; max-width: 100%; }
}
/* Enforce predictable tracks so cols=2 equals half on desktop */
.sf-scope .wa-grid.sf-grid {
	/* Force 4 equal columns on larger screens */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
@media (max-width: 900px) {
	/* Reduce to two columns on medium screens */
	.sf-scope .wa-grid.sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	/* Single column on small screens */
	.sf-scope .wa-grid.sf-grid { grid-template-columns: 1fr; }
}
/* Prevent wide controls from overflowing their card/container */
.sf-scope input[type="text"],
.sf-scope input[type="email"],
.sf-scope input[type="tel"],
.sf-scope input[type="number"],
.sf-scope select,
.sf-scope textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
/* Ensure WA card content doesn’t clip children unexpectedly */
.sf-scope wa-card { overflow: visible; }
/* Divider styling */
.sf-scope .sf-divider { padding-top: var(--wa-space-m); margin: var(--wa-space-s) 0 var(--wa-space-m); border-top: 1px solid var(--wa-color-border-subtle); }
.sf-scope .sf-divider wa-heading { display:block; margin-bottom: var(--wa-space-2xs); font-weight: 700; }
.sf-scope .sf-note { color: var(--wa-color-text-subtle); font-size: var(--wa-font-size-small); }

/* Removed grid span overrides in favor of simple flex sizing */