/*
	Copyright 2024: Vy Technology, LLC
*/
/******* FONTS *******/
@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-Light.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-LightObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-LightObl.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-Book.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-Book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-BookObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-BookObl.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-Medium.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-MediumObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-MediumObl.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-Demi.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-Demi.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-DemiObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-DemiObl.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-Bold.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-BoldObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-BoldObl.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-ExtraBold.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-ExtraBoldObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-ExtraBoldObl.woff') format('woff');
	font-weight: 800;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-Heavy.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-Heavy.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura';
	src: url('/_home/Fonts/FuturaPT-HeavyObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPT-HeavyObl.woff') format('woff');
	font-weight: 900;
	font-style: italic;
	font-display: auto;
}

/* Futura Condensed Font Family */
@font-face {
	font-family: 'Futura Condensed';
	src: url('/_home/Fonts/FuturaPTCond-Book.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPTCond-Book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura Condensed';
	src: url('/_home/Fonts/FuturaPTCond-BookObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPTCond-BookObl.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura Condensed';
	src: url('/_home/Fonts/FuturaPTCond-Medium.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPTCond-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura Condensed';
	src: url('/_home/Fonts/FuturaPTCond-MediumObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPTCond-MediumObl.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura Condensed';
	src: url('/_home/Fonts/FuturaPTCond-Bold.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPTCond-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura Condensed';
	src: url('/_home/Fonts/FuturaPTCond-BoldObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPTCond-BoldObl.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: auto;
}

@font-face {
	font-family: 'Futura Condensed';
	src: url('/_home/Fonts/FuturaPTCond-ExtraBold.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPTCond-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: auto;
}

@font-face {
	font-family: 'Futura Condensed';
	src: url('/_home/Fonts/FuturaPTCond-ExtraBoldObl.woff2') format('woff2'),
		 url('/_home/Fonts/FuturaPTCond-ExtraBoldObl.woff') format('woff');
	font-weight: 800;
	font-style: italic;
	font-display: auto;
}

/******* VARIABLES *******/
:root {

	/* Breakpoints */
	--breakpoint-small: 480px;
	--breakpoint-medium: 768px;

	/* Sizes */
	--height-nav-header: 60px;

	/* RGB Colors - Use with rgba when opacity is required */
	--color-rgb-black: 34, 34, 34; 					/* Pepercorn */
	--color-rgb-white: 255, 255, 255; 				/* White */
	--color-rgb-offwhite: 247, 244, 236; 			/* Cotton */
	--color-rgb-beige: 248, 237, 214; 				/* Cream */
	--color-rgb-maroon: 178, 76, 115; 				/* Egglplant */
	--color-rgb-gold-light: 255, 215, 152;			/* Melon */
	--color-rgb-yellow: 251, 215, 74; 				/* Lemon */
	--color-rgb-orange: 240, 185, 62; 				/* Pumpkin */
	--color-rgb-blue-light: 190, 228, 226; 			/* Light Blue */
	--color-rgb-green-lightest: 0, 147, 91; 		/* Harvest Green Light */
	--color-rgb-green-light: 181, 220, 177; 		/* Mint */
	--color-rgb-green: 26, 172, 114; 				/* Harvest Green */
	--color-rgb-green-dark: 49, 112, 91; 			/* Harvest Green Dark */
	--color-rgb-red-warning-dark: 160, 49, 35;		/* Warning Red Dark */
	--color-rgb-red-warning-light: 235, 87, 87;		/* Warning Red Light */
	--color-rgb-gray-light: 245, 245, 245;			/* Gray Light */
	--color-rgb-gray: 180, 180, 180;				/* Gray Mid */
	--color-rgb-gray-dark: 112, 112, 112;			/* Gray Dark */

	/* Colors - Ready to use at full opacity */
	--color-black: rgba(var(--color-rgb-black), 1);
	--color-white: rgba(var(--color-rgb-white), 1);
	--color-offwhite: rgba(var(--color-rgb-offwhite), 1);
	--color-beige: rgba(var(--color-rgb-beige), 1);
	--color-maroon: rgba(var(--color-rgb-maroon), 1);
	--color-gold-light: rgba(var(--color-rgb-gold-light), 1);
	--color-yellow: rgba(var(--color-rgb-yellow), 1);
	--color-orange: rgba(var(--color-rgb-orange), 1);
	--color-blue-light: rgba(var(--color-rgb-blue-light), 1);
	--color-green-lightest: rgba(var(--color-rgb-green-lightest), 1);
	--color-green-light: rgba(var(--color-rgb-green-light), 1);
	--color-green: rgba(var(--color-rgb-green), 1);
	--color-green-dark: rgba(var(--color-rgb-green-dark), 1);
	--color-red-warning-dark: rgba(var(--color-rgb-red-warning-dark), 1);
	--color-red-warning-light: rgba(var(--color-rgb-red-warning-light), 1);
	--color-gray-light: rgba(var(--color-rgb-gray-light), 1);
	--color-gray: rgba(var(--color-rgb-gray), 1);
	--color-gray-dark: rgba(var(--color-rgb-gray-dark), 1);

	/* Font Families */
	--font-family-main: "Futura", sans-serif;
	--font-family-condensed: "Futura Condensed", sans-serif;

	/* Font Weights */
	--font-weight-light: 300;
	--font-weight-regular: normal;
	--font-weight-medium: 500;
	--font-weight-demibold: 600;
	--font-weight-bold: bold;
	--font-weight-extrabold: 800;
	--font-weight-heavy: 900;

	/* Static Font Sizing */
	--font-size-base: 16px;
	--font-size-input: 18px;
	--font-size-secondary: 14px;
	--font-size-footnote: 12px;
	--font-size-caption: 9px;

	/* Font Line Height */
	--font-line-height-base: 1.5;
	--font-line-height-heading: 1.2;

	/* Borders */
	--border-radius-light: 4px;
	--border-radius-medium: 6px;
	--border-radius-heavy: 8px;

	--border-size-light: 1px;
	--border-size-medium: 2px;
	--border-size-thick: 4px;

	/* Z-Index Definitions */
	--z-index-overlays: 1000; /* modals, overlays, dialogs, etc. */
	--z-index-cart: 800;
	--z-index-sticky: 600;
	--z-index-tooltip: 400;
	--z-index-header: 200;
	--z-index-base: 1;

	/* Shadows */
	--shadow-color: 49deg 13% 55%;
	--shadow-low: 0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.39),
	  0.8px 0.8px 1.3px -1.2px hsl(var(--shadow-color) / 0.39),
	  2.1px 2px 3.3px -2.5px hsl(var(--shadow-color) / 0.39);
	--shadow-medium: 0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.29),
	  1.5px 1.4px 2.3px -0.8px hsl(var(--shadow-color) / 0.29),
	  3.7px 3.5px 5.7px -1.7px hsl(var(--shadow-color) / 0.29),
	  8.8px 8.5px 13.8px -2.5px hsl(var(--shadow-color) / 0.29);
	--shadow-high: 0.5px 0.5px 0.8px hsl(var(--shadow-color) / 0.3),
	  2.7px 2.6px 4.2px -0.4px hsl(var(--shadow-color) / 0.3),
	  5.2px 5px 8.1px -0.8px hsl(var(--shadow-color) / 0.3),
	  9px 8.7px 14.1px -1.2px hsl(var(--shadow-color) / 0.3),
	  15.2px 14.7px 23.8px -1.7px hsl(var(--shadow-color) / 0.3),
	  24.9px 24.1px 39px -2.1px hsl(var(--shadow-color) / 0.3),
	  39.2px 37.9px 61.3px -2.5px hsl(var(--shadow-color) / 0.3);

	--flexbox-size-min: 320px;

	/* Shop Layout Settings */
	--shop-items-col-max: 5;
	--shop-items-col-min: 2;
	--shop-items-col-gap: 20px;

	/* Product Card Settings */
	--shop-item-min-width-mobile: 200px;
	--shop-item-min-width: 250px;
	--shop-item-max-width: 260px;
	--shop-item-name-line-clamp: 2;

	/* Calculation to set the bounds of the Shop Items container, based on the settings defined above. */
	--shop-items-max-width: calc((var(--shop-item-max-width) * var(--shop-items-col-max)) + (var(--shop-items-col-gap) * (var(--shop-items-col-max) - 1)));
	
	/* Gutter for Card Slider */
	--card-gutter: 20px;

}

/******* BODY *******/
html {
	font-size: var(--font-size-base);
}

body {
	font-family: var(--font-family-main);
	font-size: var(--font-size-base);
	line-height: var(--font-line-height-base);
	color: rgb(var(--color-rgb-black));
}

/******* SITE LAYOUT *******/
body, header, main, section, footer {
	display: flex;
	flex: 1 0 auto;
	position: relative;
}

	.no-grow { flex: unset; }

body {
	flex-direction: column;
}

header {
	z-index: var(--z-index-header);
	flex-direction: column;
	position: sticky;
	top: 0;
	background-color: var(--color-offwhite);
	align-items: center;
}

main {
	flex-direction: column;
	flex-wrap: nowrap;
}

section {
	flex-direction: row;
}
	section[style^='background-image'] {
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	
	section[style^='background-image'].bg-cover {
		background-size: cover;
	}

	section[style^='background-image'].bg-contain {
		background-size: contain;
	}

	section[style^='background-image'].bg-center {
		background-position: center;
	}

	section[style^='background-image'].bg-left {
		background-position: left;
	}

	section[style^='background-image'].bg-bottom {
		background-position: bottom;
	}

/******* SITE THEME *******/
h1, h2, h3, h4, h5, h6 { line-height: var(--font-line-height-heading); }

	h1 { font-size: clamp(2.5rem, 4vw + 1rem, 5rem); }

	h2 { font-size: clamp(2rem, 3vw + 0.875rem, 3.812rem); }

	h3 { font-size: clamp(1.75rem, 2.5vw + 0.875rem, 2.939rem); }

	h4 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem); }

	h5 { font-size: clamp(1.25rem, 1.5vw + 0.625rem, 1.688rem); }

	h6 { font-size: clamp(1.2rem, 1vw + 0.5rem, 1.312rem); }

a, .a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.subtext {
	font-size: var(--font-size-secondary);
}

.black { color: var(--color-black); }

	.background-black { background-color: var(--color-black); }

.white { color: var(--color-white); }

	.background-white { background-color: var(--color-white); }

.offwhite { color: var(--color-offwhite); }

	.background-offwhite { background-color: var(--color-offwhite); }

.beige { color: var(--color-beige); }

	.background-beige { background-color: var(--color-beige); }

.maroon { color: var(--color-maroon); }

	.background-maroon { background-color: var(--color-maroon); }

.gold-light { color: var(--color-gold-light); }

	.background-gold-light { background-color: var(--color-gold-light); }

.yellow { color: var(--color-yellow); }

	.background-yellow { background-color: var(--color-yellow); }

.orange { color: var(--color-orange); }

	.background-orange { background-color: var(--color-orange); }

.blue-light { color: var(--color-blue-light); }

	.background-blue-light { background-color: var(--color-blue-light); }

.green-lightest { color: var(--color-green-lightest); }

	.background-green-lightest { background-color: var(--color-green-lightest); }

.green-light { color: var(--color-green-light); }

	.background-green-light { background-color: var(--color-green-light); }

.green { color: var(--color-green); }

	.background-green { background-color: var(--color-green); }

.green-dark { color: var(--color-green-dark); }

	.background-green-dark { background-color: var(--color-green-dark); }

.transparent { background-color: transparent; }

	.background-transparent { background-color: inherit !important; }

/******* GENERAL UTILITY CLASSES *******/

.even { background-color: var(--color-white); }

.odd { background-color: var(--color-rgb-green-lightest); }

.left { text-align: left; }

	.left-100 { width: 100%; }	/* There are some elements that need to be 100% width in order for left to work */

.center { text-align: center; }

.right { text-align: right; }

.bold { font-weight: var(--font-weight-bold); }

.no-bold { font-weight: var(--font-weight-regular); }

.medium-bold { font-weight: var(--font-weight-medium); }

.demi-bold { font-weight: var(--font-weight-demibold); }

.underline { text-decoration: underline;}

.uppercase { text-transform: uppercase; }

.hide-all { display: none; }

.show-mobile, .hide-480 { display: inherit; }

.show-1023, .show-768, .show-600, .show-480 { display: none; }

.link, .link-dark-green {
	color: var(--color-green);
	text-decoration: underline;
}

	.link-dark-green-normal {
		color: var(--color-green-dark);
		font-weight: var(--font-weight-regular);
	}

.nowrap { white-space: nowrap; }

.wrap { text-wrap: wrap; }

.image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: var(--color-blue-light);
	border: var(--border-size-medium) solid var(--color-black);
	aspect-ratio: 1 / 1;
}
	.image-placeholder-text {
		opacity: 0.7;
		font-weight: var(--font-weight-demibold);
		font-size: 20px;
		position: absolute;
		transform: rotate(30deg);
	}

.separator {
	width: 100%;
	text-align: center;
	border-bottom: 1px solid var(--color-black);
	line-height: 0.1em;
	margin: 10px 0 20px;
}
	
	.separator span {
		background: var(--color-white);
		padding: 0 10px;
	}

.section-divider { 
	border-top: 1px solid var(--color-black); 
	height: 1px;
	margin-right: 40px;
	margin-left: 40px;
}

.section-bottom-image {
	margin-left: auto;
	margin-right: auto;
	max-width: 960px;
}

.icon {
	width: inherit; /* this is a catch all for icons without height set */
}

/******* INPUTS, TEXAREA, SELECTS & LABELS *******/
.input-groups {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

	.input-group-section {
		display: flex;
		flex-direction: row;
		gap: 1rem;
	}

	.input-group-section.hide-all {
		display: none;
	}

		.input-group {
			position: relative;
			width: 100%;
			display: flex;
			align-items: center;
		}

			.input-group .error-message {
				position: absolute;
				bottom: 4px;
				right: 4px;
				font-size: 12px;
				font-weight: var(--font-weight-medium);
				background: rgba(var(--color-rgb-red-warning-dark), 1);
				color: var(--color-white);
				padding: 1px 4px;
				border-radius: 4px;
				opacity: 1;
				transition: opacity 1s ease;
				z-index: 1;
			}

			.input-group-grow-width { width: unset; }

			.input-group.snap-logo, input-group.snap-logo img { width: 48px; }

			.input-group.snap-disclaimer { display: block; }

		.input-group-password {
			flex-basis: 50%;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

	.password-requirements-group {
		flex-basis: 40%;
		display: none;
		flex-direction: column;
		justify-content: center;
		margin-left: 0.5rem;
	}
	
		.password-requirements {
			display: flex;
			flex-direction: column;
		}
			
			.password-requirement {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
	
				.rule, .rule-passed {
					font-size: 14px;
					font-weight: var(--font-weight-medium);
					line-height: normal;
				}

.text-input {
	display: flex;
	width: 100%;
	max-width: 100vw;
	padding: 16px 4px 4px 12px;
	border-radius: var(--border-radius-light);
	border: var(--border-size-medium) solid var(--color-black);
	background: var(--color-white);
	font-weight: var(--font-weight-medium);
	color: var(--color-black);
}

	.text-input.small { font-size: var(--font-size-base); }

	select.text-input { padding: 12px 8px; }

	.text-input:focus {
		border: var(--border-size-medium) solid var(--color-black);
		outline: none;
	}

	.text-input:read-only {
		pointer-events: none;
		background-color: var(--color-gray-light);
	}

	.text-input-no-label {
		padding: 8px;
	}

	.input-group:has(.text-input#zip), .input-group:has(.text-input#zipcode) { width: 7.5rem; }

	.input-group:has(.input-toggle) { gap: 1rem; }

input::placeholder, textarea::placeholder {
	color: transparent;
	transition: color 0.1s ease;
}

	input.normal-placeholder::placeholder {
		color: rgba(var(--color-rgb-black), 0.8);
		transition: unset;
	}

input:focus::placeholder {
	color: rgba(var(--color-rgb-black), 0.8);
	opacity: 0.6;
}

textarea {
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	border-radius: var(--border-radius-light);
	border: var(--border-size-medium) solid var(--color-black);
	padding: 18px 10px 10px 10px;
}

.input-group-section:has(.radio-group) {
	justify-content: space-between;
	gap: 0;
	margin-bottom: 1rem;
}

	.radio-group-yes-no:has(.radio-group) {
		justify-content: center;
		gap: 10px;
	}

	.radio-group {
		display: flex;
	}

		.radio-group input[type="radio"] {
			display: none;
		}

		.radio-group input[type="radio"] + label {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 4rem;
			height: 2rem;
			border: var(--border-size-medium) solid var(--color-black);
			border-radius: 1000px;
			cursor: pointer;
		}

			.radio-group input[type="radio"]:checked + label {
				background-color: var(--color-green-lightest);
				color: var(--color-white);
			}

			.radio-group input[type="radio"] + label + span {
				margin-left: 0.5rem;
			}

			.radio-group input[type="radio"]:checked + label + span {
				font-weight: var(--font-weight-demibold);
			}
			
input[type="number"] { -moz-appearance: textfield; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="password"]:not(:placeholder-shown) { 
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

input.dollar-sign {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%09%20viewBox%3D%220%200%20235.517%20235.517%22%20style%3D%22enable-background%3Anew%200%200%20235.517%20235.517%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%09%3Cpath%20style%3D%22fill%3A%23010002%3B%22%20d%3D%22M118.1%2C235.517c7.898%2C0%2C14.31-6.032%2C14.31-13.483c0-7.441%2C0-13.473%2C0-13.473%09%09c39.069-3.579%2C64.932-24.215%2C64.932-57.785v-0.549c0-34.119-22.012-49.8-65.758-59.977V58.334c6.298%2C1.539%2C12.82%2C3.72%2C19.194%2C6.549%09%09c10.258%2C4.547%2C22.724%2C1.697%2C28.952-8.485c6.233-10.176%2C2.866-24.47-8.681-29.654c-11.498-5.156-24.117-8.708-38.095-10.236V8.251%09%09c0-4.552-6.402-8.251-14.305-8.251c-7.903%2C0-14.31%2C3.514-14.31%2C7.832c0%2C4.335%2C0%2C7.843%2C0%2C7.843%09%09c-42.104%2C3.03-65.764%2C25.591-65.764%2C58.057v0.555c0%2C34.114%2C22.561%2C49.256%2C66.862%2C59.427v33.021%09%09c-10.628-1.713-21.033-5.243-31.623-10.65c-11.281-5.755-25.101-3.72-31.938%2C6.385c-6.842%2C10.1-4.079%2C24.449%2C7.294%2C30.029%09%09c16.709%2C8.208%2C35.593%2C13.57%2C54.614%2C15.518v13.755C103.79%2C229.36%2C110.197%2C235.517%2C118.1%2C235.517z%20M131.301%2C138.12%09%09c14.316%2C4.123%2C18.438%2C8.257%2C18.438%2C15.681v0.555c0%2C7.979-5.776%2C12.651-18.438%2C14.033V138.12z%20M86.999%2C70.153v-0.549%09%09c0-7.152%2C5.232-12.657%2C18.71-13.755v29.719C90.856%2C81.439%2C86.999%2C77.305%2C86.999%2C70.153z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
	background-size: .8em;
	background-position: 7px 22px;
	background-repeat: no-repeat;
	padding-left: 22px;
}

input[type="checkbox"] {
	appearance: none;
		-webkit-appearance: none;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	cursor: pointer;
	border: var(--border-size-medium) solid var(--color-black);
	border-radius: var(--border-radius-light);
	transition: background-color 0.3s ease;
}

	input[type="checkbox"].checkbox-lg {
		width: 2.5rem;
		height: 2.5rem;
	}

	input[type="checkbox"].checkbox-sm {
		width: 1.5rem;
		height: 1.5rem;
	}

	input[type="checkbox"]:hover:not(:checked) {
		background-color: rgba(var(--color-rgb-green-lightest), 0.5);
	}

	input[type="checkbox"]:checked {
		border: var(--border-size-medium) solid var(--color-black);
		background-color: var(--color-green-lightest);
	}

	input[type="checkbox"]::before {
		content: "";
		width: 1.2rem;
		height: 1.2rem;
		clip-path: polygon(
			34.541% 79.292%,
			11.795% 48.78%,
			4.049% 59.097%,
			34.541% 100%,
			100% 12.194%,
			92.309% 1.877%,
			34.541% 79.292%
		);
		background-color: var(--color-white);
		transform: scale(0);
		transition: transform 0.3s ease;
	}

		input[type="checkbox"].checkbox-sm::before {
			width: 1rem;
			height: 1rem;
		}

		input[type="checkbox"].checkbox-lg::before {
			width: 1.75rem;
			height: 1.75rem;
		}

	input[type="checkbox"]:checked::before {
		transform: scale(1);
	}

	input[type="checkbox"] + label {
		position: relative;
		left: 5px;
	}

	input[type="checkbox"].chip-checkbox, input[type="radio"].chip-checkbox { display: none; }

		input[type="checkbox"].chip-checkbox + label.chip-white, input[type="radio"].chip-checkbox + label.chip-white {
			position: unset;
			font-size: 18px;
			font-weight: var(--font-weight-demibold);
			border: var(--border-size-medium) solid var(--color-black);
			border-radius: 100px;
			padding: 0.5rem;
			background-color: var(--color-black);
			color: var(--color-white);
			display: inline-block;
			margin-bottom: 20px;
		}

			input[type="checkbox"].chip-checkbox:checked + label.chip-white, input[type="radio"].chip-checkbox:checked + label.chip-white {
				background-color: var(--color-white);
				color:  var(--color-black);
			}

.input-toggle {
	font-size: 16px;
	position: relative;
	display: inline-block;
	height: 32px;
	width: auto;
	aspect-ratio: 5 / 2; 
}
	label:has(+ .input-toggle) {
		flex: 1 0 auto;
		max-width: 50%;
	}

	.input-toggle input {
		display: none;
		opacity: 0;
		width: 0;
		height: 0;
	}

	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(var(--color-rgb-black), 0.6);
		transition: .2s;
		border-radius: 1000px;
		box-shadow: inset 0px 0px 4px 0px rgb(0 0 0 / 75%);
	}

		.slider::before {
			position: absolute;
			content: "";
			height: 80%;
			width: auto;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			left: 3.5%;
			top: 50%;
			transform: translateY(-50%);
			background-color: white;
			transition: .4s;
			box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 75%);
		}

		.slider .text-on, .slider .text-off {
			font-weight: var(--font-weight-normal);
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			color: white;
			transition: opacity 0.4s;
		}

		.slider .text-on {
			left: 0.7rem;
			opacity: 0;
		}

		.slider .text-off {
			right: 0.7rem;
			opacity: 1;
		}

.input-toggle input:checked + .slider::before {
	transform: translateY(-50%);
	left: calc(100% - (85% * 2 / 5) - 1%);
}

.input-toggle input:checked + .slider {
	background-color: var(--color-green);
}

.input-toggle input:checked + .slider .text-on {
	opacity: 1;
}

.input-toggle input:checked + .slider .text-off {
	opacity: 0;
}

select.input-select, .input-select {
	width: 100%;
	color: var(--color-black);
	background-color: var(--color-white);
	font-size: var(--font-size-input);
	font-weight: var(--font-weight-medium);
	border: var(--border-size-medium) solid var(--color-black);
	border-radius: var(--border-radius-light);
	padding: 12px 12px 8px 12px;
	background: #FFFFFF url("/_home/Images/Icons/dropdown-icon.svg") no-repeat;
		background-position: right 20px top 50%;
	appearance: initial;
		-webkit-appearance: initial;
}

	.input-group:has(label + .input-select) {
		align-items: flex-start;
		flex-direction: column;
	}

label {
	color: var(--color-black);
	font-size: var(--font-size-input);
	font-weight: var(--font-weight-medium);
}


	.text-input + label, textarea + label {
		position: absolute;
		top: 50%;
		left: 16px;
		transform: translateY(-50%);
		color: rgba(var(--color-rgb-black), 0.6);
		pointer-events: none;
		transition: 0.3s ease all;
	}

	.text-input:focus + label, .text-input:not(:placeholder-shown) + label, textarea:focus + label,textarea.text-input:not(:placeholder-shown) + label {
		top: 13px;
		left: 10px;
		font-size: 13px;
		background-color: inherit;
		color:black;
	}

.btn-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
}

.btn-primary {
	font-size: 18px;
	font-weight: var(--font-weight-demibold);
	border: var(--border-size-medium) solid var(--color-black);
	border-radius: var(--border-radius-medium);
	padding: 0.5rem;
	min-width: 40%;
	cursor: pointer;
	-ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

	.btn-primary.stretch { width: 100%; }

	.btn-primary:disabled {
		background-color: var(--color-gray-light);
		color: var(--color-gray-dark);
	}

.btn-round {
	width: 32px;
	border-radius: 50%;
	cursor: pointer;
	-ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.btn-primary-small {
	border: 2px solid var(--color-black);
	height: 2rem;
	border-radius: var(--border-radius-light);
	padding: 0 1rem;
	font-weight: var(--font-weight-medium);
	-ms-user-select: none;
		-webkit-user-select: none;
		user-select: none;
	cursor: pointer;
}

.btn-pill {
	background-color: transparent;
	border: 2px solid var(--color-black);
	height: 2rem;
	border-radius: 1000px;
	padding: 0 1rem;
	font-weight: var(--font-weight-medium);
	-ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.btn-center { 
	margin-left: auto;
	margin-right: auto;
}

.thinking-icon {
	display: none;
	width: 20px; 
	height: 20px; 
	margin-right: 5px; 
}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.thinking-icon-go {
		display: block;
		animation-name: spin;
		animation-duration: 1s;
		animation-iteration-count: infinite;
	}

/******* FLEX *******/
.flex-col, .flex-col-reverse, .flex-row, .flex-row-reverse {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-col-reverse {
	flex-direction: column-reverse;
}

.flex-row {
	flex-direction: row;
}

.flex-row-reverse {
	flex-direction: row-reverse;
}

.block { display: block; }

.break {
	flex-basis: 100%;	/* NOTE: If this isn't working, it is very likely becase the parent flexbox doesn't have flex-wrap: wrap; set as it appears Josh removed that as default */
	height: 0;
	padding: 0;
	margin: 0;
}

.mobile-break { display: none; }

br.custom-1024 { display: none; }

.top-left {
	align-items: flex-start;
	justify-content: flex-start;
}

.top-middle {
	align-items: center;
	justify-content: flex-start;
}

.top-right {
	justify-content: flex-start;
	align-items: flex-end;
}

.center-left {
	align-items: flex-start;
	justify-content: center;
}

.center-middle {
	align-items: center;
	justify-content: center;
}

.center-right {
	justify-content: center;
	align-items: flex-end;
}

.bottom-left {
	align-items: flex-start;
	justify-content: flex-end;
}

.bottom-middle {
	align-items: center;
	justify-content: flex-end;
}

.bottom-right {
	justify-content: flex-end;
	align-items: flex-end;
}

.space-between {
	justify-content: space-between;
}

.space-evenly {
	justify-content: space-evenly;
}

.stretch {
	align-items: stretch;
}

/******* MAIN NAVIGATION *******/
.nav-main {
	height: var(--height-nav-header);
	width: 100%;
	max-width: 1400px;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	padding: 0 1rem;
}

	.nav-main:after {
		content: "";
		position: absolute;
		top: var(--height-nav-header);
		left: 0;
		width: 100%;
		height: 2px;
		background-color: var(--color-black);
		z-index: 1;
	}

	.logo #fh-logo {
		display: none;
	}

	.mobile-sign-in { margin-left: 20px; }

/******* Navigation Menu *******/
.nav-dropdown-toggle, .nav-dropdown-header, .nav-dropdown-items-header {
	display: none;
}
.nav-dropdown-menu {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
	gap: 0.5rem;
	align-content: center;
	justify-content: center;
	text-align: center;
}

	.nav-dropdown {
		--shadow-color: 55deg 12% 76%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;
	}

		.nav-dropdown-title {
			font-weight: var(--font-weight-demibold);
			cursor: pointer;
		}
		
			.nav-dropdown:hover > .nav-dropdown-title {
				background-color: var(--color-yellow);
			}
		
		.nav-dropdown-items-wrapper {
			display: none;
			position: absolute;
			background-color: transparent;
			padding: 2rem 0.5rem 0.5rem 0.5rem;
		}

		.nav-dropdown:hover > .nav-dropdown-items-wrapper {
			display: flex;
		}

		.nav-dropdown-items {
			background-color: var(--color-white);
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			width: max-content;
			min-width: 200px;
			border-radius: var(--border-radius-heavy);
			padding: 0.5rem 1rem;
			box-shadow: 0px 0.2px 0.3px hsl(var(--shadow-color) / 0),
			0px 0.6px 0.9px hsl(var(--shadow-color) / 0.06),
			0px 1px 1.5px hsl(var(--shadow-color) / 0.11),
			0px 1.6px 2.4px hsl(var(--shadow-color) / 0.17),
			0px 2.7px 4.1px hsl(var(--shadow-color) / 0.22);
		}

			.nav-dropdown-item {
				text-decoration: none;
				color: var(--color-black);
				padding: 0.5rem 1rem;
				font-weight: var(--font-weight-demibold);
				border-radius: var(--border-radius-heavy);
			}

				.nav-dropdown-item:hover {
					background-color: var(--color-yellow);
				}

	.nav-account-menu-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 2rem;
		font-weight: var(--font-weight-medium)
	}

		.nav-account-menu-icon {
			display: none;
		}

		.nav-account-menu-header {
			display: none;
		}

	.nav-main-cart {
		justify-self: center;
	}
	.nav-main-account {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
	}
		.nav-account-menu-wrapper {
			display: none;
		}

			.nav-main-account .dropdown-link {
				display: flex;
				flex-direction: row;
				gap: 0.75rem;
			}

		.nav-account-welcome {
			display: flex;
			flex-direction: row;
			gap: 0.5rem;
			align-items: center;
		}

		.profile-welcome {
			display: flex;
			flex-direction: row;
			gap: 1rem;
			align-items: center;
			white-space: nowrap;
		}

		.welcome-message {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			font-weight: var(--font-weight-medium);
			white-space: nowrap;
		}

			.welcome-message-logout {
				font-size: var(--font-size-base);
				font-weight: var(--font-weight-regular);
				cursor: pointer;
			}
			

	.cart-mini {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		width: fit-content;
		cursor: pointer;
		gap: 0.5rem;
	}
		.cart-mini .icon {
			color:  var(--color-green-dark);
			fill: var(--color-green-dark);
			height: 60px;
			width: 80px;
		}

		.cart-mini-icon {
			position: relative;
		}

			.cart-mini-icon-count {
				position: absolute;
				width: 100%;
				text-align: center;
				left: 0;
				bottom: 11px;
				color:white;
				font-size: 20px;
				font-weight: var(--font-weight-medium);
			}

		.cart-mini .shopping-for-text {
			border-radius: var(--border-radius-medium);
		}

		.cart-mini-totals {
			display: flex;
			flex-direction: column;
			flex: 1;
			line-height: 1.2rem;
		}
		
		.cart-mini-price {
			font-size: 18px;
			font-weight: var(--font-weight-medium);
		}

		.cart-mini-quantity {
			font-size: 14px;
			font-weight: var(--font-weight-medium);
		}

	

.notification-body {
	background-color: var(--color-yellow);
	text-align: center;
	padding: 1rem 0;
}

	.notification-snap-normal { background-color: var(--color-beige); }

	.notification-snap-heighted {  }

	.notification-snap-normal .a, .notification-snap-heighted .a {
		text-decoration: underline;
	}

/******* Generic Vertical Navigation *******/
.nav-vertical {
	position: sticky;
	top: 125px;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 200px;
	padding: 0 20px;
	order: -10;
	gap: 12px;
}

	.nav-options-title {
		font-weight: var(--font-weight-demibold);
		font-size: var(--font-size-input);
	}

	.nav-options {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

			.nav-option {
				font-weight: var(--font-weight-medium);
				line-height: var(--font-line-height-heading);
				border-radius: var(--border-radius-heavy);
				padding: 8px 12px;
				transition: 0.1s ease;
				display: flex;
				align-items: center;
				cursor: pointer;
			}

			.nav-option:hover {
				background-color: rgba(var(--color-rgb-yellow), 0.6);
			}

			.nav-option:active,
			.nav-option:target,
			.nav-option.active {
				background-color: var(--color-yellow);
			}

/******* HOME PAGE *******/
.home .how-it-works {
	
}

	.home .how-it-works .sticky-container {
		position: relative;
		height: calc(100% - 27vh - var(--height-nav-header))
	}

	.home .how-it-works .sticky {
		position: sticky;
		height: max-content;
		top: calc(27vh + (var(--height-nav-header) * 2));
	}

	.home .how-it-works-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 54vh;
		gap: 2rem;
	}

		.home .how-it-works-image {
			width: 100%;
		}

			.home .how-it-works-image img {
				margin: auto;
			}

		.home .how-it-works-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 1rem;
		}

		.home .how-it-works-step h3 {
			font-size: 24px;
			font-weight: var(--font-weight-demibold);
		}

		.home .how-it-works-step p {
			font-size: 18px;
			font-weight: var(--font-weight-medium);
		}

/******* MEET THE TEAM *******/
main:has(> section.employees-wrapper) {
	min-height: calc(100vh - var(--height-nav-header));
}

.employees-hero {
	flex: 0 1 auto;
}
.employees-wrapper {
	justify-content: flex-start;
	flex-direction: column;
	align-items: center;
	margin: 1rem 0;
}

	.employees-filters-wrapper {
		height: 32px;
		width: 95%;
		max-width: var(--shop-items-max-width);
	}

		.employees-filters {
			display: flex;
			flex-direction: row;
			gap: 0.25rem;
		}

			.employees-filter {
				cursor: pointer;
				text-transform: capitalize;
				font-weight: var(--font-weight-demibold);
			}

			.employees-filter:hover {
				background-color: rgba(var(--color-rgb-green-dark), 0.7);
			}

			.employees-filter.active {
				background-color: var(--color-green-dark);
			}


		.employee {
			position: relative; /* Ensure the back and front are positioned relative to this container */
			transition: transform 1s;
			transform-style: preserve-3d;
			cursor: pointer;
			height: 300px; /* Set a fixed height to prevent collapse */
		}
		

			.employee-front, .employee-back {
				position: absolute;
				display: flex;
				flex-direction: column;
				gap: 0.5rem;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}

			.employee.flipped {
				transform: rotateY(180deg);
			}

			.employee.hidden {
				display: none;
			}

			.employee-back {
				transform: rotateY(180deg);
				background-color: var(--color-beige);
				height: 100%;
				width: 100%;
				border-radius: var(--border-radius-heavy);
				padding: 12px;
				border: 1px solid var(--color-black);
			}

				.employee img {
					aspect-ratio: 5 / 4;
					object-fit: cover;
					border-radius: var(--border-radius-heavy);
				}

					.employee-detail {
						display: flex;
						flex-direction: column;
						gap: 0.2rem;
					}

						.employee .name {
							font-weight: var(--font-weight-bold);
						}

					.employee .department {
						font-size: 14px;
					}

/******* FARMERS & ARTISANS *******/
.vendors-hero {
	flex: 0 1 auto;
}

.vendors-wrapper {
	justify-content: flex-start;
	flex-direction: column;
	align-items: center;
	margin: 1rem 0;
}

	.vendors, .employees {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(var(--shop-item-min-width), 1fr));
		column-gap: var(--shop-items-col-gap);
		row-gap: 1rem;
		padding: 20px 0px;
		width: 95%;
		max-width: var(--shop-items-max-width);
		margin: 0 auto;
	}


		.vendor, .employee {
			transition: transform 1s;
			transform-style: preserve-3d;
			cursor: pointer;
			max-height: 250px;
		}

		.employee {
			position: relative; /* Ensure the back and front are positioned relative to this container */
			height: 300px; /* Set a fixed height to prevent collapse */
		}
		

			.vendor-front, .employee-front {
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
			}

				.employee-front {
					width: 100%;
				}

			.vendor-about {
				max-width: 960px;
				padding: 0 20px;
				text-align: center;
				font-weight: 500;
			}

			.vendor-item-title {
				padding: 40px 0;
			}

			.vendor.hidden {
				display: none;
			}

				.vendor img, .employee img {
					aspect-ratio: 6 / 4;
					object-fit: cover;
					border-radius: var(--border-radius-heavy);
					max-height: 150px;
				}

					.vendor-detail {
						display: flex;
						flex-direction: column;
						gap: 0.1rem;
					}

						.vendor .name {
							font-weight: var(--font-weight-bold);
						}

					.vendor .department {
						font-size: 14px;
					}

	.vendor-detail-header { padding: 2rem 0; }

/******* HOW IT WORKS *******/
.about-us { background-color: var(--color-beige); }

.about-us-full { 
	max-width: 620px;
	text-align: center;
}

/******* OUR VALUES *******/
.our-values { max-width: 960px; }

	.values .numbered-list { 
		margin-left: 20px; 
		font-size: clamp(1.2rem, 1vw + 0.5rem, 1.312rem);
	}

	.values-arrow {
		position: absolute; 
		margin-left: -50px; 
		margin-top: 75px;
	}

/******* WORKPLACE WELLNESS *******/
.wellness-list {
	list-style: disc;
	margin-left: 80px;
}

.workplace-wellness .feature {
	align-items: stretch;
}

	.workplace-wellness .feature-card {
		background-color: var(--color-white);
		padding: 2rem 1rem;
		border-radius: var(--border-radius-heavy);
		max-width: 470px;
		min-width: calc(100vw / 4);
	}

		.workplace-wellness .feature-card img {
			max-height: 200px;
		}

.wellness-typeform-form {
	background-color: var(--color-white);
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.wellness-form {
	background-color: transparent;
	width: min(90vw, 800px);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;
}

.wellness-image {
	max-height: 400px;
}

/******* CANCEL *******/
.cancel-wrapper {
	display: block;
}

	.cancel-container {
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		padding: 40px 20px;
	}

		.cancel-subhead {
			font-size: var(--font-size-input);
			margin-top: 20px;
			font-weight: var(--font-weight-demibold);
		}

		.cancel-line-break {
			margin-left: 80px;
			margin-right: 80px;
			border-bottom: 2px solid var(--color-black);
		}

	.cancel-container form {
		max-width: 540px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

		.cancel-field { 
			margin-bottom: 20px;
		}

		.cancel-container form textarea {
			height: 200px;
		}

		.cancel-full-width {
			width: 95%;
			text-align: center;
		}

		.cancel-spacer { height: 5px; }

		.cancel-small-margin, input[type="radio"].chip-checkbox + label.cancel-small-margin {
			margin-bottom: 5px;
		}

		.cancel-confirm {
			text-align: center;
			background-color: var(--color-yellow);
			border-color: var(--color-black);
			margin-bottom: 20px;
		}

		.cancel-nevermind {
			text-align: center;
			background-color: var(--color-green-dark);
			border-color: var(--color-black);
			color: var(--color-white);
			margin-top: 10px;
		}

/******* BOUNTY *******/
.bounty-list { 
	font-size: clamp(1.2rem, 1vw + 0.5rem, 1.312rem);
	margin-bottom: 20px;
}

.bounty-terms-container { 
	max-width: 960px; 
	margin-top: 0;
}

.bounty-terms { 
	padding: 60px; 
	border-radius: var(--border-radius-medium);
}

.bounty-reviews {
	max-width: 960px;
}

/******* CONTACT *******/
.contact-us {
	background-color: var(--color-yellow);
}

	.contact-us .feature {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-items: stretch;
		max-width: unset;
	}

	.contact-us .feature-card {
		background-color: var(--color-white);
		padding: 2rem 1rem;
		border-radius: var(--border-radius-heavy);
		max-width: 470px;
		min-width: calc(100vw / 4);
	}

	.contact-us .btn-primary {
		margin-top: 16px;
	}

	.contact-drawing { 
		height: 157px;
		margin-left: auto; 
		margin-right: auto;
	}

	.contact-information {
		margin-top: 8px;
		font-size: var(--font-size-input);
		font-weight: var(--font-weight-medium);
	}

		.contact-information svg {
			margin-right: 10px;
			height: 26px;
		}

/****** REFERRAL *******/
.friend-referral {
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	padding-top: 5rem;
	min-height: calc(100vh - var(--height-nav-header));
	background-color: var(--color-beige);
}
	.friend-referral section {
		flex: 0;
	}

	.friend-referral img {
		border-radius: var(--border-radius-heavy);
	}
	
	.friend-referral .content {
		margin: 0 auto;
	}

	.referral-share {
		gap: 2rem;
	}
	.referral-url {
		gap: 1rem;
	}

	.referral-link {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		background-color: var(--color-white);
		border-radius: var(--border-radius-light);
		outline: var(--border-size-medium) solid var(--color-black);
		padding: 0.5rem 1rem;
		font-size: 1.4rem;
		font-weight: var(--font-weight-demibold);
		text-align: center;
	}

		.referral-link .icon {
			height: 20px;
			width: 20px;
			cursor: pointer;
		}
	
	.referral-socials {
		display: flex;
		flex-direction: row;
		gap: 4rem;
	}

		.referral-social {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-weight: var(--font-weight-medium);
		}

			.referral-social .icon {
				cursor: pointer;
				height: 48px;
				width: 48px;
			}

/******* ACCOUNT NAVIGATION *******/
.nav-account {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 75vh;
	min-width: 260px;
	margin-top: 20px;
	padding: 0 20px;
	order: -10;
	gap: 12px;
}

.nav-account-options {
	position: sticky;
	top: 116px;     /* 96px (header) + 44px (dev banner, optional) + 20 (top-margin of .nav account) */
	display:flex;
	flex-direction: column;
	gap: 6px;
}

.nav-account-option {
	font-weight: var(--font-weight-demibold);
	line-height: var(--font-line-height-heading);
	border-radius: var(--border-radius-heavy);
	padding: 16px 12px;
	transition: 0.1s ease;
	display: flex;
	align-items: center;
	gap: 12px;
}

	.nav-account-option:hover {
		background-color: rgba(var(--color-rgb-yellow), 0.6);
	}

	.nav-account-option:active, .nav-account-option:target, .nav-account-option.active {
		background-color: var(--color-yellow);
	}

.account {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem 0;
	min-height: 90vh;
	margin: 20px 40px;
	flex-grow: 1;
	font-size: 36px;
	font-family: var(--font-family-main);
	max-width: calc(100vw - 260px - 80px);
}

	.account-items {
		display: flex;
		flex-direction: column;
		padding: 0.5rem 1rem;
		margin-bottom: 20px;
		padding: 40px;
		background-color: var(--color-offwhite);
		font-weight: var(--font-weight-medium);
		border-radius: 8px;
	}

		.account-header {
			display: flex;
			flex-direction: row;
		}

			.account-header-text {
				flex-grow: 1;
				font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
			}

			.account-header-subtext {
				font-size: clamp(1rem, 1vw + 0.5rem, 1.312rem);
				padding-top: 5px;
			}

		.account-item {
			margin: 10px 0;
			border-bottom: 1px solid var(--color-black);
			padding: 10px 0;
		}

			.account-item:last-child { border: 0; }

			.account-item-subheader, .account-item-subheader-black {
				font-size: clamp(1rem, 1vw + 0.5rem, 1.312rem);
				color: var(--color-gray-dark);
			}

				.account-item-subheader-black { color: var(--color-black); }

			.account-item-container {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				gap: 1rem;
			}

				.account-item-container-top {
					align-items: flex-start;
				}

				.account-item-text, .account-item-days {
					flex-grow: 1;
					font-size: clamp(1.25rem, 1.5vw + 0.625rem, 1.688rem);
					max-width: calc(100vw - 500px);
				}

					.account-item-days { 
						width: 400px; 
						flex-grow: unset;
					}

						.account-item-days b { font-weight: var(--font-weight-medium); }

				.account-item-action {
					font-size: clamp(1rem, 1vw + 0.5rem, 1.312rem);
					padding-top: 5px;
					display: flex;
				}

					.account-item-action div {
						margin: 0 10px;
					}

						.account-item-action div.account-item-action-empty {
							width: 92px;	/* Make this match the 'View More' width */	
						}

				.account-item-fields {
					flex-grow: 1;
				}
					
					.account-item-fields input {
						height: 48px;
						border-radius: 6px;
						padding: 15px;
						margin-right: 10px;
						border: 2px solid var(--color-black);
						font-size: clamp(1.25rem, 1.5vw + 0.625rem, 1.688rem);
						width: 100%;
						max-width: 620px;
					}

						.account-item-fields input.date { 
							width: 242px; 
							border: 2px solid var(--color-black);
							border-radius: 6px;
							background: var(--color-white) url('/_home/Images/Icons/calendar.svg') center right 10px no-repeat;
						}

							.account-item-fields input.date::placeholder { 
								color: var(--color-gray-dark);
								font-size: var(--font-size-input);
								font-weight: var(--font-weight-medium);
								opacity: 1;
								position: absolute;
								top: 10px;
							}

							.account-item-fields input.date:focus { border-color: var(--color-green); }

						.account-item-date-confirm {
							min-width: unset;
							height: 48px;
							padding-left: 40px;
							padding-right: 40px;
							margin-top: 6px;
						}

						.account-item-fields input:focus {
							border-color: var(--color-green);
						}

						.account-item-fields input::placeholder {
							color: rgba(var(--color-rgb-black), 0.8);
							opacity: 0.6;
						}

					.account-item-multi-fields {
						display: flex;
						flex-direction: row;
					}

						.account-item-multi-fields div {
							flex-grow: 1;
							margin-right: 10px;
						}

							.account-item-multi-fields div.no-grow {
								flex-grow: unset;
							}

							.account-item-multi-fields div.input-label {
								color: var(--color-black);
								font-size: var(--font-size-input);
								font-weight: var(--font-weight-medium);
								margin-bottom: -8px;
								margin-left: 3px;
							}

			.account-item-body {
				margin-top: 20px;
				background-color: var(--color-white);
				padding: 20px;
				border-radius: var(--border-radius-medium);
			}

				.account-item-header {
					margin-bottom: 40px;
				}

					.account-item-heading {
						font-size: var(--font-size-input);
						color: var(--color-gray-dark);
					}

				.account-item-item-list {
					padding: 20px 0;
					border-bottom: 1px solid var(--color-black);
				}
				
				.account-item-multi-fields div.account-item-img, .account-item-multi-fields div.account-item-sub, .account-item-multi-fields div.account-item-vendor, .account-item-multi-fields div.account-item-qty {
					flex-grow: unset;
				}
				
				.account-item-img { width: 75px; }

					.account-item-img img { border-radius: var(--border-radius-medium); }

				.account-item-name { font-size: var(--font-size-input); }

				.account-item-sub, .account-item-vendor, .account-item-qty {
					width: 100px;
					font-size: var(--font-size-base);
				}

					.account-item-vendor { width: 150px; }

					.account-item-multi-fields div .btn-round { margin-right: 0; }
				
				.account-order-total {
					background-color: var(--color-white);
					border-radius: var(--border-radius-medium);
					max-width: 400px;
					margin-top: 20px;
					font-size: var(--font-size-base);
					margin-bottom: 40px;
				}

					.account-order-total .summary-item.total { font-size: var(--font-size-base); }

					.account-order-total .summary-item.value { width: 100px; }

					.account-order-total .summary-item hr { margin: 10px 0; }

			.account-item-description, .account-item-history, .account-item-history-action, .account-item-history-vendor, .account-item-history-qty {
				font-size: var(--font-size-input);
			}
			
				.account-item-history, .account-item-history-action, .account-item-history-vendor {
					width: 135px;
					flex-grow: unset;
				}
			
					.account-item-history-action, .account-item-history-vendor {
						width: 175px;
						display: block;
						padding-top: 0;
					}
			
						.account-item-history-action a {
							text-decoration: underline;
						}
			
					.account-item-multi-fields div.account-item-history, .account-item-multi-fields div.account-item-history-action, .account-item-multi-fields div.account-item-history-vendor, .account-item-multi-fields div.account-item-history-qty {
						flex-grow: unset;
						margin-right: 0;
					}
				
				.account-item-history-qty { 
					width: 40px;
					flex-grow: unset;
					padding-right: 10px; /* This is needed so Center matched heading above */
				}
			
			
			.pagination-wrapper {
				overflow-x: auto;
			}
			
				.pagination-wrapper div.flex-row {
					align-items: center;
				}

				.pagination-container {
					flex: 1;
					max-width: 64px;
					text-align: center;
					border: 1px solid var(--color-black);
					border-radius: var(--border-radius-medium);
					margin: 0 10px 10px 0;
				}
				
					.current-page {
						background-color: var(--color-green-lightest);
						color: var(--color-white);
					}
				
					.pagination-box-item {
						padding: 5px 10px;
						min-width: 62px;
					}
			
			.account-item-action div.account-item-subscription-change {
				margin: 0;
			}

	.account-warning {
		width: 100%;
		font-weight: var(--font-weight-medium);
		color: var(--color-red-warning-dark);
		text-align: center;
		font-size: clamp(1.25rem, 1.5vw + 0.625rem, 1.688rem);
	}

/******* DROPDOWN GENERIC *******/
.dropdown {
	position: relative;
	font-weight: var(--font-weight-demibold);
}

	.dropdown hr {
		display: none;
	}

	.dropdown.more {
		display:none;
	}

	.dropdown.more:has(.dropdown-link) {
		display: block;
	}

	.dropdown-wrapper {
		opacity: 0;
		pointer-events: none;
		position: absolute;
		padding: 10px 6px 6px 6px;
		top: -30px;
		left: -6px;
		z-index: 2;
		display: none;
	}

		.dropdown:hover .dropdown-wrapper, .dropdown-wrapper:hover {
			display: block;
			pointer-events: auto;
			opacity: 1;
			top: 32px;
			transition-property: top, opacity;
			transition-duration: 0.3s, 0.3s;
			transition-timing-function: cubic-bezier(.1,.73,.31,.93), cubic-bezier(.43,.32,.91,1.68);
			transition-delay: 0.1s, 0.1s;
		}

		.nav-main .dropdown:hover .dropdown-wrapper, .nav-main .dropdown-wrapper:hover {
			top: 48px;
		}
		
	.dropdown-button {
		padding: 12px;
		border-radius: var(--border-radius-heavy);
		position:relative;
		z-index:1;
		white-space: nowrap;
		cursor: pointer;
	}
		.dropdown-button:hover, .dropdown :has(~ .dropdown-wrapper:hover) {
			background-color: var(--color-yellow);
		}

	.dropdown-menu {
		display: flex;
		background-color: var(--color-white);
		border-radius: var(--border-radius-heavy);
		box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.11);
		width: max-content;
		min-width: 200px;
	}

		.dropdown-links {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			margin: 1rem;
			flex: 1 0 auto;
			pointer-events: none;
		}

			.dropdown-wrapper:hover .dropdown-links {
				pointer-events: auto;
			}

		.dropdown-link {
			width: 100%;
			font-weight: var(--font-weight-demibold);
			border-radius: var(--border-radius-medium);
			transition: background-color 0.1s ease;
			cursor: pointer;
			padding: 0.5rem;
		}

		.nav-shop .dropdown-link {
			padding: 0.5rem;
		}

		.dropdown-link:hover {
			background-color: var(--color-yellow);
		}

		.dropdown-background {
			background-position: center left;
			-webkit-transition: background-image 0.1s;
			transition: background-image 0.1s;
			border-top-right-radius: var(--border-radius-heavy);
			border-bottom-right-radius: var(--border-radius-heavy);
			background-size: cover;
			flex: 1 1 20%;
		}

/******* Tabbed Navigation Default Styling *******/
.navigation-tabs {
	display: flex;
	flex-direction: column;
	align-items: center;
}
	.tab-links {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 24px;
		font-weight: var(--font-weight-medium);
		width: 90%;
	}
	
	.tab-links.center {
		align-items: center;
		justify-content: center;
	}

		.tab-link.active {
			color: var(--color-green-lightest);
			text-decoration: underline;
			text-underline-offset: 2px;
			text-decoration-color: var(--color-green-lightest);
		}

	.navigation-tabs hr {
		width: 99%;
	}

	.tab-contents {
		flex-direction: column;
		justify-content: center;
		width: 90%;
		padding: 20px 0;
		gap: 8px;
	}

		.basket-order .tab-contents {
			width: unset;
			padding: 0;
		}

		.tab-contents > .tab-content {
			display: none;
		}

			.tab-contents > .tab-content.force-show {
				display: flex;
			}

		.tab-contents > .tab-content:first-child {
			display: flex;
		}

			.tab-contents > .tab-content:first-child.force-hide { 
				display: none;
			}

		.tab-content {
			flex-direction: column;
			gap: 0.5rem;
		}

		.tab-content:has(img) {
			display: flex;
			flex-direction: row;
		}

.content .navigation-tabs {
	gap: 4rem;
}
	.content .tab-link {
		font-size: 1.5rem;
		font-weight: var(--font-weight-demibold);
	}

		.content .tab-link.active {
			color: inherit;
			text-decoration: underline;
			text-decoration-color: var(--color-yellow);
			text-underline-offset: 0.5rem;
		}

	.content .tab-contents {
		text-align: center;
	}

		.content .tab-content {
			font-size: 18px;
			font-weight: var(--font-weight-medium);
			gap: 1.5rem;
		}

/******* POPUP NEW *******/
.modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.modal {
	width: 100%;
	margin: auto;
	padding: 0;
	border: none;
	background: transparent;
}

	.modal-content {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		position: relative;
		min-height: 200px;
		width: 100%;
		max-width: 900px;
		border-radius: 8px;
		background: var(--color-offwhite);
	}

		.modal-background-beige {
			background-color: var(--color-beige);
		}

		.modal-content:has(.modal-section:only-of-type), .modal-content:has(.modal-section-separate) {
			max-width: 450px;
		}

		.modal .icon {
			height: inherit;
			width: inherit;
		}

		.modal-close {
			position: absolute;
			top: 10px;
			right: 10px;
			margin: auto;
			height: 28px;
			width: 28px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
		
		.modal-primary {
			padding: 1rem;
		}

		.modal-section {
			display: flex;
			flex-direction: column;
			flex: 1 0 auto;
			align-items: center;
			justify-content: center;
			gap: 16px;
		}

		.modal-section-payment {
			display: flex;
			flex-direction: column;
			width: 100%;
			justify-content: center;
			gap: 16px;
		}
		
			.modal-section:first-of-type {
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
			}

			.modal-section:last-of-type {
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
			}

			.modal-section > form {
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin: 8px;
				width: 90%;
			}

				.modal-section > form.gap-16 {
					gap: 16px;
				}

			.modal-section > img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}

			.modal-section > span {
				text-align: center;
			}

			.modal-section-content {
				display: flex;
				flex-direction: column;
				width: 90%;
			}

				.modal-section-content-heading {
					font-size: 1.2rem;
					font-weight: var(--font-weight-medium);
				}
			
			.modal-multiform {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

				.modal-multiform.hide-all {
					display: none;
				}

		.pin-subhead {
			font-size: 18px;
			font-weight: var(--font-weight-medium);
		}

/******* QUICKVIEW (MODAL) *******/
.quickview::backdrop {
	background: rgba(0,0,0,0.5);
}

.quickview {
	border: none;
	margin: auto;
	width: 100%;
	max-width: 900px;
	padding: 0;
	border-radius: var(--border-radius-heavy);
}

	.btn-quickview-close {
		position: absolute;
		top: 5px;
		right: 5px;
		background: none;
		border: none;
		cursor: pointer;
		padding: unset;
		border-radius: var(--border-radius-heavy);
	}

		.btn-quickview-close > .icon {
			height: 25px;
			width: 25px;
		}

	.quickview-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12px 0px;
		gap: 12px;
	}

		.quickview .product-detail-information {
			width: 95%;
			
		}

		.quickview .product-detail {
			height: auto;
			min-height: auto;
			width: 100%;
			align-items: center;
		}

		.quickview .navigation-tabs.product-information {
			width: 95%;
			max-width: auto;
		}

/******* DONATE MODAL *******/
.navigation-tabs.share-the-harvest {
	border: 1px solid black;
	border-radius: var(--border-radius-light);
	padding: 12px 0;
}

	.share-the-harvest .tab-contents {
		width: 95%;
	}

	.share-the-harvest .donation-other {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.share-the-harvest .input-toggle {
		height: 24px;
	}

	.share-the-harvest .input-group:has(.input-toggle) {
		justify-content: space-between;
	}
	
/******* POPUP *******/
#PopUpOuter {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(var(--color-rgb-black), 0.6);
	z-index: var(--z-index-overlays);	/* --z-index-overlays = 1000 */
}

	#PopUpInner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: var(--color-black);
		background-color: var(--color-offwhite);
		border-radius: 5px;
		z-index: calc(var(--z-index-overlays + 1)); /* 1001 */
		text-align: center;
		padding: 15px;
		max-height: calc(100% - 80px);
		overflow: hidden;
	}

		#PopUpClose { text-align: right; }

		#PopUpBody {
			margin-left: auto;
			margin-right: auto;
			z-index: calc(var(--z-index-overlays + 2));	/* 1002 */

			/*
				We make this match the height above in #PopUpInner only using vh instead of %
				Also, we handle most of this in popup.js so if we are running into scroll issues, start there before changing this
			*/
			max-height: calc(100vh - 80px);
			overflow-y: auto;
		}

		.popup-body-no-scroll, .popup-body-no-scroll2 { overflow: hidden; }

/******* FAQ ELEMENTS *******/
.faqs {
	background-color: var(--color-offwhite);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2rem;
	width: 90%;
	max-width: 1000px;
	margin: 2rem auto;
	padding: 2rem 4rem;
}

	.faq {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
	}

		.faq-question {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: var(--font-size-input);
			font-weight: var(--font-weight-medium);
		}
			.faq-question::after {
				content: "+";
				font-size: 24px;
				line-height: normal;
			}

		.faq-answer {
			font-size: var(--font-size-base);
			display: none;
		}
			
			.faq.active .faq-answer {
				display: block;
			}


/******* SHOP NAVIGATION*******/
.shopping-for-week {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: var(--font-weight-demibold);
	font-size: 15px;
	width: 100%;
	min-width: 90px;
	margin-top: 4px;
	background-color: var(--color-green-lightest);
	border-radius: var(--border-radius-medium);
	padding: 3px 0;
}

	header > .shopping-for-week {
		display: none;
	}

.nav-shop {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 90%;
}

	.nav-shop-menu {
		display: flex;
		flex-direction: row;
		gap: 8px;
		align-items: center;
		justify-content: center;
		font-weight: var(--font-weight-demibold);
		padding: 0 5px;
		height: 100%;
	}
	.nav-shop .dropdown-menu {
		display: flex;
		background-color: var(--color-white);
		/* width: 420px; */
		border-radius: var(--border-radius-heavy);
		box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.11);
	}

	.wrapper-search {
		display: none;
		position: absolute;
		top: 100%;
		height: 100vh;
		max-height: 650px;
		width: 100%;
		max-width: 1000px;
		padding: 1rem;
	}

	.wrapper-search.active {
		display: block;
	}

	body:has(.wrapper-search.active) {
		overflow: hidden;
	}

		.container-search {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			background-color: var(--color-white);
			padding: 1rem;
			border-radius: var(--border-radius-heavy);
			box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.11)
		}

			.section-search {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				width: 100%;
			}
				.search-input {

				}

					.search-clear {
						position: absolute;
						right: 10px;

						border: unset;
						background-color: transparent;
						cursor: pointer;
					}

				.search-autocomplete {
					min-height: 40px;
				}

				#search-results-header {
					text-transform: capitalize;
				}

				#search-results-header .highlight {
					color: var(--color-green);
				}

				.search-results.shop-items {
					--shop-item-min-width: 160px;
					--shop-item-max-width: 160px;
					--shop-items-col-gap: 10px;
					--shop-items-max-width: 100%;
					padding: unset;
					max-height: 400px;
					overflow-y: scroll;
					overflow-x: hidden;
				}

				.search-results .item-name {
					font-size: 16px;
					font-weight: 500;
					line-clamp: 1;
					--webkit-line-clamp: 1;
					height: 1.2em;
				}

				.search-results .item-vendor {
					font-size: 13px;
					font-weight: normal;
				}



	.search-toggle {
		height: 30px;
		width: 30px;
	}
	
	.filters {
		position: relative;
	}

	.filter-toggle, .filter-toggle-mobile, .search-toggle {
		cursor: pointer;
	}

	.filter-toggle-mobile {
		flex: 1 0 auto;
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 2px;
	}

		.filter-toggle .icon, .filter-toggle-mobile .icon {
			fill: black;
			color: black;
		}

.nav-shop-mobile {
	display: none;
	flex-direction: row;
	gap: 8px;
	width: 100%;
	height: 90%;
}

	.nav-shop-mobile .nav-categories {
		flex-basis: 50%;
		max-width: 50%;
		background-color: var(--color-offwhite);
		color: var(--color-black);
		border: unset;
		font-size: 1.2rem;
		font-weight: var(--font-weight-medium);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

/******* SHOP *******/
.shop-search {
	position:relative;
	display: flex;
	flex-direction: row;
	width: 32px;
	height: auto;
	transition: width 0.5s ease-in-out;
}

	.shop-search.active {
		width: 200px;
	}

.shop-search .icon {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	cursor: pointer;
	transition: left 0.5s ease-in-out;
}

	.shop-search.active .icon {
		left: 100%;
	}

.shop-search .input-search {
	display: none;
}

	.shop-search.active .input-search {
		display: block;
	}

.shop-filters {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	max-width: 400px;
	padding: 2rem 1rem;
	z-index: 1000;
	background-color: var(--color-white);
	box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.11);
	transition: left 0.5s ease-in-out;
}

	.shop-filters.hidden {
		left: -400px;
	}

	.shop-filters .icon.close {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
		height: 24px;
		width: 24px;
	}

	.shop-tags-filters {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.shop-tags-filters h6:after {
			display: block;
			height: 1px;
			background-color: var(--color-black);
			content: "";
		}

			.shop-filter {
				display: flex;
				flex-direction: row;
				gap: 0.75rem;
				font-size: 16px;
			}

.shop-wrapper {
	background-color: var(--color-offwhite);
}
			
	.shop {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		padding: 20px 20px 0 20px;
		max-width: 100%;
		position: relative;
	}
		.category-header, .category-subheader {
			scroll-margin-top: 150px;
		}
		
		.category-header.hidden {
			display: none;
		}

		.category-snap-tag { margin-left: 10px; }

			.category-snap-tag .snap-tag { 
				font-size: clamp(1.2rem, 1vw + 0.5rem, 1.312rem); 
				font-weight: bold;
			}

		.shop-items-maincat:not(:first-child) {
			outline: transparent;
		}

		.shop-items {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(var(--shop-item-min-width), 1fr)); /* Variable column count based on what will fit in the container. */
			column-gap: var(--shop-items-col-gap);
			row-gap: 20px;
			padding: 20px 0px;
			max-width: var(--shop-items-max-width);
		}

		.shop-items:not(:has(.shop-item:not(.hidden))) {
			display: none;
		}

		.shop-items-maincat:not(:has(.shop-item:not(.hidden))) {
			display: none;
		}

		.shop-items-subcat:not(:has(.shop-item:not(.hidden))) {
			display: none;
		}

		.shop-items.filtered {
			display: none;
		}

			/*Shop needs a little fine-tuning, the item display is MOSTLY good to go */
			.shop-item {
				--shadow-color: 55deg 12% 76%;
				position: relative;
				display: flex;
				flex-direction: column;
				gap: 10px;
				padding: 10px;
				border-radius: var(--border-radius-medium);
			}

				.shop-item:hover {
					background-color: var(--color-beige);
				}

				.shop-item-in-cart, .shop-item-in-cart:hover {
					background-color: var(--color-green-light);
				}

				.shop-item.hidden {
					display: none;
				}

				.shop-item::before {
					top: -1px;
					bottom: 0;
					left: -1px;
					right: -1px;
					border-radius: var(--border-radius-heavy);;
					position: absolute;
					content: "";
					box-shadow: 0px 0.2px 0.3px hsl(var(--shadow-color) / 0),
						0px 0.6px 0.9px hsl(var(--shadow-color) / 0.06),
						0px 1px 1.5px hsl(var(--shadow-color) / 0.11),
						0px 1.6px 2.4px hsl(var(--shadow-color) / 0.17),
						0px 2.7px 4.1px hsl(var(--shadow-color) / 0.22);
					opacity: 0;
					transition: opacity 0.2s ease-in;
					pointer-events: none;
				}

				.shop-item:hover::before { 
					/* Animating opacity instead of the box shadow is more performant */
					opacity: 1;
				}

				.shop-item-cursor { cursor: pointer; }

				.item-image { position: relative; }

					.item-image-overlay {

					}

						.item-alert {
							position: absolute;
							top: 4px;
							left: 4px;
							border-radius: 1000px;
							background-color: var(--color-blue-light);
							color: var(--color-black);
							font-size: 14px;
							font-weight: var(--font-weight-medium);
							padding: 2px 8px;
						}

						.item-badges {
							display: grid;
							grid-template-columns: repeat(5, 1fr);
							position: absolute;
							bottom: -12px;
							height: 20px;
							width: 100%;
						}

						.item-badge {
							background-color: var(--color-maroon);
							border-radius: 100%;
							padding: 4px;
						}

						.item-badge .icon {
							aspect-ratio: 1 / 1;
							color: var(--color-white);
						}

				.shop-item img {
					border-radius: var(--border-radius-heavy);
					aspect-ratio: 3/2;
					box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
					background-color: var(--color-offwhite);
				}

					.shop-item:hover img {
						box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
					}

				.shop-item .item-tags {
					display: flex;
					gap: 10px;
				}

					.shop-item .item-tags .item-tag {
						background-color: var(--color-white);
						color: var(--color-green-dark);
						border-radius: var(--border-radius-medium);
						font-size: var(--font-size-secondary);
						padding: 1px 10px;
						margin-bottom: 6px;
					}

					.shop-item .item-tags .item-tag-empty { width: 0; }

					.shop-item .item-tags .item-tag-no-break {
						white-space: nowrap;
						overflow-x: hidden;
						text-overflow: ellipsis;
					}

				.shop-item .item-vendor {
					font-size: var(--font-size-secondary);
					color: var(--color-green-dark);
					display: block;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.item-name {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					height: calc(1em * 1.2); /* Single line of text */
					font-weight: var(--font-weight-demibold);
					transition: height 0.3s ease-in-out; /* Smooths scaling of height changes */

					@supports (-webkit-line-clamp: 1) or (line-clamp: 1) {
						white-space: initial;
						display: -webkit-box;
						display: -moz-box;
						display: -ms-box;
						display: box;
						-webkit-line-clamp: var(--shop-item-name-line-clamp);
						line-clamp: var(--shop-item-name-line-clamp);
						-webkit-box-orient: vertical;
						box-orient: vertical;
						height: calc(1em * 2.4);
					}
				}

				.item-purchase, .vendor-snap, .vendor-snap-left {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					gap: 0.5rem;
				}

					.vendor-snap { 
						justify-content: space-between; 
						padding: 0;
						white-space: nowrap;
					}

					.vendor-snap-left {
						justify-content: start;
						gap: 1rem;
						padding: 0;
						white-space: nowrap;
					}

						.snap-tag {
							background-color: var(--color-green-light);
							border-radius: 1000px;
							font-size: 14px;
							font-weight: var(--font-weight-medium);
							padding: 2px 8px;
						}

				.item-price-details {
					display: flex;
					flex-direction: row;
					flex: 1 0;
					position: relative;
					justify-content: flex-start;
				}
					.item-price-detail {
						display: flex;
						flex-direction: row;
					}
					.item-price {
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						font-weight: var(--font-weight-medium); 
						gap: 2px;
						
					}

					.item-price-details:has(.item-sale > .item-price-details) > .item-price-detail, .item-price-details:has(.item-sale-force > .item-price-details) > .item-price-detail {
						color: var(--color-maroon);
					}
						.item-price::before {
							content: '$';
						}

						.no-dollar::before {
							content: unset;
						}

						.item-price-dollars {
							font-size: 20px;
							line-height: normal;
						}

						.item-price-cents {
							font-size: 14px;
						}
					.item-price-separator {
						line-height: normal;
					}
					.item-price-separator::before {
						content: ' ';
						display: block;
						width: 4px;
						height: 100%;
					}
					.item-uom {
						color: rgba(0, 0, 0, 0.8);
						font-size: 14px;
					}
						.item-sale, .item-sale-force {
							display: flex;
							height: 100%;
							position: absolute;
							top: -1rem;
							left: 0.2rem;
							color: var(--color-black);
							text-decoration: line-through;
						}

						.pdp .item-sale, .quickview-content .item-sale {
							position: static;
							order: 2;
							top: 0;
							padding-left: 8px;
						}

							.item-sale .item-price, .item-sale-force .item-price {
								font-weight: normal;
								font-size: 14px;
							}

							.item-sale .item-uom, .item-sale-force .item-uom {
								color: var(--color-maroon);
							}

				.item-order {
					min-width: 102px;
					display: grid;
					grid-template-columns: 1fr 1.5fr 1fr;
					align-items: center;
					height: 28px;
					border-radius: 16px; /* should always be half of height - do not use 50% */
					background-color: var(--color-green-dark);
					padding: 0 2px;
				}

					.item-order img, .shop-item:hover img.no-hover-shadow {
						box-shadow: unset;
					}

					.item-order-plus-only {
						min-width: 50px;
						grid-template-columns: 1fr;
						background-color: var(--color-green-light);
						justify-items: center;
					}

					.item-order-disabled { background-color: var(--color-gray); }

						.item-order-disabled .btn-round { cursor: default;}

					.item-order-hide { display: none; }

					.item-order:has(> :last-child:nth-child(2)) {
						grid-template-columns: 2fr 1fr;
						min-width: 88px;
						margin-left: 24px;
					}

				.item-order-add, .item-order-remove  {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: transparent;
					height: 28px;
					width: 28px;
				}

					.item-order-add .icon, .item-order-remove .icon {
						width: 18px;
						height: 18px;
						background: transparent;
					}

				.item-order-quantity {
					color: var(--color-white);
					font-weight: var(--font-weight-demibold);
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
				}

		.customize-title {
			background-color: var(--color-blue-light);
			text-align: center;
			font-weight: var(--font-weight-medium);
			padding: 5px;
			border-radius: var(--border-radius-medium);
			margin-bottom: 20px;
		}

	/******* MINISHOP *******/
	section:has(.minishop) {
		min-height: calc(100vh - var(--height-nav-header));
		background-color: var(--color-blue-light);
	}
	.minishop {
		height:fit-content;
		margin-top:1rem;
		border-radius: var(--border-radius-heavy);
	}

		.minishop.shop {
			padding: 1.5rem 0.5rem;
		}

	.minishop-header {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 0.5rem;
		max-width: var(--shop-items-max-width);
		margin-bottom:1rem;
	}

		.minishop-subtitle {
			display: flex;
			flex-direction: row;
			gap: 2rem;
		}
			.minishop-subtitle-text {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 0.5rem;
			}

			.minishop-image {
				position: relative;
				width: 120px;
				height: 100px;
				flex: 1 0 auto;
			}

				.minishop-image:first-child {
					top: -25px;
				}

		.minishop-skip {
			font-size: var(--font-size-input);
			font-weight: var(--font-weight-medium);
		}

		.minishop .shop-items {
			z-index: 5;
			padding: 0 0 1.5rem 0;
		}

			.minishop .shop-item:hover {
				background-color: var(--color-green-light);
				border-radius: 5px;
			}

				.minishop .item-order {
					background-color: rgba(var(--color-rgb-green-lightest), 0.5);
				}

	.minishop-footer {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

/*******  PDP *******/
.pdp {
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}
	.breadcrumbs {
		display: flex;
		flex-direction: row;
		gap: 10px;
		width: 95%;
		max-width: 1200px;
		align-items: center;
	}
		.breadcrumb {
			max-width: 150px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.breadcrumb-divide {
			height: 6px;
		}

		.breadcrumbs > .breadcrumb:last-child {
			color: green;
		}

	.product-detail {
		flex-direction: column;
		min-height: 70vh;
		width: 95%;
		max-width: 1200px;
		gap: 20px;
	}
		.product-detail-information {
			display: flex;
			flex-direction: row;
			gap: 1rem;
		}
		
		.product-detail-group {
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		
			.navigation-tabs.product-information {
				width: 50%;
				max-width: 800px;
				align-items: flex-start;
			}

			.product-detail-information .item-photos {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				width: 85%;
				height: auto;
			}

			.product-detail-information .item-photo-carousel {
				display: flex;
				flex-direction: row;
				gap: 0.5rem;
				height: 85px;
			}

				.item-photo-carousel img {
					height: 100%;
					width: auto;
					aspect-ratio: 1 / 1;
					object-fit: cover;
					border-radius: var(--border-radius-heavy);
					box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
				}

				.item-photo-carousel img:hover {
					cursor: pointer;
					filter: grayscale(0.9);
				}
				
			.product-detail-information > .item-photos > img {
				width: inherit;
				height: inherit;
				object-fit: cover;
				border-radius: var(--border-radius-heavy);
			}

		.product-detail-purchase.actions {
			grid-column: 2 / 3;
		}

			.product-detail-purchase .purchase-type {
				height: 165px;
				margin-top: 20px;
				border: 1px solid black;
				border-radius: 4px;
				padding: 12px 0px;
				display: flex;
				flex-direction: column;
			}

			.product-detail-purchase .purchase-subscribe {
				display: none;
				flex-direction: column;
				gap: 20px;
			}

			.product-detail-purchase .item-purchase {
				gap: 12px;
				justify-content: start; /* We changed this for the Next Arriving addition, but if this were purposesly set to space-between for a reason we may need to change it back */
				margin-top: 20px;
			}

				.product-detail-purchase .item-order {
					max-width: 120px;
				}

					.product-detail-purchase .item-purchase .btn-primary {
						flex: 1;
					}

	.recommended {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: var(--color-beige);
		width: 100%;
	}

		.recommended .shop-items {
			width: 95%;
			max-width: 1200px;
			padding: 20px 0;
		}

/******* Baskets *******/
.basket-header-wrapper {
	width: 100%;
}

	.basket-header-wrapper-no-height {
		height: unset;
	}

.basket-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: var(--height-nav-header);
	width: calc(100%);
	background-color: var(--color-yellow);
	padding: 0.5rem 1rem 0.5rem;
	z-index: 6;
}

.section-basket-select {
	display: flex;
	flex-direction: column;
}

	.basket-text { max-width: 960px; }

	.basket-select {
		display: flex;
		flex-direction: row;
		flex: 1 0 auto;
		background-color: rgba(var(--color-rgb-blue-light), 1);
		max-width: 100%;
		gap: 40px;
	}

		.nav-baskets {
			display: flex;
			flex-direction: column;
			flex: 1 0 auto;
			flex-basis: 20%;
			align-items: center;
		}

		.nav-baskets ul {
			display: flex;
			flex-direction: column;
			gap: 20px;
			position: fixed;
			top: calc(50vh + var(--height-nav-header));
			transform: translateY(calc(-50% - (var(--height-nav-header) / 2)));
		}

			.nav-baskets .nav-option {
				font-size: 1.3rem;
				font-weight: var(--font-weight-demibold);
			}

		.baskets {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			align-items: center;
			flex: 1 1 auto;
			flex-basis: 80%;
		}

			.basket-intro {
				margin: 40px auto 20px auto;
				text-align: center;
				max-width: 780px;
			}

				.basket-intro-content {
					margin-top: 20px;
					font-size: var(--font-size-input);
					font-weight: var(--font-weight-normal);
				}

			.basket-categories-wrapper {
				display: flex;
			}

				.basket-categories {
					display: flex;
					margin: 0 auto;
					gap: 10px;
					background-color: var(--color-offwhite);
					border-radius: 50px;
					padding: 10px;
				}

					.basket-category {
						font-size: 20px;
						font-weight: var(--font-weight-demibold);
						border-radius: 50px;
						background-color: var(--color-beige);
						padding: 7px 30px;
						cursor: pointer;
						color: rgba(var(--color-rgb-green-dark), .6);
					}

						.basket-category.active, .basket-category:hover {
							background-color: var(--color-green);
							color: var(--color-white);
							text-decoration: unset;
							text-underline-offset: unset;
							text-decoration-color: unset;
						}

			.basket {
				display: none;
				gap: 20px;
				align-items: start;
				margin: 20px auto 4rem auto;
				border-radius: var(--border-radius-heavy);
				padding: 20px;
				max-width: 960px;
				color: var(--color-white);
				background-color: var(--color-green-dark);
			}

				.basket.active {
					display: flex;
				}

				.basket-image {
					position: relative;
					text-align: center;
					cursor: pointer;
				}

					.basket-image img {
						height: 210px;
						width: 355px;	/* This should match .basket-item-list */
						object-fit: cover;
						border-radius: var(--border-radius-medium);
					}

					.basket-image-look-inside {
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translate(-50%, -50%);
						margin: 0 auto;
						text-transform: uppercase;
						background-color: var(--color-yellow);
						border-radius: 20px;
						padding: 5px 20px;
						color: var(--color-black);
						font-weight: var(--font-weight-bold);
					}

				.basket-item-list {
					width: 355px;	/* This should match .basket-image img */
					color: var(--color-black);
					background-color: var(--color-offwhite);
					border-radius: var(--border-radius-medium);
					cursor: pointer;
					padding: 10px 20px;
				}

					.basket-item-disclaimer {
						text-align: center;
						color: var(--color-green-dark);
						font-weight: var(--font-weight-demibold);
						margin-bottom: 10px;
					}

						.basket-item-disclaimer-box-contents {
							color: var(--color-black);
							background-color: var(--color-gold-light);
							padding: 5px 10px;
							border-radius: var(--border-radius-medium);
						}

					.basket-item-grid {
						display: grid;
						grid-template-columns: 20px auto 60px;
						gap: 0 20px;
						font-weight: var(--font-weight-medium);
					}
				
				.basket-details {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					margin-right: 20px;
					gap: 16px;
					max-width: 525px;
				}
					.basket-description {
						font-size: 18px;
					}

				.basket-price {
					margin: 0 20px;
					font-size: 32px;
					font-weight: var(--font-weight-demibold);
					display: flex;
				}

					.basket-price-dollar-sign {
						font-size: 20px;
						padding-top: 6px;
						padding-right: 6px;
					}

				.basket-order {
					display: flex;
					flex-direction: column;
					gap: 16px;
					width: 100%;
					align-items: unset;
				}

				.basket-sizes {
					display: flex;
					gap: 15px;
				}

					.basket-size {
						display: flex;
						align-items: center;
						justify-content: center;
						color: rgba(var(--color-rgb-green-dark),0.8);
						background: var(--color-green-light);
						font-size: 22px;
						font-weight: var(--font-weight-heavy);
						border-radius: 1000px;
						padding: 4px;
						width: 40px;
						min-width: 40px;
						cursor: pointer;
					}

						.basket-size-csa {
							width: 60px;
							min-width: 60px;
						}

						input[type="radio"].basket-size { display: none; }

						/*input[type="radio"].basket-size:checked + label.basket-size {*/
						.basket-sizes .active, .basket-size:hover {
							background-color: var(--color-green-lightest);
							color: var(--color-white);
							text-decoration: none;
						}
					
				.basket-action-button {
					background-color: var(--color-maroon);
					font-weight: var(--font-weight-demibold);
					border-radius: 50px;
					padding: 8px 30px;
					cursor: pointer;
					color: var(--color-white);
					text-transform: uppercase;
					border: 0;
				}

					.basket-action-button-yellow {
						background-color: var(--color-yellow);
						color: var(--color-black);
					}

					.basket-subscribe-icon {
						width: 20px; 
						height: 20px; 
						float: left; 
						margin-right: 10px; 
						margin-top: 2px;
					}

						.basket-action-button:hover .basket-subscribe-icon {
							transition: transform .7s ease-in-out;
							transform: rotate(360deg);
						}

				.basket-cta {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					gap: 16px;
					width: unset;
				}

					.basket-cta-no-gap { gap: 0; }
				
				.current-basket-subscribed-container {
					display: flex;
					flex-flow: row;
					justify-content: space-between;
				}

					.current-basket-subscribed-wrapper {
						text-transform: uppercase;
						font-size: var(--font-size-input);
						line-height: 22px;
					}

						.current-basket-subscribed-name {
							font-weight: var(--font-weight-bold);
						}

				.basket-select-snap-tag {
					margin-left: 20px;
				}

					.basket-select-snap-tag span.snap-tag {
						font-weight: bold;
						background-color: var(--color-yellow);
					}

/******* Basket Customization *******/
.customize .shop-items .item-image-overlay {
	position: absolute;
	top: 10px;
	left: 10px;
}

	.item-image-overlay .customization-overlay {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: start;
		font-weight: var(--font-weight-demibold);
		background: var(--color-maroon);
		color: var(--color-white);
		border-radius: var(--border-radius-medium);
		padding: 3px 5px;
	}

	.customization-overlay.item-order-hide {
		display: none;
	}

	.customization-overlay .current {
		font-size: 1.5rem;
	}

	.customization-overlay .max {
		font-size: .9rem;
		line-height: .9rem;
	}

/******* Customization Status Bar *******/
.customize-status, .customize-status-cart {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	gap: 8px;
	padding: 15px;
	width: 100%;
}

	.customize-status {
		position: sticky;
		bottom: 4px;
		right: 4px;
		z-index: var(--z-index-tooltip);
		width: 350px;
		background: var(--color-beige);
		border: 2px solid var(--color-black);
		border-radius: var(--border-radius-medium);
		font-size: var(--font-size-input);
	}

	.customize-status-cart {
		padding-top: 5px;
		max-width: 280px;
		margin: 0 auto;
	}

	.customize-details {
		display: flex;
		flex-direction: column;
		background-color: var(--color-gold-light);
		padding: 10px 0;
		text-align: center;
		border-radius: var(--border-radius-light);
	}
		
		.customize-name {
			font-weight: var(--font-weight-bold);
		}

	.customize-progress-cta {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 10px;
	}

		.customize-status .progress-group, .cart .customize-status-cart .progress-group {
			position: relative;
		}

			.basket-customize progress, .cart .customize-status-cart progress {
				width: 100%;
				height: 100%;
				background-color: var(--color-green-light);
				border-radius: var(--border-radius-light);
			}

				.cart .customize-status-cart progress { height: 44px; }

			.basket-customize progress[value], .cart .customize-status-cart progress[value] {
				--webkit-appearance: none;
				appearance: none;
			}
		
			.basket-customize progress[value]::-webkit-progress-bar, .cart .customize-status-cart progress[value]::-webkit-progress-bar {
				height: 100%;
				background-color: var(--color-green-light);
				border-radius: var(--border-radius-light);
			}
		
			.basket-customize progress[value]::-webkit-progress-value, .cart .customize-status-cart progress[value]::-webkit-progress-value {
				background-color: var(--color-green);
				transition: width 300ms ease;
				border-radius: var(--border-radius-light);
			}
		
			.basket-customize progress + label, .cart .customize-status-cart progress + label {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-weight: var(--font-weight-demibold);
					color: var(--color-white);
			}

		.customize-cta button {
			background-color: var(--color-orange);
			color: var(--color-black);
			cursor: pointer;
			border: 0;
			border-radius: var(--border-radius-light);
			font-weight: var(--font-weight-demibold);
			padding: 10px 15px;
			width: 100%;
		}

	.customize-message {
		margin: -5px 0;
		text-align: center;
	}

	.cart-footer-basket-customize .cart-divider {
		border-bottom: var(--border-size-medium) solid var(--color-green-dark);
	}

/******* SLIDER CARDS *******/
.cards {
	display: grid;
	grid-gap: 20px;
	grid-auto-flow: column;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 50px;
	/* Layout when 4 or less cards defined */
	grid-template-columns: 10px repeat(auto-fill, minmax(calc(100vw * 0.33  - var(--card-gutter) * 2), 1fr));
	margin: 4rem auto;
}

	.cards:has(:nth-child(5)) {
		grid-template-columns: none;
		/* Layout when 5 or more cards defined at max screen width. Breakpoints defined within screens. */
		grid-auto-columns: calc(25% - var(--card-gutter) * 2);
	}

	/* Required for proper sizing of grid when using auto-columns. */
	.cards:before, .cards:after {
		content: '';
		width: 10px;
	}

	.card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		gap: var(--card-gutter);
		aspect-ratio: 3/2;
		scroll-snap-align: start;
		padding: 15px;
		border-radius: var(--border-radius-medium);
		background-size: cover;
		color:white;
	}

		.cards:has(:nth-child(5)) .card {
			aspect-ratio: 1/1;
		}

/******* CONTENT > HERO *******/
.hero {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
}

	.hero.main {
		height: calc(99vh - var(--height-nav-header));
	}

	.hero.secondary {
		height: calc(75vh - var(--height-nav-header));
	}

	.hero.mini {
		min-height: 35vh;
	}

	.hero.darken {
		background-color: rgba(var(--color-rgb-black),.5);
		background-blend-mode: hue;
	}

	.hero video {
		height: 100%;
		width: 100%;
		object-fit: cover;
		position: absolute;
		filter: brightness(0.5);
		z-index: 0;
	}

	.hero_caption {
		gap: 2rem;
		align-items: center;
		width: min(90vw, 800px);
		color:white;
		text-align: center;
		z-index: 1;
		padding: 1rem 0;
	}

	.hero_caption span {
		font-size: 1.5rem;
	}

	.hero-shop {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 65vh;
		background-size: cover;
	}
	
	.hero-slides {
		position: relative;
		height: 65vh;
		flex: 1;
		overflow: hidden; /* Ensure that slides are contained within the slider */
	}
	
	.hero-slides:not(:has(.hero-slide.active)) .hero-slide:first-child {
		transform: translateX(0%);
	}
	
	.hero-controls {
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		width: max(65%, calc(100vw - 550px - 60px)); /* 550 is the width of the caption container. 60 is the combined width of the controls. */
		z-index: 10;
		left: 0;
		padding: 0 12px;
	}

		.hero-control {
			height: max-content;
			width: auto;
			padding: 0.5rem;
			background-color: rgba(var(--color-rgb-black), 0.7);
			border-radius: 100%;
			cursor: pointer;
		}

		.control-left {
			left: 0;
		}

		.control-right {
			right: 0;
		}

			.hero-control .icon {
				height: 30px;
				width: 30px;
				color:white;
			}

	.hero-slide {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		transform: translateX(100%); /* All slides start off the screen to the right */
		z-index: 1;
		background-color: var(--color-white);
	}

		.hero-slide.active {
			z-index: 10;
		}
		
		.hero-shop .hero-slide {
			background-color: var(--color-offwhite);
		}
	
	.hero-image, .hero-mobile {
		flex: 1 1 auto;
		height: 100%;
		width: 65%;
		object-fit: cover;
		background-color: var(--color-white);
	}
	
	/* Hide the mobile image by default on desktop */
	.hero-mobile {
		display: none;
	}

	.hero-caption {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 0.75rem;
		color: var(--slide-headline-text-color, var(--color-black));
		position: relative;
		z-index: 0; /* Ensure the caption is above the image */
		flex-basis: 550px;
		margin: 0 2rem;
	}

		.hero-caption span {
			font-weight: var(--font-weight-demibold);
		}

		.hero-caption .btn-primary {
			color: var(--slide-button-text-color);
			background-color: var(--slide-button-fill-color);
			border-color: var(--slide-button-border-color);
		}

		.hero-caption .btn-primary:hover {
			color: var(--slide-button-text-hover-color);
			background-color: var(--slide-button-fill-hover-color);
			border-color: var(--slide-button-border-hover-color);
		}

/******* LOCAL DOLLARS *******/
.local-spend-container {
	margin-bottom: 2rem;
	padding-top: 2rem;
}

.local-spend {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
}

	.local-spend > p {
		font-size: 18px;
		font-weight: var(--font-weight-demibold);
	}

	.local-spend-tracker {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}

		.local-spend-tracker-year {
			margin: 1rem;
			padding-bottom: 2.2rem;
		}

		.local-spend .dollar-amount {
			font-size: 1.1rem;
			font-weight: var(--font-weight-demibold);
		}

		.local-spend .dollar-amount::before {
			content: '$';
		}

		.local-spend-progress {
			width: 95%;
			max-width: 1200px;
			margin: 1rem 0;
			position: relative;
		}
		
		.local-spend-progress-bar {
			position: relative;
			display: flex;
			flex-direction: column;
			width: 100%;
			gap: 0.5rem;
		}
		
		.local-spend-progress-bar-fill {
			height: 1.5rem;
			width: 100%;
			display: flex;
			align-items: center; /* Align text vertically */
			justify-content: flex-end; /* Position text near the end of the bar */
			background-image: url("/_home/Images/Misc/dirt_road.svg");
			background-repeat: repeat-x;
			position: relative;
		}

			.progress-bar-indicator {
				position: absolute;
				top: -58px;
				left: calc(max(0px, ((var(--progress-dollars) / var(--progress-goal)) * 100%) - 225px));
				height: 60px;
			}

				.progress-bar-indicator img {
					height: 100%;
					width: 100%;
					object-fit: contain;
				}

		.local-spend-progress-bar-fill .local-spend-progress-bar-year {
			position: absolute; /* Inside the fill container */
			white-space: nowrap; /* Prevent text wrapping */
			padding: 0.2rem 0.4rem; /* Optional: Padding for text */
			font-size: 0.9rem; /* Adjust as needed */
			z-index: 10; /* Ensure text is above the bar */
			pointer-events: none; /* Prevent interactions with the text */
			color: var(--color-white);
			font-weight: var(--font-weight-demibold);
			font-size: 16px;
			left: 39%;
			top: 8px;
		}

		.previous .local-spend-progress-bar-year {
			left: 21%;
		}
	
/******* CONTENT > TEXT HERO *******/
.content-intro {
	width: 95%;
	background-color: var(--color-blue-light);
}

	.content-intro-wrapper {
		width: 80%;
		gap: 1rem;
		align-items: center;
		height: max-content;
		padding: 40px 0px;
	}

		.content-intro-title {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-basis: 30%;
		}

		.content-intro-text {
			flex: 1;
			font-size: 18px;
		}

/******* CONTENT > FLEX *******/
.flex-20 {
	flex-basis: 20%;
}
.flex-40 {
	flex-basis: 40%;
}
.flex-50 {
	flex-basis: 50%;
}
.flex-60 {
	flex-basis: 60%;
}
.flex-80 {
	flex-basis: 80%;
}

.content, .content.height-half {
	display: flex;
	min-height: 50vh;
}

.content.height-full {
	min-height: calc(100vh - var(--height-nav-header));
}

.content.height-third {
	min-height: 35vh;
}

.content.height-quarter {
	min-height: 25vh;
}

.content.height-shrink {
	min-height: 0;
}

.content-full, .content-split {
	gap: 4rem;
	max-width: 1500px;
	margin: 4rem auto;
}

.content-half {
	gap: 2rem;
	max-width: 750px;
	margin: 4rem auto;
}

	.content-960 { max-width: 960px; }

	.content-header {
		font-size: clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
		font-weight: var(--font-weight-demibold);
	}

	.content-subheader {
		font-size: clamp(1rem, 1vw + 0.5rem, 1.312rem);
		font-weight: var(--font-weight-medium);
	}

	.content-split-text {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		font-weight: var(--font-weight-medium);
		font-size: var(--font-size-input);
		margin: 0 2rem;
	}

	.content-split-image {
		height: 100%;
		margin: 0 2rem;
	}

	.content-split-image img {
		/*height: inherit;*/	/*This was removed because if this is here Safari makes the height 100% of image, not the other way around - see /p/partners for an example */
		object-fit: cover;
		border-radius: var(--border-radius-medium);
	}

	.content-split-image img.vendor-img {
		width: 100%;
	}

.content-half-margin { margin: 2rem auto; }

.content-no-margin-top { margin-top: 0; }

.content-no-margin-bottom { margin-bottom: 0; }

.content-no-gap { gap: 0; }

.cols-small-gap { gap: 20px; }

.no-min-height { min-height: unset; }

section[style^='background-image'] .content-inner {
	gap: 2rem;
	padding: 2rem;
	border-radius: var(--border-radius-heavy);
}

.feature {
	display: flex;
	flex-direction: row;
	margin: 2rem;
	gap: 2rem;
	max-width: 1500px;
}

	.feature-card {
		display: flex;
		flex-direction: column;
		flex: 1;
		gap: 1rem;
	}

		.feature-card .feature-card-image {
			border-radius: var(--border-radius-heavy);
		}

			.feature-card img {
				border-radius: inherit;
			}
		
		.feature-card .feature-card-content {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

	section:has(> .feature) {
		align-items: center;
		gap: 1rem;
	}

.reviews {
	display: grid;
	grid-gap: 20px;
	grid-auto-flow: column;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 50px;
	/* Layout when 4 or less cards defined */
	margin: 4rem auto;
	width: 90%;
}

	.review {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding: 2rem;
		background-color: var(--color-offwhite);
		color:black;
	}

		.review-rating {
			display: flex;
			flex-direction: row;
			color: rgba(225, 225, 225, 1);
		}

		.review-content {
			font-weight: var(--font-weight-medium);
		}

		.review-author {
			font-weight: var(--font-weight-medium);
		}

.spotlights {
	display: grid;
	grid-gap: 20px;
	grid-auto-flow: column;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 30px;
	grid-template-columns: 10px repeat(auto-fill, minmax(calc(100vw), 1fr));
	margin: 2rem auto;
	width: 90vw;
	position: relative;
}

.spotlights:before, .spotlights:after {
	content: '';
	width: 10px;
}

	.spotlight {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 90vw;
		gap: 1rem;
		padding: 2rem;
	}

		.spotlight-image {
			display: flex;
			height: 100%;
			width: 100%;
			border-radius: var(--border-radius-medium);
			align-items: center;
			justify-content: center;
			margin: 0 2rem;
		}

			.spotlight-image img {
				object-fit: cover;
				height: inherit;
				width: inherit;
				border-radius: inherit;
			}

		.spotlight-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			gap: 1.5rem;
			margin: 0 2rem;
		}

			.spotlight-date {
				background: var(--color-white);
				color: var(--color-black);
				border: none;
			}

			.spotlight-items {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 12px;
			}

			.spotlight-items .btn-pill:hover {
				cursor: pointer;
				background-color: var(--color-orange);
			}

.slider-controls {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 50px;
	width: 95%;
	z-index: 10;
}

	.slider-control {
		height: max-content;
		width: auto;
		padding: 0.5rem;
		background-color: rgba(var(--color-rgb-black), 0.5);
		border-radius: 100%;
		cursor: pointer;
	}

	.control-left {
		left: 0;
	}

	.control-right {
		right: 0;
	}

		.slider-control .icon {
			height: 40px;
			width: 40px;
			color:white;
		}

ul.numbered-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: auto;
	list-style-position: inside;
}

	ul.numbered-list:before {
		content: attr(aria-label);
		font-size: 1.2rem;
		font-weight: var(--font-weight-demibold);
	}

/**************** CART *****************/
.cart-wrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 500;
}

	.cart-wrapper.open {
		display: block;
	}

.cart {
	position: fixed;
	top: 0;
	right: 0;
	transform: translatex(500px);
	height: 100%;
	width: 100%;
	max-width: 450px;
	display: flex;
	flex-direction: column;
	background-color: white;
	z-index: 501;
	overscroll-behavior: contain;
	transition: transform 0.5s ease;
}
		
	.cart-wrapper.open ~.cart {
		transform: translatex(0px);
	}
		.cart-header {
			display: flex;
			flex-direction: column;
			padding: 10px;
			background-color: var(--color-offwhite);
		}

			.cart-header-wrapper {
				background-color: var(--color-green-dark);
				border-radius: 50px;
				padding: 10px;
				display: flex;
				gap: 10px;
				justify-content: center;
				max-width: 360px;
				margin-left: auto;
				margin-right: auto;
			}

				.cart-selector {
					position: relative;
					padding: 7px 40px;
					border-radius: 40px;	/* This gets overwriten by JavaScript hover */
					color: var(--color-white);
					background-color: var(--color-green);
					font-weight: var(--font-weight-demibold);
					cursor: pointer;
				}

					.cart-selector-widget {
						margin: 0;
						padding: 0;
						position: absolute;
						height: 7px;	/* This hsould match height of .triangle-down */
						bottom: -7px;	/* This likely will need to be .triangle-down */
						left: 50%;
						transform: translateX(-50%);
					}

						.cart-selector-widget .triangle-down {
							display: inline-block;
							height: 7px;
							border-left: 7px solid transparent; 
							border-right: 7px solid transparent; 
							border-top: 7px solid var(--color-green-dark);
						}

					.cart-header-option {
						color: var(--color-green-dark);
						background-color: var(--color-beige);
					}

						.cart-header-option .cart-selector-widget {
							display: none;
						}

					.cart-selector-restore {
						opacity: .6;
						text-decoration: underline;
					}

					.cart-selector-options-wrapper {
						display: flex;
						gap: 10px;						/* This needs to equal the padding-left for .cart-selector-options-dropdown below */
						justify-content: space-between;
					}

						.cart-selector-options-dropdown {
							margin: -7px -40px -7px 0;	/* This needs to be the negative value of the .cart-selector padding-right above */
							border-left: 1px solid var(--color-beige);
							padding-top: 5px;		
							padding-right: 15px;		/* This should be half the margin-right above */
							padding-left: 15px;			/* This needs to equal the gap for .cart-selector-options-wrapper above */
							position: relative;
						}

							.cart-header-option .cart-selector-options-dropdown {
								border-left-color: var(--color-green);
							}

							.cart-selector-options-dropdown .triangle-down-maroon, .cart-selector-options-dropdown .triangle-up-maroon, .cart-selector-options-dropdown .triangle-down-beige, .cart-selector-options-dropdown .triangle-up-beige {
								display: inline-block;
								height: 7px;
								border-left: 7px solid transparent; 
								border-right: 7px solid transparent; 
								border-top: 7px solid var(--color-maroon);
								margin-right: 5px;
							}

								.cart-selector-options-dropdown .triangle-up-maroon, .cart-selector-options-dropdown .triangle-up-beige {
									border-bottom: 7px solid var(--color-maroon);
									border-top: unset;
								}

									.cart-selector-options-dropdown .triangle-down-beige, .cart-selector-options-dropdown .triangle-up-beige { 
										border-top-color: var(--color-beige); 
										border-bottom-color: var(--color-beige); 
									}

										.cart-header-option .cart-selector-options-dropdown .triangle-down-beige, .cart-header-option .cart-selector-options-dropdown .triangle-up-beige {
											border-top-color: var(--color-maroon); 
											border-bottom-color: var(--color-maroon); 
										}

							.cart-selector-options {
								position: absolute;
								top: 35px;
								right: 0;
								text-align: center;
								z-index: var(--z-index-header);
								background-color: var(--color-green);
								border-top: 1px solid var(--color-beige);
								border-bottom-left-radius: 20px;
								border-bottom-right-radius: 20px;
								padding: 5px 0 10px 0;
								width: 0;		/* This gets overwriten by JavaScript hover */
								display: none; 	/* This gets overwriten by JavaScript hover */
							}

								.cart-header-option .cart-selector-options {
									border-top-color: var(--color-green);
									background-color: var(--color-beige);
								}

								.cart-selector-options-selector {
									padding: 5px;
								}

			.cart-titles {
				display: flex;
				flex-direction: column;
			}

				.cart-title {
					font-size: 1.3rem;
					font-weight: var(--font-weight-medium);
				}

				.cart-status {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
					
					.cart-timing-message {
						font-weight: var(--font-weight-medium);
					}

					.cart-action {
						height: 1.5rem;
					}

					.cart-action-button, .cart-skip-action, .btn-height-auto {
						height: auto;
					}
		
			.btn-close-cart {
				position: absolute;
				top: 0.5rem;
				right: 0.5rem;
				cursor: pointer;
			}

		.cart-subheader {
			padding: 0.5rem 1rem;
			background-color: var(--color-green-light);
		}

		.cart-contents {
			display: flex;
			flex-direction: column;
			flex: 1 1 auto;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
			-ms-overflow-style: none;
			scrollbar-width: none;
			background-color: var(--color-offwhite);
			position: relative;
		}

			.cart-contents-skipped { 
				display: none; 
			}

			.cart-contents::-webkit-scrollbar {
				display: none;
			}
		
			.cart-basket .cart-item .item-name {
				grid-column: unset;
				max-width: 100%;
			}

				.basket-contents {
					display: flex;
					flex-direction: column;
					margin-left: 0.25rem;
					background-color: var(--color-beige);
					margin: 0 -1rem -1rem -1rem;
					padding: .5rem 1rem 1rem 1rem;
					border-bottom-left-radius: var(--border-radius-light);
					border-bottom-right-radius: var(--border-radius-light);
				}

					.cart-item.basket-item {
						margin: 0;
						padding: 0;
					}

					.basket-item-details {
						width: 100%;
						display: grid;
						grid-template-columns: 0.2fr 3fr 1fr;
					}

						.basket-item-uom {
							text-align: right;
						}

			.cart-basket, .cart-grocery, .cart-recommendation, .cart-module, .cart-bounty, .cart-footer {
				margin: 10px 20px 10px 20px;
			}

				.cart-basket {
					padding: 1rem;
					background-color: var(--color-gold-light);
					border-radius: var(--border-radius-light);
				}

					.cart-basket-wrapper {
						display: flex;
						gap: 10px;
					}

						.cart-basket-columns {
							width: 50%;
						}

							.cart-basket-columns div {
								margin: 5px 0;
							}

								.cart-basket-columns div.cart-item-img-bottom-padding {
									margin: 0;
								}

							.cart-basket-columns .cart-item-img {
								border-radius: var(--border-radius-light);
							}

							.cart-basket-columns .cart-item-img-bottom-padding {
								padding-bottom: 1rem;
								line-height: 0px;
							}

							.cart-customize-wrapper {
								/*min-height: 32px;*/	/* I have taken this out becuase I think it looks better than their design, particularly with the customize messasge in there */
							}

								.cart-customize-wrapper button { 
									border: 0;
									color: var(--color-white);
									background-color: var(--color-maroon);
									font-weight: var(--font-weight-demibold);
								}

							.cart-basket-view-toggle .triangle-down-maroon, .cart-basket-view-toggle .triangle-up-maroon {
								display: inline-block;
								height: 7px;
								border-left: 7px solid transparent; 
								border-right: 7px solid transparent; 
								border-top: 7px solid var(--color-maroon);
								margin-right: 5px;
							}

								.cart-basket-view-toggle .triangle-up-maroon {
									border-bottom: 7px solid var(--color-maroon);
									border-top: unset;
								}

							.cart-basket-view-hidden, .cart-basket-view-shown {
								cursor: pointer;
							}
							
								.cart-basket-view-shown {
									display: none;
								}

				.cart-grocery {
					display: flex;
					flex-direction: column;
					gap: 0.25rem;
				}

					.cart-item {
						background-color: var(--color-beige);
						display: flex;
						flex-direction: row;
						position: relative;
						margin: 5px 0;
						padding: 1rem;
						border-radius: var(--border-radius-light);
					}

						.cart-item .item-details {
							display: grid;
							grid-template-columns: 2fr 1fr 1fr;
							flex: 1 1 auto;
						}

						.cart-item .item-detail {
							flex: 1;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
						}

						.cart-item img {
							height: 70px;
							margin-right: 10px;
							object-fit: cover;
							border-radius: var(--border-radius-heavy);
							aspect-ratio: 1 / 1;
							box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
							background-color: var(--color-offwhite);
						}

							.cart-item img.cart-subscribe-icon {
								height: 16px;
								width: 16px;
								object-fit: unset;
								border-radius: unset;
								aspect-ratio: unset;
								box-shadow: unset;
								background-color: unset;
								margin-right: 5px;
								padding-top: 3px;
							}

						.cart-item .reorder-icon { display: inline-block; }

						.cart-item .item-vendor {
							align-self: flex-end;
							font-size: 14px;
						}

						.cart-item .item-name {
							font-size: 17px;
							line-height: 19px;
							height: auto;
							display: flex;
							font-weight: var(--font-weight-demibold);
							grid-column: 1 / span 2;
						}

						.cart-item .item-order-wrapper {
							grid-column: 2 / span 2;
							display: flex;
							align-items: flex-end;
							justify-content: flex-end;
						}

							.cart-item .item-order {
								height: unset;
								min-width: unset;
								padding: unset;
								background-color: var(--color-green-dark);
								color: var(--color-white);
								grid-template-columns: 1fr .75fr 1fr;
							}

								.cart-item .item-order-add, .cart-item .item-order-remove {
									height: 26px;
									width: 46px;
									margin-top: 2px;
									margin-bottom: 2px;
									background-color: var(--color-green-dark);
								}

									.cart-item .item-order-add {
										padding-right: 20px;
									}

									.cart-item .item-order-remove {
										padding-left: 20px;
									}

								.cart-item .item-order-disabled .item-order-add,.cart-item .item-order-disabled .item-order-remove {
									background-color: unset;
								}

								.cart-item .item-order-add .icon, .cart-item .item-order-remove .icon {
									height: 16px;
									width: 16px;
									background: transparent;
								}

									.cart-item .item-order-add .icon { 
										margin-left: 10px; 
										margin-right: 0;
									} 
									
									.cart-item .item-order-remove .icon { 
										margin-left: 0; 
										margin-right: 10px;
									}

								.cart-item .item-order-disabled .item-order-add .icon, .cart-item .item-order-disabled .item-order-remove .icon {
									display: none;
								}

								.cart-item .item-order-grayed, .cart-item .item-order-disabled {
									background-color: var(--color-gray);
								}

									.cart-item .item-order-grayed .item-order-add, .cart-item .item-order-grayed .item-order-remove, .cart-item .item-order-grayed-minus-only {
										background: transparent;
										cursor: default;
									}

									.cart-item .item-order-grayed svg, .cart-item .item-order-grayed img.icon, .cart-item .item-order-grayed-minus-only svg, .cart-item .item-order-grayed-minus-only img.icon {
										display: none;
									}

								.cart-item .item-order .item-order-quantity {
									font-weight: var(--font-weight-bold);
								}

						.cart-item .item-total {
							display: flex;
							justify-content: end;
							font-size: 17px;
							font-weight: var(--font-weight-normal);
							flex-basis: 120px;
						}

						.cart-item .item-uom {
							flex: 1 0 auto;
							display: flex;
							margin-right: auto;
							font-size: 16px;
							align-self: flex-end;
						}

							.snap-tag-cart {
								padding-left: 10px;
							}

						.cart-item .item-remove {
							flex: 1 0 auto;
							display: flex;
							margin-right: auto;
							align-self: flex-end;
							text-decoration: underline;
							font-size: 14px;
						}

						.btn-remove-item {
							height: 16px;
							width: 16px;
						}

						.btn-remove-item svg {
							height: inherit;
							width: inherit;
						}

					.cart-no-addon {
						padding: 20px;
						background-color: var(--color-green-light);
						font-weight: var(--font-weight-demibold);
						display: flex;
						align-items: center;
						justify-content: space-between;
						gap: 20px;
					}

						.cart-no-addon button {
							color: var(--color-white);
							background-color: var(--color-green);
							border: 0;
							min-width: 115px;
							height: 2rem;
							border-radius: var(--border-radius-light);
							padding: 0 1rem;
							cursor: pointer;
							text-wrap: nowrap;
						}

				.cart-recommendation-wrapper {
					background-color: var(--color-offwhite);
					padding: 0 0 20px 0;
					border-radius: var(--border-radius-light);
				}

					.cart-recommendation-title {
						text-align: center;
						font-weight: var(--font-weight-demibold);
						margin-bottom: -10px;
						color: var(--color-green-dark);
					}

					.cart-recommendation-container {
						display: grid;
						grid-template-columns: 1.5fr 1fr;
						gap: 10px;
						background-color: var(--color-beige);
						padding: 1rem;
						margin: 20px 0 0 0;
						border-radius: var(--border-radius-light);
					}

						.cart-recommendation-left {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
						}

							.cart-recommendation-vendor {
								font-size: var(--font-size-input);
								font-weight: var(--font-weight-demibold);
								color: var(--color-green-dark);
							}
							
							.cart-recommendation-price-uom {
								display: flex;
								gap: 40px;
							}

								.cart-recommendation-price .item-price {
									font-weight: var(--font-weight-demibold);
								}

									.cart-recommendation-price .item-price::before {
										content: unset;
									}

									.cart-recommendation-price .item-price-dollars {
										font-size: 24px;
										line-height: 28px;
									}

						.cart-recommendation-column button {
							border: 0;
							background-color: var(--color-green);
							color: var(--color-white);
							margin-bottom: 10px;
							width: 100%;
							font-weight: var(--font-weight-demibold);
						}

							.cart-recommendation-column button.cart-recommendation-button-dark {
								background-color: var(--color-green-dark);
							}

						.cart-recommendation-container .cart-item-img {
							border-radius: var(--border-radius-light);
						}

				.cart-bounty {
					background-color: var(--color-beige);
					padding: 20px;
				}

					.cart-bounty-wrapper, .cart-bounty-wrapper-bottom {
						display: flex;
						justify-content: space-between;
						margin-top: 10px;
					}

						.cart-bounty-wrapper-bottom {
							margin-top: 0;
							margin-bottom: 10px;
						}

						.cart-bounty-money {
							font-weight: var(--font-weight-demibold);
						}

						.cart-bounty-member-since {
							padding-top: 10px;
							color: var(--color-green-dark);
						}

						.cart-bounty-image img {
							width: 80px;
						}

						.cart-bounty-button {
							border: 0;
							min-width: 115px;
							height: 2rem;
							border-radius: var(--border-radius-light);
							padding: 0 1rem;
							font-weight: var(--font-weight-demibold);
							-ms-user-select: none;
								-webkit-user-select: none;
								user-select: none;
							cursor: pointer;
							background-color: var(--color-green-dark);
							color: var(--color-white);
						}

				.cart-module {
					padding: 20px;
					background-color: var(--color-blue-light);
					display: flex;
					gap: 20px;
					justify-content: space-between;
				}

					.cart-module-headline {
						font-weight: var(--font-weight-demibold);
					}

					.cart-module-button {
						border: 0;
						min-width: 115px;
						height: 2rem;
						border-radius: var(--border-radius-light);
						padding: 0 1rem;
						font-weight: var(--font-weight-demibold);
						-ms-user-select: none;
							-webkit-user-select: none;
							user-select: none;
						cursor: pointer;
						background-color: var(--color-green-dark);
						color: var(--color-white);
						text-wrap: nowrap;
					}
				
				.cart-footer {
					display: flex;
					flex-direction: column;
					margin-top: auto; /* Push the footer to the bottom */
					position: fixed;
					bottom: 0;
					left: 0;
					width: calc(100% - 40px);
					margin-bottom: 0;
					background-color: transparent;
				}

					.cart-footer-basket-customize { background-color: var(--color-offwhite); }

					.cart-footer-skipped { display: none; }

					.cart-divider {
						border-bottom: var(--border-size-medium) solid var(--color-blue-light);
						line-height: 12px;
						margin: 12px -20px 12px -20px;	/* Right/Left should be negative margin for .cart-footer - Top/Bottom should match triangle borders below */
						text-align: center;
						background-color: transparent;
					}
			
						.cart-divider .triangle-up-blue, .order-totals .triangle-down-blue {
							display: inline-block;
							height: 12px;
							border-left: 12px solid transparent; 
							border-right: 12px solid transparent; 
							border-top: 12px solid var(--color-blue-light);
							margin-bottom: -14px;		/* This should be (triangle borders * -1) MINUS .cart-divider bottom border */
						}
			
							.cart-divider .triangle-up-blue {
								border-bottom: 12px solid var(--color-blue-light);
								border-top: unset;
								margin-bottom: -2px;	/* This should be (.cart-divider bottom border * -1) */
							}

							.order-totals .order-totals-triangle {
								text-align: center;
								line-height: 12px;
								margin-top: -25px;
								margin-bottom: 20px;
							}

					.cart-footer .order-total-hidden { display: none; }		/* Don't move above .cart-divider .triangle-down-blue, .cart-divider .triangle-up-blue */

					.cart-summary-view-toggle { cursor: pointer; }		

					.cart-footer .order-totals { 
						background-color: var(--color-offwhite); 
						margin-top: -12px;
						padding-top: 12px;
						padding-bottom: 20px;
					}

					.skip-donate-restore-promo {
						display: flex;
						justify-content: center;
						gap: 20px;
						padding-top: 1rem;
					}

						.skip-donate-restore-promo .btn-primary-small {
							font-weight: var(--font-weight-normal);
							border: 0;
							color: var(--color-black);
							background-color: var(--color-green-light);
							padding: 5px 10px;
							height: unset;
						}

						.cart-footer .promo {
							margin: 0 auto;
							display: flex;
						}

							.cart-footer .promo .text-input {
								margin-right: 5px;
								padding: 5px;
								border: unset;
								border: var(--border-size-light) solid var(--color-green);
								border-radius: var(--border-radius-light);
								background-color: transparent;
								display: block;
								text-align: center;
								max-width: 150px;
							}

							
							.cart-footer .promo input.normal-placeholder::placeholder {
								font-style: italic;
								text-align: center;
								color: rgba(var(--color-rgb-black), 0.8);
								opacity: 0.6;
							}

						.cart-skip, .cart-restore {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							gap: 0.5rem;
						}

							.cart-restore {
								flex-direction: row;
								justify-content: space-between;
							}

							.cart-skip-header {
								font-weight: var(--font-weight-demibold);
							}

							.cart-skip-actions {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;
								gap: 0.5rem;
								width: 90%;
							}

					.cart-summary {
						display: grid;
						grid-template-columns: 2fr 1fr;
						margin: 1rem 0 0 0;
					}

						.cart-summary-wide { grid-template-columns: 1fr 2fr; }

						.cart-summary hr {
							grid-column: 1 / 3;
							border: unset;
							border-top: 1px solid var(--color-black);
							margin: 4px 0;
						}

						.cart-summary .order-total-see-details {
							color: var(--color-green-dark);
							font-weight: var(--font-weight-regular);
							cursor: pointer;
						}

						.summary-item.label {
							font-size: 15px;
							font-weight: var(--font-weight-medium);
						}

						.summary-item.label.demi-bold {
							font-weight: var(--font-weight-demibold);
						}

						.summary-item.value {
							font-size: 15px;
							text-align: right;
							font-weight: var(--font-weight-medium);
						}

						.summary-item.value.demi-bold {
							font-weight: var(--font-weight-demibold);
						}

						.summary-item.total {
							grid-row: span 2;
							font-weight: var(--font-weight-medium);
						}

						.summary-item.stretch {
							grid-column: span 2;
						}

						.summary-snap-message {
							margin: 1rem 2rem;
							font-style: italic;
							margin-top: 10px;
							text-align: center;
							font-size: .9rem;
						}
						
						.bounty-savings {
							grid-column: span 2;
							display: flex;
							flex-direction: row;
						}
	
#CartSummaryState { display: none; }

/***** Unfinished Free Shipping Progress Bar *****/

.basket-progress {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
	.progress-message {
		padding: 0;
		color: var(--color-green-dark);
		font-weight: var(--font-weight-demibold);
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: center;
	}

		.progress-free-delivery {
			display: inline-block;
		}

			.progress-free-delivery img {
				height: 25px;
			}

	.progress {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}

	.cart progress {
		width: 100%;
		height: .75rem;
		background-color: transparent;
	}

	.cart progress[value] {
		--webkit-appearance: none;
		appearance: none;
	}

	.cart progress[value]::-webkit-progress-bar {
		height: .75rem;
		background-color: var(--color-green-light);
		border-radius: 10px;
	}

	.cart progress[value]::-webkit-progress-value {
		background-color: var(--color-green);
		transition: width 300ms ease;
		border-radius: 10px;
	}

		.cart progress + label {
			position: absolute;
			left: 0;
			width: 100%;
			text-align: center;
			line-height: 1.5rem;
		}

/**************** CART POPUP - REMOVE THIS IF WE DON'T END UP USING IT OR SOME OF THE SUB METHODS (i.e. Delivery Progress) *****************/
#CartContainer {
	position: relative;
}

	#CartContainer #HeaderCartID {
		display: none;
	}

	#CartNumber {
		/*display: none;*/
		font-size: 12px;
		font-size: 36px;	/* TEMPORARY FOR TESTING */
		font-weight: bold;	/* TEMPORARY FOR TESTING */
		line-height: normal;
		width: 100%;
		height: calc(100% - 10px);
		position:absolute;	/* Make sure parent div is relative */
		top: 9px; 
		left: 0px;
		z-index: var(--z-index-cart);

		/* Vertical / Horizontal Center */
		display: flex; 
		justify-content: center; 
		align-content: center; 
		flex-direction: column;
		text-align: center;
	}

#CollapseUnder {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(34,34,34,.6);
	z-index: var(--z-index-cart);
}

#ShoppingCartCollapse {
	position: fixed;
	z-index: var(--z-index-cart);
	height: 0;		/* This is set via JavaScript */
	bottom: 0;
	right: 0;
	
	color: var(--color-black);
	width: 400px;
	padding: 10px;
	background-color: var(--color-white);
	overflow-y: auto;
	overflow-x: hidden;
}

	#ShoppingCartCollapse .cart-collapse-menu {
		background-color:var(--color-green-lightest);
		box-shadow: 0px 3px 6px #00000029;
		opacity: 1;
		margin: -10px -10px 0 -10px;
	}

		#ShoppingCartCollapse .cart-collapse-menu-item {
			background: var(--color-green-light) 0% 0% no-repeat padding-box;
			padding: 10px;
			cursor: pointer;
		}

		#ShoppingCartCollapse .cart-collapse-selected-item {
			background: var(--color-white) 0% 0% no-repeat padding-box;
			/*border-radius: 5px 5px 0px 0px;*/
		}

		#ShoppingCartCollapse #ShoppingCartCollapseSelectedOrder {
			flex-grow: 1;
		}

	#ShoppingCartCollapse .cart-collapse-order-list {
		padding: 10px;
		border-bottom: 1px solid var(--color-green-light);
		margin-left: -10px;
		margin-right: -10px;
	}

		#ShoppingCartCollapse .cart-collapse-order-list .cart-collapse-order-list-radio {
			width: 25px;
			padding-top: 3px;
			padding-right: 10px;
		}

			#ShoppingCartCollapse .cart-collapse-order-list .cart-collapse-order-list-radio input[type="radio"] {
				transform: scale(1.25);
			}

		#ShoppingCartCollapse .cart-collapse-order-list .cart-collapse-order-list-details {
			flex-grow: 1;
		}

			#ShoppingCartCollapse .cart-collapse-order-list .cart-collapse-order-list-item-count {
				width: 100px;
			}

		#ShoppingCartCollapse .cart-collapse-order-list .cart-collapse-order-list-actions {
			padding-left: 20px;
		}

			#ShoppingCartCollapse .cart-collapse-order-list .cart-collapse-order-list-actions .cart-collapse-order-list-actions-shop input.button {
				font-size: 14px;
				background-color: var(--color-green);
				color: var(--color-white);
				text-transform: uppercase;
				margin-bottom: 10px;
				padding: 0.25em 2.25em;
			}
	
	#ShoppingCartCollapse .cart-collapse-delivery {
		padding-top: 10px;
		margin-bottom: 40px;
	}

	#ShoppingCartCollapse #ShoppingCartCollapseOrders {
		display: none;
	}

	#ShoppingCartCollapse #SearchAgainTable {
		width: 100%;
	}

		#ShoppingCartCollapse #SearchAgainTable .cart-input-left {
			border: 2px solid var(--color-green);
		}

	#ShoppingCartCollapse .upcoming-order {
		padding-bottom: 20px; 	/* This needs to match #Upcoming Orders Above */
	}
		
		#ShoppingCartCollapse .upcoming-order-skipped {
			color: rgba(13.3,13.3,13.3,.3);
		}

			#ShoppingCartCollapse .upcoming-order-skipped .basket-icon svg {
				opacity: 33%;
			}

		#ShoppingCartCollapse .mineral-green-background {
			background-color: var(--color-green-lightest);
			margin: -10px -20px 10px -20px;	/* These need to match #Upcoming Orders Above */
			padding: 10px 20px 10px 20px;	/* These need to match #Upcoming Orders Above */
		}

			#ShoppingCartCollapse .order-totals {
				margin-top: 40px;
				background-color: #FFFFFF;
			}

				#ShoppingCartCollapse table.order-donate-skip-restore-table {
					width: 100%;
					margin-top: 20px;
				}

					#ShoppingCartCollapse table.order-donate-skip-restore-table a {
						font-family: var(--font-family-condensed);
						font-size: 14px;
						text-transform: uppercase;
						background-color: transparent;
						color: var(--color-black);
						border: var(--color-black) 2px solid;
						border-radius: 0;
						padding: .25em 1.5em;
						-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
						text-decoration: none;
						display: block;
						text-align: center;
					}

					#ShoppingCartCollapse table.order-donate-skip-restore-table a.normal-link {
						display: inline;
						border: 0;
						text-decoration: underline;
						padding: 0;
						text-transform: none;
					}

			#ShoppingCartCollapse .delivery-progress {
				margin: 40px -20px 0 -20px;
				padding: 10px 20px;
				background-color: var(--color-green-lightest);
				text-align: center;
			}

		#ShoppingCartCollapse .basket-icon {
			padding: 0 10px 0 0;
		}

			#ShoppingCartCollapse .basket-icon svg {
				width: 22px;
			}

		#ShoppingCartCollapse .delivery-date {
			max-width: 200px;
		}

		#ShoppingCartCollapse .delivery-actions {
			flex-grow: 1;
		}

			#ShoppingCartCollapse .delivery-actions svg {
				width: 22px;
			}

			#ShoppingCartCollapse table.basket-table {
				margin-bottom: 20px;
				width: 100%;
			}

			#ShoppingCartCollapse table.basket-table td span.reorder-icon svg, #ShoppingCartCollapse span.reorder-icon svg {
					width: 10px;
				}

				#ShoppingCartCollapse table.basket-items {
					width: 100%;
				}

				#ShoppingCartCollapse div.customize-basket {
					padding-top: 10px;
					padding-bottom: 10px;
				}
					
					#ShoppingCartCollapse div.customize-basket a.button {
						/*background-color: #FFFFFF;
						border: #2E3527 2px solid;
						color: #2E3527;*/
						background-color: var(--color-black);
						border: var(--color-black) 2px solid;
						color: var(--color-white);
						/*padding: 1px 5px;
						margin: 0;*/
						padding: 3px 5px;
						margin: 0 100px;
						display: block;
						text-align: center;
						font-family: var(--font-family-condensed);
						font-weight: var(--font-weight-demibold);
						font-size: 14px;
					}

			#ShoppingCartCollapse .add-on-header {
				/*padding-top: 20px;*/
				margin-bottom: 10px;
			}

			#ShoppingCartCollapse .add-on-table {
				width: 100%;
				margin-bottom: 20px;
			}

			#ShoppingCartCollapse .no-add-on-cart {
				margin: 20px -20px 0 -20px;
				padding: 20px;
				text-align: center;
				background-color: var(--color-green-lightest);
			}

			#ShoppingCartCollapse .item-name {
				padding-left: 10px;
			}

			#ShoppingCartCollapse .item-remove {
				padding-left: 5px;
			}

				#ShoppingCartCollapse .item-remove svg {
					width: 7px;
				}

			#ShoppingCartCollapse table.order-total-table {
				width: 100%;
			}

				#ShoppingCartCollapse table.order-total-table td {
					font-family: var(--font-family-condensed);
					font-weight: var(--font-weight-demibold);
					font-size: 14px;
				}

					#ShoppingCartCollapse table.order-total-table td span.moo-leaf svg {
						width: 10px;
					}

					#ShoppingCartCollapse table.order-total-table td.proxima-nova-bold {
						font-family: var(--font-family-condensed);
						font-weight: var(--font-weight-demibold);
					}

					#ShoppingCartCollapse table.order-total-table hr {
						border-top: 1px solid var(--color-black);
					}

			#ShoppingCartCollapse .order-spacer {
				background-color: var(--color-white);
				height: 20px;
			}

			#ShoppingCartCollapse table.order-total-table a {
				text-decoration: underline;
				color: var(--color-black);
			}

				#ShoppingCartCollapse table.order-total-table a:hover {
					color: var(--color-black);
				}

		#ShoppingCartCollapse .basket-progress {
			background-color: var(--color-rgb-green-lightest);
			color: var(--color-black);
			margin: 0px -20px 20px -20px;
			padding: 10px 30px;
		}

			#ShoppingCartCollapse .basket-progress .progress-bar {
				border: 2px solid var(--color-black);
					border-radius: 5px;
				height: 20px;
			}

				#ShoppingCartCollapse .basket-progress .progress-bar-progress {
					background-color: var(--color-black);
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
					height: 20px;
				}

					#CustomizeProgressBar .basket-progress .progress-bar-progress {
						border-top-left-radius: 0;
						border-bottom-left-radius: 0;
					}

					#ShoppingCartCollapse .basket-progress .progress-bar-progress-full {
						border-top-right-radius: 5px;
						border-bottom-right-radius: 5px;
					}

						#CustomizeProgressBar .basket-progress .progress-bar-progress-full {
							border-top-right-radius: 0;
							border-bottom-right-radius: 0;
						}

/******* REGISTRATION FINAL STEP *******/

.registration {
	min-height: calc(100vh - var(--height-nav-header));
	padding: 50px 2.5% 0 2.5%;
	background-color: rgba(var(--color-rgb-blue-light), 1);
	justify-content: center;
	padding-bottom: 40px;
}

	.registration-header-extra {
		max-width: 1200px;	/* This should match registration-wrapper */
		padding-top: 2.5%;	/* This should match registration-wrapper */
		margin-left: auto;
		margin-right: auto;
	}	

	.registration-progress {
		display: flex;
		margin: 1.5rem auto 0.5rem auto;
		overflow: hidden;
		counter-reset: step;
		text-align: center;
		width: 100%;
		max-width: 800px;
	}

		.registration-progress-padding-50 {
			padding-top: 50px;
		}

		.registration-step {
			list-style-type: none;
			float: left;
			text-transform: uppercase;
			font-size: 16px;
			font-weight: var(--font-weight-medium);
			width: 25%;
			position: relative;
		}

		.registration-step:before {
			content: counter(step);
			counter-increment: step;
			width: 32px;
			line-height: 32px;
			display: block;
			font-size: 18px;
			color: var(--color-white);
			background: rgba(var(--color-rgb-black), 1);
			border-radius: 100%;
			margin: 0 auto 5px auto;
			position: relative;
			z-index: 1;
		}

		.registration-step:after {
			content: '';
			width: 100%;
			height: 2px;
			background: black;
			position: absolute;
			left: -50%;
			top: 15px;
		}

		.registration-step:first-child:after {
			content: none;
		}

		.registration-step.active:before {
			background: var(--color-green);
			color: white;
		}

		.registration-progress span {
			font-size: 17px;
			font-weight: var(--font-weight-medium);
		}

	.registration-wrapper {
		flex: 1;
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		max-width: 1200px;
		justify-content: center;
	}

		.registration-details {
			flex: 1 0 auto;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.registration-s1 .registration-details, .registration-s5 .registration-details {
			gap: 1rem;
			flex: auto;
			width: 100%;
			max-width: 600px;
		}

			.registration-s5 .registration-details { max-width: 440px; }

			.registration-detail {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				padding: 1rem;
				border: 2px solid black;
				border-radius: var(--border-radius-heavy);
				background-color: var(--color-white);
			}

			.registration-s1 .registration-detail {
				text-align: center;
				justify-content: center;
				align-items: center;
			}
			
				.registration-detail .input-groups, .registration-detail .registration-detail-confirm {
					display: none;
				}
				
				.registration-login .input-groups, .registration-login .registration-detail-confirm {
					display: flex;
				}

				.registration-s1 .input-groups {
					width: 85%;
				}

				.registration-s1 .input-group {
					justify-content: center;
				}

				.registration-detail-confirm {
					align-items: center;
					justify-content: center;
					min-width: 200px;
				}

				.prefer-coop {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 0.25rem;
					width: 100%;
				}

					.prefer-coop-header {
						font-weight: var(--font-weight-demibold);
					}

					.prefer-coop-subheader {
						font-weight: var(--font-weight-medium);
					}
			
				.input-display {
					flex-direction: column;
					gap: 2px;
				}

					.input-display, .registration-detail-edit {
						display: none;
					}
				
					.input-display-section {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						max-width: 75%;
					}

						.input-display-group {
							display: flex;
							flex-direction: column;
							gap: 2px;
						}

						.input-display-label {
							font-weight: var(--font-weight-medium);
						}

						.input-display-value {
							font-weight: var(--font-weight-normal);
						}
						
					.input-group-confirm {
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						align-items: flex-end;
					}

				.registration-warning, .popup-warning {
					width: 100%;
					font-weight: var(--font-weight-medium);
					color: var(--color-red-warning-dark);
				}

					#LoginMessage { text-align: center; }

						#LoginMessage a { 
							color: var(--color-black); 
							text-decoration: underline;
						}

		.registration-totals {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			flex-basis: 40%;
			height: max-content;
			border-radius: var(--border-radius-heavy);
		}

			.registration-totals .cart {
				position: unset;
				max-width: unset;
				background-color: var(--color-offwhite);
				border-radius: var(--border-radius-heavy);
				transform: translateX(0px);
				z-index: inherit;
				padding: 20px;
			}

				.registration-totals .cart-header-wrapper {
					margin-bottom: 10px;
				}

					.registration-totals .cart-header {
						display: inline;
						font-weight: var(--font-weight-demibold);
						background-color: var(--color-green-dark);
						color: var(--color-white);
						padding: 5px 10px;
						border-radius: var(--border-radius-medium);
						border-bottom: 0;
					}
			
				.registration-totals .cart-basket {
					background-color: var(--color-gold-light);
					border-radius: var(--border-radius-medium);
					margin-left: 0;
					margin-right: 0;
				}

					.registration-totals .cart-item .item-details {
						grid-template-columns: 2fr 2fr;
					}

						.registration-totals .item-list {
							margin-top: 10px;
						}

							.registration-totals .item-list .triangle-down-maroon {
								display: inline-block;
								height: 7px;
								border-left: 7px solid transparent; 
								border-right: 7px solid transparent; 
								border-top: 7px solid var(--color-maroon);
								margin-right: 5px;
							}
					
						.registration-totals .cart-item img {
							height: 115px;
							width: 166px;
							object-fit: cover;
							margin: 0;
							margin-left: auto;
						}
			
					.registration-totals .cart-basket .item-total {
						margin-top: 10px;
						display: block;
					}

				.registration-totals .cart-grocery {
					padding: 0;
					margin-left: 0;
					margin-right: 0;
					margin-bottom: 20px;
				}

					.registration-totals .cart-grocery .cart-item  {
						padding: 10px 20px;
						background-color: var(--color-beige);
						border-radius: var(--border-radius-medium);
						margin: 5px 0;
						gap: 10px;
					}

						.registration-totals .cart-grocery .cart-item-description {
							flex-grow: 1;
						}

						.registration-totals .cart-grocery img.cart-item-img {
							height: 65px;
							width: 110px;
							object-fit: cover;
							margin: 0;
							aspect-ratio: unset;
						}

				.registration-totals .cart-contents {
					overflow-y: unset;
				}

					.registration-totals .item-order {
						display: flex;
					}

				.registration-totals .cart-footer {
					border-top: 0;
					border-bottom-right-radius: var(--border-radius-heavy);
					border-bottom-left-radius: var(--border-radius-heavy);
					background-color: var(--color-offwhite);
					margin-bottom: 10px;
					position: relative;
				}
				
					.registration-totals .cart-summary {
						margin: 0;
					}

					.registration-promo {
						margin-top: 10px;
					}
					
						.registration-promo-entry {
							flex-grow: 1;
						}

							.registration-promo-entry input, #SuccessPromo {
								width: 95%;
								background-color: transparent;
								border: 1px solid var(--color-green-light);
								border-radius: var(--border-radius-light);
								height: 32px;
							}

								.registration-promo-entry input:disabled, #SuccessPromo {
									font-size: var(--font-size-footnote);
								}

							#SuccessPromo {
								display: none;
								padding: 5px;
								height: unset;
							}

						.registration-promo .btn-primary-small {
							border: 0;
							font-weight: var(--font-weight-normal);
							color: var(--color-black);
						}

			.registration-submit {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
			}
			
			.registration-totals .btn-primary {
				width: 100%;
			}

		.registration-subhead {
			color: var(--color-black);
			font-size: var(--font-size-input);
			font-weight: var(--font-weight-medium);
		}

		.registration-wrapper .cart-header {
			border-top-left-radius: var(--border-radius-medium);
			border-top-right-radius: var(--border-radius-medium);
		}

		.registration-disclaimer { padding-top: 10px; }

		.card-disclaimer { padding: 10px; }
	
	.registration-s3 {
		background-color: var(--color-blue-light);
	}
	
		.registration-s3 .customize-details {
			font-size: 1.2rem;
			font-weight: var(--font-weight-medium);
			display: block;
			background-color: transparent;
			border-radius: var(--border-radius-light);
			padding: 0;
			margin-left: auto;
			margin-right: auto;
		}

		.registration-s3 .customize-cta button {
			margin-top: 10px;
			padding: 5px 0;	
		}

	.signup-container-1 {
		gap: 0.5rem;
	}

		.signup-container-1 .registration-subtitle {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
		}

	.signup-container-4 { max-width: 700px; }

	.signup-container-5 { max-width: 440px; }

	.produce-signup-progress { padding-top: 50px; }

	.signup-checkbox { font-size: var(--font-size-footnote); }

	.billing-address-display {
		display: none;
	}

	.registration-snap {
		background-color: var(--color-offwhite);
		border-radius: 5px;
		padding: 10px;
	}

	#CoopMap {
		height: 200px;
		border-radius: var(--border-radius-light);
		border: var(--border-size-medium) solid var(--color-black);
	}

	textarea#OtherNote {
		height: 48px;
		padding: 8px 4px 4px 12px;
	}
	
		textarea#OtherNote::placeholder {
			transition: unset;
			color: rgba(var(--color-rgb-black), 0.8);
			opacity: 0.7;
			font-size: var(--font-size-input);
			font-weight: var(--font-weight-medium);
		}

	#CompleteRegistration:disabled {
		background-color: var(--color-gray-dark);
		color: var(--color-white);
	}

/******* GIFT CARD *******/
.gift-card { max-width: 540px; }

	.gift-card .registration-detail {
		padding: 20px 40px;
		margin-right: 40px;
	}

	.gift-card-image {
		background-color: var(--color-gold-light);
		padding: 10px 20px;
		border-radius: var(--border-radius-medium);
	}

		.gift-card-image img {
			margin-left: auto;
			margin-right: auto;
			width: 80%;
		}

	.gift-card-address-check-container {
		margin-top: 20px;
	}

	.gift-card-address-check {
		flex-grow: 1;
		margin-right: 20px;
	}

	.gift-card-address-check-response {
		font-size: clamp(1.2rem, 1vw + 0.5rem, 1.312rem);
		color: var(--color-maroon);
		text-align: center;
		font-weight: var(--font-weight-medium);
	}

	.gift-card-date {
		width: 60px;
	}

	.gift-card-cvv {
		width: 70px;
	}

	.gift-card-zip {
		width: 80px;
	}

	input[type="radio"].chip-checkbox + label.gift-card-label {
		width: 100%;
		text-align: center;
		padding-top: .2em;
		padding-bottom: .2em;
		margin-bottom: 0;
	}

/******* VIDEO HUB *******/
.video-highlight-container {
	padding: 0 4rem;
}

	.video-higlight-wrapper {
		margin-top: 0;
		min-height: unset;
	}

	.video-header {
		max-width: 1500px;
		margin: 2rem auto;
		gap: 0;
		min-height: unset;
		justify-content: space-between;
	}

	.video-highlight-video, .video-highlight-text {
		flex-basis: 50%;
	}
	
	.video-highlight-video {
		margin: 0;
	}

		.video-container { 
			position: relative;
			width: 100%;
			height: 0;
			padding-bottom: 56.25%;
		}

			.video-container iframe {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

	.video-library {
		gap: 1rem;
		margin-bottom: 2rem;
		max-width: 1500px;
		min-height: unset;
		margin-left: auto;
		margin-right: auto;
	}

		.video-scroller-left, .video-scroller-right {
			display: flex;
			align-items: center;
			min-width: 48px;
			cursor: pointer;
		}

			.video-scroller-left .icon, .video-scroller-right .icon {
				width: 48px;
				height: 48px;
			}

		.video-scroller .videos {
			margin: 0;
			scroll-padding-left: 0;
			padding: 0;
			color: var(--color-black);
			overflow-x: scroll;
			scroll-behavior: smooth;
			display: grid;
			grid-auto-columns: calc(25% - var(--card-gutter)* 2);
			grid-gap: 20px;
			grid-auto-flow: column;
			padding-bottom: 10px;
		}

			.video-scroller .video {
				padding: 0;
			}

		.video-thumbnail {
			border-radius: var(--border-radius-medium);
			border: 3px solid transparent;
		}

			a.video-library-link:hover img.video-thumbnail {
				border: 3px solid var(--color-yellow);
			}

		.video-library-footnote {
			font-size: var(--font-size-footnote);
			font-weight: var(--font-weight-demibold);
			margin-top: .5rem;
		}
		
		.video-library-title {
			font-size: var(--font-size-secondary);
			font-weight: var(--font-weight-demibold);
			margin-top: .5rem;
		}

	.video-highlight-container .content .navigation-tabs, .video-highlight-container .content .tab-content { gap: 0; }

	.video-highlight-container .tab-contents { padding: 0; }

	.video-highlight-container .content .tab-link { 
		font-size: 1rem; 
		font-weight: var(--font-weight-medium);
	}

		.video-highlight-container .content .tab-link.active { 
			font-weight: var(--font-weight-demibold);
		}
	
	.video-details-container {
		padding: 1rem;
		height: 100%;
		width: 100%;
		border-radius: var(--border-radius-medium);
		background-color: var(--color-white);
		overflow-y: hidden;
	}

		.video-details-container div {
			margin-bottom: 1rem;
		}

		.video-details-container .tab-contents {
			overflow-y: scroll;
		}
		
			.video-details-container .tab-contents .tab-content {
				text-align: left;
			}

		.video-item-chip {
			background-color: var(--color-green-light);
			color: var(--color-black);
			border-radius: 20px;
			display: inline-block;
			padding: 5px 15px;
			margin-right: 10px;
			cursor: pointer;
			white-space: nowrap;
		}

		.video-higlight-container div.video-item-snap {
			margin-top: 0;
			margin-left: 10px;
		}

		.video-higlight-container {
			display: flex;
			margin-top: 1rem;
		}

			.video-higlight-container div {
				margin: unset;
			}

				.video-higlight-container div.video-highlight-image {
					width: 150px;
					margin-right: 2rem;
				}

					.video-higlight-container div.video-highlight-image img {
						border-radius: var(--border-radius-medium);
						box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
					}

				.video-higlight-container div.video-highlight-actions {
					flex-grow: 1;
				}

					.video-higlight-container div.item-purchase {
						margin-top: 1rem;
						padding: 0;
					}

					.video-highlight-actions .item-order { 
						padding: 0;
					}

					.video-highlight-actions .item-order:has(> :last-child:nth-child(2)) { 
						margin-right: 24px; 
						margin-left: unset;
					}

					.video-highlight-container div.item-order-remove {
						margin-left: 2px;
					}

/******* VIDEO ON NON-VIDEO HUB PAGES *******/
.video-wrapper .video-iframe-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

	.video-wrapper .video-iframe-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

/******* FORAGE *******/
#ForagePin, #ForagePaymentPin {
	height: 44px;
	width: 100px;
	margin-right: 20px;
}

/******* PRIVACY *******/
.privacy { 
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px 10px;
}

/******* FOOTER *******/
footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4rem;
	width: 100%;
	padding: 2rem 0;
}

	.nav-footer {
		width: 100%;
		max-width: 1000px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

		.footer-links {
			display: flex;
			flex-direction: column;
			font-size: 1.2rem;
			align-items: flex-start;
		}
			.footer-links-title {
				font-weight: var(--font-weight-demibold);
				color: rgba(var(--color-rgb-green-light), 0.9);
			}

			/* FYI: all the a, a:link, a:visited, and a:hover below is not needed anywhere but Order History detail to overcome the Receipt set CSS */
			.footer-link, .footer-links a, .footer-links a:link, .footer-links a:visited {
				cursor: pointer;
				color: white;
				font-size: 18px;
			}

				.footer-links a, .footer-links a:link, .footer-links a:visited { text-decoration: none; }

				.footer-link:hover, .footer-links a:hover {
					color: var(--color-yellow);
				}

		.footer-actions {
			display: flex;
			flex-direction: column;
			min-width: 250px;
			justify-content: space-between;
		}

			.footer-socials {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}
				.footer-subscribe {
					display: flex;
					flex-direction: column;
					color:white;
				}

				.footer-social {

				}

					.footer-social img {
						color: white;
						width: 40px;
						height: 40px;
					}



	.footer-banner {
		display: flex;
		flex-direction: column;
	}

		.footer-image {
			width: 100%;
			max-width: 1200px;
		}

			.footer-image img {
				width: 100%;
				height: 100%;
			}

	.footer-copywrite {
		display: flex;
		flex-direction: row;
		gap: 2rem;
	}

		.footer-copywrite p {
			color: white;
			font-size: 16px;
		}

		.footer-copywrite a {
			color: white;
			font-size: 16px;
		}

/******* IMPORTANT END ELEMENTS *******/
/* .slide-hide { opacity: 0; } */

/******* ELEMENT SPECIFIC (use minimally) *******/
#DevEnvironmentBanner {
	font-family: var(--font-family-main);
	font-weight: var(--font-weight-bold);
	background-color: var(--color-red-warning-dark);
	color: var(--color-white);
	text-align: center;
	padding: 10px 0;
	position: fixed;
	bottom: 0;
	width: 100%;
}

/******* PRINT SPECIFIC *******/
@media print {
	.page-break { page-break-after: always; }
}