.ept-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 32px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ept-card__warning {
	padding: 8px 12px;
	border-radius: 8px;
	background: #fef3c7;
	color: #92400e;
	font-size: 13px;
}

.ept-card__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #2563eb;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.ept-card__title {
	margin: 0;
	color: #2563eb;
	font-size: 18px;
	font-weight: 600;
}

.ept-card__desc {
	margin: 0;
	color: #6b7280;
	font-size: 14px;
}

.ept-card__price {
	font-size: 40px;
	font-weight: 800;
	color: #111827;
}

/* WooCommerce renders the price as <del>/<ins> wrapping .woocommerce-Price-amount,
   and themes/cart plugins commonly pin a font-size/colour on that inner span.
   Inherited values always lose to such a rule, so the Price typography/colour
   controls would appear to do nothing. Force the internals to inherit from
   .ept-card__price instead.

   font-size/color carry !important because the rules we are overriding are
   themselves !important (e.g. a mini-cart plugin's global
   `.woocommerce-Price-amount.amount { font-size: 14px !important }`), which no
   amount of specificity can beat. Scoped to .ept-card__price so nothing outside
   this widget is affected.

   Only foreign markup belongs here. Our own .ept-price__amount /
   .ept-price__regular must stay out: !important here would outrank the widget's
   own Regular Price Color control and the struck price's reduced size. */
.ept-card .ept-card__price ins,
.ept-card .ept-card__price bdi,
.ept-card .ept-card__price .woocommerce-Price-amount,
.ept-card .ept-card__price .woocommerce-Price-currencySymbol {
	font-size: inherit !important;
	color: inherit !important;
	font-weight: inherit;
	background: none;
}

.ept-card .ept-card__price ins {
	text-decoration: none;
}

/* Struck-out regular price — Woo's plain <del> and our own .ept-price__regular
   share one look; descendants inherit the reduced size from the rule above. */
.ept-card .ept-card__price del {
	font-size: 0.5em;
	opacity: 0.6;
	margin-inline-end: 6px;
}

/* "After displayed price". WooCommerce's get_price_html() always emits
   <del> first, so the order is flipped with flex ordering rather than in PHP.
   Harmless for our own markup, which is already emitted in this order. */
.ept-card__price--regular-after {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.ept-card__price--regular-after del {
	order: 1;
	margin-inline-end: 0;
}

.ept-card__period {
	color: #6b7280;
	font-size: 13px;
}

.ept-card__features {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ept-card__feature {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: #111827;
}

.ept-card__feature-icon {
	color: #16a34a;
	display: inline-flex;
}

/* Elementor's inline-SVG icons carry only a viewBox — with no width/height they
   collapse to 0x0, and their default fill is black rather than the icon colour. */
.ept-card__feature-icon svg,
.ept-card__feature-icon img {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ept-card__actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.ept-btn {
	flex: 1;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	border: 1px solid transparent;
}

/* Isolate our buttons from theme button styling across interaction states:
   no theme box-shadow, and no ring on pointer clicks — but keep an accessible
   focus ring for keyboard users via :focus-visible. */
.ept-btn:hover,
.ept-btn:focus,
.ept-btn:active {
	box-shadow: none;
}

.ept-btn:focus {
	outline: none;
}

.ept-btn:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.ept-btn--primary {
	background: #2563eb;
	color: #fff;
	border-color: transparent;
}

.ept-btn--primary:hover,
.ept-btn--primary:focus,
.ept-btn--primary:active {
	background: #1d4ed8;
	color: #fff;
	border-color: transparent;
}

.ept-btn--primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ept-btn--secondary {
	background: transparent;
	color: #111827;
	border-color: #d1d5db;
}

.ept-btn--secondary:hover {
	border-color: #9ca3af;
	color: #111827;
}

/* Button icon + state labels */
.ept-btn__icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.ept-btn__icon svg,
.ept-btn__icon img {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ept-btn__state {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ept-btn--icon-only {
	padding-left: 14px;
	padding-right: 14px;
}

/* Accessible-hidden text (icon-only buttons keep a label for screen readers). */
.ept-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Add-to-cart state machine: JS toggles is-adding / is-added on the button. */
.ept-add-to-cart .ept-btn__state--adding,
.ept-add-to-cart .ept-btn__state--added {
	display: none;
}

.ept-add-to-cart.is-adding .ept-btn__state--idle,
.ept-add-to-cart.is-added .ept-btn__state--idle {
	display: none;
}

.ept-add-to-cart.is-adding .ept-btn__state--adding {
	display: inline-flex;
}

.ept-add-to-cart.is-added .ept-btn__state--added {
	display: inline-flex;
}

.ept-add-to-cart.is-adding {
	opacity: 0.75;
	pointer-events: none;
}

/* View Cart button (revealed below actions after a successful add). */
.ept-card__viewcart-row {
	display: flex;
	margin-top: 12px;
}

/* Attribute-specific rule so the [hidden] row stays hidden despite the
   display:flex above (a plain [hidden] UA rule loses to the class selector). */
.ept-card__viewcart-row[hidden] {
	display: none;
}

.ept-btn--viewcart {
	flex: 1;
	background: transparent;
	color: #111827;
	border-color: #d1d5db;
}

.ept-btn--viewcart:hover {
	border-color: #9ca3af;
	color: #111827;
}

.ept-card__error {
	margin-top: 8px;
	color: #dc2626;
	font-size: 13px;
}