/* Public nursery page (nursery-availability/<id>/<name>, page availability_list) in the look of
   the account pages: Figtree, flat rounded cards, rounded tabs, dark grey table header.
   index.php loads this file and adds the nursery-page body class on that page only. */

body.nursery-page #bodyMainTd .mainBodyPadding {
	font: 14px/1.5 Figtree, system-ui, sans-serif;
	color: #1D2A22;
	text-align: left;
}
body.nursery-page #bodyMainTd .mainBodyPadding a {
	color: #1B5596;
}

/* ---- Header: logo, then the name (smaller when there is a logo), description, contact details ---- */
body.nursery-page .nurseryHead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "logo" "name" "desc" "info";
	margin-bottom: 24px;
}
body.nursery-page .nurseryHead.noLogo {
	grid-template-areas: "name" "desc" "info";
}
body.nursery-page .nurseryLogo {
	grid-area: logo;
	margin: 0 0 14px;
}
/* wide logos fill the width they're allowed, tall ones stop at a height */
body.nursery-page .nurseryLogo img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(420px, 100%);
	max-height: 160px;
}
body.nursery-page .nurseryName {
	grid-area: name;
	margin: 0 0 10px;
}
body.nursery-page .nurseryHead.hasLogo .nurseryName {
	font-size: 22px;
	line-height: 1.25;
}
body.nursery-page .nurseryHead .nurseryDesc {
	grid-area: desc;
	max-width: 900px;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #43514A;
	font: 15px/1.6 Figtree, system-ui, sans-serif;
}
body.nursery-page .nurseryDesc p {
	margin: 0 0 10px;
}
body.nursery-page .nurseryDesc > :last-child {
	margin-bottom: 0;
}
body.nursery-page .nurseryDesc ul,
body.nursery-page .nurseryDesc ol {
	margin: 0 0 10px 1.4em;
}
body.nursery-page .nurseryInfo {
	grid-area: info;
}
body.nursery-page .nurseryAnnounce {
	margin: 0 0 12px;
	padding: 12px 16px;
	border: 1px solid #CFDCEB;
	border-radius: 12px;
	background: #E8EFF7;
	font: 600 14px/1.5 Figtree, system-ui, sans-serif;
	color: #1D2A22;
}
body.nursery-page .nurseryFacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
body.nursery-page .nurseryFact {
	padding: 14px 16px;
	border: 1px solid #E4E6E3;
	border-radius: 12px;
	background: #fff;
	font: 14px/1.6 Figtree, system-ui, sans-serif;
	color: #1D2A22;
	overflow-wrap: anywhere;
}
body.nursery-page .nurseryFactLabel {
	margin: 0 0 4px;
	color: #5B6A62;
	font: 800 11px/1.4 Figtree, system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.6px;
}
body.nursery-page .nurseryLocked {
	color: #A41515;
	font-weight: 600;
}

/* ---- Tabs ---- */
body.nursery-page #tabs {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	font-family: Figtree, system-ui, sans-serif;
}
body.nursery-page #tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid #E4E6E3;
	border-radius: 0;
	background: none;
}
body.nursery-page #tabs ul.tabs li {
	float: none;
	margin: 0 0 -1px;
	padding: 0;
	border: 1px solid #E4E6E3;
	border-radius: 8px 8px 0 0;
	background: #F1F3F0;
	white-space: nowrap;
}
body.nursery-page #tabs ul.tabs li a {
	float: none;
	display: block;
	padding: 9px 18px;
	color: #43514A;
	font: 600 14px/18px Figtree, system-ui, sans-serif;
	text-decoration: none;
}
body.nursery-page #tabs ul.tabs li.ui-tabs-active {
	border-bottom-color: #fff;
	background: #fff;
}
body.nursery-page #tabs ul.tabs li.ui-tabs-active a {
	color: #1D2A22;
}
body.nursery-page #tabs .tab_container {
	padding: 18px 0 0;
	border: 0;
	background: none;
}

/* ---- Buttons and the filter row ---- */
body.nursery-page #bodyMainTd .mainBodyPadding .textButton {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid #3E7A0F;
	border-radius: 8px;
	background: #3E7A0F;
	color: #fff;
	font: 600 14px/18px Figtree, system-ui, sans-serif;
	text-decoration: none;
	text-transform: none;
	vertical-align: middle;
}
body.nursery-page #bodyMainTd .mainBodyPadding .textButton:hover,
body.nursery-page #bodyMainTd .mainBodyPadding .textButton:focus {
	border-color: #33660C;
	background: #33660C;
	color: #fff;
	text-decoration: none;
}
body.nursery-page .nurseryFilter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
}
body.nursery-page .nurseryFilter label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
body.nursery-page #plant_name_filter,
body.nursery-page #allied_name_filter,
body.nursery-page #services_text_filter {
	flex: 1 1 220px;
	max-width: 360px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid #CDD5CB;
	border-radius: 8px;
	background: #fff;
	color: #1D2A22;
	font: 15px Figtree, system-ui, sans-serif;
}
body.nursery-page #plant_name_filter:focus {
	border-color: #1B5596;
	outline: none;
	box-shadow: 0 0 0 3px rgba(27, 85, 150, 0.15);
}
body.nursery-page #bodyMainTd .mainBodyPadding .textButton.nurserySecondary {
	border-color: #CDD5CB;
	background: #fff;
	color: #1D2A22;
}
body.nursery-page #bodyMainTd .mainBodyPadding .textButton.nurserySecondary:hover,
body.nursery-page #bodyMainTd .mainBodyPadding .textButton.nurserySecondary:focus {
	border-color: #9AA69C;
	background: #F1F3F0;
	color: #1D2A22;
}
body.nursery-page #plantlist .poweredByTd {
	margin: 0 0 8px;
	color: #5B6A62;
	font: 12px Figtree, system-ui, sans-serif;
	text-align: right;
}
body.nursery-page #plantlist .poweredByTd a,
body.nursery-page #plantlist .poweredByTd font {
	color: #1D2A22 !important;
	font: 700 12px Figtree, system-ui, sans-serif !important;
	text-decoration: none;
}
body.nursery-page .nurseryLoading {
	padding: 40px 0;
	color: #5B6A62;
	text-align: center;
	font-weight: 600;
}

/* ---- The plant list (markup and base styles from availability_list_plants2.php) ---- */
body.nursery-page .availability_table {
	border: 1px solid #E4E6E3;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: none;
	background: #fff;
	font: 14px/1.45 Figtree, system-ui, sans-serif;
	color: #1D2A22;
}
body.nursery-page .availability_table thead tr {
	background: #3E484F;
}
body.nursery-page .availability_table th {
	padding: 11px 12px;
	background-color: #3E484F;
	color: #fff;
	font: 800 12px/1.4 Figtree, system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
body.nursery-page .availability_table tbody tr:nth-child(odd),
body.nursery-page .availability_table tbody tr:nth-child(even) {
	background-color: #fff;
}
body.nursery-page .availability_table tbody td {
	padding: 11px 12px;
	border-top: 1px solid #E8EAE7;
	color: #1D2A22;
	vertical-align: top;
}
body.nursery-page .availability_table tbody tr:hover td {
	background: #F7F8F6;
}
body.nursery-page .availability_table td.name {
	font-weight: 600;
}
body.nursery-page .availability_table td.description {
	color: #43514A;
}
body.nursery-page #bodyMainTd .mainBodyPadding .availability_table a.invcam {
	color: #3E7A0F;
}
body.nursery-page #bodyMainTd .mainBodyPadding .availability_table a.invcam:hover {
	color: #33660C;
}
body.nursery-page .availability_table .plantDetails {
	font-weight: 400;
}

/* ---- Images tab ---- */
body.nursery-page #gallery .plantImageWrapper {
	border-color: #E4E6E3;
	border-radius: 12px;
	box-shadow: none;
}
body.nursery-page #gallery .name_wrapper h3 {
	font: 700 16px/1.3 Figtree, system-ui, sans-serif;
	color: #1D2A22;
}
body.nursery-page #gallery .commonnames,
body.nursery-page #gallery .imageDesc {
	font-family: Figtree, system-ui, sans-serif;
}
body.nursery-page #gallery a.fb_gallery img {
	border-radius: 8px;
}

/* ---- Map tab ---- */
body.nursery-page #mapDiv {
	border: 1px solid #E4E6E3;
	border-radius: 12px;
	overflow: hidden;
}
body.nursery-page .locationmap p,
body.nursery-page .locationmap div,
body.nursery-page .dirTitle {
	font-family: Figtree, system-ui, sans-serif;
}
body.nursery-page #stores div.store {
	border-radius: 8px;
}
body.nursery-page #from {
	height: 38px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid #CDD5CB;
	border-radius: 8px;
	font: 14px Figtree, system-ui, sans-serif;
}

/* ---- Phones ---- */
@media (max-width: 600px) {
	/* wide logos run the full width, tall ones stop at 120px */
	body.nursery-page .nurseryLogo img {
		max-width: 100%;
		max-height: 120px;
	}
	body.nursery-page .nurseryHead.hasLogo .nurseryName {
		font-size: 20px;
	}
	body.nursery-page #tabs ul.tabs li a {
		padding: 9px 14px;
	}
	body.nursery-page #plant_name_filter {
		flex-basis: 100%;
		max-width: none;
	}
	body.nursery-page .nurseryFilter .textButton {
		flex: 1 1 0;
		text-align: center;
	}
	/* Search and View All side by side, Download / Print on its own row */
	body.nursery-page .nurseryFilter a.textButton[href*="include/availability/"] {
		flex-basis: 100%;
	}
	body.nursery-page #plantlist .poweredByTd {
		text-align: left;
	}
	body.nursery-page .availability_table th,
	body.nursery-page .availability_table tbody td {
		padding-left: 8px;
		padding-right: 8px;
	}
	body.nursery-page #mapDiv {
		width: 100% !important;
		box-sizing: border-box;
	}
}

/* ---- Images tab: each plant a white card, the name on a light panel ---- */
body.nursery-page #gallery {
	overflow: hidden;
}
body.nursery-page #gallery .plantImageWrapper {
	margin: 0 12px 12px 0;
	border: 1px solid #E4E6E3;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
body.nursery-page #gallery .name_wrapper {
	height: 129px;
	margin: 0;
	padding: 12px;
	border-left: 0;
	border-right: 1px solid #E4E6E3;
	background: #F8F8F8;
	color: #1D2A22;
}
body.nursery-page #gallery .name_wrapper h3 {
	margin: 0 0 4px;
	color: #1D2A22;
	font: 700 14px/1.3 Figtree, system-ui, sans-serif;
}
body.nursery-page #gallery .commonnames {
	color: #5B6A62;
	font: 12px/1.35 Figtree, system-ui, sans-serif;
}
body.nursery-page #gallery a.fb_gallery {
	margin: 0;
	border-left: 1px solid #E4E6E3;
	text-decoration: none;
}
body.nursery-page #gallery a.fb_gallery img {
	display: block;
	border-radius: 0;
}
body.nursery-page #gallery .imageDesc {
	height: auto;
	margin: 0;
	padding: 3px 8px;
	background: #fff;
	color: #5B6A62;
	font: 600 11px/1.4 Figtree, system-ui, sans-serif;
}

/* ---- Map tab: the address card on the left, the map filling the right ---- */
body.nursery-page #map-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 20px;
	align-items: start;
}
body.nursery-page #map-container #left,
body.nursery-page #map-container #right {
	float: none;
	width: auto;
	margin: 0;
}
body.nursery-page #stores {
	float: none;
	border: 0;
	font: 14px/1.6 Figtree, system-ui, sans-serif;
}
body.nursery-page #stores > div,
body.nursery-page #stores div.store {
	padding: 14px 16px;
	border: 1px solid #E4E6E3;
	border-radius: 12px;
	background: #fff;
	cursor: default;
}
body.nursery-page #stores div.store:hover {
	background: #fff;
}
body.nursery-page #stores .nurseryStoreAddress {
	margin: 0 0 12px;
	color: #1D2A22;
}
body.nursery-page #mapDiv {
	width: 100%;
	height: 400px;
	box-sizing: border-box;
}
body.nursery-page #dir {
	border: 1px solid #E4E6E3;
	border-radius: 12px;
	background: #F8F8F8;
}
@media (max-width: 600px) {
	body.nursery-page #map-container {
		grid-template-columns: minmax(0, 1fr);
	}
	body.nursery-page #mapDiv {
		height: 320px;
	}
	body.nursery-page #gallery .plantImageWrapper {
		margin-right: 0;
	}
}

/* Each plant: the name panel, then its photos in their own box that wraps in rows */
body.nursery-page #gallery .plantImageWrapper {
	display: flex;
	max-width: 100%;
}
body.nursery-page #gallery .name_wrapper {
	flex: 0 0 auto;
	float: none;
	height: auto;
	min-height: 129px;
}
body.nursery-page #gallery .plantImages {
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
}
body.nursery-page #gallery .plantImages a.fb_gallery {
	float: none;
	border-bottom: 1px solid #E4E6E3;
	margin-bottom: -1px;
}
@media (max-width: 600px) {
	/* name across the top, photos in rows under it */
	body.nursery-page #gallery .plantImageWrapper {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	body.nursery-page #gallery .name_wrapper {
		width: auto;
		min-height: 0;
		border-right: 0;
		border-bottom: 1px solid #E4E6E3;
	}
	body.nursery-page #gallery .plantImages a.fb_gallery {
		border-left: 0;
		border-right: 1px solid #E4E6E3;
	}
}