/*
 * db-promo-tiles v1.1.0
 * Visual styles (.sales, .background-sales, .button, .jacksts, .col-sm-4,
 * .col-3, .promo-message) are already in your global styles.css.
 */

/* Stack on small screens */
@media (max-width: 767px) {
	.db-promo-tiles .col-sm-4 {
		float: none;
		width: 100%;
		max-width: 100%;
		display: block;
	}
}

/* ── Page Builder placeholder ─────────────────────────────────────────────
 * Shows when no tiles have been added yet.
 * .db-promo-tiles:not(:has(.db-promo-tiles__tile)) targets the wrapper
 * when it contains no rendered tile divs.
 * ──────────────────────────────────────────────────────────────────────── */
.db-promo-tiles:not(:has(.db-promo-tiles__tile))::after {
	content: 'Promo Tiles — add tiles in the properties panel (top 3 will display)';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 220px;
	background: repeating-linear-gradient(
		45deg,
		#e0e0e0,
		#e0e0e0 10px,
		#ececec 10px,
		#ececec 20px
	);
	color: #666;
	font-family: Lato, sans-serif;
	font-size: 14px;
	font-style: italic;
	text-align: center;
	padding: 1rem;
	box-sizing: border-box;
	border: 2px dashed #bbb;
}