/* Elementor Pro utility classes. Add these in Advanced > CSS Classes. */

.wm-el-section > .e-con-inner,
.wm-el-container {
	width: min(var(--worthiom-container), calc(100% - 40px));
	margin-inline: auto;
}

.wm-el-header {
	position: relative;
	z-index: 90;
	border-bottom: 1px solid rgba(223, 232, 240, 0.92);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(14px);
}

.wm-el-header.is-sticky,
.elementor-sticky--effects.wm-el-header {
	box-shadow: 0 12px 34px rgba(0, 39, 102, 0.10);
}

.wm-el-header .elementor-nav-menu--main .elementor-item {
	color: var(--worthiom-ink);
	font-size: 0.94rem;
	font-weight: 700;
}

.wm-el-header .elementor-nav-menu--main .elementor-item:hover,
.wm-el-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--worthiom-green-700);
}

.wm-el-hero {
	position: relative;
	overflow: clip;
	background:
		radial-gradient(circle at 84% 18%, rgba(72, 184, 72, 0.14), transparent 30%),
		linear-gradient(180deg, #ffffff 0%, #f7fafb 100%);
}

.wm-el-hero::after {
	position: absolute;
	right: -120px;
	bottom: -180px;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(17, 110, 168, 0.10);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.wm-el-hero-panel {
	border: 1px solid var(--worthiom-line);
	border-radius: var(--worthiom-radius-lg);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--worthiom-shadow-md);
}

.wm-el-search-shell {
	padding: 10px;
	border: 1px solid var(--worthiom-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--worthiom-shadow-sm);
}

.wm-el-category-card,
.wm-el-product-card,
.wm-el-request-card,
.wm-el-benefit-card {
	overflow: hidden;
	border: 1px solid var(--worthiom-line);
	border-radius: var(--worthiom-radius-md);
	background: #fff;
	box-shadow: var(--worthiom-shadow-sm);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.wm-el-category-card:hover,
.wm-el-product-card:hover,
.wm-el-request-card:hover,
.wm-el-benefit-card:hover {
	border-color: #c9d8e3;
	box-shadow: var(--worthiom-shadow-md);
	transform: translateY(-5px);
}

.wm-el-category-card img,
.wm-el-product-card img {
	width: 100%;
	object-fit: cover;
}

.wm-el-category-card img {
	aspect-ratio: 4 / 3;
}

.wm-el-product-card img {
	aspect-ratio: 4 / 3;
}

.wm-el-market-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wm-el-market-table table {
	min-width: 720px;
}

.wm-el-final-cta {
	overflow: hidden;
	border-radius: var(--worthiom-radius-lg);
	background:
		radial-gradient(circle at 85% 20%, rgba(72, 184, 72, 0.30), transparent 35%),
		linear-gradient(135deg, var(--worthiom-navy-950), var(--worthiom-navy-800));
	box-shadow: var(--worthiom-shadow-md);
}

.wm-el-final-cta :where(h1, h2, h3, p) {
	color: #fff;
}

.wm-el-footer {
	background: var(--worthiom-navy-950);
	color: rgba(255, 255, 255, 0.72);
}

.wm-el-footer a {
	color: rgba(255, 255, 255, 0.78);
}

.wm-el-footer a:hover {
	color: #fff;
}

/* Keep the marketplace plugin dashboard isolated from broad theme styles. */
body.worthiom-site .wm-shell button,
body.worthiom-site .wm-shell .wm-button {
	font-family: inherit;
}

@media (max-width: 1024px) {
	.wm-el-header .elementor-nav-menu--main {
		display: none;
	}
}

@media (max-width: 767px) {
	.wm-el-section > .e-con-inner,
	.wm-el-container {
		width: min(100% - 28px, var(--worthiom-container));
	}

	.wm-el-hero-panel {
		border-radius: 20px;
	}

	.wm-el-final-cta {
		border-radius: 20px;
	}
}