@charset "UTF-8";
/*
Distriplast theme
*/
@layer theme.reset {
		@supports (interpolate-size: allow-keywords) {
	:root {
			interpolate-size: allow-keywords;
	}
		}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Prevent font size inflation */
	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		scroll-behavior: smooth;
	}

	/* Remove default margin in favour of better control in authored CSS */
	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd {
		margin: 0;
	}

	/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
	ul[role="list"],
	ol[role="list"] {
		list-style: none;
	}

	/* Set shorter line heights on headings and interactive elements */
	h1,
	h2,
	h3,
	h4,
	button,
	input,
	label {
		line-height: 1.1;
	}

	/* Make images easier to work with */
	img,
	picture {
		display: block;
		max-width: 100%;
	}

	/* Inherit fonts for inputs and buttons */
	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	/* Hides reCAPTCHA banner */
	.grecaptcha-badge {
		visibility: hidden;
	}
}
/* Atoms */
@layer atoms.color {
	/* Button -> Colors */
	.color--brand {
		--_button-color-primary: var(--c-button-brand-primary, var(--s-color-brand-primary));
		--_button-color-secondary: var(--c-button-brand-secondary, var(--s-color-brand-secondary));
		--_button-color-tertiary: var(--c-button-brand-tertiary, var(--s-color-brand-tertiary));
		--_button-color-contrast: var(--c-button-brand-contrast, var(--s-color-brand-contrast));
		--_text-color-primary: var(--c-text-brand-primary, var(--s-color-brand-primary));
	}

	.color--accent-1 {
		--_button-color-primary: var(--c-button-accent-1-primary, var(--s-color-accent-1-primary));
		--_button-color-secondary: var(--c-button-accent-1-secondary, var(--s-color-accent-1-secondary));
		--_button-color-tertiary: var(--c-button-accent-1-tertiary, var(--s-color-accent-1-tertiary));
		--_button-color-contrast: var(--c-button-accent-1-contrast, var(--s-color-accent-1-contrast));
		--_text-color-primary: var(--c-text-accent-1-primary, var(--s-color-accent-1-primary));
	}

	.color--accent-2 {
		--_button-color-primary: var(--c-button-accent-2-primary, var(--s-color-accent-2-primary));
		--_button-color-secondary: var(--c-button-accent-2-secondary, var(--s-color-accent-2-secondary));
		--_button-color-tertiary: var(--c-button-accent-2-tertiary, var(--s-color-accent-2-tertiary));
		--_button-color-contrast: var(--c-button-accent-2-contrast, var(--s-color-accent-2-contrast));
		--_text-color-primary: var(--c-text-accent-2-primary, var(--s-color-accent-2-primary));
	}

	.color--accent-3 {
		--_button-color-primary: var(--c-button-accent-3-primary, var(--s-color-accent-3-primary));
		--_button-color-secondary: var(--c-button-accent-3-secondary, var(--s-color-accent-3-secondary));
		--_button-color-tertiary: var(--c-button-accent-3-tertiary, var(--s-color-accent-3-tertiary));
		--_button-color-contrast: var(--c-button-accent-3-contrast, var(--s-color-accent-3-contrast));
		--_text-color-primary: var(--c-text-accent-3-primary, var(--s-color-accent-3-primary));
	}

	.color--accent-4 {
		--_button-color-primary: var(--c-button-accent-4-primary, var(--s-color-accent-4-primary));
		--_button-color-secondary: var(--c-button-accent-4-secondary, var(--s-color-accent-4-secondary));
		--_button-color-tertiary: var(--c-button-accent-4-tertiary, var(--s-color-accent-4-tertiary));
		--_button-color-contrast: var(--c-button-accent-4-contrast, var(--s-color-accent-4-contrast));
		--_text-color-primary: var(--c-text-accent-4-primary, var(--s-color-accent-4-primary));
	}

	.color--accent-5 {
		--_button-color-primary: var(--c-button-accent-5-primary, var(--s-color-accent-5-primary));
		--_button-color-secondary: var(--c-button-accent-5-secondary, var(--s-color-accent-5-secondary));
		--_button-color-tertiary: var(--c-button-accent-5-tertiary, var(--s-color-accent-5-tertiary));
		--_button-color-contrast: var(--c-button-accent-5-contrast, var(--s-color-accent-5-contrast));
		--_text-color-primary: var(--c-text-accent-5-primary, var(--s-color-accent-5-primary));
	}

	.color--accent-6 {
		--_button-color-primary: var(--c-button-accent-6-primary, var(--s-color-accent-6-primary));
		--_button-color-secondary: var(--c-button-accent-6-secondary, var(--s-color-accent-6-secondary));
		--_button-color-tertiary: var(--c-button-accent-6-tertiary, var(--s-color-accent-6-tertiary));
		--_button-color-contrast: var(--c-button-accent-6-contrast, var(--s-color-accent-6-contrast));
		--_text-color-primary: var(--c-text-accent-6-primary, var(--s-color-accent-6-primary));
	}

	.color--accent-7 {
		--_button-color-primary: var(--c-button-accent-7-primary, var(--s-color-accent-7-primary));
		--_button-color-secondary: var(--c-button-accent-7-secondary, var(--s-color-accent-7-secondary));
		--_button-color-tertiary: var(--c-button-accent-7-tertiary, var(--s-color-accent-7-tertiary));
		--_button-color-contrast: var(--c-button-accent-7-contrast, var(--s-color-accent-7-contrast));
		--_text-color-primary: var(--c-text-accent-7-primary, var(--s-color-accent-7-primary));
	}
}
@layer atoms.typography {
	body {
		font-family: var(--s-font-family-default);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.h1,
	.h2,
	.h3,
	.h4,
	.h5,
	.h6 {
		margin-block: 0;
		font-family: var(--s-font-family-heading);
	}

		@supports selector(:has(+ *)) {
			:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):has(.icon) {
				display: flex;
				gap: 0.5cap;
			}
		}

	h1,
	.h1 {
		font-weight: var(--s-h1-font-weight);
		font-size: var(--s-h1-font-size);
		line-height: var(--s-h1-line-height);
	}

	h2,
	.h2 {
		color: var(--s-h2-color, currentColor);
		font-weight: var(--s-h2-font-weight);
		font-size: var(--s-h2-font-size);
		line-height: var(--s-h2-line-height);
	}

	h3,
	.h3 {
		font-weight: var(--s-h3-font-weight);
		font-size: var(--s-h3-font-size);
		line-height: var(--s-h3-line-height);
	}

	h4,
	.h4 {
		font-weight: var(--s-h4-font-weight);
		font-size: var(--s-h4-font-size);
		line-height: var(--s-h4-line-height);
	}

	h5,
	.h5 {
		font-weight: var(--s-h5-font-weight);
		font-size: var(--s-h5-font-size);
		line-height: var(--s-h5-line-height);
	}

	h6,
	.h6 {
		font-weight: var(--s-h6-font-weight);
		font-size: var(--s-h6-font-size);
		line-height: var(--s-h6-line-height);
	}

	.lead,
	.lead p {
		font-size: var(--s-body-lead-font-size);
	}
		ul li::marker {
		}
}
@layer atoms.table {
	table {
		margin-block-start: var(--s-gap-lg);
		overflow: hidden;
		border: 1px solid var(--s-table-color-border);
		border-radius: var(--s-table-border-radius);
		border-spacing: 1px;
		background-color: var(--s-table-color-border);
	}

	th,
	thead td {
		padding: var(--s-table-th-padding-block) var(--s-table-th-padding-inline);
		background-color: var(--s-table-th-color-background);
		font-weight: var(--s-table-th-font-weight);
		text-align: start;
	}

	td {
		padding: var(--s-table-td-padding-block) var(--s-table-td-padding-inline);
	}

	tbody tr:nth-of-type(odd) td {
		background-color: var(--s-table-td-odd-color-background);
	}

	tbody tr:nth-of-type(even) td {
		background-color: var(--s-table-td-even-color-background);
	}
}
@layer atoms {
	.wrapper {
		max-width: var(--p-wrapper-max-width);
		margin-inline: auto;
		padding-inline: var(--p-wrapper-padding);
	}
}
/* Molecules */
@layer molecules.button {
	.button {
		--button-default-font-size: var(--c-button-default-font-size, 1rem);

		--button-padding-x: var(--spacing-3);
		--button-padding-y: var(--spacing-2);
		--button-font-family: var(--c-button-font-family, var(--s-font-family-button));
		--button-font-weight: var(--c-button-font-weight, var(--s-font-weight-button));

		--button-underline-offset: 4px;
		--button-line-height: 1.5;
		--button-opacity: 1;
		--button-text-transform: var(--c-button-text-transform, none);

		--button-border-width: 1px;
		--button-border-radius: var(--s-default-radius);

		--button-focus-outline-offset: 2px;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		padding: var(--button-padding-y) var(--button-padding-x);
		gap: var(--p-spacing-2);
		border: var(--button-border-width) solid var(--button-color-border);
		border-radius: var(--button-border-radius);
		background-color: var(--button-color-background);
		color: var(--button-color-foreground);
		font-weight: var(--button-font-weight);
		font-size: var(--button-font-size);
		line-height: var(--button-line-height);
		font-family: var(--button-font-family);
		-webkit-text-decoration: var(--button-text-decoration);
		        text-decoration: var(--button-text-decoration);
		text-underline-offset: var(--button-underline-offset);
		text-transform: var(--button-text-transform);
		cursor: pointer;
		opacity: var(--button-opacity);
		transition:
			background-color 0.2s,
			color 0.2s,
			border-color 0.2s;
	}

		.button:hover:not(:disabled) {
			border-color: var(--button-hover-color-border);
			background-color: var(--button-hover-color-background);
			color: var(--button-hover-color-foreground);
			opacity: var(--button-hover-opacity, 1);
		}

		.button:focus-visible {
			border-color: var(--button-focus-color-border);
			outline: 2px solid var(--button-focus-color-outline-border);
			outline-offset: var(--button-focus-outline-offset);
		}

		.button:disabled {
			--button-opacity: 0.75;
			cursor: not-allowed;
		}

	/* Button -> Sizes */
	.button--sm {
		--button-padding-x: var(--c-button-sm-padding-x);
		--button-padding-y: var(--c-button-sm-padding-y);
		--button-font-size: var(--c-button-sm-font-size, var(--button-default-font-size));
	}

	.button--md {
		--button-padding-x: var(--c-button-md-padding-x);
		--button-padding-y: var(--c-button-md-padding-y);
		--button-font-size: var(--c-button-md-font-size, var(--button-default-font-size));
	}

	.button--lg {
		--button-padding-x: var(--c-button-lg-padding-x);
		--button-padding-y: var(--c-button-lg-padding-y);
		--button-font-size: var(--c-button-lg-font-size, var(--button-default-font-size));
	}

	/* Button -> Primary */
	.button--primary {
		--_button-color-foreground: var(--_button-color-contrast);
		--_button-color-background: var(--_button-color-primary);
		--_button-color-border: var(--_button-color-background);
		--button-border-radius: var(--c-button-primary-radius);

		--button-hover-color-foreground: var(--_button-color-foreground);
		--button-hover-color-background: var(--_button-color-secondary);
		--button-hover-color-border: var(--button-hover-color-background);
	}

	.button--secondary {
		--_button-color-foreground: var(--_button-color-primary);
		--_button-color-background: var(--_button-color-contrast);
		--_button-color-border: var(--_button-color-foreground);

		--button-border-radius: var(--c-button-secondary-radius);

		--button-hover-color-foreground: var(--_button-color-secondary);
		--button-hover-color-background: var(--_button-color-background);
		--button-hover-color-border: var(--button-hover-color-foreground);
	}

		.button--secondary.button--light {
			--button-color-background: transparent;
		}

	/* Button -> Modes */
	.button--dark {
		--_button-inverse-foreground: var(--_button-color-background);
		--_button-inverse-background: var(--_button-color-foreground);

		--button-color-foreground: var(--_button-inverse-foreground);
		--button-color-background: var(--_button-inverse-background);
		--button-color-border: var(--_button-inverse-foreground);
		--button-focus-color-outline-border: var(--s-button-color-focus-outline-dark);
	}

		.button--dark:not(.button--secondary) {
			--button-hover-color-foreground: var(--_button-color-secondary);
			--button-hover-color-background: var(--_button-inverse-background);
			--button-hover-color-border: var(--button-hover-color-foreground);
		}

		.button--dark.button--secondary {
			--button-hover-opacity: 0.75;
			--button-color-background: transparent;
			--button-hover-color-foreground: var(--_button-color-background);
			--button-hover-color-background: transparent;
		}

	.button--light {
		--button-color-foreground: var(--_button-color-foreground);
		--button-color-background: var(--_button-color-background);
		--button-color-border: var(--_button-color-border);

		--button-focus-color-outline-border: var(--s-button-color-focus-outline-light);
	}

	/* Button -> Link */
	.button--link {
		--button-padding-x: 0;
		--button-padding-y: var(--c-button-link-padding-y, var(--p-spacing-1));
		--button-font-family: var(--c-button-link-font-family, var(--s-font-family-default));
		--button-font-weight: var(--p-font-weight-regular);
		--button-focus-color-foreground: var(--_button-color-secondary);
		--button-hover-color-foreground: var(--_button-color-primary);
		--button-focus-outline-offset: 4px;

		gap: var(--p-spacing-1);
		border-bottom: 1px solid currentColor;
		border-radius: 0;
		-webkit-text-decoration: none;
		text-decoration: none;
	}

		.button--link:focus-visible {
			border-color: currentColor;
			outline: none;
			color: var(--button-focus-color-foreground);
		}
			:is(.button--link:hover,.button--link:focus-visible)::after {
				rotate: 45deg;
			}

		.button--link.button--light {
			--button-color-foreground: var(--s-button-link-color-foreground, var(--p-color-neutral-900));
		}

		.button--link.button--dark {
			--button-color-foreground: var(--s-button-link-color-foreground, var(--p-color-neutral-000));
			--button-hover-opacity: 0.75;
			--button-hover-color-foreground: var(--button-color-foreground);
		}

		.button--link::after {
			display: inline-block;
			width: 24px;
			height: 24px;
			background-color: currentColor;
			content: "";

			-webkit-mask-image: url("/svg/link-icon.svg");
			mask-image: url("/svg/link-icon.svg");

			-webkit-mask-position: center;
			mask-position: center;

			-webkit-mask-size: 24px;
			mask-size: 24px;

			transition: rotate 0.2s;
		}

	/* Button -> Icon */
	.button--icon {
		--button-padding-x: var(--c-button-icon-padding-x, 0);
		--button-padding-y: var(--c-button-icon-padding-y, 0);
	}
}
@layer molecules.form {
	:root {
		--form-padding: var(--s-form-padding);
		--form-spacing: var(--p-spacing-4);
		--form-background: var(--s-form-background);
		--form-foreground: var(--s-form-foreground);

		--form-field-background: var(--s-form-field-background);
		--form-field-foreground: var(--s-form-field-foreground);
		--form-field-border: var(--s-form-field-border);
		--form-field-padding: var(--s-form-field-padding);

		--form-accent-color: var(--s-form-accent-color);
		--form-choice-input-size: var(--s-form-choice-input-size);

		--form-success-background: var(--s-form-success-background);
		--form-success-foreground: var(--s-form-success-foreground);
		--form-warning-background: var(--s-form-warning-background);
		--form-warning-foreground: var(--s-form-warning-foreground);

		--form-invisible-element-color: rgba(184, 192, 197, 0.6);

		--form-active-color: var(--s-form-active-color);
		--form-focus-color: var(--s-form-focus-color);
		--form-border-radius: var(--s-default-radius);
	}

	.form {
		padding: var(--form-padding);
		background-color: var(--form-background);
	}

		.form fieldset {
			padding: 0;
			border: none;
		}

			:is(.form fieldset) a {
				color: currentColor;
			}

		.form .form__title,.form .form__description {
			margin-bottom: var(--s-gap-md);
		}

		.form .FormImageSubmitButton {
			width: 100%;
			height: 100%;
			padding: 0;
			border: 0;
			background: none;
			box-shadow: none;
		}

		.form .form__status-message {
			display: block;
			margin: var(--form-spacing) 0;
			padding: var(--form-spacing);
			background-color: var(--form-message-background);
			color: var(--form-message-foreground);
		}

		.form .form__status-message--success {
			--form-message-background: var(--form-success-background);
			--form-message-foreground: var(--form-success-foreground);
		}

		.form .form__status-message--warning {
			--form-message-background: var(--form-warning-background);
			--form-message-foreground: var(--form-warning-foreground);
		}
			:is(.form .form__status) .Form__Readonly__Message {
				--form-message-background: var(--form-readonly-background);
				--form-message-foreground: var(--form-readonly-foreground);

				display: block;
				margin: var(--form-spacing) 0;
				padding: var(--form-spacing);
			}

			:is(.form .form__status) .hide {
				display: none;
			}

		.form .layout__grid {
			column-gap: var(--p-spacing-5);
			row-gap: var(--p-spacing-3);
		}

		.form .layout__grid > [class*="width-"] {
			margin-block-start: unset;
		}

			:is(.form .layout__grid > [class*="width-"]):empty {
				display: none;
			}
			:is(.form .Form__Success) .hide {
				display: none;
			}
			:is(.form .form__main-body) .width-full:has(input[type="hidden"]) {
				display: none;
			}
			:is(.form .Form__NavigationBar) .Form__NavigationBar__Action {
				display: inline-block;
				width: 10em;
				max-width: 10rem;
				height: 2em;
				padding: inherit;
				border: 1px solid var(--form-active-color);
				border-radius: var(--form-border-radius);

				background-image: linear-gradient(to top, #fff, #e6e6e6);
				background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
				color: initial;
				font-size: inherit;
				text-align: center;
				vertical-align: middle;
			}

				:is(:is(.form .Form__NavigationBar) .Form__NavigationBar__Action):disabled {
					cursor: not-allowed;
					opacity: 0.4;
				}

			:is(.form .Form__NavigationBar) .Form__NavigationBar__ProgressBar {
				display: inline-block;
				width: 40%;
				border: 1px solid var(--form-active-color);
				vertical-align: middle;
			}

				:is(:is(.form .Form__NavigationBar) .Form__NavigationBar__ProgressBar) .Form__NavigationBar__ProgressBar--Progress {
					width: 0%; /* Will be adjusted by JavaScript */
					height: 1rem;
					background-color: var(--form-active-color); /*turn on this style to hide visual progress bar*/
				}

				:is(:is(.form .Form__NavigationBar) .Form__NavigationBar__ProgressBar) .Form__NavigationBar__ProgressBar--Text {
					display: none; /*turn off this style to show text "Page 1/4" of progress bar*/
				}
					:is(:is(:is(.form .Form__NavigationBar) .Form__NavigationBar__ProgressBar) .Form__NavigationBar__ProgressBar--Text) .Form__NavigationBar__ProgressBar__ProgressLabel {
					}
					:is(:is(:is(.form .Form__NavigationBar) .Form__NavigationBar__ProgressBar) .Form__NavigationBar__ProgressBar--Text) .Form__NavigationBar__ProgressBar__CurrentStep {
					}
					:is(:is(:is(.form .Form__NavigationBar) .Form__NavigationBar__ProgressBar) .Form__NavigationBar__ProgressBar--Text) .Form__NavigationBar__ProgressBar__StepsCount {
					}
			:is(.form .form__step) .form__step-title {
			}

			:is(.form .form__step) .form__step-description {
				margin-bottom: var(--form-spacing);
			}

		/* 
		All Form's Element need to be tag with this class at root DOM node. Form__Element wraps every-DOM-nodes of current form element.
		For simple element like Textbox, it can be the input
		For complex element like Selection, Captcha, it contains the Label and input controls for taking value from Visitor  
		*/

		.form .form__element {
			display: grid;
			margin: 0 0 var(--form-spacing) 0;
			gap: var(--p-spacing-3);

			/* Change style of Form__Element in the Preview viewport in EditView (it affects both Editting mode and Preview mode) */
		}
			.preview :is(.form .form__element) {
			}

			:is(.form .form__element) .form__element-caption {
				display: block;
				font-weight: var(--p-font-weight-medium);
				font-family: var(--s-font-family-default);
			}

			/* Validation error message for each Element */
			:is(.form .form__element) .form__element-validation-error {
				display: block;
				color: var(--form-warning-foreground);
				word-wrap: break-word;
			}

			/* SEMANTIC
			for marking non-data element (like FormStep, ParagraphText, ...) */
			:is(.form .form__element) .forn__element--nondata {
			}
			/* Element has this class will not be bound with saved Data in LocalStorage */
			:is(.form .form__element) .FormExcludeDataRebind {
			}
			:is(.form .ValidationRequired) .form__element-caption:after {
				content: " *";
			}

		.form .validation--fail {
			color: var(--form-warning-foreground);
		}
			:is(.form .validation--fail) input,:is(.form .validation--fail) textarea,:is(.form .validation--fail) select {
				border-color: var(--form-warning-foreground);
			}

			:is(.form .validation--fail) legend {
				color: var(--form-warning-foreground);
			}

		/************* UTILITY CLASSES ***********/
		/* Use serverside or clientside logic to add/remove this class to show/Hide element */
		.form .hide {
			display: none;
		}

		/************* BUILDIN ELEMENTS ***********/
		/******************************************/
		.form .form__submit {
			--button-color: var(--c-button-brand-contrast, var(--s-color-brand-contrast));
			--button-background: var(--c-button-brand-primary, var(--s-color-brand-primary));
			--button-border-radius: var(--s-default-radius);
			--button-focus-color-border: var(--c-button-brand-tertiary, var(--s-color-brand-tertiary));

			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: var(--s-form-button-padding-y) var(--s-form-button-padding-x);
			border: 1px solid var(--button-background);
			border-radius: var(--button-border-radius);
			background-color: var(--button-background);
			color: var(--button-color);
		}

			:is(.form .form__submit):disabled {
				cursor: not-allowed;
				opacity: 0.4;
			}

			:is(.form .form__submit):focus {
				border-color: var(--button-focus-color-border);
				outline: none;
				box-shadow: inset 0 0 0 1px var(--button-focus-color-border);
			}

		.form .form__reset {
		}
			:is(.form .form__textbox) .form__textbox-input {
				padding: var(--form-field-padding);
				border: 1px solid var(--form-field-border);
				border-radius: var(--form-border-radius);
				background-color: var(--form-field-background);
			}

				:is(:is(.form .form__textbox) .form__textbox-input):focus {
					outline-color: var(--form-focus-color);
				}
			:is(.form .form__textbox--textarea) .form__textbox-input {
				min-height: 150px;
			}
			:is(.form .form__textbox--number) .form__textbox-input {
			}

		.form .FormHidden {
		}
			:is(.form .form__file-upload) .form__file-upload__input {
				padding: var(--form-field-padding);
				border: 1px solid var(--form-field-border);
				border-radius: var(--form-border-radius);
				background-color: var(--form-field-background);
			}

				:is(:is(.form .form__file-upload) .form__file-upload__input):focus {
					outline-color: var(--form-focus-color);
				}

				:is(:is(.form .form__file-upload) .form__file-upload__input)::file-selector-button {
					margin-inline-end: var(--s-gap-xs);
					padding: var(--p-spacing-1) var(--p-spacing-2);
					border: 1px solid var(--form-accent-color);
					border-radius: var(--form-border-radius);
					background-color: transparent;
					color: var(--form-accent-color);
					font-weight: var(--p-font-weight-medium);
					font-family: var(--c-button-font-family, var(--s-font-family-button));
				}

			:is(.form .form__file-upload) .form__file-upload__posted-file {
				font-size: var(--s-body-small-font-size);
			}
			:is(.form .FormCaptcha) .FormTextbox__Input {
				width: 8rem;
			}
			:is(.form .FormCaptcha) .FormCaptcha__Image {
			}
			:is(.form .FormCaptcha) .FormCaptcha__Refresh {
				width: auto;
				height: auto;
				font-size: 1em;
			}

		.form .FormSelection {
		}
			:is(.form .form__choice) div:has( > .form__choice-input) {
				display: flex;
				align-items: center;
				margin-block-end: var(--s-gap-xxs);
				gap: var(--s-gap-xs);
			}

			:is(.form .form__choice) .form__choice-input {
				flex-shrink: 0;
				width: var(--form-choice-input-size);
				height: var(--form-choice-input-size);
				margin: 0;
				border-color: var(--form-field-border);
				accent-color: var(--form-accent-color);
			}

				:is(:is(.form .form__choice) .form__choice-input):focus {
					outline-color: var(--form-focus-color);
				}

			:is(.form .form__choice) .form__choice-input--checkbox {
			}

			:is(.form .form__choice) .form__choice-input--radio {
			}

			:is(.form .form__choice) .form__choice-label {
				display: inline-block;
			}
			:is(.form .FormChoice--Image) .FormChoice--Image__Item {
				/* for image choice items, display as a flow (inline-block), we want max 2 items in one row, with a small margin */
				display: inline-block;
				max-width: 40%;
				margin: 0.5rem;
				text-align: center; /* image caption will be center */
			}

				:is(:is(.form .FormChoice--Image) .FormChoice--Image__Item) .FormChoice--Image__Item__Caption {
				}
			/*img stand next to checked image will be bordered*/
			:is(.form .FormChoice--Image) .FormChoice__Input:checked ~ img {
				border: 1px solid var(--form-active-color);
			}

		/* Range element */
			:is(.form .form__range) .form__range-wrapper {
				display: inline-block;
				width: 80%;
			}

				:is(:is(.form .form__range) .form__range-wrapper) .form__range-slider__wrapper {
					display: flex;
				}

				/* range input type element */
				:is(:is(.form .form__range) .form__range-wrapper) .form__range-input {
					display: inline;
					flex: 1;
				}

				/* increase decrease button */
				:is(:is(.form .form__range) .form__range-wrapper) .form__range-slider__button {
					flex: 0.1;
					margin: 10px;
					border: none;
					background-color: #0a95c9;
					color: white;
					font-weight: bold;
					font-size: 14px;
					cursor: pointer;
				}

				:is(:is(.form .form__range) .form__range-wrapper) .form__range-slider__button--disabled {
					background-color: #a4a4a4;
					cursor: default;
				}

				/* min, max label elements */
				:is(:is(.form .form__range) .form__range-wrapper) .form__range-min {
					flex: 0.1;
					line-height: 54px;
					text-align: center;
				}
				:is(:is(.form .form__range) .form__range-wrapper) .form__range-max {
					flex: 0.1;
					line-height: 54px;
					text-align: center;
				}

				/* output element */
				:is(:is(.form .form__range) .form__range-wrapper) .form__range-output__wrapper {
					display: block;
					position: relative;
					text-align: center;
				}
					:is(:is(:is(.form .form__range) .form__range-wrapper) .form__range-output__wrapper) .form__range-output {
					}

		/*************** EDIT VIEW ****************/
		/******************************************/
		/* Form__Element which is invisible in ViewMode will have this CSS class in EditView (E.g.: FormStep and FormHidden should have this class) */
			.form__step:is(.form .EditView__InvisibleElement) {
				display: block;
				padding: 0.2rem;
				border-radius: var(--form-border-radius);
				border-color: var(--form-invisible-element-color);
				background-color: var(--form-invisible-element-color);
				box-shadow: 3px 3px 5px #ccc;
				color: #000;
				font-family: Verdana;
				/*text-align: center;*/
			}
					:is(.form__step:is(.form .EditView__InvisibleElement) .form__step-warning) .warning {
						display: block;
						background-color: var(--form-warning-background);
						color: var(--form-warning-foreground);
						word-wrap: break-word;
					}

			.form__hidden:is(.form .EditView__InvisibleElement) {
				display: inline-block;
				min-width: 18rem;
				padding: 0.2rem 1rem;
				border-radius: var(--form-border-radius);
				/*text-align: center;*/
			}
			:is(.form .form__warning) .warning {
				display: block;
				background-color: var(--form-warning-background);
				color: var(--form-warning-foreground);
				word-wrap: break-word;
			}

		.form .form__paragraph-original {
			display: none;
		}

	/* Re-usable form styling */
	.form__label {
		display: block;
		font-weight: var(--p-font-weight-medium);
		font-family: var(--s-font-family-default);
	}

	.form__input {
		padding: var(--form-field-padding);
		border: 1px solid var(--form-field-border);
		border-radius: var(--form-border-radius);
		background-color: var(--form-field-background);
	}

		.form__input:focus {
			outline-color: var(--form-focus-color);
		}

	.form__select > select {
		appearance: none;
		width: 100%;
		padding-inline-end: var(--p-spacing-6);
		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=);
		background-position: calc(100% - 12px) 50%;
		background-repeat: no-repeat;
		text-overflow: ellipsis;
	}

	.form__element--autocomplete {
		width: 100%;
	}

	.form__autocomplete {
		background-color: white;
	}

		.form__autocomplete::part(widget-container) {
			border: none;
		}
}
/* Pages */
:root {
	--header-height: var(--c-header-height, 144px);
}
@layer pages {
	html {
		overflow-x: hidden;
	}

	body {
		max-width: 100vw;
		padding: 0;
		background: var(--s-color-default-background);
		color: var(--s-color-default-foreground);
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.page {
		display: flex;
		flex-direction: column;
		min-height: 100dvh;
	}
			@media (width > 1040px) {
		.page--productdetail .layout__grid {
				--layout-column-gap: var(--s-gap-xl);
		}
			}

			@media (width > 1200px) {
		.page--productdetail .layout__grid {
				--layout-column-gap: calc(var(--s-gap-lg) + var(--s-gap-xl));
		}
			}
		.page--splash .page__content {
			min-height: calc(100dvh - var(--header-height));
		}
			@media (width > 1040px) {

		.page--splash .layout__content {
				height: 100%;
		}
			}
}
/* Templates */
@layer atoms.layout {
	.layout {
		--grid-content-max-width: var(--p-wrapper-max-width);
		--grid-full: var(--p-wrapper-padding);
		--grid-content: var(--grid-content-max-width);

		display: grid;
		grid-template-columns:
			[grid-full-start]
			var(--grid-full)
			[grid-content-start]
			var(--grid-content)
			[grid-content-end]
			var(--grid-full)
			[grid-full-end];
	}

	.layout > * {
		grid-column: grid-content;
	}

	.layout-full {
		grid-column: grid-full;
	}

	.layout__grid {
		--layout-gap: var(--s-gap-sm);
		--layout-row-gap: var(--layout-gap);
		--layout-column-gap: var(--layout-gap);

		display: grid;
		grid-template-columns: repeat(6, 1fr);
		column-gap: var(--layout-column-gap);
		/* padding-block: var(--s-gap-xl); */
		row-gap: var(--layout-row-gap);
	}

		.layout__grid > [class*="width-"] {
			--column-width: 6;
		}

		.layout__grid > [class*="width-"] {
			grid-column: span var(--column-width);
		}

		@media (width > 1040px) {

	.layout__grid {
			--layout-gap: var(--s-gap-lg);
			--column-offset-amount: 1;
	}

			.layout__grid > [class*="align-"] {
				grid-column: var(--column-offset-amount) / span var(--column-width);
			}

			.layout__grid > .width-large {
				--column-offset-amount-center: 2;
				--column-offset-amount-right: 3;
				--column-width: 4;
			}

			.layout__grid > .width-half {
				--column-offset-amount-center: 2;
				--column-offset-amount-right: 4;
				--column-width: 3;
			}

			.layout__grid > .width-small {
				--column-offset-amount-center: 3;
				--column-offset-amount-right: 5;
				--column-width: 2;
			}

			.layout__grid > .align--center {
				--column-offset-amount: var(--column-offset-amount-center);
			}

			.layout__grid > .align--right {
				--column-offset-amount: var(--column-offset-amount-right);
			}
		}

		.layout__grid > .width-full:not(.highlight):not(.anchor-navigation) + .width-full:not(.embed) {
			margin-block-start: calc(var(--layout-gap) * -1);
		}

	.layout__section,
	.text-image.width-full,
	.statistics.width-full,
	.anchor-navigation {
		--section-offset: var(--p-content-min-padding);

		margin-inline: calc(var(--section-offset) * -1);
	}

		@media (width > 1040px) {

	.layout__section,
	.text-image.width-full,
	.statistics.width-full,
	.anchor-navigation {
			--section-offset: calc((100dvw - var(--grid-content)) * 0.5);
	}
		}

		:is(.layout__section,.text-image.width-full,.statistics.width-full,.anchor-navigation) .layout__content {
			padding-inline: var(--section-offset);
		}

	.layout__section .text-image:not(.width-full) {
		--section-offset: 0;
	}

	.layout__grid > :last-child:not(.width-full) {
		margin-block-end: var(--s-gap-xl);
	}

	.anchor-navigation-target {
		scroll-margin-top: var(--header-height);
	}
}
/* Utilities */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}
.sr-only-focusable {
	transform: translateY(-100%);
	transition: transform 0.24s ease-out;
}
/*
Primitive tokens are theme specific variables that are used to define the theme specific values for the design system. 
These should never be used directly in the components. These should only be used to map to the semantic tokens.
*/
@layer theme {
	:root {
		/* Colors -> Primary */
		--p-color-primary-300: #808080;
		--p-color-primary-500: #636363;
		--p-color-primary-700: #3c3c3b;

		/* Colors -> Neutral */
		--p-color-neutral-000: #ffffff;
		--p-color-neutral-100: #fdfcfd;
		--p-color-neutral-200: #f8f7f8;
		--p-color-neutral-300: #ebebeb;
		--p-color-neutral-400: #d9d9d9;
		--p-color-neutral-500: #bfbfbf;
		--p-color-neutral-600: #adadad;
		--p-color-neutral-700: #8c8c8c;
		--p-color-neutral-800: #5f5d58;
		--p-color-neutral-900: #484848;
		--p-color-neutral-1000: #3c3c3b;

		/* Colors -> Accent */
		--p-color-accent-1-300: #e87378;
		--p-color-accent-1-500: #df3f45;
		--p-color-accent-1-700: #d2232a;

		--p-color-accent-2-300: #78b3ec;
		--p-color-accent-2-500: #548ec6;
		--p-color-accent-2-700: #3a72a8;

		--p-color-accent-3-300: #45b57a;
		--p-color-accent-3-500: #1a814b;
		--p-color-accent-3-700: #075b2f;

		--p-color-accent-4-300: #fae1c4;
		--p-color-accent-4-500: #debc93;
		--p-color-accent-4-700: #b89a76;

		--p-color-accent-5-300: #dfe2e8;
		--p-color-accent-5-500: #c2c5cd;
		--p-color-accent-5-700: #989aa1;

		--p-color-accent-6-300: #97979f;
		--p-color-accent-6-500: #79797f;
		--p-color-accent-6-700: #646469;

		--p-color-accent-7-300: #000000;
		--p-color-accent-7-500: #000000;
		--p-color-accent-7-700: #000000;

		--p-color-state-success-300: #c6ffce;
		--p-color-state-success-500: #66d575;
		--p-color-state-success-700: #2fa53f;

		--p-color-state-warning-300: #ffdb9e;
		--p-color-state-warning-500: #eeac3b;
		--p-color-state-warning-700: #d58b0b;

		--p-color-state-error-300: #ffc0c0;
		--p-color-state-error-500: #ea2424;
		--p-color-state-error-700: #9b0c0c;

		/* Spacing */
		--p-spacing-1: 4px;
		--p-spacing-2: 8px;
		--p-spacing-3: 12px;
		--p-spacing-4: 16px;
		--p-spacing-5: 24px;
		--p-spacing-6: 32px;
		--p-spacing-7: 48px;
		--p-spacing-8: 64px;
		--p-spacing-9: 96px;
		--p-spacing-10: 128px;
		--p-spacing-11: 160px;
		--p-spacing-12: 192px;

		/* Wrapper */
		--p-wrapper-max-width: calc(100dvw - var(--p-spacing-6));
		--p-wrapper-padding: var(--p-spacing-4);
		--p-grid-gutter: var(--p-spacing-4);
		--p-content-min-padding: var(--p-spacing-4);
	}

		@media (width > 430px) {
	:root {
			--p-wrapper-max-width: calc(100dvw - var(--p-spacing-7));
	}
		}

		@media (width > 1040px) {
	:root {
			--p-wrapper-padding: 1fr;
			--p-wrapper-max-width: calc(100dvw - var(--p-spacing-10));
	}
		}

		@media (width > 1199px) {
	:root {
			--p-grid-gutter: var(--p-spacing-6);
			--p-content-min-padding: var(--p-spacing-5);
	}
		}

		@media (width > 1500px) {
	:root {
			--p-wrapper-max-width: calc(1486px - var(--p-spacing-10));
	}
		}
	:root {

		/* Grid */
		--p-grid-gutter: var(--p-spacing-6);
		--p-grid-margin: var(--p-spacing-7);

		/* Radius */
		--p-radius-0: 0;
		--p-radius-1: 4px;
		--p-radius-2: 8px;
		--p-radius-3: 12px;
		--p-radius-4: 16px;
		--p-radius-5: 24px;
		--p-radius-6: 32px;

		/* Font */
		--p-font-family-default: "neulis-neue", sans-serif;
		--p-font-family-heading: "neulis-neue", sans-serif;
		--p-line-height-heading: 1.4;

		--p-font-weight-light: 300;
		--p-font-weight-regular: 400;
		--p-font-weight-medium: 500;
		--p-font-weight-semi-bold: 600;
		--p-font-weight-bold: 700;
	}
}
@layer theme {
	:root {
		--s-default-radius: var(--p-radius-1);
		--s-default-grid-margin: var(--p-grid-margin);
		--s-default-grid-gap: var(--p-grid-gutter);

		/* Gaps */
		--s-gap-xxxs: var(--p-spacing-1);
		--s-gap-xxs: var(--p-spacing-2);
		--s-gap-xs: var(--p-spacing-3);
		--s-gap-sm: var(--p-spacing-4);
		--s-gap-md: var(--p-spacing-5);
		--s-gap-lg: var(--p-spacing-6);
		--s-gap-xl: var(--p-spacing-7);
		--s-gap-xxl: var(--p-spacing-8);
		--s-gap-xxxl: var(--p-spacing-9);

		/* Colors */
		--s-color-brand-primary: var(--p-color-primary-700);
		--s-color-brand-secondary: var(--p-color-primary-500);
		--s-color-brand-tertiary: var(--p-color-primary-300);
		--s-color-brand-contrast: var(--p-color-neutral-000);

		--s-color-accent-1-primary: var(--p-color-accent-1-700);
		--s-color-accent-1-secondary: var(--p-color-accent-1-500);
		--s-color-accent-1-tertiary: var(--p-color-accent-1-300);
		--s-color-accent-1-contrast: var(--p-color-neutral-000);

		--s-color-accent-2-primary: var(--p-color-accent-2-700);
		--s-color-accent-2-secondary: var(--p-color-accent-2-500);
		--s-color-accent-2-tertiary: var(--p-color-accent-2-300);
		--s-color-accent-2-contrast: var(--p-color-neutral-000);

		--s-color-accent-3-primary: var(--p-color-accent-3-700);
		--s-color-accent-3-secondary: var(--p-color-accent-3-500);
		--s-color-accent-3-tertiary: var(--p-color-accent-3-300);
		--s-color-accent-3-contrast: var(--p-color-neutral-000);

		--s-color-accent-4-primary: var(--p-color-accent-4-700);
		--s-color-accent-4-secondary: var(--p-color-accent-4-500);
		--s-color-accent-4-tertiary: var(--p-color-accent-4-300);
		--s-color-accent-4-contrast: var(--p-color-neutral-000);

		--s-color-accent-5-primary: var(--p-color-accent-5-700);
		--s-color-accent-5-secondary: var(--p-color-accent-5-500);
		--s-color-accent-5-tertiary: var(--p-color-accent-5-300);
		--s-color-accent-5-contrast: var(--p-color-neutral-000);

		--s-color-accent-6-primary: var(--p-color-accent-6-700);
		--s-color-accent-6-secondary: var(--p-color-accent-6-500);
		--s-color-accent-6-tertiary: var(--p-color-accent-6-300);
		--s-color-accent-6-contrast: var(--p-color-neutral-000);

		--s-color-accent-7-primary: var(--p-color-accent-7-700);
		--s-color-accent-7-secondary: var(--p-color-accent-7-500);
		--s-color-accent-7-tertiary: var(--p-color-accent-7-300);
		--s-color-accent-7-contrast: var(--p-color-neutral-000);

		--s-color-neutral-background: var(--p-color-neutral-200);
		--s-color-neutral-foreground: var(--p-color-neutral-900);
		--s-color-neutral-title: var(--p-color-neutral-1000);

		--s-color-default-title: var(--s-color-neutral-title);
		--s-color-default-background: var(--p-color-neutral-000);
		--s-color-default-foreground: var(--p-color-neutral-900);
		--s-color-default-border: var(--p-color-neutral-200);

		/* Typography */
		--s-font-family-button: var(--p-font-family-default);
		--s-font-weight-button: var(--p-font-weight-semi-bold);

		--s-font-family-default: var(--p-font-family-default);
		--s-font-family-heading: var(--p-font-family-heading);

		--s-font-family-nav: var(--p-font-family-default);
		--s-font-weight-nav: var(--p-font-weight-semi-bold);
		--s-font-weight-nav-vertical: var(--p-font-weight-normal);

		--s-body-font-size: 0.875rem;
		--s-body-line-height: 1.6;

		--s-body-lead-font-size: 1rem;
		--s-body-lead-line-height: 1.5;

		--s-body-small-font-size: 0.75rem;
		--s-body-small-line-height: 1.5;

		--s-h1-font-size: 2rem;
		--s-h1-font-weight: var(--p-font-weight-medium);
		--s-h1-line-height: 1.1;

		--s-h2-font-size: 1.5rem;
		--s-h2-font-weight: var(--p-font-weight-regular);
		--s-h2-line-height: 1.2 --s-h3-font-size: 1.375rem;

		--s-h3-font-size: 1.375rem;
		--s-h3-font-weight: var(--p-font-weight-regular);
		--s-h3-line-height: var(--p-line-height-heading);

		--s-h4-font-size: 1.125rem;
		--s-h4-font-weight: var(--p-font-weight-regular);
		--s-h4-line-height: var(--p-line-height-heading);

		--s-h5-font-size: 1.125rem;
		--s-h5-font-weight: var(--p-font-weight-medium);
		--s-h5-line-height: var(--p-line-height-heading);

		--s-h6-font-size: 1rem;
		--s-h6-font-weight: var(--p-font-weight-regular);
		--s-h6-line-height: var(--p-line-height-heading);
	}

		@media (width > 768px) {
	:root {
			--s-h1-font-size: 4rem;
			--s-h3-font-size: 1.5rem;
			--s-h6-font-size: 1.125rem;
	}
		}

		@media (width > 1040px) {
	:root {
			--s-h1-font-size: 4.5rem;
			--s-h2-font-size: 2rem;
			--s-h3-font-size: 1.625rem;
			--s-h4-font-size: 1.5rem;
			--s-h5-font-size: 1.25rem;
			--s-h6-font-size: 1.125rem;
	}
		}
	:root {

		/* Buttons */
		--s-button-color-focus-outline-dark: var(--p-color-neutral-000);
		--s-button-color-focus-outline-light: var(--p-color-neutral-900);

		/* Table */
		--s-table-font-family: var(--s-font-family-default);
		--s-table-border-radius: var(--p-radius-2);

		--s-table-th-font-size: var(--s-body-font-size);
		--s-table-th-font-weight: var(--p-font-weight-semi-bold);
		--s-table-th-padding-block: var(--p-spacing-3);
		--s-table-th-padding-inline: var(--p-spacing-3);

		--s-table-td-font-size: var(--s-body-font-size);
		--s-table-td-font-weight: var(--p-font-weight-regular);
		--s-table-td-padding-block: var(--p-spacing-2);
		--s-table-td-padding-inline: var(--p-spacing-3);
		--s-table-color-border: var(--p-color-neutral-300);
		--s-table-th-color-background: var(--p-color-neutral-300);
		--s-table-td-odd-color-background: var(--p-color-neutral-100);
		--s-table-td-even-color-background: var(--p-color-neutral-000);

		/* Forms */
		--s-form-background: var(--p-color-neutral-200);
		--s-form-padding: var(--s-gap-xl);

		--s-form-field-background: var(--p-color-neutral-000);
		--s-form-field-border: var(--p-color-neutral-300);
		--s-form-field-padding: var(--s-gap-xs);
		--s-form-accent-color: var(--s-color-brand-primary);
		--s-form-focus-color: var(--s-color-neutral-700);
		--s-form-choice-input-size: var(--p-spacing-5);

		--s-form-button-padding-x: var(--p-spacing-5);
		--s-form-button-padding-y: var(--p-spacing-3);

		--s-form-success-background: var(--p-color-state-success-300);
		--s-form-success-foreground: var(--p-color-state-success-700);

		--s-form-warning-background: var(--p-color-state-error-300);
		--s-form-warning-foreground: var(--p-color-state-error-700);

		/* Actions */
		--s-actions-gap: var(--p-spacing-2);
		--s-actions-padding: var(--p-spacing-5);

		/* Image */
		--s-image-hover-scale: 1.05;

		/* Text + Image  */
		--s-text-image-icon-width: auto;
		--s-text-image-icon-height: 64px;

		/* CTA */
		--s-cta-image-margin-inline-start: 0;
		--s-cta-image-masked-margin-inline-start: 0;

		/* Dropdown */
		--s-dropdown-color-background: var(--p-color-neutral-000);
		--s-dropdown-border-radius: var(--p-radius-1);

		/* Tabs */
		--s-tabs-item-padding-block: var(--p-spacing-2);
		--s-tabs-item-padding-inline: var(--p-spacing-4);

		/* Tags */
		--s-tags-gap: var(--p-spacing-3);
		--s-tags-padding: 0;

		--s-tag-padding-x: var(--p-spacing-4);
		--s-tag-padding-y: var(--p-spacing-2);
		--s-tag-border-color: var(--p-color-neutral-000);
		--s-tag-border-width: 1px;

		/* Footer */
		--s-footer-color-border: transparent;
		--s-footer-main-color-foreground: var(--s-color-brand-contrast);
		--s-footer-main-color-background: var(--s-color-brand-primary);
		--s-footer-bottom-color-foreground: var(--s-color-brand-contrast);
		--s-footer-bottom-color-background: var(--s-color-brand-primary);
		--s-footer-underline-offset: 2px;

		/* Separator */
		--s-separator-background: var(--p-color-neutral-300);

		/* Search */
		--s-search-filter-button-background: var(--p-color-neutral-000);
		--s-search-filter-button-border-width: 1px;
		--s-search-filter-button-border-color: var(--p-color-neutral-900);

		--s-search-filter-button-background-active: var(--s-color-brand-primary);
		--s-search-filter-button-border-color-active: var(--s-color-brand-primary);
		--s-search-filter-button-color-active: var(--s-color-brand-contrast);

		--s-search-result-padding: var(--p-spacing-4);
		--s-search-result-background-color: var(--p-color-neutral-100);
		--s-search-result-border-width: 1px;
		--s-search-result-border-color: var(--p-color-neutral-200);

		/* Collapse */
		--s-collapse-summary-padding-inline: var(--p-spacing-4);
		--s-collapse-summary-padding-block: var(--p-spacing-4);
		--s-collapse-content-padding-inline: var(--p-spacing-4);
		--s-collapse-content-padding-block: 0 var(--p-spacing-4);

		/* Collapse item (used in FAQ & Product specificiations) */
		--s-collapse-item-padding-inline: var(--p-spacing-4);
		--s-collapse-item-padding-block: var(--p-spacing-4);
		--s-collapse-item-border-width: var(--s-search-result-border-width);
		--s-collapse-item-border-color: var(--s-search-result-border-color);
		--s-collapse-item-background-color: var(--s-search-result-background-color);

		--s-faq-category-list-item-border-color: var(--p-color-neutral-400);

		/* Pagination */
		--s-pagination-button-padding-block: var(--p-spacing-1);
		--s-pagination-button-padding-inline: var(--s-gap-xs);
		--s-pagination-button-background-color: var(--s-color-neutral-background);
		--s-pagination-button-foreground-color: var(--s-color-neutral-foreground);
		--s-pagination-button-border-radius: var(--s-default-radius);
	}

		@media (width > 1040px) {
	:root {
			--s-pagination-button-padding-inline: var(--s-gap-md);
	}
		}
	:root {

		--s-pagination-button-background-color-active: var(--s-color-brand-primary);
		--s-pagination-button-foreground-color-active: var(--s-color-brand-contrast);

		--s-backdrop-background-color: rgba(0, 0, 0, 0.6);

		/* Content list */
		--s-content-list-filters-padding: var(--s-gap-sm) var(--s-gap-md);
		--s-content-list-filters-background-color: var(--s-color-neutral-background);

		/* Statistics */
		--s-statistics-title-font-size: 1rem;
		--s-statistics-title-font-weight: var(--p-font-weight-regular);
		--s-statistics-value-font-size: 3.5rem;
		--s-statistics-value-font-weight: var(--p-font-weight-semi-bold);

		--s-statistics-light-background-color: var(--s-color-default-background);
		--s-statistics-light-text-color: var(--s-color-default-foreground);
		--s-statistics-light-value-color: var(--s-color-brand-primary);

		--s-statistics-dark-background-color: var(--s-color-brand-primary);
		--s-statistics-dark-text-color: var(--s-color-brand-contrast);
		--s-statistics-dark-value-color: var(--s-color-brand-contrast);

		/* Quote */
		--s-highlight-padding: var(--s-gap-xl);
		--s-highlight-gap: var(--s-gap-sm);
		--s-highlight-font-size: var(--s-h3-font-size);
		--s-highlight-font-weight: var(--s-h3-font-weight);
		--s-highlight-line-height: var(--s-h3-line-height);

		--s-highlight-info-font-size: var(--s-body-lead-font-size);
		--s-highlight-info-font-weight: var(--p-font-weight-regular);
		--s-highlight-info-line-height: var(--s-body-lead-line-height);

		--s-slider-navigation-background-color: rgba(255, 255, 255, 0.75);
		--s-slider-pagination-background-color: var(--p-color-neutral-000);
	}
}
/*
Componment tokens optional overwrites for theme specific values.
Use these as a last resort to override the component's default values.
*/
@layer theme {
	:root {
		/* Button -> Primary */
		--c-text-accent-1-primary: var(--p-color-neutral-1000);

		--c-button-primary-foreground: var(--s-color-brand-dark-foreground);
		--c-button-primary-background: var(--s-color-brand-dark-background);
		--c-button-primary-border: var(--c-button-primary-background);

		--c-button-sm-padding-x: var(--p-spacing-4);
		--c-button-sm-padding-y: var(--p-spacing-1);

		--c-button-md-padding-x: var(--p-spacing-5);
		--c-button-md-padding-y: var(--p-spacing-3);

		--c-button-lg-padding-x: var(--p-spacing-6);
		--c-button-lg-padding-y: var(--p-spacing-3);

		/* Header */
		--c-header-logo-margin-inline-start: calc(var(--p-spacing-4) * -1);

		/* Hero */
		--c-hero-height: 544px;
		--c-hero-image-object-fit: cover;
		--c-hero-image-width: 100%;
		--c-hero-image-height: calc(100% + 2px);
		--c-hero-image-overlay: rgba(0, 0, 0, 0.2);
		--c-hero-image-mask-end: none;
		--c-hero-image-mask-start: none;
		--c-hero-image-default-overlay-filter: brightness(0.8);
		--c-hero-image-center-overlay-filter: brightness(0.8);

		--c-hero-body-align-items: center;

		--c-hero-content-padding: 0;
		--c-hero-content-background: transparent;

		--c-hero-left-image-inline-start: 0;
		--c-hero-left-image-inline-end: 0;
		--c-hero-left-grid-columns: 3fr 2fr;

		--c-hero-right-image-inline-start: 0;
		--c-hero-right-image-inline-end: 0;
		--c-hero-right-grid-columns: 2fr 3fr;
	}

		@media (width > 1040px) {
	:root {
			--c-hero-left-image-inline-start: 0;
			--c-hero-right-image-inline-end: 0;
	}
		}
	:root {

		/* Hero -> large */

		/* Hero -> simple */
		--c-hero-simple-title-font-size: var(--s-h2-font-size);
		--c-hero-simple-content-padding: var(--s-gap-xl);
		--c-hero-simple-padding-block: var(--p-spacing-8);
		--c-hero-simple-image-mask-start: none;
		--c-hero-simple-image-mask-end: none;

		/* CTA */
		--c-cta-title-color-brand: var(--s-color-brand-primary);
		--c-cta-title-color-accent-1: var(--s-color-accent-1-primary);
		--c-cta-title-color-accent-2: var(--s-color-accent-2-primary);
		--c-cta-title-color-accent-3: var(--s-color-accent-3-primary);
		--c-cta-title-color-accent-4: var(--s-color-accent-4-primary);
		--c-cta-title-color-accent-5: var(--s-color-accent-5-primary);
		--c-cta-title-color-accent-6: var(--s-color-accent-6-primary);
		--c-cta-light-background-color: var(--p-color-neutral-200);
		--c-cta-actions-gap: var(--p-spacing-5);

		/* Text */
		--c-text-list-display: flex;
		--c-text-list-padding-inline-start: 0;
		--c-text-list-item-display: inline-block;
		--c-text-list-item-border-width: 1px;
		--c-text-list-item-padding-block: var(--p-spacing-2);

		--c-cta-actions-padding: 0;
		--c-cta-actions-gap: var(--p-spacing-5);
	}
}
@layer organisms.text {
		.text__rte ul li::before,.text__rte ol li::before {
			display: inline-block;
			margin-inline-end: var(--p-spacing-2);
		}

		.text__rte ul li::before {
			content: "✓";
		}

		.text__rte ol {
			counter-reset: list-counter;
		}

		.text__rte ol li {
			counter-increment: list-counter;
		}

		.text__rte ol li::before {
			content: counter(list-counter) ". ";
		}
}
@layer structures.footer {
		.footer .nav__link {
			--nav-link-focus: var(--s-footer-main-color-foreground);
		}
}