/**
 * Custom Empty State for Elementor Products Widget
 * Values below are defaults; actual colors/spacing come from
 * WooCommerce > Empty State settings via inline CSS variables.
 */

.cew-empty-state {
	background: var(--empty-bg, #f9fafb);
	border-radius: var(--empty-border-radius, 12px);
	padding: var(--empty-padding, 60px 30px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	box-sizing: border-box;
}

.cew-empty-state__icon svg,
.cew-empty-state__icon img {
	width: 64px;
	height: 64px;
	color: var(--empty-text, #6b7280);
	object-fit: contain;
}

.cew-empty-state__heading {
	color: var(--empty-heading, #1f2937);
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 0;
}

.cew-empty-state__text {
	color: var(--empty-text, #6b7280);
	max-width: 420px;
	margin: 0;
	line-height: 1.5;
}

.cew-empty-state__button {
	display: inline-block;
	background: var(--empty-button-bg, #1f2937);
	color: var(--empty-button-text, #ffffff);
	padding: 12px 28px;
	border-radius: calc(var(--empty-border-radius, 12px) / 2);
	text-decoration: none;
	font-weight: 600;
	transition: background 0.25s ease;
	margin-top: 4px;
}

.cew-empty-state__button:hover,
.cew-empty-state__button:focus {
	background: var(--empty-button-hover, #111827);
	color: var(--empty-button-text, #ffffff);
	text-decoration: none;
}

@media (max-width: 1024px) {
	.cew-empty-state { padding: 48px 24px; }
	.cew-empty-state__heading { font-size: 1.35rem; }
}

@media (max-width: 767px) {
	.cew-empty-state { padding: 36px 16px; }
	.cew-empty-state__icon svg,
	.cew-empty-state__icon img { width: 48px; height: 48px; }
	.cew-empty-state__heading { font-size: 1.15rem; }
	.cew-empty-state__button { width: 100%; box-sizing: border-box; }
}