/*** 
	VERY IMPORTANT screens.css NOTE ABOUT OVERRIDE ORDER
	Selector must match flexbox.css exactly
	i.e. If main.css has header div#navitems, screens.css needs to have header div#navitems as JUST #navitems will not override it

	MOBILE <= 699px
	TABLET = 700px - 1024px
	TABLET & MOBILE <= 1024px
	DESKTOP >= 1025px
***/

/* Custom Breakpoints - MAX: 480px; */
@media (max-width: 480px) {
	h1 { font-size: clamp(1.75rem, 4vw + 0.75rem, 3rem); }

	h2 { font-size: clamp(1.5rem, 3vw + 0.625rem, 2.5rem); }

	h3 { font-size: clamp(1.25rem, 2.5vw + 0.5rem, 2rem); }

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

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

	.hide-480 { display: none; }

	.show-480 { display: block; }

	/* h6 { font-size: clamp(0.75rem, 1vw + 0.125rem, 1.125rem); } */
	.cards:has(:nth-child(5)) .card {
		aspect-ratio: 2 / 3 !important; /* this important is only temporary until I can restructure the media queries */
		background-position: center;
	}

	.item-price-details:not(.price-original) {
		flex-direction: column-reverse;
	}	

	.item-sale {
		position: static;
		top: 0;
		left: 0;
		padding-left: 6px;
	}

	.shop:not(.customize) .item-purchase {
		flex-direction: column;
	}

		.item-name { 
			font-size: 16px;
		}

		.item-vendor {
			font-size: 13px;
		}

	.cart {
		max-width: unset;
	}
		.cart-header {
			padding: 0.5rem 1rem 1rem 0.25rem;
		}

		.cart-title {
			font-size: 1.2rem;
		}

	.registration {
		padding-top: 2.5%;
	}
	
	.registration-s1 .input-groups {
		width: 100%;
	}

	.input-group-section, .input-display-section {
		flex-direction: column;
		gap: 0.25rem;
	}

		.cart .input-group-section.promo {
			flex-direction: row;
			gap: 0.5rem;
		}

		.input-group:has(.input-toggle) {
			text-wrap: nowrap;
			justify-content: space-between;
		}

	.registration-login .registration-detail-confirm {
		width: 100%;
	}

	.registration-step {
		font-size: 14px;
	}

	.registration-step:before {
		font-size: 14px;
		width: 24px;
		line-height: 24px;
	}

	.registration-step:after {
		top: 12px;
	}

	.basket-intro {
		margin: 20px;
	}

	.basket-description { 
		text-align: center;
	}

	.current-basket-subscribed-container {
		justify-content: center;
	}

		.current-basket-subscribed-wrapper {
			text-align: center;
		}

	.customize-status {
		bottom: 0;
		right: 0;
		width: 100%;
		border-radius: unset;
		border: unset;
		border-top: var(--border-size-medium) solid var(--color-black);
	}

	.modal-content .input-group-section:has(.radio-group) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
		gap: 0.5rem;
		align-items: center;
	}

	.nav-footer {
		display: flex !important; /* Temporary until I can restructure the media queries */
		flex-direction: column;
	}

}

/* Custom Breakpoints - MAX: 600px; */
@media (max-width: 600px) {
	.hide-600 { display: none; }

	.show-600 { display: block; }
	
	.shop {
		padding: 20px 10px 0 10px;
	}

	.shop-items, .employees, .vendors {
		grid-template-columns: repeat(2, minmax(40%, 1fr));
		column-gap: 10px;
	}
	
	.nav-shop .dropdown {
		display: none;
	}	

    .modal-content {
        flex: 1;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

        .modal-content > .modal-section:not(.modal-primary) {
            display: none;
        }

	.minishop .minishop-image:last-child {
		display: none;
	}
}

/* Custom Breakpoints - MAX: 768px; */
@media (max-width: 768px) {
	:root {
		--height-nav-header: 50px;
	}
	h1 { font-size: clamp(2rem, 4vw + 0.875rem, 3.5rem); }

	h2 { font-size: clamp(1.75rem, 3vw + 0.75rem, 2.75rem); }

	h3 { font-size: clamp(1.5rem, 2.5vw + 0.625rem, 2.25rem); }

	h4 { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem); }

	h5 { font-size: clamp(1rem, 1.5vw + 0.375rem, 1.5rem); }

	/* h6 { font-size: clamp(0.875rem, 1vw + 0.25rem, 1.25rem); } */

	.hide-768 { display: none; }

	.show-768 { display: block; }

	.content-split {
		flex-direction: column;
	}

		.content-split-text {
			margin: 0 1rem;
		}

	.mobile-break {
		display: block;		/* We need to redefine this because we have display: none as the standard default */
		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;
	}
	
	.nav-main {
		display: grid;
		grid-template-columns: 2fr 1fr 2fr;
		padding: 0 1rem;
	}	

		
		.logo {
			justify-self: center;
			order: 1;
		}
			.logo #main-logo {
				display: none;
			}

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

		.nav-dropdown-toggle {
			display: block;
		}
			.nav-dropdown-menu {
				position: fixed;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				min-width: 375px;
				max-width: 500px;
				background-color: var(--color-white);
				display: flex;
				flex-direction: column;
				gap: 0.5rem;
				align-content: start;
				justify-content: start;
				text-align: left;
				transition: transform 0.5s ease;
				z-index: 10;
				visibility: hidden;
				overflow: hidden;
			}
		
			.nav-dropdown-menu.open {
				transform: translateX(0);
				visibility: visible;
			}
		
			.menu-toggle {
				position: absolute;
				top: 1rem;
				left: 1rem;
				cursor: pointer;
				display: block;
			}
			
			.nav-dropdown {
				display: none;
				align-items: flex-start;
				width: 100%;
				position: relative;
				z-index: 2;
				cursor: pointer;
			}

			.nav-dropdown-menu:has(.nav-dropdown-items-wrapper.open) .nav-dropdown:not(:has(.nav-dropdown-items-wrapper.open)) {
				pointer-events: none;
			}
			
			/* Show dropdown titles only when the menu is open */
			.nav-dropdown-menu.open .nav-dropdown {
				display: flex;
			}
			
				.nav-dropdown-title {
					display: inline-block;
					transition: transform 0.4s ease;
					width: 100%;
					padding: 0.5rem 1rem;
				}			
			
					.nav-dropdown-menu:has(.nav-dropdown-items-wrapper.open) .nav-dropdown-title {
						transform: translateX(-200%);
					}
		
					.nav-dropdown-title:hover, .nav-dropdown:hover > .nav-dropdown-title {
						background-color: unset;
					}
		
				.nav-dropdown-items-wrapper {
					position: fixed;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					background-color: var(--color-white);
					padding: unset;
					z-index: 101;
					transition: transform 0.4s ease;
					transform: translateX(100vw);
					overflow-y: auto;
				}
		
				.nav-dropdown-items-wrapper.open {
					display: flex;
					transform: translateX(0%);
					transition: transform 0.4s ease;
				}
		
					.nav-dropdown-items {
						position: relative;
						width: 100%;
						box-shadow: unset;
						padding: unset;
					}	
		
						.nav-dropdown-items-header, .nav-dropdown-header {
							position: relative;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							width: 100%;
							background-color: var(--color-green-light);
							font-weight: var(--font-weight-demibold);
							font-size: 1.1rem;
							padding: 0.5rem 0;
							transition: transform 0.4s ease;
						}
										
						.nav-login {
							position: absolute;
							left: 0;
							padding: 0 0.5rem;
						}
		
						.nav-dropdown-menu:has(.nav-dropdown-items-wrapper.open) .nav-dropdown-header {
							transform: translateX(-200%);
						}
		
							.nav-dropdown-back {
								position: absolute;
								top: 0;
								left: 0;
								padding: 0.5rem;
								display: flex;
								flex-direction: row;
								align-items: center;
								cursor: pointer;
								height: 100%;
								font-size: 15px;
							}
		
							.nav-dropdown-close {
								position: absolute;
								top: 0;
								right: 0;
								padding: 0.5rem;
								display: flex;
								flex-direction: row;
								align-items: center;
								cursor: pointer;
								height: 100%;
								font-size: 15px;
							}

							.nav-dropdown, .nav-dropdown-item {
								-webkit-tap-highlight-color: transparent;
								-webkit-touch-callout: none;
								-webkit-user-select: none;
								-khtml-user-select: none;
								-moz-user-select: none;
								-ms-user-select: none;
								user-select: none;
							}
		
							.nav-dropdown-item:hover {
								background-color: unset;
							}

		.nav-main-cart {
			justify-self: end;
			order: 2;
		}
			.cart-mini {
				display: flex;
				flex-direction: column;
				background-color: transparent;
				border: none;
			}

			.cart-mini .icon {
				color:  var(--color-green-dark);
				fill: var(--color-green-dark);
				height: 50px;
				width: 60px;
			}


		.nav-main-account {
			order: 4;
			grid-column: 5 / 6;
		}
			.profile-welcome {
				flex-direction: column;
				align-items: flex-end;
			}
				.welcome-message {
					display: none;
				}

			.nav-account-menu-wrapper {
				display: none;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 0.5rem;
				position: absolute;
				top: 0;
				right: 0;
				height: 100vh;
				width: 75%;
				max-width: 250px;
				background-color: var(--color-white);
				padding: 1rem 0.5rem;
				z-index: var(--z-index-sticky);
			}

			.nav-account-menu-wrapper.active {
				display: flex;
			}
				.nav-account-menu-header {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					width: 100%;
				}

					.nav-account-menu-header .welcome-message {
						display: flex;
						font-size: 18px;
					}

						.nav-account-menu-header .welcome-message-logout {
							font-size: 16px;
						}

	.dropdown hr {
		display: block;
		width: 100%;
		height: 1px;
		background-color: var(--color-black);
	}
	.dropdown-button {
		display: flex;
		width: 100%;
	}

	.dropdown-wrapper {
		position: static;
		padding-left: 0.5rem;
	}

		.dropdown-menu {
			box-shadow: none;
			width: 100%;
		}

			.dropdown-links {
				margin: 0;
			}

			.nav-account-menu-item {
				width: 100%;
			}

	.nav-shop {
		height: 40px;
	}
	
	.nav-shop .dropdown {
		display: none;
	}
	
	.nav-shop {
		width: 100%;
		max-width: 600px;
	}

	.nav-shop-mobile {
		display: flex;
	}

	.nav-shop-mobile-actions {
		display: grid;
		border-top: 1px soild rgba(var(--color-rgb-gray-dark), 0.5);
	}

	.nav-shop-mobile-actions:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background-color: rgba(var(--color-rgb-gray-dark), 1);
		opacity: 0.3;
	}

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

	.nav-main-cart .shopping-for-week {
		display: none;
	}

	.filter-toggle {
		display: none;
	}

	.filter-toggle-mobile {
		display: flex;
	}
	
	.wrapper-search {
		max-height: unset;
		height: auto;
		left: 0;
		padding: unset;
	}

		.container-search {
			border-radius: unset;
		}
		
	.search-results.shop-items {
		max-height: calc(100vh - 300px);
	}

	.hero-slide {
		flex-direction: column;
		gap: 1rem;
	}
	.hero-image {
		display: none;
	}
	.hero-mobile {
		display: block;
		width: 100%;
	}
	.hero-caption {
		flex-basis: 200px;
		width: 100%;
	}
	.hero-controls {
		top: 0;
		height: 65%;
		width: 100%;
		padding: 0 6px;
	}
	
	.cards:has(:nth-child(5)) {
			grid-template-columns: none;
			grid-auto-columns: calc(100% - var(--card-gutter) * 2);
			scroll-padding-left: 5px;
	}
	
	.cards:has(:nth-child(5)) .card {
		aspect-ratio: 3/2;
	}

		.cards .card-header {
			font-size: 28px;
		}

	.video-highlight-container { padding: 0 1rem; }

	.video-scroller {
		/* 100 width - width of < > buttons - 2x gap - 2x container padding */
		max-width: calc(100vw - 98px - (var(--card-gutter) * 2) - 2rem);
	}

	.video-scroller .videos { 
		grid-template-columns: none;
		grid-auto-columns: calc(100% - var(--card-gutter) * 2);
	}
	
	.video-library-title { font-size: clamp(1.2rem, 1vw + 0.5rem, 1.312rem); }

	.feature {
		flex-direction: column;
	}

	.contact-us .feature {
		display: flex;
	}

	.spotlights {
		scroll-padding-left: 5px;
		grid-gap: 100px;
	}

	.spotlights::before {
		width: 0px;
	}

		.spotlight {
			flex-direction: column;
			padding: unset;
			height: calc(100vh - var(--height-nav-header));
			width: 85vw;
		}

			.spotlight-image {
				height: 25vh;
				width: 95%;
			}

			.spotlight-image img {
				object-position: left;
				width: 100%;
				height: 100%;
			}
				
			.spotlight-content {
				justify-content: flex-start;
				margin: unset;
			}

		/******* HOME PAGE *******/

		.home .how-it-works .sticky-container {
			position: sticky;
			height: max-content;
			top: var(--height-nav-header);
			background-color: var(--color-blue-light);
			padding: 0.5rem 0;
			width: 100%;
		}

		.home .how-it-works .sticky {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			text-align: center;
			position: static;
		}

		.home .reviews {
			grid-auto-flow: row;
			justify-content: center;
		}

			.home .review {
				max-width: 600px;
			}

	.pdp .product-detail-purchase {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}
	.pdp .item-photos {
		width: 100%;
	}

	.pdp .item-price-details {
		flex-direction: row;
	}

	.pdp .product-information {
		width: 100%;
	}

	.product-detail-information {
		flex-direction: column;
	}

	.quickview {
		height: 100%;
		max-height: 100vh;
		border-radius: unset;
	}
	
	.breadcrumbs {
		font-size: 14px;
		white-space: nowrap;
	}

	.nav-baskets {
		display: none;
	}

	.baskets {
		display: flex;
		flex-direction: column;
	}

		.basket-category {
			font-size: 16px;
			padding-left: 15px;
			padding-right: 15px;
		}

		.basket-intro {
			position: static;
			width: inherit;
		}

		.basket {
			flex-direction: column;
			height: max-content;
			margin: 1rem;
			margin-bottom: 4rem;
			max-width: 600px;
		}

		.basket.intro {
			justify-content: center;
			top: 0;
		}
			.basket-image {
				max-width: none;
			}

			.basket-details {
				max-width: none;
				margin-right: 0;
			}

			.basket-item-list {
				width: 100%;
			}

		.basket-sizes {
			flex-wrap: wrap;	/* This is important or else it doesn't break as it should with .mobile-break */
			justify-content: center;
			width: 100%;
			row-gap: 5px;
		}

	.registration-wrapper {
		flex-direction: column;
		align-items: center;
		margin-left: 10px;
		margin-right: 10px;
	}

		.registration-s3 .minishop-header {
			margin-top: 20px;
		}

			.registration-s3 .minishop-header .basket-header div {
				max-width: 700px;
				text-align: center;
			}

	.gift-card .registration-detail {
		margin-right: 0;
	}

	.faqs {
		padding: 2rem 0.5rem;
	}

	.account {
		width: 100%;
		max-width: 100vw;
	}

		.account-header {
			flex-direction: column;
		}

	.nav-account { display: none; }

	.nav-footer {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		row-gap: 2rem;
	}

		.footer-links {
			align-items: center;
		}

		.footer-actions {
			grid-column: 1 / 4;
			max-width: 400px;
			width: 80%;
			margin: 0 auto;
			gap: 2rem;
		}

			.footer-subscribe {
				min-width: unset;
				width: 85%;
				margin: auto;
			}

	.video-higlight-wrapper { display: block; }

		.video-highlight-video { margin-bottom: 2rem; }

		.video-highlight-text { margin: 0; }

}

/* Custom Breakpoints - MAX: 1023px; */
@media (max-width: 1023px) {

	.hide-1023 { display: none; }

	.show-1023 { display: block; }

	.baskets {
		display: flex;
		flex-direction: column;
	}

		.basket-select {
			flex-direction: column;
			gap: 0;
		}

			.nav-baskets {
				display: none;
			}
			
		.basket-intro {
			position: static;
			width: inherit;
		}
		
		.basket {
			flex-direction: column;
			height: max-content;
			margin: 1rem;
			margin-bottom: 4rem;
			max-width: 960px;
		}

			.basket-titles-mobile {
				margin-right: auto;
				margin-left: auto;
			}

			.basket-image {
				max-width: none;
				margin-right: auto;
				margin-left: auto;
			}

			.basket-details {
				width: 100%;
				max-width: none;
				margin-right: 0;
			}

			.basket-sizes {
				justify-content: center;
				width: 100%;
			}

}

/* Custom Breakpoints - MAX: 1024px; */
@media (max-width: 1024px) {
	
	br.custom-1024 { display: unset; }

}

@media (min-width: 768px) and (max-width: 1200px) {
	.cards:has(:nth-child(5)) {
		grid-template-columns: none;
		grid-auto-columns: calc(50% - var(--card-gutter) * 2);
		scroll-padding-left: 30px;
	}
	.cards:has(:nth-child(5)) .card {
		aspect-ratio: 3/2;
	}

	.video-highlight-container { padding: 0 1rem; }

		.video-scroller .videos { 
			grid-template-columns: none;
			grid-auto-columns: calc(50% - var(--card-gutter) * 2);
		}

	.spotlights {
		grid-template-columns: none;
		scroll-padding-left: 5px;
		grid-gap: 50px;
		width: 95vw;
	}

	.spotlights::before {
		width: 0px;
	}

		.spotlight {
			flex-direction: column;
			padding: unset;
			height: calc(100vh - var(--height-nav-header));
			width: 95vw;
		}
			.spotlight-image {
				height: 25vh;
				width: 95%;
			}

			.spotlight-image img {
				object-position: left;
				width: 100%;
				height: 100%;
			}
				
			.spotlight-content {
				justify-content: flex-start;
				margin: unset;
			}

	.registration-wrapper {
		flex-direction: column;
		align-items: center;
		margin-left: 10px;
		margin-right: 10px;
	}

		.gift-card .registration-detail {
			margin-right: 0;
		}

	.video-highlight-video { flex-basis: 60%; }

	.video-highlight-text { flex-basis: 40%; }
	
}

@media (min-width: 1200px) and (max-width: 1500px) {
	.cards:has(:nth-child(5)) {
		grid-template-columns: none;
		grid-auto-columns: calc(33% - var(--card-gutter) * 2);
		scroll-padding-left: 30px;
	}
}

/* Mobile */
@media 
	only screen 												and (max-width: 699px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 699px),
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 699px),
	only screen and (                min-resolution: 192dpi) 	and (max-width: 699px),
	only screen and (                min-resolution: 2dppx)  	and (max-width: 699px)
{
	.account { margin: 20px 0 0 0; }

		.account-items { border-radius: 0; }
		
		.account-item-text, .account-item-days { max-width: unset; }

		.account-item-container {
			flex-direction: column;
			align-items: flex-start;
		}
		.account-item-multi-fields {
			flex-direction: column;
			align-items: flex-start;
		}

	#PopUpInner { width: 80%; }

		#PopUpBody { overflow-x: hidden; }
}

/* Tablet & Mobile */
@media 
	only screen 												and (max-width: 1024px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (max-width: 1024px),
	only screen and (        min-device-pixel-ratio: 2)      	and (max-width: 1024px),
	only screen and (                min-resolution: 192dpi) 	and (max-width: 1024px),
	only screen and (                min-resolution: 2dppx)  	and (max-width: 1024px)
{
	
}


/* Tablet */
@media
	only screen 												and (min-width: 700px) and (max-width: 1024px),
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 1024px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 1024px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 700px) and (max-width: 1024px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 700px) and (max-width: 1024px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 700px) and (max-width: 1024px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 700px) and (max-width: 1024px) 
{ 
	#PopUpInner { width: 60%; }
}

/* Tablet & Desktop */
@media 
	only screen 												and (min-width: 700px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 700px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 700px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 700px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 700px)
{
	.wellness-employee-benefit { min-width: 600px; }
}

/* Desktop */
@media 
	only screen 												and (min-width: 1025px), 
	only screen and (-webkit-min-device-pixel-ratio: 2)      	and (min-width: 1025px),
	only screen and (   min--moz-device-pixel-ratio: 2)      	and (min-width: 1025px),
	only screen and (     -o-min-device-pixel-ratio: 2/1)    	and (min-width: 1025px),
	only screen and (        min-device-pixel-ratio: 2)      	and (min-width: 1025px),
	only screen and (                min-resolution: 192dpi) 	and (min-width: 1025px),
	only screen and (                min-resolution: 2dppx)  	and (min-width: 1025px)
{
	#PopUpInner {
		min-width: 400px;
		width: initial;
	}

}