@font-face {
	font-family: 'Manrope';
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/manrope/manrope-medium.eot');
	src: url('../fonts/manrope/manrope-medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/manrope/manrope-medium.woff2') format('woff2'),
		url('../fonts/manrope/manrope-medium.woff') format('woff'),
		url('../fonts/manrope/manrope-medium.ttf') format('truetype'),
		url('../fonts/manrope/manrope-medium.svg#Manrope-Medium') format('svg');
}

@font-face {
	font-family: 'Manrope';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/manrope/manrope-semibold.eot');
	src: url('../fonts/manrope/manrope-semibold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/manrope/manrope-semibold.woff2') format('woff2'),
		url('../fonts/manrope/manrope-semibold.woff') format('woff'),
		url('../fonts/manrope/manrope-semibold.ttf') format('truetype'),
		url('../fonts/manrope/manrope-semibold.svg#Manrope-SemiBold') format('svg');
}

@font-face {
	font-family: 'Manrope';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/manrope/manrope-bold.eot');
	src: url('../fonts/manrope/manrope-bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/manrope/manrope-bold.woff2') format('woff2'),
		url('../fonts/manrope/manrope-bold.woff') format('woff'),
		url('../fonts/manrope/manrope-bold.ttf') format('truetype'),
		url('../fonts/manrope/manrope-bold.svg#Manrope-Bold') format('svg');
}

@font-face {
	font-family: 'Manrope';
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/manrope/manrope-extrabold.eot');
	src: url('../fonts/manrope/manrope-extrabold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/manrope/manrope-extrabold.woff2') format('woff2'),
		url('../fonts/manrope/manrope-extrabold.woff') format('woff'),
		url('../fonts/manrope/manrope-extrabold.ttf') format('truetype'),
		url('../fonts/manrope/manrope-extrabold.svg#Manrope-ExtraBold') format('svg');
}

:root {
	--color--white: #FFFFFF;
	--color--bg: #F2F2F2;
	--color--lightgrey: #E9E9E9;
	--color--grey: #A8A8A8;
	--color--black: #282828;
	--color--pink: #E83E8C;
	--color--red: #FF3E1D;
	--color--orange: #FD7E14;
	--color--yellow: #FFAB00;
	--color--green: #71DD37;
	--color--teal: #20C997;
	--color--cyan: #03C3EC;
	--color--blue: #007BFF;
	--color--indigo: #6610F2;
	--color--purple: #696CFF;

	--size--2: clamp(0.125rem, round(down, 0.0833rem + 0.0833vw, 1px), 0.25rem);
	--size--4: clamp(0.25rem, round(down, 0.2083rem + 0.0833vw, 1px), 0.375rem);
	--size--8: clamp(0.5rem, round(down, 0.4583rem + 0.0833vw, 1px), 0.625rem);
	--size--10: clamp(0.625rem, round(down, 0.5833rem + 0.0833vw, 1px), 0.75rem);
	--size--12: clamp(0.75rem, round(down, 0.7083rem + 0.0833vw, 1px), 0.875rem);
	--size--14: clamp(0.875rem, round(down, 0.8333rem + 0.0833vw, 1px), 1rem);
	--size--16: clamp(1rem, round(down, 0.9583rem + 0.0833vw, 1px), 1.125rem);
	--size--18: clamp(1.125rem, round(down, 1.0833rem + 0.0833vw, 1px), 1.25rem);
	--size--20: clamp(1.25rem, round(down, 1.2083rem + 0.1667vw, 1px), 1.5rem);
	--size--24: clamp(1.5rem, round(down, 1.4583rem + 0.1667vw, 1px), 1.75rem);
	--size--28: clamp(1.75rem, round(down, 1.7083rem + 0.1667vw, 1px), 2rem);
	--size--32: clamp(2rem, round(down, 1.9583rem + 0.3333vw, 1px), 2.5rem);
	--size--36: clamp(2.25rem, round(down, 2.2083rem + 0.3333vw, 1px), 2.75rem);
	--size--40: clamp(2.5rem, round(down, 2.4583rem + 0.3333vw, 1px), 3rem);
	--size--48: clamp(3rem, round(down, 2.9583rem + 0.3333vw, 1px), 3.5rem);
	--size--56: clamp(3.5rem, round(down, 3.4583rem + 0.3333vw, 1px), 4rem);
	--size--64: clamp(4rem, round(down, 3.9583rem + 0.3333vw, 1px), 4.5rem);
	--size--72: clamp(4.5rem, round(down, 4.4583rem + 0.6667vw, 1px), 5rem);
	--size--96: clamp(6rem, round(down, 5.9583rem + 0.6667vw, 1px), 7.5rem);
	--size--112: clamp(7rem, round(down, 6.9583rem + 0.6667vw, 1px), 8.75rem);
	--size--128: clamp(8rem, round(down, 7.9583rem + 0.6667vw, 1px), 10rem);

	--transition: all 500ms cubic-bezier(.23, 1, .32, 1);

	--wrapper-max-width: 80rem;

	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.125;
	user-select: none;
	-webkit-user-select: none;
	color: var(--color--black);
}

::selection {
	background: var(--color--black);
	color: var(--color--white);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

[disabled] {
	cursor: not-allowed;
	opacity: .5;
}

[disabled] * {
	pointer-events: none;
}

[disabled] [disabled] {
	opacity: 1;
}

[hidden] {
	display: none !important;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	min-width: 0;
}

html,
body {
	overflow: hidden;
	touch-action: none;
}

body {
	max-width: var(--wrapper-max-width);
	margin: 0 auto;
	background: var(--color--bg);
	height: 100dvh;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

header {
	display: flex;
	align-items: center;
	gap: var(--size--16);
	padding: var(--size--4) var(--size--8);
	text-align: center;
}

header>.button {
	margin: 0;
}

main {
	padding: 0 var(--size--16) var(--size--16) var(--size--16);
	overflow: hidden auto;
}

main,
.form.is--order .column {
	scroll-behavior: smooth;
}

main:has(.is--fixed) {
	padding-bottom: var(--size--72);
}

body.is--order main,
body.is--tablet main,
.form.is--order .column {
	scroll-padding-top: var(--size--48);
}

.header-wrapper {
	flex: 1;
}

.header-wrapper h1 {
	font-size: var(--size--14);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.header-wrapper p {
	font-size: var(--size--10);
}

h1 {
	font-weight: 800;
	font-size: var(--size--20);
	margin: var(--size--20) 0 var(--size--8) 0;
}

h2 {
	font-weight: 800;
	font-size: var(--size--14);
	margin: var(--size--8) 0;
}

h3 {
	font-weight: 700;
	font-size: var(--size--12);
}

p {
	font-size: var(--size--12);
	color: var(--color--grey);
	line-height: 1.5;
}

small {
	font-size: var(--size--10);
	color: var(--color--grey);
	font-weight: 600;
}

img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}

a {
	-webkit-touch-callout: none;
}

table {
	width: calc(100% + var(--size--16) * 2);
	left: calc(var(--size--16) * -1);
	position: relative;
	border-collapse: collapse;
	font-size: var(--size--12);
}

tfoot {
	font-weight: 700;
}

tfoot tr:last-child {
	font-size: var(--size--14);
	font-weight: 800;
}

table .button {
	display: inline-flex;
}

table.is--drinks,
table.is--checkout {
	background: var(--color--white);
}

table.is--drinks input {
	padding-left: 0;
	padding-right: 0;
}

table.is--drinks td.is--image {
	width: var(--size--72);
}

table.is--drinks td.is--image .icon {
	font-size: var(--size--32);
}

table .button {
	margin: var(--size--4) 0;
}

tr {
	border-bottom: 1px solid var(--color--lightgrey);
}

td {
	padding: var(--size--12);
}

td:first-child {
	padding-left: var(--size--16);
}

td:last-child {
	padding-right: var(--size--16);
}

td.is--image {
	width: var(--size--48);
	padding-right: 0;
}

td.is--image .icon {
	font-size: var(--size--24);
	fill: var(--color--lightgrey);
}

td.is--image img,
td.is--image .icon {
	width: 100%;
	aspect-ratio: 1;
}

td.is--count {
	width: var(--size--128);
	padding-left: 0;
}

td.is--count .form-item-input-wrapper label {
	opacity: 0;
}

td.is--remove {
	width: var(--size--48);
	padding-left: 0;
}

td.is--price,
td.is--remove {
	text-align: right;
	white-space: nowrap;
}

a,
button,
label {
	cursor: pointer;
}

label {
	display: block;
}

a,
button,
input,
textarea,
dialog,
[tabindex],
.form-item-option-fake-element,
.form-item.is--radioslide input[type="radio"]~label,
.form-item.is--radiobutton input[type="radio"]~label {
	outline: 2px solid transparent;
	transition: var(--transition);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
dialog:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible~.form-item-option-fake-element,
input[type="radio"]:focus-visible~.form-item-option-fake-element,
.form-item.is--radioslide input[type="radio"]:focus-visible~label,
.form-item.is--radiobutton input[type="radio"]:focus-visible~label {
	outline-color: var(--color--black);
	outline-offset: 2px;
}

legend i,
label i {
	font-style: normal;
}

fieldset,
legend {
	all: unset;
	display: block;
}

legend {
	font-size: var(--size--14);
	font-weight: 800;
	margin: var(--size--16) 0;
}

section {
	margin: var(--size--24) 0;
}

section:first-child,
h1:first-child,
h2:first-child,
legend:first-child,
table .button:first-child,
.form-item:first-child,
.form-item-option:first-child,
.button:first-child,
.buttons:first-child,
.icon-text.is--section-header:first-child {
	margin-top: 0;
}

section:last-child,
h1:last-child,
h2:last-child,
legend:last-child,
table .button:last-child,
.form-item:last-child,
.form-item-option:last-child,
.button:last-child,
.buttons:last-child,
.icon-text.is--section-header:last-child {
	margin-bottom: 0;
}

input,
textarea,
.form-item-placeholder {
	flex: 1;
	width: 100%;
	font-size: var(--size--12);
	font-family: inherit;
	background: var(--color--white);
	border: 2px solid transparent;
	border-radius: var(--size--16);
	padding: var(--size--12);
	color: var(--color--black);
	line-height: 1.25;
	text-align: inherit;
}

textarea {
	resize: vertical;
	min-height: var(--size--96);
}

input[type="checkbox"],
input[type="radio"] {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.is--success {
	fill: var(--color--green);
}

.is--warning {
	fill: var(--color--orange);
}

.is--error {
	fill: var(--color--red);
}

.columns {
	display: flex;
	flex-direction: column;
	gap: var(--size--16);
}

.column {
	flex: 1;
}

.button.is--party-colors {
	background: var(--color--main, var(--color--black));
}

.is--success-message {
	align-content: center;
	text-align: center;
	height: 100%;
}

.form-item.is--party-colors .form-item-options {
	display: grid;
	grid-template-rows: repeat(calc(var(--color-count, 6) / 2), 1fr);
	grid-auto-flow: column;
	gap: var(--size--8);
}

.form-item.is--party-colors .form-item-option {
	margin: 0;
}

.form-item.is--party-colors .form-item-option:nth-child(odd):last-child {
	grid-column: -1 / 3;
	grid-row: -1;
}

.form-item.is--party-colors .form-item-option[style*="--color--main"] input[type="radio"]~.form-item-option-fake-element {
	box-shadow: none;
	background: var(--color--main, var(--color--black));
}

.form-item.is--party-colors .form-item-option[style*="--color--main"] input[type="radio"]~.form-item-option-fake-element::before {
	content: '';
	mask: url('../icons/check.svg') no-repeat center / contain;
	background: var(--color--white);
	width: 1em;
	height: 1em;
	font-size: var(--size--20);
	opacity: 0;
	scale: .75;
	transition: var(--transition);
}

.form-item.is--party-colors .form-item-option[style*="--color--main"] input[type="radio"]:checked~.form-item-option-fake-element::before {
	opacity: 1;
	scale: 1;
}

.form-item.is--party-colors .form-item-option:not([style*="--color--main"]) input[type="radio"]~.form-item-option-fake-element {
	box-shadow: inset 0 0 0 var(--size--2) var(--color--grey);
	background: transparent;
}

.form-item.is--party-colors .form-item-option:not([style*="--color--main"]) input[type="radio"]~.form-item-option-fake-element::before {
	content: '';
	width: 2px;
	height: calc(100% - var(--size--2) * 2);
	rotate: 45deg;
	background: var(--color--grey);
	transition: var(--transition);
}

.form-item.is--party-colors .form-item-option:not([style*="--color--main"]) input[type="radio"]:checked~.form-item-option-fake-element {
	box-shadow: inset 0 0 0 var(--size--2) var(--color--black);
}

.form-item.is--party-colors .form-item-option:not([style*="--color--main"]) input[type="radio"]:checked~.form-item-option-fake-element::before {
	background: var(--color--black);
}

.form-item.is--number {
	text-align: center;
}

.form-item.is--select select {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

.form-item .icon {
	font-size: var(--size--16);
	transition: var(--transition);
}

.form-item-placeholder {
	display: flex;
	align-items: center;
}

.form-item-placeholder span {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--size--8);
}

.form-item-placeholder span .icon {
	fill: var(--color--main, var(--color--black));
}

.form-item.is--select .form-item-options {
	position: absolute;
	inset: 100% 0 auto 0;
	translate: 0 var(--size--8);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: var(--transition);
	z-index: 22;
	background: var(--color--white);
	border-radius: var(--size--16);
	box-shadow: 0 var(--size--4) var(--size--16) color-mix(in srgb, var(--color--black) 10%, transparent);
	padding: var(--size--4);
}

.form-item.is--select.is--open .form-item-options {
	opacity: 1;
	pointer-events: auto;
	translate: 0 0;
	visibility: visible;
}

.form-item.is--select.is--open .form-item-placeholder>.icon {
	rotate: 180deg;
}

.form-item.is--select .form-item-option {
	display: flex;
	align-items: center;
	gap: var(--size--8);
	cursor: pointer;
	margin: 0;
	padding: var(--size--12);
	fill: var(--color--main, var(--color--black));
	color: var(--color--black);
	border-radius: var(--size--12);
}

.form-item.is--select .form-item-option span {
	flex: 1;
	font-size: var(--size--12);
}

.form-item.is--select .form-item-option .icon {
	font-size: var(--size--16);
}

.form-item.is--select .form-item-option.is--active {
	background: var(--color--main, var(--color--black));
	fill: var(--color--white);
	color: var(--color--white);
}

.form-item {
	margin: var(--size--16) 0;
	fill: var(--color--black);
}

.form-item-option-fake-element {
	transition: var(--transition);
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}

input[disabled]~.form-item-option-fake-element,
input[disabled]~label {
	opacity: 0.5;
	cursor: not-allowed;
}

.form-item-message:empty {
	display: none;
}

.form-item-message {
	display: block;
	font-size: var(--size--10);
	color: var(--color--green);
	margin-top: var(--size--8);
}

.form-item.is--success input,
.form-item.is--success textarea,
.form-item.is--success .form-item-placeholder {
	border-color: var(--color--green);
}

.form-item.is--warning input,
.form-item.is--warning textarea,
.form-item.is--warning .form-item-placeholder {
	border-color: var(--color--orange);
}

.form-item.is--warning .form-item-message {
	color: var(--color--orange);
}

.form-item.is--error input,
.form-item.is--error textarea,
.form-item.is--error .form-item-placeholder {
	border-color: var(--color--red);
}

.form-item.is--error .form-item-message {
	color: var(--color--red);
}

input[type="checkbox"]~label,
input[type="radio"]~label {
	min-height: var(--size--28);
	padding-left: calc(var(--size--28) + var(--size--12));
}

input[type="checkbox"]~.form-item-option-fake-element {
	background: var(--color--white);
	border-radius: var(--size--8);
	width: var(--size--28);
	aspect-ratio: 1;
}

input[type="checkbox"]~.form-item-option-fake-element .icon {
	font-size: var(--size--20);
	opacity: 0;
	fill: var(--color--white);
	transition: inherit;
	scale: .75;
}

input[type="checkbox"]:checked~.form-item-option-fake-element {
	background: var(--color--black);
}

input[type="checkbox"]:checked~.form-item-option-fake-element .icon {
	opacity: 1;
	scale: 1;
}

input[type="radio"]~.form-item-option-fake-element {
	background: var(--color--white);
	border-radius: 50%;
	width: var(--size--28);
	aspect-ratio: 1;
	box-shadow: inset 0 0 0 var(--size--2) var(--color--black);
}

input[type="radio"]:checked~.form-item-option-fake-element {
	box-shadow: inset 0 0 0 var(--size--8) var(--color--black);
}

.form-item[data-pins] {
	text-align: center;
}

.form-item[data-pins] input {
	font-size: var(--size--24);
	letter-spacing: 100%;
}

.form-item.is--radioslide legend {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

.form-item.is--radioslide .form-item-options {
	display: flex;
	padding: var(--size--4);
	border-radius: 10em;
	background: var(--color--white);
	overflow: auto visible;
}

.form-item.is--radioslide .form-item-option {
	flex: 1 0 auto;
	margin: 0;
}

.form-item.is--radioslide .form-item-option .icon {
	font-size: var(--size--16);
}

.form-item.is--radioslide .form-item-option.is--locked .icon {
	fill: var(--color--grey);
}

.form-item.is--radioslide .form-item-option:not(.is--locked) .icon svg {
	display: none;
}

.form-item.is--radioslide .form-item-option:not(.is--locked) label::after {
	content: '';
	width: var(--size--8);
	aspect-ratio: 1;
	flex: 0 0 auto;
	background: var(--color--main, var(--color--black));
	border-radius: 50%;
}

.form-item.is--radioslide .form-item-option:not(.is--locked) input[type="radio"]:checked~label::after {
	background: var(--color--white);
}

.form-item.is--radioslide .form-item-options .form-item-option label span {
	flex: unset;
}

.form-item.is--radioslide input[type="radio"]~label {
	fill: var(--color--main, var(--color--black));
	min-height: unset;
	justify-content: center;
	padding: var(--size--8) var(--size--12);
	border-radius: 10em;
	text-align: center;
	transition: var(--transition);
}

.form-item.is--radioslide input[type="radio"]:checked~label {
	background: var(--color--main, var(--color--black));
	color: var(--color--white);
	fill: var(--color--white);
}

.form-item.is--radiobutton.have--arrows input[type="radio"]~label::after {
	content: '';
	width: 1em;
	height: 1em;
	font-size: var(--size--20);
	mask: url('../icons/arrow_forward.svg') no-repeat center / contain;
	background: var(--color--black);
	transition: var(--transition);
}

.form-item.is--radiobutton input[type="radio"]~label {
	padding: var(--size--12) var(--size--16);
	border-radius: var(--size--12);
	background: var(--color--lightgrey);
	transition: var(--transition);
}

.form-item.is--radiobutton input[type="radio"]:checked~label {
	background: var(--color--black);
	color: var(--color--white);
	fill: var(--color--white);
}

.form-item.is--radiobutton.have--arrows input[type="radio"]:checked~label::after {
	background: var(--color--white);
}

.form-item.is--radiobutton.is--tip-type .form-item-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--size--8);
	text-align: center;
}

.form-item.is--radiobutton.is--tip-type .form-item-option {
	margin: 0;
	flex: 1 1 calc(50% - var(--size--8));
}

.form-item.is--radiobutton.is--tip-type .form-item-option:last-child {
	flex-basis: 100%;
}

.form-item.is--radiobutton.is--tip-type .form-item-option.is--box {
	flex-basis: calc(33.3% - var(--size--8));
}

.form-item.is--radiobutton .form-item-option.is--box label {
	aspect-ratio: 1;
	font-size: var(--size--24);
	line-height: .875;
}

.form-item.is--radiobutton .form-item-option.is--box small {
	font-size: var(--size--14);
}

.form-item-options {
	list-style: none;
}

.form-item-option {
	margin: var(--size--8) 0;
	position: relative;
}

.form-item-option .icon {
	font-size: var(--size--20);
}

.form-item-option label {
	font-weight: 700;
	font-size: var(--size--12);
	line-height: 1.25;
	display: flex;
	align-items: center;
	gap: var(--size--8);
}

.form-item-option label span {
	flex: 1;
}

.form-item-option button {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	color: inherit;
	fill: inherit;
	text-align: inherit;
	border-radius: 0;
	width: 100%;
}

.form-item-option a {
	text-decoration: none;
}

.form-item-input-wrapper {
	display: flex;
	align-items: center;
	gap: var(--size--8);
	position: relative;
	fill: var(--color--black);
	color: var(--color--grey);
}

.form-item-input-wrapper .button {
	margin: 0;
}

.form-item-input-wrapper .button.is--minus {
	order: -1;
}

.form-item-input-wrapper>.icon {
	font-size: var(--size--16);
}

.form-item-input-wrapper label,
.form-item-input-wrapper>.icon {
	position: absolute;
	left: var(--size--12);
	pointer-events: none;
	transition: var(--transition);
	z-index: 1;
}

.form-item-input-wrapper label {
	font-size: var(--size--12);
	right: var(--size--12);
}

.form-item-input-wrapper>.icon~label {
	left: var(--size--36);
}

.form-item.has--icon .form-item-input-wrapper input,
.form-item.has--icon .form-item-input-wrapper textarea {
	padding-left: var(--size--36);
}

.form-item-input-wrapper input~label,
.form-item-input-wrapper input~.icon {
	top: 50%;
	translate: 0 -50%;
}

.form-item-input-wrapper textarea~label,
.form-item-input-wrapper textarea~.icon {
	top: var(--size--12);
}

.form-item.has--value .form-item-input-wrapper label,
.form-item-input-wrapper .form-item-placeholder~label,
.form-item-input-wrapper input:focus~label,
.form-item-input-wrapper textarea:focus~label {
	opacity: 0;
}

.icon {
	font-size: var(--size--14);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
}

.icon svg {
	width: 1em;
	height: 1em;
	fill: inherit;
}

.icon svg path {
	fill: inherit;
}

.button {
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	border-radius: var(--size--12);
	background: var(--color--black);
	color: var(--color--white);
	fill: var(--color--white);
	gap: var(--size--8);
	padding: var(--size--12) var(--size--16);
	text-decoration: none;
	font-weight: 500;
	margin: var(--size--16) 0;
	line-height: inherit;
	font-family: inherit;
}

.button.is--normal {
	font-weight: 700;
}

.button.is--secondary {
	background: var(--color--lightgrey);
	color: var(--color--black);
	fill: var(--color--black);
}

.button.is--tertiary {
	padding: 0;
	background: transparent;
	color: var(--color--black);
	fill: var(--color--black);
}

.button.is--error {
	background: var(--color--red);
}

.button.is--error:not(.is--normal) {
	background: color-mix(in srgb, var(--color--red) 10%, transparent);
	color: var(--color--red);
	fill: var(--color--red);
}

.button.is--warning {
	background: color-mix(in srgb, var(--color--orange) 10%, transparent);
	color: var(--color--orange);
	fill: var(--color--orange);
}

.button.is--warning:not(.is--normal) {
	background: color-mix(in srgb, var(--color--orange) 10%, transparent);
	color: var(--color--orange);
	fill: var(--color--orange);
}

.button.is--success {
	background: color-mix(in srgb, var(--color--green) 10%, transparent);
	color: var(--color--green);
	fill: var(--color--green);
}

.button.is--success:not(.is--normal) {
	background: color-mix(in srgb, var(--color--green) 10%, transparent);
	color: var(--color--green);
	fill: var(--color--green);
}

.button span {
	font-size: var(--size--12);
}

.button span>span {
	font-weight: 500;
}

.button.is--secondary span span {
	color: var(--color--grey);
}

.button.is--inverted {
	background: var(--color--white);
}

.button.icon--only .icon {
	font-size: var(--size--16);
}

.button.is--small {
	padding: var(--size--8) var(--size--12);
	border-radius: 10em;
}

.button.is--small.icon--only {
	width: var(--size--32);
}

.button.is--small.is--tertiary {
	padding: 0;
}

.button.is--tiny {
	padding: var(--size--4) var(--size--8);
	gap: var(--size--4);
	border-radius: 10em;
}

.button.is--tiny.icon--only {
	width: var(--size--24);
}

.button.is--tiny span {
	font-size: var(--size--10);
}

.button.is--tiny .icon {
	font-size: var(--size--12);
}

.button.is--tiny.is--tertiary {
	padding: 0;
	color: var(--color--grey);
	fill: var(--color--grey);
}

.button.icon--only {
	width: var(--size--36);
	aspect-ratio: 1;
	padding: 0;
}

.button>span:has(span) {
	display: flex;
	justify-content: space-between;
	flex: 1;
}

.button.is--table {
	border-radius: var(--size--24);
	padding: var(--size--16);
	align-items: end;
	justify-content: space-between;
	background: var(--color--main, var(--color--black));
}

.button.is--table span {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: space-between;
	height: 100%;
	font-size: var(--size--40);
}

.button.is--table>.icon {
	font-size: var(--size--20);
}

.button.is--table p {
	color: var(--color--white);
}

.button.is--table .icon-text {
	align-items: center;
}

.button.is--table .icon-text>.icon {
	font-size: var(--size--16);
}

.button.is--profile {
	border-radius: 50%;
	position: relative;
}

.button.is--profile .icon {
	font-size: var(--size--12);
}

.button.is--profile::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	aspect-ratio: 1;
	width: var(--size--8);
	background: var(--color--green);
	border-radius: 50%;
	box-shadow: 0 0 0 var(--size--2) var(--color--bg);
}

.buttons {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--size--8);
	margin: var(--size--16) 0;
}

.buttons>li {
	display: contents;
}

.button.is--normal:not(.icon--only) {
	width: 100%;
}

.buttons .button.is--normal:not(.icon--only) {
	width: auto;
	flex: 1;
}

.buttons.is--center {
	justify-content: center;
}

.buttons.is--right {
	justify-content: flex-end;
}

.buttons.is--list-items {
	gap: 0;
}

.buttons.is--categories {
	overflow: auto visible;
	flex-wrap: nowrap;
	position: sticky;
	top: 0;
	z-index: 2;
	width: calc(100% + var(--size--16) * 2);
	margin-left: calc(var(--size--16) * -1);
	padding: 0 var(--size--16) var(--size--8) var(--size--16);
	background: var(--color--bg);
}

.is--fixed {
	position: fixed;
	padding: var(--size--48) var(--size--16) var(--size--12) var(--size--16);
	bottom: 0;
	left: 50%;
	background: linear-gradient(to bottom, transparent, var(--color--bg));
	pointer-events: none;
	margin: 0;
	z-index: 999;
	max-width: var(--wrapper-max-width);
	translate: -50% 0;
	width: 100%;
}

.is--fixed>* {
	pointer-events: auto;
}

.button.is--category {
	flex: 0 0 auto;
	background: var(--color--white);
	border: 1px solid transparent;
}

.button.is--category.is--active {
	border-color: var(--color--black);
}

.is--list-item {
	position: relative;
	background: var(--color--white);
	border-bottom: 1px solid var(--color--lightgrey);
	padding: var(--size--12) var(--size--16);
	width: calc(100% + var(--size--16) * 2) !important;
	left: calc(var(--size--16) * -1);
	border-radius: 0;
	fill: var(--color--black);
	justify-content: space-between;
	flex: 0 0 auto !important;
}

.is--list-item>.icon {
	border-radius: 50%;
	width: var(--size--24);
	aspect-ratio: 1;
	font-size: var(--size--16);
}

.is--list-item.is--done {
	fill: var(--color--white);
}

.is--list-item.is--done>.icon {
	background: var(--color--green);
}

.grid {
	display: grid;
	list-style: none;
	gap: var(--mobile--gap, var(--size--16));
	grid-template-columns: repeat(var(--mobile--columns, 1), 1fr);
}

.grid>li {
	display: contents;
}

.grid.is--persons {
	grid-auto-flow: column;
	grid-template-rows: repeat(calc(var(--seats, 10) / 2), var(--size--112));
}

.grid.is--persons>li {
	display: block;
	border-radius: var(--size--16);
}

.accordion-button {
	text-align: left;
	margin: 0;
}

.accordion-button .icon {
	transition: var(--transition);
}

.accordion-button span {
	flex: 1;
}

.accordion-content {
	overflow: hidden;
	transition: var(--transition);
	max-height: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.accordion.is--open .accordion-content {
	max-height: 1000em;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	padding: var(--size--16) 0;
}

.accordion.is--open .accordion-button .icon {
	rotate: 180deg;
}

.toasts {
	position: fixed;
	top: 0;
	pointer-events: none;
	left: 50%;
	translate: -50% 0;
	width: 100%;
	max-width: var(--wrapper-max-width);
	padding: var(--size--16);
}

.toast {
	display: flex;
	align-items: center;
	gap: var(--size--12);
	background: var(--color--green);
	color: var(--color--white);
	fill: var(--color--white);
	padding: var(--size--16);
	border-radius: var(--size--16);
	transition: var(--transition);
	animation: slide-in-top 500ms cubic-bezier(.23, 1, .32, 1);
}

@keyframes slide-in-top {
	0% {
		opacity: 0;
		translate: 0 -50%;
	}

	100% {
		opacity: 1;
		translate: 0 0;
	}
}

.toast.is--hidden {
	opacity: 0;
	translate: 0 50%;
}

.toast>.icon {
	font-size: var(--size--32);
}

.toast * {
	margin: 0;
}

.toast p {
	color: color-mix(in srgb, var(--color--white) 90%, transparent);
}

.toast.is--warning {
	background: var(--color--orange);
}

.toast.is--error {
	background: var(--color--red);
}

.icon-text {
	display: flex;
	align-items: start;
	gap: var(--size--4);
}

.icon-text.icon--big {
	gap: var(--size--12);
}

.icon-text .icon-text-content {
	flex: 1;
}

a.icon-text {
	text-decoration: none;
}

.icon-text.is--section-header {
	margin: var(--size--12) 0;
	align-items: center;
}

.icon-text.is--section-header>.icon {
	font-size: var(--size--20);
}

.icon-text.is--person {
	display: grid;
	grid-template-columns: auto 1fr;
	align-content: space-between;
	padding: var(--size--12);
	border-radius: var(--size--16);
	background: var(--color--white);
	height: 100%;
	width: 100%;
}

body.mode--move .icon-text.is--person.is--locked,
body.mode--apply-switch .icon-text.is--person.is--locked,
body.mode--switch .icon-text.is--person.is--locked {
	background: var(--color--lightgrey);
	cursor: not-allowed;
}

.icon-text.is--person>.icon {
	font-size: var(--size--16);
	width: var(--size--32);
	border-radius: 50%;
	background: var(--color--main, color-mix(in srgb, var(--color--black) 10%, transparent));
	aspect-ratio: 1;
	color: var(--color--white);
	font-weight: 700;
	transition: var(--transition);
}

.icon-text.is--person .buttons {
	margin: 0;
}

.icon-text.is--person .icon-text-content {
	display: contents;
}

.icon-text.is--person .icon-text-content>.button {
	padding: 0;
	grid-column: span 2;
	align-items: end;
	fill: var(--color--grey);
}

.icon-text.is--person .icon-text-content>.button span {
	flex: 1;
}

.icon-text.is--person .icon-text-content>.button .icon {
	font-size: var(--size--16);
}

.icon-text.is--person:not([style*="--color--main"])>.icon {
	color: var(--color--black);
}

.icon-text.is--person.is--empty {
	border: 2px dashed color-mix(in srgb, var(--color--black) 10%, transparent);
	background: transparent;
}

body.mode--move .is--person:not(.is--locked) svg.is--lock,
body.mode--move .is--person.is--locked svg.is--drag_pan,
body.mode--switch .is--person:not(.is--locked) svg.is--lock,
body.mode--switch .is--person.is--locked svg.is--circle,
body.mode--apply-switch .is--person:not(.is--locked) svg.is--lock,
body.mode--apply-switch .is--person.is--locked svg.is--circle,
.is--person.is--selected svg.is--circle,
.is--person.is--done svg.is--arrow_forward,
body:not(.mode--default) .is--person:not(.is--selected) svg.is--check_circle,
body:not(.mode--default) .is--person svg.is--arrow_forward,
body:not(.mode--default) .is--party,
body:not(.mode--default) .is--move,
body:not(.mode--party) .is--party-colors,
body:not(.mode--party) .is--person svg.is--colors,
body:not(.mode--move) .is--person svg.is--drag_pan,
body:not(.mode--move, .mode--switch) .is--multiselect,
body:not(.mode--move, .mode--switch, .mode--party) .is--save,
body:not(.mode--switch, .mode--apply-switch) .is--person svg.is--circle,
body:not(.mode--switch, .mode--apply-switch) .is--person:not(.is--done) svg.is--check_circle,
body:not(.mode--move, .mode--switch, .mode--apply-switch) .is--person svg.is--lock,
body:not(.mode--switch) .is--switch-table,
body:not(.mode--apply-switch) .is--apply-switch,
body:not(.mode--apply-preset) .is--person svg.is--check,
body:not(.mode--apply-preset, .mode--default) .is--apply-preset,
[popovertarget="flatrate"]:not(.has--flatrate) svg.is--edit,
[popovertarget="flatrate"].has--flatrate svg.is--add,
[popovertarget="add-note"]:not(.is--filled) .icon svg.is--edit,
[popovertarget="add-note"].is--filled .icon svg.is--add,
.is--list-item:not(.is--done)>.icon svg.is--check,
.is--list-item.is--done>.icon svg.is--arrow_forward,
.is--table:not(.is--done)>.icon svg.is--check_circle,
.is--table.is--done>.icon svg.is--arrow_forward {
	display: none;
}

body.mode--apply-preset .is--person,
body.mode--move .is--person:not(.is--locked),
body.mode--switch .is--person:not(.is--locked, .is--selected),
body.mode--apply-switch .is--person:not(.is--locked, .is--selected) {
	animation: jiggle 250ms ease-in-out infinite;
}

body:not(.mode--default) .is--person button {
	pointer-events: none;
}

body.mode--move .is--person {
	cursor: grab;
}

body li.sortable-chosen .is--person {
	cursor: grabbing;
}

.profile {
	position: relative;
}

.profile>.button {
	margin: 0;
}

.profile .popover {
	left: unset;
	right: 0;
	translate: 0 var(--size--16);
	padding: var(--size--4);
}

.profile .popover.is--active {
	translate: 0 var(--size--8);
}

.menu {
	list-style: none;
}

.menu-item {
	display: flex;
	align-items: center;
	text-align: left;
	gap: var(--size--8);
	text-decoration: none;
	padding: var(--size--8) var(--size--12);
	border-radius: var(--size--12);
	color: var(--color--black);
	fill: var(--color--black);
}

.menu-item .icon {
	font-size: var(--size--16);
}

.menu-item span {
	flex: 1;
	font-size: var(--size--12);
}

@media (hover: hover) {
	.menu-item:hover {
		background: var(--color--lightgrey);
	}
}

.popover {
	position: absolute;
	display: block;
	border: none;
	background: var(--color--white);
	padding: var(--size--16);
	opacity: 0;
	top: 100%;
	left: 50%;
	visibility: hidden;
	pointer-events: none;
	z-index: 999;
	transition: var(--transition);
	border-radius: var(--size--16);
	translate: -50% var(--size--16);
	box-shadow: 0 var(--size--12) var(--size--32) color-mix(in srgb, var(--color--black) 10%, transparent);
}

.popover.is--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	translate: -50% var(--size--8);
}

dialog.popover {
	display: block;
	width: 100%;
	max-width: 32em;
	border: none;
	position: fixed;
	inset: auto auto 0 50%;
	translate: -50% 100%;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	user-select: none;
	-webkit-user-select: none;
	max-height: calc(100% - var(--size--16));
	overflow: hidden auto;
	background: var(--color--bg);
}

dialog.popover::backdrop {
	background: color-mix(in srgb, var(--color--black) 90%, transparent);
}

dialog.popover.is--active {
	translate: -50% 0;
}

.popover>.button.is--close {
	position: absolute;
	z-index: 2;
	top: var(--size--8);
	right: var(--size--8);
}

.popover>.button.is--close+* {
	margin-top: 0;
}

.popover#enter-rfid>.button.is--close {
	display: none;
}

.icon--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.icon--right,
.form-item-option.icon--right label {
	flex-direction: row-reverse;
}

.icon--big>.icon {
	font-size: var(--size--32);
}

.is--checkout-item .icon-text {
	align-items: center;
	gap: var(--size--12);
}

.is--checkout-item .icon-text>.icon {
	font-size: var(--size--24);
	width: var(--size--28);
}

.column.is--cart .is--fixed {
	flex-direction: column;
	align-items: stretch;
}

@media (min-width: 36em) {
	.grid {
		gap: var(--tablet--gap, var(--size--16));
		grid-template-columns: repeat(var(--tablet--columns, 2), 1fr);
	}
}

@media (min-width: 64em) {
	.grid {
		gap: var(--desktop--gap, var(--size--16));
		grid-template-columns: repeat(var(--desktop--columns, 3), 1fr);
	}

	.grid .button.is--table {
		padding: var(--size--8);
		border-radius: var(--size--16);
		grid-area: var(--y, 1) / var(--x, 1) / span var(--rows, 1) / span var(--columns, 1);
	}

	.grid .button.is--table span {
		gap: var(--size--12);
		font-size: var(--size--16);
	}

	.grid .button.is--table .icon-text .icon-text-content {
		display: none;
	}

	.grid .button.is--table>.icon {
		font-size: var(--size--16);
	}

	dialog.popover {
		bottom: 50%;
		translate: -50% 100%;
		border-radius: var(--size--16);
	}

	dialog.popover.is--active {
		translate: -50% 50%;
	}

	.columns {
		flex-direction: row;
	}

	.columns.desktop--reverse {
		flex-direction: row-reverse;
	}

	body.is--tablet main {
		overflow: hidden;
		padding-bottom: 0;
	}

	body.is--tablet .form.is--order-cart-checkout {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	body.is--tablet .columns {
		flex: 1;
		gap: var(--size--48);
		min-height: 0;
	}

	.column.is--order,
	.is--cart-table-holder {
		margin: 0 calc(-1 * var(--size--16));
		padding: 0 var(--size--16);
	}

	.column.is--order {
		overflow: hidden auto;
	}

	.column.is--cart {
		position: relative;
	}

	.is--cart-table-holder {
		max-height: 100%;
		overflow: hidden auto;
		padding-bottom: var(--size--72);
	}

	.column.is--cart .is--fixed {
		position: absolute;
	}

	.grid.is--tables .accordion {
		display: contents;
	}

	.grid.is--tables .accordion-button {
		display: none;
	}

	.grid.is--tables .accordion-content {
		display: contents;
		max-height: none;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	.grid.is--tables .accordion-content .grid {
		display: contents;
	}
}

@keyframes jiggle {

	0%,
	100% {
		rotate: 0deg;
	}

	25% {
		rotate: 1deg;
	}

	75% {
		rotate: -1deg;
	}
}