/**
 * UKMapper Maps — Minimal Editorial styling (Option C, chosen by the user from
 * four previewed directions on 2026-09-05).
 *
 * Design intent: museum-label restraint. White surfaces, hairline rules, no
 * boxes where an underline will do, squared corners everywhere, monochrome
 * chrome set in Mulish. The map artwork itself carries the colour; the deep
 * red survives only as a functional signal (amenity highlight, fallback pins,
 * the selected row marker) — never as decoration.
 *
 * Everything is scoped under .mw so it can drop into any theme without leaking.
 * IMPORTANT: never write a rule that can match elements inside .mw-canvas svg —
 * stroke/fill inherit in SVG and will restyle the floor-plan artwork itself.
 */

.mw {
	--mw-sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Soft violet: pale lilac field, white cards, blue-violet accent.
	   Shop fills stay the artwork's own colours. */
	--mw-paper: #efeefe;
	--mw-surface: #ffffff;
	--mw-ink: #241c4a;
	--mw-ink-2: #7a759e;
	--mw-line: #e4dff5;
	--mw-line-strong: #d4cef0;
	--mw-chrome: #ffffff;
	--mw-signal: #5b46d6;
	--mw-signal-bright: #7c4dff;
	--mw-signal-deep: #3a2ea8;
	--mw-signal-soft: #efe8ff;

	/* Highlight fills and outline weight are set per map from its own settings
	   (see the renderer); these are only the fallbacks. --mw-stroke is in SVG
	   user units, matching how the setting has always been expressed. */
	--mw-base: #fedc00;
	--mw-hover: #ffe75a;
	--mw-active-fill: #d4b800;
	--mw-stroke: 2;
	--mw-stroke-color: #231f20;
	--mw-active: var(--mw-signal);
	--mw-dimmed: #ece7e4;

	--mw-hero-height: calc(100vh - 112px);
	--mw-hero-height: calc(100svh - 112px);

	color: var(--mw-ink);
	font-family: var(--mw-sans);
	font-size: 15px;
	line-height: 1.45;
	margin: 0 0 2.25rem;
	container-type: inline-size;

	/* Full-page: the app breaks out of the article column and spans the whole
	   viewport; the toolbar plus map together fill the screen height. */
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

/* In app mode every ancestor is already full-width, so the vw-breakout only
   adds a scrollbar-width horizontal overflow — undo it and pin overflow. */
body.mw-app .mw {
	width: 100%;
	left: 0;
	margin-left: 0;
	padding: 8px 16px 0;
}

body.mw-app { overflow-x: clip; background: #efeefe; color: #241c4a; }
body.mw-app #page,
body.mw-app .site { background: #efeefe; }
body.mw-app .nmp-footer { display: none !important; }

/* wrappers around the map (old posts) and the article itself carry bottom
   margins that leave a blank strip under the footer — flatten them */
body.mw-app .nmp-dmp-map-wrap,
body.mw-app article,
body.mw-app .dynamic-content-template { margin-bottom: 0 !important; }

.mw *, .mw *::before, .mw *::after { box-sizing: border-box; }

.mw button { font-family: var(--mw-sans); }

/*
 * Line style for the plugin's own UI icons (search, zoom, close…) ONLY. This
 * must never match the injected floor-plan SVG: stroke and stroke-width are
 * inherited in SVG, so a bare `.mw svg` rule here once painted a 2-unit stroke
 * around every letter and pictogram in the artwork, bolding the whole map.
 */
.mw button > svg,
.mw .mw-omni__icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ===================================================================== hero */

.mw-hero {
	position: relative;
	height: var(--mw-hero-height);
	background: #fff;
	border: 0;
	border-radius: 18px;
	box-shadow: 0 14px 36px rgba(58, 46, 168, .1);
	overflow: hidden;
}

.mw-viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
	outline: none;
}

.mw-viewport.is-panning { cursor: grabbing; }

.mw-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--mw-ink); }

.mw-canvas {
	position: absolute;
	top: 0; left: 0;
	transform-origin: 0 0;
	/* NO will-change here: pinning the layer freezes the SVG's raster at
	   scale 1, so every zoom-in shows a blurry upscale. Without it the vector
	   is re-rasterised sharp once the transform settles. */
}

.mw-canvas.is-animating { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }

.mw-canvas svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------- interactive shapes in the artwork
 *
 * The unit borders baked into the artwork are FILLED bands roughly 5 user units
 * wide — far heavier than the map was ever shown. Mapplic never displayed them:
 * measured from its rendering, it repaints every element inside a store group
 * with the base colour (erasing the band) and draws its own thin stroke at the
 * map's configured width. This reproduces exactly that. Repainting all
 * descendants is safe because shop logos live in a separate overlay layer, not
 * inside the store groups.
 */

.mw-canvas .mw-shape { cursor: pointer; }

.mw-canvas .mw-shape,
.mw-canvas .mw-shape * {
	fill: var(--mw-base, #fedc00);
	stroke: var(--mw-stroke-color, #231f20);
	stroke-width: var(--mw-stroke, 2);
	transition: fill .16s ease;
}

.mw-canvas .mw-shape:hover,
.mw-canvas .mw-shape:hover *,
.mw-canvas .mw-shape.is-hover,
.mw-canvas .mw-shape.is-hover * {
	fill: var(--mw-hover, #ffe75a);
}

.mw-canvas .mw-shape.is-active,
.mw-canvas .mw-shape.is-active * {
	/* the map's own active colour, pulled a quarter of the way toward ink so
	   the chosen slot is unmistakably darker than anything else on the plan
	   (and than category-match tonal), while dark logos stay readable */
	fill: color-mix(in srgb, var(--mw-active-fill, #d4b800) 72%, #141414);
}

/* Category/search emphasis — "Tonal", the user's pick from four previews:
   matched shops deepen to the active gold, every other shop keeps its normal
   artwork colours, and the zoom-to-fit frames the result. (Grey-out and red
   rings were both previewed and rejected.) */
/* …but never while a store is selected: the selection uses the same gold, so
   colouring the whole category would drown the chosen slot (Mapplic only ever
   highlights the active store). The category tonal returns on card close. */
.mw:not(.mw-has-sel) .mw-canvas.is-filtered .mw-shape.is-match,
.mw:not(.mw-has-sel) .mw-canvas.is-filtered .mw-shape.is-match * {
	fill: var(--mw-active-fill, #d4b800);
}

/* The logo/name layer is decoration painted over the units — and it sits
   exactly where people click, because the store's name IS the visible target.
   It must never swallow the tap: let every click fall through to the unit
   shape underneath. */
.mw-canvas .mw-overlay,
.mw-canvas .mw-overlay * { pointer-events: none; }

/* fallback pin for locations with no shape in the artwork */

.mw-pin-layer { position: absolute; inset: 0; pointer-events: none; }

.mw-pin {
	position: absolute;
	width: 14px; height: 14px;
	margin: -7px 0 0 -7px;
	padding: 0;
	background: var(--mw-signal);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	cursor: pointer;
	pointer-events: auto;
	transition: transform .16s;
}

.mw-pin:hover, .mw-pin.is-active { transform: scale(1.4); }

/* ============================================================ floating HUD */

.mw-hud { position: absolute; z-index: 5; }

/* The reset pill: bottom centre of the map, visible only after the view moved. */
.mw-reset {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px 0 14px;
	background: var(--mw-signal);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(8px);
	transition: opacity .18s, transform .18s, background .14s;
}

.mw.mw-view-moved .mw-reset {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%);
}

.mw-reset:hover { background: var(--mw-signal); }

/* ------------------------------------------------------------- toolbar
 * One solid control bar above the map. Everything lives here; the plan below
 * stays clean except for the small zoom cluster.
 */

.mw-bar {
	position: relative;
	z-index: 6;
	background: transparent;
	padding: 8px 4px 14px;
}

/* header row: way home on the left, the mall front and centre */

.mw-bar__top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding-bottom: 9px;
	border-bottom: 1px solid #e4dff5;
}

.mw-bar__home {
	justify-self: start;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	text-decoration: none;
}

/* the site wordmark: the logo's S mark, then Sing (red) Mapper (white) in a
   bold grotesque matching the logotype */
.mw-bar__brand {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--mw-sans);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff;
}

.mw-bar__brand b { font-weight: 800; color: var(--mw-signal-bright); }

.mw-mark {
	width: auto; height: 22px;
	flex: none;
	display: block;
}

.mw-logo {
	display: block;
	width: auto;
	height: 34px;
	flex: none;
}

.mwh-wm .mw-logo { height: 46px; }
.mw-bar__brand .mw-logo { height: 30px; }
.mw-footer__brand .mw-logo { height: 32px; }

.mw-bar__homehint {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #7a759e;
	transition: color .14s;
}

.mw-bar__home:hover .mw-bar__homehint { color: #3a2ea8; }

.mw-bar__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
}

.mw-bar__name {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: .01em;
	color: #241c4a;
	white-space: nowrap;
}

.mw-bar__kicker {
	margin-top: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #5b46d6;
}

/* controls row */

.mw-bar__main {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	justify-content: center;
	padding-top: 12px;
}

/* hamburger for the category list — only on small screens */

.mw-cats-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #241c4a;
	background: transparent;
	border: 1px solid #d4cef0;
	cursor: pointer;
}

.mw-cats-toggle svg {
	width: 16px; height: 16px;
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: round;
}

.mw-cats-toggle[aria-expanded="true"] { background: var(--mw-signal); color: #fff; }

/* search — a generous white field anchoring the centred controls row */

.mw-omni { position: relative; flex: 0 0 380px; }

.mw-omni__icon {
	position: absolute;
	left: 12px; top: 50%;
	width: 17px; height: 17px;
	margin-top: -8.5px;
	color: var(--mw-ink-2);
	pointer-events: none;
	z-index: 1;
}

/* `input` + two classes outranks the theme's `input[type=search]` padding rule */
.mw .mw-omni input.mw-omni__input {
	width: 100%;
	height: 46px;
	padding: 0 34px 0 38px;
	font-family: var(--mw-sans);
	font-size: 15px;
	color: #241c4a;
	background: #fff;
	border: 1px solid #d4cef0;
	border-radius: 999px;
	outline: none;
	box-shadow: 0 8px 22px rgba(58, 46, 168, .1);
	-webkit-appearance: none;
	appearance: none;
}

.mw .mw-omni input.mw-omni__input::placeholder { color: #8a84a8; }

.mw .mw-omni input.mw-omni__input::-webkit-search-cancel-button { display: none; }

.mw .mw-omni input.mw-omni__input:focus {
	border-color: #7c4dff;
	box-shadow: 0 0 0 3px rgba(91, 70, 214, .18);
}

.mw-omni__clear {
	position: absolute;
	right: 6px; top: 50%;
	display: grid; place-items: center;
	width: 24px; height: 24px;
	margin-top: -12px;
	padding: 0;
	color: var(--mw-ink-2);
	background: none;
	border: 0;
	cursor: pointer;
}

.mw-omni__clear svg { width: 12px; height: 12px; stroke-width: 2.2; }
.mw-omni__clear:hover { color: var(--mw-ink); }

/* type-ahead results, so finding a shop never needs the directory below */

.mw-omni__results {
	position: absolute;
	top: calc(100% + 8px); left: 0; right: 0;
	max-height: 316px;
	overflow-y: auto;
	background: var(--mw-surface);
	border: 1px solid var(--mw-line);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(58, 46, 168, .16);
	overscroll-behavior: contain;
}

.mw-omni__results ul { margin: 0; padding: 0; list-style: none; }

.mw-omni__results li { margin: 0; }

.mw-sug {
	display: block;
	width: 100%;
	padding: 10px 14px;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--mw-line);
	cursor: pointer;
}

.mw-omni__results li:last-child .mw-sug { border-bottom: 0; }

.mw-sug:hover, .mw-sug.is-cursor { background: #f3f0ff; }

.mw-sug__name {
	display: block;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.3;
}

.mw-sug__meta {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	color: var(--mw-ink-2);
}

.mw-sug mark { background: #efe8ff; color: inherit; padding: 0 1px; }

.mw-omni__more {
	padding: 9px 12px;
	font-size: 10px;
	color: var(--mw-ink-2);
	text-align: center;
}

.mw-omni__none { padding: 16px 14px; font-size: 13.5px; color: var(--mw-ink-2); text-align: center; }

/* category strip — its own full-width row under the controls, wrapping so
   every tab is always fully visible (a clipped scroll strip hid most of them) */

.mw-bar__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	flex: 1 1 100%;
	order: 2;
	min-width: 0;
	padding: 8px 0 0;
	margin-top: 2px;
	border-top: 0;
}

.mw-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	height: 32px;
	padding: 0 12px;
	color: #5c567e;
	background: #fff;
	border: 1px solid #e4dff5;
	border-radius: 999px;
	cursor: pointer;
	transition: color .14s, background .14s, border-color .14s;
}

.mw-chip:hover { color: #3a2ea8; border-color: #d4cef0; background: #f7f5ff; }

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

.mw-chip__n {
	font-size: 10px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	opacity: .55;
}

/* mall name — the page's visible heading in app mode */

.mw-bar__title {
	flex: 0 0 auto;
	padding-right: 6px;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .02em;
	color: #241c4a;
	white-space: nowrap;
}

/* floor switch — labelled and loud; switching levels is the one control
   people must not miss */

.mw-bar__floors {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 9px;
}

.mw-bar__floors-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #7a759e;
}

.mw-levels {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
	border: 0;
	background: none;
	overflow: visible;
}

.mw-level {
	min-width: 64px;
	height: 40px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	color: #241c4a;
	background: #fff;
	border: 1px solid #d4cef0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .14s, color .14s, border-color .14s;
}

.mw-level:hover { background: #f3f0ff; color: #241c4a; }

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

/* zoom — the one floating cluster, bottom-right of the plan */

.mw-hud--right {
	right: 14px; bottom: 14px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.mw-zoom {
	display: flex;
	flex-direction: column;
	background: var(--mw-surface);
	border: 1px solid var(--mw-line);
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(58, 46, 168, .12);
	overflow: hidden;
}

.mw-zoom .mw-ctrl:last-child { border-bottom: 0; }

.mw-ctrl {
	display: grid; place-items: center;
	width: 38px; height: 36px;
	padding: 0;
	color: var(--mw-ink-2);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--mw-line);
	cursor: pointer;
	transition: background .14s, color .14s;
}

.mw-ctrl:hover { background: #f3f0ff; color: #241c4a; }
.mw-ctrl svg { width: 16px; height: 16px; }

/* --------------------------------------------------- category drill-down */

.mw-catpanel {
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	z-index: 9;
	background: var(--mw-chrome);
	border-top: 1px solid #e4dff5;
	box-shadow: 0 18px 34px rgba(0, 0, 0, .4);
	padding: 13px 16px 16px;
}

.mw-catpanel[hidden] { display: none; }

.mw-catpanel__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e4dff5;
	margin-bottom: 10px;
}

.mw-catpanel__title {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
	color: #241c4a;
}

.mw-catpanel__count {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #7a759e;
}

.mw-catpanel__close {
	margin-left: auto;
	padding: 2px 6px;
	background: none;
	border: 0;
	font-size: 14px;
	color: #7a759e;
	cursor: pointer;
}

.mw-catpanel__close:hover { color: #241c4a; }

.mw-catpanel__list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 4;
	column-gap: 30px;
	max-height: 330px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mw-catpanel__list li { break-inside: avoid; margin: 0; }

.mw-catpanel__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 7px 8px;
	background: none;
	border: 0;
	border-bottom: 1px solid #e4dff5;
	font-size: 13.5px;
	font-weight: 600;
	text-align: left;
	color: #241c4a;
	cursor: pointer;
	transition: background .12s, color .12s;
}

.mw-catpanel__item:hover { background: #f3f0ff; color: #241c4a; }

.mw-catpanel__item em {
	font-style: normal;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #7a759e;
	white-space: nowrap;
}

/* ====================================================== tooltip + card */

.mw-tip {
	position: absolute;
	z-index: 6;
	padding: 5px 10px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	color: #fff;
	background: #3a2ea8;
	border-radius: 8px;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 11px));
	opacity: 0;
	transition: opacity .12s;
}

.mw-tip.is-visible { opacity: 1; }

.mw-tip::after {
	content: "";
	position: absolute;
	left: 50%; top: 100%;
	border: 5px solid transparent;
	border-top-color: #3a2ea8;
	transform: translateX(-50%);
}



/**
 * The store card is positioned over the unit you tapped and tracks it while
 * you pan or zoom, so the name and description stay tied to the shape.
 * Shadow-only: no frame, squared corners.
 */
.mw-card {
	position: absolute;
	z-index: 7;
	width: 280px;
	padding: 16px 18px 15px;
	background: var(--mw-surface);
	border: 0;
	border-radius: 14px;
	box-shadow: 0 12px 34px rgba(58, 46, 168, .18);
	transform: translate(-50%, calc(-100% - 13px));
	animation: mw-pop .18s ease-out;
}

.mw-card[hidden] { display: none; }

/* flipped below the anchor point when there is no room above */
.mw-card.is-below { transform: translate(-50%, 13px); }

@keyframes mw-pop {
	from { opacity: 0; }
	to { opacity: 1; }
}

.mw-card__arrow {
	position: absolute;
	/* Script slides this so the arrow keeps pointing at the slot's middle even
	   when the card has been nudged away from an edge. */
	left: var(--mw-arrow, 50%);
	width: 12px; height: 12px;
	background: var(--mw-surface);
	border: 0;
	transform: translateX(-50%) rotate(45deg);
}

.mw-card:not(.is-below) .mw-card__arrow { bottom: -6px; }

.mw-card.is-below .mw-card__arrow {
	top: -6px;
	box-shadow: -4px -4px 10px rgba(28, 27, 26, .06);
}

.mw-card__close {
	position: absolute;
	top: 8px; right: 8px;
	display: grid; place-items: center;
	width: 26px; height: 26px;
	padding: 0;
	color: var(--mw-ink-2);
	background: none;
	border: 0;
	cursor: pointer;
}

.mw-card__close:hover { color: var(--mw-ink); }
.mw-card__close svg { width: 12px; height: 12px; stroke-width: 2.2; }

.mw-card__meta {
	margin: 0 0 4px;
	padding-right: 24px;
	font-size: 10px;
	letter-spacing: .12em;
	color: var(--mw-ink-2);
}

.mw-card__meta:empty { display: none; }

.mw-card__name {
	margin: 0;
	padding-right: 24px;
	font-family: var(--mw-sans);
	font-size: 19px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--mw-ink);
}

.mw-card__desc {
	margin: 7px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mw-ink-2);
}

.mw-card__desc:empty { display: none; }

/* (card actions removed — the card is name, category and description only) */

/* loading veil */

.mw-loading {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	background: var(--mw-paper);
	transition: opacity .3s;
}

.mw-loading[hidden] { display: none; }
.mw-loading.is-hiding { opacity: 0; pointer-events: none; }

.mw-loading__spinner {
	width: 24px; height: 24px;
	border: 2px solid var(--mw-line);
	border-top-color: var(--mw-signal);
	border-radius: 50%;
	animation: mw-spin .7s linear infinite;
}

.mw-loading__text { color: var(--mw-ink-2); }

@keyframes mw-spin { to { transform: rotate(360deg); } }

/* scroll hint */

.mw-hint {
	position: absolute;
	inset: 0;
	z-index: 9;
	display: grid;
	place-content: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
	background: rgba(28, 27, 26, .55);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}

.mw-hint.is-visible { opacity: 1; }

/* ================================================================ directory */

/* the directory returns to a readable measure inside the full-bleed app */
.mw-dir {
	margin: 22px auto 0;
	max-width: 1560px;
	padding: 8px 22px 22px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(58, 46, 168, .08);
}

.mw-dir__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 16px 0 14px;
	border-top: 0;
	margin-bottom: 2px;
}

.mw-dir__title {
	margin: 0;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--mw-ink);
}

.mw-dir__count {
	margin: 0 0 0 auto;
	font-size: 10.5px;
	color: var(--mw-ink-2);
	font-variant-numeric: tabular-nums;
}

.mw-index {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 4;
	column-gap: 48px;
	column-rule: 1px solid var(--mw-line);
}

.mw-index__letter,
.mw-index__item {
	break-inside: avoid;
	margin: 0;
}

.mw-index__letter {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 6px;
	font-size: 11px;
	color: #fff;
}

.mw-index__letter::before {
	content: "";
	display: none;
}

/* the letter itself sits in a small ink block, the rule runs on from it */
.mw-index__letter {
	color: var(--mw-ink);
}

.mw-index__letter::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--mw-line);
}

.mw-index__letter[hidden],
.mw-index__item[hidden] { display: none; }

.mw-index__item { border-bottom: 1px solid #e4dff5; }

.mw-index__btn {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 9px 26px 9px 8px;
	margin: 0;
	text-align: left;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background .13s, box-shadow .13s;
}

/* an arrow slides in on hover so the row clearly reads as "go to the map" */
.mw-index__btn::after {
	content: "\2192";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translate(-4px, -50%);
	font-size: 14px;
	color: var(--mw-signal);
	opacity: 0;
	transition: opacity .13s, transform .13s;
}

.mw-index__btn:hover,
.mw-index__item.is-hover .mw-index__btn {
	background: #f4f1ff;
	box-shadow: inset 0 0 0 1px var(--mw-signal), 3px 3px 0 rgba(79, 70, 229, .25);
}

.mw-index__btn:hover::after,
.mw-index__item.is-hover .mw-index__btn::after {
	opacity: 1;
	transform: translate(0, -50%);
}

.mw-index__btn:hover .mw-index__name,
.mw-index__item.is-hover .mw-index__name { color: var(--mw-signal); }

/* the clicked row echoes the map's gold highlight, not a white flash */
.mw-index__item.is-active .mw-index__btn,
.mw-index__item.is-active .mw-index__btn:hover {
	background: color-mix(in srgb, var(--mw-active-fill, #d4b800) 28%, var(--mw-surface));
	box-shadow: inset 3px 0 0 color-mix(in srgb, var(--mw-active-fill, #d4b800) 72%, #141414);
	padding-left: 12px;
}

.mw-index__item.is-active .mw-index__name {
	color: var(--mw-ink);
	font-weight: 700;
}

.mw-index__item.is-active .mw-index__btn::after {
	opacity: 1;
	transform: translate(0, -50%);
	color: color-mix(in srgb, var(--mw-active-fill, #d4b800) 72%, #141414);
}

.mw-index__name {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	transition: color .13s;
}

.mw-index__name mark { background: #efe8ff; color: inherit; padding: 0 1px; }

.mw-index__meta {
	display: block;
	flex: 0 0 auto;
	font-size: 9.5px;
	white-space: nowrap;
	color: #a5a19a;
}

.mw-dir__empty { margin: 22px 0; font-size: 14px; color: var(--mw-ink-2); }

/* ================================================================= footer */

.mw-footer {
	margin-top: 44px;
	background: var(--mw-chrome);
	color: #7a759e;
}

.mw-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
	max-width: 1560px;
	margin: 0 auto;
	padding: 34px 20px 26px;
}

.mw-footer__brand {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--mw-sans);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff;
	text-decoration: none;
}

.mw-footer__brand b { font-weight: 800; color: var(--mw-signal-bright); }

.mw-footer__brand .mw-mark { height: 26px; }

.mw-footer__tagline {
	margin: 8px 0 0;
	max-width: 300px;
	font-size: 12.5px;
	line-height: 1.6;
}

.mw-footer__nav {
	display: flex;
	gap: 22px;
	padding-top: 8px;
}

.mw-footer__nav a {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #5b46d6;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .14s, border-color .14s;
}

.mw-footer__nav a:hover { color: #3a2ea8; border-bottom-color: var(--mw-signal); }

.mw-footer__legal {
	max-width: 1560px;
	margin: 0 auto;
	padding: 14px 20px 18px;
	border-top: 1px solid #e4dff5;
	font-size: 11px;
	letter-spacing: .04em;
	color: #7a759e;
}

.mw-map-error {
	padding: 14px 16px;
	font-size: 14px;
	color: #7a2b2b;
	background: #fbf1f1;
	border: 1px solid #dfc3c3;
	border-radius: 0;
}

/* ================================================================ app mode
 *
 * A post that carries a map renders as a dedicated app screen (body.mw-app is
 * set by the plugin). Site chrome and the article body are hidden — the page
 * is the mall name, the controls, the plan, and the directory below. The
 * article markup stays in the DOM untouched.
 */

body.mw-app .site-header,
body.mw-app #masthead,
body.mw-app #top-bar,
body.mw-app #mobile-header,
body.mw-app .site-footer,
body.mw-app #page > footer,
body.mw-app .entry-header,
body.mw-app footer.entry-meta,
body.mw-app .comments-area,
body.mw-app .post-navigation,
body.mw-app nav.post-navigation,
body.mw-app .generate-back-to-top { display: none !important; }

/* Inside the article, the ONLY visible thing is the map: hide any element at
   ANY depth that is not the map, not inside it, and not an ancestor of it.
   (Old posts bury the map inside wrappers alongside badges, stats, bookmark
   blocks and related-mall sections — level-by-level rules kept missing one.) */
body.mw-app :is(.entry-content, .dynamic-entry-content) *:not(.mw):not(.mw *):not(:has(.mw)) {
	display: none;
}

/* GP template headline + hero blocks outside the content container */
body.mw-app .inside-article > *:not(.entry-content):not(.dynamic-entry-content) { display: none !important; }

/* the cross-mall-search strip is its own navigation; not part of the app */
body.mw-app .cms-wrap,
body.mw-app .nmp-dmp-layout,
body.mw-app .nmp-dmp-badges-above { display: none !important; }

/* back to top — script-injected, fades in once the directory is in view */
.mw-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: #fff;
	background: #3a2ea8;
	border: 0;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .18s, transform .18s;
}

.mw-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.mw-top:hover { background: var(--mw-signal); }

.mw-top svg {
	width: 18px; height: 18px;
	fill: none; stroke: currentColor; stroke-width: 2.2;
	stroke-linecap: round; stroke-linejoin: round;
}

/* sidebars have no place on an app screen */
body.mw-app #right-sidebar,
body.mw-app #left-sidebar,
body.mw-app .widget-area,
body.mw-app .sidebar { display: none !important; }

body.mw-app #page,
body.mw-app .site,
body.mw-app .grid-container,
body.mw-app .container,
body.mw-app .site-content,
body.mw-app .content-area,
body.mw-app .site-main,
body.mw-app .entry-content,
body.mw-app .separate-containers .inside-article,
body.mw-app .inside-article {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	border: 0 !important;
}

/* bar + map fill the first screen exactly (the script sizes the hero to the
   viewport minus the measured bar height); the directory scrolls below */
body.mw-app .mw { margin-bottom: 0; }
body.mw-app .mw-hero { min-height: 420px; }

/* ============================================================== responsive */

@container (max-width: 1000px) { .mw-index { columns: 3; } .mw-catpanel__list { columns: 3; } }
@container (max-width: 720px)  { .mw-index { columns: 2; } .mw-catpanel__list { columns: 2; } }
@container (max-width: 560px)  { .mw-index { columns: 1; } .mw-catpanel__list { columns: 1; } }

@container (max-width: 720px) {
	.mw-bar__top { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	/* the brand gets its own darker band, fully separated from the mall name */
	.mw-bar__home {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #efeefe;
		margin: -10px -16px 9px;
		padding: 8px 16px 7px;
		border-bottom: 1px solid #e4dff5;
	}
	.mw-bar__brand { font-size: 15px; }
	.mw-bar__heading { align-self: center; padding: 2px 0 1px; }
	.mw-bar__name { font-size: 18px; white-space: normal; text-align: center; line-height: 1.2; }
	.mw-bar__kicker { letter-spacing: .14em; }

	.mw-omni { flex: 1 1 auto; min-width: 0; }

	/* categories collapse behind the hamburger */
	.mw-cats-toggle { display: inline-flex; }
	.mw-cats-toggle span { display: none; }
	.mw-bar__cats { display: none; }
	.mw.mw-cats-open .mw-bar__cats {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		position: absolute;
		left: 0; right: 0;
		top: 100%;
		z-index: 8;
		margin: 0;
		padding: 12px 14px 14px;
		background: var(--mw-chrome);
		border-top: 1px solid #e4dff5;
		box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
	}
}

@container (max-width: 620px) {
	.mw { --mw-hero-height: 64vh; }
	.mw-card { width: min(272px, calc(100vw - 40px)); }
}

@supports not (container-type: inline-size) {
	@media (max-width: 1000px) { .mw-index { columns: 3; } }
	@media (max-width: 720px)  { .mw-index { columns: 2; } }
	@media (max-width: 560px)  { .mw-index { columns: 1; } }
	@media (max-width: 720px) {
	.mw-bar__top { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
		/* the brand gets its own darker band, fully separated from the mall name */
		.mw-bar__home {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			background: #efeefe;
			margin: -10px -16px 9px;
			padding: 8px 16px 7px;
			border-bottom: 1px solid #e4dff5;
		}
		.mw-bar__brand { font-size: 15px; }
		.mw-bar__heading { align-self: center; padding: 2px 0 1px; }
		.mw-bar__name { font-size: 18px; white-space: normal; text-align: center; line-height: 1.2; }
		.mw-omni { flex: 1 1 auto; min-width: 0; }
		.mw-cats-toggle { display: inline-flex; }
		.mw-cats-toggle span { display: none; }
		.mw-bar__cats { display: none; }
		.mw.mw-cats-open .mw-bar__cats {
			display: flex; flex-wrap: wrap; gap: 4px;
			position: absolute; left: 0; right: 0; top: 100%; z-index: 8;
			margin: 0; padding: 12px 14px 14px;
			background: var(--mw-chrome);
			border-top: 1px solid #e4dff5;
			box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
		}
	}
	@media (max-width: 620px) {
		.mw { --mw-hero-height: 64vh; }
		.mw-card { width: min(272px, calc(100vw - 40px)); }
	}
}

@media (max-width: 560px) { .mw-index { columns: 1 !important; } .mw-catpanel__list { columns: 1 !important; } }

.mw-hero:fullscreen, .mw-hero:-webkit-full-screen {
	height: 100%; width: 100%;
	border-radius: 0; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mw-canvas.is-animating { transition: none; }
	.mw-card { animation: none; }
	.mw-loading__spinner { animation-duration: 2s; }
}

/* the all-floors overview image above the footer */

.mw-overview {
	max-width: 1560px;
	margin: 18px auto 0;
	padding: 28px 22px 32px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(58, 46, 168, .08);
}

.mw-overview__title {
	margin: 0 0 14px;
	font-family: var(--mw-sans);
	font-size: 24px;
	font-weight: 700;
	color: var(--mw-ink);
}

.mw-overview__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--mw-line-strong);
	border-radius: 6px;
}

/* ======================================================== homepage hub */

.mw-home { background: var(--mw-paper); }

.mwh-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 48px 6px;
	background: transparent;
	border-bottom: 0;
}

.mwh-wm {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--mw-sans);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--mw-ink);
	text-decoration: none;
}

.mwh-wm b { color: var(--mw-signal); }

.mwh-wm .mw-mark { height: 34px; }

.mwh-top__nav {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mw-ink-2);
}

.mwh-band {
	background: transparent;
	padding: 28px 24px 8px;
	text-align: center;
	border-bottom: 0;
}

.mwh-band h1 {
	margin: 0 0 18px;
	font-family: var(--mw-sans);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: none;
	color: #3a2ea8;
}

.mwh-band h1 i { font-weight: 800; font-style: normal; color: #3a2ea8; }

.mwh-find {
	position: relative;
	display: flex;
	align-items: stretch;
	max-width: 560px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #d4cef0;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(58, 46, 168, .16);
	text-align: left;
}

.mwh-find svg {
	width: 20px; height: 20px;
	fill: none; stroke: var(--mw-ink-2); stroke-width: 2;
	align-self: center;
	margin-left: 16px;
	flex: none;
}

.mw .mwh-find input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
	padding: 15px 12px;
	font: inherit;
	font-size: 15.5px;
	color: var(--mw-ink);
}

.mw .mwh-find input::placeholder { color: #8a84a8; }

.mw button.mwh-find__go {
	border: 0;
	border-radius: 999px;
	margin: 5px;
	background: linear-gradient(90deg, #4f46e5, #7c4dff);
	color: #fff;
	padding: 0 22px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}

.mw button.mwh-find__go:hover { filter: brightness(1.08); }

.mwh-find__list {
	position: absolute;
	left: 0; right: 0; top: 100%;
	z-index: 9;
	margin: 0; padding: 0;
	list-style: none;
	background: var(--mw-surface);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

.mwh-find__list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 11px 14px;
	color: var(--mw-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--mw-line);
}

.mwh-find__list a:hover { background: #f3f0ff; }

.mwh-find__list .n { font-family: var(--mw-sans); font-size: 16px; }

.mwh-find__list .s { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mw-ink-2); }

.mwh-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 1220px;
	margin: 28px auto 14px;
	padding: 0 48px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--mw-signal);
}

.mwh-rule span { display: none; }

.mwh-pop {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 48px;
}

.mwh-card {
	display: flex;
	flex-direction: column;
	border: 0;
	border-radius: 14px;
	background: #fff;
	color: var(--mw-ink);
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(58, 46, 168, .08);
	transition: box-shadow .14s, transform .14s;
}

.mwh-card:hover { box-shadow: 0 14px 28px rgba(58, 46, 168, .16); transform: translateY(-2px); }

.mwh-card__img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	background-color: #fff;
	border-bottom: 1px solid var(--mw-line);
}

.mwh-card__name {
	padding: 12px 14px 2px;
	font-family: var(--mw-sans);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.25;
}

.mwh-card__meta { padding: 0 14px 12px; margin-top: auto; font-size: 12px; color: var(--mw-ink-2); }

.mwh-latest { max-width: 1220px; margin: 0 auto; padding: 0 48px; }

.mwh-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 10px 0;
	color: var(--mw-ink);
	text-decoration: none;
	border-bottom: 1px solid #e4dff5;
}

.mwh-row__date {
	min-width: 46px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a84a8;
}

.mwh-row__name { font-family: var(--mw-sans); font-size: 20px; }

.mwh-row:hover .mwh-row__name { color: var(--mw-signal); }

.mwh-row__lead { flex: 1; border-bottom: 1px dotted var(--mw-line-strong); transform: translateY(-4px); }

.mwh-row__meta { font-size: 13px; color: var(--mw-ink-2); font-variant-numeric: tabular-nums; }

.mwh-all {
	display: inline-block;
	margin: 20px 48px 50px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--mw-signal);
	color: var(--mw-signal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
}

.mw-home .mw-footer { margin-top: 10px; }

@media (max-width: 860px) {
	.mwh-top { padding: 14px 22px; }
	.mwh-top__nav { display: none; }
	.mwh-band { padding: 24px 16px 28px; }
	.mwh-rule, .mwh-pop, .mwh-latest { padding-left: 22px; padding-right: 22px; }
	.mwh-pop { grid-template-columns: 1fr 1fr; }
	.mwh-all { margin-left: 22px; }
	.mwh-row__meta { display: none; }
}


/* ------------------------------------------------- state archive pages */

/* The theme's GenerateBlocks archive hero prints its own big title above the
   app chrome on category pages; the app renders its own heading instead. */
body.mw-app h1.gb-text,
body.mw-app .gb-element-a2567e39 { display: none !important; }


.mws-kicker {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #5b46d6;
}

.mw-state .mwh-band h1 { margin-bottom: 8px; }

.mws-sub { margin: 0; color: #5b46d6; font-size: 14px; }

.mws-back { color: var(--mw-ink-2); text-decoration: none; }

.mws-back:hover { color: var(--mw-signal); }

.mws-list { padding-top: 26px; padding-bottom: 30px; min-height: 30vh; }

.mws-empty { color: var(--mw-ink-2); }


.mws-state {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 30px 0 4px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.mws-state a { color: var(--mw-signal); text-decoration: none; }

.mws-state a:hover { text-decoration: underline; }

.mws-state em { font-style: normal; font-size: 11px; color: var(--mw-ink-2); }

.mws-state span { flex: 1; height: 1px; background: var(--mw-line-strong); }


/* ---------------------------------------------------- app-chrome pages */

.mws-prose {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 24px 30px;
	font-family: var(--mw-sans);
	font-size: 16px;
	line-height: 1.7;
	color: var(--mw-ink);
	flex: 1;
}

.mws-prose h2, .mws-prose h3 {
	font-family: var(--mw-sans);
	color: var(--mw-ink);
	line-height: 1.25;
	margin: 1.6em 0 .5em;
}

.mws-prose h2 { font-size: 26px; }
.mws-prose h3 { font-size: 20px; }

.mws-prose a { color: var(--mw-signal); }

.mws-prose img { max-width: 100%; height: auto; }

.mws-prose ul, .mws-prose ol { padding-left: 1.4em; }

.mws-prose input[type="text"],
.mws-prose input[type="email"],
.mws-prose input[type="tel"],
.mws-prose textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mw-line-strong);
	background: #ffffff;
	font: inherit;
	font-size: 15px;
	color: var(--mw-ink);
}

.mws-prose input[type="submit"], .mws-prose button {
	border: 2px solid var(--mw-signal);
	background: var(--mw-signal);
	color: #fff;
	padding: 12px 28px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}

.mws-prose input[type="submit"]:hover, .mws-prose button:hover { background: var(--mw-signal-bright); border-color: var(--mw-signal-bright); }

.mw-page .mwh-band h1 { margin-bottom: 0; }

/* ------------------------------------------------ floor switcher, phones
 * Seven floors (NEX) overflowed the bar: the strip was wider than the screen,
 * centred, and spilled off both edges. On narrow screens the search field
 * and the category hamburger share the first row, and the floors take a full
 * row of their own as WRAPPED CHIPS with full names (the user's pick from
 * three previews on 2026-09-08). The footer nav wraps too. */
@container (max-width: 720px) {
	.mw-omni { order: 0; flex: 1 1 auto; min-width: 0; }
	.mw-cats-toggle { order: 1; }
	.mw-bar__floors {
		order: 2;
		flex: 1 1 100%;
		min-width: 0;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 10px;
	}
	.mw-bar__floors-label { flex: 1 1 100%; font-size: 10px; letter-spacing: .18em; }
	.mw-levels {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		flex: 1 1 100%;
		border: 0;
		background: none;
		overflow: visible;
	}
	.mw-level {
		min-width: 0;
		height: 34px;
		padding: 0 12px;
		margin: 0;
		font-size: 13px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		color: #241c4a;
		background: none;
		border: 1px solid #d4cef0;
		border-radius: 17px;
	}
	.mw-level:hover { background: #f3f0ff; }
	.mw-level.is-active { background: var(--mw-signal); border-color: var(--mw-signal); color: #fff; box-shadow: none; }
	.mw-footer__nav { flex-wrap: wrap; row-gap: 8px; }
}

@supports not (container-type: inline-size) {
	/* ------------------------------------------------ floor switcher, phones
	 * Seven floors (NEX) overflowed the bar: the strip was wider than the screen,
	 * centred, and spilled off both edges. On narrow screens the search field
	 * and the category hamburger share the first row, and the floors take a full
	 * row of their own as WRAPPED CHIPS with full names (the user's pick from
	 * three previews on 2026-09-08). The footer nav wraps too. */
	@media (max-width: 720px) {
		.mw-omni { order: 0; flex: 1 1 auto; min-width: 0; }
		.mw-cats-toggle { order: 1; }
		.mw-bar__floors {
			order: 2;
			flex: 1 1 100%;
			min-width: 0;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px 10px;
		}
		.mw-bar__floors-label { flex: 1 1 100%; font-size: 10px; letter-spacing: .18em; }
		.mw-levels {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			flex: 1 1 100%;
			border: 0;
			background: none;
			overflow: visible;
		}
		.mw-level {
			min-width: 0;
			height: 34px;
			padding: 0 12px;
			margin: 0;
			font-size: 13px;
			font-weight: 600;
			line-height: 1;
			white-space: nowrap;
			color: #241c4a;
			background: none;
			border: 1px solid #d4cef0;
			border-radius: 17px;
		}
		.mw-level:hover { background: #f3f0ff; }
		.mw-level.is-active { background: var(--mw-signal); border-color: var(--mw-signal); color: #fff; box-shadow: none; }
		.mw-footer__nav { flex-wrap: wrap; row-gap: 8px; }
	}
	
}

/* -------------------------------------------- homepage: malls + campuses */

.mwh-lede { max-width: 620px; margin: -6px auto 18px; font-size: 16px; line-height: 1.5; color: var(--mw-ink-2); }

.mwh-kinds { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.mwh-kinds a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--mw-line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--mw-signal-deep);
	font: 700 13px/1 var(--mw-sans);
	text-decoration: none;
}
.mwh-kinds a:hover { border-color: var(--mw-signal); color: var(--mw-signal); }
.mwh-kinds em { font-style: normal; padding: 3px 8px; border-radius: 999px; background: var(--mw-signal-soft); color: var(--mw-signal); font-size: 11px; }

/* campus cards show a 3D render, which should fill the frame */
.mwh-card--campus .mwh-card__img { object-fit: cover; background: #e9e7f5; }

.mwh-pop + .mwh-all { margin-top: 18px; margin-bottom: 30px; }

@media (max-width: 860px) {
	.mwh-lede { font-size: 14px; margin-bottom: 14px; }
}

/* ====================================================================
 * Homepage (redesign 2026-10-30). Everything is scoped to .mh so the
 * shared .mw-home / .mwh-* chrome used by other pages is unchanged.
 * ==================================================================== */

.mh { --mh-max: 1240px; --mh-pad: 48px; overflow-x: clip; }

/* top bar */
.mh .mh-top { max-width: var(--mh-max); margin: 0 auto; padding: 18px var(--mh-pad) 0; box-sizing: border-box; width: 100%; }
.mh-top__nav { display: flex; gap: 26px; }
.mh-top__nav a { color: var(--mw-ink); font: 700 13px/1 var(--mw-sans); letter-spacing: .04em; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.mh-top__nav a:hover { color: var(--mw-signal); border-bottom-color: var(--mw-signal); }

/* hero */
.mh-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: 40px;
	max-width: var(--mh-max);
	margin: 0 auto;
	padding: 46px var(--mh-pad) 56px;
	box-sizing: border-box;
	width: 100%;
}
.mh-hero::before {
	/* faint map grid behind the hero */
	content: "";
	position: absolute;
	inset: -40px -200px 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 60% 70% at 75% 45%, rgba(124, 77, 255, .16), transparent 70%),
		linear-gradient(rgba(91, 70, 214, .07) 1px, transparent 1px) 0 0 / 44px 44px,
		linear-gradient(90deg, rgba(91, 70, 214, .07) 1px, transparent 1px) 0 0 / 44px 44px;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
	mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.mh-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 6px 14px 6px 10px;
	border: 1px solid var(--mw-line-strong);
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	color: var(--mw-signal-deep);
	font: 800 11px/1 var(--mw-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.mh-kicker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mw-base, #fedc00); box-shadow: 0 0 0 3px rgba(254, 220, 0, .3); }

.mh-title {
	margin: 0 0 16px;
	font: 800 clamp(40px, 5.2vw, 68px)/1.02 var(--mw-sans);
	letter-spacing: -.035em;
	color: var(--mw-ink);
}
.mh-title span {
	display: block;
	background: linear-gradient(90deg, #4f46e5, #7c4dff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.mh-lede { margin: 0 0 26px; max-width: 520px; font-size: 18px; line-height: 1.55; color: var(--mw-ink-2); }

/* search: the dropdown hangs below the pill, so the pill must not clip it */
.mh .mh-find { max-width: 560px; margin: 0; overflow: visible; border-radius: 999px; box-shadow: 0 14px 34px rgba(58, 46, 168, .18); }
.mh .mh-find input { border-radius: 999px 0 0 999px; height: 58px; font-size: 16px; }
.mh .mh-find .mwh-find__list {
	top: calc(100% + 8px);
	overflow: hidden;
	border: 1px solid var(--mw-line);
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(36, 28, 74, .18);
}
.mh .mh-find .mwh-find__list li:last-child a { border-bottom: 0; }

.mh-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--mw-ink-2); font-size: 14px; }
.mh-stats b { display: block; color: var(--mw-ink); font: 800 26px/1.1 var(--mw-sans); letter-spacing: -.02em; }

/* hero artwork: a floor plan and a 3D campus, stacked like printed maps */
.mh-hero__art { position: relative; height: 420px; }
.mh-art {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--mw-line);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(36, 28, 74, .20);
}
.mh-art img { display: block; width: 100%; height: 100%; }
.mh-art figcaption {
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(36, 28, 74, .86);
	color: #fff;
	font: 700 11px/1 var(--mw-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.mh-art--plan { top: 0; left: 0; width: 64%; height: 76%; transform: rotate(-4deg); }
.mh-art--plan img { object-fit: contain; padding: 18px; box-sizing: border-box; background: #fbfaff; }
.mh-art--model { right: 0; bottom: 0; width: 66%; height: 62%; transform: rotate(3deg); border: 6px solid #fff; }
.mh-art--model img { object-fit: cover; }
.mh-art__pin {
	position: absolute;
	left: 56%;
	top: 30%;
	width: 26px;
	height: 26px;
	border-radius: 50% 50% 50% 0;
	background: var(--mw-signal);
	transform: rotate(-45deg);
	box-shadow: 0 6px 14px rgba(91, 70, 214, .45);
}
.mh-art__pin::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }

/* sections */
.mh-sec { max-width: var(--mh-max); margin: 0 auto; padding: 18px var(--mh-pad) 30px; box-sizing: border-box; width: 100%; }
.mh-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.mh-h2 { margin: 0; font: 800 28px/1.15 var(--mw-sans); letter-spacing: -.02em; color: var(--mw-ink); }
.mh-more, .mh-type__go { display: inline-flex; align-items: center; gap: 6px; color: var(--mw-signal); font: 700 14px/1 var(--mw-sans); text-decoration: none; white-space: nowrap; }
.mh-more svg, .mh-type__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.mh-more:hover svg, .mh-type:hover .mh-type__go svg { transform: translateX(3px); }

/* map types */
.mh-types { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 18px; }
.mh-type {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mw-line);
	border-radius: 18px;
	background: #fff;
	color: var(--mw-ink);
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(58, 46, 168, .07);
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mh-type:hover { transform: translateY(-3px); border-color: var(--mw-line-strong); box-shadow: 0 18px 40px rgba(58, 46, 168, .14); }
.mh-type__img { display: block; height: 170px; background: #f6f4ff; }
.mh-type__img img { display: block; width: 100%; height: 100%; }
.mh-type--plan .mh-type__img img { object-fit: contain; padding: 16px; box-sizing: border-box; }
.mh-type--model .mh-type__img img { object-fit: cover; }
.mh-type__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 20px; }
.mh-type__count { color: var(--mw-signal); font: 800 11px/1 var(--mw-sans); letter-spacing: .14em; text-transform: uppercase; }
.mh-type__name { font: 800 22px/1.2 var(--mw-sans); letter-spacing: -.01em; }
.mh-type__desc { flex: 1; color: var(--mw-ink-2); font-size: 14px; line-height: 1.5; }
.mh-type__go { margin-top: 8px; }
.mh-type--soon {
	justify-content: center;
	border: 2px dashed var(--mw-line-strong);
	background:
		linear-gradient(rgba(91, 70, 214, .06) 1px, transparent 1px) 0 0 / 26px 26px,
		linear-gradient(90deg, rgba(91, 70, 214, .06) 1px, transparent 1px) 0 0 / 26px 26px,
		#fbfaff;
	box-shadow: none;
}
.mh-type--soon .mh-type__body { justify-content: center; }

/* map cards */
.mh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mh-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mw-line);
	border-radius: 16px;
	background: #fff;
	color: var(--mw-ink);
	text-decoration: none;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mh-card:hover { transform: translateY(-3px); border-color: var(--mw-line-strong); box-shadow: 0 16px 34px rgba(58, 46, 168, .14); }
.mh-card__img { position: relative; display: block; aspect-ratio: 4 / 3; background: #f6f4ff; }
.mh-card__img img { display: block; width: 100%; height: 100%; }
.mh-card__img--plan img { object-fit: contain; padding: 14px; box-sizing: border-box; }
.mh-card__img--model img { object-fit: cover; }
.mh-card__badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--mw-base, #fedc00); color: #241c4a; font: 800 10px/1 var(--mw-sans); font-style: normal; letter-spacing: .1em; }
.mh-card__body { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px 15px; border-top: 1px solid var(--mw-line); }
.mh-card__name { font: 800 16px/1.25 var(--mw-sans); }
.mh-card:hover .mh-card__name { color: var(--mw-signal); }
.mh-card__meta { color: var(--mw-ink-2); font-size: 13px; }
.mh-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mh-card__tags span { padding: 3px 8px; border-radius: 999px; background: var(--mw-signal-soft); color: var(--mw-signal-deep); font: 700 11px/1.3 var(--mw-sans); }

/* latest additions */
.mh-latest { margin: 0; padding: 0; list-style: none; border: 1px solid var(--mw-line); border-radius: 16px; background: #fff; overflow: hidden; }
.mh-latest a { display: grid; grid-template-columns: 64px 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; color: var(--mw-ink); text-decoration: none; border-bottom: 1px solid var(--mw-line); }
.mh-latest li:last-child a { border-bottom: 0; }
.mh-latest a:hover { background: #f8f6ff; }
.mh-latest__date { color: var(--mw-ink-2); font: 700 11px/1 var(--mw-sans); letter-spacing: .12em; text-transform: uppercase; }
.mh-latest__badge { justify-self: start; padding: 4px 9px; border-radius: 999px; font: 800 10px/1 var(--mw-sans); letter-spacing: .1em; text-transform: uppercase; }
.mh-latest__badge--mall { background: var(--mw-signal-soft); color: var(--mw-signal-deep); }
.mh-latest__badge--campus { background: #fff3b0; color: #6b5a00; }
.mh-latest__name { overflow: hidden; font: 700 16px/1.3 var(--mw-sans); text-overflow: ellipsis; white-space: nowrap; }
.mh-latest a:hover .mh-latest__name { color: var(--mw-signal); }
.mh-latest__meta { color: var(--mw-ink-2); font-size: 13px; text-align: right; }

.mh .mw-footer { margin-top: 40px; }

/* tablets */
@media (max-width: 1060px) {
	.mh { --mh-pad: 28px; }
	.mh-hero { grid-template-columns: 1fr; padding-top: 30px; }
	.mh-hero__art { height: 320px; max-width: 620px; width: 100%; margin: 0 auto; }
	.mh-types { grid-template-columns: 1fr 1fr; }
	.mh-type--soon { grid-column: 1 / -1; }
	.mh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* phones */
@media (max-width: 680px) {
	.mh { --mh-pad: 16px; }
	.mh .mh-top { padding-top: 12px; }
	.mh .mh-top .mw-logo { height: 30px; }
	.mh-top__nav { gap: 14px; }
	.mh-top__nav a { font-size: 12px; }
	.mh-top__nav a:last-child { display: none; }
	.mh-hero { gap: 26px; padding-bottom: 30px; }
	.mh-title { font-size: 40px; }
	.mh-lede { font-size: 16px; margin-bottom: 20px; }
	.mh .mh-find input { height: 52px; font-size: 15px; }
	.mh-stats { gap: 8px 22px; }
	.mh-stats b { font-size: 22px; }
	.mh-hero__art { height: 250px; }
	.mh-h2 { font-size: 22px; }
	.mh-types { grid-template-columns: 1fr; }
	.mh-type__img { height: 150px; }
	.mh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.mh-card__body { padding: 10px 11px 12px; }
	.mh-card__name { font-size: 14px; }
	.mh-latest a { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px 14px; }
	.mh-latest__date { grid-column: 1; grid-row: 1; }
	.mh-latest__badge { grid-column: 2; grid-row: 1; }
	.mh-latest__name { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
	.mh-latest__meta { grid-column: 1 / -1; grid-row: 3; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.mh-card, .mh-type, .mh-more svg, .mh-type__go svg { transition: none; }
}

/* floor-plan images carry their own white ground: frame them in white */
.mh-card__img--plan, .mh-type--plan .mh-type__img { background: #fff; }
.mh-card__img--plan img { padding: 10px; }
.mh-art--plan img { background: #fff; }

@media (max-width: 680px) {
	.mh .mh-find .mwh-find__go { padding: 0 16px; letter-spacing: .08em; }
	.mh .mh-find input { font-size: 14px; padding-left: 10px; }
	.mh-card__tags { gap: 4px; }
	.mh-card__tags span { padding: 2px 7px; font-size: 10px; }
	.mh-sec__head { align-items: baseline; }
	.mh-more { font-size: 13px; }
}

/* two map types: equal halves */
.mh-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mh-type__img { height: 200px; }
@media (max-width: 680px) { .mh-types { grid-template-columns: 1fr; } .mh-type__img { height: 150px; } }