#cc-main {
	--cc-font-family: var(--theme-font-family, var(--theme-font-stack-default, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
	--cc-modal-border-radius: var(--theme-form-field-border-radius, var(--theme-button-border-radius, 4px));
	--cc-btn-border-radius: var(--theme-button-border-radius, var(--theme-form-field-border-radius, 3px));
	--cc-modal-margin: clamp(12px, 2vw, 24px);
	--cc-bg: var(--theme-palette-color-8, #ffffff);
	--cc-primary-color: var(--theme-headings-color, var(--theme-text-color, #1f2933));
	--cc-secondary-color: var(--theme-text-color, #4b5563);
	--cc-link-color: var(--theme-link-initial-color, var(--theme-palette-color-1, #2271b1));
	--cc-btn-primary-bg: var(--theme-button-background-initial-color, var(--theme-palette-color-1, #2271b1));
	--cc-btn-primary-color: var(--theme-button-text-initial-color, #ffffff);
	--cc-btn-primary-border-color: var(--cc-btn-primary-bg);
	--cc-btn-primary-hover-bg: var(--theme-button-background-hover-color, var(--theme-palette-color-2, #135e96));
	--cc-btn-primary-hover-color: var(--theme-button-text-hover-color, #ffffff);
	--cc-btn-primary-hover-border-color: var(--cc-btn-primary-hover-bg);
	--cc-btn-secondary-bg: var(--theme-palette-color-6, #f4f6f8);
	--cc-btn-secondary-color: var(--theme-text-color, #1f2933);
	--cc-btn-secondary-border-color: var(--theme-border-color, rgba(224, 229, 235, 0.8));
	--cc-btn-secondary-hover-bg: var(--theme-palette-color-7, #ffffff);
	--cc-btn-secondary-hover-color: var(--theme-link-hover-color, var(--theme-palette-color-2, #135e96));
	--cc-btn-secondary-hover-border-color: var(--theme-link-hover-color, var(--theme-palette-color-2, #135e96));
	--cc-separator-border-color: var(--theme-border-color, rgba(224, 229, 235, 0.8));
	--cc-toggle-on-bg: var(--cc-btn-primary-bg);
	--cc-toggle-off-bg: var(--theme-palette-color-5, #8b98a5);
	--cc-toggle-readonly-bg: var(--theme-border-color, #d5dee2);
	--cc-section-category-border: var(--theme-border-color, rgba(224, 229, 235, 0.8));
	--cc-cookie-category-block-bg: color-mix(in srgb, var(--theme-palette-color-6, #f4f6f8) 86%, transparent);
	--cc-cookie-category-block-border: var(--theme-border-color, rgba(224, 229, 235, 0.8));
	--cc-cookie-category-block-hover-bg: var(--theme-palette-color-6, #f4f6f8);
	--cc-cookie-category-block-hover-border: var(--theme-link-initial-color, var(--theme-palette-color-1, #2271b1));
	--cc-cookie-category-expanded-block-hover-bg: color-mix(in srgb, var(--theme-palette-color-6, #f4f6f8) 72%, var(--theme-palette-color-8, #ffffff));
	--cc-footer-bg: var(--theme-palette-color-6, #f4f6f8);
	--cc-footer-color: var(--theme-text-color, #4b5563);
	--cc-footer-border-color: var(--theme-border-color, rgba(224, 229, 235, 0.8));
	font-size: 16px;
}

#cc-main .cm,
#cc-main .pm {
	border: 1px solid var(--theme-border-color, rgba(224, 229, 235, 0.8));
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

#cc-main .cm {
	max-width: min(520px, calc(100vw - 32px));
}

#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
	color: var(--theme-headings-color, var(--theme-text-color, inherit));
	letter-spacing: var(--theme-letter-spacing, 0);
}

#cc-main .cm__title {
	font-size: 1.15em;
}

#cc-main .cm__desc {
	font-size: 0.95em;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
	min-height: var(--theme-button-min-height, 42px);
	padding: var(--theme-button-padding, 0.6em 1.2em);
	font-family: var(--theme-button-font-family, var(--theme-font-family, inherit));
	font-size: var(--theme-button-font-size, 0.85em);
	font-weight: var(--theme-button-font-weight, 600);
	font-style: var(--theme-button-font-style, normal);
	/* Blocksy sets line-height without a fallback, so an unset button variable makes
	   the button inherit the body line-height. Inheriting here would pick up the
	   library's own value instead, so fall back to the theme variable explicitly. */
	line-height: var(--theme-button-line-height, var(--theme-line-height, 1.65));
	text-transform: var(--theme-button-text-transform, none);
	letter-spacing: var(--theme-button-letter-spacing, 0);
	box-shadow: var(--theme-button-shadow, none);
	transform: var(--theme-button-transform, none);
}

#cc-main .cm__footer {
	font-size: 0.85em;
}

#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
	box-shadow: var(--theme-button-shadow, none);
	transform: var(--theme-button-transform, none);
}

/* The library colours footer links with the footer text colour, which loses the
   theme link colour. Blocksy links stay blue, so these should too. */
#cc-main .cm__link-group a,
#cc-main .pm__section a,
#cc-main .cc__link {
	color: var(--cc-link-color);
}

#cc-main .cc__link:hover,
#cc-main a:hover {
	color: var(--theme-link-hover-color, var(--cc-primary-color));
}

.blocksy-cookie-preferences-button {
	cursor: pointer;
}

@supports not (background: color-mix(in srgb, #fff, #000)) {
	#cc-main {
		--cc-cookie-category-block-bg: var(--theme-palette-color-6, #f4f6f8);
		--cc-cookie-category-expanded-block-hover-bg: var(--theme-palette-color-6, #f4f6f8);
	}
}