.tvs-showcase,
.tvs-showcase * {
	box-sizing: border-box;
}

.tvs-showcase {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding: var(--tvs-section-padding, 48px) 20px;
	overflow-x: hidden;
	overflow-x: clip;
	color: var(--tvs-text, #2d2a26);
	background: var(--tvs-background, transparent);
	font-family: var(--tvs-font, inherit);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.tvs-showcase__inner {
	width: 100%;
	min-width: 0;
	max-width: var(--tvs-max-width, 1200px);
	margin: 0 auto;
}

.tvs-showcase__header {
	width: 100%;
	min-width: 0;
	max-width: 820px;
	margin: 0 auto clamp(28px, 5vw, 52px);
	text-align: center;
}

.tvs-showcase__heading,
.tvs-showcase__subtitle,
.tvs-showcase__price,
.tvs-card__number,
.tvs-card__title,
.tvs-card__description,
.tvs-card__link {
	max-width: 100%;
	margin-top: 0;
	overflow-wrap: anywhere;
	word-break: normal;
}

.tvs-showcase__heading {
	margin-bottom: 12px;
	color: var(--tvs-text, #2d2a26);
	font: inherit;
	font-family: var(--tvs-heading-font, var(--tvs-font, inherit));
	font-size: min(var(--tvs-heading-size, 42px), 12vw);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.tvs-showcase__subtitle {
	margin-bottom: 12px;
	font-family: var(--tvs-subtitle-font, var(--tvs-font, inherit));
	font-size: var(--tvs-subtitle-size, 18px);
	opacity: 0.78;
}

.tvs-showcase__price {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	padding: 5px 0;
	color: var(--tvs-accent, #6f7f55);
	font-family: var(--tvs-price-font, var(--tvs-font, inherit));
	font-size: var(--tvs-price-size, 22px);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.tvs-showcase__price::before,
.tvs-showcase__price::after {
	width: 28px;
	height: 1px;
	margin: 0 12px;
	background: currentColor;
	content: "";
	opacity: 0.55;
}

.tvs-showcase .tvs-showcase__grid {
	display: grid;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	grid-template-columns: repeat(var(--tvs-cols-mobile, 1), minmax(0, 1fr));
	justify-items: center;
	gap: var(--tvs-grid-gap, 24px);
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none !important;
}

.tvs-showcase .tvs-showcase__item {
	display: flex;
	justify-content: center;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0 auto !important;
	padding: 0 !important;
}

.tvs-showcase[data-card-style] .tvs-showcase__item > .tvs-card {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin-right: auto !important;
	margin-left: auto !important;
	min-height: 100%;
	padding: var(--tvs-card-padding, 24px);
	overflow: hidden;
	border-width: var(--tvs-border-width, 1px) !important;
	border-style: solid !important;
	border-color: var(--tvs-border, #c8b997) !important;
	border-radius: var(--tvs-radius, 16px);
	background: var(--tvs-card, #fffdf7);
	text-align: center;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.tvs-showcase[data-align="left"] .tvs-card {
	align-items: flex-start;
	text-align: left;
}

.tvs-showcase[data-card-style="elevated"] .tvs-card {
	border-color: var(--tvs-border, #c8b997);
	box-shadow: 0 14px 34px rgba(45, 42, 38, 0.12);
}

.tvs-showcase[data-card-style="soft"] .tvs-card {
	border-color: var(--tvs-border, #c8b997);
	box-shadow: inset 0 0 0 1px rgba(45, 42, 38, 0.05);
}

.tvs-showcase[data-card-style="minimal"] .tvs-card {
	border-color: var(--tvs-border, #c8b997);
	background: transparent;
}

.tvs-card__status {
	display: inline-block;
	margin: -4px 0 9px;
	padding: 3px 9px;
	color: var(--tvs-accent, #6f7f55);
	font-family: var(--tvs-meta-font, var(--tvs-font, inherit));
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tvs-card__number {
	margin-bottom: 3px;
	color: var(--tvs-accent, #6f7f55);
	font-family: var(--tvs-number-font, var(--tvs-font, inherit));
	font-size: min(var(--tvs-number-size, 38px), 14vw);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
}

.tvs-card__title {
	margin-bottom: 5px;
	color: var(--tvs-text, #2d2a26);
	font: inherit;
	font-family: var(--tvs-card-title-font, var(--tvs-font, inherit));
	font-size: var(--tvs-title-size, 18px);
	font-weight: 700;
	line-height: 1.3;
}

.tvs-card__description {
	margin-bottom: 0;
	color: var(--tvs-text, #2d2a26);
	font-family: var(--tvs-description-font, var(--tvs-font, inherit));
	font-size: var(--tvs-description-size, 15px);
	line-height: 1.55;
	opacity: 0.76;
}

.tvs-card__link {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 15px;
	color: var(--tvs-accent, #6f7f55);
	font-family: var(--tvs-meta-font, var(--tvs-font, inherit));
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

/* Divi can save a fixed module width such as 800px. Keep that desktop width,
 * but never let the containing module exceed its column on smaller screens. */
@supports selector(:has(*)) {
	.et_pb_module:has(.tvs-showcase) {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.et_pb_module:has(.tvs-showcase) .et_pb_code_inner,
	.et_pb_module:has(.tvs-showcase) .et_pb_text_inner {
		min-width: 0;
		max-width: 100%;
	}
}

.tvs-card__link:hover {
	color: var(--tvs-accent, #6f7f55);
	text-decoration-color: currentColor;
}

.tvs-card__link:focus-visible {
	border-radius: 3px;
	outline: 3px solid color-mix(in srgb, var(--tvs-accent, #6f7f55) 35%, transparent);
	outline-offset: 4px;
}

.tvs-empty-admin {
	padding: 14px;
	border: 1px dashed #b32d2e;
}

@media (hover: hover) {
	.tvs-showcase[data-card-style="outlined"] .tvs-card:hover,
	.tvs-showcase[data-card-style="elevated"] .tvs-card:hover,
	.tvs-showcase[data-card-style="soft"] .tvs-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 18px 38px rgba(45, 42, 38, 0.14);
	}
}

@media (min-width: 600px) {
	.tvs-showcase__grid {
		grid-template-columns: repeat(var(--tvs-cols-tablet, 2), minmax(0, 1fr));
	}

}

@media (min-width: 960px) {
	.tvs-showcase__grid {
		grid-template-columns: repeat(var(--tvs-cols-desktop, 3), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.tvs-card {
		transition: none;
	}
}

@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	.tvs-showcase[data-card-style="elevated"] .tvs-card {
		border-color: var(--tvs-border, #c8b997);
	}
}
