.restaurant-page-body {
	background: #ffffff;
	color: #1a1a1a;
	display: flex;
	flex-direction: column;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 0;
	min-height: 100vh;
}

#restaurant-page {
	background: #ffffff;
	flex: 0 0 auto;
	width: 100%;
}

.restaurant-page-breadcrumb-row {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--restaurant-shell-wide-max);
	padding: 17px var(--restaurant-shell-page-gutter) 15px;
	width: 100%;
}

.restaurant-hero {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	width: 100%;
}

.restaurant-hero-content {
	background-color: #141414;
	background-image:
		linear-gradient(
			90deg,
			rgba(12, 8, 6, 0.98) 0%,
			rgba(12, 8, 6, 0.91) 28%,
			rgba(12, 8, 6, 0.62) 52%,
			rgba(12, 8, 6, 0.22) 75%,
			rgba(12, 8, 6, 0.03) 100%
		),
		var(--restaurant-hero-cover-image, linear-gradient(135deg, #24110e 0%, #141414 100%));
	background-position: 0 0, right 35% center;
	background-repeat: no-repeat;
	background-size: auto, cover;
	box-sizing: border-box;
	color: #ffffff;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.restaurant-hero-inner {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	gap: 30px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--restaurant-shell-wide-max);
	min-height: 260px;
	padding: 24px var(--restaurant-shell-page-gutter);
	position: relative;
	z-index: 1;
	width: 100%;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-content,
.restaurant-hero-content.is-loading {
	background-image:
		linear-gradient(
			90deg,
			rgba(12, 8, 6, 0.98) 0%,
			rgba(12, 8, 6, 0.91) 28%,
			rgba(12, 8, 6, 0.62) 52%,
			rgba(12, 8, 6, 0.22) 75%,
			rgba(12, 8, 6, 0.03) 100%
		),
		linear-gradient(135deg, #24110e 0%, #141414 100%);
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-content::before,
.restaurant-hero-content.is-loading::before {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background-image:
		linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%),
		linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.015) 100%);
	background-position: 120% 0, center;
	background-size: 220% 100%, cover;
	bottom: 0;
	content: "";
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: min(560px, 50vw);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 24%, #000000 48%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 24%, #000000 48%);
	z-index: 0;
}

@keyframes restaurant-hero-shimmer {
	0% {
		background-position: 120% 0;
	}
	100% {
		background-position: -120% 0;
	}
}

.restaurant-hero-main {
	align-items: center;
	display: flex;
	flex: 1 1 auto;
	gap: 20px;
	min-width: 0;
}

.restaurant-hero-logo {
	align-items: center;
	background: radial-gradient(circle at center, #ffd65d 0%, #d5961d 58%, #664100 100%);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 12px;
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.46),
		inset 0 2px 5px rgba(255, 255, 255, 0.3);
	box-sizing: border-box;
	color: #050505;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	height: 116px;
	justify-content: center;
	padding: 10px;
	user-select: none;
	width: 116px;
}

.restaurant-hero-logo.has-image {
	background: #ffffff;
	padding: 6px;
}

.restaurant-hero-logo[hidden] {
	display: none;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-logo,
.restaurant-hero-logo.is-loading {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.18) 100%);
	background-size: 220% 100%;
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: none;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-logo > *,
.restaurant-hero-logo.is-loading > * {
	display: none;
}

.restaurant-hero-logo-image {
	border-radius: 8px;
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.restaurant-hero-logo-image[hidden] {
	display: none;
}

.restaurant-hero-details {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.restaurant-hero-status-row,
.restaurant-hero-meta,
.restaurant-hero-rating {
	align-items: center;
	display: flex;
}

.restaurant-hero-status-row {
	flex-wrap: wrap;
	gap: 9px 12px;
}

.restaurant-hero-status {
	align-items: center;
	background: #246935;
	border-radius: 6px;
	color: #ffffff;
	display: inline-flex;
	font-size: 11.5px;
	font-weight: 700;
	gap: 5px;
	line-height: 1;
	padding: 4px 9px;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-status {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.16) 100%);
	background-size: 220% 100%;
	box-sizing: border-box;
	color: transparent;
	height: 20px;
	min-height: 20px;
	width: 74px;
}

.restaurant-hero-status[data-tone="pickup"] {
	background: #8a5a00;
}

.restaurant-hero-status[data-tone="closed"] {
	background: #60656f;
}

.restaurant-hero-status-icon {
	align-items: center;
	background: #ffffff;
	border-radius: 50%;
	color: #246935;
	display: inline-flex;
	height: 12px;
	justify-content: center;
	width: 12px;
}

.restaurant-hero-status-icon svg {
	height: 7.5px;
	width: 7.5px;
}

.restaurant-hero-status-icon[hidden] {
	display: none;
}

.restaurant-hero-closing {
	appearance: none;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.84);
	cursor: default;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
	padding: 0;
	text-align: left;
}

.restaurant-hero-closing:disabled {
	color: rgba(255, 255, 255, 0.84);
	opacity: 1;
}

.restaurant-hero-closing--actionable:not(:disabled) {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.42);
	text-underline-offset: 3px;
}

.restaurant-hero-closing--actionable:not(:disabled):hover {
	color: #ffffff;
	text-decoration-color: currentColor;
}

.restaurant-hero-closing:focus-visible {
	border-radius: 4px;
	outline: 3px solid rgba(255, 255, 255, 0.3);
	outline-offset: 3px;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-closing {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.14) 100%);
	background-size: 220% 100%;
	border-radius: 999px;
	height: 13px;
	width: 132px;
}

.restaurant-hero-title {
	color: #ffffff;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.15;
	margin: 1px 0 4px;
	overflow-wrap: anywhere;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-title {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.18) 100%);
	background-size: 220% 100%;
	border-radius: 8px;
	height: 39px;
	margin-bottom: 8px;
	max-width: 390px;
	width: min(52vw, 390px);
}

.restaurant-hero-meta {
	color: rgba(255, 255, 255, 0.72);
	flex-wrap: wrap;
	font-size: 13.5px;
	font-weight: 500;
	gap: 8px;
	line-height: 1.35;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-meta {
	min-height: 18px;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-meta::before {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.13) 100%);
	background-size: 220% 100%;
	border-radius: 999px;
	content: "";
	height: 14px;
	width: 236px;
}

.restaurant-hero-rating {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: #ffffff;
	cursor: pointer;
	font: inherit;
	gap: 4px;
	margin: 0;
	padding: 1px 3px;
	transition: background-color 0.15s ease, outline-color 0.15s ease;
}

.restaurant-hero-rating:hover {
	background: rgba(255, 255, 255, 0.1);
}

.restaurant-hero-rating:focus-visible {
	background: rgba(255, 255, 255, 0.1);
	outline: 3px solid rgba(255, 255, 255, 0.32);
	outline-offset: 2px;
}

.restaurant-hero-rating[hidden],
.restaurant-hero-meta-separator[hidden],
[data-restaurant-hero-cuisines][hidden] {
	display: none;
}

.restaurant-hero-rating svg {
	color: #fbc531;
	height: 15px;
	width: 15px;
}

.restaurant-hero-rating-value {
	font-weight: 700;
}

.restaurant-hero-rating-count {
	color: rgba(255, 255, 255, 0.56);
	font-weight: 400;
	margin-left: 2px;
}

.restaurant-hero-meta-separator {
	color: rgba(255, 255, 255, 0.35);
	font-size: 10px;
}

.restaurant-hero-bottom {
	align-items: flex-end;
	display: flex;
	flex: 0 0 auto;
	gap: 16px;
	justify-content: flex-end;
	width: auto;
}

.restaurant-hero-actions {
	background: rgba(12, 8, 6, 0.52);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
}

.restaurant-hero-action:not([hidden]) + .restaurant-hero-action:not([hidden])::before {
	background: rgba(255, 255, 255, 0.16);
	content: "";
	height: 22px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-content::after,
	.restaurant-hero-content.is-loading::after,
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-content::before,
	.restaurant-hero-content.is-loading::before,
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-logo,
	.restaurant-hero-logo.is-loading,
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-status,
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-closing,
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-title,
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-meta::before,
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action svg,
	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action span,
	.restaurant-menu-skeleton-search-line,
	.restaurant-menu-skeleton-tab,
	.restaurant-menu-skeleton-heading,
	.restaurant-menu-skeleton-card-title,
	.restaurant-menu-skeleton-card-description,
	.restaurant-menu-skeleton-card-price,
	.restaurant-menu-skeleton-card-image,
	.restaurant-menu-skeleton-card-add,
	.restaurant-menu-card-image-wrapper--loading::before,
	.restaurant-order-loading-title,
	.restaurant-order-loading-service span,
	.restaurant-order-loading-progress-copy span,
	.restaurant-order-loading-progress-track,
	.restaurant-order-loading-image,
	.restaurant-order-loading-copy span,
	.restaurant-order-loading-item-action,
	.restaurant-order-loading-summary-row span,
	.restaurant-order-loading-total-copy span,
	.restaurant-order-loading-total-price,
	.restaurant-order-loading-button {
		animation: none;
	}
}

.restaurant-hero-actions {
	flex: 0 0 auto;
	height: 52px;
}

.restaurant-hero-action {
	align-items: center;
	background: transparent;
	border: 0;
	box-sizing: border-box;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	justify-content: center;
	min-width: 72px;
	padding: 0 15px;
	position: relative;
	transition: background-color 0.15s ease, color 0.15s ease;
}

a.restaurant-hero-action {
	text-decoration: none;
}

.restaurant-hero-action:hover,
.restaurant-hero-action:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}

.restaurant-hero-action:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.32);
	outline-offset: -3px;
}

.restaurant-hero-action svg {
	color: rgba(255, 255, 255, 0.95);
	height: 17px;
	transition: color 0.15s ease, transform 0.15s ease;
	width: 17px;
}

.restaurant-hero-action span {
	color: rgba(255, 255, 255, 0.8);
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action {
	cursor: default;
	pointer-events: none;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action svg,
.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action span {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.15) 100%);
	background-size: 220% 100%;
	color: transparent;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action svg {
	border-radius: 50%;
	stroke: transparent;
}

.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action span {
	border-radius: 999px;
	display: block;
	height: 9px;
	width: 28px;
}

.restaurant-hero-action:hover svg,
.restaurant-hero-action:focus-visible svg {
	color: var(--hotmat-brand-red);
	transform: scale(1.08);
}

.restaurant-page-layout,
.restaurant-page-layout * {
	box-sizing: border-box;
}

.restaurant-page-layout {
	display: grid;
	gap: 42px;
	grid-template-columns: minmax(0, 1fr) 360px;
	margin: 0 auto;
	max-width: var(--restaurant-shell-wide-max);
	padding: 24px var(--restaurant-shell-page-gutter) 28px;
	width: 100%;
}

#restaurant-page[data-restaurant-page-state="not-found"] .restaurant-hero,
#restaurant-page[data-restaurant-page-state="not-found"] .restaurant-page-layout,
#restaurant-page[data-restaurant-page-state="not-found"] .restaurant-order-backdrop {
	display: none;
}

.restaurant-page-not-found {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: var(--restaurant-shell-wide-max);
	min-height: min(560px, calc(100dvh - 188px));
	padding: 62px var(--restaurant-shell-page-gutter) 76px;
	width: 100%;
}

.restaurant-page-not-found[hidden] {
	display: none;
}

.restaurant-page-not-found__content {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 720px;
	padding: 0;
	text-align: center;
}

.restaurant-page-not-found__scene {
	height: 220px;
	margin-bottom: 28px;
	position: relative;
	width: min(440px, 100%);
}

.restaurant-page-not-found__scene::after {
	background: linear-gradient(90deg, rgba(230, 226, 220, 0), #ded8d1 18%, #ded8d1 82%, rgba(230, 226, 220, 0));
	border-radius: 999px;
	bottom: 18px;
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 92%;
}

.restaurant-page-not-found__skyline {
	background: #f3f0ec;
	bottom: 38px;
	display: block;
	opacity: 0.85;
	position: absolute;
}

.restaurant-page-not-found__skyline--left {
	border-radius: 8px 8px 0 0;
	height: 64px;
	left: 56px;
	width: 32px;
}

.restaurant-page-not-found__skyline--left::before,
.restaurant-page-not-found__skyline--left::after,
.restaurant-page-not-found__skyline--right::before,
.restaurant-page-not-found__skyline--right::after {
	background: inherit;
	bottom: 0;
	content: "";
	position: absolute;
}

.restaurant-page-not-found__skyline--left::before {
	border-radius: 10px 10px 0 0;
	height: 88px;
	left: 28px;
	width: 42px;
}

.restaurant-page-not-found__skyline--left::after {
	border-radius: 4px 4px 0 0;
	height: 42px;
	left: 70px;
	width: 24px;
}

.restaurant-page-not-found__skyline--right {
	border-radius: 999px 999px 0 0;
	height: 76px;
	right: 50px;
	width: 48px;
}

.restaurant-page-not-found__skyline--right::before {
	border-radius: 999px 999px 0 0;
	height: 98px;
	right: 18px;
	width: 58px;
}

.restaurant-page-not-found__skyline--right::after {
	border-radius: 6px 6px 0 0;
	height: 38px;
	right: 76px;
	width: 32px;
}

.restaurant-page-not-found__shop {
	bottom: 20px;
	height: 180px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 270px;
	z-index: 2;
}

.restaurant-page-not-found__shop-sign {
	background: #ffffff;
	border: 3px solid #252329;
	border-radius: 5px;
	box-shadow: 0 3px 0 rgba(37, 35, 41, 0.08);
	box-sizing: border-box;
	color: #252329;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 4px;
	line-height: 36px;
	margin: 0 auto;
	position: relative;
	width: 188px;
	z-index: 3;
}

.restaurant-page-not-found__awning {
	border: 3px solid #252329;
	border-radius: 0 0 10px 10px;
	display: flex;
	height: 52px;
	margin: -1px auto 0;
	overflow: hidden;
	position: relative;
	width: 252px;
	z-index: 2;
}

.restaurant-page-not-found__awning span {
	background: #f4212f;
	border-right: 2px solid rgba(37, 35, 41, 0.25);
	flex: 1 1 0;
}

.restaurant-page-not-found__awning span:nth-child(even) {
	background: #ffffff;
}

.restaurant-page-not-found__awning::after {
	background: linear-gradient(90deg, rgba(37, 35, 41, 0.16), rgba(255, 255, 255, 0.35), rgba(37, 35, 41, 0.1));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.restaurant-page-not-found__building {
	background: #f7f3ee;
	border: 3px solid #252329;
	border-top: 0;
	box-shadow: 0 10px 18px rgba(37, 35, 41, 0.08);
	display: grid;
	grid-template-columns: 1fr 68px;
	height: 92px;
	margin: 0 auto;
	position: relative;
	width: 214px;
}

.restaurant-page-not-found__window {
	align-items: center;
	background: linear-gradient(135deg, #49464a, #777175);
	border: 3px solid #252329;
	box-sizing: border-box;
	display: flex;
	height: 62px;
	justify-content: center;
	margin: 16px 0 0 16px;
	position: relative;
}

.restaurant-page-not-found__window::before {
	background: rgba(255, 255, 255, 0.26);
	content: "";
	height: 76px;
	position: absolute;
	right: 22px;
	top: -8px;
	transform: rotate(28deg);
	width: 8px;
}

.restaurant-page-not-found__window span {
	background: #f4212f;
	border: 2px solid #ffffff;
	border-radius: 4px;
	box-shadow: 0 2px 0 rgba(37, 35, 41, 0.28);
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	padding: 7px 10px;
	position: relative;
}

.restaurant-page-not-found__door {
	background: linear-gradient(135deg, #5b565a, #27252a);
	border-left: 3px solid #252329;
	position: relative;
}

.restaurant-page-not-found__door::before {
	background: rgba(255, 255, 255, 0.16);
	content: "";
	height: 92px;
	left: 24px;
	position: absolute;
	top: 0;
	transform: skewX(-28deg);
	width: 16px;
}

.restaurant-page-not-found__door::after {
	background: #ffffff;
	border-radius: 999px;
	content: "";
	height: 6px;
	left: 9px;
	position: absolute;
	top: 48px;
	width: 6px;
}

.restaurant-page-not-found__plant {
	bottom: 0;
	height: 68px;
	left: 2px;
	position: absolute;
	width: 46px;
}

.restaurant-page-not-found__plant::after {
	background: #ffffff;
	border: 3px solid #252329;
	border-radius: 0 0 8px 8px;
	bottom: 0;
	content: "";
	height: 24px;
	left: 10px;
	position: absolute;
	width: 24px;
}

.restaurant-page-not-found__plant span {
	background: #729b51;
	border: 2px solid #252329;
	border-radius: 999px 999px 999px 0;
	display: block;
	height: 24px;
	position: absolute;
	width: 13px;
}

.restaurant-page-not-found__plant span:nth-child(1) {
	left: 12px;
	top: 18px;
	transform: rotate(-34deg);
}

.restaurant-page-not-found__plant span:nth-child(2) {
	left: 22px;
	top: 9px;
	transform: rotate(34deg);
}

.restaurant-page-not-found__plant span:nth-child(3) {
	left: 24px;
	top: 32px;
	transform: rotate(54deg);
}

.restaurant-page-not-found__board {
	border: 3px solid #252329;
	bottom: 4px;
	box-sizing: border-box;
	height: 64px;
	position: absolute;
	right: -3px;
	transform: skewX(-9deg);
	width: 36px;
}

.restaurant-page-not-found__board::after {
	background: #252329;
	bottom: -8px;
	content: "";
	height: 3px;
	left: -7px;
	position: absolute;
	width: 50px;
}

.restaurant-page-not-found h1 {
	color: #171717;
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 16px;
}

.restaurant-page-not-found p {
	color: #5f5964;
	font-size: 18px;
	line-height: 1.45;
	margin: 0;
	max-width: 540px;
}

.restaurant-page-not-found a {
	align-items: center;
	background: #ffffff;
	border: 1.5px solid #3b383e;
	border-radius: 999px;
	box-sizing: border-box;
	color: #242228;
	display: inline-flex;
	gap: 18px;
	font-size: 16px;
	font-weight: 650;
	justify-content: center;
	line-height: 1.2;
	margin-top: 32px;
	max-width: 100%;
	min-height: 52px;
	padding: 0 22px 0 28px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.restaurant-page-not-found a::after {
	color: var(--hotmat-brand-red);
	content: "\2192";
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	margin-top: -1px;
	transition: color 0.15s ease, transform 0.15s ease;
}

.restaurant-page-not-found a:hover,
.restaurant-page-not-found a:focus-visible {
	background: #fff7f7;
	border-color: var(--hotmat-brand-red);
	color: #151316;
	transform: translateY(-1px);
}

.restaurant-page-not-found a:hover::after,
.restaurant-page-not-found a:focus-visible::after {
	color: var(--hotmat-brand-red-dark);
	transform: translateX(3px);
}

.restaurant-page-not-found a:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.22);
	outline-offset: 3px;
}

.restaurant-menu-content {
	min-width: 0;
	width: 100%;
}

.restaurant-menu-search {
	background: #ffffff;
	margin-bottom: 14px;
	padding: 6px 0 0;
	position: sticky;
	top: var(--restaurant-menu-search-sticky-top, 68px);
	width: 100%;
	z-index: 32;
}

.restaurant-menu-search[hidden],
.restaurant-menu-search-clear[hidden],
.restaurant-menu-search-toggle[hidden],
.restaurant-menu-search-status[hidden],
[data-restaurant-menu-sections][hidden],
.restaurant-menu-tabs-wrapper[hidden],
.restaurant-menu-tab[hidden],
.restaurant-menu-section[hidden],
.restaurant-menu-card[hidden] {
	display: none;
}

.restaurant-menu-search-label {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.restaurant-menu-search-field {
	align-items: center;
	background: #ffffff;
	border: 1px solid #d2cac4;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(23, 18, 16, 0.03);
	display: flex;
	min-height: 42px;
	position: relative;
	transition:
		border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.restaurant-menu-search-field:hover {
	border-color: #a89e96;
}

.restaurant-menu-search-field:focus-within {
	border-color: var(--hotmat-brand-red);
	box-shadow:
		0 6px 20px rgba(23, 18, 16, 0.05),
		0 0 0 3px rgba(23, 18, 16, 0.03);
}

.restaurant-menu-search-icon {
	color: #77716d;
	fill: none;
	flex: 0 0 auto;
	height: 18px;
	margin-left: 15px;
	pointer-events: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	transition: color 0.2s ease, transform 0.2s ease;
	width: 18px;
}

.restaurant-menu-search-field:focus-within .restaurant-menu-search-icon {
	color: var(--hotmat-brand-red);
	transform: scale(1.05);
}

.restaurant-menu-search-input {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	color: #171513;
	flex: 1 1 auto;
	font: inherit;
	font-size: 14.5px;
	font-weight: 500;
	height: 40px;
	line-height: 1.4;
	min-width: 0;
	outline: 0;
	padding: 0 12px;
	width: 100%;
}

.restaurant-menu-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.restaurant-menu-search-input::placeholder {
	color: #8a8581;
	font-weight: 400;
	opacity: 0.85;
}

.restaurant-menu-search-clear {
	align-items: center;
	background: #f5f2f0;
	border: 0;
	border-radius: 999px;
	color: #55504c;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 28px;
	justify-content: center;
	margin-right: 9px;
	padding: 0;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		transform 0.15s ease;
	width: 28px;
}

.restaurant-menu-search-clear:hover {
	background: #eee9e6;
	color: #171513;
	transform: scale(1.05);
}

.restaurant-menu-search-clear:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.24);
	outline-offset: 2px;
}

.restaurant-menu-search-clear svg {
	fill: none;
	height: 14px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2.2;
	width: 14px;
}

.restaurant-menu-search-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	color: #38322e;
	cursor: pointer;
	display: none;
	flex: 0 0 auto;
	height: 34px;
	justify-content: center;
	margin-left: 2px;
	padding: 0;
	position: relative;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		transform 0.15s ease;
	width: 34px;
	z-index: 4;
}

.restaurant-menu-search-toggle:hover {
	color: var(--hotmat-brand-red-dark);
	transform: scale(1.05);
}

.restaurant-menu-search-toggle:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.24);
	outline-offset: 2px;
}

.restaurant-menu-search-toggle svg {
	fill: none;
	height: 17px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 17px;
}

.restaurant-menu-search-status {
	color: #716b67;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	margin: 9px 3px 0;
}

.restaurant-menu-search-match {
	background: linear-gradient(transparent 54%, rgba(255, 192, 0, 0.24) 54%);
	color: inherit;
	font: inherit;
	padding: 0 1px;
}

.restaurant-menu-status {
	align-items: center;
	background: #fbfaf9;
	border: 1px solid #ebe7e4;
	border-radius: 10px;
	color: #5f5b58;
	display: flex;
	font-size: 14px;
	justify-content: center;
	min-height: 120px;
	padding: 24px;
	text-align: center;
}

.restaurant-menu-loading[hidden],
.restaurant-menu-status[hidden] {
	display: none;
}

.restaurant-menu-status--error {
	color: #9b2c2c;
}

.restaurant-menu-loading {
	display: block;
	width: 100%;
}

.restaurant-menu-loading-text {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.restaurant-menu-skeleton {
	width: 100%;
}

.restaurant-menu-skeleton-search {
	background: #ffffff;
	margin-bottom: 14px;
	padding: 6px 0 0;
	position: sticky;
	top: var(--restaurant-menu-search-sticky-top, 68px);
	width: 100%;
	z-index: 32;
}

.restaurant-menu-skeleton-search-field {
	align-items: center;
	background: #ffffff;
	border: 1px solid #d2cac4;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(23, 18, 16, 0.03);
	box-sizing: border-box;
	display: flex;
	min-height: 42px;
}

.restaurant-menu-skeleton-search-icon {
	background: transparent;
	border: 2px solid #d8d4d0;
	border-radius: 50%;
	box-sizing: border-box;
	flex: 0 0 13px;
	height: 13px;
	margin-left: 17px;
	position: relative;
	width: 13px;
}

.restaurant-menu-skeleton-search-icon::after {
	background: #d8d4d0;
	border-radius: 999px;
	bottom: -3px;
	content: "";
	height: 2px;
	position: absolute;
	right: -5px;
	transform: rotate(45deg);
	transform-origin: center;
	width: 6px;
}

.restaurant-menu-skeleton-search-line {
	border-radius: 999px;
	height: 14px;
	margin-left: 12px;
	width: min(42%, 280px);
}

.restaurant-menu-skeleton-tabs {
	align-items: center;
	background: #fbfaf9;
	border-bottom: 1px solid #ebe7e4;
	display: flex;
	gap: 4px;
	overflow: hidden;
	padding: 6px 3px 12px;
	position: sticky;
	top: calc(var(--restaurant-menu-search-sticky-top, 68px) + 62px);
	z-index: 30;
}

.restaurant-menu-skeleton-search-toggle {
	align-items: center;
	display: none;
	flex: 0 0 34px;
	height: 34px;
	justify-content: center;
	width: 34px;
}

.restaurant-menu-skeleton-search-toggle .restaurant-menu-skeleton-search-icon {
	flex-basis: 13px;
	height: 13px;
	margin-left: 0;
	width: 13px;
}

.restaurant-menu-skeleton-search-line,
.restaurant-menu-skeleton-tab,
.restaurant-menu-skeleton-heading,
.restaurant-menu-skeleton-card-title,
.restaurant-menu-skeleton-card-description,
.restaurant-menu-skeleton-card-price,
.restaurant-menu-skeleton-card-image,
.restaurant-menu-skeleton-card-add {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, #eeece9 0%, #faf8f6 50%, #eeece9 100%);
	background-size: 220% 100%;
	display: block;
}

.restaurant-menu-skeleton-tab {
	border-radius: 999px;
	flex: 0 0 auto;
	height: 32px;
	width: 76px;
}

.restaurant-menu-skeleton-tab:nth-child(3) {
	width: 96px;
}

.restaurant-menu-skeleton-tab:nth-child(4) {
	width: 68px;
}

.restaurant-menu-skeleton-tab:nth-child(5) {
	width: 106px;
}

.restaurant-menu-skeleton-section {
	margin-top: 28px;
	width: 100%;
}

.restaurant-menu-skeleton-heading {
	border-radius: 8px;
	height: 29px;
	margin: 0 0 18px;
	width: 214px;
}

.restaurant-menu-skeleton-heading--short {
	width: 156px;
}

.restaurant-menu-skeleton-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.restaurant-menu-skeleton-card {
	align-items: center;
	background: #ffffff;
	border: 1px solid #eeecea;
	border-radius: 8px;
	box-shadow: 0 8px 22px rgba(20, 20, 20, 0.035);
	box-sizing: border-box;
	display: flex;
	gap: 14px;
	min-height: 142px;
	overflow: hidden;
	padding: 14px;
	position: relative;
}

.restaurant-menu-skeleton-card-copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 112px;
	min-width: 0;
	padding-right: 48px;
}

.restaurant-menu-skeleton-card-title {
	border-radius: 999px;
	height: 18px;
	margin-bottom: 10px;
	width: min(78%, 230px);
}

.restaurant-menu-skeleton-card-description {
	border-radius: 999px;
	height: 13px;
	margin-bottom: 7px;
	width: min(94%, 310px);
}

.restaurant-menu-skeleton-card-description--short {
	width: min(62%, 210px);
}

.restaurant-menu-skeleton-card-price {
	border-radius: 999px;
	height: 18px;
	margin-top: auto;
	width: 72px;
}

.restaurant-menu-skeleton-card-image {
	border-radius: 8px;
	flex: 0 0 116px;
	height: 112px;
	width: 116px;
}

.restaurant-menu-skeleton-card-add {
	border-radius: 50%;
	bottom: 18px;
	height: 32px;
	position: absolute;
	right: 18px;
	width: 32px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-grid {
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-card {
	align-items: stretch;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	padding: 12px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-card-copy {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 131px;
	padding-right: 42px;
	width: 100%;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-card-title {
	height: 16px;
	margin-bottom: 8px;
	width: 76%;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-card-description {
	height: 11px;
	margin-bottom: 6px;
	width: 92%;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-card-description--short {
	width: 62%;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-card-price {
	height: 17px;
	width: 64px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-card-image {
	aspect-ratio: 4 / 3;
	flex: 0 0 auto;
	height: auto;
	order: -1;
	width: 100%;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-skeleton-card-add {
	bottom: 12px;
	right: 12px;
}

.restaurant-menu-tabs-wrapper {
	--restaurant-menu-tabs-bg: #fbfaf9;
	--restaurant-menu-tabs-left-gradient-left: 0px;
	--restaurant-menu-tabs-left-gradient-solid: 20%;
	--restaurant-menu-tabs-left-gradient-width: 60px;
	background: var(--restaurant-menu-tabs-bg);
	border-bottom: 1px solid #ebe7e4;
	position: sticky;
	top: var(--restaurant-menu-sticky-top, 68px);
	transition: box-shadow 0.2s ease;
	width: 100%;
	z-index: 30;
}

.restaurant-menu-tabs-wrapper.is-stuck {
	box-shadow: 0 8px 16px rgba(20, 20, 20, 0.08);
}

.restaurant-menu-tabs-wrapper::before,
.restaurant-menu-tabs-wrapper::after {
	bottom: 1px;
	content: "";
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
	width: 60px;
	z-index: 3;
}

.restaurant-menu-tabs-wrapper::before {
	background: linear-gradient(to right, var(--restaurant-menu-tabs-bg) var(--restaurant-menu-tabs-left-gradient-solid), rgba(251, 250, 249, 0));
	left: var(--restaurant-menu-tabs-left-gradient-left);
	width: var(--restaurant-menu-tabs-left-gradient-width);
}

.restaurant-menu-tabs-wrapper::after {
	background: linear-gradient(to left, var(--restaurant-menu-tabs-bg) 20%, rgba(251, 250, 249, 0));
	right: 0;
}

.restaurant-menu-tabs-wrapper.show-left-gradient::before,
.restaurant-menu-tabs-wrapper.show-right-gradient::after {
	opacity: 1;
}

.restaurant-menu-tabs {
	-ms-overflow-style: none;
	align-items: center;
	display: flex;
	gap: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 6px 3px 12px;
	position: relative;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.restaurant-menu-tabs::-webkit-scrollbar {
	display: none;
}

.restaurant-menu-tab-indicator {
	background: var(--hotmat-brand-red);
	border-radius: 999px;
	height: 32px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 6px;
	transform: translateX(0);
	transition:
		transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
		width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
		opacity 0.2s ease;
	width: 0;
	z-index: 1;
}

.restaurant-menu-tab {
	-webkit-tap-highlight-color: transparent;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #191919;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	outline: 0;
	padding: 7px 14px;
	position: relative;
	transition: color 0.25s ease, background-color 0.25s ease;
	white-space: nowrap;
	z-index: 2;
}

.restaurant-menu-tab.is-active {
	color: #ffffff;
}

.restaurant-menu-tab:not(.is-active):hover {
	background: rgba(246, 61, 65, 0.05);
	color: var(--hotmat-brand-red-dark);
}

.restaurant-menu-tab:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.24);
	outline-offset: 2px;
}

.restaurant-menu-section {
	margin-top: 28px;
	scroll-margin-top: var(--restaurant-menu-section-scroll-margin, 128px);
	width: 100%;
}

.restaurant-menu-search-results {
	border-bottom: 1px solid #ebe7e4;
	padding-bottom: 30px;
}

.restaurant-menu-search-results + .restaurant-menu-section {
	margin-top: 32px;
}

.restaurant-menu-search-results-count {
	font-weight: 600;
}

.restaurant-menu-section-header {
	margin-bottom: 18px;
}

.restaurant-menu-category-description {
	color: #767676;
	font-size: 13px;
	line-height: 1.45;
	margin: 6px 0 0;
	max-width: 720px;
}

.restaurant-menu-category-title {
	color: #111111;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.restaurant-menu-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.restaurant-menu-card {
	align-items: center;
	background: #ffffff;
	border: 1px solid #eeecea;
	border-radius: 8px;
	box-shadow: 0 8px 22px rgba(20, 20, 20, 0.045);
	cursor: pointer;
	display: flex;
	gap: 14px;
	min-width: 0;
	overflow: hidden;
	padding: 14px;
	position: relative;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.restaurant-menu-card:hover {
	border-color: rgba(17, 17, 17, 0.12);
	box-shadow: 0 14px 30px rgba(20, 20, 20, 0.075);
	transform: translateY(-2px);
}

.restaurant-menu-card--unavailable {
	background: #fafafa;
	cursor: default;
}

.restaurant-menu-card--unavailable:hover {
	border-color: #eeecea;
	box-shadow: 0 8px 22px rgba(20, 20, 20, 0.045);
	transform: none;
}

.restaurant-menu-card-image-wrapper {
	background: #f7f5f3;
	border-radius: 8px;
	flex: 0 0 116px;
	height: 112px;
	overflow: hidden;
	position: relative;
	width: 116px;
}

.restaurant-menu-card-image-wrapper::before {
	background: linear-gradient(90deg, #eeece9 0%, #faf8f6 50%, #eeece9 100%);
	background-size: 220% 100%;
	bottom: 0;
	content: "";
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 0.2s ease;
	z-index: 0;
}

.restaurant-menu-card-image-wrapper--loading::before {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	opacity: 1;
}

.restaurant-menu-card-image {
	display: block;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	position: relative;
	transform: scale(1.015);
	transition:
		opacity 0.24s ease,
		transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
	width: 100%;
	z-index: 1;
}

.restaurant-menu-card-image.is-loaded {
	opacity: 1;
	transform: scale(1);
}

.restaurant-menu-card:hover .restaurant-menu-card-image.is-loaded {
	transform: scale(1.05);
}

.restaurant-menu-card-content {
	align-items: flex-end;
	display: flex;
	flex: 1 1 auto;
	gap: 12px;
	justify-content: space-between;
	min-height: 112px;
	min-width: 0;
}

.restaurant-menu-card:not(.restaurant-menu-card--has-image) .restaurant-menu-card-content {
	padding-right: 50px;
}

.restaurant-menu-card-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 112px;
	min-width: 0;
}

.restaurant-menu-card-title {
	color: #2f373a;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.restaurant-menu-card-description {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: #767676;
	display: -webkit-box;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	overflow: hidden;
}

.restaurant-menu-card-status {
	color: #a12d2d;
	font-size: 11px;
	font-weight: 700;
	margin-top: 7px;
}

.restaurant-menu-card-price {
	align-items: baseline;
	color: #4f4f4f;
	display: flex;
	flex-wrap: wrap;
	font-size: 16px;
	font-weight: 100;
	gap: 5px;
	line-height: 1.2;
	margin-top: auto;
	padding-top: 8px;
}

.restaurant-menu-card-price-original {
	color: #a7a7a7;
	font-size: 14px;
}

.restaurant-menu-card-price--unavailable {
	color: #7d7d7d;
	font-size: 14px;
	font-weight: 100;
}

.restaurant-menu-card-popular {
	align-items: center;
	align-self: flex-start;
	background: var(--hotmat-brand-red);
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	font-size: 10px;
	font-weight: 700;
	gap: 4px;
	letter-spacing: 0;
	line-height: 1;
	margin-top: 8px;
	padding: 5px 8px;
	width: fit-content;
}

.restaurant-menu-card-popular svg {
	fill: none;
	height: 12px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 12px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-grid {
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card {
	align-items: stretch;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	padding: 12px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-image-wrapper {
	aspect-ratio: 4 / 3;
	background: #ffffff;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: auto;
	order: -1;
	padding: 0;
	width: 100%;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-image {
	object-fit: contain;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-content {
	align-items: stretch;
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	padding-right: 42px;
	width: 100%;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-info {
	flex: 1 1 auto;
	min-height: 0;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card:not(.restaurant-menu-card--has-image) .restaurant-menu-card-content {
	padding-right: 42px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card--has-image .restaurant-menu-card-content {
	padding-right: 42px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-title {
	display: block;
	font-size: 14px;
	margin-bottom: 4px;
	overflow: visible;
	overflow-wrap: break-word;
	text-overflow: clip;
	white-space: normal;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-description {
	-webkit-line-clamp: 2;
	font-size: 12px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-price {
	font-size: 15px;
	margin-top: auto;
	padding-top: 0;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-popular {
	font-size: 9px;
	padding: 4px 7px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-add-button {
	bottom: 12px;
	box-shadow: none;
	height: 32px;
	right: 12px;
	top: auto;
	width: 32px;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-add-button:hover {
	box-shadow: none;
	transform: scale(1.04);
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-add-button:disabled,
.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-add-button:disabled:hover {
	box-shadow: none;
	transform: none;
}

.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-add-button svg {
	height: 14px;
	width: 14px;
}

.restaurant-menu-add-button {
	align-items: center;
	background: #ffffff;
	border: 1px solid rgba(17, 17, 17, 0.12);
	border-radius: 999px;
	box-shadow: none;
	color: #111111;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 36px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 22px;
	bottom: 22px;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		transform 0.15s ease;
	width: 36px;
	z-index: 1;
}

.restaurant-menu-add-button:hover {
	background: #f4f3f2;
	border-color: rgba(17, 17, 17, 0.2);
	box-shadow: none;
	transform: scale(1.08) rotate(90deg);
}

.restaurant-menu-add-button:disabled {
	background: #f1f1f1;
	box-shadow: none;
	color: #a0a0a0;
	cursor: not-allowed;
}

.restaurant-menu-add-button:disabled:hover {
	background: #f1f1f1;
	border-color: rgba(17, 17, 17, 0.12);
	box-shadow: none;
}

.restaurant-menu-add-button:active,
.restaurant-menu-add-button.is-pressed {
	transform: scale(0.94);
}

.restaurant-menu-add-button:focus-visible {
	outline: 3px solid rgba(17, 17, 17, 0.18);
	outline-offset: 3px;
}

.restaurant-menu-add-button svg {
	fill: none;
	height: 16px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 3;
	transition: opacity 0.12s ease, transform 0.12s ease;
	width: 16px;
}

.restaurant-menu-add-button--added,
.restaurant-menu-add-button--added:hover {
	background: #16794f;
	border-color: #16794f;
	box-shadow: none;
	color: #ffffff;
	transform: scale(1.04);
}

.restaurant-menu-add-button--added svg {
	opacity: 0;
	transform: scale(0.72);
}

.restaurant-menu-add-button--added::before {
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	content: "";
	height: 6px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -60%) rotate(-45deg);
	width: 10px;
}

body.restaurant-product-dialog-open,
body.restaurant-ratings-dialog-open,
body.restaurant-info-dialog-open {
	overflow: hidden;
}

.restaurant-product-dialog {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 28px;
	position: fixed;
	z-index: 950;
}

.restaurant-product-dialog[hidden] {
	display: none;
}

.restaurant-product-dialog__backdrop {
	background: rgba(17, 17, 17, 0.58);
	border: 0;
	cursor: default;
	inset: 0;
	padding: 0;
	position: absolute;
	width: 100%;
}

.restaurant-product-dialog__panel {
	--restaurant-product-dialog-title-size: 22px;
	--restaurant-product-dialog-title-line: 26px;
	--restaurant-product-dialog-body-size: 13px;
	--restaurant-product-dialog-body-line: 18px;
	--restaurant-product-dialog-section-size: 15px;
	--restaurant-product-dialog-section-line: 20px;
	--restaurant-product-dialog-label-size: 14px;
	--restaurant-product-dialog-label-line: 18px;
	--restaurant-product-dialog-meta-size: 12px;
	--restaurant-product-dialog-meta-line: 16px;
	--restaurant-product-dialog-price-size: 13px;
	--restaurant-product-dialog-price-line: 18px;
	--restaurant-product-dialog-action-size: 15px;
	--restaurant-product-dialog-action-line: 20px;
	--restaurant-product-dialog-total-size: 18px;
	--restaurant-product-dialog-total-line: 22px;
	--restaurant-product-dialog-title-weight: 500;
	--restaurant-product-dialog-section-weight: 400;
	--restaurant-product-dialog-label-weight: 400;
	--restaurant-product-dialog-meta-weight: 400;
	--restaurant-product-dialog-price-weight: 400;
	--restaurant-product-dialog-action-weight: 400;
	--restaurant-product-dialog-total-weight: 400;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 26px 80px rgba(17, 17, 17, 0.28);
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 56px);
	max-width: 100%;
	outline: 0;
	overflow: clip;
	position: relative;
	width: 620px;
	z-index: 1;
}

.restaurant-product-dialog__header {
	align-items: flex-start;
	border-bottom: 1px solid #efedeb;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 24px 24px 20px;
}

.restaurant-product-dialog__heading {
	min-width: 0;
}

.restaurant-product-dialog__title {
	color: #111111;
	font-size: var(--restaurant-product-dialog-title-size);
	font-weight: var(--restaurant-product-dialog-title-weight);
	line-height: var(--restaurant-product-dialog-title-line);
	margin: 0;
}

.restaurant-product-dialog__description {
	color: #696562;
	font-size: var(--restaurant-product-dialog-body-size);
	font-weight: 400;
	line-height: var(--restaurant-product-dialog-body-line);
	margin: 8px 0 0;
}

.restaurant-product-dialog__description[hidden] {
	display: none;
}

.restaurant-product-dialog__close {
	align-items: center;
	background: #faf9f8;
	border: 0;
	border-radius: 999px;
	color: #4f4a46;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	height: 34px;
	justify-content: center;
	padding: 0;
	transition: background-color 0.15s ease, transform 0.15s ease;
	width: 34px;
}

.restaurant-product-dialog__close:hover {
	background: #f0eeeb;
	transform: rotate(4deg);
}

.restaurant-product-dialog__close:focus-visible,
.restaurant-product-dialog__done:focus-visible,
.restaurant-product-option input:focus-visible + .restaurant-product-option__control {
	outline: 3px solid rgba(246, 61, 65, 0.24);
	outline-offset: 2px;
}

.restaurant-product-dialog__close svg {
	fill: none;
	height: 16px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2;
	width: 16px;
}

.restaurant-product-dialog__image {
	display: block;
	height: 210px;
	margin: -4px -24px 18px;
	object-fit: cover;
	box-shadow: 0 1px 0 #efedeb;
	width: calc(100% + 48px);
}

.restaurant-product-dialog__image[hidden] {
	display: none;
}

.restaurant-product-dialog__body {
	--restaurant-product-validation-scroll-offset: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 24px 34px;
}

.restaurant-ratings-dialog {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 24px;
	position: fixed;
	z-index: 960;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.restaurant-ratings-dialog[hidden] {
	display: none;
}

.restaurant-ratings-dialog__backdrop {
	background: rgba(0, 0, 0, 0.45);
	border: 0;
	cursor: default;
	inset: 0;
	padding: 0;
	position: absolute;
	width: 100%;
}

.restaurant-ratings-dialog__panel {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 48px);
	max-width: 100%;
	outline: 0;
	overflow: clip;
	position: relative;
	width: 440px;
	z-index: 1;
}

.restaurant-ratings-dialog__header {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 32px 32px 8px;
	position: relative;
}

.restaurant-ratings-dialog__title {
	color: #111111;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.restaurant-ratings-dialog__close {
	align-items: center;
	background: none;
	border: 0;
	color: #111111;
	cursor: pointer;
	display: inline-flex;
	height: 32px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 32px;
	top: 26px;
	transition: opacity 0.2s ease;
	width: 32px;
}

.restaurant-ratings-dialog__close:hover {
	opacity: 0.6;
	background: none;
	transform: none;
}

.restaurant-ratings-dialog__close svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.5;
	width: 20px;
}

.restaurant-ratings-dialog__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 32px 32px;
}

.restaurant-ratings-dialog__stars {
	display: inline-flex;
	gap: 3px;
	color: #fab41a;
	margin: 8px 0;
}

.restaurant-ratings-dialog__star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.restaurant-ratings-dialog__star svg {
	width: 24px;
	height: 24px;
}

.restaurant-ratings-dialog__recent-title {
	color: #111111;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 12px;
}

.restaurant-ratings-dialog__recent-list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.restaurant-ratings-dialog__recent-item {
	border-bottom: 1px solid #efedeb;
	display: flex;
	flex-direction: column;
	min-height: 48px;
	padding: 10px 0;
	transition: background-color 0.2s ease;
}

.restaurant-ratings-dialog__recent-item:hover {
	background-color: rgba(246, 61, 65, 0.01);
}

.restaurant-ratings-dialog__recent-meta {
	align-items: center;
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.restaurant-ratings-dialog__recent-date {
	color: #716b66;
	font-size: 14px;
	font-weight: 500;
}

.restaurant-ratings-dialog__recent-badges {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-start;
	min-width: 264px;
}

.restaurant-ratings-dialog__recent-badge {
	align-items: center;
	background: #f7f5f3;
	border-radius: 999px;
	color: #5f5954;
	display: inline-flex;
	font-size: 11px;
	font-weight: 600;
	gap: 6px;
	line-height: 1;
	padding: 5px 10px;
	white-space: nowrap;
}

.restaurant-ratings-dialog__recent-badge-label {
	color: #5f5954;
	font-weight: 600;
}

.restaurant-ratings-dialog__recent-badge .restaurant-ratings-dialog__stars {
	margin: 0;
	gap: 2px;
}

.restaurant-ratings-dialog__recent-badge .restaurant-ratings-dialog__star svg {
	width: 12px;
	height: 12px;
}

.restaurant-ratings-dialog__recent-comment {
	color: #3f3a36;
	font-size: 14px;
	line-height: 1.5;
	margin: 8px 0 2px;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

.restaurant-ratings-dialog__empty {
	color: #716b66;
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	padding: 16px 0;
	text-align: center;
}

.restaurant-ratings-dialog:not([hidden]) .restaurant-ratings-dialog__backdrop {
	animation: ratings-backdrop-fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.restaurant-ratings-dialog:not([hidden]) .restaurant-ratings-dialog__panel {
	animation: ratings-panel-scale-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.restaurant-ratings-dialog:not([hidden]) .restaurant-ratings-dialog__recent {
	animation: ratings-item-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.restaurant-info-dialog {
	align-items: center;
	display: flex;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	inset: 0;
	justify-content: center;
	padding: 24px;
	position: fixed;
	z-index: 960;
}

.restaurant-info-dialog[hidden] {
	display: none;
}

.restaurant-info-dialog__backdrop {
	background: rgba(0, 0, 0, 0.45);
	border: 0;
	cursor: default;
	inset: 0;
	padding: 0;
	position: absolute;
	width: 100%;
}

.restaurant-info-dialog__panel {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 48px);
	max-width: 100%;
	outline: 0;
	overflow: clip;
	position: relative;
	width: 520px;
	z-index: 1;
}

.restaurant-info-dialog__header {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 32px 32px 8px;
	position: relative;
}

.restaurant-info-dialog__title {
	color: #111111;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	text-align: center;
}

.restaurant-info-dialog__close {
	align-items: center;
	background: none;
	border: 0;
	color: #111111;
	cursor: pointer;
	display: inline-flex;
	height: 32px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 32px;
	top: 26px;
	transition: opacity 0.2s ease;
	width: 32px;
}

.restaurant-info-dialog__close:hover {
	background: none;
	opacity: 0.6;
	transform: none;
}

.restaurant-info-dialog__close:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.24);
	outline-offset: 2px;
}

.restaurant-info-dialog__close svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.5;
	width: 20px;
}

.restaurant-info-dialog__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 32px 32px;
}

.restaurant-info-dialog__section + .restaurant-info-dialog__section {
	border-top: 1px solid #efedeb;
	margin-top: 18px;
	padding-top: 18px;
}

.restaurant-info-dialog__section-title {
	color: #111111;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 10px;
}

.restaurant-info-dialog__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
}

.restaurant-info-dialog__item {
	align-items: start;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(126px, 0.65fr) minmax(0, 1fr);
	padding: 8px 0;
}

.restaurant-info-dialog__label {
	color: #716b66;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.restaurant-info-dialog__value {
	color: #111111;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
	overflow-wrap: anywhere;
	text-align: right;
}

.restaurant-info-dialog__table-wrapper {
	border: 1px solid #efedeb;
	border-radius: 10px;
	overflow-x: auto;
}

.restaurant-info-dialog__table {
	border-collapse: collapse;
	min-width: 360px;
	width: 100%;
}

.restaurant-info-dialog__table th,
.restaurant-info-dialog__table td {
	border: 0;
	line-height: 1.35;
	padding: 11px 12px;
	vertical-align: middle;
}

.restaurant-info-dialog__table thead th {
	background: #f7f5f3;
	color: #716b66;
	font-size: 12px;
	font-weight: 700;
	text-align: right;
}

.restaurant-info-dialog__table thead th:first-child,
.restaurant-info-dialog__table tbody th {
	text-align: left;
}

.restaurant-info-dialog__table tbody th,
.restaurant-info-dialog__table tbody td {
	border-top: 1px solid #efedeb;
	color: #111111;
	font-size: 14px;
}

.restaurant-info-dialog__table tbody th {
	font-weight: 600;
}

.restaurant-info-dialog__table tbody td {
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
}

.restaurant-info-dialog__empty {
	color: #716b66;
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	padding: 16px 0;
	text-align: center;
}

.restaurant-info-dialog:not([hidden]) .restaurant-info-dialog__backdrop {
	animation: ratings-backdrop-fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.restaurant-info-dialog:not([hidden]) .restaurant-info-dialog__panel {
	animation: ratings-panel-scale-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.restaurant-info-dialog:not([hidden]) .restaurant-info-dialog__section,
.restaurant-info-dialog:not([hidden]) .restaurant-info-dialog__empty {
	animation: ratings-item-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes ratings-backdrop-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes ratings-panel-scale-in {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes ratings-panel-slide-up {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes ratings-item-fade-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.restaurant-product-group {
	border: 0;
	border-radius: 8px;
	margin: 0;
	min-width: 0;
	padding: 18px 0 0;
}

.restaurant-product-group--invalid {
	animation: restaurant-product-group-invalid 0.75s ease-in-out;
}

@keyframes restaurant-product-group-invalid {
	0%,
	100% {
		background: transparent;
		box-shadow: none;
	}
	35%,
	70% {
		background: #fff1f1;
		box-shadow: 0 0 0 2px rgba(246, 61, 65, 0.32);
	}
}

.restaurant-product-group + .restaurant-product-group {
	border-top: 1px solid #efedeb;
	margin-top: 18px;
}

.restaurant-product-group + .restaurant-product-configuration {
	margin-top: 18px;
}

.restaurant-product-group__header {
	align-items: center;
	display: flex;
	font-size: var(--restaurant-product-dialog-meta-size);
	gap: 16px;
	justify-content: space-between;
	line-height: var(--restaurant-product-dialog-meta-line);
	padding: 0 0 10px;
	width: 100%;
}

.restaurant-product-group__header > strong,
.restaurant-product-group__heading strong {
	color: #111111;
	display: block;
	font-size: var(--restaurant-product-dialog-section-size);
	font-weight: var(--restaurant-product-dialog-section-weight);
	line-height: var(--restaurant-product-dialog-section-line);
}

.restaurant-product-group__header > span:last-child {
	color: #746f6a;
	flex: 0 0 auto;
	font-size: var(--restaurant-product-dialog-meta-size);
	font-weight: var(--restaurant-product-dialog-meta-weight);
	line-height: var(--restaurant-product-dialog-meta-line);
}

.restaurant-product-group__heading small {
	color: #746f6a;
	display: block;
	font-size: var(--restaurant-product-dialog-meta-size);
	font-weight: var(--restaurant-product-dialog-meta-weight);
	line-height: var(--restaurant-product-dialog-meta-line);
	margin-top: 2px;
	text-transform: none;
}

.restaurant-product-option {
	align-items: center;
	border: 1px solid #efedeb;
	border-radius: 9px;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	gap: 11px;
	min-height: 48px;
	padding: 7px 10px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.restaurant-product-option + .restaurant-product-option {
	margin-top: 6px;
}

.restaurant-product-option:hover {
	background: #fbfaf9;
	border-color: #dcd7d3;
}

.restaurant-product-option:has(input:checked) {
	background: #ffffff;
	border-color: rgba(246, 61, 65, 0.42);
}

.restaurant-product-option:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.52;
}

.restaurant-product-option input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.restaurant-product-option__control {
	background: #ffffff;
	border: 1.5px solid #c8c2bd;
	box-sizing: border-box;
	display: block;
	flex: 0 0 auto;
	height: 18px;
	position: relative;
	width: 18px;
}

input[type="radio"] + .restaurant-product-option__control {
	border-radius: 999px;
}

input[type="checkbox"] + .restaurant-product-option__control {
	border-radius: 4px;
}

.restaurant-product-option input:checked + .restaurant-product-option__control,
.restaurant-product-ingredient input:checked + .restaurant-product-option__control {
	background: var(--hotmat-brand-red);
	border-color: var(--hotmat-brand-red);
}

.restaurant-product-option input[type="radio"]:checked + .restaurant-product-option__control {
	background: #ffffff;
	border-color: var(--hotmat-brand-red);
	border-width: 2px;
}

.restaurant-product-option input:checked + .restaurant-product-option__control::after,
.restaurant-product-ingredient input:checked + .restaurant-product-option__control::after {
	content: "";
	position: absolute;
}

.restaurant-product-option input[type="radio"]:checked + .restaurant-product-option__control::after {
	background: var(--hotmat-brand-red);
	border-radius: 999px;
	height: 6px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
}

.restaurant-product-option input[type="checkbox"]:checked + .restaurant-product-option__control::after,
.restaurant-product-ingredient input[type="checkbox"]:checked + .restaurant-product-option__control::after {
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	height: 9px;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 5px;
}

.restaurant-product-option__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.restaurant-product-option__copy strong {
	color: #161616;
	font-size: var(--restaurant-product-dialog-label-size);
	font-weight: var(--restaurant-product-dialog-label-weight);
	line-height: var(--restaurant-product-dialog-label-line);
}

.restaurant-product-option__copy small {
	color: #77716d;
	font-size: var(--restaurant-product-dialog-meta-size);
	font-weight: 400;
	line-height: var(--restaurant-product-dialog-meta-line);
	margin-top: 3px;
}

.restaurant-product-option__price {
	align-items: baseline;
	color: #111111;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--restaurant-product-dialog-price-size);
	gap: 5px;
	font-weight: var(--restaurant-product-dialog-price-weight);
	line-height: var(--restaurant-product-dialog-price-line);
	white-space: nowrap;
}

.restaurant-product-option__price-original {
	color: #77716d;
	font-weight: var(--restaurant-product-dialog-meta-weight);
}

.restaurant-product-ingredients {
	border-top: 1px solid #efedeb;
	margin-top: 22px;
	padding-top: 22px;
}

.restaurant-product-ingredients__toggle {
	background: var(--hotmat-brand-red);
	border: 1px solid var(--hotmat-brand-red);
	border-radius: 9px;
	color: #ffffff;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--restaurant-product-dialog-label-size);
	font-weight: var(--restaurant-product-dialog-action-weight);
	line-height: var(--restaurant-product-dialog-label-line);
	padding: 12px 15px;
	text-align: left;
	width: 100%;
}

.restaurant-product-ingredients__toggle:hover {
	background: var(--hotmat-brand-red-dark);
	border-color: var(--hotmat-brand-red-dark);
}

.restaurant-product-ingredients__toggle:focus-visible,
.restaurant-product-ingredient input:focus-visible + .restaurant-product-option__control {
	outline: 3px solid rgba(246, 61, 65, 0.24);
	outline-offset: 2px;
}

.restaurant-product-ingredients__panel[hidden] {
	display: none;
}

.restaurant-product-ingredients__guidance {
	color: #77716d;
	font-size: var(--restaurant-product-dialog-meta-size);
	line-height: var(--restaurant-product-dialog-meta-line);
	margin: 12px 0 0;
}

.restaurant-product-ingredient-group {
	margin-top: 18px;
}

.restaurant-product-ingredient-group__title {
	color: #111111;
	font-size: var(--restaurant-product-dialog-section-size);
	font-weight: var(--restaurant-product-dialog-section-weight);
	line-height: var(--restaurant-product-dialog-section-line);
	margin: 0 0 8px;
}

.restaurant-product-ingredient {
	align-items: center;
	border: 1px solid #efedeb;
	border-radius: 9px;
	box-sizing: border-box;
	display: flex;
	gap: 11px;
	justify-content: space-between;
	min-height: 48px;
	padding: 7px 10px;
}

.restaurant-product-ingredient + .restaurant-product-ingredient {
	margin-top: 6px;
}

.restaurant-product-ingredient__choice,
.restaurant-product-ingredient__extra {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 9px;
	min-width: 0;
}

.restaurant-product-ingredient__choice {
	flex: 1 1 auto;
}

.restaurant-product-ingredient__extra {
	color: #5e5955;
	flex: 0 0 auto;
	font-size: var(--restaurant-product-dialog-meta-size);
	font-weight: var(--restaurant-product-dialog-meta-weight);
	line-height: var(--restaurant-product-dialog-meta-line);
}

.restaurant-product-ingredient input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.restaurant-product-ingredient__name {
	color: #161616;
	flex: 1 1 auto;
	font-size: var(--restaurant-product-dialog-label-size);
	font-weight: var(--restaurant-product-dialog-label-weight);
	line-height: var(--restaurant-product-dialog-label-line);
	min-width: 0;
}

.restaurant-product-ingredient__price {
	color: #77716d;
	flex: 0 0 auto;
	font-size: var(--restaurant-product-dialog-price-size);
	font-weight: var(--restaurant-product-dialog-price-weight);
	line-height: var(--restaurant-product-dialog-price-line);
	white-space: nowrap;
}

.restaurant-product-ingredient__extra-text {
	white-space: nowrap;
}

.restaurant-product-ingredient__extra:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.5;
}

.restaurant-product-upsell {
	border-top: 1px solid #efedeb;
	margin-top: 22px;
	padding-top: 22px;
}

.restaurant-product-upsell__heading {
	color: #111111;
	font-size: var(--restaurant-product-dialog-section-size);
	font-weight: var(--restaurant-product-dialog-section-weight);
	line-height: var(--restaurant-product-dialog-section-line);
	margin: 0;
}

.restaurant-product-upsell__description {
	color: #77716d;
	font-size: var(--restaurant-product-dialog-body-size);
	font-weight: 400;
	line-height: var(--restaurant-product-dialog-body-line);
	margin: 5px 0 14px;
}

.restaurant-product-upsell__list {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.restaurant-product-upsell__item {
	align-items: center;
	background: #ffffff;
	border: 1px solid #ebe8e5;
	border-radius: 10px;
	color: #111111;
	cursor: pointer;
	display: flex;
	font-family: inherit;
	gap: 10px;
	min-width: 0;
	padding: 9px;
	text-align: left;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.restaurant-product-upsell__item[hidden] {
	display: none;
}

.restaurant-product-upsell__item:hover {
	background: #fbfaf9;
	border-color: #dcd7d3;
}

.restaurant-product-upsell__item--added,
.restaurant-product-upsell__item--added:hover {
	background: #f0fbf5;
	border-color: #b9e4cb;
	cursor: default;
}

.restaurant-product-upsell__item:focus-visible,
.restaurant-product-upsell__more:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.24);
	outline-offset: 2px;
}

.restaurant-product-upsell__media {
	border-radius: 8px;
	flex: 0 0 auto;
	height: 52px;
	overflow: hidden;
	width: 52px;
}

.restaurant-product-upsell__image {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.restaurant-product-upsell__copy {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.restaurant-product-upsell__copy strong {
	font-size: var(--restaurant-product-dialog-label-size);
	font-weight: var(--restaurant-product-dialog-label-weight);
	line-height: var(--restaurant-product-dialog-label-line);
}

.restaurant-product-upsell__copy span {
	color: #77716d;
	font-size: var(--restaurant-product-dialog-price-size);
	font-weight: var(--restaurant-product-dialog-price-weight);
	line-height: var(--restaurant-product-dialog-price-line);
	margin-top: 3px;
}

.restaurant-product-upsell__add {
	align-items: center;
	background: var(--hotmat-brand-red);
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--restaurant-product-dialog-meta-size);
	font-weight: var(--restaurant-product-dialog-action-weight);
	height: 28px;
	justify-content: center;
	line-height: var(--restaurant-product-dialog-meta-line);
	min-width: 28px;
	padding: 0 8px;
	white-space: nowrap;
}

.restaurant-product-upsell__item--added .restaurant-product-upsell__add {
	background: #16794f;
}

.restaurant-product-upsell__more {
	background: transparent;
	border: 0;
	color: var(--hotmat-brand-red-dark);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--restaurant-product-dialog-body-size);
	font-weight: var(--restaurant-product-dialog-action-weight);
	line-height: var(--restaurant-product-dialog-body-line);
	margin-top: 12px;
	padding: 4px 0;
}

.restaurant-product-group__error {
	background: #fff6f6;
	border: 1px solid rgba(246, 61, 65, 0.18);
	border-radius: 8px;
	color: #a12d2d;
	font-size: var(--restaurant-product-dialog-meta-size);
	font-weight: var(--restaurant-product-dialog-meta-weight);
	line-height: var(--restaurant-product-dialog-meta-line);
	margin: -4px 0 12px;
	padding: 9px 10px;
}

.restaurant-product-group__error[hidden] {
	display: none;
}

.restaurant-product-group__error-main,
.restaurant-product-group__error-hint {
	display: block;
}

.restaurant-product-group__error-hint {
	color: #71514f;
	font-weight: 500;
	margin-top: 2px;
}

.restaurant-product-dialog__footer {
	align-items: center;
	background: #ffffff;
	border-top: 1px solid #efedeb;
	box-shadow: 0 -8px 22px rgba(17, 17, 17, 0.045);
	display: flex;
	gap: 24px;
	justify-content: flex-end;
	padding: 21px 24px 20px;
}

.restaurant-product-dialog__done {
	background: var(--hotmat-brand-red);
	border: 0;
	border-radius: 9px;
	color: #ffffff;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--restaurant-product-dialog-action-size);
	font-weight: var(--restaurant-product-dialog-action-weight);
	line-height: var(--restaurant-product-dialog-action-line);
	min-height: 48px;
	padding: 12px 26px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.restaurant-product-dialog__done:hover {
	background: var(--hotmat-brand-red-dark);
	transform: translateY(-1px);
}

.restaurant-product-dialog__done:disabled {
	background: #d5d1ce;
	cursor: not-allowed;
	transform: none;
}

.restaurant-order-sidebar {
	--restaurant-order-sticky-top: 86px;
	--restaurant-order-viewport-gap: 24px;
	align-self: start;
	background: #ffffff;
	border: 1px solid #eeecea;
	border-radius: 8px;
	box-shadow: 0 12px 34px rgba(20, 20, 20, 0.06);
	color: #111111;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--restaurant-order-sticky-top) - var(--restaurant-order-viewport-gap));
	max-height: calc(100dvh - var(--restaurant-order-sticky-top) - var(--restaurant-order-viewport-gap));
	min-height: 0;
	overflow: hidden;
	padding: 24px;
	position: sticky;
	top: var(--restaurant-order-sticky-top);
	width: 100%;
}

.restaurant-order-header {
	border-bottom: 1px solid #f0eeee;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.restaurant-order-heading-row {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.restaurant-order-title {
	color: #111111;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.18;
	margin: 0;
}

.restaurant-order-close {
	align-items: center;
	background: #f6f6f6;
	border: 0;
	border-radius: 8px;
	color: #111111;
	cursor: pointer;
	display: none;
	flex: 0 0 auto;
	height: 36px;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
	width: 36px;
}

.restaurant-order-close:hover,
.restaurant-order-close:focus-visible {
	background: #ededed;
	color: var(--hotmat-brand-red-dark);
}

.restaurant-order-close svg {
	fill: none;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2.5;
	width: 18px;
}

.restaurant-order-service {
	display: grid;
	grid-template-columns: 1.04fr 1fr;
	height: 46px;
	width: 100%;
}

.restaurant-order-service[hidden] {
	display: none;
}

.restaurant-order-service-option {
	align-items: center;
	appearance: none;
	background: #ffffff;
	border: 1px solid #e1e4e8;
	border-radius: 0 6px 6px 0;
	color: #111111;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	gap: 14px;
	justify-content: center;
	line-height: 1;
	min-width: 0;
	padding: 0 8px;
	position: relative;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.restaurant-order-service-option:first-of-type {
	border-radius: 6px 0 0 6px;
}

.restaurant-order-service-option + .restaurant-order-service-option {
	margin-left: -1px;
}

.restaurant-order-service-option:hover,
.restaurant-order-service-option:focus-visible {
	color: var(--hotmat-brand-red-dark);
}

.restaurant-order-service-option.is-active {
	background: #fff8f8;
	border-color: #e1e4e8;
	color: var(--hotmat-brand-red);
	z-index: 1;
}

.restaurant-order-service-option:disabled,
.restaurant-order-service-option.is-disabled {
	background: #f7f7f7;
	border-color: #e1e4e8;
	color: #918a83;
	cursor: not-allowed;
}

.restaurant-order-service-option:disabled:hover,
.restaurant-order-service-option:disabled:focus-visible,
.restaurant-order-service-option.is-disabled:hover,
.restaurant-order-service-option.is-disabled:focus-visible {
	color: #918a83;
}

.restaurant-order-service-option:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.32);
	outline-offset: 2px;
	z-index: 2;
}

.restaurant-order-service-option-icon {
	color: currentColor;
	display: block;
	flex: 0 0 auto;
	height: 22px;
	width: 22px;
}

.restaurant-order-service-option-copy {
	align-items: flex-start;
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	text-align: left;
}

.restaurant-order-service-option-label,
.restaurant-order-service-option-status {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.restaurant-order-service-option-label {
	line-height: 1.2;
}

.restaurant-order-service-option-status {
	color: currentColor;
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.1;
	opacity: 0.9;
}

.restaurant-order-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.restaurant-order-sidebar[data-restaurant-order-state="loading"] .restaurant-order-service,
.restaurant-order-sidebar[data-restaurant-order-state="loading"] .restaurant-order-progress {
	display: none;
}

.restaurant-order-loading-title {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, #eeece9 0%, #faf8f6 50%, #eeece9 100%);
	background-size: 220% 100%;
	border-radius: 8px;
	display: none;
	height: 26px;
	overflow: hidden;
	width: 160px;
}

.restaurant-order-sidebar[data-restaurant-order-state="loading"] .restaurant-order-title {
	display: none;
}

.restaurant-order-sidebar[data-restaurant-order-state="loading"] .restaurant-order-loading-title {
	display: block;
}

.restaurant-order-loading-header {
	display: none;
	flex-direction: column;
	gap: 12px;
}

.restaurant-order-sidebar[data-restaurant-order-state="loading"] .restaurant-order-loading-header {
	display: flex;
}

.restaurant-order-loading-service {
	background: #f6f4f2;
	border: 1px solid #ece8e4;
	border-radius: 8px;
	box-sizing: border-box;
	display: grid;
	gap: 3px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	height: 50px;
	padding: 3px;
}

.restaurant-order-loading-service span {
	border-radius: 6px;
}

.restaurant-order-loading-progress {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.restaurant-order-loading-progress-copy {
	display: flex;
	justify-content: space-between;
}

.restaurant-order-loading-progress-copy span {
	border-radius: 999px;
	height: 16px;
	width: 108px;
}

.restaurant-order-loading-progress-copy span + span {
	width: 70px;
}

.restaurant-order-loading-progress-track {
	border-radius: 999px;
	height: 6px;
	width: 100%;
}

.restaurant-order-progress-text {
	align-items: center;
	color: #767676;
	display: flex;
	font-size: 12px;
	font-weight: 400;
	justify-content: space-between;
	line-height: 1.3;
}

.restaurant-order-progress-track {
	background: #e6e6e6;
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
	width: 100%;
}

.restaurant-order-progress-fill {
	background: var(--hotmat-brand-red);
	border-radius: inherit;
	height: 100%;
	transition: width 0.24s ease;
	width: 0;
}

.restaurant-order-sidebar[data-restaurant-order-state="loading"] .restaurant-order-summary,
.restaurant-order-sidebar[data-restaurant-order-state="loading"] .restaurant-order-total,
.restaurant-order-sidebar[data-restaurant-order-state="loading"] .restaurant-order-actions {
	display: none;
}

.restaurant-order-loading[hidden],
.restaurant-order-ready[hidden] {
	display: none;
}

.restaurant-order-loading {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.restaurant-order-ready {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.restaurant-order-loading-text {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.restaurant-order-loading-content,
.restaurant-order-loading-items {
	display: flex;
	flex-direction: column;
}

.restaurant-order-loading-items {
	border-bottom: 1px solid #f0eeee;
	gap: 18px;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.restaurant-order-loading-service span,
.restaurant-order-loading-progress-copy span,
.restaurant-order-loading-progress-track,
.restaurant-order-loading-image,
.restaurant-order-loading-copy span,
.restaurant-order-loading-item-action,
.restaurant-order-loading-summary-row span,
.restaurant-order-loading-total-copy span,
.restaurant-order-loading-total-price,
.restaurant-order-loading-button {
	animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
	background: linear-gradient(90deg, #eeece9 0%, #faf8f6 50%, #eeece9 100%);
	background-size: 220% 100%;
	color: transparent;
	display: block;
	overflow: hidden;
}

.restaurant-order-loading-card {
	align-items: start;
	display: grid;
	gap: 14px;
	grid-template-columns: 56px minmax(0, 1fr) 34px;
	min-width: 0;
}

.restaurant-order-loading-image {
	border-radius: 8px;
	height: 56px;
	width: 56px;
}

.restaurant-order-loading-copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.restaurant-order-loading-copy span {
	border-radius: 999px;
	height: 11px;
}

.restaurant-order-loading-copy .restaurant-order-loading-item-title {
	height: 14px;
	width: min(82%, 144px);
}

.restaurant-order-loading-copy .restaurant-order-loading-item-description {
	width: min(94%, 164px);
}

.restaurant-order-loading-copy .restaurant-order-loading-item-price {
	height: 13px;
	margin-top: 2px;
	width: 54px;
}

.restaurant-order-loading-item-action {
	border-radius: 6px;
	height: 34px;
	width: 34px;
}

.restaurant-order-loading-summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-bottom: 1px solid #f0eeee;
	margin-bottom: 12px;
	padding-bottom: 12px;
}

.restaurant-order-loading-summary-row,
.restaurant-order-loading-total {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.restaurant-order-loading-summary-row span {
	border-radius: 999px;
	height: 13px;
	width: 92px;
}

.restaurant-order-loading-summary-row span + span {
	width: 54px;
}

.restaurant-order-loading-summary-row--short span {
	width: 72px;
}

.restaurant-order-loading-summary-row--short span + span {
	width: 46px;
}

.restaurant-order-loading-total {
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}

.restaurant-order-loading-total-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.restaurant-order-loading-total-copy span {
	border-radius: 999px;
	height: 16px;
	width: 74px;
}

.restaurant-order-loading-total-copy span + span {
	height: 10px;
	width: 112px;
}

.restaurant-order-loading-total-price {
	border-radius: 999px;
	height: 22px;
	width: 72px;
}

.restaurant-order-loading-button {
	border-radius: 8px;
	height: 48px;
	width: 100%;
}

.restaurant-order-items {
	border-bottom: 1px solid #f0eeee;
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 20px;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 20px;
	scrollbar-gutter: auto;
}

.restaurant-order-items--scrollable {
	scrollbar-gutter: stable;
}

.restaurant-order-items--empty {
	overflow-y: hidden;
	scrollbar-gutter: auto;
}

.restaurant-order-empty {
	align-items: center;
	color: #767676;
	display: flex;
	flex-direction: column;
	min-height: 166px;
	padding: 20px 8px;
	text-align: center;
}

.restaurant-order-empty[hidden] {
	display: none;
}

.restaurant-order-empty-icon {
	align-items: center;
	background: #f6f4f2;
	border-radius: 50%;
	color: #7a746f;
	display: inline-flex;
	height: 48px;
	justify-content: center;
	margin-bottom: 12px;
	width: 48px;
}

.restaurant-order-empty-icon svg {
	height: 22px;
	width: 22px;
}

.restaurant-order-empty strong {
	color: #111111;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.restaurant-order-empty span:not(.restaurant-order-empty-icon) {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	margin-top: 6px;
	max-width: 240px;
}

.restaurant-order-item {
	align-items: start;
	display: grid;
	gap: 14px;
	grid-template-columns: 56px minmax(0, 1fr) max-content;
	min-width: 0;
}

.restaurant-order-item--editable {
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.restaurant-order-item--editable:hover {
	background: #fbfaf9;
}

.restaurant-order-item--editable:hover .restaurant-order-item-edit {
	color: var(--hotmat-brand-red-dark);
}

.restaurant-order-item-image {
	aspect-ratio: 1;
	background: #fbfaf8;
	border: 1px solid #e8e2dc;
	border-radius: 8px;
	box-sizing: border-box;
	display: block;
	flex: 0 0 56px;
	height: 56px;
	object-fit: contain;
	object-position: center;
	padding: 8px;
	width: 56px;
}

.restaurant-order-item-details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.restaurant-order-item-header {
	min-width: 0;
}

.restaurant-order-item-name {
	color: #2f373a;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.restaurant-order-item-edit {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-weight: inherit;
	line-height: inherit;
	overflow-wrap: anywhere;
	padding: 0;
	text-align: left;
}

.restaurant-order-item-edit:hover {
	color: var(--hotmat-brand-red-dark);
}

.restaurant-order-item-edit:focus-visible {
	border-radius: 4px;
	outline: 3px solid rgba(246, 61, 65, 0.2);
	outline-offset: 2px;
}

.restaurant-order-item-description {
	color: #767676;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	margin: 6px 0 0;
	overflow-wrap: anywhere;
}

.restaurant-order-item-price {
	color: #111111;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	margin-top: 5px;
	white-space: nowrap;
}

.restaurant-order-item-controls {
	align-items: center;
	display: flex;
	justify-content: flex-end;
}

.restaurant-order-delete {
	align-items: center;
	background: transparent;
	border: 0;
	color: #111111;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.restaurant-order-delete:hover,
.restaurant-order-delete:focus-visible {
	background: #f6f6f6;
}

.restaurant-order-delete:focus-visible,
.restaurant-order-close:focus-visible,
.restaurant-order-checkout:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.2);
	outline-offset: 2px;
}

.restaurant-order-delete svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.restaurant-order-delete svg {
	stroke-width: 2;
}

.restaurant-order-delete {
	border-radius: 6px;
	flex: 0 0 auto;
	height: 34px;
	width: 34px;
}

.restaurant-order-delete:hover,
.restaurant-order-delete:focus-visible {
	color: var(--hotmat-brand-red-dark);
}

.restaurant-order-delete svg {
	height: 18px;
	width: 18px;
}

.restaurant-order-quantity {
	align-items: center;
	background: #ffffff;
	border: 1px solid #dfe4e6;
	border-radius: 999px;
	display: inline-flex;
	min-height: 36px;
	overflow: hidden;
}

.restaurant-order-quantity-button {
	align-items: center;
	background: transparent;
	border: 0;
	color: #111111;
	cursor: pointer;
	display: inline-flex;
	font-size: 18px;
	font-weight: 400;
	height: 34px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
	width: 34px;
}

.restaurant-order-quantity-button svg {
	fill: none;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 18px;
}

.restaurant-order-quantity-button .restaurant-order-quantity-symbol {
	height: 14px;
	shape-rendering: geometricPrecision;
	stroke-width: 2.45;
	width: 14px;
}

.restaurant-order-quantity-button .restaurant-order-quantity-symbol--decrease {
	width: 13px;
}

.restaurant-order-quantity-button:hover,
.restaurant-order-quantity-button:focus-visible {
	background: #f6f6f6;
	color: var(--hotmat-brand-red-dark);
}

.restaurant-order-quantity-button:focus-visible {
	outline: 3px solid rgba(246, 61, 65, 0.2);
	outline-offset: -2px;
}

.restaurant-order-quantity-value {
	color: #111111;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	min-width: 24px;
	text-align: center;
}

.restaurant-order-checkout {
	align-items: center;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.restaurant-order-summary {
	border-bottom: 1px solid #f0eeee;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
	padding-bottom: 12px;
}

.restaurant-order-summary-row,
.restaurant-order-total {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.restaurant-order-summary-row[hidden] {
	display: none;
}

.restaurant-order-summary-row {
	color: #333333;
	font-size: 13.5px;
	line-height: 1.3;
}

.restaurant-order-summary-row strong {
	color: #111111;
	font-weight: 400;
}

.restaurant-order-delivery-value--free {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	white-space: nowrap;
}

.restaurant-order-delivery-original {
	color: #777777;
	font-weight: 400;
	text-decoration: line-through;
}

.restaurant-order-delivery-free-label {
	color: var(--hotmat-brand-red);
	font-weight: 400;
}

.restaurant-order-total {
	align-items: flex-start;
	flex: 0 0 auto;
	gap: 16px;
	margin-bottom: 16px;
}

.restaurant-order-total span {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.restaurant-order-total strong {
	color: #111111;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
}

.restaurant-order-total small {
	color: #9e9e9e;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.2;
}

.restaurant-order-total .restaurant-order-total-price {
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.restaurant-order-actions {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 0;
}

.restaurant-order-checkout {
	background: var(--hotmat-brand-red);
	border: 1px solid var(--hotmat-brand-red);
	color: #ffffff;
	font-size: 15.5px;
	height: 48px;
}

.restaurant-order-checkout:hover {
	background: var(--hotmat-brand-red-dark);
	border-color: var(--hotmat-brand-red-dark);
}

.restaurant-order-checkout:disabled,
.restaurant-order-checkout:disabled:hover {
	background: #d7d3cf;
	border-color: #d7d3cf;
	box-shadow: none;
	color: #ffffff;
	cursor: not-allowed;
}

.restaurant-order-backdrop {
	display: none;
}

@media (max-width: 1080px) {
	.restaurant-page-layout {
		gap: 28px;
		grid-template-columns: minmax(0, 1fr) 340px;
	}

	.restaurant-order-sidebar {
		padding: 20px;
	}

	.restaurant-hero-inner {
		gap: 28px;
		padding-top: 24px;
		padding-bottom: 24px;
	}

}

@media (min-width: 861px) and (max-width: 1080px) {
	.restaurant-menu-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.restaurant-menu-card-image-wrapper {
		flex-basis: 128px;
		height: 112px;
		width: 128px;
	}

	.restaurant-menu-card-content,
	.restaurant-menu-card-info {
		min-height: 112px;
	}
}

.restaurant-order-bar {
	display: none;
}

.restaurant-fly-to-cart {
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(17, 17, 17, 0.24);
	height: 44px;
	object-fit: cover;
	pointer-events: none;
	position: fixed;
	width: 44px;
	will-change: transform, opacity;
	z-index: 1000;
}

.restaurant-fly-to-cart--dot {
	align-items: center;
	background: var(--hotmat-brand-red);
	color: #ffffff;
	display: inline-flex;
	justify-content: center;
}

.restaurant-fly-to-cart--dot svg {
	fill: none;
	height: 20px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2.4;
	width: 20px;
}

@media (max-width: 860px) {
	.restaurant-page-body .restaurant-shell-site-header {
		transform: translateY(0);
		transition:
			transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0s;
		will-change: transform;
	}

	.restaurant-page-body.restaurant-mobile-header-hidden .restaurant-shell-site-header {
		pointer-events: none;
		transform: translateY(calc(-100% - 1px));
		transition:
			transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0.18s;
		visibility: hidden;
	}

	.restaurant-page-body.restaurant-mobile-header-hidden.restaurant-mobile-header-top-return .restaurant-shell-site-header {
		pointer-events: auto;
		transform: translateY(calc(var(--restaurant-mobile-header-top-offset, 0px) * -1));
		transition: none;
		visibility: visible;
	}

	.restaurant-menu-skeleton-search {
		display: none;
	}

	.restaurant-menu-skeleton-tabs {
		gap: 4px;
		padding: 8px 0;
		top: var(--restaurant-menu-sticky-top, 64px);
		transition: top 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.restaurant-menu-skeleton-search-toggle {
		display: inline-flex;
		margin-left: 2px;
		margin-right: 2px;
	}

	.restaurant-menu-search {
		background: rgba(255, 255, 255, 0.96);
		margin-bottom: 0;
		padding: 4px 0 5px;
		position: sticky;
		top: var(--restaurant-menu-search-sticky-top, 64px);
		transition: top 0.18s cubic-bezier(0.4, 0, 0.2, 1);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	.restaurant-menu-search-field {
		min-height: 36px;
	}

	.restaurant-menu-search-input {
		height: 34px;
	}

	.restaurant-menu-tabs-wrapper {
		--restaurant-menu-tabs-left-gradient-left: 0px;
		--restaurant-menu-tabs-left-gradient-solid: 46px;
		--restaurant-menu-tabs-left-gradient-width: 104px;
		align-items: center;
		display: flex;
		gap: 6px;
		transition:
			box-shadow 0.2s ease,
			top 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.restaurant-menu-tabs {
		flex: 1 1 auto;
		min-width: 0;
	}

	.restaurant-menu-search-toggle {
		display: inline-flex;
	}

	[data-restaurant-menu-mobile-search-open="true"] .restaurant-menu-tabs-wrapper {
		--restaurant-menu-tabs-left-gradient-solid: 20%;
		--restaurant-menu-tabs-left-gradient-width: 60px;
	}

	[data-restaurant-menu-mobile-search-open="true"] .restaurant-menu-search-toggle {
		display: none;
	}

	.restaurant-product-dialog {
		align-items: flex-end;
		padding: 0;
	}

	.restaurant-product-dialog__panel {
		border-radius: 18px 18px 0 0;
		max-height: calc(100dvh - 18px);
		width: 100%;
	}

	.restaurant-product-dialog__header {
		gap: 14px;
		padding: 17px 16px 14px;
	}

	.restaurant-product-dialog__title {
		font-size: 21px;
		line-height: 25px;
	}

	.restaurant-product-dialog__close {
		height: 32px;
		width: 32px;
	}

	.restaurant-product-dialog__image {
		height: 180px;
		margin: 0 -16px 16px;
		width: calc(100% + 32px);
	}

	.restaurant-product-dialog__body {
		--restaurant-product-validation-scroll-offset: 18px;
		padding: 0 16px 28px;
	}

	.restaurant-product-group {
		padding-top: 14px;
	}

	.restaurant-product-group + .restaurant-product-group {
		margin-top: 14px;
	}

	.restaurant-product-group + .restaurant-product-configuration {
		margin-top: 14px;
	}

	.restaurant-product-group__header {
		gap: 12px;
		padding-bottom: 9px;
	}

	.restaurant-product-option + .restaurant-product-option {
		margin-top: 6px;
	}

	.restaurant-product-group__error {
		margin: -2px 0 10px;
		padding: 8px 9px;
	}

	.restaurant-product-dialog__footer {
		gap: 14px;
		padding: 10px 16px max(12px, env(safe-area-inset-bottom));
	}

	.restaurant-product-dialog__done {
		flex: 0 0 auto;
		min-height: 44px;
		padding: 10px 18px;
		white-space: nowrap;
	}

	.restaurant-ratings-dialog {
		align-items: flex-end;
		padding: 0;
	}

	.restaurant-ratings-dialog__panel {
		border-radius: 16px 16px 0 0;
		max-height: calc(100dvh - 18px);
		width: 100%;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}

	.restaurant-ratings-dialog:not([hidden]) .restaurant-ratings-dialog__panel {
		animation: ratings-panel-slide-up 0.35s cubic-bezier(0.32, 0.94, 0.6, 1) forwards;
	}

	.restaurant-ratings-dialog__header {
		padding: 24px 24px 8px;
	}

	.restaurant-ratings-dialog__body {
		padding: 8px 24px calc(24px + env(safe-area-inset-bottom));
	}

	.restaurant-ratings-dialog__close {
		right: 24px;
		top: 18px;
	}

	.restaurant-ratings-dialog__recent-item {
		padding: 14px 0;
	}

	.restaurant-ratings-dialog__recent-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.restaurant-ratings-dialog__recent-badges {
		width: 100%;
		min-width: 0;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 6px;
	}

	.restaurant-info-dialog {
		align-items: flex-end;
		padding: 0;
	}

	.restaurant-info-dialog__panel {
		border-bottom: 0;
		border-left: 0;
		border-radius: 16px 16px 0 0;
		border-right: 0;
		max-height: calc(100dvh - 18px);
		width: 100%;
	}

	.restaurant-info-dialog:not([hidden]) .restaurant-info-dialog__panel {
		animation: ratings-panel-slide-up 0.35s cubic-bezier(0.32, 0.94, 0.6, 1) forwards;
	}

	.restaurant-info-dialog__header {
		padding: 24px 24px 8px;
	}

	.restaurant-info-dialog__body {
		padding: 8px 24px calc(24px + env(safe-area-inset-bottom));
	}

	.restaurant-info-dialog__close {
		right: 24px;
		top: 18px;
	}

	.restaurant-info-dialog__item {
		gap: 4px;
		grid-template-columns: minmax(0, 1fr);
		padding: 9px 0;
	}

	.restaurant-info-dialog__value {
		text-align: left;
	}

	.restaurant-info-dialog__table {
		min-width: 320px;
	}

	.restaurant-info-dialog__table th,
	.restaurant-info-dialog__table td {
		padding: 10px;
	}

	.restaurant-product-upsell__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.restaurant-page-body.restaurant-order-panel-open {
		overflow: hidden;
	}

	.restaurant-page-layout {
		grid-template-columns: minmax(0, 1fr);
		padding-top: 12px;
	}

	.restaurant-order-sidebar {
		--restaurant-order-sticky-top: 0px;
		--restaurant-order-viewport-gap: 28px;
		align-self: auto;
		border-radius: 16px 16px 0 0;
		border-width: 1px 1px 0;
		bottom: 0;
		box-shadow: 0 -16px 44px rgba(17, 17, 17, 0.18);
		left: 50%;
		max-height: calc(100vh - var(--restaurant-order-viewport-gap));
		max-height: calc(100dvh - var(--restaurant-order-viewport-gap));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 20px;
		pointer-events: none;
		position: fixed;
		top: auto;
		transform: translate(-50%, calc(100% + 24px));
		transition: transform 0.22s ease, visibility 0.22s ease;
		visibility: hidden;
		width: min(500px, 100%);
		z-index: 90;
	}

	.restaurant-page-body.restaurant-order-panel-open .restaurant-order-sidebar {
		pointer-events: auto;
		transform: translate(-50%, 0);
		visibility: visible;
	}

	.restaurant-order-close {
		display: inline-flex;
	}

	.restaurant-order-backdrop {
		background: rgba(17, 17, 17, 0.48);
		border: 0;
		bottom: 0;
		cursor: pointer;
		display: block;
		left: 0;
		opacity: 0;
		padding: 0;
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		transition: opacity 0.18s ease;
		z-index: 80;
	}

	.restaurant-order-backdrop[hidden] {
		display: none;
	}

	.restaurant-page-body.restaurant-order-panel-open .restaurant-order-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.restaurant-page-body.restaurant-order-bar-visible .restaurant-menu-content {
		padding-bottom: 88px;
	}

	.restaurant-order-bar {
		align-items: center;
		background: var(--hotmat-brand-red);
		border: 0;
		border-radius: 14px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 10px 28px rgba(17, 17, 17, 0.28);
		color: #ffffff;
		cursor: pointer;
		display: flex;
		font: inherit;
		font-size: 15px;
		font-weight: 600;
		gap: 10px;
		left: 50%;
		min-height: 52px;
		padding: 10px 16px;
		position: fixed;
		transform: translateX(-50%);
		transition: opacity 0.18s ease, visibility 0.18s ease;
		width: min(500px, calc(100% - 24px));
		z-index: 70;
	}

	.restaurant-order-bar[hidden] {
		display: none;
	}

	.restaurant-page-body.restaurant-order-panel-open .restaurant-order-bar {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}

	.restaurant-order-bar-badge {
		align-items: center;
		background: rgba(255, 255, 255, 0.24);
		border-radius: 999px;
		display: inline-flex;
		flex: none;
		font-size: 13px;
		font-weight: 700;
		height: 24px;
		justify-content: center;
		min-width: 24px;
		padding: 0 7px;
	}

	.restaurant-order-bar-label {
		flex: 1 1 auto;
		overflow: hidden;
		text-align: left;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.restaurant-order-bar-total {
		flex: none;
		font-weight: 700;
	}

	.restaurant-order-bar--pulse {
		animation: restaurant-order-bar-pulse 0.32s ease-out;
	}
}

@keyframes restaurant-order-bar-pulse {
	0% {
		transform: translateX(-50%) scale(1);
	}
	45% {
		transform: translateX(-50%) scale(1.035);
	}
	100% {
		transform: translateX(-50%) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.restaurant-page-body .restaurant-shell-site-header,
	.restaurant-menu-search,
	.restaurant-menu-tabs-wrapper,
	.restaurant-menu-skeleton-tabs {
		transition: none;
	}

	.restaurant-order-bar {
		transition: none;
	}

	.restaurant-order-bar--pulse {
		animation: none;
	}
}

@media (max-width: 640px) {
	.restaurant-hero-content {
		--restaurant-hero-mobile-gutter: clamp(14px, 4.35vw, 18px);
		background: #ffffff;
		color: #111827;
		overflow: visible;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-content,
	.restaurant-hero-content.is-loading {
		background: #ffffff;
	}

	.restaurant-hero-content::before {
		background-color: #141414;
		background-image:
			linear-gradient(rgba(12, 8, 6, 0.18), rgba(12, 8, 6, 0.12)),
			var(--restaurant-hero-cover-image, linear-gradient(135deg, #24110e 0%, #141414 100%));
		background-position: center 30%;
		background-repeat: no-repeat;
		background-size: cover, cover;
		content: "";
		display: block;
		height: 160px;
		width: 100%;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-content::before,
	.restaurant-hero-content.is-loading::before {
		animation: restaurant-hero-shimmer 1.25s ease-in-out infinite;
		background-color: #e5e7eb;
		background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
		background-position: 120% 0;
		background-size: 220% 100%;
		bottom: auto;
		position: static;
		right: auto;
		top: auto;
		width: 100%;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-content::after,
	.restaurant-hero-content.is-loading::after {
		display: none;
	}

	.restaurant-hero-inner {
		align-items: start;
		column-gap: 12px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) max-content;
		min-height: 0;
		padding: 18px var(--restaurant-hero-mobile-gutter) 10px;
	}

	.restaurant-hero-main {
		display: block;
		grid-column: 1;
		min-width: 0;
	}

	.restaurant-hero-logo {
		background: #ffffff;
		border: 0;
		border-radius: 8px 0 0 0;
		bottom: 100%;
		box-shadow: none;
		height: auto;
		left: auto;
		max-height: 64px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		right: 0;
		top: auto;
		width: 80px;
		z-index: 2;
	}

	.restaurant-hero-logo.has-image {
		background: #ffffff;
		padding: 0;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-logo,
	.restaurant-hero-logo.is-loading {
		background: linear-gradient(90deg, #e6e8ec 0%, #f5f6f8 50%, #e6e8ec 100%);
		background-size: 220% 100%;
		border: 0;
		box-shadow: none;
		height: 48px;
	}

	.restaurant-hero-logo-image {
		border-radius: 8px 0 0 0;
		height: auto;
		max-height: 64px;
		width: 80px;
	}

	.restaurant-hero-details {
		gap: 0;
		min-width: 0;
	}

	.restaurant-hero-status-row {
		gap: 8px;
		margin-bottom: 0;
		order: 3;
	}

	.restaurant-hero-status {
		background: #e6f4ea;
		border-radius: 999px;
		color: #137333;
		font-size: 11.5px;
		font-weight: 600;
		gap: 4px;
		padding: 4px 8px;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-status {
		background: linear-gradient(90deg, #e7e9ee 0%, #f5f6f8 50%, #e7e9ee 100%);
		background-size: 220% 100%;
		min-height: 20px;
		width: 62px;
	}

	.restaurant-hero-status[data-tone="pickup"] {
		background: #fff4d6;
		color: #7a4b00;
	}

	.restaurant-hero-status[data-tone="closed"] {
		background: #eef0f3;
		color: #4b5563;
	}

	.restaurant-hero-status-icon {
		background: transparent;
		border-radius: 0;
		color: inherit;
		height: 12px;
		width: 12px;
	}

	.restaurant-hero-status-icon svg {
		height: 12px;
		width: 12px;
	}

	.restaurant-hero-closing {
		color: #1f2937;
		font-size: 12.5px;
		font-weight: 500;
	}

	.restaurant-hero-closing:disabled {
		color: #1f2937;
		opacity: 1;
	}

	.restaurant-hero-closing--actionable:not(:disabled) {
		text-decoration-color: rgba(31, 41, 55, 0.38);
	}

	.restaurant-hero-closing--actionable:not(:disabled):hover {
		color: #111827;
		text-decoration-color: currentColor;
	}

	.restaurant-hero-closing:focus-visible {
		outline-color: rgba(246, 61, 65, 0.28);
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-closing {
		background: linear-gradient(90deg, #e7e9ee 0%, #f5f6f8 50%, #e7e9ee 100%);
		background-size: 220% 100%;
		height: 12px;
		width: 118px;
	}

	.restaurant-hero-title {
		color: #111827;
		font-size: 23px;
		letter-spacing: -0.3px;
		line-height: 1.2;
		margin: 0 0 6px;
		min-width: 0;
		order: 1;
		overflow-wrap: normal;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-title {
		background: linear-gradient(90deg, #e3e6eb 0%, #f5f6f8 50%, #e3e6eb 100%);
		background-size: 220% 100%;
		border-radius: 7px;
		height: 26px;
		margin: 0 0 6px;
		max-width: none;
		width: min(100%, 250px);
	}

	.restaurant-hero-meta {
		color: #4b5563;
		flex-wrap: nowrap;
		font-size: 12.5px;
		gap: 6px;
		line-height: 1.35;
		margin-bottom: 12px;
		max-width: 100%;
		min-width: 0;
		order: 2;
		overflow: hidden;
		white-space: nowrap;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-meta {
		margin-bottom: 12px;
		min-height: 19px;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-meta::before {
		background: linear-gradient(90deg, #e7e9ee 0%, #f5f6f8 50%, #e7e9ee 100%);
		background-size: 220% 100%;
		height: 13px;
		width: min(52vw, 190px);
	}

	.restaurant-hero-rating {
		color: #111827;
		flex: 0 0 auto;
	}

	.restaurant-hero-rating svg {
		height: 14px;
		width: 14px;
	}

	.restaurant-hero-rating-value {
		font-weight: 600;
	}

	.restaurant-hero-rating-count {
		color: #6b7280;
	}

	.restaurant-hero-meta > span:last-child {
		color: #4b5563;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.restaurant-hero-meta-separator {
		color: #9ca3af;
		display: inline;
		flex: 0 0 auto;
	}

	.restaurant-hero-bottom {
		display: block;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		width: auto;
	}

	.restaurant-hero-actions {
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: 0;
		border-radius: 0;
		display: flex;
		gap: 12px;
		height: auto;
		justify-content: flex-end;
		overflow: visible;
		position: static;
		width: auto;
	}

	.restaurant-hero-action {
		color: #111827;
		gap: 4px;
		height: auto;
		min-width: 40px;
		padding: 0;
	}

	.restaurant-hero-action:not([hidden]) + .restaurant-hero-action:not([hidden])::before {
		display: none;
	}

	.restaurant-hero-action:hover,
	.restaurant-hero-action:focus-visible {
		background: transparent;
	}

	.restaurant-hero-action:focus-visible {
		outline: 3px solid rgba(246, 61, 65, 0.24);
		outline-offset: 3px;
	}

	.restaurant-hero-action svg {
		background: #ffffff;
		border: 1px solid #e5e7eb;
		border-radius: 50%;
		box-sizing: content-box;
		color: #111827;
		height: 16px;
		padding: 11px;
		width: 16px;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action svg {
		background: linear-gradient(90deg, #e7e9ee 0%, #f5f6f8 50%, #e7e9ee 100%);
		background-size: 220% 100%;
		border-color: #e5e7eb;
		color: transparent;
		stroke: transparent;
	}

	.restaurant-hero-action span {
		color: #111827;
		font-size: 11px;
		font-weight: 500;
	}

	.restaurant-hero:not([data-restaurant-hero-ready="true"]) .restaurant-hero-action span {
		background: linear-gradient(90deg, #e7e9ee 0%, #f5f6f8 50%, #e7e9ee 100%);
		background-size: 220% 100%;
		height: 10px;
		margin: 0 auto;
		width: 24px;
	}

	.restaurant-hero-action:hover svg,
	.restaurant-hero-action:focus-visible svg {
		background: #f9fafb;
		border-color: #111827;
		color: #111827;
		transform: none;
	}

	.restaurant-page-layout {
		padding-top: 8px;
		padding-right: 16px;
		padding-left: 16px;
	}

	.restaurant-menu-tabs-wrapper::before,
	.restaurant-menu-tabs-wrapper::after {
		width: 36px;
	}

	.restaurant-menu-section {
		margin-top: 24px;
	}

	.restaurant-menu-category-title {
		font-size: 22px;
	}

	.restaurant-menu-grid {
		gap: 14px;
		grid-template-columns: minmax(0, 1fr);
	}

	.restaurant-menu-skeleton-tabs {
		margin-right: 0;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.restaurant-menu-skeleton-section {
		margin-top: 24px;
	}

	.restaurant-menu-skeleton-heading {
		height: 26px;
		margin-bottom: 18px;
		width: 176px;
	}

	.restaurant-menu-skeleton-grid {
		gap: 14px;
		grid-template-columns: minmax(0, 1fr);
	}

	.restaurant-menu-skeleton-card {
		gap: 12px;
		min-height: 130px;
		padding: 12px;
	}

	.restaurant-menu-skeleton-card-copy {
		min-height: 104px;
		padding-right: 44px;
	}

	.restaurant-menu-skeleton-card-title {
		height: 17px;
		width: min(76%, 220px);
	}

	.restaurant-menu-skeleton-card-description {
		height: 12px;
		width: min(92%, 260px);
	}

	.restaurant-menu-skeleton-card-description--short {
		width: min(58%, 180px);
	}

	.restaurant-menu-skeleton-card-price {
		height: 17px;
		width: 68px;
	}

	.restaurant-menu-skeleton-card-image {
		flex-basis: 104px;
		height: 104px;
		width: 104px;
	}

	.restaurant-menu-skeleton-card-add {
		bottom: 20px;
		right: 20px;
	}

	.restaurant-menu-card {
		gap: 12px;
		padding: 12px;
	}

	.restaurant-menu-add-button {
		right: 20px;
		bottom: 20px;
	}

	.restaurant-menu-card-image-wrapper {
		flex-basis: 104px;
		height: 104px;
		width: 104px;
	}

	.restaurant-menu-card-content,
	.restaurant-menu-card-info {
		min-height: 104px;
	}

	.restaurant-menu-card-title {
		font-size: 16px;
	}

	.restaurant-menu-card-description {
		font-size: 16px;
	}

	.restaurant-menu-card-price {
		font-size: 16px;
		padding-top: 6px;
	}

	.restaurant-menu-add-button {
		height: 32px;
		width: 32px;
	}

	.restaurant-menu-add-button svg {
		height: 14px;
		width: 14px;
	}

	.restaurant-order-sidebar {
		padding: 18px;
	}

	.restaurant-order-loading-items {
		gap: 16px;
		margin-bottom: 18px;
		padding-bottom: 18px;
	}

	.restaurant-order-loading-card {
		gap: 12px;
		grid-template-columns: 48px minmax(0, 1fr) 34px;
	}

	.restaurant-order-loading-image {
		height: 48px;
		width: 48px;
	}

	.restaurant-order-title {
		font-size: 21px;
	}

	.restaurant-order-loading-title {
		height: 25px;
		width: 148px;
	}

	.restaurant-order-items {
		gap: 16px;
		margin-bottom: 18px;
		padding-bottom: 18px;
	}

	.restaurant-order-item {
		gap: 12px;
		grid-template-columns: 48px minmax(0, 1fr) max-content;
	}

	.restaurant-order-item-image {
		flex-basis: 48px;
		height: 48px;
		width: 48px;
	}

	.restaurant-order-item-name {
		font-size: 14.5px;
	}

	.restaurant-order-item-description {
		font-size: 12.5px;
		margin-top: 5px;
	}

}

@media (max-width: 510px) {
	.restaurant-hero-inner {
		padding-right: var(--restaurant-hero-mobile-gutter);
		padding-left: var(--restaurant-hero-mobile-gutter);
	}

	.restaurant-page-layout {
		padding-right: 14px;
		padding-left: 14px;
	}

	.restaurant-menu-search {
		padding-top: 7px;
		padding-bottom: 9px;
	}

	.restaurant-menu-search-field {
		border-radius: 14px;
	}

	.restaurant-menu-search-icon {
		height: 19px;
		margin-left: 15px;
		width: 19px;
	}

	.restaurant-menu-search-input {
		font-size: 14px;
		padding-right: 10px;
		padding-left: 12px;
	}

	.restaurant-menu-search-clear {
		height: 34px;
		margin-right: 8px;
		width: 34px;
	}

	.restaurant-menu-tab {
		font-size: 12.5px;
		padding: 7px 12px;
	}

	.restaurant-menu-tab-indicator {
		height: 31px;
	}

	.restaurant-menu-skeleton-card {
		min-height: 122px;
	}

	.restaurant-menu-skeleton-card-copy {
		min-height: 96px;
	}

	.restaurant-menu-skeleton-card-image {
		flex-basis: 92px;
		height: 96px;
		width: 92px;
	}

	.restaurant-menu-skeleton-tabs {
		padding-bottom: 7px;
	}

	.restaurant-menu-card-image-wrapper {
		flex-basis: 92px;
		height: 96px;
		width: 92px;
	}

	.restaurant-menu-card-content,
	.restaurant-menu-card-info {
		min-height: 96px;
	}

	.restaurant-order-progress-text,
	.restaurant-order-summary-row {
		font-size: 12.5px;
	}

	.restaurant-order-sidebar {
		padding: 16px;
	}

	.restaurant-order-items {
		gap: 14px;
	}

	.restaurant-order-loading-items {
		gap: 14px;
	}

	.restaurant-order-loading-card {
		gap: 10px;
		grid-template-columns: 44px minmax(0, 1fr) 34px;
	}

	.restaurant-order-loading-image {
		border-radius: 7px;
		height: 44px;
		width: 44px;
	}

	.restaurant-order-item {
		gap: 10px;
		grid-template-columns: 44px minmax(0, 1fr) max-content;
	}

	.restaurant-order-item-image {
		border-radius: 7px;
		flex-basis: 44px;
		height: 44px;
		width: 44px;
	}

	.restaurant-order-item-name {
		font-size: 14px;
	}

	.restaurant-order-item-description {
		font-size: 12px;
		line-height: 1.28;
	}

	.restaurant-order-item-price {
		font-size: 13.5px;
		margin-top: 4px;
	}

	.restaurant-order-delete {
		height: 32px;
		width: 32px;
	}

	.restaurant-order-delete svg {
		height: 17px;
		width: 17px;
	}

}

@media (max-width: 390px) {
	.restaurant-hero-title {
		font-size: 22px;
	}

	.restaurant-hero-actions {
		gap: 10px;
	}

	.restaurant-hero-action svg {
		height: 15px;
		padding: 10px;
		width: 15px;
	}
}

@media (max-width: 860px) and (orientation: landscape) {
	.restaurant-order-sidebar {
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
	}

	.restaurant-order-ready,
	.restaurant-order-items {
		flex: 0 0 auto;
		overflow: visible;
	}
}

@media (prefers-reduced-motion: reduce) {
	.restaurant-menu-search-field,
	.restaurant-menu-search-icon,
	.restaurant-menu-search-clear {
		transition: none;
	}
}

@media (any-pointer: coarse) {
	.restaurant-menu-add-button,
	.restaurant-menu-search-clear,
	.restaurant-menu-search-toggle,
	.restaurant-product-dialog__close,
	.restaurant-ratings-dialog__close,
	.restaurant-info-dialog__close,
	.restaurant-order-close,
	.restaurant-order-delete,
	.restaurant-order-quantity-button {
		min-height: 44px;
		min-width: 44px;
	}

	.restaurant-menu-card:not(.restaurant-menu-card--has-image) .restaurant-menu-card-content {
		padding-right: 62px;
	}

	.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card-content,
	.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card:not(.restaurant-menu-card--has-image) .restaurant-menu-card-content,
	.restaurant-menu-content[data-restaurant-menu-layout="grocery"] .restaurant-menu-card--has-image .restaurant-menu-card-content {
		padding-right: 54px;
	}
}