/**
 * UOVO Locations — front-end styles.
 * Uses the theme brand palette (falls back to hex if theme vars absent).
 */
.uovo-loc {
	--uovo-blue: rgb(var(--dark-blue, 0 0 199));
	--uovo-cherrywood: rgb(var(--cherrywood, 110 22 30));
	--uovo-twine: rgb(var(--twine, 190 123 84));
	--uovo-fiord: rgb(var(--fiord, 70 83 102));
	--uovo-pearl: rgb(var(--pearl-bush, 229 220 211));
	--uovo-ink: rgb(var(--ebony-clay, 36 42 55));
	--uovo-white: #fff; /* literal — never a nested rgb(var()) that can fail to resolve */

	/* Site type system: --sans (Manrope) / --serif (Hoefler), with literal fallbacks */
	--uovo-font: var(--sans, 'Manrope', "Helvetica Neue", sans-serif);
	--uovo-font-display: var(--serif, Hoefler, georgia, serif);
	--uovo-radius: 14px;
	--uovo-radius-sm: 10px;
	--uovo-map-h: 70vh;
	--uovo-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	--uovo-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

	font-family: var(--uovo-font);
	color: var(--uovo-ink);
	display: block;
	width: 100%;
	padding: 40px 2rem; /* matches the site's default full-width section styling */
}

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

/* Optional brand rule across the top of the section (module "Animated top rule"
   toggle). Spans the section's full width by breaking out of the side padding;
   the draw-in animation is layered on by the theme's motion styles. */
.uovo-loc--has-rule { padding-top: 0; }
.uovo-loc__rule {
	height: 2px;
	background: var(--uovo-blue);
	margin: 0 0 40px; /* inside the section's 2rem padding — inset, not full-bleed, matching the site's section-break lines */
	transform-origin: left center;
}

.uovo-loc__title {
	font-family: var(--uovo-font-display);
	font-weight: var(--normal, normal);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	margin: 0 0 1.25rem;
	color: var(--uovo-blue);
}

/* --- Filters --- */
.uovo-loc__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: 1.25rem;
}
.uovo-loc__filter-set {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.uovo-loc__filter-label {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uovo-fiord);
	margin-right: 0.15rem;
}
.uovo-loc__chip {
	font: inherit;
	font-size: 0.82rem;
	line-height: 1;
	padding: 0.6rem 1.05rem;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 999px;
	background: var(--uovo-white);
	color: var(--uovo-ink);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.uovo-loc__chip:hover { border-color: var(--uovo-ink); box-shadow: var(--uovo-shadow); }
.uovo-loc__chip.is-active {
	background: var(--uovo-ink);
	border-color: var(--uovo-ink);
	color: var(--uovo-white);
}
/* Active service chips take their sub-brand colour */
.uovo-loc__chip[data-tax="service"][data-slug="art"].is-active { background: #1B4075; border-color: #1B4075; }
.uovo-loc__chip[data-tax="service"][data-slug="fashion"].is-active { background: #326F79; border-color: #326F79; }
.uovo-loc__chip[data-tax="service"][data-slug="wine"].is-active { background: #6B404B; border-color: #6B404B; }
/* Active Type (category) chips: light gray, not black */
.uovo-loc__chip[data-tax="category"].is-active {
	background: #E5E5E5;
	border-color: #D9D9D9;
	color: var(--uovo-ink);
}

/* The "All" pill takes the signature brand blue when active, in every filter set —
   it reads as the deliberate "everything is showing" state rather than just another
   selected term. Declared after the other .is-active rules (including the category
   one, which it ties with on specificity) so source order settles it. */
.uovo-loc__chip--all.is-active,
.uovo-loc__chip[data-tax="service"].uovo-loc__chip--all.is-active,
.uovo-loc__chip[data-tax="region"].uovo-loc__chip--all.is-active,
.uovo-loc__chip[data-tax="category"].uovo-loc__chip--all.is-active {
	background: var(--uovo-blue);
	border-color: var(--uovo-blue);
	color: var(--uovo-white);
}
.uovo-loc__chip:focus-visible { outline: 2px solid var(--uovo-blue); outline-offset: 2px; }
/* Button reset only — appearance is shared with .uovo-loc__viewall below, so the two
   text links beside the count read as a matched pair. */
.uovo-loc__clear {
	font: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* --- View toggle (Map / List) --- */
.uovo-loc__viewtoggle {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 999px;
	margin-bottom: 1.5rem;
}
.uovo-loc__view-btn {
	font: inherit;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.5rem 1.25rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--uovo-fiord);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.uovo-loc__view-btn:hover { color: var(--uovo-ink); }
.uovo-loc__view-btn.is-active {
	background: var(--uovo-white);
	color: var(--uovo-blue);
	box-shadow: var(--uovo-shadow);
}
.uovo-loc__view-btn:focus-visible { outline: 2px solid var(--uovo-blue); outline-offset: 2px; }

/* Toggle layout: show the selected view (map / both / list) */
.uovo-loc--toggle[data-view="map"] .uovo-loc__map,
.uovo-loc--toggle[data-view="list"] .uovo-loc__map { height: var(--uovo-map-h); }

/* map-only: hide list */
.uovo-loc--toggle[data-view="map"] .uovo-loc__list { display: none; }
/* list-only: hide the map column (map + hint), show a full card grid */
.uovo-loc--toggle[data-view="list"] .uovo-loc__mapcol { display: none; }
.uovo-loc--toggle[data-view="list"] .uovo-loc__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}
/* (the "both" state shares the split styling defined below) */

/* --- Body layouts --- */
.uovo-loc__body { position: relative; }

.uovo-loc--map .uovo-loc__map { height: var(--uovo-map-h); }

.uovo-loc--both .uovo-loc__body,
.uovo-loc--toggle[data-view="both"] .uovo-loc__body {
	display: grid;
	/* map ~60% / cards ~40% — the wider card rail fits two compact cards across.
	   minmax(0,…) stops the map canvas's intrinsic min-width from breaking the ratio. */
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}
/* The grid child is the map column (map + zoom hint); sticky lives on it so the
   hint scrolls with the map. */
.uovo-loc--both .uovo-loc__mapcol,
.uovo-loc--toggle[data-view="both"] .uovo-loc__mapcol {
	position: sticky;
	top: 1rem;
}
.uovo-loc--both .uovo-loc__map,
.uovo-loc--toggle[data-view="both"] .uovo-loc__map {
	height: var(--uovo-map-h);
}
.uovo-loc--both .uovo-loc__list,
.uovo-loc--toggle[data-view="both"] .uovo-loc__list {
	max-height: var(--uovo-map-h);
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)); /* two-up compact cards */
	gap: 0.75rem;
	padding-right: 4px;
	/* Scrollable, but hide the scrollbar itself. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* old Edge/IE */
}
/* Compact card internals for the two-up split view (smaller than the full grid). */
.uovo-loc--both .uovo-loc__list .uovo-loc__card-body,
.uovo-loc--toggle[data-view="both"] .uovo-loc__list .uovo-loc__card-body {
	padding: 0.7rem 0.8rem 0.85rem;
	gap: 0.3rem;
}
.uovo-loc--both .uovo-loc__list .uovo-loc__card-title,
.uovo-loc--toggle[data-view="both"] .uovo-loc__list .uovo-loc__card-title {
	font-size: 1rem;
	line-height: 1.12;
}
.uovo-loc--both .uovo-loc__list .uovo-loc__card-addr,
.uovo-loc--toggle[data-view="both"] .uovo-loc__list .uovo-loc__card-addr,
.uovo-loc--both .uovo-loc__list .uovo-loc__card-line,
.uovo-loc--toggle[data-view="both"] .uovo-loc__list .uovo-loc__card-line { font-size: 0.78rem; }
.uovo-loc--both .uovo-loc__list .uovo-loc__card-cta,
.uovo-loc--toggle[data-view="both"] .uovo-loc__list .uovo-loc__card-cta { font-size: 0.72rem; }
.uovo-loc--both .uovo-loc__list::-webkit-scrollbar,
.uovo-loc--toggle[data-view="both"] .uovo-loc__list::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.uovo-loc__map {
	width: 100%;
	border-radius: var(--uovo-radius);
	overflow: hidden;
	background: var(--uovo-pearl);
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: var(--uovo-shadow);
}

/* Hide Mapbox's built-in cooperative-gestures overlays ("Use ⌘ + scroll to zoom the
   map" / "Use two fingers to move the map"). In Mapbox GL v3 these are the
   .mapboxgl-scroll-zoom-blocker and .mapboxgl-touch-pan-blocker elements. We surface
   that instruction as a static line below the map instead (.uovo-loc__zoom-hint); the
   ⌘/Ctrl-to-zoom behavior itself is unaffected — it's the gesture handler, not these
   overlays. */
.uovo-loc .mapboxgl-scroll-zoom-blocker,
.uovo-loc .mapboxgl-touch-pan-blocker {
	display: none !important;
}

/* Static scroll-to-zoom hint below the map. */
.uovo-loc__zoom-hint {
	margin: 0.7rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--uovo-fiord);
	text-align: left;
}
.uovo-loc__zoom-hint[hidden] { display: none; }

/* Grid layout (grid-only and the list column inside "both") */
.uovo-loc--grid .uovo-loc__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

/* --- Cards --- */
.uovo-loc__card {
	--accent: var(--uovo-blue);
	position: relative;
	background: var(--uovo-white);
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: var(--uovo-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--uovo-shadow);
	transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
	cursor: pointer;
}
.uovo-loc__card:hover { box-shadow: var(--uovo-shadow-lg); transform: translateY(-3px); }
.uovo-loc__card.is-coming-soon { opacity: 0.92; }

/* Media */
.uovo-loc__card-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--uovo-pearl);
}
.uovo-loc__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.uovo-loc__card:hover .uovo-loc__card-media img { transform: scale(1.04); }
/* Placeholder when there's no featured image */
.uovo-loc__card-media--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%),
		var(--accent);
}
.uovo-loc__ph-icon { width: 40px; height: 40px; fill: rgba(255, 255, 255, 0.85); }

.uovo-loc__card-body {
	padding: 1.05rem 1.2rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.uovo-loc__badge {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.92);
	color: var(--uovo-ink);
	padding: 0.3rem 0.55rem;
	border-radius: 999px;
	backdrop-filter: blur(4px);
}
.uovo-loc__card-title {
	font-family: var(--uovo-font-display);
	font-weight: var(--normal, normal);
	font-size: 1.3rem;
	line-height: 1.15;
	margin: 0;
	color: var(--accent, var(--uovo-ink)); /* --accent = the card's service color (set inline in render_card) */
}
.uovo-loc__card-meta {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent, var(--uovo-fiord));
	margin: 0;
}
.uovo-loc__card-addr { font-size: 0.88rem; line-height: 1.4; margin: 0; color: var(--accent, var(--uovo-fiord)); }

/* "Coming Soon" shown as a line under the title (map popup) rather than a pill over
   the image — in the popup the pill sat beneath the close button. Keeps the badge's
   uppercase micro-type, in the card's service colour so it reads as status, not body
   copy. */
.uovo-loc__card-status {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent, var(--uovo-fiord));
	margin: 0.15rem 0 0;
	opacity: 0.85;
}
.uovo-loc__card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.1rem; }
/* Service pills overlaid on the top-left corner of the card image — grid + map
   sidebar/popup cards. The tags markup stays in the body; absolute positioning against
   the (already position:relative) card floats them over the image. The Coming Soon
   badge sits top-right so the two don't overlap. The merged-group popup uses different
   markup (.uovo-loc__popgroup) and is unaffected. */
.uovo-loc__popcard { position: relative; }
.uovo-loc__card .uovo-loc__card-tags,
.uovo-loc__popcard .uovo-loc__card-tags {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 2;
	margin: 0;
}
.uovo-loc__tag {
	font-size: 0.64rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: var(--uovo-ink); /* fallback; per-service fill below */
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
	display: inline-flex;
	align-items: center;
}
/* Solid service-color pill, white label. */
.uovo-loc__tag[data-service="art"] { background: #1B4075; }
.uovo-loc__tag[data-service="fashion"] { background: #326F79; }
.uovo-loc__tag[data-service="wine"] { background: #6B404B; }
.uovo-loc__card-line { font-size: 0.88rem; margin: 0.1rem 0 0; }
.uovo-loc__card-line a { color: var(--accent, var(--uovo-fiord)); text-decoration: none; }
.uovo-loc__card-line a:hover { color: var(--uovo-ink); }
/* Reads as a button, not a text link: solid service-coloured pill matching the
   brochure/Get Directions buttons elsewhere on the site. */
.uovo-loc__card-cta {
	align-self: flex-start;
	margin-top: 0.8rem;
	padding: 0.5rem 0.9rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--accent);
	color: var(--uovo-white);
	border: 1px solid var(--accent);
	border-radius: 0.75rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	line-height: 1;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.uovo-loc__card-cta::after {
	content: '→';
	transition: transform 0.2s ease;
}
.uovo-loc__card:hover .uovo-loc__card-cta::after { transform: translateX(4px); }
/* Hover: lift + invert to the outline form. The explicit colour is required — the
   theme's global a:hover would otherwise recolour the label. */
.uovo-loc__card-cta:hover,
.uovo-loc__card-cta:focus-visible {
	background: var(--uovo-white);
	color: var(--accent);
	transform: translateY(-1px);
	box-shadow: var(--uovo-shadow);
}
.uovo-loc__card-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The split-view cards are compact, so scale the button down to match. */
.uovo-loc--both .uovo-loc__list .uovo-loc__card-cta,
.uovo-loc--toggle[data-view="both"] .uovo-loc__list .uovo-loc__card-cta {
	padding: 0.4rem 0.7rem;
	margin-top: 0.55rem;
}

/* --- States --- */
.uovo-loc__empty,
.uovo-loc__notoken {
	padding: 1.25rem;
	background: var(--uovo-pearl);
	border-radius: var(--uovo-radius);
	color: var(--uovo-ink);
	margin-top: 1rem;
}

/* --- Mapbox popup override --- */
.uovo-loc__popup .mapboxgl-popup-content {
	font-family: var(--uovo-font);
	border-radius: var(--uovo-radius-sm);
	padding: 0;
	overflow: hidden;
	min-width: 240px;
	box-shadow: var(--uovo-shadow-lg);
}
.uovo-loc__popcard .uovo-loc__card-media { aspect-ratio: 16 / 9; }
.uovo-loc__popcard .uovo-loc__card-body { padding: 0.85rem 1rem 1rem; gap: 0.4rem; }
.uovo-loc__popup .uovo-loc__card-title { font-size: 1.15rem; }
.uovo-loc__popup .mapboxgl-popup-close-button {
	width: 26px;
	height: 26px;
	top: 8px;
	right: 8px;
	padding: 0;
	font-size: 0; /* hide the text "×" — its glyph metrics sit off-center; the X is drawn below */
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	border: none;
	border-radius: 50%;
}
/* Geometrically centered X (two strokes), immune to font baseline quirks. */
.uovo-loc__popup .mapboxgl-popup-close-button::before,
.uovo-loc__popup .mapboxgl-popup-close-button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.6px;
	background: #fff;
	border-radius: 1px;
}
.uovo-loc__popup .mapboxgl-popup-close-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.uovo-loc__popup .mapboxgl-popup-close-button::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.uovo-loc__popup .mapboxgl-popup-close-button:hover { background: rgba(0, 0, 0, 0.6); }

/* Merged-group popup: two or more co-located facilities (e.g. Art + Fashion at one
   address, shown as a split-color pin). Compact list, each row links to its page. */
.uovo-loc__popgroup { padding: 0.35rem 0; min-width: 250px; }
.uovo-loc__popgroup-head {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--uovo-fiord);
	padding: 0.55rem 1rem 0.4rem;
}
.uovo-loc__popgroup-item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 0.15rem 0.6rem;
	align-items: center;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--uovo-pearl);
	text-decoration: none;
	color: var(--uovo-ink);
	transition: background 0.15s ease;
}
.uovo-loc__popgroup-item:hover { background: var(--uovo-pearl); }
.uovo-loc__popgroup-tags { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 0.25rem; }
.uovo-loc__popgroup-title { font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.uovo-loc__popgroup-addr { font-size: 0.8rem; color: var(--uovo-fiord); line-height: 1.3; }

/* --- Result count --- */
.uovo-loc__count {
	margin-left: auto;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--uovo-fiord);
	white-space: nowrap;
}
.uovo-loc__clear { margin-left: 0.75rem; } /* count now owns the auto push */

/* "View All Locations" sits beside the count, underlined so it reads as a link
   rather than another chip. Inherits the same micro-type as the count. */
.uovo-loc__viewall,
.uovo-loc__clear {
	margin-left: 0.85rem;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var(--uovo-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
	transition: opacity 0.16s ease;
}
/* The theme's global a:hover would otherwise recolour these. */
.uovo-loc__viewall:hover,
.uovo-loc__viewall:focus-visible,
.uovo-loc__clear:hover,
.uovo-loc__clear:focus-visible {
	color: var(--uovo-blue);
	opacity: 0.7;
	text-decoration: underline;
}
@media (max-width: 860px) {
	/* Matching touch targets on both links. */
	.uovo-loc__viewall,
	.uovo-loc__clear {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	/* Clear all moves to the far left of the final row. `order` is scoped to the whole
	   flex container, so every child needs an explicit value — a bare order:-1 on the
	   button lifted it above the filter sets entirely. */
	.uovo-loc__filter-set { order: 0; }
	.uovo-loc__clear      { order: 1; margin-left: 0; margin-right: 0.85rem; }
	.uovo-loc__count      { order: 2; }
	.uovo-loc__viewall    { order: 3; }
}

/* --- Loading overlay --- */
.uovo-loc__loader {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.55);
	border-radius: var(--uovo-radius);
	z-index: 5;
}
.uovo-loc.is-loading .uovo-loc__loader { display: flex; }
.uovo-loc__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(0, 0, 200, 0.2);
	border-top-color: var(--uovo-blue);
	border-radius: 50%;
	animation: uovo-spin 0.7s linear infinite;
}
@keyframes uovo-spin { to { transform: rotate(360deg); } }

/* --- Card hover/selected linking with the map --- */
.uovo-loc__card.is-hover {
	box-shadow: var(--uovo-shadow-lg);
	border-color: var(--accent);
	transform: translateY(-3px);
}
.uovo-loc__card.is-selected {
	border-color: var(--accent);
	box-shadow: var(--uovo-shadow-lg);
}

/* --- View fade (toggle switching) --- */
.uovo-loc--toggle .uovo-loc__map,
.uovo-loc--toggle .uovo-loc__list { animation: uovo-fade 0.25s ease; }
@keyframes uovo-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.uovo-loc--toggle .uovo-loc__map,
	.uovo-loc--toggle .uovo-loc__list,
	.uovo-loc__spinner { animation: none; }
	.uovo-loc-directory__brochure,
	.uovo-loc-directory__brochure-icon { transition: none; }
	.uovo-loc-directory__brochure:hover { transform: none; }
	.uovo-loc-directory__brochure:hover .uovo-loc-directory__brochure-icon { transform: none; }
}

/* --- Responsive --- */
@media (max-width: 860px) {
	.uovo-loc { --uovo-map-h: 420px; }
	.uovo-loc--both .uovo-loc__body,
	.uovo-loc--toggle[data-view="both"] .uovo-loc__body { grid-template-columns: 1fr; }
	.uovo-loc--both .uovo-loc__mapcol,
	.uovo-loc--toggle[data-view="both"] .uovo-loc__mapcol { position: relative; top: 0; }
	.uovo-loc--both .uovo-loc__list,
	.uovo-loc--toggle[data-view="both"] .uovo-loc__list { max-height: none; overflow: visible; }
	.uovo-loc__filter-label { flex-basis: 100%; }
	/* Each filter set owns its own row, so the count can't ride along on the end of the
	   Region row (pushed right by its auto margin) while the links wrap underneath.
	   Dropping the auto margin lets the count start the final row and sit inline with
	   "View All Locations" and "Clear all". */
	.uovo-loc__filter-set { flex-basis: 100%; }
	.uovo-loc__count { margin-left: 0; }

	/* Touch targets. Chips and view buttons were 34px tall — under the ~44px minimum
	   for comfortable tapping, and easy to mis-hit in a wrapped row of eight. Height
	   only; the type size and pill shape are unchanged. */
	.uovo-loc__chip,
	.uovo-loc__view-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	.uovo-loc__clear { min-height: 44px; display: inline-flex; align-items: center; }
	/* The card's Details button is a touch target on tablets as well as phones. */
	.uovo-loc__card-cta { min-height: 44px; }
}

/* ==========================================================================
   Single location page (hero + standardized header + mini-map)
   ========================================================================== */
.uovo-loc-single {
	--uovo-blue: rgb(var(--dark-blue, 0 0 199));
	--uovo-fiord: rgb(var(--fiord, 70 83 102));
	--uovo-pearl: rgb(var(--pearl-bush, 229 220 211));
	--uovo-ink: rgb(var(--ebony-clay, 36 42 55));
	--uovo-white: #fff; /* literal — never a nested rgb(var()) that can fail to resolve */
	--uovo-font: var(--sans, 'Manrope', "Helvetica Neue", sans-serif);
	--uovo-font-display: var(--serif, Hoefler, georgia, serif);
	--uovo-radius: 14px;
	--accent: var(--uovo-blue);
	font-family: var(--uovo-font);
	color: var(--uovo-ink);
}
.uovo-loc-single *,
.uovo-loc-single *::before,
.uovo-loc-single *::after { box-sizing: border-box; }

/* Hero */
.uovo-loc-single__hero {
	position: relative;
	/* 16/10 to match the location cards, capped at 72vh so the hero can't exceed the
	   viewport on wide screens (above that cap it simply crops wider than 16/10).
	   width:100% is required — with an auto width, max-height makes the browser shrink
	   the box's WIDTH to preserve the ratio instead of cropping. background-position is
	   set inline from the image's focal point (see UOVO_Loc_Render::focal_point()). */
	aspect-ratio: 16 / 10;
	width: 100%;
	max-height: 72vh;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-color: var(--uovo-pearl);
}
.uovo-loc-single__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 75%);
}
.uovo-loc-single__hero--ph {
	background-image:
		radial-gradient(120% 120% at 25% 15%, rgba(255, 255, 255, 0.16), transparent 55%),
		linear-gradient(135deg, var(--accent), rgba(0, 0, 0, 0.35));
}
.uovo-loc-single__hero--ph::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 60%); }
.uovo-loc-single__hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	/* Full-width (2rem inset) to line up with the full-width content sections below,
	   rather than a centered 1280px column. */
	max-width: none;
	margin: 0;
	padding: 2.5rem 2rem;
	color: var(--uovo-white);
}
.uovo-loc-single__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.uovo-loc-single__region {
	font-size: 0.64rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	color: var(--uovo-white);
	backdrop-filter: blur(4px);
}
.uovo-loc-single__title {
	font-family: var(--uovo-font-display);
	font-weight: var(--normal, normal);
	font-size: clamp(2rem, 5vw, 3.75rem);
	line-height: 1.05;
	margin: 0;
	color: var(--uovo-white);
}
.uovo-loc-single__loc {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* The hero sits on a dark image, so its text stays white even on service-colored
   pages. The theme's `.service-* p { color: … !important }` rules (now that location
   pages carry a service class) would otherwise tint the city/state line — these
   compound selectors have the specificity to win against those !important rules. */
.uovo-loc-single__hero-inner .uovo-loc-single__title,
.uovo-loc-single__hero-inner .uovo-loc-single__loc,
.uovo-loc-single__hero-inner .uovo-loc-single__region {
	color: #fff !important;
}

/* Standardized header */
.uovo-loc-single__header {
	max-width: none;
	margin: 0;
	padding: 3rem 2rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 2.5rem;
	align-items: start;
}
.uovo-loc-single__specs { display: flex; flex-direction: column; gap: 1.4rem; }
.uovo-loc-single__overview {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--uovo-ink);
}
.uovo-loc-single__overview > :first-child { margin-top: 0; }
.uovo-loc-single__overview > :last-child { margin-bottom: 0; }
.uovo-loc-single__overview p { margin: 0 0 1rem; }
.uovo-loc-single__overview a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.uovo-loc-single__overview a:hover { opacity: 0.8; }
.uovo-loc-single__soon {
	align-self: flex-start;
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--accent);
	color: var(--uovo-white);
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
}
.uovo-loc-single__spec-label {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uovo-fiord);
	margin-bottom: 0.35rem;
}
.uovo-loc-single__spec address,
.uovo-loc-single__spec p { margin: 0; font-style: normal; font-size: 1.05rem; line-height: 1.5; }
.uovo-loc-single__spec a { color: var(--uovo-ink); text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
.uovo-loc-single__spec a:hover { border-color: var(--accent); color: var(--accent); }
.uovo-loc-single__dir {
	align-self: flex-start;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--uovo-white);
	background: var(--accent);
	text-decoration: none;
	padding: 0.75rem 1.4rem;
	border-radius: 0.75rem;
	transition: opacity 0.18s ease;
}
.uovo-loc-single__dir:hover { opacity: 0.88; color: var(--uovo-white); } /* keep label white (defeat theme a:hover recolor) */

/* Mini-map */
.uovo-loc-single__map { width: 100%; }
.uovo-loc-mini {
	width: 100%;
	height: 380px;
	border-radius: var(--uovo-radius);
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	background: var(--uovo-pearl);
}
.uovo-loc-mini__pin {
	/* Matches the marker on the main map (makePieImageData in uovo-map.js): a 20px
	   service-coloured disc inside a 2.5px white ring — not the teardrop this used to
	   be. Since the CPT split each facility has exactly one service, so it always
	   renders as the solid disc the main map draws for a single-service pin.
	   box-sizing is explicit so the border stays inside the 25px box, and centring is
	   now correct: Mapbox anchors a custom marker element at its centre, which a
	   teardrop's visual point never matched. */
	box-sizing: border-box;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 2.5px solid #fff;
}

@media (max-width: 860px) {
	.uovo-loc-single__hero { max-height: none; } /* let the 16/10 ratio drive height on mobile */
	.uovo-loc-single__header { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem 1.5rem; }
	.uovo-loc-single__hero-inner { padding: 2rem 1.5rem; }
	.uovo-loc-mini { height: 300px; }
}

/* ==========================================================================
   Region landing page (split hero + facilities grid) + Locations directory
   ========================================================================== */
.uovo-region,
.uovo-loc-directory {
	--uovo-blue: rgb(var(--dark-blue, 0 0 199));
	--uovo-fiord: rgb(var(--fiord, 70 83 102));
	--uovo-pearl: rgb(var(--pearl-bush, 229 220 211));
	--uovo-ink: rgb(var(--ebony-clay, 36 42 55));
	--uovo-white: #fff; /* literal — never a nested rgb(var()) that can fail to resolve */
	--uovo-font: var(--sans, 'Manrope', "Helvetica Neue", sans-serif);
	--uovo-font-display: var(--serif, Hoefler, georgia, serif);
	--uovo-radius: 14px;
	--uovo-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	--uovo-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
	font-family: var(--uovo-font);
	color: var(--uovo-ink);
}
.uovo-region *,
.uovo-region *::before,
.uovo-region *::after { box-sizing: border-box; }

/* Split hero */
.uovo-region__hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 60vh;
}
.uovo-region__hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 3rem 4rem clamp(2rem, 6vw, 6rem);
}
.uovo-region__eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--uovo-blue);
	margin-bottom: 1rem;
}
.uovo-region__title {
	font-family: var(--uovo-font-display);
	font-weight: var(--normal, normal);
	font-size: clamp(2.25rem, 4.5vw, 4rem);
	line-height: 1.04;
	margin: 0;
	color: var(--uovo-ink);
}
.uovo-region__intro {
	margin-top: 1.25rem;
	max-width: 46ch;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--uovo-fiord);
}
.uovo-region__intro p { margin: 0 0 0.75rem; }
.uovo-region__count {
	margin-top: 1.75rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--uovo-fiord);
}
.uovo-region__hero-media {
	position: relative;
	min-height: 60vh;
	overflow: hidden;
	background: var(--uovo-pearl);
}
.uovo-region__hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.uovo-region__hero-media--ph {
	background:
		radial-gradient(120% 120% at 75% 20%, rgba(255, 255, 255, 0.14), transparent 55%),
		linear-gradient(135deg, var(--uovo-blue), #0a0a4a);
}

/* Facilities */
.uovo-region__facilities {
	max-width: 1280px;
	margin: 0 auto;
	padding: 4rem 2rem;
}
.uovo-region__facilities-title {
	font-family: var(--uovo-font-display);
	font-weight: var(--normal, normal);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0 0 2.5rem;
	color: var(--uovo-ink);
}
.uovo-region__state { margin-bottom: 3rem; }
.uovo-region__state:last-child { margin-bottom: 0; }
.uovo-region__state-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--uovo-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--uovo-ink);
	margin: 0 0 1.25rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.uovo-region__state-count {
	font-family: var(--uovo-font);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--uovo-white);
	background: var(--uovo-blue);
	border-radius: 999px;
	padding: 0.1rem 0.5rem;
	letter-spacing: 0;
}
.uovo-region__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.75rem;
}
/* The whole card is a link on region pages */
.uovo-region__grid .uovo-loc__card { text-decoration: none; color: inherit; }

/* Mobile: location cards always show two-up — never collapse to a single column. */
@media (max-width: 640px) {
	.uovo-region__grid,
	.uovo-loc--toggle[data-view="list"] .uovo-loc__list,
	.uovo-loc--grid .uovo-loc__list,
	.uovo-loc--both .uovo-loc__list,
	.uovo-loc--toggle[data-view="both"] .uovo-loc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
	/* Compact the cards so two fit comfortably on a phone. */
	.uovo-loc__card-body { padding: 0.7rem 0.8rem 0.85rem; gap: 0.3rem; }
	.uovo-loc__card-title { font-size: 1rem; line-height: 1.12; }
	/* 0.62rem rendered at ~9.9px — too small to read comfortably on a phone. */
	.uovo-loc__card-meta { font-size: 0.7rem; }
	.uovo-loc__card-addr,
	.uovo-loc__card-line { font-size: 0.75rem; }
	/* The Details button is the card's primary action but rendered only 26px tall.
	   Full-width inside the card gives a comfortable target at a 160px card width
	   without pushing the type any smaller. */
	.uovo-loc__card-cta {
		font-size: 0.68rem;
		width: 100%;              /* min-height comes from the 860px block above */
		justify-content: center;
		padding: 0.5rem 0.6rem;
	}
}

@media (max-width: 860px) {
	.uovo-region__hero { grid-template-columns: 1fr; min-height: 0; }
	.uovo-region__hero-media { min-height: 46vh; order: -1; }
	.uovo-region__hero-text { padding: 2.5rem 1.5rem; }
	.uovo-region__facilities { padding: 2.5rem 1.5rem; }
}

/* --- Locations directory --- */
.uovo-loc-directory *,
.uovo-loc-directory *::before,
.uovo-loc-directory *::after { box-sizing: border-box; }
.uovo-loc-directory {
	/* Full-width (2rem inset) to match the full-width location/content pages, rather
	   than a centered 1280px column. The grid is auto-fill, so it just adds columns. */
	max-width: none;
	margin: 0;
	padding: 3.5rem 2rem 4rem;
}
.uovo-loc-directory__head { margin-bottom: 2rem; }
.uovo-loc-directory__title {
	font-family: var(--uovo-font-display);
	font-weight: var(--normal, normal);
	font-size: clamp(2rem, 4vw, 3.25rem);
	margin: 0;
	color: var(--uovo-blue);
}
/* Intro on the left, optional brochure download on the right. */
.uovo-loc-directory__lead {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem 2.5rem;
	flex-wrap: wrap;
}
.uovo-loc-directory__intro {
	margin: 1.1rem 0 0;
	flex: 1 1 42ch;
	max-width: 62ch;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--uovo-ink, #333);
}
.uovo-loc-directory__intro > :first-child { margin-top: 0; }
.uovo-loc-directory__intro > :last-child { margin-bottom: 0; }
.uovo-loc-directory__intro a { color: var(--uovo-blue); }
.uovo-loc-directory__brochure {
	flex: none;
	margin-top: 1.1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	background: var(--uovo-blue); /* service color (remapped per data-service) */
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: 0.02em;
	border-radius: 0.75rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.uovo-loc-directory__brochure:hover {
	color: #fff; /* keep the label white on hover (defeat theme a:hover recolor) */
	transform: translateY(-2px);
	box-shadow: 0 9px 22px rgba(0, 0, 0, 0.22);
	filter: brightness(1.07);
}
.uovo-loc-directory__brochure:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
.uovo-loc-directory__brochure:focus-visible {
	outline: 2px solid var(--uovo-blue);
	outline-offset: 3px;
}
.uovo-loc-directory__brochure-icon {
	flex: none;
	width: 20px;
	height: 20px;
	transition: transform 0.25s ease;
}
.uovo-loc-directory__brochure:hover .uovo-loc-directory__brochure-icon { transform: translateY(3px); }
/* Region/landing pages theme to their service color (art = navy, fashion = green,
   wine = maroon) instead of the signature blue. Remapping --uovo-blue recolors the
   title + eyebrow (and any accent that reads it) in one place. */
.uovo-loc-directory[data-service="art"] { --uovo-blue: #1B4075; }
.uovo-loc-directory[data-service="fashion"] { --uovo-blue: #326F79; }
.uovo-loc-directory[data-service="wine"] { --uovo-blue: #6B404B; }
.uovo-loc-directory__eyebrow {
	color: var(--uovo-blue);
	text-decoration: none;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: 0.9rem;
}
.uovo-loc-directory__group { margin-top: 2.75rem; }
.uovo-loc-directory__group[hidden] { display: none; }
.uovo-loc-directory__group-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--uovo-font-display);
	font-weight: var(--normal, normal);
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	color: var(--uovo-ink);
	margin: 0 0 1.5rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* Filtered-out state groups on region pages */
.uovo-region__state[hidden] { display: none; }
.uovo-loc__card[hidden] { display: none; }

/* --------------------------------------------------------------
   Mobile gutter alignment. The theme's mobile standard is a 1.2rem
   side gutter (mobile_0525.css sets `section` to 1.2rem at <=900px),
   but these class-based paddings out-rank that element rule — align
   them explicitly so plugin sections share the site-wide gutter.
   -------------------------------------------------------------- */
@media (max-width: 900px) {
	.uovo-loc,
	.uovo-loc-directory,
	.uovo-loc-single__hero-inner,
	.uovo-loc-single__header,
	.uovo-region__hero-text,
	.uovo-region__facilities {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
}