/* Reusable Trust Bar storefront component. */

.ca-trust-bar {
	--ca-trust-bar-space-top: var(--ca-section-spacing-small);
	--ca-trust-bar-space-bottom: var(--ca-section-spacing-small);
	--ca-trust-bar-container: var(--ca-section-width-wide);
	--ca-trust-bar-columns: 4;
	--ca-trust-bar-gap: var(--ca-grid-gap);
	--ca-trust-bar-fade-color: var(--ca-color-bg);

	position: relative;
	width: 100%;
	padding-block: var(--ca-trust-bar-space-top) var(--ca-trust-bar-space-bottom);
	color: var(--ca-color-text);
}

.ca-trust-bar--space-top-none {
	--ca-trust-bar-space-top: var(--ca-section-spacing-none);
}

.ca-trust-bar--space-top-medium {
	--ca-trust-bar-space-top: var(--ca-section-spacing-medium);
}

.ca-trust-bar--space-top-large {
	--ca-trust-bar-space-top: var(--ca-section-spacing-large);
}

.ca-trust-bar--space-top-xlarge {
	--ca-trust-bar-space-top: var(--ca-section-spacing-xlarge);
}

.ca-trust-bar--space-bottom-none {
	--ca-trust-bar-space-bottom: var(--ca-section-spacing-none);
}

.ca-trust-bar--space-bottom-medium {
	--ca-trust-bar-space-bottom: var(--ca-section-spacing-medium);
}

.ca-trust-bar--space-bottom-large {
	--ca-trust-bar-space-bottom: var(--ca-section-spacing-large);
}

.ca-trust-bar--space-bottom-xlarge {
	--ca-trust-bar-space-bottom: var(--ca-section-spacing-xlarge);
}

.ca-trust-bar--width-contained {
	--ca-trust-bar-container: var(--ca-section-width-contained);
}

.ca-trust-bar--width-full {
	--ca-trust-bar-container: var(--ca-section-width-full);
}

.ca-trust-bar--columns-2 {
	--ca-trust-bar-columns: 2;
}

.ca-trust-bar--columns-3 {
	--ca-trust-bar-columns: 3;
}

.ca-trust-bar--surface-soft {
	--ca-trust-bar-fade-color: var(--ca-color-surface-muted);

	background: var(--ca-color-surface-muted);
}

.ca-trust-bar--surface-raised {
	--ca-trust-bar-fade-color: var(--ca-color-surface-raised);

	background: var(--ca-color-surface-raised);
	box-shadow: inset 0 var(--ca-border-width) var(--ca-color-border), inset 0 calc(0px - var(--ca-border-width)) var(--ca-color-border);
}

.ca-trust-bar--surface-brand {
	--ca-trust-bar-fade-color: var(--ca-color-primary);

	color: var(--ca-color-text-inverse);
	background: var(--ca-gradient-primary);
}

.ca-trust-bar__container {
	width: min(calc(100% - (var(--ca-page-gutter) * 2)), var(--ca-trust-bar-container));
	margin-inline: auto;
}

.ca-trust-bar--width-full .ca-trust-bar__container {
	width: 100%;
	max-width: none;
	padding-inline: var(--ca-page-gutter);
}

.ca-trust-bar__track {
	display: grid;
	grid-template-columns: repeat(var(--ca-trust-bar-columns), minmax(0, 1fr));
	gap: var(--ca-trust-bar-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ca-trust-bar__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--ca-space-3);
	min-width: 0;
}

.ca-trust-bar__item--without-icon {
	grid-template-columns: minmax(0, 1fr);
}

.ca-trust-bar__icon {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--ca-color-primary);
	background: color-mix(in srgb, var(--ca-color-primary) 10%, var(--ca-color-surface));
	border: var(--ca-border-width) solid color-mix(in srgb, var(--ca-color-primary) 24%, var(--ca-color-border));
	border-radius: var(--ca-radius-pill);
}

.ca-trust-bar__icon-svg {
	display: block;
	width: var(--ca-icon-size);
	height: var(--ca-icon-size);
}

.ca-trust-bar__copy,
.ca-trust-bar__copy strong,
.ca-trust-bar__copy > span {
	display: block;
}

.ca-trust-bar__copy strong {
	color: currentColor;
	font-family: var(--ca-font-ui);
	font-size: var(--ca-text-sm);
	font-weight: var(--ca-weight-heavy);
	line-height: var(--ca-line-height-ui);
	letter-spacing: var(--ca-letter-spacing-ui);
	text-transform: var(--ca-text-transform-eyebrow);
}

.ca-trust-bar__copy > span {
	margin-top: var(--ca-space-1);
	color: var(--ca-color-muted);
	font-size: var(--ca-text-sm);
	line-height: 1.4;
}

.ca-trust-bar--surface-brand .ca-trust-bar__copy > span {
	color: color-mix(in srgb, var(--ca-color-text-inverse) 78%, transparent);
}

.ca-trust-bar--surface-brand .ca-trust-bar__icon {
	color: var(--ca-color-text-inverse);
	background: color-mix(in srgb, var(--ca-color-text-inverse) 12%, transparent);
	border-color: color-mix(in srgb, var(--ca-color-text-inverse) 32%, transparent);
}

.ca-trust-bar--layout-strip .ca-trust-bar__track {
	padding-block: var(--ca-space-5);
}

.ca-trust-bar--layout-strip.ca-trust-bar--surface-transparent .ca-trust-bar__track {
	border-block: var(--ca-border-width) solid var(--ca-color-border);
}

.ca-trust-bar--layout-cards .ca-trust-bar__item {
	min-height: 100%;
	padding: clamp(var(--ca-space-4), 1.8vw, var(--ca-space-6));
	background: var(--ca-card-bg);
	border: var(--ca-border-width) solid var(--ca-card-border);
	border-radius: var(--ca-radius-lg);
	box-shadow: var(--ca-card-shadow);
	backdrop-filter: var(--ca-card-backdrop-filter);
	-webkit-backdrop-filter: var(--ca-card-backdrop-filter);
	transition: transform var(--ca-duration-normal) var(--ca-ease-standard), border-color var(--ca-duration-normal) var(--ca-ease-standard), box-shadow var(--ca-duration-normal) var(--ca-ease-standard), filter var(--ca-duration-normal) var(--ca-ease-standard);
}

.ca-trust-bar--layout-cards.ca-trust-bar--surface-brand .ca-trust-bar__item {
	color: var(--ca-color-text-inverse);
	background: color-mix(in srgb, var(--ca-color-text-inverse) 11%, transparent);
	border-color: color-mix(in srgb, var(--ca-color-text-inverse) 25%, transparent);
}

.ca-trust-bar--layout-minimal .ca-trust-bar__track {
	gap: 0;
	padding-block: var(--ca-space-4);
}

.ca-trust-bar--layout-minimal .ca-trust-bar__item {
	justify-content: center;
	padding-inline: var(--ca-space-5);
	border-inline-start: var(--ca-border-width) solid var(--ca-color-border);
}

.ca-trust-bar--layout-minimal .ca-trust-bar__item:first-child {
	border-inline-start: 0;
}

.ca-trust-bar--layout-minimal .ca-trust-bar__icon {
	width: 2rem;
	height: 2rem;
	background: transparent;
	border: 0;
}

.ca-trust-bar--layout-minimal.ca-trust-bar--surface-brand .ca-trust-bar__item {
	border-color: color-mix(in srgb, var(--ca-color-text-inverse) 26%, transparent);
}

.ca-trust-bar--align-center .ca-trust-bar__item {
	grid-template-columns: auto minmax(0, max-content);
	justify-content: center;
	text-align: center;
}

.ca-trust-bar--align-center .ca-trust-bar__item--without-icon {
	grid-template-columns: minmax(0, max-content);
	justify-items: center;
}

[data-ca-trust-marquee] > [data-ca-marquee-clone="true"] {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.ca-trust-bar--layout-cards .ca-trust-bar__item:hover {
		transform: var(--ca-card-transform-hover);
		border-color: var(--ca-card-border-hover);
		box-shadow: var(--ca-card-shadow-hover);
		filter: var(--ca-card-filter-hover);
	}

	.ca-trust-bar--layout-cards.ca-trust-bar--surface-brand .ca-trust-bar__item:hover {
		border-color: color-mix(in srgb, var(--ca-color-text-inverse) 40%, transparent);
	}
}

@media (max-width: 61.25rem) {
	.ca-trust-bar__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ca-trust-bar--mobile-marquee,
	.ca-trust-bar--mobile-scroll {
		overflow: hidden;
	}

	.ca-trust-bar--mobile-marquee .ca-trust-bar__container,
	.ca-trust-bar--mobile-scroll .ca-trust-bar__container {
		width: 100%;
		max-width: none;
	}

	.ca-trust-bar--mobile-marquee .ca-trust-bar__track,
	.ca-trust-bar--mobile-scroll .ca-trust-bar__track {
		display: flex;
		grid-template-columns: none;
		gap: var(--ca-trust-bar-gap);
		padding-inline: var(--ca-page-gutter);
	}

	.ca-trust-bar--mobile-marquee .ca-trust-bar__track {
		width: max-content;
		min-width: max-content;
		will-change: transform;
	}

	.ca-trust-bar--mobile-marquee .ca-trust-bar__track[data-ca-marquee-ready="true"] {
		animation: ca-component-trust-bar-scroll 24s linear infinite;
	}

	.ca-trust-bar--mobile-marquee .ca-trust-bar__item,
	.ca-trust-bar--mobile-scroll .ca-trust-bar__item {
		width: clamp(15rem, 44vw, 20rem);
		min-width: clamp(15rem, 44vw, 20rem);
		flex: 0 0 clamp(15rem, 44vw, 20rem);
	}

	.ca-trust-bar--mobile-marquee [data-ca-trust-marquee] > [data-ca-marquee-clone="true"] {
		display: grid;
	}

	.ca-trust-bar--mobile-marquee::before,
	.ca-trust-bar--mobile-marquee::after {
		content: "";
		position: absolute;
		top: var(--ca-trust-bar-space-top);
		bottom: var(--ca-trust-bar-space-bottom);
		z-index: 2;
		width: clamp(1.5rem, 7vw, 4rem);
		pointer-events: none;
	}

	.ca-trust-bar--mobile-marquee::before {
		left: 0;
		background: linear-gradient(90deg, var(--ca-trust-bar-fade-color), transparent);
	}

	.ca-trust-bar--mobile-marquee::after {
		right: 0;
		background: linear-gradient(270deg, var(--ca-trust-bar-fade-color), transparent);
	}

	.ca-trust-bar--surface-brand.ca-trust-bar--mobile-marquee::before {
		background: linear-gradient(90deg, var(--ca-color-primary-soft), transparent);
	}

	.ca-trust-bar--surface-brand.ca-trust-bar--mobile-marquee::after {
		background: linear-gradient(270deg, var(--ca-color-primary-deep), transparent);
	}

	.ca-trust-bar--mobile-scroll {
		overflow: visible;
	}

	.ca-trust-bar--mobile-scroll .ca-trust-bar__track {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-padding-inline: var(--ca-page-gutter);
		scroll-snap-type: inline mandatory;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.ca-trust-bar--mobile-scroll .ca-trust-bar__item {
		scroll-snap-align: start;
	}

	.ca-trust-bar--layout-minimal.ca-trust-bar--mobile-stack .ca-trust-bar__item:nth-child(odd) {
		border-inline-start: 0;
	}
}

@media (hover: hover) and (max-width: 61.25rem) {
	.ca-trust-bar--mobile-marquee:hover [data-ca-trust-marquee],
	.ca-trust-bar--mobile-marquee:focus-within [data-ca-trust-marquee] {
		animation-play-state: paused;
	}
}

@media (max-width: 40rem) {
	.ca-trust-bar--mobile-stack .ca-trust-bar__track {
		grid-template-columns: minmax(0, 1fr);
	}

	.ca-trust-bar--mobile-marquee .ca-trust-bar__item,
	.ca-trust-bar--mobile-scroll .ca-trust-bar__item {
		width: min(78vw, 18rem);
		min-width: min(78vw, 18rem);
		flex-basis: min(78vw, 18rem);
	}

	.ca-trust-bar--layout-minimal.ca-trust-bar--mobile-stack .ca-trust-bar__item {
		justify-content: flex-start;
		padding-block: var(--ca-space-4);
		border-inline-start: 0;
		border-block-start: var(--ca-border-width) solid var(--ca-color-border);
		text-align: left;
	}

	.ca-trust-bar--layout-minimal.ca-trust-bar--mobile-stack .ca-trust-bar__item:first-child {
		border-block-start: 0;
	}
}

@keyframes ca-component-trust-bar-scroll {
	to {
		transform: translate3d(calc(-50% - (var(--ca-trust-bar-gap) / 2)), 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ca-trust-bar--layout-cards .ca-trust-bar__item {
		transform: none !important;
		transition: none !important;
	}

	.ca-trust-bar--mobile-marquee {
		overflow: visible;
	}

	.ca-trust-bar--mobile-marquee::before,
	.ca-trust-bar--mobile-marquee::after {
		display: none;
	}

	.ca-trust-bar--mobile-marquee .ca-trust-bar__track[data-ca-trust-marquee] {
		overflow-x: auto;
		animation: none !important;
		transform: none !important;
		will-change: auto;
		scroll-snap-type: inline mandatory;
	}

	.ca-trust-bar--mobile-marquee [data-ca-trust-marquee] > [data-ca-marquee-clone="true"] {
		display: none !important;
	}

	.ca-trust-bar--mobile-marquee .ca-trust-bar__item {
		scroll-snap-align: start;
	}
}