/**
 * SingMapper 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;

	/* Brand palette, taken from the SingMapper logo: the mark's red face
	   (#e4341c) and shadow (#a40c04), the "Sing" text red (#bc0c04) and the
	   "Mapper" near-black. Chrome is neutral charcoal so the red stays a signal. */
	--mw-paper: #faf8f7;
	--mw-surface: #fffdfc;
	--mw-ink: #141414;
	--mw-ink-2: #6f6a68;
	--mw-line: #e8e2df;
	--mw-line-strong: #d6ccc8;
	--mw-signal: #bc0c04;
	--mw-signal-bright: #e4341c;
	--mw-signal-deep: #a40c04;
	--mw-signal-soft: #fdecea;

	/* 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;
}

body.mw-app { overflow-x: clip; }

/* 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: var(--mw-paper);
	border: 1px solid var(--mw-line);
	border-top: 0; /* the toolbar sits directly on top */
	border-radius: 0;
	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-ink);
	color: #faf8f7;
	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: var(--mw-ink);
	padding: 10px 16px 9px;
}

/* 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 #2c2c2c;
}

.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-bar__homehint {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9c9c9c;
	transition: color .14s;
}

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

.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: #fff;
	white-space: nowrap;
}

.mw-bar__kicker {
	margin-top: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mw-signal-soft);
	color: #f2b3aa;
}

/* 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: #e4e4e4;
	background: transparent;
	border: 1px solid #454545;
	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: #fff; color: var(--mw-ink); }

/* 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: var(--mw-ink);
	background: #fff;
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

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

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

.mw .mw-omni input.mw-omni__input:focus { box-shadow: inset 0 -2px 0 var(--mw-ink); }

.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-ink);
	border-radius: 0;
	box-shadow: 0 14px 34px rgba(28, 27, 26, .2);
	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: #fbeeec; }

.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: #fde3df; 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: 2px 4px;
	flex: 1 1 100%;
	order: 2;
	min-width: 0;
	padding: 4px 0 0;
	margin-top: 3px;
	border-top: 1px solid #2c2c2c;
}

.mw-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	height: 30px;
	padding: 0 10px;
	color: #a9a9a9;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: color .14s, box-shadow .14s;
}

.mw-chip:hover { color: #fff; }

.mw-chip.is-active {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--mw-signal-bright);
}

.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: #fff;
	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: #9c9c9c;
}

.mw-levels {
	display: flex;
	flex: 0 0 auto;
	border: 1px solid #5a5a5a;
	overflow: hidden;
}

.mw-level {
	min-width: 64px;
	height: 46px;
	padding: 0 14px;
	font-size: 14px;
	color: #e4e4e4;
	background: none;
	border: 0;
	border-right: 1px solid #5a5a5a;
	cursor: pointer;
	transition: background .14s, color .14s;
}

.mw-levels .mw-level:last-child { border-right: 0; }

.mw-level:hover { background: #2a2a2a; color: #fff; }

.mw-level.is-active {
	background: var(--mw-signal);
	color: #fff;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}

/* 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: 0;
	box-shadow: 0 1px 3px rgba(28, 27, 26, .06);
	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: #fbeeec; color: var(--mw-ink); }
.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-ink);
	border-top: 1px solid #2c2c2c;
	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 #2c2c2c;
	margin-bottom: 10px;
}

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

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

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

.mw-catpanel__close:hover { color: #fff; }

.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 #262626;
	font-size: 13.5px;
	font-weight: 600;
	text-align: left;
	color: #e4e4e4;
	cursor: pointer;
	transition: background .12s, color .12s;
}

.mw-catpanel__item:hover { background: #2d2d2d; color: #fff; }

.mw-catpanel__item em {
	font-style: normal;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #9c9c9c;
	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: var(--mw-ink);
	border-radius: 0;
	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: var(--mw-ink);
	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: 0;
	box-shadow: 0 12px 34px rgba(28, 27, 26, .22);
	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-ink);
	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: 30px auto 0;
	max-width: 1560px;
	padding: 0 20px;
}

.mw-dir__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 16px 0 14px;
	border-top: 3px solid var(--mw-ink);
	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 #efe9e6; }

.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: #fff;
	box-shadow: inset 0 0 0 1px var(--mw-ink), 3px 3px 0 rgba(28, 27, 26, .08);
}

.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) 24%, #fff);
	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: #fde3df; 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-ink);
	color: #a9a9a9;
}

.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: #e4e4e4;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .14s, border-color .14s;
}

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

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

.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: var(--mw-ink);
	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: #0b0b0b;
		margin: -10px -16px 9px;
		padding: 8px 16px 7px;
		border-bottom: 1px solid #2c2c2c;
	}
	.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-ink);
		border-top: 1px solid #2c2c2c;
		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: #0b0b0b;
			margin: -10px -16px 9px;
			padding: 8px 16px 7px;
			border-bottom: 1px solid #2c2c2c;
		}
		.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-ink);
			border-top: 1px solid #2c2c2c;
			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: 0 auto;
	padding: 34px 22px 46px;
}

.mw-overview__title {
	margin: 0 0 14px;
	font-family: 'Playfair Display', Georgia, serif;
	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: 16px 48px 14px;
	border-bottom: 3px solid var(--mw-signal);
}

.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: linear-gradient(105deg, var(--mw-signal-deep) 0%, var(--mw-signal) 45%, var(--mw-signal-bright) 100%);
	padding: 30px 24px 36px;
	text-align: center;
}

.mwh-band h1 {
	margin: 0 0 22px;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 900;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1;
	color: #faf8f7;
}

.mwh-band h1 i { font-weight: 400; font-style: italic; color: #ffd9d2; }

.mwh-find {
	position: relative;
	display: flex;
	align-items: stretch;
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
	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: none;
	padding: 15px 12px;
	font: inherit;
	font-size: 15.5px;
	color: var(--mw-ink);
}

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

.mw button.mwh-find__go {
	border: 0;
	border-left: 2px solid var(--mw-ink);
	background: var(--mw-ink);
	color: #fff;
	padding: 0 24px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
}

.mw button.mwh-find__go:hover { background: var(--mw-signal); }

.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: #fbeeec; }

.mwh-find__list .n { font-family: 'Playfair Display', Georgia, serif; 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;
	gap: 16px;
	max-width: 1220px;
	margin: 30px auto 16px;
	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 { flex: 1; height: 1px; background: var(--mw-line-strong); }

.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: 1px solid var(--mw-ink);
	background: var(--mw-surface);
	color: var(--mw-ink);
	text-decoration: none;
	transition: box-shadow .14s;
}

.mwh-card:hover { box-shadow: 4px 4px 0 var(--mw-signal); }

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

.mwh-card__name {
	padding: 12px 14px 2px;
	font-family: 'Playfair Display', Georgia, serif;
	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 #efe9e6;
}

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

.mwh-row__name { font-family: 'Playfair Display', Georgia, serif; 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: #ffd9d2;
}

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

.mws-sub { margin: 0; color: #ffd9d2; 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: Georgia, serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--mw-ink);
	flex: 1;
}

.mws-prose h2, .mws-prose h3 {
	font-family: 'Playfair Display', Georgia, serif;
	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: 2px solid var(--mw-ink);
	background: #fff;
	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: #e4e4e4;
		background: none;
		border: 1px solid #5a5a5a;
		border-radius: 17px;
	}
	.mw-level:hover { background: #2a2a2a; }
	.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: #e4e4e4;
			background: none;
			border: 1px solid #5a5a5a;
			border-radius: 17px;
		}
		.mw-level:hover { background: #2a2a2a; }
		.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; }
	}
	
}