.spw-wrapper {
	--spw-columns-desktop: 5;
	--spw-number-color: #2f6fed;
	--spw-number-bg: #eaf1ff;
	--spw-title-color: #0f1b2d;
	--spw-title-bg: transparent;
	--spw-title-bg-padding: 0px;
	--spw-text-color: #5b6472;
	--spw-desc-bg: transparent;
	--spw-desc-bg-padding: 0px;
	--spw-line-color: #d8e2f5;
	--spw-card-bg: transparent;
	--spw-card-padding: 0px;
	--spw-card-radius: 10px;
	--spw-connector-offset: 0px;
	--spw-font-family: inherit;
	--spw-number-size: 22px;
	--spw-title-size: 18px;
	--spw-desc-size: 14px;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--spw-font-family);
}

.spw-wrapper *,
.spw-wrapper *::before,
.spw-wrapper *::after {
	box-sizing: border-box;
}

.spw-steps {
	display: grid;
	grid-template-columns: repeat(var(--spw-columns-desktop, 5), minmax(0, 1fr));
	gap: 32px;
	width: 100%;
}

.spw-step-inner {
	display: flex;
	flex-direction: column;
	text-align: left;
	background: var(--spw-card-bg);
	padding: var(--spw-card-padding);
	border-radius: var(--spw-card-radius);
}

.spw-step-head {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.spw-step-number {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--spw-number-bg);
	color: var(--spw-number-color);
	font-weight: var(--spw-number-font-weight, 700);
	font-style: var(--spw-number-font-style, normal);
	text-transform: var(--spw-number-font-transform, none);
	font-family: var(--spw-number-font-family, var(--spw-font-family, inherit));
	font-size: var(--spw-number-size);
	line-height: 1;
}

.spw-number-style-square .spw-step-number {
	border-radius: 14px;
}

.spw-number-style-plain .spw-step-number {
	background: transparent;
	width: auto;
	height: auto;
	padding: 0;
	font-size: calc(var(--spw-number-size) * 1.3);
}

.spw-step-connector {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -2px;
	color: var(--spw-line-color);
	min-width: 20px;
	transform: translateY(var(--spw-connector-offset, 0px));
}

/* Line: a plain bar through the middle */
.spw-connector-line {
	height: 2px;
	background: var(--spw-line-color);
	color: transparent;
}

/* Arrow / chevron: small inline SVG, centered, with thin rules either side
   so it still reads as a connector rather than a floating icon */
.spw-connector-arrow,
.spw-connector-chevron {
	gap: 4px;
}

.spw-connector-arrow::before,
.spw-connector-arrow::after,
.spw-connector-chevron::before,
.spw-connector-chevron::after {
	content: '';
	flex: 1 1 auto;
	height: 2px;
	background: var(--spw-line-color);
}

.spw-connector-arrow svg,
.spw-connector-chevron svg {
	flex: 0 0 auto;
}

/* Dots */
.spw-connector-dots {
	gap: 5px;
}

.spw-connector-dots i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--spw-line-color);
	flex: 0 0 auto;
}

.spw-step:last-child .spw-step-connector,
.spw-no-line .spw-step-connector {
	display: none;
}

.spw-step-title {
	margin: 16px 0 8px;
	color: var(--spw-title-color);
	background: var(--spw-title-bg);
	font-size: var(--spw-title-size);
	font-weight: var(--spw-title-font-weight, 600);
	font-style: var(--spw-title-font-style, normal);
	text-transform: var(--spw-title-font-transform, none);
	font-family: var(--spw-title-font-family, var(--spw-font-family, inherit));
	line-height: 1.3;
	padding: var(--spw-title-bg-padding, 0);
	border-radius: 4px;
	display: inline-block;
}

.spw-step-desc {
	margin: 0;
	color: var(--spw-text-color);
	background: var(--spw-desc-bg);
	font-size: var(--spw-desc-size);
	font-weight: var(--spw-desc-font-weight, 400);
	font-style: var(--spw-desc-font-style, normal);
	text-transform: var(--spw-desc-font-transform, none);
	font-family: var(--spw-desc-font-family, var(--spw-font-family, inherit));
	line-height: 1.6;
	padding: var(--spw-desc-bg-padding, 0);
	border-radius: 4px;
	display: inline-block;
}

/* Fallback breakpoints for contexts where no inline media query was emitted
   (e.g. the theme's own responsive behaviour should still degrade gracefully). */
@media (max-width: 1024px) {
	.spw-steps {
		grid-template-columns: repeat(min(3, var(--spw-columns-desktop, 3)), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.spw-steps {
		grid-template-columns: repeat(min(2, var(--spw-columns-desktop, 1)), minmax(0, 1fr));
		gap: 12px;
	}

	/* On a single (stacked) column, "next step" is below rather than to the
	   right, so rotate the connector 90° to point down instead of hiding it. */
	.spw-step-head {
		flex-direction: column;
		align-items: center;
	}

	.spw-step-connector {
		flex-direction: column;
		width: auto;
		height: 32px;
		min-width: 0;
		margin: 6px 0 0;
	}

	.spw-connector-line {
		width: 2px;
		height: 100%;
	}

	.spw-connector-arrow,
	.spw-connector-chevron {
		flex-direction: column;
	}

	.spw-connector-arrow::before,
	.spw-connector-arrow::after,
	.spw-connector-chevron::before,
	.spw-connector-chevron::after {
		width: 2px;
		height: auto;
	}

	.spw-connector-arrow svg,
	.spw-connector-chevron svg {
		transform: rotate(90deg);
	}

	.spw-connector-dots {
		flex-direction: column;
	}
}