/* =========================================================
   Creative blocks (assets/js/creative-blocks.js). Uses the same
   --ust-surface-* tokens as custom-blocks.css, so dark mode and
   brand colors are automatically consistent.
   ========================================================= */

/* ---------- Testimonial ---------- */
.ust-testimonial {
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	border-radius: var(--ust-radius);
	box-shadow: 0 1px 3px var(--ust-surface-shadow);
	padding: 1.8em;
}
.ust-testimonial__stars { display: flex; gap: 2px; color: #f5a623; margin-bottom: .6em; }
.ust-testimonial__quote { font-size: 1.1rem; font-style: italic; margin: 0 0 1em; }
.ust-testimonial__byline { display: flex; align-items: center; gap: 12px; }
.ust-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin: 0; cursor: pointer; }
.ust-testimonial__name { font-weight: 700; }
.ust-testimonial__role { font-size: .85rem; color: var(--ust-surface-text-muted); }

/* ---------- Pricing toggle ---------- */
.ust-pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 2em; }
.ust-pricing-toggle__label { font-weight: 600; color: var(--ust-surface-text-muted); display: flex; align-items: center; gap: 8px; }
.ust-pricing-toggle__label.is-active { color: var(--ust-surface-text); }
.ust-pricing-toggle__save { font-size: .75rem; font-weight: 700; color: #1e8e3e; background: #e9f7ee; padding: 2px 8px; border-radius: 999px; }
.ust-pricing-toggle__switch {
	position: relative; width: 46px; height: 26px; border-radius: 999px; background: var(--ust-surface-border);
	border: none; cursor: pointer; padding: 0; flex-shrink: 0;
}
.ust-pricing-toggle__knob {
	position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease;
}
.ust-pricing-toggle__switch[aria-checked="true"] { background: var(--ust-color-topbar); }
.ust-pricing-toggle__switch[aria-checked="true"] .ust-pricing-toggle__knob { transform: translateX(20px); }

/* ---------- Pricing table ---------- */
.ust-price {
	position: relative;
	background: var(--ust-surface);
	color: var(--ust-surface-text);
	border: 1px solid var(--ust-surface-border);
	border-radius: var(--ust-radius);
	padding: 2em 1.8em;
	text-align: center;
}
.ust-price--featured { border-color: var(--ust-color-topbar); border-width: 2px; transform: scale(1.03); }
.ust-price__badge {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--ust-color-topbar); color: #fff; font-size: .75rem; font-weight: 700;
	padding: 4px 14px; border-radius: 999px;
}
.ust-price__title { margin: 0 0 .6em; }
.ust-price__row { margin-bottom: 1.2em; }
.ust-price__amount { font-size: 2.4rem; font-weight: 800; }
.ust-price__period { color: var(--ust-surface-text-muted); }
.ust-price__features { list-style: none; padding: 0; margin: 0 0 1.6em; text-align: left; }
.ust-price__features li { padding: .4em 0; border-bottom: 1px solid var(--ust-surface-border); }
.ust-price__features li:before { content: "\2713"; color: var(--ust-color-topbar); font-weight: 700; margin-right: 8px; }
.ust-price__button {
	display: inline-block; background: var(--ust-color-button-bg); color: var(--ust-color-button-text);
	padding: .7em 2em; border-radius: var(--ust-radius); font-weight: 600; text-decoration: none;
}
.ust-price__button:hover { opacity: .9; text-decoration: none; }

/* ---------- Team member ---------- */
.ust-team { text-align: center; background: var(--ust-surface); color: var(--ust-surface-text); border-radius: var(--ust-radius); padding: 1.8em; box-shadow: 0 1px 3px var(--ust-surface-shadow); }
.ust-team__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 1em; display: block; cursor: pointer; }
.ust-team__photo--empty { display: flex; align-items: center; justify-content: center; background: var(--ust-surface-2); }
.ust-team__name { font-weight: 700; font-size: 1.1rem; }
.ust-team__role { color: var(--ust-color-topbar); font-size: .9rem; margin-bottom: .6em; }
.ust-team__bio { font-size: .92rem; color: var(--ust-surface-text-muted); }
.ust-team__social { display: flex; justify-content: center; gap: 10px; margin-top: .8em; }
.ust-team__social-icon { display: inline-flex; color: var(--ust-surface-text-muted); }
a.ust-team__social-icon:hover { color: var(--ust-color-topbar); }

/* ---------- Counter ---------- */
.ust-counter { text-align: center; }
.ust-counter__number { font-size: 2.6rem; font-weight: 800; color: var(--ust-color-topbar); line-height: 1.1; }
.ust-counter__label { color: var(--ust-surface-text-muted); margin-top: .3em; }

/* ---------- Trust Stats band (inc/trust-stats.php) ---------- */
.ust-trust-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: 24px;
	padding: 32px 24px;
	background: var(--ust-surface-2);
	border-radius: var(--ust-radius-lg);
}
@media (max-width: 600px) {
	.ust-trust-stats { grid-template-columns: repeat(2, 1fr); padding: 24px 16px; }
	.ust-trust-stats .ust-counter__number { font-size: 2rem; }
}

/* ---------- Countdown ---------- */
.ust-countdown { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ust-countdown__unit { text-align: center; background: var(--ust-surface); color: var(--ust-surface-text); border-radius: var(--ust-radius); padding: .8em 1.2em; min-width: 72px; box-shadow: 0 1px 3px var(--ust-surface-shadow); }
.ust-countdown__value { display: block; font-size: 1.8rem; font-weight: 800; }
.ust-countdown__label { display: block; font-size: .75rem; color: var(--ust-surface-text-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Call to action ---------- */
.ust-cta {
	position: relative;
	text-align: center;
	background: var(--ust-surface-2);
	color: var(--ust-surface-text);
	border-radius: var(--ust-radius-lg);
	padding: 2.5em 1.8em;
	overflow: hidden;
}
.ust-cta--has-image { background-size: cover; background-position: center; color: #fff; }
.ust-cta__scrim { position: absolute; inset: 0; pointer-events: none; }
.ust-cta-overlay-dark .ust-cta__scrim { background: radial-gradient(ellipse at center, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,0) 88%); }
.ust-cta-overlay-light .ust-cta__scrim { background: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%, rgba(255,255,255,.4) 55%, rgba(255,255,255,0) 88%); }
.ust-cta-overlay-light.ust-cta--has-image { color: #0d1b2a; }
.ust-cta-overlay-none .ust-cta__scrim { display: none; }
.ust-cta__inner { position: relative; z-index: 1; }
.ust-cta__heading { margin: 0 0 .4em; color: inherit; }
.ust-cta__text { margin: 0 0 1em; color: var(--ust-surface-text-muted); }
.ust-cta--has-image .ust-cta__text { color: inherit; opacity: .92; }
.ust-cta__contact { margin: 0 0 1.2em; font-weight: 700; }
.ust-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ust-cta__button {
	display: inline-block; background: var(--ust-color-button-bg); color: var(--ust-color-button-text);
	padding: .8em 2.2em; border-radius: var(--ust-radius); font-weight: 600; text-decoration: none;
}
.ust-cta__button:hover { opacity: .9; text-decoration: none; }
.ust-cta__button--secondary { background: transparent; border: 2px solid currentColor; color: inherit; }
.ust-cta__consent { margin: 1.2em 0 0; font-size: .8rem; opacity: .75; }

/* ---------- Alert box ----------
   Each state derives its background/text from one Customizer-editable
   accent (--ust-status-*, see inc/customizer.php) mixed with the current
   surface colors via color-mix(), so dark mode (OS-level or the theme's
   own manual toggle) adapts automatically instead of needing a second,
   hand-maintained set of dark-mode literals. */
.ust-alert { position: relative; padding: 1em 2.4em 1em 1.2em; border-radius: var(--ust-radius); border-left: 4px solid; margin: 0 0 1.2em; }
.ust-alert__message p:last-child { margin-bottom: 0; }
.ust-alert--info { background: color-mix(in srgb, var(--ust-status-info) 12%, var(--ust-surface)); border-color: var(--ust-status-info); color: color-mix(in srgb, var(--ust-status-info) 55%, var(--ust-surface-text)); }
.ust-alert--success { background: color-mix(in srgb, var(--ust-status-success) 12%, var(--ust-surface)); border-color: var(--ust-status-success); color: color-mix(in srgb, var(--ust-status-success) 55%, var(--ust-surface-text)); }
.ust-alert--warning { background: color-mix(in srgb, var(--ust-status-warning) 14%, var(--ust-surface)); border-color: var(--ust-status-warning); color: color-mix(in srgb, var(--ust-status-warning) 60%, var(--ust-surface-text)); }
.ust-alert--error { background: color-mix(in srgb, var(--ust-status-error) 12%, var(--ust-surface)); border-color: var(--ust-status-error); color: color-mix(in srgb, var(--ust-status-error) 55%, var(--ust-surface-text)); }
.ust-alert__dismiss { position: absolute; top: 10px; right: 12px; background: none; border: none; cursor: pointer; font-size: 1rem; color: inherit; opacity: .6; }
.ust-alert__dismiss:hover { opacity: 1; }

/* ---------- Star rating ---------- */
.ust-star-rating { display: flex; align-items: center; gap: 8px; color: #f5a623; }
.ust-star-rating__stars { display: flex; gap: 2px; }
.ust-star-rating__label { color: var(--ust-surface-text-muted); font-size: .9rem; }

/* ---------- Progress bar ---------- */
.ust-progress { margin: 0 0 1.4em; }
.ust-progress__head { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .4em; color: var(--ust-surface-text); }
.ust-progress__track { background: var(--ust-surface-2); border-radius: 999px; height: 10px; overflow: hidden; }
.ust-progress__fill { height: 100%; background: var(--ust-color-topbar); border-radius: 999px; }

/* ---------- Circular progress ---------- */
.ust-circular-progress { display: inline-flex; flex-direction: column; align-items: center; gap: .6em; text-align: center; }
.ust-circular-progress__track { stroke: var(--ust-surface-2); }
.ust-circular-progress__fill { stroke: var(--ust-color-topbar); stroke-linecap: round; transition: stroke-dashoffset 1.2s ease-out; }
.ust-circular-progress__label { display: flex; flex-direction: column; }
.ust-circular-progress__percent { font-size: 1.3rem; font-weight: 800; color: var(--ust-surface-text); }
.ust-circular-progress__text { font-size: .85rem; color: var(--ust-surface-text-muted); }

/* ---------- Table of contents ---------- */
.ust-toc { background: var(--ust-surface-2); color: var(--ust-surface-text); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius); padding: 1.2em 1.6em; margin: 0 0 1.6em; }
.ust-toc__title { margin: 0 0 .6em; font-size: 1.05rem; }
.ust-toc__list, .ust-toc__list ul { list-style: none; margin: 0; padding: 0 0 0 1.2em; }
.ust-toc__list { padding-left: 0; }
.ust-toc__list a { text-decoration: none; }
.ust-toc__list a:hover { text-decoration: underline; }

/* ---------- FAQ accordion ---------- */
.ust-faq { display: flex; flex-direction: column; gap: .8em; }
.ust-faq-item {
	background: var(--ust-surface); color: var(--ust-surface-text);
	border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius);
	padding: 0; overflow: hidden;
}
.ust-faq-item__question {
	display: flex; align-items: center; justify-content: space-between; gap: 1em;
	padding: 1em 1.2em; font-weight: 600; cursor: pointer; list-style: none;
}
.ust-faq-item__question::-webkit-details-marker { display: none; }
.ust-faq-item__question::after {
	content: "+"; flex-shrink: 0; font-size: 1.3rem; font-weight: 400; line-height: 1;
	color: var(--ust-color-topbar); transition: transform .2s ease;
}
.ust-faq-item[open] > .ust-faq-item__question::after { transform: rotate(45deg); }
.ust-faq-item__answer { padding: 0 1.2em 1.2em; color: var(--ust-surface-text-muted); }
.ust-faq-item__answer:empty { display: none; }

/* ---------- Before / after ---------- */
.ust-before-after {
	position: relative; overflow: hidden; border-radius: var(--ust-radius);
	aspect-ratio: 16 / 9; user-select: none; touch-action: pan-y;
}
.ust-before-after__after, .ust-before-after__before {
	position: absolute; inset: 0; overflow: hidden;
}
.ust-before-after__before { width: 50%; border-right: 2px solid #fff; }
.ust-before-after__after img, .ust-before-after__before img {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
}
.ust-before-after__before img { width: var(--ust-ba-img-width, 100%); }
.ust-before-after__handle {
	position: absolute; top: 0; bottom: 0; left: 50%; width: 40px; margin-left: -20px;
	display: flex; align-items: center; justify-content: center; cursor: ew-resize;
}
.ust-before-after__handle::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff;
}
.ust-before-after__handle::after {
	content: "\21c6"; position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
	background: #fff; color: #333; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 4px rgba(0,0,0,.3); font-size: 1rem;
}
.ust-before-after__label {
	position: absolute; bottom: 10px; padding: 4px 10px; border-radius: 999px;
	background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; font-weight: 600; pointer-events: none;
}
.ust-before-after__label--before { left: 10px; }
.ust-before-after__label--after { right: 10px; }
.ust-before-after__placeholder { color: var(--ust-surface-text-muted); padding: 2em; text-align: center; border: 1px dashed var(--ust-surface-border); border-radius: var(--ust-radius); }

/* ---------- Business hours ---------- */
.ust-hours { background: var(--ust-surface); color: var(--ust-surface-text); border-radius: var(--ust-radius); padding: 1.6em; box-shadow: 0 1px 3px var(--ust-surface-shadow); }
.ust-hours__indicator {
	display: inline-block; margin: 0 0 1em; padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem;
	background: var(--ust-surface-2); color: var(--ust-surface-text-muted);
}
.ust-hours__indicator.is-open { background: #e9f7ee; color: #14532d; }
.ust-hours__indicator.is-closed { background: #fdecea; color: #7a1a12; }
@media (prefers-color-scheme: dark) {
	.ust-hours__indicator.is-open { background: #0f2a19; color: #b6e3c4; }
	.ust-hours__indicator.is-closed { background: #341210; color: #f5b8b2; }
}
.ust-hours__table { width: 100%; border-collapse: collapse; }
.ust-hours__table th, .ust-hours__table td { text-align: left; padding: .5em 0; border-bottom: 1px solid var(--ust-surface-border); font-weight: 400; }
.ust-hours__table tr:last-child th, .ust-hours__table tr:last-child td { border-bottom: none; }
.ust-hours__table th { font-weight: 600; }
.ust-hours-editor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: .6em 0; border-bottom: 1px solid var(--ust-surface-border); }
.ust-hours-editor-row .components-base-control { margin-bottom: 0; }

/* ---------- Process / steps ---------- */
.ust-process { display: flex; flex-wrap: wrap; gap: 2em; counter-reset: ust-step; }
.ust-process-step { flex: 1 1 200px; text-align: center; counter-increment: ust-step; }
.ust-process-step__number {
	width: 48px; height: 48px; margin: 0 auto .8em; border-radius: 50%;
	background: var(--ust-color-topbar); color: #fff; font-weight: 800; font-size: 1.1rem;
	display: flex; align-items: center; justify-content: center;
}
.ust-process-step__number::before { content: counter(ust-step); }
.ust-process-step__title { margin: 0 0 .4em; }
.ust-process-step__description { color: var(--ust-surface-text-muted); margin: 0; }

/* ---------- Timeline ---------- */
.ust-timeline { position: relative; display: flex; flex-direction: column; gap: 2em; padding-left: 8px; }
.ust-timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--ust-surface-border); }
.ust-timeline-item { position: relative; display: flex; gap: 1.2em; }
.ust-timeline-item__marker {
	position: relative; z-index: 1; flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px;
	border-radius: 50%; background: var(--ust-color-topbar); border: 3px solid var(--ust-surface);
	box-shadow: 0 0 0 2px var(--ust-color-topbar);
}
.ust-timeline-item__date { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ust-color-topbar); margin-bottom: .2em; }
.ust-timeline-item__title { margin: 0 0 .3em; }
.ust-timeline-item__description { color: var(--ust-surface-text-muted); margin: 0; }

/* ---------- Menu / price list ---------- */
.ust-menu-list { display: flex; flex-direction: column; gap: 1.2em; }
.ust-menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; border-bottom: 1px dotted var(--ust-surface-border); padding-bottom: .8em; }
.ust-menu-item__text { flex: 1; }
.ust-menu-item__name { font-weight: 700; }
.ust-menu-item__description { margin: .2em 0 0; font-size: .9rem; color: var(--ust-surface-text-muted); }
.ust-menu-item__price { font-weight: 700; color: var(--ust-color-topbar); white-space: nowrap; }

/* ---------- Testimonial carousel ---------- */
.ust-testimonial-carousel-editor__grid, .ust-testimonial-carousel .eb-slider-init { display: flex; gap: 20px; flex-wrap: wrap; }
.ust-testimonial-carousel-editor__grid .ust-testimonial, .ust-testimonial-carousel-item { flex: 1 1 260px; }
.ust-testimonial-item-editor { border-top: 1px solid var(--ust-surface-border); padding-top: 12px; margin-top: 12px; }
.ust-testimonial-item-editor:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.ust-testimonial-carousel.eb-slider-wrapper .eb-slider-init { flex-wrap: nowrap; overflow: hidden; }
.ust-testimonial-carousel__item { padding: 4px; }

/* ---------- Logo wall ---------- */
.ust-logo-wall__grid {
	display: grid;
	grid-template-columns: repeat(var(--ust-logo-wall-columns, 5), 1fr);
	gap: 20px;
	align-items: center;
}
.ust-logo-wall__item { display: flex; align-items: center; justify-content: center; padding: 10px; }
.ust-logo-wall__item img { max-height: 60px; width: auto; max-width: 100%; object-fit: contain; }
.ust-logo-wall.has-grayscale .ust-logo-wall__item img { filter: grayscale(1) opacity(.6); transition: filter .2s ease; }
.ust-logo-wall.has-grayscale .ust-logo-wall__item:hover img { filter: grayscale(0) opacity(1); }
@media (max-width: 700px) {
	.ust-logo-wall__grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
}

/* ---------- Trust badges ---------- */
.ust-trust-badges { display: flex; flex-wrap: wrap; gap: var(--ust-space-md, 24px); align-items: center; justify-content: center; }
.ust-trust-badge { display: flex; align-items: center; gap: 10px; color: var(--ust-surface-text); }
.ust-trust-badge svg { color: var(--ust-color-topbar); flex-shrink: 0; }
.ust-trust-badge span { font-weight: 600; font-size: .9rem; }
.ust-trust-badge-editor { border-top: 1px solid var(--ust-surface-border); padding-top: 10px; margin-top: 10px; }
.ust-trust-badge-editor:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ---------- Countdown offer banner ---------- */
.ust-offer-bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px;
	padding: 12px 44px 12px 20px; background: var(--ust-color-topbar); color: #fff; position: relative; text-align: center;
}
.ust-offer-bar__text { font-weight: 600; }
.ust-offer-bar__countdown { font-variant-numeric: tabular-nums; font-weight: 800; background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 6px; }
.ust-offer-bar__button {
	background: #fff; color: var(--ust-color-topbar); padding: .4em 1.2em; border-radius: 999px; font-weight: 700;
	text-decoration: none; white-space: nowrap;
}
.ust-offer-bar__button:hover { opacity: .9; text-decoration: none; }
.ust-offer-bar__close {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	background: none; border: none; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: .8;
}
.ust-offer-bar__close:hover { opacity: 1; }
.ust-offer-bar.is-dismissed { display: none; }

/* ---------- Popup ---------- */
.ust-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ust-popup[hidden] { display: none; }
.ust-popup__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.ust-popup__panel {
	position: relative; background: var(--ust-surface); color: var(--ust-surface-text);
	border-radius: var(--ust-radius-lg); box-shadow: var(--ust-shadow-lg);
	max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: var(--ust-space-lg);
}
.ust-popup__close {
	position: absolute; top: 10px; right: 14px; background: none; border: none;
	font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ust-surface-text-muted);
}
.ust-popup__close:hover { color: var(--ust-surface-text); }
body.ust-popup-locked { overflow: hidden; }
.ust-popup-editor {
	border: 1.5px dashed var(--ust-surface-border); border-radius: var(--ust-radius-lg); padding: var(--ust-space-md);
}
.ust-popup-editor__hint { font-size: .85rem; font-style: italic; color: var(--ust-surface-text-muted); margin: 0 0 var(--ust-space-sm); }

/* ---------- Calculator ---------- */
.ust-calculator, .ust-calculator-editor {
	background: var(--ust-surface); border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius-lg);
	padding: var(--ust-space-md); box-shadow: var(--ust-shadow-sm); max-width: 480px;
}
.ust-calculator__title { margin: 0 0 var(--ust-space-sm); }
.ust-calculator__fields { display: flex; flex-direction: column; gap: var(--ust-space-sm); }
.ust-calculator__field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.ust-calculator__field input {
	width: 100%; padding: .6em .8em; border: 1px solid var(--ust-surface-border); border-radius: var(--ust-radius);
	background: var(--ust-surface); color: var(--ust-surface-text); font-size: 1rem; font-family: inherit;
}
.ust-calculator__result {
	margin-top: var(--ust-space-md); padding: var(--ust-space-sm); background: var(--ust-surface-2);
	border-radius: var(--ust-radius); display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ust-calculator__result-label { font-weight: 600; color: var(--ust-surface-text-muted); }
.ust-calculator__result-value { font-size: 1.5rem; font-weight: 800; color: var(--ust-color-topbar); font-variant-numeric: tabular-nums; }
.ust-calc-field-editor { border-top: 1px solid var(--ust-surface-border); padding-top: 10px; margin-top: 10px; }
.ust-calc-field-editor:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ---------- Comparison table ---------- */
.ust-comparison-wrap { overflow-x: auto; margin: 0 0 1.6em; }
.ust-comparison { width: 100%; border-collapse: collapse; background: var(--ust-surface); border-radius: var(--ust-radius); overflow: hidden; }
.ust-comparison th, .ust-comparison td { padding: .8em 1.2em; border-bottom: 1px solid var(--ust-surface-border); text-align: center; }
.ust-comparison thead th { background: var(--ust-surface-2); color: var(--ust-surface-text); font-weight: 700; }
.ust-comparison tbody th { text-align: left; color: var(--ust-surface-text); font-weight: 600; white-space: nowrap; }
.ust-comparison tbody tr:last-child th, .ust-comparison tbody tr:last-child td { border-bottom: none; }
.ust-comparison__cell.is-yes { color: #1e8e3e; font-size: 1.2rem; font-weight: 700; }
.ust-comparison__cell.is-no { color: var(--ust-surface-text-muted); font-size: 1.2rem; }
.ust-comparison-row-editor { border-top: 1px solid var(--ust-surface-border); padding-top: 10px; margin-top: 10px; }

/* ---------- Category / term showcase ---------- */
.ust-term-showcase {
	display: grid; gap: 1.4em;
	grid-template-columns: repeat(var(--ust-term-showcase-columns, 3), 1fr);
}
.ust-term-showcase__item {
	display: block; text-decoration: none; color: var(--ust-surface-text);
	background: var(--ust-surface); border-radius: var(--ust-radius); overflow: hidden;
	box-shadow: 0 1px 3px var(--ust-surface-shadow);
}
.ust-term-showcase__item:hover { text-decoration: none; }
.ust-term-showcase__image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ust-surface-2); }
.ust-term-showcase__image img { width: 100%; height: 100%; object-fit: cover; }
.ust-term-showcase__body { padding: 1em 1.2em; }
.ust-term-showcase__name { font-weight: 700; margin: 0 0 .2em; }
.ust-term-showcase__count { font-size: .85rem; color: var(--ust-surface-text-muted); }
@media (max-width: 700px) {
	.ust-term-showcase { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
}

@media (max-width: 600px) {
	.ust-price--featured { transform: none; }
	.ust-countdown__unit { min-width: 60px; padding: .6em .8em; }
	.ust-countdown__value { font-size: 1.4rem; }
	.ust-counter__number { font-size: 2rem; }
	.ust-process { flex-direction: column; }
}