/**
 * BD Order Steps — .espt-block-bd-order-steps
 *
 * Mobile first: a vertical left-icon timeline. From 768px the steps become a
 * side-by-side row joined by a connector (unless the design or the Direction
 * control keeps them stacked).
 *
 * Vars set by the spec: --cols --col-gap --row-gap --ic --glyph --ic-bw
 * --ic-bg --ic-bd --glyph-c --n --nf --n-bg --n-c --n-ring --n-ring-w
 * --line --line-w --h-size --sh-size --t-size --s-size --h-color --t-color
 * --s-color, plus the shared --bd-* layer.
 */

.espt-block-bd-order-steps {
	--line-style: dashed;
}

.espt-block-bd-order-steps.is-connector-solid { --line-style: solid; }
.espt-block-bd-order-steps.is-connector-dotted { --line-style: dotted; }
.espt-block-bd-order-steps.is-connector-arrow,
.espt-block-bd-order-steps.is-connector-none { --line-style: none; }

/* The 6px inline padding is what keeps the number badge inside the block: it
   is placed at -6px on whichever corner the user picks, so a left-hand badge
   on a left-aligned row would otherwise paint outside the block box (and can
   push a horizontal scrollbar on an `alignfull` block). Padding the widget —
   not the grid — keeps the heading, the steps and the CTA on one edge. */
.espt-block-bd-order-steps .bdh28 {
	color: var(--bd-body);
	min-width: 0;
	padding: 0 6px;
}

.espt-block-bd-order-steps .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 13px;
	margin: 0;
	padding: 12px 14px;
}

/* ------------------------------------------------------------ headings */

.espt-block-bd-order-steps .bdh28-h {
	color: var(--h-color, var(--bd-ink));
	font-size: var(--h-size, 20px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 6px;
	overflow-wrap: anywhere;
	text-align: left;
}

.espt-block-bd-order-steps .bdh28-sh {
	color: var(--bd-muted);
	font-size: var(--sh-size, 15px);
	line-height: 1.55;
	margin: 0 0 20px;
	overflow-wrap: anywhere;
	text-align: left;
}

.espt-block-bd-order-steps.is-text-align-center .bdh28-h,
.espt-block-bd-order-steps.is-text-align-center .bdh28-sh { text-align: center; }
.espt-block-bd-order-steps.is-text-align-right .bdh28-h,
.espt-block-bd-order-steps.is-text-align-right .bdh28-sh { text-align: right; }

/* ---------------------------------------------------------- the grid */

.espt-block-bd-order-steps .bdh28-g {
	column-gap: var(--col-gap, 0px);
	display: grid;
	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	row-gap: var(--row-gap, 26px);
}

/* "Always stacked" (and the two vertical designs) ignore the Columns
   control — otherwise --cols would still deal the steps into a tablet row. */
.espt-block-bd-order-steps.is-orientation-vertical .bdh28-g { grid-template-columns: minmax(0, 1fr); }

/* Step — mobile default: icon on the left, text beside it. */
.espt-block-bd-order-steps .bdh28-st {
	align-items: flex-start;
	display: flex;
	gap: 14px;
	min-width: 0;
	position: relative;
	text-align: left;
}

/* Connector (vertical): from under the icon down into the row gap. */
.espt-block-bd-order-steps .bdh28-st::before {
	border-left: var(--line-w, 2px) var(--line-style, dashed) var(--line, var(--bd-line));
	bottom: calc(6px - var(--row-gap, 26px));
	content: "";
	left: calc(var(--ic, 54px) / 2 - var(--line-w, 2px) / 2);
	position: absolute;
	top: calc(var(--ic, 54px) + 6px);
	z-index: 0;
}

.espt-block-bd-order-steps .bdh28-st:last-child::before { display: none; }

/* Arrow-head connector instead of a line. */
.espt-block-bd-order-steps.is-connector-arrow .bdh28-st::after {
	border-bottom: var(--line-w, 2px) solid var(--line, var(--bd-line));
	border-right: var(--line-w, 2px) solid var(--line, var(--bd-line));
	bottom: calc(-1 * var(--row-gap, 26px) / 2 - 5px);
	content: "";
	height: 10px;
	left: calc(var(--ic, 54px) / 2 - 5px);
	position: absolute;
	transform: rotate(45deg);
	width: 10px;
	z-index: 0;
}

.espt-block-bd-order-steps.is-connector-arrow .bdh28-st:last-child::after { display: none; }

/* ------------------------------------------------------- icon + badge */

/* Unclipped, non-round positioning box for the icon and its number. */
.espt-block-bd-order-steps .bdh28-icw {
	display: block;
	flex: none;
	height: var(--ic, 54px);
	position: relative;
	transition: transform 0.3s ease;
	width: var(--ic, 54px);
	z-index: 1;
}

.espt-block-bd-order-steps .bdh28-ic {
	align-items: center;
	background: var(--ic-bg, var(--bd-soft));
	border: var(--ic-bw, 2px) solid var(--ic-bd, var(--bd-primary));
	border-radius: 50%;
	color: var(--glyph-c, var(--bd-primary));
	display: flex;
	height: 100%;
	justify-content: center;
	overflow: hidden;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	width: 100%;
}

.espt-block-bd-order-steps .bdh28-ic .espt-ic {
	font-size: var(--glyph, 24px);
	line-height: 0;
}

/* No fill override here: the icon library mixes filled and stroked SVGs and
   `fill:currentColor` would turn the outline icons into blobs. */
.espt-block-bd-order-steps .bdh28-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block-bd-order-steps .bdh28-img {
	border-radius: inherit;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.espt-block-bd-order-steps.is-icon-shape-rounded .bdh28-ic { border-radius: 26%; }
.espt-block-bd-order-steps.is-icon-shape-square .bdh28-ic { border-radius: 6px; }

.espt-block-bd-order-steps.is-icon-shape-plain .bdh28-ic {
	background: transparent;
	border: 0;
	overflow: visible;
}

/* Icon motion — moved on the whole .bdh28-icw so the number badge travels
   with the circle instead of detaching from it. Only the pulse ring stays on
   the round element, where its box-shadow can follow the shape. */
.espt-block-bd-order-steps.is-icon-anim-pop .bdh28-st:hover .bdh28-icw { transform: translateY(-4px) scale(1.06); }
.espt-block-bd-order-steps.is-icon-anim-tilt .bdh28-st:hover .bdh28-icw { transform: rotate(-8deg) scale(1.04); }
.espt-block-bd-order-steps.is-icon-anim-float .bdh28-icw { animation: esptOsFloat 3.4s ease-in-out infinite; }
.espt-block-bd-order-steps.is-icon-anim-pulse .bdh28-ic { animation: esptOsRing 2.6s ease-out infinite; }

@keyframes esptOsFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

@keyframes esptOsRing {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bd-primary) 40%, transparent); }
	70% { box-shadow: 0 0 0 12px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* number badge */
.espt-block-bd-order-steps .bdh28-n {
	align-items: center;
	background: var(--n-bg, var(--bd-accent));
	border-radius: 50%;
	box-shadow: 0 0 0 var(--n-ring-w, 2px) var(--n-ring, #fff);
	color: var(--n-c, var(--bd-accent-ink));
	display: flex;
	font-size: var(--nf, 12px);
	font-weight: 800;
	height: var(--n, 21px);
	justify-content: center;
	line-height: 1;
	position: absolute;
	width: var(--n, 21px);
	z-index: 3;
}

.espt-block-bd-order-steps.is-num-shape-square .bdh28-n { border-radius: 30%; }

.espt-block-bd-order-steps.is-num-pos-tr .bdh28-n { right: -6px; top: -6px; }
.espt-block-bd-order-steps.is-num-pos-tl .bdh28-n { left: -6px; top: -6px; }
.espt-block-bd-order-steps.is-num-pos-br .bdh28-n { bottom: -6px; right: -6px; }
.espt-block-bd-order-steps.is-num-pos-bl .bdh28-n { bottom: -6px; left: -6px; }
.espt-block-bd-order-steps.is-num-pos-tc .bdh28-n { left: 50%; top: -8px; transform: translateX(-50%); }
.espt-block-bd-order-steps.is-num-pos-bc .bdh28-n { bottom: -8px; left: 50%; transform: translateX(-50%); }

/* ------------------------------------------------------------- text */

.espt-block-bd-order-steps .bdh28-tx {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 2px;
}

.espt-block-bd-order-steps .bdh28-tx b {
	color: var(--t-color, var(--bd-ink));
	display: block;
	font-size: var(--t-size, 15px);
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 3px;
	overflow-wrap: anywhere;
}

/* Scoped to .bdh28-tx so it can never steal the number badge's colour. */
.espt-block-bd-order-steps .bdh28-tx span {
	color: var(--s-color, var(--bd-muted));
	display: block;
	font-size: var(--s-size, 13px);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- CTA */

.espt-block-bd-order-steps .bdh28-cta {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 22px;
	text-align: center;
}

.espt-block-bd-order-steps.is-text-align-left .bdh28-cta { align-items: flex-start; text-align: left; }
.espt-block-bd-order-steps.is-text-align-right .bdh28-cta { align-items: flex-end; text-align: right; }

.espt-block-bd-order-steps .bdh28-btn { max-width: 100%; }
.espt-block-bd-order-steps .bdh28-btn-i { font-size: 1.05em; }
.espt-block-bd-order-steps.is-cta-full .bdh28-btn { width: 100%; }

.espt-block-bd-order-steps .bdh28-note {
	color: var(--bd-muted);
	font-size: 12.5px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.espt-block-bd-order-steps.is-cta-style-pill .bdh28-btn { border-radius: 999px; }
.espt-block-bd-order-steps.is-cta-style-gradient .bdh28-btn { background: linear-gradient(135deg, var(--espt-btn-bg, var(--bd-primary)), var(--bd-primary-dark)); }
.espt-block-bd-order-steps.is-cta-style-accent .bdh28-btn { background: var(--bd-accent); color: var(--bd-accent-ink); }
.espt-block-bd-order-steps.is-cta-style-accent .bdh28-btn:hover { color: var(--bd-accent-ink); }

.espt-block-bd-order-steps.is-cta-style-outline .bdh28-btn {
	background: transparent;
	border: 2px solid var(--bd-primary);
	color: var(--bd-primary);
}

.espt-block-bd-order-steps.is-cta-style-outline .bdh28-btn:hover {
	background: var(--bd-soft);
	color: var(--bd-primary-dark);
}

.espt-block-bd-order-steps.is-cta-pulse .bdh28-btn { animation: esptOsBtn 1.9s ease-in-out infinite; }

@keyframes esptOsBtn {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bd-primary) 45%, transparent); transform: none; }
	50% { box-shadow: 0 0 0 12px transparent; transform: translateY(-2px); }
}

/* ------------------------------------------- one-by-one reveal (JS on) */

.espt-block-bd-order-steps .bdh28-g[data-stagger="on"] .bdh28-st {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.espt-block-bd-order-steps .bdh28-g[data-stagger="on"] .bdh28-st.is-step-in {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------- designs */

/* boxed family: cards / soft / outline / dark / gradient */
.espt-block-bd-order-steps:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st {
	background: var(--bd-box-bg);
	border: 1px solid var(--bd-box-line);
	border-radius: var(--bd-radius);
	padding: var(--bd-pad);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* the connector only spans the gutter between boxes */
.espt-block-bd-order-steps:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st::before {
	bottom: auto;
	height: var(--row-gap, 26px);
	left: calc(var(--bd-pad, 16px) + var(--ic, 54px) / 2 - var(--line-w, 2px) / 2);
	top: 100%;
}

.espt-block-bd-order-steps.is-connector-arrow:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st::after {
	bottom: calc(-1 * var(--row-gap, 26px) / 2 - 5px);
	left: calc(var(--bd-pad, 16px) + var(--ic, 54px) / 2 - 5px);
}

.bd-shadow-soft.espt-block-bd-order-steps:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st { box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.18); }
.bd-shadow-strong.espt-block-bd-order-steps:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st { box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.35); }
.bd-hover-lift.espt-block-bd-order-steps:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st:hover { transform: translateY(-4px); }
.bd-hover-scale.espt-block-bd-order-steps:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st:hover { transform: scale(1.02); }
.bd-hover-glow.espt-block-bd-order-steps:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 28%, transparent); }

.espt-block-bd-order-steps.is-design-soft .bdh28-st {
	background: var(--bd-soft);
	border-color: var(--bd-soft-line);
}

.espt-block-bd-order-steps.is-design-outline .bdh28-st {
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--bd-primary) 32%, transparent);
}

.espt-block-bd-order-steps.is-design-dark .bdh28-st {
	background: var(--bd-deep);
	border-color: rgba(255, 255, 255, 0.14);
}

.espt-block-bd-order-steps.is-design-gradient .bdh28-st {
	background: linear-gradient(140deg, var(--bd-primary), var(--bd-primary-dark));
	border-color: transparent;
}

.espt-block-bd-order-steps:is(.is-design-dark, .is-design-gradient) .bdh28-tx b { color: var(--t-color, #fff); }
.espt-block-bd-order-steps:is(.is-design-dark, .is-design-gradient) .bdh28-tx span { color: var(--s-color, rgba(255, 255, 255, 0.76)); }

.espt-block-bd-order-steps:is(.is-design-dark, .is-design-gradient) .bdh28-ic { color: var(--glyph-c, #fff); }

/* The bubble on dark cards — but "Plain glyph" must stay bubble-less here
   too, so this may not be a plain `.is-design-dark .bdh28-ic` rule (it would
   out-order the icon-shape rule above and bring the circle back). */
.espt-block-bd-order-steps:is(.is-design-dark, .is-design-gradient):not(.is-icon-shape-plain) .bdh28-ic {
	background: var(--ic-bg, rgba(255, 255, 255, 0.12));
	border-color: var(--ic-bd, rgba(255, 255, 255, 0.32));
}

/* minimal — no boxes, no bubble */
.espt-block-bd-order-steps.is-design-minimal .bdh28-ic {
	background: var(--ic-bg, transparent);
	border-color: var(--ic-bd, transparent);
}

/* ribbon — arrow segments (a down-notch card on phones) */
.espt-block-bd-order-steps.is-design-ribbon .bdh28-st {
	background: var(--bd-soft);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px));
	padding: 14px 16px 26px;
}

.espt-block-bd-order-steps.is-design-ribbon .bdh28-st:nth-child(even) { background: color-mix(in srgb, var(--bd-primary) 12%, var(--bd-box-bg)); }

.espt-block-bd-order-steps.is-design-ribbon .bdh28-st:last-child {
	border-radius: var(--bd-radius);
	clip-path: none;
	padding-bottom: 14px;
}

.espt-block-bd-order-steps.is-design-ribbon .bdh28-st::before,
.espt-block-bd-order-steps.is-design-ribbon .bdh28-st::after { display: none; }

/* timeline — always a vertical rail with a card beside it */
.espt-block-bd-order-steps.is-design-timeline .bdh28-g { grid-template-columns: minmax(0, 1fr); }

.espt-block-bd-order-steps.is-design-timeline .bdh28-tx {
	background: var(--bd-box-bg);
	border: 1px solid var(--bd-box-line);
	border-radius: var(--bd-radius);
	padding: 12px 14px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* The timeline's card is .bdh28-tx, so the shared box shadow / hover choices
   have to be wired to it as well. */
.bd-shadow-soft.espt-block-bd-order-steps.is-design-timeline .bdh28-tx { box-shadow: 0 6px 20px -12px rgba(15, 23, 42, 0.2); }
.bd-shadow-strong.espt-block-bd-order-steps.is-design-timeline .bdh28-tx { box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.35); }
.bd-hover-lift.espt-block-bd-order-steps.is-design-timeline .bdh28-st:hover .bdh28-tx { transform: translateY(-3px); }
.bd-hover-scale.espt-block-bd-order-steps.is-design-timeline .bdh28-st:hover .bdh28-tx { transform: scale(1.02); }
.bd-hover-glow.espt-block-bd-order-steps.is-design-timeline .bdh28-st:hover .bdh28-tx { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-primary) 28%, transparent); }

/* zig-zag — always vertical, alternating sides from tablet up */
.espt-block-bd-order-steps.is-design-zigzag .bdh28-g { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------- tablet and up */

@media (min-width: 768px) {

	/* side-by-side row */
	.espt-block-bd-order-steps:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-st {
		display: block;
		text-align: center;
	}

	.espt-block-bd-order-steps:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-icw { margin: 0 auto 12px; }
	.espt-block-bd-order-steps:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-tx { padding-top: 0; }

	/* connector: horizontal, from this icon to the next one */
	.espt-block-bd-order-steps:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-st::before {
		border-left: 0;
		border-top: var(--line-w, 2px) var(--line-style, dashed) var(--line, var(--bd-line));
		bottom: auto;
		height: 0;
		left: calc(50% + var(--ic, 64px) / 2 + 8px);
		right: calc(-50% - var(--col-gap, 0px) + var(--ic, 64px) / 2 + 8px);
		top: calc(var(--ic, 64px) / 2 - var(--line-w, 2px) / 2);
		width: auto;
	}

	.espt-block-bd-order-steps.is-connector-arrow:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-st::after {
		bottom: auto;
		left: auto;
		right: calc(-1 * var(--col-gap, 0px) / 2 - 5px);
		top: calc(var(--ic, 64px) / 2 - 5px);
		transform: rotate(-45deg);
	}

	/* left / right aligned rows keep the icon on the text side */
	.espt-block-bd-order-steps.is-text-align-left:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-st { text-align: left; }
	.espt-block-bd-order-steps.is-text-align-left:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-icw { margin-left: 0; }
	.espt-block-bd-order-steps.is-text-align-left:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-st::before {
		left: calc(var(--ic, 64px) + 8px);
		right: calc(8px - var(--col-gap, 0px));
	}

	.espt-block-bd-order-steps.is-text-align-right:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-st { text-align: right; }
	.espt-block-bd-order-steps.is-text-align-right:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-icw { margin-left: auto; margin-right: 0; }
	.espt-block-bd-order-steps.is-text-align-right:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag) .bdh28-st::before {
		left: calc(100% + 8px);
		right: calc(8px + var(--ic, 64px) - 100% - var(--col-gap, 0px));
	}

	/* More steps than columns = a wrapped row, whose last item would shoot its
	   connector out past the grid. Clip the sides — but with `overflow:hidden`
	   a left/right aligned row would also lose the number badge (it sits at
	   -6px) and the pulse ring, so clip with a little horizontal slack and
	   leave the top and bottom free. */
	.espt-block-bd-order-steps:not(.is-orientation-vertical, .is-design-timeline, .is-design-zigzag):is(.is-design-classic, .is-design-minimal) .bdh28-g {
		clip-path: inset(-40px -8px);
	}

	/* same for the boxed family — 4px of slack keeps the glow ring visible */
	.espt-block-bd-order-steps:not(.is-orientation-vertical):is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-g {
		clip-path: inset(-40px -4px);
	}

	/* boxed designs: connector lives in the gutter only */
	.espt-block-bd-order-steps:not(.is-orientation-vertical):is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st::before {
		height: 0;
		left: 100%;
		right: auto;
		top: calc(var(--bd-pad, 24px) + var(--ic, 64px) / 2 - var(--line-w, 2px) / 2);
		width: var(--col-gap, 0px);
	}

	.espt-block-bd-order-steps.is-connector-arrow:not(.is-orientation-vertical):is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st::after {
		left: auto;
		right: calc(-1 * var(--col-gap, 0px) / 2 - 5px);
		top: calc(var(--bd-pad, 24px) + var(--ic, 64px) / 2 - 5px);
	}

	/* ribbon: chevron segments */
	.espt-block-bd-order-steps.is-design-ribbon:not(.is-orientation-vertical) .bdh28-st {
		clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
		padding: 18px 26px 18px 42px;
	}

	.espt-block-bd-order-steps.is-design-ribbon:not(.is-orientation-vertical) .bdh28-st:first-child:not(:last-child) {
		clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
		padding-left: 24px;
	}

	.espt-block-bd-order-steps.is-design-ribbon:not(.is-orientation-vertical) .bdh28-st:last-child:not(:first-child) {
		border-radius: 0;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%);
		padding-bottom: 18px;
	}

	.espt-block-bd-order-steps.is-design-ribbon:not(.is-orientation-vertical) .bdh28-st:only-child {
		border-radius: var(--bd-radius);
		clip-path: none;
	}

	/* zig-zag: centre rail, alternating sides */
	.espt-block-bd-order-steps.is-design-zigzag .bdh28-g::before {
		border-left: var(--line-w, 2px) var(--line-style, dashed) var(--line, var(--bd-line));
		bottom: 10px;
		content: "";
		left: 50%;
		position: absolute;
		top: 10px;
		transform: translateX(-50%);
	}

	.espt-block-bd-order-steps.is-design-zigzag .bdh28-st { width: calc(50% - 28px); }
	.espt-block-bd-order-steps.is-design-zigzag .bdh28-st:nth-child(odd) { flex-direction: row-reverse; text-align: right; }
	.espt-block-bd-order-steps.is-design-zigzag .bdh28-st:nth-child(even) { margin-left: calc(50% + 28px); }
	.espt-block-bd-order-steps.is-design-zigzag .bdh28-st::before,
	.espt-block-bd-order-steps.is-design-zigzag .bdh28-st::after { display: none; }

	/* CTA is only full width on phones */
	.espt-block-bd-order-steps.is-cta-full .bdh28-btn { width: auto; }
	.espt-block-bd-order-steps .bdh28-cta { margin-top: 26px; }
}

/* -------------------------------------------------------- desktop */

@media (min-width: 1024px) {
	.espt-block-bd-order-steps .bdh28-h { margin-bottom: 8px; }
	.espt-block-bd-order-steps .bdh28-sh { margin-bottom: 26px; }
	.espt-block-bd-order-steps:is(.is-design-cards, .is-design-soft, .is-design-outline, .is-design-dark, .is-design-gradient) .bdh28-st { padding: var(--bd-pad); }
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-order-steps .bdh28-ic,
	.espt-block-bd-order-steps .bdh28-icw,
	.espt-block-bd-order-steps .bdh28-st,
	.espt-block-bd-order-steps .bdh28-tx,
	.espt-block-bd-order-steps .bdh28-btn {
		animation: none;
		transition: none;
	}

	.espt-block-bd-order-steps .bdh28-g[data-stagger="on"] .bdh28-st {
		opacity: 1;
		transform: none;
	}
}