/*** 
	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;
	}

	.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 20px 0 20px;
	}

	.basket-categories-wrapper { max-width: 100%; }

		.basket-categories { 
			flex-wrap: wrap; 
			justify-content: center;
			border-radius: var(--border-radius-heavy);
			margin: 0 1rem;
		}
	
			.basket-category { white-space: nowrap; }

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

	.basket-cta {
		gap: 10px;
		flex-wrap: wrap;
	}

		.basket-cta div { flex-basis: 45%; }	/* This ensures only two columns per */

		.basket-cta div.basket-price { 
			flex-basis: 100%; 
			justify-content: center;
		}

			.basket-cta div.basket-price div { flex-basis: unset; }

	.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);
	}

	.item-actions { gap: 5px; }

		.item-order {
			min-width: unset;
			grid-template-columns: 1fr .5fr 1fr;
			padding: 0 2px;
		}

			.item-order-plus-only {
				min-width: 50px;
				grid-template-columns: 1fr;
			}

		.item-order-add, .item-order-remove  { width: 26px; }

		.plp-subscribe-button { padding: 0 10px; }

	.pdp { padding-top: 0; }

		.pdp .product-detail-information { display: block; }

			.pdp .product-detail-information .item-photos { display: none; }

			.pdp .product-detail-information .item-photos-mobile-container { 
				display: block; 
				overflow-x: hidden;
				border-radius: var(--border-radius-heavy);
				position: relative;
			}

				.pdp .product-detail-information .item-favorite-wrapper-show { z-index: 10; }

				.pdp .product-detail-information .item-photos-mobile { 
					--n: 1;
					display: flex;
					align-items: center;
					overflow-y: hidden;
					width: 100%;
					width: calc(var(--n)*100%);
					/*height: 50vw; 
					max-height: 100vh;*/
					transform: translate(calc(var(--i, 0)/var(--n)*-100%));
				}

					.pdp .product-detail-information .item-photos-mobile img {
						width: 100%;
						width: calc(100%/var(--n));
						user-select: none;
						pointer-events: none;
					}

			.pdp .product-detail-information .item-photos-mobile-dots { 
				display: flex;
				justify-content: center;
				gap: 10px;
				margin-top: 5px;
			}

				.pdp .product-detail-information .item-photos-mobile-dots .mobile-image-dot {
					height: 12px;
					width: 12px;
					background-color: var(--color-green-light);
					border-radius: 50%;
					display: inline-block;
				}

					.pdp .product-detail-information .item-photos-mobile-dots .mobile-image-dot-selected {
						background-color: var(--color-green-dark);
					}
		
		.pdp .vendor-snap-left { margin-top: 10px; }
		
			.pdp .item-vendor, .pdp .item-tags .item-tag { 
				font-size: var(--font-size-secondary); 
				margin: 0;
			}

		.pdp .item-actions-subscribe .item-order, .pdp .item-actions-subscribe select, .pdp .item-actions-subscribe button, .pdp .item-actions-subscribe input#Submit { width: 160px; }

		.pdp .item-actions-subscribe .item-order, .pdp .item-actions-subscribe select, .pdp .item-actions-subscribe input#Submit { margin-left: auto; }

		.pdp .item-actions-subscribe select, .pdp .item-actions-subscribe input#Submit { display: block; }

		.pdp .vendor-item-title { 
			padding-top: 20px;
			padding-bottom: 0;
		}

	.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;
	}

	footer { gap: 2rem; }

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

	.footer-logo {
		margin-left: auto;
		margin-right: auto;
	}

	.footer-copywrite {
		display: block;
		text-align: center;
		margin-bottom: 1rem;
	}

}

@media (min-width: 481px) {
	.basket-details .basket-cta {
		justify-content: space-between;
		align-items: start;
		width: 100%;
	}
}

/* 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;
	}

	.hero-slides.hero-shop {
		height: 60vh;
	}

}

/* 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: 1fr 1fr 1fr;
		padding: 0 1rem;
	}	

		.logo {
			justify-self: center;
			order: 1;
		}
			
			.logo img { height: calc(var(--height-nav-header) - 10px); }

		.nav-main-territory { display: none; }

		.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: 11;
				visibility: hidden;
				overflow: hidden;
			}
		
			.nav-dropdown-menu.open {
				transform: translateX(0);
				visibility: visible;
			}

			.nav-dropdown:hover > .nav-dropdown-items-wrapper {
				text-align: left;
			}
		
			.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;
			}

			.cart-mini-icon-count { 
				right: 12px;
				bottom: 16px;
			}

			.cart-mini-icon-date { bottom: 11px; }

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

		.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:after {
			top: calc(var(--height-nav-header) + 40px);	/* Header + line height + nav-shop height */
		}
	
	.nav-shop .dropdown {
		display: none;
	}
	
	.nav-shop {
		width: 100%;
		max-width: 600px;
	}

	.nav-shop-menu {
		padding: 0;
	}

	.nav-vertical-divider { display: none; }

	.nav-shop-mobile-container {
		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;
	}

	.favorite-toggle:hover {
		background-color: transparent;
	}

	.plp-pricing { gap: 5px; }

	.item-uom {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow-x: hidden;
	}

	.favorite-toggle { width: 32px; }

	.nav-shop .filter-toggle { display: unset; }

	.dropdown-button-filter { display: none; }

	.dropdown-wrapper-filter { opacity: unset; }

	.filter-toggle-mobile {
		display: flex;
		width: unset;
		padding: 0;
	}

	.mobile-search-toggle { margin-left: 10px; }

	.shop-filters {
		position: fixed;
		top: 85px;
		right: 10px;
		pointer-events: unset;	/* If you don't do this, the JavaScript won't be correct on mobile */
	}

		.shop-filters.hidden { display: none; }
	
	.wrapper-search {
		max-height: unset;
		height: calc(100vh - var(--height-nav-header));
		left: 0;
		top: var(--height-nav-header);
		z-index: var(--z-index-sticky);
		padding: unset;
		background-color: var(--color-white);
	}

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

		.container-search {
			max-width: 100vw;
			flex-grow: 1;
			border-radius: unset;
			box-shadow: unset;
			padding: 15px;
		}

			.section-search {
				flex-grow: 1;
				justify-content: space-between;
				gap: 20px;
			}

				.search-results-wrapper {
					flex-grow: 1;
					overflow-y: scroll;
					/* You really don't like this method, but for some reason the mixture of Absolute and Flex/Grid is not working any other way - (padding - search bar - gap - title - gap - (nothing) - gap - button - padding) */
					max-height: calc(100vh - var(--height-nav-header) - 15px - 48px - 20px - 24px - 20px - 0px - 20px - 35px - 15px);
				}
		
				.search-results.shop-items {
					max-height: unset;
				}

	.hero-slide {
		flex-direction: column;
		gap: 1rem;
	}

	.hero-image {
		display: none;
	}

	.hero-mobile {
		display: block;
		width: 100%;
	}

	.hero-caption {
		flex-basis: 200px;
		width: 100%;
		padding-bottom: 20px;
	}

		.hero-caption div.hero-description {
			padding: 0 15px;
		}
	
	.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 .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, .pdp .breadcrumbs {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}
	
		.pdp .product-detail { gap: 20px; }

		.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%;
		}

			.pdp .navigation-tabs.product-information {
				padding-top: 20px;
			}

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

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

	.shop-return button {
		margin-bottom: 10px;
	}
	
	.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-reverse;
		align-items: center;
		margin-left: 10px;
		margin-right: 10px;
	}

		.registration-submit-mobile { margin-top: 20px; }

		.registration-wrapper .cart-basket { margin: 0; }

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

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

	.minishop .shop-return { 
		width: 100%;
	}
	
	.gift-card .registration-detail {
		margin-right: 0;
	}

	.faqs {
		padding: 2rem 0.5rem;
	}

	.account {
		width: 100%;
		max-width: 100vw;
		padding: 0;
		margin: 0;
		min-height: unset;
	}

		.account-items { 
			border-radius: 0; 
			padding: 20px;
			margin-bottom: 0;
		}

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

		.account-subscriptions .account-item-multi-fields, .account-subscriptions .account-item-container, .account-item-container-manage-subscriptions {
			display: grid;
			grid-template-columns: 90px 1fr;
			gap: 0 10px;
		}

			.account-subscriptions .account-item-history, .account-item-text .center, .account-item-container .right, .account-item-container .account-item-history-vendor, .account-item-container .account-item-history-qty { 
				width: unset; 
				text-align: left;
			}

			.account-item-text, .account-item-days { max-width: unset; }

		.account-past-orders .account-item-multi-fields, .account-past-orders .account-item-container {
			display: grid;
			grid-template-columns: 90px 1fr 1fr;
			gap: 0 10px;
		}

			.account-past-orders .account-item-multi-fields div, .account-past-orders .account-item-container div {
				width: unset;
				text-align: left;
			}

		.account-manage-orders .account-item-container {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 0 10px;
		}

			.account-manage-orders .account-item-text {
				grid-column: 1 / 3;
			}

			.account-manage-orders .account-item-multi-fields div, .account-manage-orders .account-item-container div {
				width: unset;
				text-align: left;
			}

			.account-manage-orders .account-item-action { align-items: center; }

				.account-manage-orders .account-item-action svg { min-width: 24px; }

	.nav-account { display: none; }

	footer { gap: 2rem; }

	.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;
			}

		.footer-logo {
			margin-left: auto;
			margin-right: auto;
		}

		.footer-copywrite { margin-bottom: 1rem; }

	.how-it-works .height-half { min-height: 25vh; }

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

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

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

	.embed-youtube iframe { 
		max-width: 100%;
	}

	#Calendar .account-item {
		margin-right: -25px;
		margin-left: -25px;
	}

		#Calendar .calendar { 
			padding: 0; 
			min-width: unset;
		}
		
}

@media (min-width: 601px) and (max-width: 768px) {

	.hero-image.hero-mobile {
		max-height: 250px;
	}

}

/* Custom Breakpoints - MIN: 769px; - Target Desktop (or "non-mobile") */
@media (min-width: 769px) {

	.nav-dropdown-mobile { display: none; }

	.nav-shop-logo { max-width: 87px; }
	
	.shop-item:hover { background-color: var(--color-green-light); }

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

	.shop-item:hover::before { opacity: 1; }

		.pdp .recommended .shop-item:hover::before { opacity: 0; }

	.shop-item:hover .item-favorite { display: block; }

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

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

	.pdp .item-favorite, .quickview .item-favorite { 
		right: 24px; 
		cursor: pointer;
	}

	.breadcrumb { max-width: unset; }

	.nav-shop { padding: 0 1rem; }

	#PrivacyPolicy { 
		width: 100%;
		max-width: 960px; 
		margin: 20px auto 0 auto;
	}

		#PrivacyHero { padding-bottom: 14.05%; /* Aspect ratio 267x1900*/ }

		.privacy-overlay { padding-top: 0; }

}

/* Custom Breakpoint for Inbetween Mobile and Table/Desktop */
@media (min-width: 769px) and (max-width: 788px) { 
	.nav-main { gap: 0; }
}
@media (max-width: 999px) { 
	.show-1000 { display: none; } 
}
@media (min-width: 1000px) { 
	.hide-1000 { display: none; } 
}
@media (min-width: 769px) and (max-width: 1023px) {
	.nav-dropdown-title-logged-in { display: none; }
}

/* 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)
{

	#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;
	}

}