/**
 * Trust Badges
 *
 * Figma Home Page node 927:183 / Group 1285:6453
 * Section: 1440×118, borders #E8E8E8, content inset 32px / top 33px
 * Icon→text gap: 6px; title 18/30 Tai Heritage; desc 14/22 Figtree
 */

.trust-badges {
	background: var(--color-white);
	border-top: 1px solid var(--color-border-trust);
	border-bottom: 1px solid var(--color-border-trust);
	min-height: var(--trust-badges-height);
	padding: var(--trust-badges-pad-y) 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.trust-badges__container {
	/* Figma: content spans x32..x1408 — the full 1376 track — so the max-width
	   has to carry the 32px gutters rather than subtract them. */
	max-width: calc(var(--shop-by-category-max) + (2 * var(--section-inline-pad)));
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--section-inline-pad);
	box-sizing: border-box;
}

/*
 * Figma places the four badges with space-between across the 1376 track
 * (x32/414/809/1191) and drops the dividers at x323/720/1117. These column
 * ratios put each border-right exactly on a Figma divider; the per-column
 * padding below then lands each badge on its Figma x.
 */
.trust-badges__grid {
	display: grid;
	grid-template-columns: 291fr 397fr 397fr 291fr;
	align-items: center;
}

.trust-badge {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--trust-badge-gap);
	padding: 0 24px 0 0;
	min-height: 52px;
	border-right: 1px solid var(--color-border-trust);
	box-sizing: border-box;
}

.trust-badge:nth-child(1) {
	padding-left: 0;
}

.trust-badge:nth-child(2) {
	padding-left: 91px;
}

.trust-badge:nth-child(3) {
	padding-left: 89px;
}

.trust-badge:nth-child(4) {
	padding-left: 74px;
}

.trust-badge:last-child {
	border-right: none;
	padding-right: 0;
}

.trust-badge__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: var(--color-accent);
}

.trust-badge__icon--support {
	width: 34px;
	height: 34px;
}

.trust-badge__icon--quality {
	width: 40px;
	height: 40px;
}

.trust-badge__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.trust-badge__content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.trust-badge__title {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: var(--color-heading);
}

.trust-badge__description {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: var(--color-body-80);
}

@media (max-width: 991px) {
	.trust-badges {
		min-height: 0;
		padding: 28px 0;
	}

	.trust-badges__container {
		padding: 0 24px;
	}

	/*
	 * Four badges, two per row. The desktop column ratios only exist to land
	 * the dividers on their Figma x positions; stacked two-up the grid is even
	 * and the dividers become one vertical rule plus one horizontal rule.
	 */
	.trust-badges__grid {
		grid-template-columns: repeat(2, 1fr);
		/* The base rule centres each badge in its row track, which leaves the
		   shorter cell's bottom border floating short of the taller one once a
		   label wraps. Stretching keeps the divider a continuous line; the
		   badge's own `align-items: center` still centres its content. */
		align-items: stretch;
	}

	.trust-badge,
	.trust-badge:nth-child(1),
	.trust-badge:nth-child(2),
	.trust-badge:nth-child(3),
	.trust-badge:nth-child(4) {
		align-items: center;
		padding: 20px;
		border-right: 1px solid var(--color-border-trust);
		border-bottom: 1px solid var(--color-border-trust);
	}

	/* Right-hand cell closes the row; the last row closes the band. */
	.trust-badge:nth-child(2n) {
		border-right: none;
	}

	.trust-badge:nth-last-child(-n + 2) {
		border-bottom: none;
	}
}

@media (max-width: 767px) {
	.trust-badges {
		padding: 24px 0;
	}

	.trust-badges__container {
		padding: 0 16px;
	}

	/*
	 * Still two-up — only the cell padding and type scale down. Each column is
	 * ~175px at 390px wide, so the icon shrinks and the longer labels
	 * ("Customer Support", "Timeless Style & Comfort") are allowed to wrap
	 * rather than being squeezed onto one line.
	 */
	.trust-badge,
	.trust-badge:nth-child(1),
	.trust-badge:nth-child(2),
	.trust-badge:nth-child(3),
	.trust-badge:nth-child(4) {
		gap: 10px;
		padding: 18px 12px;
	}

	/* Flush the outer edges to the container gutter. */
	.trust-badge:nth-child(2n + 1) {
		padding-left: 0;
	}

	.trust-badge:nth-child(2n) {
		padding-right: 0;
	}

	.trust-badge__icon,
	.trust-badge__icon--support,
	.trust-badge__icon--quality {
		width: 32px;
		height: 32px;
		margin-top: 0;
	}

	.trust-badge__title {
		font-size: 15px;
		line-height: 22px;
	}

	.trust-badge__description {
		font-size: 12px;
		line-height: 18px;
	}
}