/* eCommerce Integration product page. Chrome comes from products.css via body.pageProducts. */

.pageEcommerce .ecomHeroInner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
	gap: 2.5rem;
	align-items: center;
}

.pageEcommerce .ecomHeroCopy .prodEyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
}

.pageEcommerce .ecomHeroCopy .prodEyebrow::before {
	content: "";
	width: 1.7rem;
	height: 3px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--prod-teal), #7ed0e2);
}

.pageEcommerce .ecomHeroPanel {
	position: relative;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, #f3fafc 52%, #dff1f5 100%);
	color: var(--prod-ink);
	border: 1px solid rgba(14, 129, 161, 0.18);
	border-radius: 20px;
	padding: 1.5rem 1.45rem 1.35rem;
	box-shadow:
		0 22px 44px rgba(20, 52, 59, 0.1),
		0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.pageEcommerce .ecomHeroPanel .prodKicker {
	margin-bottom: 0.85rem;
}

.pageEcommerce .ecomNodes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.pageEcommerce .ecomNodes li {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0.55rem 0.85rem;
	border: 1px solid rgba(14, 129, 161, 0.12);
	border-radius: 12px;
	background: #fff;
}

.pageEcommerce .ecomNodes img {
	display: block;
	height: 32px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.pageEcommerce .prodHero {
	padding-bottom: 1.6rem;
}

.pageEcommerce .ecomPrice {
	padding: 0 0 2.4rem;
}

.pageEcommerce #pricing,
.pageEcommerce #sync {
	scroll-margin-top: 88px;
}

.pageEcommerce .ecomPricePanel {
	padding: 1.35rem 1.45rem 1.3rem;
	border-radius: 16px;
	border: 1px solid rgba(14, 129, 161, 0.16);
	background:
		radial-gradient(ellipse 55% 90% at 100% 0%, rgba(126, 208, 226, 0.18), transparent 62%),
		linear-gradient(180deg, #ffffff 0%, #f4fafb 100%);
	color: var(--prod-muted);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 24px rgba(20, 52, 59, 0.06);
}

.pageEcommerce .ecomPricePanel .prodKicker {
	margin: 0 0 0.45rem;
	color: var(--prod-teal);
}

.pageEcommerce .ecomPricePanel h2 {
	margin: 0 0 0.55rem;
	font-family: var(--prod-display);
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--prod-ink);
}

.pageEcommerce .ecomPricePanel p:not(.prodKicker) {
	margin: 0 0 1.05rem;
	max-width: 38rem;
	font-size: 1.02rem;
	line-height: 1.6;
}

.pageEcommerce .ecomBand {
	padding: 2.4rem 0;
}

.pageEcommerce .ecomBandAlt {
	background: #fff;
	border-top: 1px solid var(--prod-line);
	border-bottom: 1px solid var(--prod-line);
}

.pageEcommerce .ecomSync {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pageEcommerce .ecomSync li {
	padding: 1rem 1.05rem;
	border: 1px solid var(--prod-line);
	border-radius: 14px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
}

.pageEcommerce .ecomSync h3 {
	margin: 0 0 0.4rem;
	font-family: var(--prod-display);
	font-size: 1.12rem;
	font-weight: 650;
	color: var(--prod-ink);
}

.pageEcommerce .ecomSync p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--prod-muted);
}

.pageEcommerce .ecomCustom .prodBandHead {
	margin-bottom: 0.85rem;
}

.pageEcommerce .ecomCustomMore {
	margin: 0;
	font-size: 1.02rem;
}

.pageEcommerce .ecomCustomMore a {
	color: var(--prod-teal);
	font-weight: 600;
	text-decoration: none;
}

.pageEcommerce .ecomCustomMore a:hover,
.pageEcommerce .ecomCustomMore a:focus {
	color: var(--prod-teal-dark);
	text-decoration: underline;
}

.pageEcommerce .prodCta {
	padding: 2rem 1.25rem 2rem;
	color: var(--prod-muted);
}

.pageEcommerce .prodCta .prodWrap {
	background:
		radial-gradient(ellipse 55% 90% at 100% 0%, rgba(126, 208, 226, 0.18), transparent 62%),
		linear-gradient(180deg, #ffffff 0%, #f4fafb 100%);
	border: 1px solid rgba(14, 129, 161, 0.16);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 24px rgba(20, 52, 59, 0.06);
	padding: 2.4rem 1.5rem;
}

.pageEcommerce .prodCta h2 {
	color: var(--prod-ink);
}

@media (max-width: 991.98px) {
	.pageEcommerce .ecomHeroInner,
	.pageEcommerce .ecomSync {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767.98px) {
	.pageEcommerce .ecomPricePanel {
		padding: 1.15rem 1.1rem 1.1rem;
	}

	.pageEcommerce .ecomPricePanel p:not(.prodKicker) {
		margin-bottom: 0.9rem;
	}

	.pageEcommerce .ecomBand {
		padding: 1.8rem 0;
	}

	.pageEcommerce .prodCta {
		padding: 1.6rem 1.25rem 1.8rem;
	}

	.pageEcommerce .prodCta .prodWrap {
		padding: 1.9rem 1.2rem;
	}
}

@media (max-width: 450px) {
	.pageEcommerce .ecomPricePanel .prodBtn,
	.pageEcommerce .prodCta .prodBtn {
		width: 100%;
	}
}