body.cr-app-mode-active {
	--cr-page-padding: var(--cr-container-padding-desktop, 10vw);
	--cr-page-max-width: var(--cr-container-max-width, 1440px);
	--cr-card-radius: var(--cr-radius, 8px);
	--cr-card-border: var(--cr-border);
	--cr-card-bg: var(--cr-surface);
	--cr-card-shadow: var(--cr-shadow-soft);
}

body.cr-app-mode-active *,
body.cr-app-mode-active *::before,
body.cr-app-mode-active *::after {
	box-sizing: border-box;
}

body.cr-app-mode-active .cr-container,
body.cr-app-mode-active .cr-content,
body.cr-app-mode-active .cr-page {
	width: min(100%, var(--cr-page-max-width));
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--cr-page-padding);
	padding-left: var(--cr-page-padding);
}

body.cr-app-mode-active .cr-card,
body.cr-app-mode-active .woocommerce .shop_table,
body.cr-app-mode-active .woocommerce-cart-form,
body.cr-app-mode-active .cart_totals,
body.cr-app-mode-active .woocommerce-checkout-review-order,
body.cr-app-mode-active .woocommerce-billing-fields,
body.cr-app-mode-active .woocommerce-shipping-fields,
body.cr-app-mode-active .woocommerce-additional-fields,
body.cr-app-mode-active .woocommerce-MyAccount-content,
body.cr-app-mode-active .woocommerce-order {
	border: 1px solid var(--cr-card-border);
	border-radius: var(--cr-card-radius);
	background: var(--cr-card-bg);
	color: var(--cr-text);
	box-shadow: var(--cr-card-shadow);
}

body.cr-app-mode-active .cr-button,
body.cr-app-mode-active .woocommerce a.button,
body.cr-app-mode-active .woocommerce button.button,
body.cr-app-mode-active .woocommerce input.button,
body.cr-app-mode-active .woocommerce #respond input#submit,
body.cr-app-mode-active .wp-element-button,
body.cr-app-mode-active .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	border: 0;
	border-radius: 999px;
	background: var(--cr-button);
	color: var(--cr-inverse-text);
	padding: 0 var(--cr-spacing-md);
	font-family: var(--cr-font, inherit);
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.cr-app-mode-active .cr-button:hover,
body.cr-app-mode-active .cr-button:focus-visible,
body.cr-app-mode-active .woocommerce a.button:hover,
body.cr-app-mode-active .woocommerce a.button:focus-visible,
body.cr-app-mode-active .woocommerce button.button:hover,
body.cr-app-mode-active .woocommerce button.button:focus-visible,
body.cr-app-mode-active .woocommerce input.button:hover,
body.cr-app-mode-active .woocommerce input.button:focus-visible,
body.cr-app-mode-active .woocommerce #respond input#submit:hover,
body.cr-app-mode-active .woocommerce #respond input#submit:focus-visible,
body.cr-app-mode-active .wp-element-button:hover,
body.cr-app-mode-active .wp-element-button:focus-visible,
body.cr-app-mode-active .wp-block-button__link:hover,
body.cr-app-mode-active .wp-block-button__link:focus-visible {
	background: var(--cr-button-active);
	color: var(--cr-inverse-text);
	box-shadow: var(--cr-shadow-soft);
	transform: translateY(-1px);
	outline: 3px solid color-mix(in srgb, var(--cr-button-active) 22%, transparent);
	outline-offset: 2px;
}

body.cr-app-mode-active input[type="text"],
body.cr-app-mode-active input[type="email"],
body.cr-app-mode-active input[type="tel"],
body.cr-app-mode-active input[type="number"],
body.cr-app-mode-active input[type="search"],
body.cr-app-mode-active input[type="password"],
body.cr-app-mode-active textarea,
body.cr-app-mode-active select,
body.cr-app-mode-active .woocommerce input.input-text,
body.cr-app-mode-active .woocommerce textarea,
body.cr-app-mode-active .woocommerce select,
body.cr-app-mode-active .select2-selection {
	max-width: 100%;
	border: 1px solid var(--cr-border);
	border-radius: var(--cr-radius);
	background: var(--cr-surface);
	color: var(--cr-text);
	font-family: var(--cr-font, inherit);
}

body.cr-app-mode-active input[type="text"]:focus,
body.cr-app-mode-active input[type="email"]:focus,
body.cr-app-mode-active input[type="tel"]:focus,
body.cr-app-mode-active input[type="number"]:focus,
body.cr-app-mode-active input[type="search"]:focus,
body.cr-app-mode-active input[type="password"]:focus,
body.cr-app-mode-active textarea:focus,
body.cr-app-mode-active select:focus,
body.cr-app-mode-active .woocommerce input.input-text:focus,
body.cr-app-mode-active .woocommerce textarea:focus,
body.cr-app-mode-active .woocommerce select:focus,
body.cr-app-mode-active .select2-selection:focus {
	border-color: var(--cr-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-primary) 16%, transparent);
	outline: 0;
}

body.cr-app-mode-active .cr-badge,
body.cr-app-mode-active .cr-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	border: 1px solid var(--cr-border);
	border-radius: 999px;
	background: var(--cr-surface-alt);
	color: var(--cr-text);
	padding: 0.35rem 0.65rem;
	font-size: 0.82rem;
	font-weight: 850;
	line-height: 1;
}

body.cr-app-mode-active .cr-badge.is-active,
body.cr-app-mode-active .cr-chip.is-active,
body.cr-app-mode-active .is-active > .cr-chip {
	border-color: var(--cr-button-active);
	background: var(--cr-button-active);
	color: var(--cr-inverse-text);
}

body.cr-app-mode-active img,
body.cr-app-mode-active video,
body.cr-app-mode-active canvas,
body.cr-app-mode-active iframe,
body.cr-app-mode-active table {
	max-width: 100%;
}

body.cr-app-mode-active table {
	width: 100%;
}

body.cr-app-mode-active .entry-content > *,
body.cr-app-mode-active .wp-block-post-content > *,
body.cr-app-mode-active .woocommerce,
body.cr-app-mode-active .woocommerce-page {
	min-width: 0;
}

@media (max-width: 1199px) {
	body.cr-app-mode-active {
		--cr-page-padding: var(--cr-container-padding-laptop, 8vw);
	}
}

@media (max-width: 1023px) {
	body.cr-app-mode-active {
		--cr-page-padding: var(--cr-container-padding-tablet, 6vw);
	}
}

@media (max-width: 767px) {
	body.cr-app-mode-active {
		--cr-page-padding: var(--cr-container-padding-mobile, 5vw);
	}
}
