.qhero-countdown { overflow: hidden; width: 100%; }
.qhero-countdown .height-auto   { min-height: 0vh; }
.qhero-countdown .height-small  { padding: 8rem 0; }
.qhero-countdown .height-medium { padding: 14rem 0; }
.qhero-countdown .height-large  { padding: 20rem 0; }
.qhero-countdown .height-full   { min-height: 100vh; padding-bottom: 40px; padding-top: 40px; }
.qhero-countdown .hero-pricing { font-size: .9375rem; line-height: 1.6; }
.qhero-countdown .price-original { opacity: .85; }
.qhero-countdown .price-current { font-weight: 700; }
.qhero-countdown .hero-countdown-timer { margin-bottom: .25rem; }
.qhero-countdown .countdown-blocks { display: flex; align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
.qhero-countdown .countdown-block { display: flex; flex-direction: column; align-items: center; min-width: 3rem; }
.qhero-countdown .countdown-value { font-size: 2.2rem; line-height: 1; }
.qhero-countdown .countdown-label { letter-spacing: .02em; margin-top: .25rem; opacity: .7; font-size: 14px; }
.qhero-countdown .countdown-separator { font-size: 2.5rem; font-weight: 700; line-height: 1; padding: 0 .125rem; }
.qhero-countdown .countdown-expired { font-size: 1.25rem; font-weight: 600; padding: 1rem 0; }
.offer-wrapper { content-visibility: auto; }

@media (min-width: 768px) and (max-width: 991.99px) {
	.qhero-countdown .countdown-value { font-size: 2rem; }
	.qhero-countdown .countdown-separator { font-size: 2rem; }
}
@media (max-width: 767.99px) {
	.qhero-countdown .countdown-value { font-size: 1.75rem; }
	.qhero-countdown .countdown-separator { font-size: 1.75rem; }
	.qhero-countdown .countdown-block { min-width: 2.5rem; }
	.qhero-countdown .countdown-label { font-size: .625rem; }
}

/* Load-in fade: only when "Enable animation" is checked */
@keyframes qhero-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.qhero-countdown.is-animated .tagline,
	.qhero-countdown.is-animated .qhero-countdown-text :is(h1, h2, h3, h4, h5, h6):not(.description *),
	.qhero-countdown.is-animated .description,
	.qhero-countdown.is-animated .offer-wrapper,
	.qhero-countdown.is-animated .sr-spacer-top-25,
	.qhero-countdown.is-animated .qhero-countdown-media {
		animation: qhero-fade .8s ease-out backwards;
	}
	.qhero-countdown.is-animated .tagline { animation-delay: 0s; }
	.qhero-countdown.is-animated .qhero-countdown-text :is(h1, h2, h3, h4, h5, h6):not(.description *) { animation-delay: .2s; }
	.qhero-countdown.is-animated .description { animation-delay: .5s; }
	.qhero-countdown.is-animated .qhero-countdown-media { animation-delay: .5s; }
	.qhero-countdown.is-animated .offer-wrapper { animation-delay: .8s; }
	.qhero-countdown.is-animated .sr-spacer-top-25 { animation-delay: 1.1s; }
}

/* Inset background with rounded corners: opt-in via Class field "qhero-inset" */
.qhero-countdown.qhero-inset {
	--qhero-inset: 10px;
	--qhero-radius: 32px;
	--qhero-top: 150px; /* fallback; JS sets the real header height */
	width: auto;
	margin: var(--qhero-top) var(--qhero-inset) var(--qhero-inset);
	border-radius: var(--qhero-radius);
	overflow: hidden;
	isolation: isolate;
}
@media (max-width: 767.99px) {
	.qhero-countdown.qhero-inset {
		--qhero-inset: 6px;
		--qhero-radius: 20px;
	}
}

/* Grow-in: hero starts at 80% size and scales to full. Only when "Enable animation" is checked */
@keyframes qhero-grow-in {
	from { transform: scale(.8); }
	to   { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
	.qhero-countdown.qhero-inset.is-animated {
		transform-origin: center center;
		animation: qhero-grow-in 1s cubic-bezier(.22, 1, .36, 1) backwards;
	}
}
/* Fill the viewport: hero ends at the bottom of the screen (below the header) */
.qhero-countdown.qhero-inset {
	min-height: max(560px, calc(100vh - var(--qhero-top) - var(--qhero-inset)));
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@supports (height: 100svh) {
	.qhero-countdown.qhero-inset {
		min-height: max(560px, calc(100svh - var(--qhero-top) - var(--qhero-inset)));
	}
}