/**
 * Synameda design system.
 * All new UI must use these color and type tokens.
 */

.vl-global {
	/* Core palette: two brand colors and four neutrals. */
	--sy-color-primary: #24506a;
	--sy-color-soft: #edf3f7;
	--sy-color-surface: #ffffff;
	--sy-color-ink: #182126;
	--sy-color-muted: #66737c;
	--sy-color-line: #d8e1e6;

	/* Compatibility aliases used by the existing components. */
	--sy-bg: var(--sy-color-soft) !important;
	--sy-bg-strong: var(--sy-color-line) !important;
	--sy-primary: var(--sy-color-primary) !important;
	--sy-primary-dark: var(--sy-color-ink) !important;
	--sy-primary-soft: var(--sy-color-soft) !important;
	--sy-ink: var(--sy-color-ink) !important;
	--sy-muted: var(--sy-color-muted) !important;
	--sy-line: var(--sy-color-line) !important;
	--sy-surface: var(--sy-color-surface) !important;
	--sy-shadow-sm: none !important;
	--sy-shadow: none !important;

	/* Eight responsive type roles. */
	--sy-type-display: clamp(44px, 5.4vw, 76px);
	--sy-type-h1: clamp(38px, 4.2vw, 58px);
	--sy-type-h2: clamp(30px, 3.2vw, 44px);
	--sy-type-h3: clamp(22px, 2vw, 28px);
	--sy-type-body-lg: clamp(17px, 1.35vw, 20px);
	--sy-type-body: 16px;
	--sy-type-small: 14px;
	--sy-type-label: 12px;

	--sy-leading-tight: 1.05;
	--sy-leading-heading: 1.15;
	--sy-leading-body: 1.65;
}

.vl-global .snmd-home,
.vl-global .snmd-about,
.vl-global .snmd-needs-page {
	--snmd-accent: var(--sy-color-primary) !important;
	--snmd-accent-dark: var(--sy-color-ink) !important;
	--snmd-glow: var(--sy-color-soft) !important;
	--snmd-about-accent: var(--sy-color-primary) !important;
	--snmd-need-accent: var(--sy-color-primary) !important;
}

.vl-global {
	color: var(--sy-color-ink) !important;
}

.vl-global {
	font-size: var(--sy-type-body) !important;
	line-height: var(--sy-leading-body) !important;
}

.vl-global h1,
.vl-global h2,
.vl-global h3,
.vl-global h4,
.vl-global h5,
.vl-global h6 {
	color: var(--sy-color-ink);
	line-height: var(--sy-leading-heading) !important;
}

.vl-global h1 {
	font-size: var(--sy-type-h1) !important;
}

.vl-global h2 {
	font-size: var(--sy-type-h2) !important;
}

.vl-global h3 {
	font-size: var(--sy-type-h3) !important;
}

.vl-global .snmd-hero h1,
.vl-global .snmd-about-hero h1,
.vl-global .snmd-needs-hero h1 {
	font-size: var(--sy-type-display) !important;
	line-height: var(--sy-leading-tight) !important;
}

.vl-global .sy-product-card h2,
.vl-global .woocommerce ul.products li.product h2,
.vl-global .woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--sy-type-body-lg) !important;
	line-height: 1.25 !important;
}

.vl-global .snmd-hero__content > p,
.vl-global .snmd-about-hero__inner > p,
.vl-global .snmd-needs-hero__inner > p,
.vl-global .sy-shop-hero__copy {
	font-size: var(--sy-type-body-lg) !important;
}

.vl-global .sy-nav,
.vl-global .sy-product-card__body > p,
.vl-global .woocommerce,
.vl-global .snmd-home,
.vl-global .snmd-about,
.vl-global .snmd-needs-page {
	font-size: var(--sy-type-body) !important;
}

.vl-global .sy-product-card__category,
.vl-global .snmd-kicker,
.vl-global .snmd-about-kicker,
.vl-global .snmd-needs-kicker,
.vl-global [class*="eyebrow"],
.vl-global [class*="kicker"] {
	font-size: var(--sy-type-label) !important;
}

.vl-global .sy-nav__top,
.vl-global .sy-nav__dropdown,
.vl-global .sy-footer,
.vl-global small {
	font-size: var(--sy-type-small) !important;
}

.vl-global .sy-announcement {
	background: var(--sy-color-primary) !important;
	color: var(--sy-color-surface) !important;
}

.vl-global .sy-announcement a,
.vl-global .sy-announcement p {
	color: var(--sy-color-surface) !important;
}

.vl-global .sy-header,
.vl-global .sy-mobile-menu,
.vl-global .sy-nav__dropdown,
.vl-global .sy-footer,
.vl-global .sy-product-card,
.vl-global .woocommerce div.product,
.vl-global .woocommerce-cart-form,
.vl-global .woocommerce-checkout {
	background-color: var(--sy-color-surface) !important;
}

.vl-global .sy-header {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.vl-global .sy-wordmark,
.vl-global .sy-nav__top,
.vl-global .sy-nav__dropdown a,
.vl-global .sy-footer a,
.vl-global .sy-nav__dropdown a:hover,
.vl-global .sy-nav__dropdown a:focus-visible,
.vl-global .sy-footer a:hover,
.vl-global .sy-footer a:focus-visible {
	color: var(--sy-color-primary);
}

.vl-global .sy-nav__top::after,
.vl-global .sy-product-card__image::after,
.vl-global .sy-shop-hero::after {
	display: none !important;
}

.vl-global .sy-shop-hero,
.vl-global .snmd-trust,
.vl-global .snmd-needs,
.vl-global .snmd-featured,
.vl-global .snmd-why,
.vl-global .snmd-test,
.vl-global .snmd-about section,
.vl-global .snmd-needs-page section {
	background-image: none !important;
}

.vl-global .sy-shop-hero,
.vl-global .snmd-trust,
.vl-global .snmd-test,
.vl-global .snmd-about-cta,
.vl-global .snmd-needs-cta {
	background-color: var(--sy-color-soft) !important;
}

.vl-global .snmd-hero__overlay,
.vl-global .snmd-about-hero__shade,
.vl-global .snmd-needs-hero__overlay,
.vl-global .snmd-needs-hero--hub .snmd-needs-hero__overlay {
	background: rgba(24, 33, 38, 0.66) !important;
}

.vl-global .snmd-hero :where(h1, p, span),
.vl-global .snmd-about-hero :where(h1, p, span),
.vl-global .snmd-needs-hero :where(h1, p, span) {
	color: var(--sy-color-surface) !important;
}

.vl-global .snmd-hero :where(.snmd-kicker),
.vl-global .snmd-about-hero :where(.snmd-about-kicker),
.vl-global .snmd-needs-hero :where(.snmd-needs-kicker) {
	color: var(--sy-color-soft) !important;
}

.vl-global :where(
	.sy-product-card,
	.snmd-need-card,
	.snmd-feature-card,
	.snmd-review,
	.snmd-test__panel
) {
	background-color: var(--sy-color-surface) !important;
	border: 1px solid var(--sy-color-line) !important;
}

.vl-global .sy-product-card__image,
.vl-global .woocommerce-product-gallery,
.vl-global .woocommerce div.product div.images {
	background: var(--sy-color-soft) !important;
}

.vl-global :where(
	.button,
	.wp-element-button,
	.elementor-button,
	.snmd-button,
	.sy-footer__shop-link,
	.sy-shop-hero__test a,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button
) {
	background: var(--sy-color-primary) !important;
	background-image: none !important;
	border-color: var(--sy-color-primary) !important;
	color: var(--sy-color-surface) !important;
	box-shadow: none !important;
}

.vl-global :where(
	.button,
	.wp-element-button,
	.elementor-button,
	.snmd-button,
	.sy-footer__shop-link,
	.sy-shop-hero__test a,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button
):hover,
.vl-global :where(
	.button,
	.wp-element-button,
	.elementor-button,
	.snmd-button,
	.sy-footer__shop-link,
	.sy-shop-hero__test a,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button
):focus-visible {
	background: var(--sy-color-ink) !important;
	border-color: var(--sy-color-ink) !important;
	color: var(--sy-color-surface) !important;
}

.vl-global .snmd-trust__icon {
	background: var(--sy-color-primary) !important;
	color: var(--sy-color-surface) !important;
}

.vl-global :where(.snmd-form, .woocommerce, .elementor-form, .wpforms-container, .wpcf7) :where(input, select, textarea) {
	background: var(--sy-color-surface) !important;
	border-color: var(--sy-color-line) !important;
	color: var(--sy-color-ink) !important;
}

@media (max-width: 767px) {
	.vl-global {
		--sy-type-display: clamp(38px, 11vw, 52px);
		--sy-type-h1: clamp(34px, 9vw, 46px);
		--sy-type-h2: clamp(28px, 7.5vw, 38px);
		--sy-type-h3: clamp(21px, 5.5vw, 26px);
	}
}