/**
 * EcomDrama Site — main stylesheet.
 *
 * Colors/radius/spacing/mono-font come from wp-content/ecom-drama-shared/tokens.css
 * (--ed-*), loaded as a dependency before this file — same source the three
 * plugin admin apps already use, so a brand color change applies everywhere
 * at once. Display/body font roles are declared here (site-only concern,
 * deliberately different from --ed-font-ui since this is a marketing
 * surface, not an admin UI) and are the two variables to touch if the fonts
 * ever change again.
 */

:root {
	--eds-font-display: 'Fraunces', Georgia, serif;
	--eds-font-body: 'Figtree', system-ui, sans-serif;
	--eds-max-width: 1200px;
	--eds-gutter: 32px;
	--eds-gutter-mobile: 20px;
	--eds-section-gap: 88px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var( --ed-paper, #fff );
	color: var( --ed-ink, #1c2430 );
	font-family: var( --eds-font-body );
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var( --ed-azure, #2f62a8 );
	text-decoration: none;
}

a:hover {
	color: var( --ed-azure-press, #24518d );
	text-decoration: underline;
}

::selection {
	background: var( --ed-azure-line, #d3e2f5 );
}

.eds-mono {
	font-family: var( --ed-font-mono, monospace );
}

.eds-container {
	max-width: var( --eds-max-width );
	margin: 0 auto;
	padding: 0 var( --eds-gutter );
}

.eds-section {
	padding-top: var( --eds-section-gap );
}

.eds-eyebrow {
	font-family: var( --ed-font-mono, monospace );
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --ed-ink-3, #8794a4 );
	margin-bottom: 16px;
}

.eds-h2 {
	margin: 0 0 16px;
	font-size: 40px;
	line-height: 1.14;
	letter-spacing: -1.2px;
	font-weight: 700;
}

.eds-lede {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 22px;
	border-radius: var( --ed-radius-control, 10px );
	font-size: 15px;
	font-weight: 700;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var( --ed-motion-fast, 120ms ) ease, border-color var( --ed-motion-fast, 120ms ) ease;
}

.eds-btn--dark {
	background: var( --ed-ink, #1c2430 );
	color: #fff;
}

.eds-btn--dark:hover {
	background: var( --ed-azure, #2f62a8 );
	color: #fff;
	text-decoration: none;
}

.eds-btn--outline {
	background: #fff;
	border-color: var( --ed-line, #dce3ec );
	color: var( --ed-ink, #1c2430 );
}

.eds-btn--outline:hover {
	border-color: var( --ed-ink, #1c2430 );
	color: var( --ed-ink, #1c2430 );
	text-decoration: none;
}

.eds-btn--accent {
	background: var( --ed-azure, #2f62a8 );
	color: #fff;
}

.eds-btn--accent:hover {
	background: var( --ed-azure-press, #24518d );
	color: #fff;
	text-decoration: none;
}

.eds-link-muted {
	font-size: 14px;
	font-weight: 600;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-link-muted:hover {
	color: var( --ed-ink, #1c2430 );
	text-decoration: none;
}

/* ===== Announcement bar ===== */
.eds-announcement {
	background: var( --ed-ink, #1c2430 );
	color: #fff;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 13.5px;
	flex-wrap: wrap;
	text-align: center;
}

.eds-announcement__badge {
	font-family: var( --ed-font-mono, monospace );
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #8da8cf;
}

.eds-announcement__link {
	color: #8da8cf;
	font-weight: 700;
	text-decoration: underline;
}

/* ===== Header ===== */
.eds-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba( 255, 255, 255, 0.94 );
	backdrop-filter: blur( 10px );
	border-bottom: 1px solid var( --ed-line, #dce3ec );
}

.eds-header__inner {
	height: 72px;
	display: flex;
	align-items: center;
	gap: 36px;
}

.eds-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	color: var( --ed-ink, #1c2430 );
}
.eds-logo__mark{
	display: flex;
}
.eds-logo:hover {
	text-decoration: none;
	color: var( --ed-ink, #1c2430 );
}

.eds-logo__text {
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -0.4px;
}

.eds-nav {
	display: flex;
	align-items: center;
}

.eds-nav__list,
.eds-mobile-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	font-size: 14.5px;
	font-weight: 600;
}

.eds-nav__list a,
.eds-mobile-nav__list a {
	color: var( --ed-ink-2, #5a6675 );
}

.eds-nav__list a:hover,
.eds-mobile-nav__list a:hover {
	color: var( --ed-ink, #1c2430 );
	text-decoration: none;
}

.eds-header__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

.eds-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 38px;
	height: 38px;
	margin-left: auto;
	border: none;
	background: none;
	cursor: pointer;
}

.eds-nav-toggle span {
	display: block;
	height: 2px;
	background: var( --ed-ink, #1c2430 );
	border-radius: 2px;
}

.eds-mobile-nav {
	display: none;
	flex-direction: column;
	gap: 18px;
	padding: 20px var( --eds-gutter ) 28px;
	border-top: 1px solid var( --ed-line, #dce3ec );
	background: #fff;
}

.eds-mobile-nav.is-open {
	display: flex;
}

.eds-mobile-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.eds-mobile-nav__cta {
	align-self: flex-start;
}

/* ===== Footer ===== */
.eds-footer {
	margin-top: var( --eds-section-gap );
	border-top: 1px solid var( --ed-line, #dce3ec );
	background: var( --ed-ink, #1c2430 );
	color: #afbbca;
}

.eds-footer__grid {
	padding: 56px 32px 30px;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
	gap: 34px;
}

.eds-footer__brand .eds-logo__text {
	color: #fff;
}

.eds-footer__tagline {
	margin: 14px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	max-width: 280px;
}

.eds-footer__col {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.eds-footer__col a {
	font-size: 14.5px;
	color: #afbbca;
}

.eds-footer__col a:hover {
	color: #fff;
	text-decoration: none;
}

.eds-footer-col__title {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: var( --ed-font-mono, monospace );
	margin-bottom: 2px;
}

.eds-footer__bottom {
	padding: 0 32px 40px;
	border-top: 1px solid #33414f;
	padding-top: 20px;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: #6e7c8c;
}

/* ===== Hero ===== */
.eds-hero {
	border-bottom: 1px solid var( --ed-line, #dce3ec );
	background: linear-gradient( 180deg, #fff 0%, var( --ed-canvas, #f6f9fc ) 100% );
}

.eds-hero__grid {
	padding: 78px 32px 64px;
	display: grid;
	grid-template-columns: 1.06fr 0.94fr;
	gap: 56px;
	align-items: center;
}

.eds-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var( --ed-azure-wash, #e8eff9 );
	border: 1px solid var( --ed-azure-line, #d3e2f5 );
	border-radius: var( --ed-radius-pill, 999px );
	padding: 6px 14px 6px 11px;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --ed-azure-press, #24518d );
	margin-bottom: 26px;
}

.eds-hero__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var( --ed-azure, #2f62a8 );
}

.eds-hero h1 {
	margin: 0 0 22px;
	font-family: var( --eds-font-display );
	font-size: 68px;
	line-height: 1.04;
	letter-spacing: -1.5px;
	font-weight: 500;
}

.eds-hero__sub {
	margin: 0 0 32px;
	font-size: 19.5px;
	line-height: 1.62;
	color: var( --ed-ink-2, #5a6675 );
	max-width: 540px;
}

.eds-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.eds-hero__facts {
	display: flex;
	align-items: center;
	gap: 10px 20px;
	flex-wrap: wrap;
	font-family: var( --ed-font-mono, monospace );
	font-size: 11.5px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var( --ed-ink-3, #8794a4 );
}

/* ===== Hero ecosystem diagram (decorative) =====
 * Fixed 580x560 canvas (fixed px positions on every node, ported from the
 * source illustration) scaled fluidly to fit whatever width the hero's
 * right column gives it, via container query units — no JS, no breakpoint
 * table. container-type must live on the OUTER box (sized by its parent);
 * the SCALER stays at the source canvas's native pixel size and is scaled
 * down visually, with the outer's aspect-ratio keeping its layout height
 * in sync so nothing overlaps the content below it. */
@keyframes edsFlow {
	to {
		stroke-dashoffset: -260;
	}
}

@keyframes edsSpin {
	to {
		transform: rotate( 360deg );
	}
}

@keyframes edsBreath {
	0%, 100% {
		transform: scale( 1 );
		opacity: .35;
	}
	50% {
		transform: scale( 1.09 );
		opacity: .7;
	}
}

@keyframes edsRise {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

@keyframes edsBar {
	0% {
		width: 22%;
	}
	55%, 100% {
		width: 74%;
	}
}

@keyframes edsBlink {
	0%, 100% {
		opacity: .25;
	}
	50% {
		opacity: 1;
	}
}

.eds-hero-diagram-outer {
	container-type: inline-size;
	width: 100%;
	max-width: 580px;
	aspect-ratio: 580 / 560;
	position: relative;
	margin: 0 auto;
}

.eds-hero-diagram-scaler {
	position: absolute;
	top: 0;
	left: 0;
	width: 580px;
	height: 560px;
	transform-origin: top left;
	transform: scale( calc( 100cqw / 580px ) );
}

@media ( prefers-reduced-motion: reduce ) {
	.eds-hero-diagram-scaler * {
		animation: none !important;
	}
}

/* ===== Generic 3-card / grid rows used by several sections ===== */
.eds-grid-3 {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
}

.eds-grid-4 {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
}
.gap-30{
	gap: 30px;
}

.eds-card {
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: var( --ed-radius-card, 16px );
	padding: 26px;
	background: #fff;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px 0px;
}

.eds-card__eyebrow {
	font-family: var( --ed-font-mono, monospace );
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --ed-azure, #2f62a8 );
	margin-bottom: 10px;
}

.eds-product__icon {
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
}

.eds-card__title {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.5px;
	margin-bottom: 6px;
}

.eds-card__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var( --ed-ink-2, #5a6675 );
}

/* ===== Product showcase rows ===== */
.eds-product {
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 22px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 26px;
}

.eds-product__body {
	padding: 44px;
}

.eds-product__body h3 {
	margin: 0 0 12px;
	font-family: var( --eds-font-display );
	font-size: 34px;
	line-height: 1.15;
	letter-spacing: -0.7px;
	font-weight: 500;
}

.eds-product__body p {
	margin: 0 0 26px;
	font-size: 16.5px;
	line-height: 1.3;
	color: var( --ed-ink-2, #5a6675 );
	max-width: 500px;
}

.eds-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.eds-tag {
	border: 1px solid var( --ed-line, #dce3ec );
	background: var( --ed-surface, #fafcfe );
	border-radius: var( --ed-radius-pill, 999px );
	padding: 7px 13px;
	font-size: 13px;
	font-weight: 600;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-product__preview {
	background: var( --ed-canvas, #f2f5fa );
	border-top: 1px solid var( --ed-line, #dce3ec );
	padding: 34px 44px 40px;
}

/* ===== Product — side-by-side variant (Side Cart: text + live mockup) ===== */
.eds-product--split {
	display: grid;
	grid-template-columns: 1fr 0.92fr;
}

.eds-product__visual {
	background: var( --ed-canvas, #f2f5fa );
	border-left: 1px solid var( --ed-line, #e5eaf1 );
	padding: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eds-slots-panel-wrap {
	margin-top: 34px;
	border-top: 1px solid var( --ed-mist, #f1f4f8 );
	padding-top: 22px;
}

.eds-slots-panel {
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: var( --ed-radius-card, 14px );
	background: #fff;
	overflow: hidden;
}

.eds-slots-panel__header {
	padding: 16px 18px 12px;
	border-bottom: 1px solid var( --ed-mist, #f1f4f8 );
}

.eds-slots-panel__title {
	font-size: 14.5px;
	font-weight: 700;
}

.eds-slots-panel__hint {
	font-size: 12.5px;
	color: var( --ed-ink-3, #8794a4 );
	margin-top: 3px;
}

.eds-slots-list {
	display: flex;
	flex-direction: column;
}

.eds-slots-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	border-bottom: 1px solid var( --ed-mist, #f1f4f8 );
	font-size: 13.5px;
	font-weight: 700;
}

.eds-slots-row:last-child {
	border-bottom: none;
}

.eds-slots-row--locked {
	background: var( --ed-mist, #eef2f7 );
	color: var( --ed-ink-3, #8794a4 );
}

.eds-slots-row__handle {
	color: var( --ed-line-strong, #c3cdda );
	letter-spacing: -2px;
	font-size: 13px;
}

.eds-slots-row__badge {
	margin-left: auto;
	font-family: var( --ed-font-mono, monospace );
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --ed-ink-3, #afbbca );
}

.eds-slots-row__badge--muted {
	background: var( --ed-mist, #eef2f7 );
	border-radius: 999px;
	padding: 4px 10px;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-slots-toggle {
	margin-left: auto;
	width: 38px;
	height: 21px;
	border-radius: 999px;
	background: var( --ed-line, #dce3ec );
	position: relative;
	flex: 0 0 auto;
}

.eds-slots-toggle::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 15px;
	height: 15px;
	border-radius: 999px;
	background: #fff;
	transition: left var( --ed-motion-fast, 120ms ) ease;
}

.eds-slots-toggle--on {
	background: var( --ed-azure, #2f62a8 );
}

.eds-slots-toggle--on::after {
	left: 20px;
}

.eds-slots-panel__footer {
	padding: 14px 18px;
	background: var( --ed-surface, #fafcfe );
}

/* ===== Bundle preview card (Smart Cross Sell) ===== */
.eds-bundle-card {
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-top-left-radius: var( --ed-radius-card, 14px );
	border-top-right-radius: var( --ed-radius-card, 14px );
	overflow: hidden;
	background: #fff;
	box-shadow: 0 -6px 30px rgba( 28, 40, 60, 0.08 );
	padding: 34px;
	display: grid;
	grid-template-columns: 1.35fr 0.65fr;
	gap: 34px;
	align-items: start;
}

.eds-bundle-item {
	width: 148px;
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.eds-bundle-card__summary {
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: var( --ed-radius-card, 14px );
	padding: 22px;
	background: var( --ed-surface, #fafcfe );
}

.eds-bundle-card__summary .eds-btn {
	height: auto;
	min-height: 48px;
	padding: 12px 14px;
	white-space: normal;
	text-align: center;
	line-height: 1.3;
}

.eds-btn.disabled {
	opacity: 0.7;
	cursor: not-allowed;
	background: var( --ed-line, #e5eaf1 );
	color: var( --ed-ink-3, #8794a4 );
}
.eds-btn.disabled:hover {
	background: var( --ed-line, #e5eaf1 );
	color: var( --ed-ink-3, #8794a4 );
	border-color: var( --ed-line, #e5eaf1 );
	box-shadow: none;
}
/* ===== Reward ladder (Progressive Discount) ===== */
.eds-reward-card {
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: var( --ed-radius-card, 14px );
	background: #fff;
	padding: 34px 48px 36px;
}

.eds-reward-track {
	position: relative;
	height: 9px;
	border-radius: var( --ed-radius-pill, 999px );
	background: var( --ed-mist-2, #e3e9f1 );
	margin: 0 24px;
}

.eds-reward-track__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: var( --ed-radius-pill, 999px );
	background: var( --ed-azure, #2f62a8 );
}

.eds-reward-dot {
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% );
	width: 30px;
	height: 30px;
	border-radius: var( --ed-radius-pill, 999px );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	box-sizing: border-box;
}

.eds-reward-dot--done {
	background: var( --ed-azure, #2f62a8 );
	color: #fff;
}

.eds-reward-dot--active {
	background: #fff;
	border: 2px solid var( --ed-azure, #2f62a8 );
	color: var( --ed-azure, #2f62a8 );
}

.eds-reward-dot--upcoming {
	background: #fff;
	border: 2px solid var( --ed-line, #dce3ec );
	color: var( --ed-line-strong, #afbbca );
}

.eds-reward-labels {
	position: relative;
	height: 22px;
	margin: 16px 24px 0;
}

.eds-reward-label {
	position: absolute;
	transform: translateX( -50% );
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.eds-reward-label--done {
	color: var( --ed-azure, #2f62a8 );
}

.eds-reward-label--active {
	color: var( --ed-ink, #1c2430 );
}

.eds-reward-label--upcoming {
	color: var( --ed-line-strong, #afbbca );
}

@media ( max-width: 560px ) {
	.eds-reward-card {
		padding: 28px 20px 30px;
	}

	.eds-reward-track,
	.eds-reward-labels {
		margin-left: 16px;
		margin-right: 16px;
	}

	.eds-reward-dot {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}

	.eds-reward-label {
		font-size: 9px;
		white-space: normal;
		width: 48px;
		text-align: center;
		line-height: 1.25;
	}
}

/* ===== Better together (dark section) ===== */
.eds-dark-section {
	margin-top: var( --eds-section-gap );
	border-top: 1px solid var( --ed-line, #dce3ec );
	border-bottom: 1px solid var( --ed-line, #dce3ec );
	background: var( --ed-ink, #1c2430 );
	color: #fff;
}

.eds-dark-section .eds-lede {
	color: #afbbca;
}

.eds-dark-card {
	background: #25313f;
	border: 1px solid #33414f;
	border-radius: 18px;
	padding: 32px;
}

/* eds-reward-card framed as a mini cart preview (header + close icon) */
.eds-reward-card--cart {
	padding: 0;
	overflow: hidden;
}

.eds-reward-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 16px 20px;
	border-bottom: 1px solid var( --ed-mist, #f1f4f8 );
	color: var( --ed-ink, #1c2430 );
}

.eds-reward-card__body {
	padding: 34px 48px 36px;
}

/* ===== Solutions picker ===== */
.eds-goal-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-radius: var( --ed-radius-control, 10px );
	cursor: pointer;
	/* border: 1px solid var( --ed-line, #dce3ec ); */
	background: #fff;
	transition: border-color 0.15s, background 0.15s;
	width: 100%;
	text-align: left;
	font: inherit;
}

.eds-goal-row:hover {
	text-decoration: none;
	border-color: var( --ed-azure-wash, #eaf0f8 );
}

.eds-goal-row.is-active {
	background: var( --ed-azure-wash, #eaf0f8 );
}

.eds-goal-row__dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	flex: 0 0 auto;
	background: var( --ed-line, #dce3ec );
}

.eds-goal-row.is-active .eds-goal-row__dot {
	background: var( --ed-azure, #2f62a8 );
}

.eds-goal-row__label {
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -0.3px;
}

.eds-goal-row__count {
	margin-left: auto;
	font-size: 13px;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-goal-panel {
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 18px;
	background: var( --ed-surface, #f7f9fc );
	padding: 34px;
	min-height: 300px;
}

.eds-goal-panel h3 {
	margin: 0 0 12px;
	font-size: 27px;
	line-height: 1.2;
	letter-spacing: -0.7px;
	font-weight: 700;
}

.eds-goal-tool {
	background: #fff;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.eds-goal-tool__n {
	font-family: var( --ed-font-mono, monospace );
	font-size: 11px;
	color: var( --ed-line-strong, #afbbca );
}

.eds-goal-tool__name {
	font-size: 15.5px;
	font-weight: 700;
}

.eds-goal-tool__role {
	margin-left: auto;
	font-size: 13.5px;
	color: var( --ed-ink-3, #8794a4 );
}

/* ===== Language / principles strips ===== */
.eds-lang-pill {
	background: #fff;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	display: inline-block;
}

.eds-principle {
	border-top: 2px solid var( --ed-ink, #1c2430 );
	padding-top: 20px;
}

.eds-principle__title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
}

/* ===== Pricing ===== */
.eds-price-card {
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 18px;
	padding: 28px;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
}

.eds-price-card__icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
}

.eds-price-card__name {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 6px;
}

.eds-price-card__desc {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-price-card__value {
	font-family: var( --ed-font-mono, monospace );
	font-size: 32px;
	letter-spacing: -1px;
}

.eds-price-card__suffix {
	font-size: 14px;
	color: var( --ed-ink-3, #8794a4 );
	margin-left: 6px;
}

.eds-price-cta {
	margin-top: auto;
}

.eds-price-highlight {
	border: 1px solid var( --ed-ink, #1c2430 );
	border-radius: 18px;
	padding: 32px 34px;
	background: var( --ed-ink, #1c2430 );
	color: #fff;
	display: grid;
	grid-template-columns: 1.4fr 0.6fr;
	gap: 32px;
	align-items: center;
}

.eds-price-highlight__value {
	font-family: var( --ed-font-mono, monospace );
	font-size: 34px;
	letter-spacing: -1px;
}

/* ===== Final CTA ===== */
.eds-final-cta {
	margin-top: var( --eds-section-gap );
	border-top: 1px solid var( --ed-line, #dce3ec );
	background: linear-gradient( 180deg, var( --ed-canvas, #f6f9fc ) 0%, #fff 100% );
	text-align: center;
}

.eds-final-cta__inner {
	padding: 82px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.eds-final-cta h2 {
	margin: 0;
	font-family: var( --eds-font-display );
	font-size: 50px;
	line-height: 1.08;
	letter-spacing: -1.4px;
	font-weight: 500;
	max-width: 760px;
}

/* ===== Newsletter ===== */
.eds-newsletter {
	margin-top: var( --eds-section-gap );
	border-top: 1px solid var( --ed-line, #dce3ec );
	text-align: center;
}

.eds-newsletter__inner {
	padding: 72px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.eds-newsletter h2 {
	margin: 0;
	font-family: var( --eds-font-display );
	font-size: 40px;
	line-height: 1.14;
	letter-spacing: -1.2px;
	font-weight: 500;
	max-width: 640px;
}

.eds-newsletter__form {
	width: 100%;
	max-width: 420px;
}

/* ===== Subscribe modal ===== */
.eds-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba( 16, 24, 34, 0.55 );
	backdrop-filter: blur( 3px );
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.eds-modal-overlay.is-open {
	display: flex;
}

.eds-modal {
	position: relative;
	width: 100%;
	max-width: 480px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba( 16, 24, 34, 0.35 );
	padding: 38px 40px;
}

.eds-modal__close {
	position: absolute;
	top: 16px;
	right: 18px;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	border: none;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --ed-ink-3, #8794a4 );
	font-size: 15px;
	cursor: pointer;
}

.eds-modal__close:hover {
	background: var( --ed-mist, #eef2f7 );
	color: var( --ed-ink, #1c2430 );
}

.eds-modal input[type='email'],
.eds-form-input {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border-radius: var( --ed-radius-control, 10px );
	border: 1px solid var( --ed-line, #dce3ec );
	font-size: 16px;
	color: var( --ed-ink, #1c2430 );
	outline: none;
	margin-top: 8px;
	font-family: inherit;
}

.eds-modal input[type='email']:focus,
.eds-form-input:focus {
	border-color: var( --ed-azure, #2f62a8 );
}

.eds-modal__error {
	margin-top: 9px;
	font-size: 13.5px;
	color: var( --ed-rust, #b23a2e );
}
.w-100{
	width: 100%;
}
.horizontal-form-subscription{
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
.horizontal-form-subscription p, .horizontal-form-subscription input{
	margin: 0px !important;
}
.horizontal-form-subscription input[type='email']{
	width: 320px;
	max-width: 100%;
}

/* ===== Documentation ===== */
.eds-doc-layout {
	display: grid;
	grid-template-columns: 228px 1fr 200px;
	gap: 37px;
	align-items: start;
	line-height: normal;
}

.eds-doc-layout .eds-doc-toc{
	background-color: #fff;
	position: sticky;
	top: 96px;
	padding: 10px 0;
}

.eds-doc-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: sticky;
	top: 96px;
}

.eds-doc-sidebar-nav .eds-goal-row {
	padding: 9px 12px;
	font-size: 12.5px;
	font-weight: 500;
}

.eds-doc-sidebar-nav .eds-goal-row.is-active {
	font-weight: 600;
}

.eds-doc-meta {
	font-size: 13.5px;
	color: var( --ed-ink-3, #8794a4 );
	padding: 16px 0;
	border-top: 1px solid var( --ed-line, #e5eaf1 );
	border-bottom: 1px solid var( --ed-line, #e5eaf1 );
	margin-bottom: 30px;
}
.eds-doc-toc ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13.5px;
}

.eds-doc-toc a {
	color: var( --ed-ink-2, #5a6675 );
}

.eds-doc-toc a:hover {
	color: var( --ed-azure, #2f62a8 );
	text-decoration: none;
}

.eds-doc-feedback {
	margin-top: 24px;
	padding: 16px;
	border-radius: 12px;
	background: var( --ed-canvas, #f6f9fc );
	border: 1px solid var( --ed-line, #e5eaf1 );
}

.eds-doc-feedback__prompt {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 10px;
}

.eds-doc-feedback__actions {
	display: flex;
	gap: 8px;
}

.eds-doc-feedback__btn {
	height: 34px;
	padding: 0 16px;
	font-size: 13px;
	flex: 1;
}
.eds-doc-feedback__btn:disabled{
	background-color: #dcdcdc;
	color: #808080;
	cursor: not-allowed;
	border-color: var( --ed-line-strong, #c3cdda );
	text-decoration: none;
}

.eds-doc-feedback__thanks,
.eds-doc-feedback__voted {
	font-size: 13px;
	font-weight: 600;
	color: var( --ed-ink-2, #5a6675 );
	margin-top: 10px;
	text-align: center;
}

.eds-doc-nav {
	display: flex;
	gap: 14px;
	padding-top: 26px;
	margin-top: 26px;
	border-top: 1px solid var( --ed-line, #e5eaf1 );
	flex-wrap: wrap;
}

.eds-doc-nav__card {
	flex: 1;
	min-width: 220px;
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 14px;
	padding: 18px;
	color: var( --ed-ink, #1c2430 );
	transition: border-color 0.15s ease;
}

.eds-doc-nav__card:hover {
	border-color: var( --ed-line-strong, #c3cdda );
	text-decoration: none;
}

.eds-doc-nav__label {
	font-size: 12.5px;
	color: var( --ed-ink-3, #8794a4 );
	margin-bottom: 6px;
}

.eds-doc-nav__title {
	font-size: 15.5px;
	font-weight: 600;
}
.eds-doc-index-container{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	padding: 10px 0;
}
.eds-doc-index__group {
	margin-bottom: 44px;
}

.eds-doc-index__row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 10px;
	border-bottom: 1px solid var( --ed-mist, #f1f4f8 );
	color: var( --ed-ink, #1c2430 );
}

.eds-doc-index__row:hover {
	background: var( --ed-canvas, #f6f9fc );
	text-decoration: none;
}

.eds-doc-index__row-title {
	flex: 1;
	font-size: 14.5px;
	font-weight: 500;
}

.eds-doc-index__row-mins {
	font-size: 12px;
	color: var( --ed-ink-3, #8794a4 );
	font-family: var( --ed-font-mono, monospace );
}

/* Code blocks inside doc article content — matches the dark code style used
   in the design reference, applied generically to .entry-content so any
   future Page content benefits too, not just doc articles. */
.entry-content code {
	font-family: var( --ed-font-mono, monospace );
	font-size: 0.9em;
	background: var( --ed-canvas, #f6f9fc );
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 4px;
	padding: 2px 6px;
}

.entry-content pre {
	background: var( --ed-ink, #1c2430 );
	border-radius: 14px;
	padding: 20px 22px;
	overflow-x: auto;
	margin: 0 0 24px;
}

.entry-content pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	line-height: 1.75;
	color: #dce3ec;
}

/* Static "what this looks like in the admin" slot list mockup, embedded in
   doc article content (not interactive — just illustrates the real Slots
   tab drag list described in the surrounding text). */
.eds-doc-slot-demo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 22px;
}

.eds-doc-slot-demo__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
}

.eds-doc-slot-demo__handle {
	color: var( --ed-line-strong, #afbbca );
	letter-spacing: 1px;
}

.eds-doc-slot-demo__label {
	flex: 1;
}

.eds-doc-slot-demo__tag {
	font-family: var( --ed-font-mono, monospace );
	font-size: 10.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
}

.eds-doc-slot-demo__tag--fixed {
	color: var( --ed-ink-3, #8794a4 );
	background: var( --ed-mist, #f1f4f8 );
}

.eds-doc-slot-demo__tag--required {
	color: var( --ed-azure, #2f62a8 );
	background: var( --ed-azure-wash, #eaf0f8 );
}

.eds-doc-slot-demo__tag--optional {
	color: var( --ed-ink-2, #5a6675 );
	background: #fff;
	border: 1px solid var( --ed-line, #dce3ec );
}

@media ( max-width: 900px ) {
	.eds-doc-layout {
		grid-template-columns: 1fr;
	}

	.eds-doc-sidebar-nav,
	.eds-doc-toc {
		position: static;
	}
}

/* Static "settings panel" mockup — reused by the Styling article (position,
   width, radius, colour) and the Cross Sell article (layout mode). */
.eds-doc-settings-demo {
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 16px;
	padding: 22px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 0 22px;
}

.eds-doc-settings-demo__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.eds-doc-settings-demo__label {
	font-size: 13.5px;
	font-weight: 600;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-doc-settings-demo__pills {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.eds-doc-settings-demo__pill {
	padding: 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	border: 1px solid var( --ed-line, #dce3ec );
	color: var( --ed-ink-2, #5a6675 );
}

.eds-doc-settings-demo__pill--active {
	background: var( --ed-azure, #2f62a8 );
	border-color: var( --ed-azure, #2f62a8 );
	color: #fff;
}

.eds-doc-settings-demo__slider {
	flex: 1;
	min-width: 140px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.eds-doc-settings-demo__slider-track {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var( --ed-mist, #e3e9f1 );
	position: relative;
}

.eds-doc-settings-demo__slider-fill {
	/* wp_kses_post() strips inline style="" from post content, so the fill
	   amount is a fixed value here rather than a variable — this is a single
	   static mockup, not a real control, so one demo value is all it needs. */
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 45%;
	border-radius: 999px;
	background: var( --ed-azure, #2f62a8 );
}

.eds-doc-settings-demo__slider-value {
	font-family: var( --ed-font-mono, monospace );
	font-size: 12px;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-doc-settings-demo__swatches {
	display: flex;
	gap: 8px;
}

.eds-doc-settings-demo__radius-swatch {
	width: 34px;
	height: 34px;
	border: 2px solid var( --ed-line, #dce3ec );
	background: #fff;
}

.eds-doc-settings-demo__radius-swatch--sharp {
	border-radius: 2px;
}

.eds-doc-settings-demo__radius-swatch--medium {
	border-radius: 10px;
}

.eds-doc-settings-demo__radius-swatch--round {
	border-radius: 18px;
}

.eds-doc-settings-demo__radius-swatch--active {
	border-color: var( --ed-azure, #2f62a8 );
}

.eds-doc-settings-demo__color-swatch {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 2px solid transparent;
}

.eds-doc-settings-demo__color-swatch--blue {
	background: #2f62a8;
}

.eds-doc-settings-demo__color-swatch--rust {
	background: #b4472f;
}

.eds-doc-settings-demo__color-swatch--green {
	background: #3e6a31;
}

.eds-doc-settings-demo__color-swatch--ink {
	background: #1c2430;
}

.eds-doc-settings-demo__color-swatch--active {
	border-color: var( --ed-ink, #1c2430 );
}

/* Static product-card mockup for the Cross Sell article. */
.eds-doc-cross-sell-demo {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 140px, 1fr ) );
	gap: 14px;
	margin: 0 0 22px;
	max-width: 340px;
}

.eds-doc-cross-sell-demo__card {
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 12px;
	padding: 10px;
}

.eds-doc-cross-sell-demo__image {
	height: 70px;
	border-radius: 8px;
	background: repeating-linear-gradient( 135deg, #eef2f7 0 6px, #f6f8fb 6px 12px );
	margin-bottom: 8px;
}

.eds-doc-cross-sell-demo__title {
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 4px;
}

.eds-doc-cross-sell-demo__price {
	font-size: 12.5px;
	font-weight: 700;
	font-family: var( --ed-font-mono, monospace );
}

.eds-doc-cross-sell-demo__rating {
	font-size: 11px;
	color: #d99a2b;
	margin-top: 4px;
}

/* Static "settings field" mockup — label + description on the left, a
   control (toggle / select / pills) on the right. Used by the General
   settings article. */
.eds-doc-settings-demo__field {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0;
	border-bottom: 1px solid var( --ed-mist, #f1f4f8 );
}

.eds-doc-settings-demo__field:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.eds-doc-settings-demo__field-title {
	font-size: 14.5px;
	font-weight: 700;
	color: var( --ed-ink, #1c2430 );
	margin-bottom: 4px;
}

.eds-doc-settings-demo__field-desc {
	font-size: 13px;
	line-height: 1.6;
	color: var( --ed-ink-3, #8794a4 );
	max-width: 480px;
}

.eds-doc-settings-demo__toggle {
	flex: 0 0 auto;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var( --ed-mist, #e3e9f1 );
	position: relative;
	margin-top: 2px;
}

.eds-doc-settings-demo__toggle::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
}

.eds-doc-settings-demo__toggle--on {
	background: var( --ed-azure, #2f62a8 );
}

.eds-doc-settings-demo__toggle--on::after {
	left: 20px;
}

.eds-doc-settings-demo__select {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 10px;
	font-size: 13.5px;
	color: var( --ed-ink, #1c2430 );
	background: #fff;
	white-space: nowrap;
}

.eds-doc-settings-demo__select::after {
	content: '\25be';
	color: var( --ed-ink-3, #8794a4 );
	font-size: 11px;
}

.eds-doc-settings-demo__input {
	flex: 0 0 auto;
	padding: 8px 14px;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 10px;
	font-size: 13.5px;
	color: var( --ed-ink, #1c2430 );
	background: #fff;
	white-space: nowrap;
	min-width: 180px;
	display: inline-block;
}

.eds-doc-settings-demo__color-swatch--neutral {
	background: #333;
}

.eds-doc-settings-demo__color-value {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.eds-doc-settings-demo__icon-options {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.eds-doc-settings-demo__icon-option {
	width: 36px;
	height: 36px;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 10px;
	background: #fff;
}

.eds-doc-settings-demo__icon-option--none {
	width: auto;
	height: 36px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-doc-settings-demo__icon-option--active {
	border-color: var( --ed-azure, #2f62a8 );
	color: var( --ed-azure, #2f62a8 );
	background: var( --ed-azure-wash, #eaf0f8 );
}

.eds-doc-settings-demo__input--empty {
	color: var( --ed-ink-3, #afbbca );
	font-style: italic;
}

/* Manual product picker mockup (Cross Sell "Specific products" source). */
.eds-doc-product-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.eds-doc-product-picker__chip {
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid var( --ed-line, #dce3ec );
	background: #fff;
	font-size: 12.5px;
	font-weight: 600;
}

.eds-doc-product-picker__add {
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px dashed var( --ed-line-strong, #c3cdda );
	color: var( --ed-ink-3, #8794a4 );
	font-size: 12.5px;
	font-weight: 600;
}

/* Numeric stepper mockup (Maximum products). */
.eds-doc-settings-demo__stepper {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 10px;
	padding: 6px 14px;
}

.eds-doc-settings-demo__stepper-btn {
	font-size: 14px;
	font-weight: 700;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-doc-settings-demo__stepper-value {
	font-family: var( --ed-font-mono, monospace );
	font-size: 13.5px;
	font-weight: 700;
	min-width: 12px;
	text-align: center;
}

/* Checkbox chip list mockup (Product card elements). */
.eds-doc-settings-demo__checklist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.eds-doc-settings-demo__check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid var( --ed-line, #dce3ec );
	font-size: 12.5px;
	font-weight: 600;
	color: var( --ed-ink-3, #afbbca );
	background: #fff;
}

.eds-doc-settings-demo__check::before {
	content: '';
	width: 13px;
	height: 13px;
	border-radius: 4px;
	border: 1.5px solid var( --ed-line-strong, #c3cdda );
	background: #fff;
	flex: 0 0 auto;
}

.eds-doc-settings-demo__check--on {
	color: var( --ed-ink, #1c2430 );
	border-color: var( --ed-azure, #2f62a8 );
}

.eds-doc-settings-demo__check--on::before {
	background: var( --ed-azure, #2f62a8 );
	border-color: var( --ed-azure, #2f62a8 );
}

.eds-doc-settings-demo__check--locked {
	color: var( --ed-ink-2, #5a6675 );
	background: var( --ed-mist, #f1f4f8 );
}

.eds-doc-settings-demo__check--locked::before {
	background: var( --ed-ink-3, #8794a4 );
	border-color: var( --ed-ink-3, #8794a4 );
}

/* ===== Blog ===== */
.eds-blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.eds-blog-filter {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var( --ed-line, #dce3ec );
	font-size: 13.5px;
	font-weight: 600;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-blog-filter:hover {
	border-color: var( --ed-ink-3, #8794a4 );
	text-decoration: none;
}

.eds-blog-filter--active {
	background: var( --ed-ink, #1c2430 );
	border-color: var( --ed-ink, #1c2430 );
	color: #fff;
}

.eds-blog-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
	margin-bottom: 40px;
}

.eds-blog-card {
	display: block;
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 16px;
	padding: 26px;
	background: #fff;
	color: var( --ed-ink, #1c2430 );
}

.eds-blog-card:hover {
	border-color: var( --ed-ink-3, #8794a4 );
	text-decoration: none;
}

.eds-blog-card__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.3px;
	margin-bottom: 10px;
}

.eds-blog-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var( --ed-ink-2, #5a6675 );
	margin: 0 0 16px;
}

.eds-blog-card__meta {
	font-size: 12.5px;
	color: var( --ed-ink-3, #8794a4 );
	font-family: var( --ed-font-mono, monospace );
}

.eds-blog-pagination {
	display: flex;
	align-items: center;
	gap: 16px;
}

.eds-blog-pagination__label {
	font-size: 13.5px;
	color: var( --ed-ink-3, #8794a4 );
}

/* =====================================================================
   WooCommerce: My Account
   CSS-only reskin — no template overrides. WC's own shortcode already
   wraps everything in <div class="woocommerce">, and the logged-in view
   always renders exactly two children (nav, then .woocommerce-MyAccount-
   content), so :has() can safely turn just that case into a two-column
   layout without touching the login/register screen, which has no nav.
   ===================================================================== */
.woocommerce-account .woocommerce:has( .woocommerce-MyAccount-navigation ) {
	display: grid;
	grid-template-columns: 240px 1fr;
	align-items: start;
	gap: 32px;
}

/* WooCommerce's own clearfix pseudo-elements on .woocommerce become real
   grid items once the container is display:grid, which pushes the nav and
   content into the wrong cells. Strip them so the grid only has our 2 items. */
.woocommerce-account .woocommerce:has( .woocommerce-MyAccount-navigation )::before,
.woocommerce-account .woocommerce:has( .woocommerce-MyAccount-navigation )::after {
	content: none;
}

/* ----- Nav sidebar ----- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	/* Overrides WooCommerce core's float:left;width:30% so the item stretches
	   to fill its grid column instead of sizing itself against it. */
	float: none;
	width: auto;
	position: sticky;
	top: 96px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 12px 16px;
	border-radius: var( --ed-radius-control, 10px );
	font-size: 14.5px;
	font-weight: 600;
	color: var( --ed-ink-2, #5a6675 );
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link.is-active a{
	background: var( --ed-mist, #eef2f7 );
	color: var( --ed-ink, #1c2430 );
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--active a {
	background: var( --ed-azure-wash, #e8eff9 );
	color: var( --ed-azure, #2f62a8 );
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var( --ed-line, #dce3ec );
}

/* ----- Content card ----- */
.woocommerce-account .woocommerce-MyAccount-content {
	/* Overrides WooCommerce core's float:right;width:68% so the item
	   stretches to fill its grid column instead of sizing itself against it. */
	float: none;
	width: auto;
	border: 1px solid var( --ed-mist, #eef2f7 );
	border-radius: var( --ed-radius-control, 10px );
	background: #fff;
	box-shadow: rgba( 0, 0, 0, 0.1 ) 0px 4px 12px 0px;
}
.woocommerce-account .woocommerce-MyAccount-content > p,
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content form,
.woocommerce-account .woocommerce-order-downloads,
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	padding: 20px 24px;
}

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-account .download-file a,
.woocommerce .woocommerce-MyAccount-content .button{
	background-color: var( --ed-azure-wash, #e8eff9 ) !important;
	padding: 12px 16px !important;
	border-radius: var( --ed-radius-control, 10px ) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var( --ed-ink, #1c2430 ) !important;
	text-decoration: none !important;
	transition: background-color 0.3s ease !important;
	line-height: 1 !important;
	word-break: break-all;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --ed-line, #dce3ec ) !important;
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.4px;
}

.woocommerce-account .woocommerce-MyAccount-content h2:not( :first-child ) {
	margin: 0px;
}

.woocommerce-account .woocommerce-MyAccount-content a {
	font-weight: 600;
}

/* ----- Tables (orders, downloads, payment methods, licenses) ----- */
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: var( --ed-radius-control, 10px );
	overflow: hidden;
	font-size: 14.5px;
}

.woocommerce-account table.shop_table th {
	background: var( --ed-canvas, #f6f8fb );
	text-align: left;
	font-size: 12px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var( --ed-ink-3, #8794a4 );
	padding: 14px 16px;
	border-bottom: 1px solid var( --ed-line, #dce3ec );
}

.woocommerce-account table.shop_table td {
	padding: 14px 16px;
	border-bottom: 1px solid var( --ed-line, #dce3ec );
	color: var( --ed-ink, #1c2430 );
}

.woocommerce-account table.shop_table tbody tr:last-child td {
	border-bottom: none;
}

.woocommerce-account table.shop_table tbody tr:hover td {
	background: var( --ed-surface, #fafcfe );
}

.woocommerce-account table.shop_table code {
	font-family: var( --ed-font-mono, monospace );
	font-size: 13px;
	background: var( --ed-mist, #eef2f7 );
	padding: 2px 6px;
	border-radius: 4px;
}

/* ----- Buttons ----- */
.woocommerce-account .button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 18px;
	border-radius: var( --ed-radius-control, 10px );
	background: var( --ed-ink, #1c2430 );
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var( --ed-motion-fast, 120ms ) ease;
}

.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button[type='submit']:hover {
	background: var( --ed-azure, #2f62a8 );
	color: #fff;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-downloads-file {
	height: 36px;
	padding: 0 14px;
	font-size: 13.5px;
}

/* ----- Forms ----- */
.woocommerce-account .form-row {
	margin: 0 0 18px;
}

.woocommerce-account .form-row label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --ed-ink, #1c2430 );
}

.woocommerce-account .form-row .required {
	color: var( --ed-rust, #b23a2e );
	text-decoration: none;
}

.woocommerce-account input.input-text,
.woocommerce-account select,
.woocommerce-account textarea {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border-radius: var( --ed-radius-control, 10px );
	border: 1px solid var( --ed-line, #dce3ec );
	font-size: 15px;
	font-family: inherit;
	color: var( --ed-ink, #1c2430 );
	outline: none;
}

.woocommerce-account textarea {
	height: auto;
	padding: 12px 14px;
}

.woocommerce-account input.input-text:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	border-color: var( --ed-azure, #2f62a8 );
}

.woocommerce-account fieldset {
	margin: 24px 0 0;
	padding: 20px 0 0;
	border: none;
	border-top: 1px solid var( --ed-line, #dce3ec );
}

.woocommerce-account fieldset legend {
	padding: 0;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 700;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var( --ed-ink-2, #5a6675 );
	font-weight: 500;
	margin-bottom: 16px;
}

/* ----- Notices ----- */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	list-style: none;
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: var( --ed-radius-control, 10px );
	font-size: 14.5px;
	background: var( --ed-azure-wash, #e8eff9 );
	color: var( --ed-ink, #1c2430 );
	border-left: 3px solid var( --ed-azure, #2f62a8 );
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before {
	display: none;
}

.woocommerce-account .woocommerce-message {
	background: var( --ed-olive-wash, #e8f2ea );
	border-left-color: var( --ed-olive, #4e7a3e );
}

.woocommerce-account .woocommerce-error {
	background: var( --ed-rust-wash, #fbe9e7 );
	border-left-color: var( --ed-rust, #b23a2e );
}

.woocommerce-account .woocommerce-error li {
	list-style: none;
}

/* ----- Addresses ----- */
.woocommerce-account .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	width: auto;
}
.woocommerce-account .woocommerce-Addresses.col2-set > div{
	width: auto !important;
	float: none !important;
}

/* Same WooCommerce clearfix issue as the outer account grid: .col2-set's
   own ::before/::after would otherwise become extra grid items. */
.woocommerce-account .woocommerce-Addresses.col2-set::before,
.woocommerce-account .woocommerce-Addresses.col2-set::after {
	content: none;
}

.woocommerce-account .woocommerce-Address {
	float: none;
	width: auto;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: var( --ed-radius-control, 10px );
	padding: 20px;
}

.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title a{
	margin-left: 10px;
}

.woocommerce-account .woocommerce-Address-title h2 {
	margin: 0;
	font-size: 16px;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 14.5px;
	line-height: 1.6;
	color: var( --ed-ink-2, #5a6675 );
}

/* ----- View order ----- */
.woocommerce-account mark.order-number,
.woocommerce-account mark.order-date,
.woocommerce-account mark.order-status {
	background: var( --ed-mist, #eef2f7 );
	color: var( --ed-ink, #1c2430 );
	padding: 2px 8px;
	border-radius: 6px;
	font-weight: 600;
	font-style: normal;
}

.woocommerce-account ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-OrderUpdate {
	padding: 14px 0;
	border-bottom: 1px solid var( --ed-line, #dce3ec );
}

.woocommerce-account .woocommerce-OrderUpdate:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-OrderUpdate-meta {
	margin: 0 0 4px;
	font-size: 12.5px;
	color: var( --ed-ink-3, #8794a4 );
}

.woocommerce-account .woocommerce-OrderUpdate-description p {
	margin: 0;
	font-size: 14.5px;
	color: var( --ed-ink-2, #5a6675 );
}

/* ----- Pagination ----- */
.woocommerce-account .woocommerce-Pagination {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

/* ----- Logged-out login / register ----- */
.woocommerce-account #customer_login.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	width: auto;
}

.woocommerce-account #customer_login.col2-set::before,
.woocommerce-account #customer_login.col2-set::after {
	content: none;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: var( --ed-radius-card, 16px );
	background: #fff;
	padding: 32px;
	box-shadow: rgba( 0, 0, 0, 0.12 ) 0px 4px 12px 0px;
}

.woocommerce-account h2 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.4px;
}

/* Checkout */
.theme-ecomdrama-site .woocommerce-checkout button[type='submit'],
.theme-ecomdrama-site .checkout-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important	;
	padding: 0 22px !important;
	border-radius: var( --ed-radius-control, 10px );
	font-size: 15px !important;
	font-weight: 700 !important;
	border: 1px solid transparent !important;
	cursor: pointer !important;
	transition: background var( --ed-motion-fast, 120ms ) ease, border-color var( --ed-motion-fast, 120ms ) ease;
	background: var( --ed-ink, #1c2430 ) !important;
	color: #fff !important;
}
.theme-ecomdrama-site .woocommerce-checkout button[type='submit']:hover,
.theme-ecomdrama-site .checkout-button:hover{
	background: var( --ed-azure, #2f62a8 ) !important;
	color: #fff !important;
	text-decoration: none !important;
}
.theme-ecomdrama-site .checkout-button {
	width: 100% !important;
}
/* ===== Responsive ===== */
@media ( max-width: 960px ) {
	.eds-hero__grid,
	.eds-dark-section .eds-grid-2,
	.eds-goal-layout,
	.eds-product--split,
	.eds-bundle-card {
		grid-template-columns: 1fr !important;
	}

	.eds-product__visual {
		border-left: none;
		border-top: 1px solid var( --ed-line, #e5eaf1 );
	}

	.eds-hero h1 {
		font-size: 46px;
	}

	.eds-grid-3,
	.eds-grid-4,
	.eds-price-highlight {
		grid-template-columns: 1fr !important;
	}

	.eds-blog-grid {
		grid-template-columns: 1fr 1fr;
	}

	.eds-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.woocommerce-account .woocommerce:has( .woocommerce-MyAccount-navigation ),
	.woocommerce-account .woocommerce-Addresses.col2-set,
	.woocommerce-account #customer_login.col2-set {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
	}
}

@media ( max-width: 720px ) {
	.eds-nav,
	.eds-header__actions {
		display: none;
	}

	.eds-nav-toggle {
		display: flex;
	}

	.eds-footer__grid {
		grid-template-columns: 1fr;
	}
	.eds-container {
		padding: 0 var( --eds-gutter-mobile );
	}
	.eds-doc-index-container{
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 10px 0;
	}
	.eds-blog-grid {
		grid-template-columns: 1fr;
	}
}