:root {
	--list-width-pct: 0.26;
	--list-width-max: 300px;
	--list-width: calc(100% * var(--list-width-pct));
	--detail-width: calc(100% * var(--list-width-pct));
	--detail-margin: 15px;
	--detail-padding-horz: 15px;
	--detail-padding-vert: 15px;
}
body.jjll-slao #wpsl-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: initial;
	font-size: 16px; /* Typical font-size is 17px (1.0625em), 13px (0.8125em), and 10px (0.625em) */

	/* Theme */
	font-size: 16px;
}

/**
 * SEARCH FILTERS
 */
body.jjll-slao .wpsl-search {
	/* Reset WPSL styles */
	margin: unset;
  padding: unset;
  background: unset;
  color: initial;
  text-align: initial;

	position: relative;
	z-index: 100;

	/* Theme */
	margin: 0 0 20px 0;
}
body.jjll-slao #wpsl-search-wrap.hidden {
	visibility: hidden;
}
body.jjll-slao #wpsl-search-wrap div {
	margin: 0;
	float: unset;
}
#locator-search-wrapper {
	/* Theme */
	width: 100%;
	/* Hide these design placeholders for now. TODO: Delete later */
	display: none;
}
body.jjll-slao #wpsl-search-wrap #locator-search-wrapper {
	width: 100%;
	display: block;
}
#locator-controls {
	display: flex;
	flex-direction: column;
}
body.jjll-slao #wpsl-search-wrap .filters {
	--num-filters: 6;
	--gap-column: 50px;
	--gap-row: 25px;
	display: flex;
  flex-direction: row;
	flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--gap-column) var(--gap-row);
}
body.jjll-slao #wpsl-search-wrap .filters-hidden {
	display: none;
	justify-content: left;
}
body.jjll-slao #wpsl-search-wrap .controls-buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
body.jjll-slao #wpsl-search-wrap .filter-wrapper {
}
body.jjll-slao #wpsl-search-wrap .filter-wrapper:has(#wpsl-category) {
	display: none;
}
body.jjll-slao #wpsl-search-wrap .filters:not(.filters-hidden) .filter-wrapper {
	width: calc((100% - (var(--gap-column) * (var(--num-filters) - 1))) / var(--num-filters));
	flex: 1 1 auto;
}
body.jjll-slao #wpsl-search-wrap label,
body.jjll-slao #wpsl-search-wrap .filter-wrapper label.filter-label {
	margin: 0;
  font-size: 16px;
  line-height: normal;

	/* Theme */
	/* font-size: 1.125em; */
	font-size: 1.0625em;
	font-weight: 500;
	margin: 0 0 0.294em 0;
	white-space: nowrap;
}
body.jjll-slao #wpsl-search-wrap .filter-wrapper input {
	width: 100%;
	box-sizing: border-box;
	font-size: 13.3333px;

	/* Theme */
	/* font-size: 1.125em; */
	font-size: 1.0625em;
	width: 100%;
	min-height: 2.5rem;
	/* padding: 0.6em 2.64em 0.6em 0.9em; */
	/* padding: 0.444em 0.333em 0.444em 0.444em; */
	padding: 0.375em 0.333em 0.375em 0.444em;
  font-family: 'Maven Pro', sans-serif !important;
	color: #000000;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 6px;
	line-height: 1.4;


}
body.jjll-slao #wpsl-search-wrap select {
	display: initial;

	/* Theme */
	/* font-size: 1.125em; */
	font-size: 1.0625em;
	width: 100%;
  font-family: 'Maven Pro', sans-serif !important;
	padding: 0.6em 2.2em 2.199em 0.667em;
  /* padding: 0.444em 2.2em 1.955em 0.667em; */
  min-height: 2.5222em;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 6px;
  color: #000000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.667rem center;
  background-size: 1.778rem;
	text-indent: 0.01px;
  text-overflow: '';

}
body.jjll-slao #wpsl-search-wrap .jjll-slao-multiple-select-wrapper {
	/* Theme */
	/* font-size: 1.125em; */
	font-size: 1.0625em;
}
body.jjll-slao #wpsl-search-wrap .ms-parent {
	/* Theme */
}
body.jjll-slao #wpsl-search-wrap .jjll-slao-multiple-select-wrapper .ms-choice {
	/* Theme */
	/* font-size set by .jjll-slao-multiple-select-wrapper; no need to set it here */
	/* font-size: 1.125em; */
	/* font-size: 1.0625em; */

	/* height: calc(1.4em + 0.375em + 0.375em); /* If we must set the height, it's the padding plus the line-height */
	height: unset;
	padding: 0.375em 0.333em 0.375em 0.444em;
  border-radius: 6px;
  border: 1px solid #000000;
  line-height: 1.4;
}
body.jjll-slao #wpsl-search-wrap .ms-placeholder {
	/* Theme */
}
body.jjll-slao #wpsl-search-wrap .ms-icon {
	/* Theme */
}
body.jjll-slao #wpsl-search-wrap .ms-drop {
	/* Theme */
}
.ms-parent.filter.multiple-select.wpsl-custom-dropdown {
	width: 100% !important;
}
body.jjll-slao #wpsl-search-wrap #wpsl-search-btn {
	width: inherit;
	margin: 0;
	text-transform: uppercase !important;
	box-shadow: unset;
}


/**
 * MAP
 */
body.jjll-slao #jjll-slao-map-wrap {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
body.jjll-slao #wpsl-gmap {
	position: relative;
  overflow: hidden;
  /* width: calc(100% - (100% * var(--list-width-pct))); */
	width: calc(100% - var(--list-width));
  height: auto !important;
  left: 0;
  aspect-ratio: calc(16 * (1 - var(--list-width-pct))) / 9;
  box-sizing: border-box;

	/* Theme */
	display: block !important; /* Don't know why it's hidden??? */
}
/** DEFAULT GOOGLE MAPS CONTROLS **/
body.jjll-slao #wpsl-gmap .gm-fullscreen-control {
    display: none !important;
}
/** CONTROLS CONTAINER **/
#wpsl-map-addl-controls {
	position: absolute;
	left: var(--list-width);
	top: 0;
	width: calc(100% - var(--list-width));
	height: 100%;
	pointer-events: none;
}
/* Container positioning when store detail is visible */
#wpsl-wrap:has(#wpsl-store-detail) #wpsl-map-addl-controls {
	--left: calc(var(--list-width) + var(--detail-width) + (var(--detail-margin) * 2));
	left: var(--left);
	width: calc(100% - var(--left));
}
/** SEARCH THIS AREA BUTTON **/
#wpsl-button-search-this-area {
	white-space: normal;

	background: transparent;
  border-radius: 0;
  border: 0;
  font: inherit;
  list-style: none;
  margin: 0;
  outline: 0;
  overflow: visible;
  padding: 0;
  vertical-align: baseline;

	color: inherit;

	font-family: "Google Sans",Roboto,Arial,sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
  line-height: 1.25rem;
  text-transform: none;

	display: none;
  left: -50%;
  position: relative;
  margin: 8px auto 0;

	display: -moz-box;
  display: flex;

	top: 50px;

	/* Default positioning */
	top: var(--detail-margin);
	left: 0;
	margin: 0 auto;

	pointer-events: auto;

	/* Theme */
	font-size: 0.875em;
}
#wpsl-button-search-this-area:not(.visible) {
	display: none;
}
#wpsl-button-search-this-area .button-inner {
	/* white-space: normal; */

	font: inherit;
  /* list-style: none; */

	font-family: "Google Sans",Roboto,Arial,sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
  line-height: 1.25rem;
  text-transform: none;

	background: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgba(60,64,67,0.3),0 1px 3px 1px rgba(60,64,67,0.15);

	background-color: #ffffff;
  border-radius: 16px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
  align-items: center;
  height: 32px;
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 0 12px;
  position: relative;

	/* Theme */
	font-size: 0.875em;
}
#wpsl-button-search-this-area .button-bkgd {
	/* white-space: normal; */

	/* font: inherit; */
  /* list-style: none; */

	font-family: "Google Sans",Roboto,Arial,sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
  line-height: 1.25rem;
  text-transform: none;

	/* color: #1f1f1f); */
  /* cursor: pointer; */

	position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

	border-radius: 16px;

	/* Theme */
	font-size: 0.875em;
}
#wpsl-button-search-this-area .button-icon {
	font: inherit;
  list-style: none;

	/* color: #1f1f1f; */
  /* cursor: pointer; */

	-moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;

	font-family: "Google Symbols";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-optical-sizing: none;

	margin: 0 4px 0 -4px;

	font-size: 18px;

	font-family: 'FontAwesome';

	/* Theme */
	font-size: 1.5em;
}
#wpsl-button-search-this-area .button-text {
	/* white-space: normal; */

	/* font: inherit; */
  /* list-style: none; */

	font-family: "Google Sans",Roboto,Arial,sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
  line-height: 1.25rem;
  text-transform: none;

	/* color: #1f1f1f; */
  /* cursor: pointer; */

	/* Theme */
	font-size: 0.875em;
}

/**
 * RESULTS LIST
 */
body.jjll-slao #wpsl-result-list {
	position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--list-width);
  background-color: #ffffff;
  margin: 0;
  border-left: 1px solid #ccc;
  z-index: 1;
  box-shadow: 5px 0px 12px rgba(0, 0, 0, 0.25);
}
body.jjll-slao #wpsl-stores {
	height: 100% !important;
}

/**
 * STORE DETAIL
 */
#wpsl-store-detail {
	position: relative;
	left: calc(var(--list-width) + var(--detail-margin));
	top: var(--detail-margin);
	width: var(--detail-width);
	height: auto;
	max-height: calc(100% - (var(--detail-margin) * 2));
	box-sizing: border-box;
	z-index: 2;
	overflow: hidden;
	display: flex;
	flex-direction: column;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.25);
}
/** Close button **/
#wpsl-store-detail .close-button {
	position: absolute;
	top: 8px;
	/* right: 18px; */
	right: 8px;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	z-index: 1; /* Above detail content */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border: none;
	border-radius: 100%;
	box-shadow: 0 1px 2px rgba(60,64,67,0.3),0 1px 3px 1px rgba(60,64,67,0.15);
}
#wpsl-store-detail .close-button:is(:hover, :focus, :active) {
	background-color: hsl(0,0%,96%);
	cursor: pointer;
}
#wpsl-store-detail .close-button svg {
}
/** Controls top/bottom **/
#wpsl-wrap #wpsl-store-detail .controls-top,
#wpsl-wrap #wpsl-store-detail .controls-bottom {
	width: 100%;
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}
#wpsl-store-detail .controls-top {
	margin: 0;
	padding: var(--detail-padding-vert) 52px; var(--detail-padding-vert) var(--detail-padding-horz);
}
#wpsl-store-detail .controls-bottom {
	margin: 0;
	padding: var(--detail-padding-vert) 0 var(--detail-padding-vert) var(--detail-padding-horz);
}
/** Store name **/
#wpsl-store-detail  .name-container {
	padding-left: var(--detail-padding-horz);
	padding-right: 52px;
}
#wpsl-store-detail  .name {}
/** Scrolling store detail content **/
#wpsl-store-detail .scroll-container {
	position: static;
	height: 100%;
  /* overflow: hidden; */
	/* overflow-y: scroll; */
	overflow: hidden auto;
	/* -ms-overflow-style: none; /* Internet Explorer and Edge */
	/* scrollbar-width: none;    /* Firefox */
}
/* For Chrome, Safari, Opera, and other WebKit-based browsers */
#wpsl-store-detail .scroll-container::-webkit-scrollbar {
	/* display: none; */
}
.wpsl-store-detail-content {
	position: static;
	height: auto;
	padding: var(--detail-padding-vert) 0 var(--detail-padding-vert) var(--detail-padding-horz);
}
.wpsl-store-detail-content ul.contact {
	padding: 0;
	list-style-type: none;
}
#wpsl-store-detail .controls-bottom {
	margin: 0;
	padding: var(--detail-padding-vert) var(--detail-padding-horz) var(--detail-padding-vert) var(--detail-padding-horz);
}

/* TABLET BREAKPOINT: list:map is 1:2 detail stacks over list. Detail slides in from side and has back instead of close button */

@media (max-width: 1023px) {
	:root {
		--list-width-pct: 0.33;
	}
	/* Hide real variables behind a class we can quickly toggle in dev tools */
	body.page.recycling-directory.jjll-slao #wpsl-store-detail {
		left: 20px;
	}
	body.page.recycling-directory.jjll-slao #wpsl-gmap {
		margin-top: 0;
		margin-bottom: 0;
		float: right;
		height: 100% !important;
	}

}

@media (max-width: 767px) {
	:root {
		--list-width-pct: 0.4;
	}
	body.page.recycling-directory.jjll-slao #jjll-slao-map-wrap {
		/* width: calc(100% + 30px); */
		/* left: -15px; */
		aspect-ratio: 4 / 3;
	}
}

/* MOBILE BREAKPOINT: list stacks over filters and map, detail stacks over list. List has close button. */
@media (max-width: 550px) {
	:root {
		--list-width-pct: 1;
	}
	body.page.recycling-directory.jjll-slao #jjll-slao-map-wrap {
		display: flex;
		flex-direction: column-reverse;
		aspect-ratio: unset;
	}
	/* Hide real variables behind a class we can quickly toggle in dev tools */
	body.page.recycling-directory.jjll-slao #wpsl-search-wrap .filters {
		flex-direction: column;
	}
	body.page.recycling-directory.jjll-slao #wpsl-search-wrap .filters:not(.filters-hidden) .filter-wrapper {
		width: 100%;
	}
	body.page.recycling-directory #wpsl-search-wrap .filter-wrapper input {
		width: 100% !important;
	}
	body.page.recycling-directory.jjll-slao #wpsl-gmap {
		position: relative;
		overflow: hidden;
		width: 100%;
		aspect-ratio: 1 / 1;
		height: auto !important;
	}
	body.page.recycling-directory #wpsl-wrap #wpsl-result-list {
		aspect-ratio: 1 / 1;
	  width: 100%;
	  height: auto;
	  position: relative;
	}
	body.page.recycling-directory.jjll-slao #jjll-slao-map-wrap {
		/* width: calc(100% + 30px); */
		/* left: -15px; */
		aspect-ratio: 3 / 5;
	}
	body.page.recycling-directory.jjll-slao #wpsl-store-detail {
		left: 15px;
    width: calc(100% - 30px);
    top: 15px;
    position: absolute;
    aspect-ratio: 1 / 1.066;
	}
}