/* Full menu: text version of the printed menu (menu/index.html) */
.hkm-menu {
	--hkm-yellow: #FFCC00;
	--hkm-ink: #333333;
	--hkm-muted: #54595F;
	--hkm-soft: #7A7A7A;
	--hkm-line: #70707078;
	background: #fff url("../../images/2024/11/shape-1-2.png") left bottom no-repeat;
	padding: 20px 16px 80px;
}
.hkm-menu__inner { max-width: 1140px; margin: 0 auto; }

/* Heading + category shortcuts */
.hkm-menu__head { text-align: center; margin-bottom: 32px; }
.hkm-eyebrow { display: block; margin-bottom: 6px; font-family: "Merriweather", serif; font-size: 16px; color: var(--hkm-yellow); }
.hkm-menu__title { margin: 0; font-family: "Merriweather", serif; font-size: 36px; font-weight: 400; line-height: 1.25; color: var(--hkm-muted); }
.hkm-bar { display: block; width: 60px; height: 2px; margin: 14px auto 0; background: var(--hkm-yellow); }
.hkm-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 860px; margin: 22px auto 0; padding: 0; list-style: none; }
.hkm-jump a {
	display: inline-block; padding: 7px 15px; border: 1px solid #e4e4e4; border-radius: 999px; background: #fff;
	font-family: "Roboto Slab", serif; font-size: 14px; line-height: 1.2; color: var(--hkm-muted); text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.hkm-jump a:hover, .hkm-jump a:focus-visible { background: var(--hkm-yellow); border-color: var(--hkm-yellow); color: #111; }

/* Cards flow into 3 columns on desktop, 2 on tablets, 1 on phones */
.hkm-grid { column-width: 330px; column-gap: 28px; }
.hkm-cat {
	break-inside: avoid; display: inline-block; width: 100%; box-sizing: border-box;
	margin: 0 0 28px; padding: 26px 26px 24px; background: #fff; border-radius: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0, .12); scroll-margin-top: 24px;
}
.hkm-cat__title { margin: 0 0 18px; font-family: "Merriweather", serif; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--hkm-ink); }
.hkm-cat__title::after { content: ""; display: block; width: 40px; height: 2px; margin-top: 10px; background: var(--hkm-yellow); }

/* Item rows: name ..... price */
.hkm-list { margin: 0; padding: 0; list-style: none; }
.hkm-list li, .hkm-row, .hkm-set__head {
	display: flex; align-items: flex-end; gap: 8px;
	font-family: "Roboto Slab", serif; font-size: 15.5px; line-height: 1.4; color: var(--hkm-muted);
}
.hkm-list li { margin: 0 0 11px; }
.hkm-combo li { display: block; }
.hkm-row { font-size: inherit; }
.hkm-list li:last-child { margin-bottom: 0; }
.hkm-name { flex: 0 1 auto; min-width: 0; }
.hkm-dots { flex: 1 1 16px; min-width: 16px; margin-bottom: .4em; border-bottom: 2px dashed var(--hkm-line); }
.hkm-price { flex: none; white-space: nowrap; font-weight: 600; color: var(--hkm-ink); }
.hkm-qty { color: var(--hkm-soft); font-size: .9em; }

/* Combination plates */
.hkm-combo li { margin-bottom: 14px; }
.hkm-letter {
	flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; border-radius: 50%; background: var(--hkm-yellow);
	font-size: 13px; font-weight: 700; line-height: 1; color: #111;
}
.hkm-desc { margin: 3px 0 0; padding-left: 32px; font-family: "Overpass", sans-serif; font-size: 14px; line-height: 1.45; color: var(--hkm-soft); }
.hkm-note { margin: 18px 0 0; padding: 10px 14px; border-radius: 10px; background: #FFF6CC; font-family: "Overpass", sans-serif; font-size: 14px; line-height: 1.4; color: var(--hkm-ink); }

/* Family dinners */
.hkm-set + .hkm-set { margin-top: 20px; padding-top: 18px; border-top: 1px dashed #dddddd; }
.hkm-set__head { font-size: 16.5px; font-weight: 600; color: var(--hkm-ink); }
.hkm-set__head small { font-size: .82em; font-weight: 400; color: var(--hkm-soft); }
.hkm-set ul { margin: 10px 0 0; padding: 0; list-style: none; font-family: "Overpass", sans-serif; font-size: 15px; line-height: 1.55; color: var(--hkm-muted); }
.hkm-set ul li { position: relative; padding-left: 16px; }
.hkm-set ul li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--hkm-yellow); }


@media (max-width: 767px) {
	.hkm-menu { padding: 14px 14px 56px; }
	.hkm-menu__head { margin-bottom: 24px; }
	.hkm-menu__title { font-size: 28px; }
	.hkm-jump { gap: 7px; margin-top: 22px; }
	.hkm-jump a { padding: 6px 12px; font-size: 13.5px; }
	.hkm-cat { margin-bottom: 20px; padding: 22px 18px 20px; border-radius: 16px; }
	.hkm-list li { font-size: 16px; }
}