:root{
	--font-family-inter:"Inter", arial, sans-serif;
	--font-family-poppins:"Poppins", arial, sans-serif;

	--font-copy-md:normal normal 16px/24px var(--font-family-inter);
	--font-copy-md-bold:normal bold 16px/24px var(--font-family-inter);
	--font-copy-sm:normal normal 14px/20px var(--font-family-inter);
	--font-copy-sm-bold:normal bold 14px/20px var(--font-family-inter);
	--font-h1:normal bold 60px/72px var(--font-family-poppins);
	--font-h3:normal 600 40px/48px var(--font-family-poppins);
	--font-h4:normal 600 32px/40px var(--font-family-poppins);
	--font-h5:normal 600 24px/28px var(--font-family-poppins);
	--font-h6:normal bold 20px/24px var(--font-family-inter);
	--font-caption-lg:normal normal 14px/20px var(--font-family-inter);
	--font-btn-lg:normal 600 16px/24px var(--font-family-inter);
	--font-input-lg:normal normal 16px/24px var(--font-family-inter);

	--color-bg-page:#fff;
	--color-bg-surface-1:#f9f9fb;
	--color-bg-surface-2:#f5f5f6;
	--color-bg-tinted-peach:#f8d0cd;
	--color-bg-tinted-pink:#fce8e6;
	--color-bg-tinted-pale-pink:#fdf3f3;

	--color-heading:#04101e;
	--color-copy-primary:#333;
	--color-copy-secondary:#6e6e6e;

	--color-link-disabled:#d4d4d4;

	--color-grey-50:#f8f8f9;
	--color-grey-100:#ededee;
	--color-grey-150:#e2e3e3;
	--color-grey-200:#d7d8d9;
	--color-primary-black-600:#515861;
	--color-primary-black-700:#38404a;
	--color-primary-black-800:#1f2834;
	--color-primary-black-900:#04101e;
	--color-primary-red-500:#dd1405;
	--color-primary-red-600:#b72c1c;
	--color-primary-red-700:#a22618;
	--color-primary-red-800:#8e2114;
	--color-secondary-cobalt-50:#f5f9ff;
	--color-secondary-cobalt-600:#003c9c;
	--color-secondary-cobalt-900:#00174c;

	--color-system-error:#e40046;

	--color-discount-primary-bg:#fce8e6;
	--color-discount-primary-text:#dd1405;
	--color-discount-secondary-bg:#f5f9ff;
	--color-discount-secondary-text:#303233
}
.theme-dark{
	--color-bg-surface-1:#1f242a;
	--color-bg-surface-2:#23282f;
	--color-bg-tinted-peach:#3e2527;
	--color-bg-tinted-pink:#402d30;
	--color-bg-tinted-pale-pink:#423539;

	--color-heading:#fff;
	--color-copy-primary:#e5e5e5;
	--color-copy-secondary:#999;

	--color-link-disabled:#686b70;

	--color-grey-50:#1a1f26;
	--color-grey-100:#30353b;
	--color-grey-150:#3b4046;
	--color-grey-200:#464b50;
	--color-grey-1000:#f8f8f9;
	--color-primary-black-600:#8f9195;
	--color-primary-black-700:#9c9fa4;
	--color-primary-black-800:#b5b7bc;
	--color-primary-black-900:#ededed;
	--color-primary-red-500:#ce3f2d;
	--color-primary-red-600:#d35040;
	--color-primary-red-700:#d76457;
	--color-primary-red-800:#dc796e;
	--color-secondary-cobalt-50:#00174c;
	--color-secondary-cobalt-600:#5784d1;
	--color-secondary-cobalt-900:#d9e1f5;

	--color-system-error:#f5828b;

	--color-discount-primary-bg:#b72c1c;
	--color-discount-primary-text:#f8f8f9;
	--color-discount-secondary-bg:#00174c;
	--color-discount-secondary-text:#f8f8f9
}
:root{
	--spacing-1:2px;
	--spacing-2:4px;
	--spacing-3:8px;
	--spacing-4:12px;
	--spacing-5:16px;
	--spacing-6:20px;
	--spacing-7:24px;
	--spacing-8:32px;
	--spacing-9:40px;
	--spacing-10:48px;
	--spacing-11:64px;
	--spacing-12:80px;
	--spacing-13:96px;
	--spacing-14:120px;
	--spacing-15:160px;

	--default-padding:var(--spacing-9)
}
.mio-grid{
	column-gap:var(--spacing-8);
	display:grid;
	grid-template-columns:repeat(12, 1fr)
}
.mio-grid>*{
	grid-column:1 /  -1
}
@media screen and (min-width:768px) and (max-width:1080px){
:root{
	--spacing-1:2px;
	--spacing-2:4px;
	--spacing-3:8px;
	--spacing-4:12px;
	--spacing-5:16px;
	--spacing-6:20px;
	--spacing-7:24px;
	--spacing-8:28px;
	--spacing-9:36px;
	--spacing-10:44px;
	--spacing-11:56px;
	--spacing-12:72px;
	--spacing-13:80px;
	--spacing-14:96px;
	--spacing-15:144px;

	--font-h1:normal bold 48px/56px var(--font-family-poppins);
	--font-h3:normal 600 32px/40px var(--font-family-poppins);
	--font-h4:normal 600 24px/28px var(--font-family-poppins);
	--font-h5:normal 600 20px/24px var(--font-family-poppins);
	--font-h6:normal bold 18px/24px var(--font-family-inter)
}
}
@media screen and (max-width:1080px){
:root{
	--default-padding:var(--spacing-7)
}
.mio-grid{
	column-gap:var(--spacing-7)
}
}
@media screen and (max-width:768px){
:root{
	--spacing-1:2px;
	--spacing-2:4px;
	--spacing-3:8px;
	--spacing-4:12px;
	--spacing-5:16px;
	--spacing-6:20px;
	--spacing-7:24px;
	--spacing-8:28px;
	--spacing-9:32px;
	--spacing-10:40px;
	--spacing-11:48px;
	--spacing-12:64px;
	--spacing-13:72px;
	--spacing-14:80px;
	--spacing-15:120px;

	--font-h1:normal bold 32px/40px var(--font-family-poppins);
	--font-h3:normal 600 24px/28px var(--font-family-poppins);
	--font-h4:normal 600 22px/26px var(--font-family-poppins);
	--font-h5:normal 600 20px/24px var(--font-family-poppins);
	--font-h6:normal bold 18px/24px var(--font-family-inter)
}
.mio-grid{
	grid-template-columns:repeat(4, 1fr)
}
}
.mio-button,.mio-icon-button,.mio-text-button{
	align-items:center;
	all:unset;
	border-radius:8px;
	box-sizing:border-box;
	cursor:pointer;
	display:flex;
	justify-content:center
}
.mio-button,.mio-text-button{
	gap:var(--btn-gap);
	flex-direction:row;
	font:var(--btn-font);
	min-height:var(--btn-height);
	padding:var(--btn-padding);
	text-align:center;
	width:fit-content
}
.mio-button.lg,.mio-text-button.lg{
	--btn-height:48px;
	--btn-icon-size:24px;
	--btn-gap:12px;
	--btn-padding:0 24px;
	--btn-font:var(--font-btn-lg)
}
.mio-button.primary{
	background-color:var(--color-primary-red-500);
	color:var(--color-grey-50)
}
.mio-button.primary:focus:not(:disabled),.mio-button.primary:hover:not(:disabled){
	background-color:var(--color-primary-red-600)
}
.mio-button.primary:active:not(:disabled){
	background-color:var(--color-primary-red-700)
}
.mio-button.primary:disabled{
	background-color:var(--color-grey-100);
	color:var(--color-link-disabled)
}
.mio-button.secondary{
	background-color:var(--color-bg-tinted-pale-pink);
	color:var(--color-primary-red-500)
}
.mio-button.secondary:focus:not(:disabled),.mio-button.secondary:hover:not(:disabled){
	background-color:var(--color-bg-tinted-pink)
}
.mio-button.secondary:active:not(:disabled){
	background-color:var(--color-bg-tinted-peach)
}
.mio-button.secondary:disabled{
	background-color:var(--color-grey-100);
	color:var(--color-link-disabled)
}
.mio-button.primary-muted{
	background-color:var(--color-primary-black-900);
	color:var(--color-grey-50)
}
.mio-button.primary-muted:focus:not(:disabled),.mio-button.primary-muted:hover:not(:disabled){
	background-color:var(--color-primary-black-700)
}
.mio-button.primary-muted:active:not(:disabled){
	background-color:var(--color-primary-black-600)
}
.mio-button.primary-muted:disabled{
	background-color:var(--color-grey-100);
	color:var(--color-link-disabled)
}
.mio-button.outline-muted{
	border:2px solid;
	color:var(--color-primary-black-900)
}
.mio-button.outline-muted:focus:not(:disabled),.mio-button.outline-muted:hover:not(:disabled){
	background-color:var(--color-bg-surface-1);
	color:var(--color-primary-black-900)
}
.mio-button.outline-muted:active:not(:disabled){
	background-color:var(--color-bg-surface-2);
	color:var(--color-primary-black-800)
}
.mio-button.outline-muted:disabled{
	background-color:unset;
	color:var(--color-link-disabled)
}
.theme-dark .mio-button.primary{
	color:var(--color-grey-1000)
}
.theme-dark .mio-button.secondary{
	background-color:var(--color-bg-tinted-peach);
	color:var(--color-primary-red-800)
}
.theme-dark .mio-button.secondary:active:not(:disabled){
	background-color:var(--color-bg-tinted-pale-pink)
}
.theme-dark .mio-button.primary-muted:focus:not(:disabled),.theme-dark .mio-button.primary-muted:hover:not(:disabled){
	background-color:var(--color-primary-black-800)
}
.theme-dark .mio-button.primary-muted:active:not(:disabled){
	background-color:var(--color-primary-black-700)
}
.theme-dark .mio-button.outline-muted:focus:not(:disabled),.theme-dark .mio-button.outline-muted:hover:not(:disabled){
	border-color:var(--color-primary-black-900)
}
.theme-dark .mio-button.outline-muted:active:not(:disabled){
	border-color:var(--color-primary-black-800)
}
.theme-dark .mio-button.outline-muted:disabled{
	background-color:unset;
	border-color:var(--color-grey-100);
	color:var(--color-link-disabled)
}
.mio-textarea{
	background:var(--color-bg-page);
	border:1px solid var(--color-grey-200);
	border-radius:8px;
	box-sizing:border-box;
	color:var(--color-copy-primary);
	font:var(--input-font);
	height:var(--input-height);
	padding:var(--input-padding);
	resize:none
}
.mio-textarea.lg{
	--input-height:96px;
	--input-padding:12px;
	--input-font:var(--font-input-lg)
}
.mio-textarea:focus-visible{
	border-color:var(--color-primary-black-800);
	outline:none
}
.mio-textarea.error-highlight{
	border-color:var(--color-system-error)
}
