/*
 * Stats bar — 4 white cards (delivery/payment/support/insurance), matches reference.
 * @package log-core
 */

.stats-wrap {
	padding: 56px 24px 76px;
}

.stats-grid {
	max-width: 1220px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.stat-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 26px 22px;
	box-shadow: var(--shadow-sm);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.stat-item:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
	border-color: rgba(138, 106, 46, .35);
}

.stat-icon {
	width: 48px;
	height: 48px;
	border-radius: 13px;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--sage-400), var(--sage-700));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 8px 18px rgba(138, 106, 46, .28);
	transition: transform .3s var(--ease);
}

.stat-item:hover .stat-icon { transform: scale(1.08) rotate(-6deg); }
.stat-icon .icon { width: 21px; height: 21px; }
.stat-item strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink-900); }
.stat-item .stat-desc { display: block; font-size: 12.5px; line-height: 1.55; color: var(--ink-700); margin-top: 4px; }

@media (max-width: 1020px) {
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
	.stats-wrap { padding: 40px 16px 48px; }
	.stats-grid { gap: 14px; }
}

@media (max-width: 480px) {
	.stats-grid { grid-template-columns: 1fr; }
}