/*!
 * PetMap Directory — the [petmap_explorer] component.
 *
 * Loaded only on pages that render the explorer (see Front\Assets), together
 * with directory.css, whose card, tag, pin and place-card styles the explorer
 * reuses. Every colour reads a --pmd-* token; fonts inherit the theme's unless
 * a widget sets --pmd-font-sans.
 *
 * Mobile first. Below 768px the map fills the component and the panel is a
 * bottom sheet over it: explorer.js adds `is-enhanced` and collapses the
 * sheet to its peek (everything above the list), and `is-sheet-open` expands
 * it. Without JavaScript neither class is set, so the sheet stays open and the
 * list — the page's content — is readable. From 768px the panel sits beside
 * the map, its width from --pmd-explorer-panel-width.
 *
 * Height: the viewport below the site's header. explorer.js writes
 * --pmd-explorer-offset (how much of the viewport the header takes) and
 * --pmd-explorer-clearance (the top margin: how far to move down when the
 * theme starts the content underneath a fixed header, or — negative — up
 * to close the empty band a page container leaves under a header in the
 * page flow). The Elementor widget's height control replaces the height.
 *
 * The component is its own stacking context (`isolation: isolate`), and so is
 * the map inside it: Leaflet gives its panes and controls z-indexes up to
 * 1000, which would otherwise paint over the theme's fixed header when the
 * page scrolls, and over the sheet.
 *
 * @package PetMapDirectory
 */

.pmd-explorer {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: calc(100vh - var(--pmd-explorer-offset, 0px));
	height: calc(100svh - var(--pmd-explorer-offset, 0px));
	min-height: 440px;
	margin-top: var(--pmd-explorer-clearance, 0px);
	overflow: hidden;
	overflow: clip;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-snug);
	text-align: left;
	background: var(--pmd-color-surface-alt);
}

.pmd-explorer .pmd-ico {
	display: block;
	flex: none;
}

/* ── Map ─────────────────────────────────────────────────────── */

.pmd-exp-map {
	position: absolute;
	inset: 0;
	z-index: 0;
	isolation: isolate;
	background: var(--pmd-color-surface-alt);
}

/*
 * Overrides front.css, which gives every .petmap-map a 300px minimum and a
 * grey plate: here the container fills the map area.
 */
.pmd-exp-map .petmap-map {
	position: absolute;
	inset: 0;
	width: auto;
	min-height: 0;
	background: var(--pmd-color-surface-alt);
}

/* front.js's place card is styled by directory.css (`.pmd-popup`). */

/*
 * On a phone the collapsed sheet covers the bottom of the map, and with it
 * Leaflet's attribution, which a map must show: the bottom corners ride on
 * the sheet's top edge instead. Without JavaScript the sheet stays open and
 * nothing moves.
 */
.pmd-explorer.is-enhanced .pmd-exp-map .leaflet-bottom {
	bottom: var(--pmd-explorer-peek, 176px);
}

/*
 * Leaflet's zoom control and attribution, in the explorer's own surfaces:
 * a raised card with the design's radius and shadow, and a quiet strip for
 * the credits a map must keep visible.
 */
.pmd-explorer .leaflet-control-zoom.leaflet-bar {
	overflow: hidden;
	border: 0;
	border-radius: var(--pmd-radius-md);
	box-shadow: var(--pmd-shadow-md);
}

/*
 * leaflet.css sets `font: bold 18px 'Lucida Console'` on the zoom buttons
 * themselves, so they take the site's font explicitly.
 */
.pmd-explorer .leaflet-control-zoom.leaflet-bar a {
	width: 36px;
	height: 36px;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	font-weight: var(--pmd-weight-medium);
	line-height: 36px;
	background: var(--pmd-color-surface-raised);
	border-bottom: 1px solid var(--pmd-color-border);
	transition:
		background-color var(--pmd-duration-fast) var(--pmd-ease-out),
		color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-explorer .leaflet-control-zoom.leaflet-bar a:last-child {
	border-bottom: 0;
}

.pmd-explorer .leaflet-control-zoom.leaflet-bar a:hover,
.pmd-explorer .leaflet-control-zoom.leaflet-bar a:focus {
	color: var(--pmd-color-primary);
	background: var(--pmd-color-surface-alt);
}

.pmd-explorer .leaflet-control-zoom.leaflet-bar a:focus-visible {
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary));
	outline-offset: -2px;
}

.pmd-explorer .leaflet-control-zoom.leaflet-bar a.leaflet-disabled {
	color: var(--pmd-color-text-subtle);
	background: var(--pmd-color-surface-raised);
}

.pmd-explorer .leaflet-control-attribution {
	padding: 2px 8px;
	color: var(--pmd-color-text-muted);
	font-size: 10px;
	line-height: 1.5;
	background: rgba(255, 255, 255, 0.82);
	background: color-mix(in srgb, var(--pmd-color-surface) 82%, transparent);
	border-top-left-radius: var(--pmd-radius-sm);
}

.pmd-explorer .leaflet-control-attribution a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The zoom buttons go top right on a phone, clear of the sheet. */
.pmd-explorer .leaflet-top.leaflet-left {
	right: 0;
	left: auto;
}

.pmd-explorer .leaflet-left .leaflet-control {
	margin-right: var(--pmd-space-3);
	margin-left: 0;
}

/*
 * Explorer widget's "Suggest button corner" control: bottom right instead of
 * the default bottom left. The zoom control above owns whichever corner the
 * button does not, so it swaps sides right alongside it — same margin
 * flip — rather than colliding with it, which is the one combination a free
 * choice of corner would otherwise allow.
 */
.pmd-explorer.pmd-exp-cta-right .leaflet-top.leaflet-left {
	right: auto;
	left: 0;
}

.pmd-explorer.pmd-exp-cta-right .leaflet-left .leaflet-control {
	margin-right: 0;
	margin-left: var(--pmd-space-3);
}

/*
 * The floating "Suggest a place" button, bottom left by default — the zoom
 * control (see above) owns the opposite corner in every layout, and swaps
 * with it when `.pmd-exp-cta-right` is set (also below).
 *
 * `z-index: 900` because the button shares a stacking context with Leaflet's
 * own layers, and those go up to 800 (panes 200-700, controls 800): at a
 * lower value the basemap simply painted over it, which on a phone is exactly
 * what happened — the button was in the DOM, 173x44, and invisible.
 *
 * It still cannot climb above the results sheet: `.pmd-exp-map` is its own
 * stacking context (`z-index: 0`), so every value inside it stays below
 * `.pmd-exp-panel` (`z-index: 1`) one level up, whatever this number is.
 *
 * Never over the map's attribution: explorer.js measures the attribution
 * corner into --pmd-explorer-attribution, and the button stands that much
 * higher. Phone-first: the sheet covers the map's bottom peek, so the
 * attribution is lifted onto the sheet's edge (below) and the button sits
 * above both. The 768px breakpoint below drops the sheet from the sum.
 */
.pmd-explorer .pmd-exp-map-cta {
	position: absolute;
	left: var(--pmd-space-4);
	bottom: calc(var(--pmd-explorer-peek, 176px) + var(--pmd-explorer-attribution, 0px) + var(--pmd-space-3));
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: var(--pmd-space-2);
	min-height: 44px;
	padding: 0 var(--pmd-space-4);
	color: var(--pmd-color-on-primary);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	background: var(--pmd-color-primary);
	border: 0;
	border-radius: var(--pmd-radius-pill);
	box-shadow: var(--pmd-shadow-lg);
	transition:
		background-color var(--pmd-duration-fast) var(--pmd-ease-out),
		transform var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-explorer .pmd-exp-map-cta:active {
	transform: scale(0.96);
}

.pmd-explorer.pmd-exp-cta-right .pmd-exp-map-cta {
	right: var(--pmd-space-4);
	left: auto;
}

.pmd-explorer .pmd-exp-map-cta .pmd-ico {
	color: currentColor;
}

.pmd-explorer .pmd-exp-map-cta:hover,
.pmd-explorer .pmd-exp-map-cta:focus {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary-hover);
}

.pmd-explorer .pmd-exp-map-cta:focus-visible {
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary));
	outline-offset: 3px;
}

/* ── Panel: a bottom sheet on a phone ────────────────────────── */

.pmd-exp-panel {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: calc(100% - var(--pmd-space-6));
	color: var(--pmd-color-text);
	background: var(--pmd-color-surface);
	border-radius: var(--pmd-radius-xl) var(--pmd-radius-xl) 0 0;
	box-shadow: var(--pmd-shadow-xl);
	transform: translateY(0);
}

/* The grabber: the sheet reads as something that moves. */
.pmd-exp-panel::before {
	flex: none;
	align-self: center;
	width: 40px;
	height: 4px;
	margin-top: var(--pmd-space-2);
	background: var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-pill);
	content: "";
}

.pmd-explorer.is-enhanced:not(.is-sheet-open) .pmd-exp-panel {
	transform: translateY(calc(100% - var(--pmd-explorer-peek, 176px)));
}

/* Only after the first layout, so the page does not open on a sliding sheet. */
.pmd-explorer.is-settled .pmd-exp-panel {
	transition: transform var(--pmd-duration-slow) var(--pmd-ease-out);
}

/* ── Count and sheet toggle ──────────────────────────────────── */

.pmd-exp-head {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--pmd-space-3);
	min-height: 48px;
	padding: 0 var(--pmd-space-2) 0 var(--pmd-space-4);
}

.pmd-exp-count {
	margin: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: var(--pmd-text-sm);
	font-weight: var(--pmd-weight-semibold);
	font-variant-numeric: tabular-nums;
}

/*
 * The whole head row is the sheet's handle: the button stays 44px for its
 * focus ring, and its ::after covers the row for a thumb.
 */
.pmd-explorer .pmd-exp-toggle {
	position: static;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--pmd-color-text-muted);
	font-family: var(--pmd-font-sans, inherit);
	background: transparent;
	border: 0;
	border-radius: var(--pmd-radius-pill);
	box-shadow: none;
	cursor: pointer;
}

.pmd-explorer .pmd-exp-toggle::after {
	position: absolute;
	inset: 0;
	content: "";
}

.pmd-explorer .pmd-exp-toggle:hover,
.pmd-explorer .pmd-exp-toggle:focus {
	color: var(--pmd-color-text);
	background: transparent;
}

.pmd-explorer .pmd-exp-toggle:focus-visible {
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary)) !important;
	outline-offset: -2px;
}

.pmd-exp-toggle-mark {
	transform: rotate(0deg);
	transition: transform var(--pmd-duration-normal) var(--pmd-ease-out);
}

.pmd-explorer.is-sheet-open .pmd-exp-toggle-mark {
	transform: rotate(180deg);
}

/* ── Search, chips and status ────────────────────────────────── */

.pmd-exp-controls {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: var(--pmd-space-2);
	padding: 0 var(--pmd-space-4) var(--pmd-space-3);
}

.pmd-exp-search {
	position: relative;
	margin: 0;
}

.pmd-exp-search-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	color: var(--pmd-color-text-muted);
	transform: translateY(-50%);
	pointer-events: none;
}

/*
 * 16px text: iOS zooms the page into any field set smaller, and a zoomed page
 * under a fixed header is exactly what this component is not.
 */
.pmd-explorer .pmd-exp-input {
	display: block;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 var(--pmd-space-2) 0 40px;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	font-size: 16px;
	line-height: 1.2;
	background: var(--pmd-color-surface-alt);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-pill);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition:
		background var(--pmd-duration-fast) var(--pmd-ease-out),
		border-color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-explorer .pmd-exp-input::placeholder {
	color: var(--pmd-color-text-muted);
	opacity: 1;
}

.pmd-explorer .pmd-exp-input::-webkit-search-decoration {
	-webkit-appearance: none;
}

.pmd-explorer .pmd-exp-input:hover {
	border-color: var(--pmd-color-border-strong);
}

.pmd-explorer .pmd-exp-input:focus {
	background: var(--pmd-color-surface);
	border-color: var(--pmd-color-primary);
	outline: 2px solid var(--pmd-color-primary) !important;
	outline-offset: 1px;
}

/*
 * The filters: one row that scrolls sideways at every width, running to the
 * panel's edges, with room above and below for a chip's focus ring (a
 * scrolling row clips whatever overflows it). explorer.js marks the wrapper `is-overflowing` while the
 * chips do not fit, and `is-at-start` / `is-at-end` at either end; the row
 * fades out on each side that still hides chips, and a tablet or computer
 * gets a small button on each side as well (below, and at 768px).
 */
.pmd-exp-filters {
	--pmd-exp-fade-start: 0px;
	--pmd-exp-fade-end: 0px;
	--pmd-exp-fade: 36px;
	position: relative;
	margin: 0 calc(-1 * var(--pmd-space-4));
}

.pmd-exp-filters.is-overflowing:not(.is-at-start) {
	--pmd-exp-fade-start: var(--pmd-exp-fade);
}

.pmd-exp-filters.is-overflowing:not(.is-at-end) {
	--pmd-exp-fade-end: var(--pmd-exp-fade);
}

.pmd-exp-chips {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--pmd-space-2);
	margin: 0 calc(-1 * var(--pmd-space-4));
	padding: 5px var(--pmd-space-4);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--pmd-space-4);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pmd-exp-filters .pmd-exp-chips {
	margin: 0;
}

.pmd-exp-filters.is-overflowing .pmd-exp-chips {
	-webkit-mask-image: linear-gradient(to right, transparent calc(var(--pmd-exp-fade-start) * 0.5), #000 var(--pmd-exp-fade-start), #000 calc(100% - var(--pmd-exp-fade-end)), transparent calc(100% - var(--pmd-exp-fade-end) * 0.5));
	mask-image: linear-gradient(to right, transparent calc(var(--pmd-exp-fade-start) * 0.5), #000 var(--pmd-exp-fade-start), #000 calc(100% - var(--pmd-exp-fade-end)), transparent calc(100% - var(--pmd-exp-fade-end) * 0.5));
}

.pmd-exp-chips::-webkit-scrollbar {
	display: none;
}

.pmd-explorer .pmd-exp-chip {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	height: 38px;
	margin: 0;
	padding: 0 14px;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-display, var(--pmd-font-sans, inherit));
	font-size: 13px;
	font-weight: var(--pmd-weight-medium);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	background: var(--pmd-color-surface);
	border: 1px solid var(--pmd-color-border-strong);
	border-radius: var(--pmd-radius-pill);
	box-shadow: none;
	cursor: pointer;
	scroll-snap-align: start;
	transition:
		background-color var(--pmd-duration-fast) var(--pmd-ease-out),
		border-color var(--pmd-duration-fast) var(--pmd-ease-out),
		color var(--pmd-duration-fast) var(--pmd-ease-out),
		transform var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-explorer .pmd-exp-chip .pmd-ico {
	color: var(--pmd-color-text-muted);
}

.pmd-explorer .pmd-exp-chip:hover,
.pmd-explorer .pmd-exp-chip:focus {
	color: var(--pmd-color-text);
	background: var(--pmd-color-surface-alt);
	border-color: var(--pmd-color-border-strong);
}

.pmd-explorer .pmd-exp-chip:active {
	transform: scale(0.96);
}

.pmd-explorer .pmd-exp-chip[aria-pressed="true"] {
	color: var(--pmd-color-primary);
	background: var(--pmd-color-primary-soft);
	border-color: var(--pmd-color-primary);
}

.pmd-explorer .pmd-exp-chip[aria-pressed="true"] .pmd-ico {
	color: currentColor;
}

/*
 * The two toggles ("near me", "open now") are switches, not categories:
 * a tinted pill with no outline, and a solid one while on — white on the
 * deep primary, which keeps AA contrast in both presets.
 */
.pmd-explorer .pmd-exp-chip-toggle {
	background: var(--pmd-color-surface-alt);
	border-color: transparent;
}

.pmd-explorer .pmd-exp-chip-toggle:hover,
.pmd-explorer .pmd-exp-chip-toggle:focus {
	border-color: var(--pmd-color-border-strong);
}

.pmd-explorer .pmd-exp-chip-toggle[aria-pressed="true"] {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary);
	border-color: var(--pmd-color-primary);
}

.pmd-explorer .pmd-exp-chip-toggle[aria-pressed="true"]:hover,
.pmd-explorer .pmd-exp-chip-toggle[aria-pressed="true"]:focus {
	color: var(--pmd-color-on-primary);
	background: var(--pmd-color-primary-hover);
	border-color: var(--pmd-color-primary-hover);
}

/* The last toggle closes its group: a hairline before the categories. */
.pmd-explorer .pmd-exp-chip-toggle + .pmd-exp-chip-cat {
	position: relative;
	margin-left: calc(var(--pmd-space-2) + 1px);
}

.pmd-explorer .pmd-exp-chip-toggle + .pmd-exp-chip-cat::before {
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: calc(-1 * var(--pmd-space-2) - 2px);
	width: 1px;
	background: var(--pmd-color-border-strong);
	content: "";
	pointer-events: none;
}

/*
 * A category's pin icon (Front\Explorer::chip_icons()), painted through a
 * mask so it takes the accent the map's pins wear, and the chip's own colour
 * while it is pressed.
 */
.pmd-exp-chip-ico {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	margin-left: -2px;
	background-color: var(--pmd-color-accent, var(--pmd-color-primary));
	-webkit-mask-image: var(--pmd-icon);
	mask-image: var(--pmd-icon);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pmd-explorer .pmd-exp-chip[aria-pressed="true"] .pmd-exp-chip-ico {
	background-color: currentColor;
}

.pmd-explorer .pmd-exp-chip[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

.pmd-explorer .pmd-exp-chip:focus-visible {
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary)) !important;
	outline-offset: 2px;
}

/*
 * The row's scroll buttons: a tablet or computer only (a phone swipes), and
 * only toward a side that still hides chips — explorer.js unhides them. Over
 * the row's ends, on the panel's own surface, so the fade runs under them.
 */
.pmd-explorer .pmd-exp-scroll {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	color: var(--pmd-color-text);
	font-family: var(--pmd-font-sans, inherit);
	background: var(--pmd-color-surface);
	border: 1px solid var(--pmd-color-border);
	border-radius: var(--pmd-radius-full);
	box-shadow: var(--pmd-shadow-sm);
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		color var(--pmd-duration-fast) var(--pmd-ease-out),
		border-color var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-explorer .pmd-exp-scroll-back {
	left: var(--pmd-space-2);
}

.pmd-explorer .pmd-exp-scroll-forward {
	right: var(--pmd-space-2);
}

.pmd-explorer .pmd-exp-scroll:hover,
.pmd-explorer .pmd-exp-scroll:focus {
	color: var(--pmd-color-primary);
	background: var(--pmd-color-surface);
	border-color: var(--pmd-color-border-strong);
}

.pmd-explorer .pmd-exp-scroll:focus-visible {
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary)) !important;
	outline-offset: 2px;
}

.pmd-exp-status {
	margin: 0;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
	line-height: var(--pmd-leading-snug);
}

.pmd-exp-status:empty {
	display: none;
}

/* ── Results ─────────────────────────────────────────────────── */

/*
 * The only scroll container in the component: a result the map activates is
 * scrolled into view here, never by moving the page. `position: relative`
 * makes it the results' offsetParent, which explorer.js measures against.
 */
.pmd-exp-list {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	background: var(--pmd-color-surface);
	border-top: 1px solid var(--pmd-color-border);
}

.pmd-exp-results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pmd-exp-item {
	position: relative;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--pmd-color-border);
}

/*
 * The active result's edge, in the colour the active pin wears: a rounded
 * tab, so it reads as a marker rather than a border.
 */
.pmd-exp-item::before {
	position: absolute;
	top: var(--pmd-space-3);
	bottom: var(--pmd-space-3);
	left: 0;
	z-index: 1;
	width: 4px;
	background: var(--pmd-color-accent, var(--pmd-color-primary));
	border-radius: 0 var(--pmd-radius-pill) var(--pmd-radius-pill) 0;
	content: "";
	opacity: 0;
	transition: opacity var(--pmd-duration-fast) var(--pmd-ease-out);
}

.pmd-exp-item.is-active::before {
	opacity: 1;
}

/* The directory's card, flattened into a list row. */
.pmd-exp-item .pmd-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.pmd-exp-item .pmd-card:hover {
	background: var(--pmd-color-surface-alt);
	box-shadow: none;
}

.pmd-exp-item.is-active .pmd-card {
	background: var(--pmd-color-primary-soft);
}

.pmd-exp-item .pmd-card-row {
	gap: var(--pmd-space-3);
	padding: var(--pmd-space-3) var(--pmd-space-4);
}

.pmd-exp-item .pmd-card-thumb {
	width: 64px;
	height: 64px;
}

/*
 * The result's title link covers the whole row (directory.css), so the
 * keyboard focus ring goes round the row too, not round the title's words.
 */
.pmd-explorer .pmd-exp-item .pmd-card-title a:focus-visible {
	outline: none;
}

.pmd-explorer .pmd-exp-item .pmd-card-title a:focus-visible::after {
	border-radius: var(--pmd-radius-md);
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary));
	outline-offset: -3px;
}

/*
 * directory.css sizes the title with one class, and themes size headings with
 * more than that on phones (`body.page h3`, measured on a real site), which
 * turned every result title into a 26px heading. Two classes keep it a list row.
 */
.pmd-explorer .pmd-card-title {
	font-size: 15px;
	line-height: 1.3;
}

.pmd-exp-item.has-distance .pmd-card-foot {
	padding-right: 64px;
}

.pmd-exp-distance {
	position: absolute;
	right: var(--pmd-space-4);
	bottom: var(--pmd-space-3);
	z-index: 1;
	color: var(--pmd-color-text-muted);
	font-size: var(--pmd-text-xs);
	font-weight: var(--pmd-weight-semibold);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* ── Empty states ────────────────────────────────────────────── */

.pmd-exp-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pmd-space-2);
	padding: var(--pmd-space-7) var(--pmd-space-5);
	color: var(--pmd-color-text-muted);
	text-align: center;
}

.pmd-exp-empty .pmd-ico {
	color: var(--pmd-color-text-subtle);
}

.pmd-exp-empty-title {
	margin: var(--pmd-space-1) 0 0;
	color: var(--pmd-color-text);
	font-size: var(--pmd-text-md);
	font-weight: var(--pmd-weight-semibold);
}

.pmd-exp-empty-text {
	margin: 0;
	font-size: var(--pmd-text-sm);
	line-height: var(--pmd-leading-normal);
}

.pmd-explorer .pmd-exp-clear {
	min-height: 40px;
	margin: var(--pmd-space-3) 0 0;
	padding: 0 18px;
	color: var(--pmd-color-primary);
	font-family: var(--pmd-font-sans, inherit);
	font-size: 13px;
	font-weight: var(--pmd-weight-semibold);
	line-height: 1;
	background: var(--pmd-color-primary-soft);
	border: 1px solid transparent;
	border-radius: var(--pmd-radius-pill);
	box-shadow: none;
	cursor: pointer;
}

.pmd-explorer .pmd-exp-clear:hover,
.pmd-explorer .pmd-exp-clear:focus {
	color: var(--pmd-color-primary);
	background: var(--pmd-color-primary-soft);
	border-color: var(--pmd-color-primary);
}

.pmd-explorer .pmd-exp-clear:focus-visible {
	outline: 2px solid var(--pmd-color-accent, var(--pmd-color-primary)) !important;
	outline-offset: 2px;
}

.pmd-exp-none {
	margin: 0;
	padding: var(--pmd-space-6) var(--pmd-space-4);
	color: var(--pmd-color-text-muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {

	.pmd-explorer.is-settled .pmd-exp-panel,
	.pmd-exp-toggle-mark,
	.pmd-explorer .pmd-exp-input,
	.pmd-explorer .pmd-exp-chip,
	.pmd-explorer .pmd-exp-scroll,
	.pmd-exp-item::before {
		transition: none;
	}

	.pmd-explorer .pmd-exp-chip:active,
	.pmd-explorer .pmd-exp-map-cta:active {
		transform: none;
	}

	.pmd-explorer .pmd-exp-map-cta,
	.pmd-explorer .leaflet-control-zoom.leaflet-bar a {
		transition: none;
	}
}

/* ── Tablet and up: the panel beside the map ─────────────────── */

@media (min-width: 768px) {

	.pmd-explorer {
		flex-direction: row;
		min-height: 480px;
	}

	.pmd-exp-panel {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		flex: none;
		width: var(--pmd-explorer-panel-width, 380px);
		max-width: 50%;
		height: auto;
		border-right: 1px solid var(--pmd-color-border);
		border-radius: 0;
		box-shadow: var(--pmd-shadow-md);
		transform: none;
	}

	.pmd-explorer.is-enhanced:not(.is-sheet-open) .pmd-exp-panel {
		transform: none;
	}

	.pmd-explorer.is-settled .pmd-exp-panel {
		transition: none;
	}

	.pmd-exp-panel::before {
		display: none;
	}

	.pmd-exp-controls {
		order: -1;
		padding: var(--pmd-space-4) var(--pmd-space-4) var(--pmd-space-3);
	}

	.pmd-exp-head {
		min-height: 0;
		padding: 0 var(--pmd-space-4) var(--pmd-space-2);
	}

	/* A small caption with a dot in the pins' colour. */
	.pmd-exp-count {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--pmd-color-text-muted);
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.pmd-exp-count::before {
		flex: none;
		width: 6px;
		height: 6px;
		background: var(--pmd-color-accent, var(--pmd-color-primary));
		border-radius: 50%;
		content: "";
	}

	.pmd-explorer .pmd-exp-toggle {
		display: none;
	}

	/* Room for the scroll buttons: the fade runs under them. */
	.pmd-exp-filters {
		--pmd-exp-fade: 72px;
	}

	.pmd-exp-filters .pmd-exp-chips {
		scroll-padding-inline: 44px;
	}

	.pmd-explorer .pmd-exp-scroll {
		display: inline-flex;
	}

	.pmd-explorer .pmd-exp-chip {
		height: 34px;
	}

	.pmd-exp-map {
		position: relative;
		inset: auto;
		flex: 1;
		min-width: 0;
	}

	/* No sheet over the map here: the attribution goes back to its corner. */
	.pmd-explorer.is-enhanced .pmd-exp-map .leaflet-bottom {
		bottom: 0;
	}

	/*
	 * Beside the panel the zoom buttons go to the bottom corner the
	 * floating button leaves free, level with it above the attribution.
	 */
	.pmd-explorer .leaflet-top.leaflet-left {
		top: auto;
		bottom: calc(var(--pmd-explorer-attribution, 20px) + var(--pmd-space-3));
	}

	.pmd-explorer .leaflet-top.leaflet-left .leaflet-control {
		margin-top: 0;
	}

	/* No sheet to clear here — just the attribution. */
	.pmd-explorer .pmd-exp-map-cta {
		bottom: calc(var(--pmd-explorer-attribution, 20px) + var(--pmd-space-3));
	}
}

/*
 * The focus rings on the explorer's buttons and search field carry
 * !important: themes routinely strip every button's and field's outline with
 * `outline: 0 !important` (the theme this was designed against does), which
 * would leave a keyboard user with no idea where they are. Links and the
 * map's pins are not touched by such rules and keep plain declarations.
 */

/*
 * Last, and !important: several elements explorer.js shows and hides with the
 * `hidden` attribute also carry a class that sets `display`, which would
 * otherwise win over the browser's own [hidden] rule.
 */
.pmd-explorer [hidden] {
	display: none !important;
}