/* =========================================================
   PET Pool & Home – Store Finder (WP Go Maps, map ID 1)
   Uses the theme tokens from storefront-child/assets/css/tokens.css
   Loaded by the PP Store Finder plugin on the store-finder page only.
   ========================================================= */

/* ---------- Layout ----------
   Any page text (paragraphs, headings…) spans the full width above, then the
   list (left) and map (right) share the next row. Placement uses columns +
   order instead of named areas so any amount of text can be added in the
   editor without touching the CSS. */
.entry-content:has(> .wpgmza_map) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	grid-template-areas: none !important;
	gap: var(--pp-sp-6);
	align-items: start;
}
/* Clearfix pseudo-elements would otherwise become empty grid rows */
.entry-content:has(> .wpgmza_map)::before,
.entry-content:has(> .wpgmza_map)::after { display: none !important; }

/* Page text: full width, above the store finder, spacing from the grid gap */
.entry-content:has(> .wpgmza_map) > * {
	grid-column: 1 / -1;
	margin: 0;
}
.entry-content:has(> .wpgmza_map) > p {
	max-width: 72ch;
	color: var(--pp-text-2);
	font-size: var(--pp-fs-lead);
	line-height: var(--pp-lh-loose);
}

.entry-content:has(> .wpgmza_map) > .wpgmza-standalone-component.wpgmza-auto-left {
	grid-area: auto / 1 / auto / 2 !important;
	order: 1;
	width: 100% !important;
	justify-self: stretch;
	max-height: none;
	float: none;
	display: flex !important;
	flex-direction: column;
	gap: var(--pp-sp-4);
}
.entry-content:has(> .wpgmza_map) > .wpgmza_map {
	grid-area: auto / 2 / auto / 3 !important;
	order: 2;
	width: 100% !important;
	justify-self: stretch;
	float: none;
	border-radius: var(--pp-r-xl);
	box-shadow: var(--pp-shadow-sm);
}

/* ---------- List column = exactly the map's height (desktop) ----------
   contain:size stops the list's content from making the row taller, so the
   row takes the map's height (600/650px, whatever the map is set to) and the
   list fills it, scrolling inside, with the pagination pinned at the bottom. */
@media (min-width: 901px) {
	.entry-content:has(> .wpgmza_map) { align-items: stretch; }
	.entry-content:has(> .wpgmza_map) > .wpgmza-standalone-component.wpgmza-auto-left {
		contain: size;
		align-self: stretch;
		height: auto !important;
		min-height: 0;
	}
	.wpgmza-standalone-component .wpgmza_marker_list_class {
		flex: 1 1 0;
		min-height: 0;
		max-height: none !important;
	}
}

/* ---------- Scrolling list ---------- */
.wpgmza-standalone-component .wpgmza_marker_list_class {
	max-height: 528px;                   /* fallback; the desktop rule above sizes it to the map */
	overflow-y: auto;
	padding: 2px var(--pp-sp-2) 2px 2px;
	display: flex;
	flex-direction: column;
	gap: var(--pp-sp-3);
	scrollbar-width: thin;
	scrollbar-color: var(--pp-border-strong) transparent;
	overscroll-behavior: contain;
}

/* ---------- Store card ---------- */
.wpgmza_marker_list_class .wpgmaps_mlist_row {
	position: relative;
	margin: 0 !important;
	padding: var(--pp-sp-4) var(--pp-sp-5) !important;
	background: var(--pp-bg) !important;
	border: var(--pp-bw-hair) solid var(--pp-border-strong) !important;
	border-left: var(--pp-bw-tab) solid var(--pp-magenta) !important;
	border-radius: var(--pp-r-lg) !important;
	box-shadow: var(--pp-shadow-xs);
	cursor: pointer;
	transition: box-shadow var(--pp-dur) var(--pp-ease), border-color var(--pp-dur) var(--pp-ease), transform var(--pp-dur) var(--pp-ease);
}
.wpgmza_marker_list_class .wpgmaps_mlist_row:hover {
	border-color: var(--pp-magenta) !important;
	box-shadow: var(--pp-shadow-card-hover);
	transform: translateY(-1px);
}
.wpgmza_marker_list_class .wpgmaps_mlist_row:focus-within {
	box-shadow: var(--pp-focus-ring);
}

/* Hide empty bits (no image, no description, no rating) */
.wpgmza_marker_list_class .wpgmza-basic-listing-image-holder:not(:has(img)),
.wpgmza_marker_list_class .wpgmza-desc:not(:has(:not(:empty))),
.wpgmza_marker_list_class .wpgmza-rating-container:empty {
	display: none !important;
}
.wpgmza_marker_list_class .wpgmza-basic-listing-content-holder,
.wpgmza_marker_list_class .wpgmza-content-address-holder {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Store name */
.wpgmza_marker_list_class .wpgmza_marker_title {
	margin: 0 0 var(--pp-sp-1);
	font-size: var(--pp-fs-h6);
	line-height: var(--pp-lh-snug);
	letter-spacing: -0.2px;
}
.wpgmza_marker_list_class .wpgmza_marker_title strong { font-weight: var(--pp-fw-semibold); }
.wpgmza_marker_list_class .wpgmza_marker_title a {
	color: var(--pp-ink);
	text-decoration: none;
}
.wpgmza_marker_list_class .wpgmaps_mlist_row:hover .wpgmza_marker_title a { color: var(--pp-magenta); }

/* Address */
.wpgmza_marker_list_class .wpgmza-address {
	margin: 0 0 var(--pp-sp-3);
	padding-bottom: var(--pp-sp-3);
	border-bottom: var(--pp-bw-hair) solid var(--pp-border);
	color: var(--pp-text-3);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}

/* Phone / email / hours */
.wpgmza_marker_list_class .wpgmza_custom_fields {
	display: flex;
	flex-direction: column;
	gap: var(--pp-sp-2);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
	color: var(--pp-text-2);
}
.wpgmza_marker_list_class .wpgmza_custom_fields > .wpgmza-custom-field-container {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	column-gap: var(--pp-sp-3);
	align-items: baseline;
	white-space: pre-line;
}
.wpgmza_marker_list_class .wpgmza-custom-field-label {
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-semibold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-text-4);
	white-space: nowrap;
}
.wpgmza_marker_list_class .wpgmza_custom_fields a {
	color: var(--pp-ink);
	font-weight: var(--pp-fw-medium);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.wpgmza_marker_list_class .wpgmza_custom_fields a:hover {
	color: var(--pp-magenta);
	text-decoration: underline;
}

/* View Store button */
.wpgmza_marker_list_class .wpgmza-listing-actions {
	display: flex;
	gap: var(--pp-sp-2);
	margin-top: var(--pp-sp-4);
}
.wpgmza_marker_list_class .wpgmza-link { margin: 0; }
/* Extra specificity + !important to beat the plugin's own button styles */
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions .wpgmza-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--pp-sp-2);
	margin: 0 !important;
	padding: 8px 18px !important;
	border: 0 !important;
	border-radius: var(--pp-r-pill) !important;
	background: var(--pp-magenta) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: var(--pp-fs-sm);
	font-weight: var(--pp-fw-semibold);
	text-decoration: none;
	transition: background var(--pp-dur-fast) var(--pp-ease);
}
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions .wpgmza-link a::after { content: "→"; }
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions .wpgmza-link a:hover { background: var(--pp-magenta-dark) !important; color: #fff !important; }
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions .wpgmza-link a:active { background: var(--pp-magenta-press) !important; }
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions .wpgmza-link a:focus-visible { outline: none; box-shadow: var(--pp-focus-ring) !important; }

/* Directions – secondary pill beside View Store (WP Go Maps prints it first;
   order moves it after the main action). Shared look with the info window. */
.wpgmza_marker_list_class .wpgmza-listing-actions { flex-wrap: wrap; align-items: center; }
.wpgmza_marker_list_class .wpgmza-listing-actions .wpgmza-link { order: 1; }
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions a.wpgmza_gd { order: 2; }

.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions a.wpgmza_gd,
.wpgmza_map .wpgmza-infowindow a.wpgmza_gd {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 7px 16px 7px 13px !important;     /* 1px border keeps it the same height as View Store */
	border: var(--pp-bw-hair) solid var(--pp-border-strong) !important;
	border-radius: var(--pp-r-pill) !important;
	background: var(--pp-bg) !important;
	box-shadow: none !important;
	color: var(--pp-ink) !important;
	font-size: var(--pp-fs-sm) !important;
	font-weight: var(--pp-fw-semibold) !important;
	line-height: inherit;
	text-decoration: none !important;
	cursor: pointer;
	transition: background var(--pp-dur-fast) var(--pp-ease), border-color var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease);
}
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions a.wpgmza_gd::before,
.wpgmza_map .wpgmza-infowindow a.wpgmza_gd::before {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: var(--pp-magenta);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions a.wpgmza_gd:hover,
.wpgmza_map .wpgmza-infowindow a.wpgmza_gd:hover {
	background: var(--pp-magenta-soft) !important;
	border-color: var(--pp-magenta) !important;
	color: var(--pp-magenta) !important;
}
.wpgmza-standalone-component .wpgmza_marker_list_class .wpgmza-listing-actions a.wpgmza_gd:focus-visible,
.wpgmza_map .wpgmza-infowindow a.wpgmza_gd:focus-visible { outline: none !important; box-shadow: var(--pp-focus-ring) !important; }

/* ---------- Pagination ----------
   ".wpgmza-pagination .paginationjs" adds specificity so these win over any
   older pagination rules still sitting in the WP Go Maps Custom CSS box. */
.wpgmza-pagination { height: fit-content !important; }
.wpgmza-pagination .paginationjs { display: flex; justify-content: center; }
.wpgmza-pagination .paginationjs ul {
	display: flex;
	justify-content: center;
	gap: var(--pp-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpgmza-pagination .paginationjs li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--pp-pager-btn) !important;
	height: var(--pp-pager-btn) !important;
	padding: 0;
	border: var(--pp-bw-hair) solid var(--pp-border-strong) !important;
	border-radius: var(--pp-r-pill) !important;
	background: var(--pp-bg) !important;
	box-shadow: none !important;
	color: var(--pp-ink) !important;
	font-weight: var(--pp-fw-semibold);
	cursor: pointer;
	transform: none !important;
	transition: background var(--pp-dur-fast) var(--pp-ease), border-color var(--pp-dur-fast) var(--pp-ease), color var(--pp-dur-fast) var(--pp-ease);
}
.wpgmza-pagination .paginationjs li:hover {
	background: var(--pp-magenta-soft) !important;
	border-color: var(--pp-magenta) !important;
	color: var(--pp-magenta) !important;
}
.wpgmza-pagination .paginationjs li.active,
.wpgmza-pagination .paginationjs li.active:hover {
	background: var(--pp-magenta) !important;
	border-color: var(--pp-magenta) !important;
	color: #fff !important;
}
.wpgmza-pagination .paginationjs li.disabled,
.wpgmza-pagination .paginationjs li.disabled:hover {
	opacity: .4;
	cursor: default;
	background: var(--pp-bg) !important;
	border-color: var(--pp-border-strong) !important;
	color: var(--pp-ink) !important;
}
.wpgmza-pagination .paginationjs li a {
	background: none !important;
	border: 0 !important;
	color: inherit !important;
	text-decoration: none !important;
}

/* ---------- Store locator bar (inside the map) ---------- */
.wpgmza_map .wpgmza-store-locator {
	display: flex !important;
	align-items: center;
	gap: var(--pp-sp-2);
	padding: 6px 6px 6px var(--pp-sp-4) !important;
	background: var(--pp-bg) !important;
	border-radius: var(--pp-r-pill) !important;
	box-shadow: var(--pp-shadow-card-hover) !important;
	font-family: var(--pp-font);
}
.wpgmza_map .wpgmza-store-locator label { display: none !important; }
.wpgmza_map .wpgmza-store-locator .wpgmza-address-container,
.wpgmza_map .wpgmza-store-locator .wpgmza-radius-container {
	display: flex;
	align-items: center;
	margin: 0 !important;
}
.wpgmza_map .wpgmza-store-locator .wpgmza-address-container { flex: 1 1 auto; min-width: 0; }
.wpgmza_map .wpgmza-store-locator input.addressInput,
.wpgmza_map .wpgmza-store-locator select.wpgmza-radius {
	height: 40px;
	border: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: var(--pp-ink);
	font: var(--pp-fw-regular) var(--pp-fs-body) var(--pp-font);
}
.wpgmza_map .wpgmza-store-locator input.addressInput { width: 100%; min-width: 0; padding: 0 !important; }
.wpgmza_map .wpgmza-store-locator input.addressInput::placeholder { color: var(--pp-text-4); }
.wpgmza_map .wpgmza-store-locator select.wpgmza-radius {
	padding: 0 var(--pp-sp-3) !important;
	border-left: var(--pp-bw-hair) solid var(--pp-border-strong) !important;
	border-radius: 0 !important;
	font-weight: var(--pp-fw-medium);
	cursor: pointer;
}
.wpgmza_map .wpgmza-store-locator:focus-within { box-shadow: var(--pp-focus-ring-input), var(--pp-shadow-card-hover) !important; }

/* "Use my location" + search icon buttons */
.wpgmza_map .wpgmza-store-locator .wpgmza-use-my-location {
	width: 36px; height: 36px; padding: 6px !important;
	border: 0 !important; background: transparent !important; box-shadow: none !important;
}
.wpgmza_map .wpgmza-store-locator .wpgmza-use-my-location svg {
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;               /* WP Go Maps adds 12px padding, which leaves no room to draw the icon */
}
.wpgmza_map .wpgmza-store-locator .wpgmza-use-my-location svg circle.circle_outer,
.wpgmza_map .wpgmza-store-locator .wpgmza-use-my-location svg .line { stroke: var(--pp-text-3); }
.wpgmza_map .wpgmza-store-locator .wpgmza-use-my-location svg circle.circle_inner { fill: var(--pp-magenta); }
.wpgmza_map .wpgmza-store-locator .wpgmza-use-my-location:hover svg circle.circle_outer,
.wpgmza_map .wpgmza-store-locator .wpgmza-use-my-location:hover svg .line { stroke: var(--pp-magenta); }

.wpgmza_map .wpgmza-store-locator svg.wpgmza-search {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	padding: 11px;
	border-radius: var(--pp-r-pill);
	background: var(--pp-magenta);
	cursor: pointer;
	transition: background var(--pp-dur-fast) var(--pp-ease);
}
.wpgmza_map .wpgmza-store-locator svg.wpgmza-search * { stroke: #fff !important; }
.wpgmza_map .wpgmza-store-locator svg.wpgmza-search:hover { background: var(--pp-magenta-dark); }
.wpgmza_map .wpgmza-store-locator svg.wpgmza-search:focus-visible { outline: none; box-shadow: var(--pp-focus-ring); }

/* ---------- Tablet / mobile: map on top, list below ---------- */
@media (max-width: 900px) {
	.entry-content:has(> .wpgmza_map) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--pp-sp-5);
	}
	/* text, then map, then list */
	.entry-content:has(> .wpgmza_map) > .wpgmza_map { grid-area: auto / 1 / auto / 2 !important; order: 1; }
	.entry-content:has(> .wpgmza_map) > .wpgmza-standalone-component.wpgmza-auto-left { grid-area: auto / 1 / auto / 2 !important; order: 2; }
	.entry-content:has(> .wpgmza_map) > .wpgmza_map { height: 460px !important; }
	.wpgmza-standalone-component .wpgmza_marker_list_class { max-height: none; overflow: visible; padding-right: 2px; }
	.wpgmza_marker_list_class .wpgmaps_mlist_row:hover { transform: none; }
}
@media (max-width: 480px) {
	.wpgmza_marker_list_class .wpgmza_custom_fields > .wpgmza-custom-field-container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2px;
	}
	.wpgmza_map .wpgmza-store-locator select.wpgmza-radius { padding: 0 var(--pp-sp-2) !important; }
}
@media (prefers-reduced-motion: reduce) {
	.wpgmza_marker_list_class .wpgmaps_mlist_row,
	.wpgmza-pagination .paginationjs li,
	.wpgmza_map .wpgmza-inner-stack.top { transition: none; transform: none !important; }
}


/* =========================================================
   MAP COMPONENTS
   ========================================================= */

/* Store locator bar: pinned to the top-left of the map, in the row the
   Map/Satellite switch used to occupy (hidden below – a store finder doesn't
   need satellite view), stopping short of the fullscreen button. */
.wpgmza_map .gm-style .gm-style-mtc-bbw { display: none !important; }
.wpgmza_map .wpgmza-inner-stack.top {
	top: var(--pp-sp-3) !important;
	left: var(--pp-sp-3) !important;
	right: 64px !important;              /* 40px fullscreen button + gaps */
	width: auto !important;
	/* On wide maps (.wpgmza-viewport-large) WP Go Maps centres the stack with
	   left:50% + translateX(-50%) + max-width:50%; undo all of it. */
	max-width: none !important;
	transform: none !important;
	justify-content: flex-start !important;
	pointer-events: none;                /* let map drags pass through the empty stack area */
}
.wpgmza_map .wpgmza-inner-stack.top > * { pointer-events: auto; }
.wpgmza_map .wpgmza-store-locator {
	width: 100% !important;
	max-width: 560px;
	margin: 0 !important;
}

/* Google controls: rounded, softer shadow, brand colours */
.wpgmza_map .gm-style .gm-style-mtc button,
.wpgmza_map .gm-style button.gm-fullscreen-control,
.wpgmza_map .gm-style .gm-svpc,
.wpgmza_map .gm-style .gm-bundled-control .gmnoprint > div {
	box-shadow: var(--pp-shadow-xs) !important;
	font-family: var(--pp-font) !important;
}
.wpgmza_map .gm-style .gm-style-mtc:first-child button { border-radius: var(--pp-r-md) 0 0 var(--pp-r-md) !important; }
.wpgmza_map .gm-style .gm-style-mtc:last-child button  { border-radius: 0 var(--pp-r-md) var(--pp-r-md) 0 !important; }
.wpgmza_map .gm-style .gm-style-mtc button {
	font-size: var(--pp-fs-sm) !important;
	color: var(--pp-text-3) !important;
}
.wpgmza_map .gm-style .gm-style-mtc button[aria-checked="true"],
.wpgmza_map .gm-style .gm-style-mtc button[aria-pressed="true"] {
	color: var(--pp-ink) !important;
	font-weight: var(--pp-fw-semibold) !important;
}
.wpgmza_map .gm-style .gm-style-mtc ul[role="menu"] {
	border-radius: 0 0 var(--pp-r-md) var(--pp-r-md);
	overflow: hidden;
}
.wpgmza_map .gm-style button.gm-fullscreen-control,
.wpgmza_map .gm-style .gm-svpc,
.wpgmza_map .gm-style .gm-bundled-control .gmnoprint > div {
	border-radius: var(--pp-r-md) !important;
	overflow: hidden;
}

/* Phone: tighter bar so the address field keeps enough room */
@media (max-width: 600px) {
	.wpgmza_map .wpgmza-store-locator { gap: var(--pp-sp-1); padding-left: 14px !important; }
	.wpgmza_map .wpgmza-store-locator select.wpgmza-radius {
		min-width: 0;
		width: 68px;
		padding: 0 4px 0 10px !important;
	}
	.wpgmza_map .wpgmza-store-locator .wpgmza-use-my-location { width: 32px; height: 32px; }
	.wpgmza_map .wpgmza-store-locator svg.wpgmza-search { width: 36px; height: 36px; padding: 10px; }
	.wpgmza_map .wpgmza-store-locator input.addressInput,
	.wpgmza_map .wpgmza-store-locator select.wpgmza-radius { height: 36px; font-size: 16px; } /* 16px stops iOS zooming in */
	.wpgmza_map .wpgmza-store-locator .wpgmza-radius-container { flex: 0 0 auto; }
}


/* While an info window is open, fade the search bar out so it never
   covers the window (Google auto-pans the window into view but doesn't
   know about the bar). It comes back as soon as the window is closed. */
.wpgmza_map .wpgmza-inner-stack.top {
	transition: opacity var(--pp-dur) var(--pp-ease), visibility var(--pp-dur);
}
.wpgmza_map:has(.gm-style-iw-c) .wpgmza-inner-stack.top {
	opacity: 0;
	visibility: hidden;
}


/* =========================================================
   MARKER INFO WINDOW (Google "classic" info window)
   ========================================================= */

.wpgmza_map .gm-style .gm-style-iw-c {
	padding: 0 !important;
	border-radius: var(--pp-r-xl) !important;
	border-top: var(--pp-bw-tab) solid var(--pp-magenta);
	box-shadow: var(--pp-shadow-mega) !important;
	max-width: min(340px, calc(100vw - 48px)) !important;
	font-family: var(--pp-font);
}
.wpgmza_map .gm-style .gm-style-iw-d {
	padding: var(--pp-sp-4) var(--pp-sp-5) var(--pp-sp-5) !important;
	overflow: auto !important;
	scrollbar-width: thin;
}
.wpgmza_map .gm-style .gm-style-iw-d > div { padding-top: 0 !important; }

/* Close button floats in the corner instead of taking a row */
.wpgmza_map .gm-style .gm-style-iw-chr {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
}
.wpgmza_map .gm-style .gm-style-iw-ch { display: none; }
.wpgmza_map .gm-style .gm-style-iw-chr button.gm-ui-hover-effect {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--pp-r-pill) !important;
	background: var(--pp-bg-sunken) !important;
	opacity: 1 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.wpgmza_map .gm-style .gm-style-iw-chr button.gm-ui-hover-effect span {
	margin: 0 !important;
	width: 16px !important;
	height: 16px !important;
	background-color: var(--pp-text-3) !important;
}
.wpgmza_map .gm-style .gm-style-iw-chr button.gm-ui-hover-effect:hover { background: var(--pp-magenta-soft) !important; }
.wpgmza_map .gm-style .gm-style-iw-chr button.gm-ui-hover-effect:hover span { background-color: var(--pp-magenta) !important; }

/* Content */
.wpgmza_map .wpgmza-infowindow {
	color: var(--pp-text-2);
	font-size: var(--pp-fs-sm);
	line-height: var(--pp-lh-body);
}
.wpgmza_map .wpgmza-infowindow .wpgmza_infowindow_title {
	margin: 0 40px var(--pp-sp-1) 0;      /* room for the close button */
	color: var(--pp-ink);
	font-size: var(--pp-fs-h6);
	font-weight: var(--pp-fw-semibold);
	line-height: var(--pp-lh-snug);
	letter-spacing: -0.2px;
}
.wpgmza_map .wpgmza-infowindow .wpgmza_infowindow_address {
	margin: 0 0 var(--pp-sp-3);
	padding-bottom: var(--pp-sp-3);
	border-bottom: var(--pp-bw-hair) solid var(--pp-border);
	color: var(--pp-text-3);
	font-size: var(--pp-fs-sm);
}
.wpgmza_map .wpgmza-infowindow .wpgmza_infowindow_description { margin: 0; }
.wpgmza_map .wpgmza-infowindow .wpgmza-integration-fields-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--pp-sp-2);
}
.wpgmza_map .wpgmza-infowindow .wpgmza-integration-field {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	column-gap: var(--pp-sp-3);
	align-items: baseline;
	margin: 0 !important;
}
.wpgmza_map .wpgmza-infowindow .wpgmza-integration-field-label {
	font-size: var(--pp-fs-2xs);
	font-weight: var(--pp-fw-semibold);
	letter-spacing: var(--pp-ls-kicker);
	text-transform: uppercase;
	color: var(--pp-text-4);
	white-space: nowrap;
}
.wpgmza_map .wpgmza-infowindow .wpgmza-integration-field-value {
	white-space: pre-line !important;
	color: var(--pp-text-2);
	min-width: 0;
}
.wpgmza_map .wpgmza-infowindow .wpgmza-integration-field-value a {
	color: var(--pp-ink);
	font-weight: var(--pp-fw-medium);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.wpgmza_map .wpgmza-infowindow .wpgmza-integration-field-value a:hover { color: var(--pp-magenta); text-decoration: underline; }

/* View Store button – same as the list */
.wpgmza_map .wpgmza-infowindow p.wpgmza_infowindow_link { margin: var(--pp-sp-4) 0 0 !important; }
.wpgmza_map .wpgmza-infowindow a.wpgmza_infowindow_link {
	display: inline-flex !important;
	align-items: center;
	gap: var(--pp-sp-2);
	padding: 8px 18px !important;
	border: 0 !important;
	border-radius: var(--pp-r-pill) !important;
	background: var(--pp-magenta) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: var(--pp-fs-sm) !important;
	font-weight: var(--pp-fw-semibold) !important;
	text-decoration: none !important;
	transition: background var(--pp-dur-fast) var(--pp-ease);
}
.wpgmza_map .wpgmza-infowindow a.wpgmza_infowindow_link::after { content: "→"; }
.wpgmza_map .wpgmza-infowindow a.wpgmza_infowindow_link:hover { background: var(--pp-magenta-dark) !important; }
.wpgmza_map .wpgmza-infowindow a.wpgmza_infowindow_link:focus-visible { outline: none !important; box-shadow: var(--pp-focus-ring) !important; }

/* Distance from the searched address ("92km away"). WP Go Maps prints it as
   the last child (<p class="sl-distance">), loose under the button. The
   window becomes a flex column so it can move up under the store name, where
   it reads as part of the heading, and it is styled as a small badge. */
.wpgmza_map .wpgmza-infowindow {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	column-gap: var(--pp-sp-2);
}
/* Every block takes a full line, except the two buttons, which share one. */
.wpgmza_map .wpgmza-infowindow > * { flex: 0 1 100%; min-width: 0; }
.wpgmza_map .wpgmza-infowindow > p.wpgmza_infowindow_link,
.wpgmza_map .wpgmza-infowindow > p:has(> a.wpgmza_gd) {
	flex: 0 0 auto;
	margin: var(--pp-sp-4) 0 0 !important;
}
.wpgmza_map .wpgmza-infowindow .wpgmza_infowindow_title { order: -2; }
.wpgmza_map .wpgmza-infowindow p.sl-distance {
	order: -1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 2px 0 var(--pp-sp-2) !important;
	padding: 3px 10px 3px 8px;
	border-radius: var(--pp-r-pill);
	background: var(--pp-magenta-soft);
	color: var(--pp-magenta-dark);
	font-size: var(--pp-fs-xs);
	font-weight: var(--pp-fw-semibold);
	line-height: var(--pp-lh-snug);
	white-space: nowrap;
}
.wpgmza_map .wpgmza-infowindow p.sl-distance::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wpgmza_map .wpgmza-infowindow p.sl-distance:empty { display: none; }

@media (max-width: 480px) {
	.wpgmza_map .wpgmza-infowindow .wpgmza-integration-field {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2px;
	}
	.wpgmza_map .gm-style .gm-style-iw-d { padding: var(--pp-sp-3) var(--pp-sp-4) var(--pp-sp-4) !important; }
}


/* =========================================================
   CONTENT-PAGE TEMPLATE FIXES
   The "Content Page (Full)" template wraps the page in .pp-post-content,
   and blog.css styles every img / p / li in there for articles
   (img: display:block; width:100%; margin:1.5rem 0; border-radius:10px).
   Inside the map that breaks Google's tiles and control icons (e.g. all
   four zoom/pegman state images showing at once), so undo it here.
   ========================================================= */

.pp-post-content .wpgmza_map img {
	width: revert;                       /* Google sets the real size inline */
	height: revert;
	max-width: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	/* no display override: Google shows/hides state images with display */
}
.pp-post-content .wpgmza_map p,
.pp-post-content .wpgmza_map ul,
.pp-post-content .wpgmza_map li,
.pp-post-content .wpgmza-pagination li { margin: 0; }

/* Google's own control-icon rules, re-stated with enough specificity to beat
   blog.css's ".pp-post-content img { display:block }": only the normal-state
   image shows, the hover/active/disabled ones swap in on interaction. */
.wpgmza_map .gm-style .gm-control-active > img {
	box-sizing: content-box;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
}
.wpgmza_map .gm-style .gm-control-active > img:first-child { display: block; }
.wpgmza_map .gm-style .gm-control-active:is(:hover, :focus, :active, :disabled) > img:first-child { display: none; }
.wpgmza_map .gm-style .gm-control-active:is(:hover, :focus) > img:nth-child(2) { display: block; }
.wpgmza_map .gm-style .gm-control-active:active > img:nth-child(3) { display: block; }
.wpgmza_map .gm-style .gm-control-active:disabled > img:nth-child(4) { display: block; }


/* =========================================================
   MOBILE / TABLET MAP CONTROLS
   ========================================================= */
@media (max-width: 900px) {
	/* Camera (pan) control and Street View pegman aren't needed on touch
	   screens (drag / pinch does the same) and crowd a small map. */
	.wpgmza_map .gm-style gmp-internal-camera-control,
	.wpgmza_map .gm-style .gm-svpc { display: none !important; }

	/* While an info window is open, fade out zoom + fullscreen so they never
	   sit on top of it; they come back when it's closed. */
	.wpgmza_map .gm-style button.gm-fullscreen-control,
	.wpgmza_map .gm-style .gmnoprint:has(button[aria-label="Zoom in"]) {
		transition: opacity var(--pp-dur) var(--pp-ease), visibility var(--pp-dur);
	}
	.wpgmza_map:has(.gm-style-iw-c) .gm-style button.gm-fullscreen-control,
	.wpgmza_map:has(.gm-style-iw-c) .gm-style .gmnoprint:has(button[aria-label="Zoom in"]) {
		opacity: 0;
		visibility: hidden;
	}

	/* Keep the info window inside the map (page gutters + map edges). */
	.wpgmza_map .gm-style .gm-style-iw-c { max-width: calc(100vw - 88px) !important; }
}