/* MB Home UX: trust strip. Inherits WoodMart's primary colour when available. */
.mb-trust {
	--mb-accent: var(--wd-primary-color, #e31e24);
	--mb-bg: #fff;
	--mb-border: rgba(0, 0, 0, .08);
	--mb-title: #1a1a1a;
	--mb-text: #6b6b6b;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}
.mb-trust--light .mb-trust__list {
	background: var(--mb-bg);
	border: 1px solid var(--mb-border);
	border-radius: 14px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .05);
}
.mb-trust--dark {
	--mb-bg: #141414;
	--mb-border: rgba(255, 255, 255, .1);
	--mb-title: #fff;
	--mb-text: rgba(255, 255, 255, .7);
}
.mb-trust--dark .mb-trust__list {
	background: var(--mb-bg);
	border-radius: 14px;
}
.mb-trust__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 6px;
}
.mb-trust__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
.mb-trust__item + .mb-trust__item {
	border-left: 1px solid var(--mb-border);
}
.mb-trust__link {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 14px 18px;
	color: inherit;
	text-decoration: none;
	border-radius: 10px;
	box-sizing: border-box;
}
a.mb-trust__link {
	transition: background-color .2s ease;
}
a.mb-trust__link:hover {
	background: color-mix(in srgb, var(--mb-accent) 6%, transparent);
}
a.mb-trust__link:focus-visible {
	outline: 2px solid var(--mb-accent);
	outline-offset: -2px;
}
.mb-trust__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--mb-accent);
	background: color-mix(in srgb, var(--mb-accent) 10%, transparent);
}
.mb-trust__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}
.mb-trust__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}
.mb-trust__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--mb-title);
}
.mb-trust__text {
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--mb-text);
}

/* Tablet and phone: one swipeable row with the next item peeking, no page overflow. */
@media (max-width: 1024px) {
	.mb-trust__list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.mb-trust__list::-webkit-scrollbar {
		display: none;
	}
	.mb-trust__item {
		flex: 0 0 auto;
		width: 42%;
		scroll-snap-align: start;
	}
}
@media (max-width: 600px) {
	.mb-trust__item {
		width: 60%;
	}
	.mb-trust__link {
		padding: 12px 14px;
		gap: 10px;
	}
	.mb-trust__icon {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
	}
	.mb-trust__icon svg {
		width: 21px;
		height: 21px;
	}
	.mb-trust__title {
		font-size: 13.5px;
	}
	.mb-trust__text {
		font-size: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	a.mb-trust__link {
		transition: none;
	}
}
