.section-locator {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 1.5rem;
	gap: 1.5rem;
/*	border: 1px dashed #ccc;*/
}

/*
<div class="latitude-longitude-wrapper">
	<p class="latitude-wrapper">
		<span class="latitude-label">user latitude:</span>
		<span class="latitude"></span>
	</p>
	<p class="longitude-wrapper">
		<span class="longitude-label">user longitude:</span>
		<span class="longitude"></span>
	</p>
*/

.latitude-longitude-wrapper {
/*	display: flex;*/
	display: none;
	width: 100%;
	justify-content: center;
	gap: 1.5rem;
	/*	border: 1px dotted red;*/
}


/* btn.use-current-location */
.use-current-location {
	margin-bottom: .9rem;
	font-size: .99rem;
	font-weight: 900;
	text-align: left;
	text-transform: capitalize;
	border-bottom: 1px dashed var(--theme-accent-color-1);
	color: var(--theme-accent-color-1);
}
.use-current-location.off { display: none; }

/* ==================================== */
/* USER LOCATION INPUT & RANGE FORM */
.locator-form {
/*	border: 1px dashed #ccc;*/
}

.locator-form fieldset {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 1.5rem;
/*	margin-bottom: 3rem;*/
	padding: 0;
}

.locator-form .location-input {
/*	flex: 0 1;*/
	flex: 1 1;
	margin: 0;
	max-width: 45ch;

}
.locator-form label {  }
.locator-form #location-input { max-width: 45ch; }
.locator-form .select-wrapper.select-range-wrapper {
	margin: 0;
	max-width: fit-content;
}

.locator-form .buttons { width: 100%; }

/*.btn-find-retailers { margin-bottom: 1.5rem; }*/


/* ==================================== */

.results-wrapper {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	flex-flow: column nowrap;
	margin-bottom: 1.5rem;
	gap: 0 3rem;
/*	border: 1px dashed #ccc;*/
}

.results-wrapper .results-error-message {
	display: none;
	background: transparent;
	padding: 0;
/*	border: 1px solid red;*/
}
.results-wrapper .results-error-message.on {
	display: flex;
	flex: 1 0 100%;
}

.results-wrapper .results-heading {
	display: none;
	flex: 1 1 100%;
	margin-bottom: 1.5rem;
	padding: 0;
	text-align: left;
	text-transform: uppercase;
	font-weight: 600;
	background: transparent;
/*	border: 1px solid blue;*/
}
.results-wrapper .results-heading.on { display: flex; }

.results-count { display: none; margin-right: .45rem; }
.results-count.on { display: flex; }


.showing-count-wrapper { display: none; }
/*.showing-count-wrapper.on { display: inline-block; }*/
.showing-count { padding-left: .45rem; }


.locations,
.map-container {
	min-height: 450px;
	margin-bottom: 1.5rem;
}

.locations {
	order: 1;
	flex: 0 1 30ch;
	display: flex;
	flex-flow: column nowrap;
	max-height: 450px;
	padding-left: 3.9ch; /* e.g., results in triple digits */
	overflow-y: scroll;
	list-style: decimal outside;
}

.map-container {
	order: 0;
	max-width: 750px;
	min-height: 450px;
	flex: 1 1 calc(100% - (30ch + 3rem));
}

/* li.location */
.location {
	margin-bottom: 1.5rem;
	flex: 1 1 30ch;
}

.retailer-ix { margin-right: .45rem; }
.retailer-name { text-transform: uppercase; }

/* 30ch ~=315px */
@media screen and (min-width: 900px) {
	.results-wrapper {
		flex-flow: row wrap;
		gap: 0 3rem;
	}

	.locations { order: 0; }

	.map-container { order: 1; }


}
/* see location.js => let markerPinIcon = ... */
img[src="https://jiecosystem.s3.us-east-1.amazonaws.com/b2bcommonimages/mapMarker-pixel-36x.png"] {
	/* actually the map sets inline width, height on the parent el */
	/*	width: 36px;*/
	/*	height: 36px;*/
	/*	color: lime !important; ... NOPE, it's a ghost in the parent el */
	background: #fff;
	border: 1px solid red !important;
	border-radius: 50%;
}