/**
 * SingMapper Food Directory — layered on the SingMapper Maps stylesheet.
 * Same minimal editorial language: hairlines, squared corners, Mulish text,
 * Playfair for the one headline, red only as a signal.
 */

/* ---------------------------------------------------------------- the plan
   Food places keep the map's original yellow; every other unit steps back to
   a quiet neutral so the eateries read at a glance. Their outlines stay. */
.mwf .mw-canvas svg [id^="MLOC" i] > :not(.mw-shape),
.mwf .mw-canvas svg [id^="MLOC" i] > :not(.mw-shape) * {
	fill: #f1ede6 !important;
	stroke: var(--mw-stroke-color, #231f20);
	stroke-width: var(--mw-stroke, 2);
	stroke-opacity: .55;
}

/* …and their logos and names fade with them (only when the artwork links
   labels to units, otherwise the food labels would fade too). */
.mwf .mw-canvas.mw-labels-linked .mw-overlay > :not(.mw-label):not(.mw-amenity) {
	opacity: .28;
}

/* ------------------------------------------------------------ introduction */
.mwf-intro {
	max-width: 1560px;
	margin: 34px auto 0;
	padding: 0 20px;
}

.mwf-intro__head { max-width: none; }

.mwf-intro__kicker {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mw-signal);
}

.mwf-intro__title {
	margin: 0 0 12px;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 44px);
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--mw-ink);
}

.mwf-intro__lede {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mw-ink-2);
}

.mwf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 26px 0 0;
	border-top: 1px solid var(--mw-line-strong);
	border-bottom: 1px solid var(--mw-line);
}

.mwf-stats > div {
	padding: 14px 18px 14px 0;
	border-right: 1px solid var(--mw-line);
	margin-right: 18px;
}

.mwf-stats > div:last-child { border-right: 0; margin-right: 0; }
.mwf-stats__wide { grid-column: span 2; }

.mwf-stats dt {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mw-ink-2);
}

.mwf-stats dd {
	margin: 4px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
}

.mwf-stats dd.mwf-stats__text {
	font-family: var(--mw-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	padding-top: 6px;
}

.mwf-intro .mwf-floors__title {
	margin: 30px 0 10px;
	font-family: var(--mw-sans);
	line-height: 1.3;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mw-ink);
}

.mwf-floors {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0 24px;
}

.mwf-floor {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	width: 100%;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--mw-line);
	background: none;
	text-align: left;
	font: inherit;
	color: var(--mw-ink);
	cursor: pointer;
}

.mwf-floor:hover .mwf-floor__name,
.mwf-floor:focus-visible .mwf-floor__name { color: var(--mw-signal); }
.mwf-floor.is-current { box-shadow: inset 3px 0 0 var(--mw-signal); padding-left: 12px; }

.mwf-floor__name { font-weight: 700; font-size: 15px; }
.mwf-floor__n { font-size: 13px; color: var(--mw-ink-2); font-variant-numeric: tabular-nums; }
.mwf-floor__mix { grid-column: 1 / -1; font-size: 13px; color: var(--mw-ink-2); }

.mwf-intro__more { margin: 22px 0 0; font-size: 14px; }
.mwf-intro__more a { color: var(--mw-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--mw-signal); text-underline-offset: 4px; }
.mwf-intro__more a:hover { color: var(--mw-signal); }

@media (max-width: 600px) {
	.mwf-intro { margin-top: 24px; }
	.mwf-stats { grid-template-columns: 1fr 1fr; }
	.mwf-stats > div { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--mw-line); }
	.mwf-stats__wide { grid-column: 1 / -1; border-bottom: 0 !important; }
	.mwf-stats dd { font-size: 26px; }
}

/* ----------------------------------------------------------- /food/ index */
.mwf-archive .mwh-row__meta { white-space: nowrap; }

/* ------------------------------------------------------- directory rows
   A place can carry several cuisines ("Western & International · Food Courts
   & Stalls · Basement 2"), far longer than a map page's single category. The
   core row keeps name and meta side by side on one line, which would crush the
   name to a letter per line — so here the meta sits under the name and wraps. */
.mwf .mw-index__btn {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 2px;
}

.mwf .mw-index__name { flex: none; }

.mwf .mw-index__meta,
.mwf .mw-sug__meta {
	white-space: normal;
	text-align: left;
	overflow-wrap: anywhere;
	min-width: 0;
}

/* =================================================== food guide directory
   Places grouped by floor as cards: name and badges, the short description,
   cuisine tags. Replaces the core A–Z column list on food pages only. */

.mwf .mwf-jump {
	position: sticky;
	top: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px;
	padding: 10px 0;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--mw-surface);
	border-bottom: 1px solid var(--mw-line);
}
.mwf .mwf-jump::-webkit-scrollbar { display: none; }

.mwf .mwf-jump__label {
	flex: none;
	margin-right: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mw-ink-2);
}

.mwf .mwf-jump__link {
	flex: none;
	padding: 6px 11px;
	border: 1px solid var(--mw-line-strong);
	font-size: 13px;
	font-weight: 600;
	color: var(--mw-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .13s, color .13s;
}
.mwf .mwf-jump__link em { font-style: normal; font-weight: 400; color: var(--mw-ink-2); margin-left: 2px; }
.mwf .mwf-jump__link:hover { border-color: var(--mw-ink); color: var(--mw-signal); }

.mwf .mw-index.mwf-list {
	columns: auto !important;
	column-rule: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 12px;
}

/* floor header: spans the grid, Playfair name, count to the side */
.mwf .mwf-floorhead {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 26px 0 2px;
	padding: 0 0 8px;
	border-bottom: 2px solid var(--mw-ink);
	scroll-margin-top: 72px;
}
.mwf .mwf-floorhead::after { display: none; }
.mwf .mwf-floorhead[hidden] { display: none; }

.mwf .mwf-floorhead__name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mw-ink);
}
.mwf .mwf-floorhead__n {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mw-ink-2);
}

.mwf .mwf-place { border: 0; }
.mwf .mwf-place[hidden] { display: none; }

.mwf .mwf-place__btn {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 7px;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid var(--mw-line);
	background: var(--mw-surface);
	text-align: left;
}
.mwf .mwf-place__btn::after { display: none; }

.mwf .mw-index__item.is-active .mwf-place__btn,
.mwf .mw-index__item.is-active .mwf-place__btn:hover { padding-left: 16px; }

.mwf .mwf-place__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
}

.mwf .mwf-place .mw-index__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.mwf .mwf-badge {
	padding: 2px 6px 1px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
}
.mwf .mwf-badge--court { background: var(--mw-ink); color: #fff; }
.mwf .mwf-badge--halal { background: #e6f2e9; color: #1d6b3a; }

.mwf .mwf-place__desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--mw-ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mwf .mwf-place__tags { display: flex; flex-wrap: wrap; gap: 4px; }

.mwf .mwf-tag {
	padding: 2px 7px;
	border: 1px solid var(--mw-line-strong);
	font-size: 11px;
	line-height: 1.5;
	color: var(--mw-ink);
	white-space: nowrap;
}

.mwf .mwf-place__go {
	margin-top: auto;
	padding-top: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mw-signal);
	opacity: 0;
	transition: opacity .13s;
}
.mwf .mwf-place__btn:hover .mwf-place__go,
.mwf .mwf-place__btn:focus-visible .mwf-place__go,
.mwf .mw-index__item.is-active .mwf-place__go { opacity: 1; }

@media (hover: none) {
	.mwf .mwf-place__go { opacity: 1; }
}

@media (max-width: 600px) {
	.mwf .mw-index.mwf-list { gap: 10px; }
	.mwf .mwf-floorhead__name { font-size: 22px; }
}

/* long food-court names ("Teng Zhi Ji Hainanese Chicken Rice . Chen Jia Ji
   Wanton Noodle, by Malaysia Boleh!") must wrap inside the card */
.mwf .mwf-place,
.mwf .mwf-place__btn,
.mwf .mwf-place__top { min-width: 0; }
.mwf .mwf-place .mw-index__name {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
}

/* cuisine-grouped cards: the floor is now a small label on each card */
.mwf .mwf-place__floor {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mw-signal);
}
.mwf .mwf-place__tags { align-items: center; }
.mwf .mwf-place__also {
	margin-right: 2px;
	font-size: 11px;
	color: var(--mw-ink-2);
}

/* ---------------------------------------------------------------- logos
   Logos lifted from the floor-plan artwork sit on the map's own yellow, the
   colour they were drawn for, so the card echoes the unit on the plan. */
.mwf .mwf-place__btn.has-logo {
	flex-direction: row;
	align-items: stretch;
	gap: 14px;
}
.mwf .mwf-place__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1 1 auto;
	min-width: 0;
}
.mwf .mwf-place__logo {
	flex: none;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 4px;
	background: var(--mw-base, #fedc00);
	border: 1px solid rgba(35, 31, 32, .18);
}
.mwf .mwf-place__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 600px) {
	.mwf .mwf-place__btn.has-logo { gap: 12px; }
	.mwf .mwf-place__logo { width: 52px; height: 52px; padding: 3px; }
}

/* ======================================================= cuisine filters
   Food pages: each cuisine is a squared tile — icon, name, count — and the
   chosen one fills with the signal red, like the active floor. */
.mwf .mw-bar__cats {
	gap: 8px;
	padding: 12px 16px 14px;
	justify-content: center;
}

.mwf .mw-chip {
	height: auto;
	min-height: 38px;
	padding: 7px 12px 7px 10px;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .03);
	color: #e8e4e2;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.15;
	transition: background .14s, border-color .14s, color .14s;
}

.mwf .mw-chip:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .08);
}

.mwf .mw-chip.is-active,
.mwf .mw-chip.is-active:hover {
	background: var(--mw-signal);
	border-color: var(--mw-signal);
	color: #fff;
	box-shadow: none;
}

.mwf .mwf-chip__ico {
	font-size: 17px;
	line-height: 1;
	filter: saturate(1.05);
}

.mwf .mw-chip__n {
	margin-left: 2px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 700;
	opacity: 1;
	color: #bdb7b4;
	background: rgba(255, 255, 255, .08);
}

.mwf .mw-chip.is-active .mw-chip__n {
	color: #fff;
	background: rgba(0, 0, 0, .22);
}

/* phones: the menu button says what it opens, and the panel is a tidy grid */
@container (max-width: 1000px) {
	.mwf .mw-cats-toggle span { display: inline; }
	.mwf .mw-cats-toggle { gap: 8px; padding: 0 14px; width: auto; flex: 1 1 100%; justify-content: center; }
	.mwf.mw-cats-open .mw-bar__cats {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 6px;
		max-height: 70vh;
		overflow-y: auto;
	}
	.mwf.mw-cats-open .mw-chip { justify-content: flex-start; text-align: left; font-size: 13px; line-height: 1.25; }
	.mwf.mw-cats-open .mw-chip__n { margin-left: auto; }
}
@supports not (container-type: inline-size) {
	@media (max-width: 1000px) {
		.mwf .mw-cats-toggle span { display: inline; }
		.mwf .mw-cats-toggle { gap: 8px; padding: 0 14px; width: auto; flex: 1 1 100%; justify-content: center; }
		.mwf.mw-cats-open .mw-bar__cats {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			gap: 6px;
			max-height: 70vh;
			overflow-y: auto;
		}
		.mwf.mw-cats-open .mw-chip { justify-content: flex-start; text-align: left; font-size: 13px; line-height: 1.25; }
		.mwf.mw-cats-open .mw-chip__n { margin-left: auto; }
	}
}

/* logos from brands' own sites were drawn for white; white wordmarks need dark */
.mwf .mwf-place__logo.is-web { background: #fff; }
.mwf .mwf-place__logo.is-dark { background: #231f20; border-color: #231f20; }

/* food pages: a cuisine tap goes to the directory, never the pop-up name list */
.mwf .mw-catpanel { display: none !important; }

.mwf .mwf-filtered {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 0 0 4px;
	padding: 10px 14px;
	background: var(--mw-signal-soft);
	border-left: 3px solid var(--mw-signal);
	font-size: 14px;
}
.mwf .mwf-filtered[hidden] { display: none; }
.mwf .mwf-filtered__label { color: var(--mw-ink-2); }
.mwf .mwf-filtered__name { color: var(--mw-ink); }
.mwf .mwf-filtered__clear {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--mw-signal);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.mwf .mw-dir { scroll-margin-top: 8px; }
.mwf .mwf-jump__link[hidden] { display: none; }

/* logo on the right: names always start at the card's left edge */
.mwf .mwf-place__btn.has-logo { align-items: stretch; }
.mwf .mwf-place__logo { order: 2; margin-left: auto; align-self: flex-start; }
/* the card fills its grid row, so "Show on map" lines up along the bottom */
.mwf .mwf-place { display: flex; }
.mwf .mwf-place[hidden] { display: none; }
.mwf .mwf-place__btn { flex: 1 1 auto; height: auto; }

/* ================================================================ /food/ hub */
.mwf-hub__hero {
	max-width: 1240px;
	margin: 0 auto;
	padding: 56px 24px 34px;
	text-align: center;
}
.mwf-hub__kicker {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mw-signal);
}
.mwf-hub__title {
	margin: 0 0 14px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(34px, 5.4vw, 62px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -.01em;
	color: var(--mw-ink);
}
.mwf-hub__lede {
	max-width: 680px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.6;
	color: var(--mw-ink-2);
}
.mwf-hub__stats {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.mwf-hub__stats li {
	padding: 4px 22px;
	border-left: 1px solid var(--mw-line-strong);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mw-ink-2);
}
.mwf-hub__stats li:first-child { border-left: 0; }
.mwf-hub__stats b {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 30px;
	letter-spacing: 0;
	color: var(--mw-ink);
	text-transform: none;
}

.mwf-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 600px));
	justify-content: center;
	gap: 28px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 10px 24px 20px;
}

.mwf-mall__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--mw-surface);
	border: 1px solid var(--mw-line);
	color: var(--mw-ink);
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mwf-mall__link:hover,
.mwf-mall__link:focus-visible {
	border-color: var(--mw-ink);
	box-shadow: 6px 6px 0 rgba(20, 20, 20, .08);
	transform: translateY(-2px);
}

.mwf-mall__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #141414;
	border-bottom: 1px solid var(--mw-line);
}
.mwf-mall__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .4s ease;
}
.mwf-mall__link:hover .mwf-mall__media img { transform: scale(1.03); }

.mwf-mall__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 1 auto;
	padding: 22px 24px 24px;
}
.mwf-mall__area {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mw-signal);
}
.mwf-mall__name {
	margin: -4px 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 32px;
	font-weight: 900;
	line-height: 1.1;
}
.mwf-mall__meta { margin: 0; font-size: 14px; color: var(--mw-ink-2); }

.mwf-mall__cuisines {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}
.mwf-mall__cuisines li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 9px;
	border: 1px solid var(--mw-line-strong);
	font-size: 13px;
	font-weight: 600;
}
.mwf-mall__cuisines em {
	font-style: normal;
	font-weight: 700;
	font-size: 11px;
	color: var(--mw-ink-2);
}

.mwf-mall__brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
}
.mwf-mall__brand {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 3px;
	background: var(--mw-base, #fedc00);
	border: 1px solid rgba(35, 31, 32, .18);
}
.mwf-mall__brand.is-web { background: #fff; }
.mwf-mall__brand.is-dark { background: #231f20; border-color: #231f20; }
.mwf-mall__brand img { width: 100%; height: 100%; object-fit: contain; }
.mwf-mall__more {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--mw-ink-2);
	border: 1px dashed var(--mw-line-strong);
}

.mwf-mall__cta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mw-signal);
}

.mwf-hub__more {
	max-width: 1240px;
	margin: 18px auto 44px;
	padding: 0 24px;
	text-align: center;
	font-size: 15px;
	color: var(--mw-ink-2);
}
.mwf-hub__more a {
	color: var(--mw-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--mw-signal);
	text-underline-offset: 4px;
}

@media (max-width: 600px) {
	.mwf-hub__hero { padding: 36px 18px 24px; }
	.mwf-hub__lede { font-size: 15px; }
	.mwf-hub__stats li { padding: 4px 14px; }
	.mwf-hub__stats b { font-size: 24px; }
	.mwf-hub__grid { padding: 6px 14px 14px; gap: 18px; }
	.mwf-mall__body { padding: 18px 18px 20px; }
	.mwf-mall__name { font-size: 26px; }
	.mwf-mall__brand, .mwf-mall__more { width: 38px; height: 38px; min-width: 38px; }
}