/**
 * headers & footers
 */

	html {
		height: 100%;
		overflow-x: hidden;
	}

	body {
		height: 100%;
		margin: 0; padding: 0;
		padding-top: 0 /* var(--fixed-header-height) */;
		padding-bottom: 0 /* var(--fixed-footer-height) */;
		max-width: 1500px;
		margin: auto;
	}
	header.fixed {
		top: 0; height: 0 /* var(--fixed-header-height) */;
	}
	footer.fixed {
		bottom: 0; height: 0 /* var(--fixed-footer-height) */;
	}
	header.fixed, footer.fixed {
		position: fixed;
		left: 0; right: 0;
		z-index: 2;
		overflow: hidden;
	}

	body>.scroll {
		padding-top: 0; /* used to make room for the menu in small view */
		padding-bottom: 75px /* var(--scroll-footer-height) */;
		margin-bottom: 0 /* var(--fixed-footer-height) */;
		position: relative;
		min-height: 100%;
		overflow: auto;
	}
	footer.scrolling {
		/* max-height: 75px; */
		overflow: hidden;
		position: absolute;
		bottom: 0; left: 0; right: 0;
		/**/background-color:#76B82A;/**/
	}

	body>.scroll>main {
		margin: 0 20px;
	}
	@media (min-width: 1031px) { body>.scroll>footer {
		margin: 0 20px; /**/
	} }


/**
 * menu: there are three states
 * - wide: show the #menu-bar contents as a fixed column on the left
 * - small closed: show #menu-toggle, .cart, #logo as a fixed header
 * - small open: keep #logo where it is, display #menu as a overlay column
 */

	/**
	 * default (wide)
	 */

		@media print { nav#nav { display: none; } }
		#menu-toggle-target { display: none; }

		/* transitions */
		#menu-bar, #menu-bar *, #menu-bar ::before, #menu-bar ::after {
			transition: all .25s;
		}
		body>.scroll {
			transition: padding .25s, margin .25s;
		}

		html, header.fixed, header.scrolling, footer.scrolling, footer.fixed, #menu-bar {
			min-width: 330px /* var(--nav-width) */;
		}

		/* space for menu header */
		body>.scroll { padding-top: 0px; }
		/* space for menu sidebar */
		body>.scroll { margin-left: 330px /* var(--nav-width) */; }

		#menu-bar {
			position: fixed;
			top: 0 /* var(--fixed-header-height) */;
			left: 0;
			width: 330px /* var(--nav-width) */;
			z-index: 1001;
			padding-top: 115px; /* logo */
			background-color: transparent;
			transition: all .25s, left .0001s;
		}
		@media (min-width: 1500px) { #menu-bar {
			left: calc((100vw - 1500px) / 2);
		} }

		#logo {
			display: block; position: absolute;
			top: 4px; right: 25px;
			height: 112px; width: 287px;
			z-index: 996;
			/**/filter:;/**/
		}

		#logo>img {
			display: block; margin: auto;
			max-width: 100%; max-height: 100%;
		}

		#menu-toggle {
			display: block; text-align: center;
			width: 2em; height: 2em; line-height: 2em;
			font-size: 0;
			position: relative; z-index: 1000;
		}
		#menu-toggle::before {
			content: '☰'; display: block;
			width: 100%; height: 100%;
		}
		#menu-toggle-target:not(:checked) ~
		#menu-toggle::before { background: none; }

		#menu {
			width: 287px;
			overflow: hidden;
			margin: 8px 8px 8px 17px;
		}
		#menu>* {
			position: relative; z-index: 1000;
			margin: 8px 0;
		}
		@media (min-width: 1031px) { #menu .overlay-only {
			display: none;
		} }

		.text-submit {
			position: relative;
			border: 2px solid;
			height: 40px;
			/**/border-color:#76B82A;/**/
			/**/background:#76B82A;/**/
		}
		.text-submit .text {
			position: absolute;
			top: 0; bottom: 0;
			left: 0; right: 38px;
		}
		.text-submit .text input {
			height: 100%; width: 100%;
			outline: none;
			border: none; border-radius: 0;
			padding: 3px 10px;
		}
		.text-submit .submit {
			border: none;
			background: inherit; transition: none;
			color: white;
			font-size: 32px; line-height: 38px;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			outline: none;
			border-radius: 0;
			position: absolute;
			top: -1px; bottom: -1px; /* 0 is to small for edge, -2 to large for firefox */
			width: 38px; right: -1px;
			cursor: pointer;
		}

		.text-submit:hover, .text-submit:focus-within {
			/**/border-color:#559326;/**/
			/**/background:#559326;/**/
		}

		#search::before, #search::after, #menu-bar .filter-button::after, #menu-bar .cart .count {
			content: ''; position: absolute;
			top: 0px; bottom: 0px;
			width: 40px; right: 0px;
			line-height: 40px; text-align: center;
			background: inherit; transition: none;
		}
		#search::before, #search::after {
			top: -1px; bottom: -1px;
			width: 38px; right: -1px;
			z-index: 1; pointer-events: none;
		}
		#search::after {
			content: ''; filter: invert(1);
			background: no-repeat center/60% url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M12.5,499.5c16.7,16.7,43.8,16.7,60.5,0l111.2-111.2c0.6-0.6,1-1.3,1.6-1.9C219,408.2,258.8,421,301.5,421C417.8,421,512,326.8,512,210.5C512,94.2,417.8,0,301.5,0C185.2,0,91,94.2,91,210.5c0,42.7,12.8,82.5,34.7,115.7c-0.6,0.6-1.3,1-1.9,1.6L12.5,439C-4.2,455.7-4.2,482.8,12.5,499.5z M164,210.5c0-76,61.6-137.5,137.5-137.5c76,0,137.5,61.6,137.5,137.5c0,76-61.6,137.5-137.5,137.5C225.5,348,164,284,164,210.5z"/></svg>');
			line-height: 40px;
		}
		@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* fixes for IE10+ */
			#search::after {
				content: '🔎'; color: white; filter: initial; background: none;
			}
		}

		#menu-bar .filter-button, #menu-bar .cart {
			display: block; position: relative;
			text-decoration: none; outline: none;
			height: 40px;
			line-height: 40px;
			padding: 0 12px;
			margin-right: 44px;
			font-weight: 200;
			color: white;
			/**/background:#76B82A;/**/
		}
		#menu-bar .cart {
			margin-bottom: 30px;
			/**/background:#76B82A;/**/
		}
		#menu-bar .cart .count {
			color: #ffffff;
			font-weight: bold;
			font-size: 20px;
			/**/background-color:#ff6c00;/**/
		}
		#menu-bar .cart .count[data-cart-count="0"], #menu-bar .cart .count[data-cart-count=""] { background: inherit; }
		#menu-bar .cart .count::after {
			content: attr(data-cart-count);
		}
		#menu-bar .filter-button::after, #menu-bar .cart .count {
			content: '☵';
			right: -44px;
		}

		#menu-bar .cart:hover, #menu-bar .cart:focus {
			/**/background:#559326;/**/
		}
		#menu-bar .filter-button:hover, #menu-bar .filter-button:focus {
			/**/background:#559326;/**/
		}

		#menu-bar .social-links {
			text-align: center;
		}
		#menu .social-links {
			min-width: 200px;
			margin-top: 25px;
		}
		#menu .social-links>a {
			margin: 10px;
		}
		#menu-bar .social-links img {
			height: 40px;
		}

		#nav {
			margin-top: 15px;
		}

		#nav>* {
			margin-top: 5px;
			display: block;
			height: 40px;
			padding: 6px 10px;
			border-bottom: 1px solid #cccccc;
			font-weight: 200;
			white-space: nowrap;
		}

		/* background for small-view top menu bar */
		#menu-bar::before {
			content: '';
			position: fixed;
			top: 0 /* var(--fixed-header-height) */; height: 0;
			left: 0; right: 0;
			z-index: 996;
			background-color: rgba(255, 255, 255, 0.95);
		}

		/* background for the overlay menu */
		#menu::before, #menu::after {
			content: '';
			position: fixed;
			top: 0 /* var(--fixed-header-height) */; bottom: 0 /* var(--fixed-footer-height) */;
		}
		#menu::before {
			left: 0; width: 0;
			background: white;
			z-index: 998;
		}
		#menu::after {
			width: 0; right: 0; max-width: calc(100% - 330px /* var(--nav-width) */);
			background: hsla(0, 0%, 20%, 0.75);
			z-index: 997;
			transition: width .5s;
		}

		#menu-bar .clones {
			position: fixed; z-index: 996;
			left: 50px; right: 150px;
			height: 60px;
			top: -50px; opacity: 0;
			white-space: nowrap;
		}
		#menu-bar .clones>* {
			display: inline-block;
			margin: 8px 45px 8px 20px;
			width: 210px; text-align: center;
		}
		#menu-bar .clones .label {
			display: block; width: 100%; height: 100%;
			overflow: hidden;
		}
		#menu-bar .clones .filter-button {
			width: 120px;
		}
		#menu-bar .clones .filter-button::after {
			transition: width .25s;
		}
		#menu-bar .clones .social-links {
			width: unset;
		}
		#menu-bar .clones .social-links>*:first-child {
			margin-right: 5px;
		}



	/**
	 * small
	 */
	@media (max-width: 1030px) { /* 310px menu + 700px content + 20px scrollbar */

		/* space for menu header */
		body>.scroll { padding-top: 56px; }
		/* space for menu sidebar */
		body>.scroll { margin-left: 0; }

		#menu-bar {
			display: block;
			top: 0 /* var(--fixed-header-height) */;
			left: 0;
			width: 100%;
			height: 56px;
			padding: 3px;
			z-index: 1001;
			padding-top: 0;
		}
		#menu-bar::before {
			height: 56px;
		}

		#logo {
			position: absolute;
			top: 3px;
			right: 18px;
			height: 50px;
			width: 143px;
		}

		#menu-bar .clones {
			top: 0 /* var(--fixed-header-height) */;
			opacity: 1;
		}

		/* closed: show #menu-toggle, .cart, #logo as a fixed header */

			#menu-toggle {
				font-size: 28px;
			}

			#menu {
				width: 0;
			}


		/* open: keep #logo where it is, display #menu as a overlay column */

			#menu-toggle-target:checked ~
			#menu-toggle::before {
				content: ''; /* has X as background-image */
				background-size: 38%;
				transition: none;
			}

			#menu-toggle-target:checked ~
			#menu {
				width: 287px;
				background-color: white; /* meh */
			}
			#menu-toggle-target:checked ~
			#menu::before {
				width: 330px /* var(--nav-width) */;
			}
			#menu-toggle-target:checked ~
			#menu::after {
				width: 100%;
			}

			/* while the menu is open, have the transparent ::after element cover the entire page, so that clicking anywhere on it will close the menu */
			#menu-toggle-target:checked ~
			#menu-toggle::after {
				content: '';
				position: fixed;
				top: 0; bottom: 0;
				left: 320px; right: 0;
				z-index: 999;
			}

	}

	@media (max-width: 800px) { /* turn into shopping bag */
		#menu-bar .clones .cart {
			width: 0px; padding: 0;
		}
		#menu-bar .clones .cart .count {
			height: 35px; line-height: 35px;
			margin-top: 5px;
			background: white;
			/**/color:#76B82A;/**/
			border-radius: 7px;
			/**/border: 1.52px solid#76B82A;/**/
		}
		#menu-bar .clones .cart .count::before { /* bag handle */
			content: ''; display: block; position: absolute;
			top: -5px; left: 14px;
			height: 10px; width: 10px;
			transform: scaleX(1.5);
			z-index: -1;
			border-radius: 5px;
			/**/border: 1.5px solid#76B82A;/**/
		}

	}
	@media (max-width: 600px) {
		#menu-bar .clones .filter-button {
			width: 0px; padding: 0;
		}
	}
	@media (max-width: 500px) {
		#menu-bar .clones > * {
			margin-left: 10px;
		}
		#menu-bar .clones .social-links img {
			height: 30px; margin-top: 5px; margin-bottom: 5px;
		}
	}
	@media (max-width: 420px) {
		#menu-bar .clones .social-links img {
			display: none;
		}
	}
	@media (max-width: 350px) {
		#menu-bar .clones .filter-button::after {
			width: 0px; overflow: hidden;
		}
	}


	/**
	 * vertical resizing if the menu
	 */
	@media (min-width: 1030px) and (max-height: 670px) {
		#logo { top: -15px; } #menu-bar { padding-top: calc(115px - 20px); }
	}
	@media (min-width: 1030px) and (max-height: 670px), (max-height: 620px) {
		#menu-bar .cart { margin-top: 0; }
	}
	@media (min-width: 1030px) and (max-height: 650px), (max-height: 600px) {
		#nav { margin-top: 0; }
	}
	@media (min-width: 1030px) and (max-height: 630px), (max-height: 600px) {
		#menu .social-links { margin-top: 0; }
	}
	@media (min-width: 1030px) and (max-height: 620px), (max-height: 580px) {
		#menu { margin-top: 0; margin-bottom: 0; }
	}
	@media (min-width: 1030px) and (max-height: 590px), (max-height: 550px) {
		#nav>* { margin-top: 0; }
	}
	@media (min-width: 1030px) and (max-height: 560px), (max-height: 520px) {
		#nav>* { padding-top: 3px; padding-bottom: 3px; height: 34px; }
	}
	@media (min-width: 1030px) and (max-height: 540px), (max-height: 500px) {
		#nav>* { padding-top: 0; padding-bottom: 0; height: 28px; }
	}
	@media (min-width: 1030px) and (max-height: 475px), (max-height: 435px) {
		#menu-toggle-target:checked ~ #menu-toggle { width: 1.5em; height: 1.5em; line-height: 1.5em; }
	}


/**
 * header and footer content
 */

	#maintenance-notice {
		background: #b00202;
		color: white;
		padding: 15px 20px 15px 20px;
	}

	#breadcrumbs:not(:empty) {
		padding: 30px 20px 0 20px;
		font-size: 14px;
	}
	#breadcrumbs a {
		text-decoration: underline;
	}

	#footer-links {
		text-align: center;
		padding: 10px 20px 10px 20px;
		/**/background:#76B82A; color: white;/**/
	}
	#footer-links>span {
		display: inline-block;
	}
	@media (max-width: 970px) { #footer-links>span {
		display: block;
	}  #footer-links>span>span:first-child {
		display: none;
	} }
	@media (max-width: 550px) { #footer-links {
		font-size: 3vw; font-size: calc(3.2vw - 1px); /*  2.85vw */
	} }
	@media (max-width: 440px) { #footer-links {
		font-size: 13px;
	} }

	#footer-links a {
		color: white;
		font-weight: 200;
	}

	footer.scrolling a:hover {
		color: #000000;
	}

	header.fixed, footer.fixed {
		background: #bbb;
	}


/**
 * modals
 */

	.modal.open, .modal:target {
		display: block !important;
	}
	.modal {
		display: none;
		position: fixed; z-index: 1;
		opacity: .98;
		top: 15%;
		right: 10%; left: 410px; left: calc(310px + 10%);
		padding: 10px 45px 30px 45px;
		transition: left .24s;
		color: white;
		/**/background:#76B82A;/**/
	}
	@media (max-width: 1030px) { .modal {
		left: 10%;
	} }
	@media (min-width: 1500px) { .modal {
		transition: none;
		left: calc(50% - 290px);
		right: calc(50% - 600px);
	} }

	.modal>p {
		margin-bottom: 4px;
	}

	.modal>a {
		display: block;
		border: 2px solid white; color: white;
		min-height: 40px; line-height: 40px;
		width: 280px; text-align: center;
		margin: 10px 0;
	}
	@media (max-width: 500px) { .modal>a {
		width: 100%;
	} }
	.modal>a:hover {
		background: white;
		/**/color:#76B82A;/**/
	}
	.modal>a:first-of-type {
		margin-top: 70px;
	}

	.modal .close::after {
		content: ''; display: block; position: absolute;
		top: 20px; right: 20px; width: 40px; height: 40px;
		filter: invert(1);
	}
	@media (max-width: 520px) { .modal .close::after {
		display: none;
	} }

	@media (max-width: 520px) {
		.modal {
			left: 5%; right: 5%; top: 56px;
			padding: 0px 25px 20px 25px;
		}
		.modal .close::after {
			display: none;
		}
		.modal>a:first-of-type {
			margin-top: 40px;
		}
	}

/**
 * Share box at the bottom of the home and category page(s).
 * The commented code is for the third box.
 */
	#share-box {
		margin: 20px 0; display: flex; flex-direction: row;
		/**/border: 2px solid#76B82A;/**/
	}
	#share-box>* {
		display: inline-block; position: relative; overflow: hidden;
		height: 75px; flex: 1;
		padding: 10px;
	}
	#share-box>*:first-child {
		height: 75px; width: 50%; min-width: 280px;
	}
	#share-box>*::after {
		content: ''; display: block; position: absolute;
		background: #EBE8E8;
	}
	#share-box>*:not(:last-child)::after {
		width: 2px; right: 0;
		top: 10px; bottom: 10px;
	}
	@media (max-width: 540px) { #share-box {
		display: block;
	} #share-box>*, #share-box>*:first-child {
		width: 100%;
	} #share-box>*::after {
		height: 2px; top: 0;
		left: 10px; right: 10px;
	} }
	#share-box .text-submit {
		overflow: hidden;
	}
	#share-box .submit {
		font-size: 38px;
	}
	#share-box .submit::after {
		content: " "; display: block; height: 100%;
		filter: invert(1); transform: translate(-3%, 7%);
	}
	#share-box img {
		height: 24px;
	}


/**
 * print
 */

@media print {

	#cookie-notice,
	#menu-bar,
	#footer-links {
		display: none;
	}

}