/**
 * Product Trust Strip — .espt-block-pd-trust
 *
 * Vars set by the spec: --cols --gap --icon-size --head-size --sub-size
 * --title-size --pad-y --pad-x --radius --ic-pad --ic-radius --stagger
 * --ticker-speed --title-color --head-color --sub-color --icon-color
 * --ic-bg --box-bg --box-line. Per badge: --i (order) and --i-color.
 * Mobile-first; nothing may overflow 320px.
 */

.espt-block-pd-trust .espt-pdt {
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

/* Editor-only "nothing to show yet" note. */
.espt-block-pd-trust .espt-block-note {
	background: #f8fafc;
	border: 1px dashed var(--bd-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 13px;
	margin: 0;
	padding: 14px 16px;
	text-align: center;
}

.espt-block-pd-trust .espt-pdt-title {
	color: var(--title-color, var(--bd-ink));
	font-size: var(--title-size, 15px);
	font-weight: 800;
	line-height: 1.3;
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- the grid */
.espt-block-pd-trust .espt-pdt-grid {
	display: grid;
	gap: var(--gap, 8px);
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	min-width: 0;
	width: 100%;
}

.espt-block-pd-trust .espt-pdt-item {
	align-items: center;
	background: var(--box-bg, #f8fafc);
	border: 1px solid var(--box-line, #eef2f6);
	border-radius: var(--radius, 12px);
	color: inherit;
	display: flex;
	gap: 8px;
	min-width: 0;
	padding: var(--pad-y, 12px) var(--pad-x, 14px);
	text-decoration: none;
	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.espt-block-pd-trust .espt-pdt-item.is-link {
	cursor: pointer;
}

.espt-block-pd-trust .espt-pdt-tx {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.espt-block-pd-trust .espt-pdt-h {
	color: var(--head-color, var(--bd-ink));
	display: block;
	font-size: var(--head-size, 13px);
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.espt-block-pd-trust .espt-pdt-s {
	color: var(--sub-color, var(--bd-muted));
	display: block;
	font-size: var(--sub-size, 11px);
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------- icon / image / emoji */
.espt-block-pd-trust .espt-pdt-ic {
	align-items: center;
	color: var(--i-color, var(--icon-color, var(--bd-primary)));
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--icon-size, 22px);
	justify-content: center;
	line-height: 0;
}

/* The library's icons carry their own fill/stroke = currentColor — never set
   fill here, CSS beats the SVG's own fill="none" and floods stroked icons. */
.espt-block-pd-trust .espt-pdt-svg svg {
	height: 1em;
	width: 1em;
}

.espt-block-pd-trust .espt-pdt-ic img {
	display: block;
	height: 1em;
	max-width: none;
	object-fit: contain;
	width: 1em;
}

.espt-block-pd-trust .espt-pdt-emoji {
	font-size: 1em;
	line-height: 1;
}

.espt-block-pd-trust.is-icon-style-circle .espt-pdt-ic,
.espt-block-pd-trust.is-icon-style-square .espt-pdt-ic,
.espt-block-pd-trust.is-icon-style-ring .espt-pdt-ic {
	background: var(--ic-bg, var(--bd-soft));
	border-radius: 999px;
	padding: var(--ic-pad, 9px);
}

.espt-block-pd-trust.is-icon-style-square .espt-pdt-ic {
	border-radius: var(--ic-radius, 12px);
}

.espt-block-pd-trust.is-icon-style-ring .espt-pdt-ic {
	background: transparent;
	border: 2px solid currentColor;
}

/* ------------------------------------------------------------- icon position */

/* Stacked: the item becomes a column, so horizontal placement is align-items.
   justify-content (what the alignment rules below set) would push the badge to
   the bottom of the card instead — hence the explicit pairs. */
.espt-block-pd-trust.is-icon-pos-top .espt-pdt-item {
	flex-direction: column;
	justify-content: center;
}

.espt-block-pd-trust.is-icon-pos-top.is-text-align-left .espt-pdt-item {
	align-items: flex-start;
	justify-content: center;
	text-align: left;
}

.espt-block-pd-trust.is-icon-pos-top.is-text-align-center .espt-pdt-item {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.espt-block-pd-trust.is-icon-pos-top.is-text-align-right .espt-pdt-item {
	align-items: flex-end;
	justify-content: center;
	text-align: right;
}

.espt-block-pd-trust.is-icon-pos-top .espt-pdt-tx {
	width: 100%;
}

/* Icon after the text: the row is reversed, so flex-start is the right edge
   and flex-end the left one — the plain alignment rules would mirror. */
.espt-block-pd-trust.is-icon-pos-right .espt-pdt-item {
	flex-direction: row-reverse;
}

.espt-block-pd-trust.is-icon-pos-right.is-text-align-left .espt-pdt-item {
	justify-content: flex-end;
}

.espt-block-pd-trust.is-icon-pos-right.is-text-align-center .espt-pdt-item {
	justify-content: center;
}

.espt-block-pd-trust.is-icon-pos-right.is-text-align-right .espt-pdt-item {
	justify-content: flex-start;
}

/* ---------------------------------------------------------------- alignment */
.espt-block-pd-trust.is-text-align-center .espt-pdt-title {
	text-align: center;
}

.espt-block-pd-trust.is-text-align-center .espt-pdt-item {
	justify-content: center;
	text-align: center;
}

.espt-block-pd-trust.is-text-align-center .espt-pdt-tx {
	align-items: center;
}

.espt-block-pd-trust.is-text-align-right .espt-pdt-title {
	text-align: right;
}

.espt-block-pd-trust.is-text-align-right .espt-pdt-item {
	justify-content: flex-end;
	text-align: right;
}

.espt-block-pd-trust.is-text-align-right .espt-pdt-tx {
	align-items: flex-end;
}

/* ------------------------------------------------------------------ designs */
.espt-block-pd-trust.is-design-soft .espt-pdt-item {
	background: var(--box-bg, var(--bd-soft));
	border-color: var(--box-line, var(--bd-soft-line));
}

.espt-block-pd-trust.is-design-outline .espt-pdt-item {
	background: var(--box-bg, transparent);
	border: 2px solid var(--box-line, var(--i-color, var(--icon-color, var(--bd-primary))));
}

.espt-block-pd-trust.is-design-joined .espt-pdt-grid {
	background: var(--box-line, #eef2f6);
	border: 1px solid var(--box-line, #eef2f6);
	border-radius: var(--radius, 12px);
	gap: 1px;
	overflow: hidden;
}

.espt-block-pd-trust.is-design-joined.no-divider .espt-pdt-grid {
	background: transparent;
	gap: 0;
}

.espt-block-pd-trust.is-design-joined .espt-pdt-item {
	background: var(--box-bg, #fff);
	border: 0;
	border-radius: 0;
}

.espt-block-pd-trust.is-design-minimal .espt-pdt-item {
	background: transparent;
	border: 0;
	padding: 4px 0;
}

.espt-block-pd-trust.is-design-dark .espt-pdt-item {
	background: var(--box-bg, var(--bd-deep));
	border-color: var(--box-line, transparent);
}

.espt-block-pd-trust.is-design-dark .espt-pdt-h {
	color: var(--head-color, #fff);
}

.espt-block-pd-trust.is-design-dark .espt-pdt-s {
	color: var(--sub-color, rgba(255, 255, 255, 0.72));
}

.espt-block-pd-trust.is-design-dark .espt-pdt-ic {
	color: var(--i-color, var(--icon-color, var(--bd-accent)));
}

.espt-block-pd-trust.is-design-dark.is-icon-style-circle .espt-pdt-ic,
.espt-block-pd-trust.is-design-dark.is-icon-style-square .espt-pdt-ic {
	background: var(--ic-bg, rgba(255, 255, 255, 0.12));
}

.espt-block-pd-trust.is-design-gradient .espt-pdt-item {
	background: var(--box-bg, linear-gradient(135deg, var(--bd-primary), var(--bd-primary-dark)));
	border-color: var(--box-line, transparent);
}

.espt-block-pd-trust.is-design-gradient .espt-pdt-h {
	color: var(--head-color, #fff);
}

.espt-block-pd-trust.is-design-gradient .espt-pdt-s {
	color: var(--sub-color, rgba(255, 255, 255, 0.82));
}

.espt-block-pd-trust.is-design-gradient .espt-pdt-ic {
	color: var(--i-color, var(--icon-color, #fff));
}

.espt-block-pd-trust.is-design-gradient.is-icon-style-circle .espt-pdt-ic,
.espt-block-pd-trust.is-design-gradient.is-icon-style-square .espt-pdt-ic {
	background: var(--ic-bg, rgba(255, 255, 255, 0.18));
}

.espt-block-pd-trust.is-design-glass .espt-pdt-item {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background: var(--box-bg, rgba(255, 255, 255, 0.55));
	border-color: var(--box-line, rgba(255, 255, 255, 0.75));
	box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.45);
}

.espt-block-pd-trust.is-design-pills .espt-pdt-grid {
	display: flex;
	flex-wrap: wrap;
}

.espt-block-pd-trust.is-design-pills .espt-pdt-item {
	border-radius: 999px;
	flex: 0 1 auto;
	gap: 8px;
	max-width: 100%;
	padding: calc(var(--pad-y, 12px) * 0.6) calc(var(--pad-x, 14px) * 0.9);
}

.espt-block-pd-trust.is-design-pills .espt-pdt-s {
	display: none;
}

.espt-block-pd-trust.is-design-pills.is-text-align-center .espt-pdt-grid {
	justify-content: center;
}

.espt-block-pd-trust.is-design-pills.is-text-align-right .espt-pdt-grid {
	justify-content: flex-end;
}

.espt-block-pd-trust.is-design-banner .espt-pdt-grid {
	background: var(--box-bg, var(--bd-primary));
	border-radius: var(--radius, 12px);
	gap: 0;
	padding: 4px;
}

.espt-block-pd-trust.is-design-banner .espt-pdt-item {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.espt-block-pd-trust.is-design-banner.is-divider .espt-pdt-item + .espt-pdt-item {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.25);
}

.espt-block-pd-trust.is-design-banner .espt-pdt-h {
	color: var(--head-color, #fff);
}

.espt-block-pd-trust.is-design-banner .espt-pdt-s {
	color: var(--sub-color, rgba(255, 255, 255, 0.8));
}

.espt-block-pd-trust.is-design-banner .espt-pdt-ic {
	color: var(--i-color, var(--icon-color, #fff));
}

.espt-block-pd-trust.is-design-banner.is-icon-style-circle .espt-pdt-ic,
.espt-block-pd-trust.is-design-banner.is-icon-style-square .espt-pdt-ic {
	background: var(--ic-bg, rgba(255, 255, 255, 0.18));
}

/* ------------------------------------------------------------------- ticker */
.espt-block-pd-trust .espt-pdt-vp {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	max-width: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.espt-block-pd-trust .espt-pdt-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.espt-block-pd-trust.is-design-ticker .espt-pdt-track {
	animation: espt-pdt-run var(--ticker-speed, 26s) linear infinite;
}

.espt-block-pd-trust .espt-pdt-group {
	align-items: stretch;
	display: flex;
	flex: 0 0 auto;
	gap: var(--gap, 8px);
	padding-right: var(--gap, 8px);
}

/* Ticker badges never wrap, so cap them — one very long sub-heading would
   otherwise make a single badge wider than the phone. */
.espt-block-pd-trust.is-design-ticker .espt-pdt-item {
	flex: 0 0 auto;
	max-width: min(84vw, 420px);
}

.espt-block-pd-trust.is-design-ticker.is-ticker-pause .espt-pdt-vp:hover .espt-pdt-track,
.espt-block-pd-trust.is-design-ticker.is-ticker-pause .espt-pdt-vp:focus-within .espt-pdt-track {
	animation-play-state: paused;
}

@keyframes espt-pdt-run {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------ rotating single badge */
.espt-block-pd-trust .espt-pdt-rot {
	display: flex;
	flex-direction: column;
	gap: var(--gap, 8px);
	min-width: 0;
}

/* The script stamps data-espt-rot only when it really starts rotating (more
   than one badge, motion allowed) — until then the badges stay a plain
   readable column, so no-JS and reduced-motion visitors lose nothing. */
.espt-block-pd-trust.is-design-rotate .espt-pdt-rot[data-espt-rot] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-pd-trust.is-design-rotate .espt-pdt-rot[data-espt-rot] > .espt-pdt-item {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.45s ease, transform 0.45s ease;
	/* Beat the entrance stagger — every slide must fade at the same speed. */
	transition-delay: 0s;
	visibility: hidden;
}

.espt-block-pd-trust.is-design-rotate .espt-pdt-rot[data-espt-rot] > .espt-pdt-item.is-on {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	visibility: visible;
}

/* ------------------------------------------------- entrance (JS adds .is-in) */
.espt-block-pd-trust[data-espt-ready].is-anim-fade .espt-pdt-item,
.espt-block-pd-trust[data-espt-ready].is-anim-up .espt-pdt-item,
.espt-block-pd-trust[data-espt-ready].is-anim-pop .espt-pdt-item,
.espt-block-pd-trust[data-espt-ready].is-anim-slide .espt-pdt-item {
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: calc(var(--i, 0) * var(--stagger, 70ms));
}

.espt-block-pd-trust[data-espt-ready].is-anim-up .espt-pdt-item {
	transform: translateY(18px);
}

.espt-block-pd-trust[data-espt-ready].is-anim-pop .espt-pdt-item {
	transform: scale(0.9);
}

.espt-block-pd-trust[data-espt-ready].is-anim-slide .espt-pdt-item {
	transform: translateX(-22px);
}

.espt-block-pd-trust[data-espt-ready].is-in .espt-pdt-item {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------- hover */
@media (hover: hover) {
	.espt-block-pd-trust.is-hover-lift .espt-pdt-item:hover {
		box-shadow: 0 14px 26px -16px rgba(15, 23, 42, 0.45);
		transform: translateY(-3px);
	}

	.espt-block-pd-trust.is-hover-scale .espt-pdt-item:hover {
		transform: scale(1.03);
	}

	.espt-block-pd-trust.is-hover-glow .espt-pdt-item:hover {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--i-color, var(--icon-color, var(--bd-primary))) 25%, transparent);
	}

	.espt-block-pd-trust.is-hover-tint .espt-pdt-item:hover {
		background: color-mix(in srgb, var(--i-color, var(--icon-color, var(--bd-primary))) 8%, var(--box-bg, #f8fafc));
		border-color: color-mix(in srgb, var(--i-color, var(--icon-color, var(--bd-primary))) 35%, transparent);
	}

	.espt-block-pd-trust.is-hover-lift .espt-pdt-item.is-link:hover .espt-pdt-h,
	.espt-block-pd-trust.is-hover-tint .espt-pdt-item.is-link:hover .espt-pdt-h {
		color: var(--i-color, var(--icon-color, var(--bd-primary)));
	}
}

.espt-block-pd-trust .espt-pdt-item.is-link:focus-visible {
	outline: 2px solid var(--i-color, var(--icon-color, var(--bd-primary)));
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- tablet up */
@media (min-width: 768px) {
	.espt-block-pd-trust .espt-pdt-title {
		margin-bottom: 12px;
	}

	.espt-block-pd-trust .espt-pdt-item {
		gap: 12px;
	}
}

/* --------------------------------------------------------------- reduce motion */
@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-trust.is-design-ticker .espt-pdt-track {
		animation: none;
	}

	/* The strip stops moving, so let it be scrolled by hand instead. */
	.espt-block-pd-trust .espt-pdt-vp {
		-webkit-mask-image: none;
		mask-image: none;
		overflow-x: auto;
	}

	.espt-block-pd-trust.is-design-ticker .espt-pdt-group + .espt-pdt-group {
		display: none;
	}

	.espt-block-pd-trust[data-espt-ready].is-anim-fade .espt-pdt-item,
	.espt-block-pd-trust[data-espt-ready].is-anim-up .espt-pdt-item,
	.espt-block-pd-trust[data-espt-ready].is-anim-pop .espt-pdt-item,
	.espt-block-pd-trust[data-espt-ready].is-anim-slide .espt-pdt-item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.espt-block-pd-trust .espt-pdt-item {
		transition: none;
	}
}