/*
 * db-newsletter
 * Structural styles only. Visual styles (.newsletter, .button, .dark-red)
 * are already defined in your global styles.css.
 */
.db-newsletter {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	clear: both; /* prevent float bleed from preceding elements e.g. boutique block */
	width: 100%;
	box-sizing: border-box;
}

.db-newsletter .homepage-body-newsletter-signup {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
}

.db-newsletter .homepage-body-newsletter-email-input {
	min-width: 220px;
}

@media (max-width: 480px) {
	.db-newsletter .homepage-body-newsletter-email-input {
		width: 100%;
		min-width: 0;
	}
	.db-newsletter .button {
		width: 100%;
	}
}