@charset "utf-8";

.skip-to-content {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 9999;
}
.skip-to-content:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 12px 24px;
	background: #0C5CE6;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px;
	z-index: 9999;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* fonts */
/* montserrat-600 - latin */
@font-face {
	font-display: fallback;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	src: url('/static/fonts/montserrat-v18-latin-600.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('/static/fonts/montserrat-v18-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/static/fonts/montserrat-v18-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
	url('/static/fonts/montserrat-v18-latin-600.woff') format('woff'), /* Modern Browsers */
	url('/static/fonts/montserrat-v18-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/static/fonts/montserrat-v18-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
	font-display: fallback;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	src: url('/static/fonts/montserrat-v18-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('/static/fonts/montserrat-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/static/fonts/montserrat-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
	url('/static/fonts/montserrat-v18-latin-700.woff') format('woff'), /* Modern Browsers */
	url('/static/fonts/montserrat-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/static/fonts/montserrat-v18-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
	font-display: fallback;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/roboto-v27-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('/static/fonts/roboto-v27-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/static/fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
	url('/static/fonts/roboto-v27-latin-regular.woff') format('woff'), /* Modern Browsers */
	url('/static/fonts/roboto-v27-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/static/fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
	font-display: fallback;
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: url('/static/fonts/roboto-v27-latin-italic.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('/static/fonts/roboto-v27-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/static/fonts/roboto-v27-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
	url('/static/fonts/roboto-v27-latin-italic.woff') format('woff'), /* Modern Browsers */
	url('/static/fonts/roboto-v27-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/static/fonts/roboto-v27-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
	font-display: fallback;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('/static/fonts/roboto-v27-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('/static/fonts/roboto-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/static/fonts/roboto-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
	url('/static/fonts/roboto-v27-latin-700.woff') format('woff'), /* Modern Browsers */
	url('/static/fonts/roboto-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/static/fonts/roboto-v27-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* work-sans-regular - latin */
@font-face {
	font-display: fallback;
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 400;
	src: url('/static/fonts/work-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('/static/fonts/work-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('/static/fonts/work-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
	url('/static/fonts/work-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
	url('/static/fonts/work-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
	url('/static/fonts/work-sans-v11-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}

/* bootstrap copy */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.mh--bootstrap-container,
.mh--page-container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* bootstrap overrides */
.mh--bootstrap-container,
.mh--page-container,
.container,
.container-fluid {
	height: auto;
	margin-top:0;
	flex: 1 0 auto;
	width:100%;
	max-width: 1550px;
}

.mh--page-container {
	display: block;
}

@media screen and (max-width: 767px) { /* hide sidebar on revised handler when shrunk */
	.sidebar {
		display: none;
	}
}

/* all pages */

html {
	position: relative;
	min-height: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

body {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	min-height: 100vh;
	flex-direction: column;

	/* grid CSS for sticky footer */
	grid-template-rows: auto 1fr auto;
	height: 100%;
	min-height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #fff;
	position: relative;
}

body.lock-position {
	overflow: hidden;
}

body.toggled {
	overflow-y:scroll;
	position:fixed;
	width:100%;
}

.mh--page-content-w-sidebar {
	grid-template-columns: 240px 1fr;
	grid-column-gap: 20px;
	grid-template-areas: 'secondary primary';
}

@media screen and (min-width: 768px) {
	.mh--page-content-w-sidebar {
		display: grid;
	}
}

.mh--page-content {
	grid-area: content;
}
.mh--page-primary {
	grid-area: primary;
}
.mh--page-secondary {
	grid-area: secondary;
}

/* legacy public.css in use */

.border-bottom::after {
	content: '';
	display: block;
	width:45px;
	border-top: 4px solid #0071bb;
}

.center.border-bottom::after {
	margin: 30px auto;
}

.standard-link {
	cursor: pointer !important;
	text-decoration: underline !important;
}

.btn {
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #ffffff;
	font-size: 14px;
	padding: 6px 10px 6px 10px;
	text-decoration: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.btn:hover {
	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;
	color: #f3f3f3;
}

.footer {
	font-family: 'Montserrat', sans-serif;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	color: #fff;
}

.clearfix:after {
	clear: both;
	content: '.';
	display: block;
	font-size: 0;
	/*height: 0;*/

	visibility: hidden;
}

/*
	Social
*/

.social li a, ul.social li a {
	width: 35px;
	height: 35px;
	display: block;
	background-size: 45% !important;
}

ul.social li a {
	margin:auto;
}

	.social.dark .facebook, .social .facebook {
		background: url('/static/icons/social-facebook-dark.svg') center center no-repeat;
		background-size: contain;
	}

	/* social blue styles */

	.social.social-blue .facebook {
		background: url('/static/icons/social-facebook-blue.svg') center center no-repeat;
		background-size: contain;
	}

	.social.social-blue .googleplus {
		background: url('/static/icons/social-googleplus-blue.svg') center center no-repeat;
		background-size: contain;
	}

	.social.social-blue .instagram {
		background: url('/static/icons/social-instagram-blue_2016.svg') center center no-repeat;
		background-size: contain;
	}

	.social.social-blue .twitter {
		background: url('/static/icons/social-twitter-blue.svg') center center no-repeat;
		background-size: contain;
	}

	.social.social-blue .linkedin {
		background: url('/static/icons/social-linkedin-blue.svg') center center no-repeat;
		background-size: contain;
	}

	.social.social-blue .youtube {
		background: url('/static/icons/social-youtube-blue.svg') center center no-repeat;
		background-size: contain;
	}

	.social.social-blue .pinterest {
		background: url('/static/icons/social-pinterest-blue.svg') center center no-repeat;
		background-size: contain;
	}

/*

	Global Styles

*/

	.strike-through {
		text-decoration: line-through;
	}

	.css-link,
	.js-link,
	a.js-link,
	a.css-link {
		text-decoration: underline;
		width: auto;
		cursor: pointer;
	}

	.js-hand {
		cursor: pointer;
	}

	.css-fade-hover img {
		backface-visibility: hidden;
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}

	.css-fade-hover:hover img {
		opacity:0.7;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}

	.fade-50 {
		opacity:0.5;
	}

	.hide-text {
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}

	.css-spinner {
		width:14px;
		height:14px;
		display:inline-block;
		background-size:16px;
		background-image:url('/static/ajax-spin-blue.svg');
		background-position: center center;
	}

	.css-spinner.css-spinner-white {
		background-image:url('/static/ajax-spin-white.svg') !important;
	}

	.align-left {
		text-align:left;
	}

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

	.overlay-css {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index:1500;
		background-color: rgba(28, 60, 86, 0.50);
		-moz-transition: opacity 0.35s ease;
		-o-transition: opacity 0.35s ease;
		-webkit-transition: opacity 0.35s ease;
		transition: opacity 0.35s ease;
	}

	.overlay-css[data-view='closed'] {
		opacity:0;
		visibility: hidden;
	}

	.overlay-css[data-view='open'] {
		opacity:1;
		visibility: visible;
	}

	.overlay-css.overlay-hamburger {
		z-index:2800;
	}

	.center {
		text-align: center;
	}

	/* explore product categories */

	ul.product-group-explore {
		padding:0;
	}

	.product-group-explore {
		padding-top:15px;
		display: block;
		list-style: none;
		margin:0;
		font-family: 'Montserrat', sans-serif;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 14px;
	}

	.product-group-explore li {
		display: inline-block;
		margin:5px;
	}

	.product-group-explore a {
		display: inline-block;
		padding:8px 12px 5px;
		background: rgba(235, 235, 235, 0.3);
		border:1px solid rgba(235, 235, 235, 0.3);
		border-radius: 5px;
		transition: all 0.2s ease-out;
		font-size: 11px;
	}

	@media (min-width: 768px) {
		.product-group-explore a {
			font-size:12px;
		}
	}

	.product-group-explore a:hover {
		background: rgba(235, 235, 235, .5);
		text-decoration: none;
	}

	.product-group-explore li img {
		max-width:20px;
		max-height:20px;
		margin-right:8px;
	}

/* product temp hacks */

.products-container {
	display:grid;
	grid-gap:15px;
	grid-auto-rows: min-content;
	grid-template-columns:  repeat(auto-fill, 270px);
}

/* overrides for Mark to tweak */
.product-brand,
.product-rating,
.product-rating-detail {
	display: none;
}

.product-carousel .item {
	display:none; /* keep container, but hide items */
}

.product-carousel .item:first-child {
	display: block; /* always show the first image, regardless if others are loading in the slider, and for products with only one image */
}

.product-carousel.slick-initialized .item {
	display:block; /* show carousel items once loaded */
}

.product-carousel {
	border: 2px solid rgba(238, 238, 238, 0.3);
}

.product-carousel .item img {
	margin:auto;
	width:100%;
	aspect-ratio: 4 / 3;
}

.product-carousel-nav {
	display:none;
	border: 2px solid rgba(238, 238, 238, 0.3);
	border-top:none;
}

.product-carousel-nav.slick-initialized {
	display:block; /* show carousel nav once its loaded */
}

.product-carousel-nav .slick-slide {
	opacity:0.50;
	cursor: pointer;
	transition: opacity 0.2s ease-out;
}

.product-carousel-nav .slick-slide:hover {
	opacity: 1;
}

.product-carousel-nav .slick-current {
	opacity: 1;
}

.product-carousel-nav .slick-slide img {
	border: 3px solid #FAFAFA;
	aspect-ratio: 1 / 1;
}

@media (min-width: 1200px) {
	.product-carousel-nav .slick-slide img {
	}
}

.product-carousel-nav .slick-slide:first-child img {
	margin-left:0;
}

.product-carousel-nav .slick-slide:last-child img {
}

.product-carousel-nav .slick-current img {
	border: 3px solid #a5a5a5;
}

.product-carousel-arrows {
	width: 40px;
	height: 40px;
	background: #e4e4e4;
	border-radius: 50%;
	opacity: .75;
	position: absolute;
	z-index:30;
	top: 30% !important;
	cursor: pointer;
}

	.product-carousel-arrows:hover {
		opacity:.9
	}

@media (max-width: 1200px) {
	.product-carousel-arrows {
		width: 32px;
		height: 32px;
		top: 30% !important;
	}
}

@media (max-width: 990px) {
	.product-carousel-arrows {
		top: 40% !important;
	}
}

@media (max-width: 768px) {
	.product-carousel-arrows {
		top: 40% !important;
	}
}

@media (max-width: 515px) {
	.product-carousel-arrows {
		top: 35% !important;
	}
}

/* iPhone 5 */
@media (max-width: 320px) {
	.product-carousel-arrows {
		top: 35% !important;
	}
}

.product-carousel-prev {
	left:-15px;
	transform: rotate(180deg);
}

@media (max-width: 770px) {
	.product-carousel-prev {
		left:-13px;
	}
}

.product-carousel-next {
	right:-15px;
}

@media (max-width: 770px) {
	.product-carousel-next {
		right:-13px;
	}
}

.product-carousel-arrows img {
	width: 23px;
	height: 23px;
	display:block;
	margin:9px auto 0;
}

	@media (max-width: 1200px) {
		.product-carousel-arrows img {
			width:15px;
			height:15px;
		}
	}

.product-carousel-nav .slick-disabled {
	opacity:0.2; /* hide if arrow becomes dysfunctional */
	cursor: default;
}

.products-container a {
	text-decoration: none;
	display:inline-block;
}

.products-container .product-single,
.products-container .collection-single {
	max-width:280px;
	width: 100%;
	display:flex;
	background: transparent;
	font-family: 'Roboto', sans-serif;
}

.products-container .product-single:empty,
.products-container .collection-single:empty {
	display:none !important;
}

/*.products-container .product-single[data-product-status='preorder'] {*/
	/*-webkit-box-ordinal-group: 90;*/
	/*-moz-box-ordinal-group: 90;*/
	/*-ms-flex-order: 90;*/
	/*-webkit-order: 90;*/
	/*order:90;*/
/*}*/

.products-container .product-single[data-product-status='out-of-stock']:not(.product-single[data-tag='BestSellers']):not(.product-single[data-tag='StaffPicks']) {
	-webkit-box-ordinal-group: 100;
	-moz-box-ordinal-group: 100;
	-ms-flex-order: 100;
	-webkit-order: 100;
	order:100;
}

.products-container .product-single[data-product-status='retired'] {
	-webkit-box-ordinal-group: 500;
	-moz-box-ordinal-group: 500;
	-ms-flex-order: 500;
	-webkit-order: 500;
	order:500;
}

.products-container .product-single-container,
.products-container .collection-single-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	width: 100%;
	padding: 2em;
}

.products-container.related-products-container .product-single {
	width:100%;
}

.products-container a.product-meta:hover,
.products-container a.collection-meta:hover {
	text-decoration:none;
}

.products-container .product-meta,
.products-container .collection-meta {
	display: flex;
	flex-direction: column;
	height: 100%;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.product-single:focus-visible,
.collection-single:focus-visible,
.product-single .product-meta:focus-visible,
.collection-single .collection-meta:focus-visible {
	outline: 2px solid #0C5CE6;
	outline-offset: 2px;
}

.products-container .widget-single.product-loaded:not(:empty),
.products-container .widget-single.collection-loaded:not(:empty) {
	background: transparent; /* get rid of logo after product has loaded */
	display:inline-block;
}

.products-container .product-loaded .product-image,
.products-container .collection-loaded .collection-image {
	background: transparent; /* get rid of logo after product has loaded */
	/* overflow: hidden; */
}

.products-container .product-price, .products-container .product-min-price {
	font-weight: bold;
	font-size:19px;
	color: #DA932B;
}

.products-container .product-price{
	margin-top: auto !important;
}

.products-container .product-pricerange {
	color: #6D6D6D;
	font-weight: normal;
	font-size:14px;
}

.products-container.related-products-container .product-price {
	font-size:14px;
	margin-bottom:4px;
}

.products-container .product-pricefree {
	color: #6D6D6D;
	font-weight: normal;
}

.product-single-container.product-retired .product-pricefree {
	font-weight:normal;
	font-size: 14px;
	color: #929292;
}

.products-container .product-startingat {
	color: #6D6D6D;
	font-weight:normal;
}

.products-container .product-price s,
.products-container .product-price .bulk,
.coll-group-feat--pricerule .bulk {
	font-size:0.85em;
	color: #6D6D6D;
	font-weight:normal;
}

.products-container .product-listing-overlay-sale .product-price s s {
	margin-left: 4px;
	color: #6D6D6D;
	font-weight:normal;
}

.products-container .product-listing-overlay-sale .product-price {
	/*color: #27AF60;*/
}

.products-container .product-listing-overlay-sale {
	background: #F8FDFA;
}

.products-container .collection-image:hover .collection-btn {
	background: #2980B9;
	border: #2980B9 2px solid;
}

.products-container .product-cta,
.products-container .product-price--markdown,
.products-container .product-price--discount,
.products-container .product-price--sale,
.products-container .product-image,
.products-container .product-title,
.products-container .product-desc,
.products-container .product-price,
.products-container .collection-cta,
.products-container .collection-image,
.products-container .collection-title,
.products-container .collection-desc {
	margin: 0 0 .3333em 0;
	padding: 0;
}

.sod-pre .products-container .product-price--markdown {
}

.sod-pre .products-container .product-price--discount {
	display:none;
}

.products-container .product-desc,
.products-container .collection-desc {
	color: #7d7d7d;
}

.products-container .collection-desc {
	text-align:center;
	font-size:95%;
}

.products-container .product-cta,
.products-container .collection-cta {
	margin: 1em 0 0 0;
}

.products-container.related-products-container .product-single .product-cta {
	font-size:13px;
}

.products-container .products-cta .product-btn {
	width:50%;
}

.products-container .collection-cta {
	text-align: center;
	display:none;
}

.products-container .product-image-hover-secondary .product-image-secondary {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	object-fit: contain;
	opacity: 0;
	transition: opacity .2s;
}

@media (hover: hover) {
	.products-container .product-image-hover-secondary:hover .product-image-secondary {
		opacity: 1;
	}
}

.products-container .product-image,
.products-container .collection-image {
	position: relative;
	margin-bottom: 1em;
	width: auto;
	height: auto;
	align-self: center;
}

.products-container .product-image img,
.products-container .collection-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	opacity:1;
	object-fit: contain;
}

.products-container .product-image.product-image-hover-fade img,
.products-container .collection-image img {
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.products-container .product-title,
.products-container .collection-title {
	font-weight:bold;
	color: #065798;
	text-decoration: none;
}

.products-container .product-title {
	font-size:15px;
}

.products-container.related-products-container .product-title {
	font-size:14px;
}

.products-container .collection-title {
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 17px;
	margin-bottom:3px;
}

.products-container .collection-title::after {
	display:block;
	border-top:1px solid grey;
	height:10px;
	width:100%;
	position:relative;
}

.products-container .collection-price {
	font-size:14px;
	color: #868686;
	text-align: center;
	margin-bottom: 10px;
}

.products-container .collection-price:empty {
	display:none;
}

.products-container .product-desc:empty {
	display:none;
}

.products-container .product-tags:empty,
.products-container .product-tags {
	display:none;
}

.products-container .product-tags-stacked:empty {
	display:none;
}

.products-container .product-tags-stacked {
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	z-index: 10;
}

	.products-container .product-tags-stacked .product-tag-bestseller {
		background: #0E1E2B;
	}

	.products-container .product-tags-stacked .product-tag-new {
		background: #0887DB;
	}

	.products-container .product-tags-stacked .product-tag-clearance {
		background: #F45849;
	}

	.products-container .product-tags-stacked .product-tag-sale {
		background: #2ec56b;
	}

	.products-container .product-tags-stacked .product-tag-staff-pick {
		background: #0E1E2B;
	}

	.products-container .product-tags-stacked .product-tag-refurbished {
		background: #f65701;
	}

.product-tags-stacked span {
		background: #0E1E2B;
		margin-top: 3px;
		font-size: 12px;
		font-family: 'Montserrat', sans-serif;
		font-weight: normal;
		line-height: 1.3;
		color: #fff;
		float: left;
		z-index: 10;
		display: inline-block;
		padding: 2px 14px;
		border-radius: 5px;
		opacity: 0.9;
		margin-right: 2px;
		margin-left: 2px;
	}

.products-container .product-tag-bestseller,
.products-container .product-tag-staff-pick {
	display:none;
}

.products-container:not(.products-container-filtered) .collection-single-show-bestseller .product-tag-bestseller,
.products-container:not(.products-container-filtered) .collection-single-show-staff-pick .product-tag-staff-pick,
.products-container:not(.products-container-filtered) .product-single-show-bestseller .product-tag-bestseller,
.products-container:not(.products-container-filtered) .product-single-show-staff-pick .product-tag-staff-pick {
	display:inline-block;
}

	.products-container a.product-btn,
	.products-container span.product-btn {
		background: transparent;
		cursor: pointer;
	}

	.products-container a.collection-btn,
	.products-container span.collection-btn {
		cursor: pointer;
		font-weight:normal;
		display: inline-block;
		max-width:50%;
		background: transparent;
		color: #868686;
		font-family: 'Roboto', sans-serif;
		font-size: 13px;
		text-align: center;
		border-radius:3px;
		border: transparent 2px solid;
		transition: all .2s ease-in-out;
		text-decoration: underline;
	}

	.products-container span.product-requestquote,
	.products-container span.product-addtocart {
		color: #065798;
		text-decoration:underline;
		font-weight:bold;
	}

	.products-container .product-single span.product-requestquote:hover,
	.products-container .product-single span.product-addtocart:hover {
		text-decoration:none;
	}

	.products-container a.product-learnmore {
		color: #868686;
		font-family: 'Roboto', sans-serif;
		text-decoration: underline;
		margin-right:8px;
	}

	.products-container a.product-learnmore:hover {
		color: #656565;
		text-decoration:none;
	}

	.products-container a.product-btn-blue {
		background: #3498DB;
		border: #3498DB 2px solid;
	}

	.products-container .collection-single-container .collection-cta:hover .collection-btn {
		text-decoration:none;
	}

	.products-container .collection-meta:hover .collection-title,
	.products-container .product-meta:hover .product-title {
		text-decoration: underline;
	}

	@media (hover: hover) {
		.products-container .collection-meta:hover .collection-image img,
		.products-container .product-meta:hover .product-image.product-image-hover-fade img {
			opacity: 0.7;
		}
	}

	.products-container a.product-customize {
		text-decoration: underline;
		font-weight:bold;
		color: #065798;
	}

	.products-container .product-single a.product-customize:hover {
		text-decoration: none;
	}

	.products-container a.product-outofstock {
		border-color: transparent;
		color: #540000;
		background: transparent;
		padding-left:0;
	}

	.products-container a.product-comingsoon {
		border-color: transparent;
		color: #27AF60;
		background: transparent;
		padding-left:0;
	}

	.products-container a.product-futurestock {
		color: #3c763d;
		display:block;
		font-size:12px;
		margin-top: 4px;
		font-weight:bold;
	}

	.products-container .product-notice {
		border-bottom:1px solid #3498DB;
		padding:5px 10px;
		text-align: center;
		color: #3498DB;
	}

	.products-container .product-info {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 10px 15px;
	}

	/* Product & Collection Tags */
	.product-widget-discount,
	.product-widget-clearance,
	.product-widget-deal,
	.products-container .product-single-overlay-tag:before,
	.products-container .collection-single-overlay-tag:before {
		font-size: 14px;
		font-family: 'Montserrat', sans-serif;
		font-weight: normal;
		line-height: 1.3;
		color: #fff;
		z-index: 10;
		position:absolute;
		display:block;
		padding:2px 17px;
		border-radius:5px;
		opacity: 0.9;
		top: 10px;
		left: 10px;
	}

	.product-widget-discount {
		background: #00cd69;
	}

	.product-widget-clearance {
		background: #ff4a39;
	}

	.product-widget-deal {
		background: #ff723c;
	}

	.products-container .collection-single-overlay-tag-bestseller:before {
		content: "Best Seller";
		background: #343031;
	}

	.products-container .collection-single-overlay-tag-staff-picks:before {
		content: "Expert Pick";
		background: #ff723c;
	}

	.products-container .product-single-overlay-tag-new:before {
		content: "New";
		background: #0099dd;
	}

	.products-container .product-single-overlay-tag-clearance:before {
		content: "Clearance";
		background: #ff4a39;
	}

	.products-container .product-single-overlay-tag-sale:before {
		content: "Sale";
		background: #00cd69;
	}

	.products-container:not(.products-container-filtered) .product-single-overlay-tag-bestseller:before {
		content: 'Best Seller';
		background: #343031;
	}

	.products-container:not(.products-container-filtered) .product-single-overlay-tag-staff-picks:before {
		content: "Expert Pick";
		background: #ff723c;
	}

	.products-container:not(.products-container-filtered) .product-single-overlay-tag-refurbished:before {
		content: "Deal";
		background: #ff723c;
	}

	.products-container .product-single-overlay-multi:before {
		content: " ";
		z-index: 10;
		position:absolute;
		display:block;
		width:60px;
		height:80px;
		border-radius:3px;
		background: url('/static/icons/icon-customize-white.svg') center center #3498db no-repeat;
		background-size:38px;
		opacity: 0.9;
	}
	.products-container .product-single-overlay-digital:before {
		content: " ";
		z-index: 10;
		position:absolute;
		display:block;
		width:60px;
		height:55px;
		border-radius:3px;
		background: url('/static/icons/icon-digitaldownload-white.svg') center center #3498db no-repeat;
		background-size:28px;
		opacity: 0.9;
	}

	/* used for carousels and where widths are set dynamically */
	.products-container.products-container-non-responsive .product-single,
	.products-container.products-container-non-responsive .collection-single,
	.products-container.products-container-non-responsive .widget-single {
		width:auto;
	}

	/* hamburger nav */

	/* montserrat-500 - latin */
	@font-face {
		font-display: fallback;
		font-family: 'Montserrat';
		font-style: normal;
		font-weight: 1000; /* font-weight: 500; */
		src: url('/static/fonts/montserrat-v18-latin-500.eot'); /* IE9 Compat Modes */
		src: local(''),
		url('/static/fonts/montserrat-v18-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('/static/fonts/montserrat-v18-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
		url('/static/fonts/montserrat-v18-latin-500.woff') format('woff'), /* Modern Browsers */
		url('/static/fonts/montserrat-v18-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
		url('/static/fonts/montserrat-v18-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
	}

	.black-link,
	a.black-link {
		color: #000000;
	}

	a.mh--nav-hello {
		background-color: #2980B9;
		font-family: 'Montserrat', sans-serif;
		padding: 10px 20px;
		color: #fff;
		position: sticky;
		top: 0;
		z-index:10;
		width:100%;
		transition: all 0.2s ease-out;
		margin-bottom:4px;
		display: flex;
		align-items: center;
		overflow-wrap: anywhere;
	}

	.mh--nav-hello .mh--nav-icon {
		width: 24px;
		height: 24px;
		display: inline-block;
		margin-right:9px;
	}

	a.mh--nav-hello:hover {
		text-decoration: none;
		background-color: #344A5F;
	}

	.mh--nav-hello a {
		color: #fff;
		text-decoration: underline;
		cursor: pointer;
		display:inline-block;
	}

	.mh--nav{position:fixed;width:320px;max-width:100%;height:100vh;top:0;right:0;display:none;overflow:hidden;box-sizing:border-box;transform:translateX(100%);overflow-y:auto;z-index:3000}
	.mh--nav, .mh--nav .slide-menu__slider{transition:transform .2s ease-in-out;will-change:transform}
	.mh--nav .slide-menu__slider{width:100%;transform:translateX(0)}
	.mh--nav ul.mh--nav-tree {position:relative;width:100%;margin:0;padding-left:0;list-style:none}
	.mh--nav ul.mh--nav-tree ul{position:absolute;top:0;left:100%;display:none;}
	.mh--nav ul.mh--nav-tree a{display:block}
	.mh--nav a{cursor:pointer}

	.mh--nav-arrow {
		border: solid #344a5f94;
		border-width: 0 2px 2px 0;
		display: inline-block;
		padding: 3px;
		width:5px;
		height:5px;
		align-self: center;
	}

	.mh--nav-arrow-left {
		transform: rotate(134deg);
		-webkit-transform: rotate(134deg);
	}

	.mh--nav-arrow-right {
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
	}

	.mh--nav ul {
		width:100%;
		list-style: none;
		padding:0;
	}

	.mh--nav {
		font-family: 'Montserrat', sans-serif;
		font-weight:1000;
		width: 320px;
		background-color: #FFFFFF;
		max-width:80%;
	}

	.mh--nav-item,
	.mh--nav ul.mh--nav-tree a {
		display:inline-block;
		width:100%;
	}

	.mh--nav-item,
	.mh--nav ul.mh--nav-tree a {
		padding: 13px 14px 13px 24px;
	}

	.mh--nav-item-balanced {
		padding: 13px 24px;
	}

	.mh--nav-section {
		border-top:1px solid #EAEDF0;
		margin: 10px 0;
	}

	.mh--nav-external-icon {
		width: 12px;
		height: 12px;
		display: inline-block;
	}

	.mh--nav-control {
		border-bottom:1px solid #EAEDF0;
	}

	.mh--nav-heading {
		color: #2B3D4F;
		padding: 13px 14px 5px 24px;
		font-family: 'Roboto', sans-serif;
		font-weight: bold;
		display:block;
	}

	.mh--nav-heading-first {
		font-size: 17px;
	}

	.mh--nav-heading-secondary {
		font-size: 15px;
		padding: 13px 14px 5px 24px;
	}

	.mh--nav-heading-third {
		font-size: 15px;
		padding: 13px 14px 5px 24px;
	}

	.mh--nav-item-sale {
		font-size: 11px;
		font-family: 'Montserrat', sans-serif;
		line-height: 1.3;
		color: #fff;
		width: 100%;
		display: inline-block;
		max-width: 42px;
		padding: 0px 5px;
		margin-left: 7px;
		border-radius: 5px;
		border: 2px solid #00cd69;
		background: #00cd69;
	}

	.mh--nav ul.mh--nav-tree a:not(.mh--nav-link-exception),
	.mh--nav-link {
		font-size: 12px;
		color: #222436;
	}

	.mh--nav ul.mh--nav-tree a:not(.mh--nav-link-exception):hover,
	.mh--nav-link:hover {
		background-color: #EAEDF0;
		text-decoration: none;
	}

	.mh--nav ul.mh--nav-tree a:not(.mh--nav-link-exception) {
		display: grid;
		grid-template-columns: 1fr 15px;
	}

	.mh--nav ul.mh--nav-tree li.mh--nav-item-sale-tag a:not(.mh--nav-link-exception) {
		grid-template-columns: auto 1fr 15px;
	}

	.mh--nav .mh--nav-link-back {
		display: grid;
		grid-template-columns: 15px 1fr;
		grid-column-gap:10px;
	}

	.mh--nav .mh--nav-item-sale {
		font-size: 11px;
		font-family: 'Montserrat', sans-serif;
		font-weight: normal;
		line-height: 1.3;
		color: #fff;
		display: inline-block;
		padding: 0px 7px;
		border-radius: 5px;
		opacity: 0.9;
		border: 2px solid #00cd69;
		background: #00cd69;
	}

	.mh--nav .mh--nav-link-back:after {
		position: absolute;
		margin-top: 8px;
		width: 14px;
		background-color: #344a5f94;
		height: 2px;
		margin-left:2px;
		content: '';
	}

	.mh--nav ul.mh--nav-tree a:hover .mh--nav-arrow,
	.mh--nav-link:hover .mh--nav-arrow {
		border-color: #344A5F
	}

	.mh--nav ul.mh--nav-tree a:hover .mh--nav .mh--nav-link-back:after,
	.mh--nav-link:hover .mh--nav .mh--nav-link-back:after {
		background-color: #344A5F
	}

	.mh--hamburger {
		display: inline-block;
		float: left;
		background:transparent;
		border:2px solid transparent;
		border-radius:4px;
		margin-top:1px;
		padding-left:0;
		padding-right:0;
		margin-right:5px;
	}

	@media screen and (min-width: 1000px) {
		.mh--hamburger {
			margin-top:5px;
			padding-left:5px;
			padding-right:5px;
			margin-right:3px;
		}
	}

	@media screen and (min-width: 1000px) {
		.mh--hamburger {
			margin-right: 6px;
			border:2px solid transparent;
			margin-top: 22px;
		}
	}

	.mh--nav ul.mh--nav-tree a.mh--nav-viewall {
		border-top: 1px solid #EAEDF0;
		margin-top: 10px;
		text-decoration: underline;
	}

	.mh--hamburger:hover {
		background: #aed6f159;
	}

	.hamburger-bars .bar {
		display: block;
		width: 25px;
		height: 3px;
		margin: 5px auto;
		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		background-color: #2980b9;
		border-radius:3px;
	}

	.mh--nav-close {
		position: absolute;
		top: 13px;
		left: 88%;
		cursor: pointer;
		opacity: 0;
		display: block;
		z-index: 3000;
		transition:opacity 0.25s ease;
		visibility: hidden;
	}

	@media screen and (min-width: 500px) {
		.mh--nav-close {
			left: 335px;
		}
	}

	body.nav-hamburger .mh--nav-close {
		opacity: 1;
		visibility: visible;
	}

	.mh--nav-close-x {
		fill:#fff;
		text-align: center;
		border-radius: 50%;
	}

	.mh--nav-control .mh--nav-item {
		text-transform: uppercase;
		font-size:13px;
	}

	.mh--nav-link {
		cursor: pointer;
	}

	.mh--nav-social {
		display: grid;
		grid-template-columns:1fr 1fr 1fr 1fr 1fr;
		grid-column-gap: 10px;
		padding-bottom:50px;
	}

	.mh--nav ul.mh--nav-tree .mh--nav-social a {
		transition: all 0.2s ease-out;
		padding:0;
		display:inline-block;
		max-width: 100%;
		border-radius: 50%;
		width: 35px;
		height: 35px;
	}

	.mh--nav ul.mh--nav-tree .mh--nav-social a:hover {
		background-color: #EAEDF0;
	}

	.mh--nav-social a img {
		width: 100%;
	}


	/* nav account and cart -- shown at every width. These used to be the mobile-only
	   copies of the dark top bar's .top-account/.top-cart; the top bar copies now ship
	   hidden at all widths (see the "top bar" section) and phase 2 deletes their markup
	   from nav.html. Desktop styling lives with the logo/search bar grid below. */
	.nav-cart,
	.nav-account {
		display:inline-block;
	}

	.nav-account:hover {
		cursor:pointer;
	}

	.nav-account-button,
	.nav-cart-button {
		padding:5px 10px;
		display:block;
		margin:0 3px;
		font-family: 'Montserrat', sans-serif;
		font-size: 13px;
		color: #fff;
		text-align: center;
		border: 1px solid #1C3C56;
		border-radius:5px;
	}

	.nav-account-button:active {
	}

	.nav-cart-button {
		background: #EA950D;
		display:flex;
	}

	@media (min-width: 1000px) {
		.nav-cart-button {
			background: transparent;
		}
	}

	.nav-account-button:hover,
	.nav-account-button:focus,
	.nav-cart-button:hover,
	.nav-cart-button:focus {
		color: #fff;
		text-decoration: none;
	}

	.nav-account-button {
		color: #fff;
		background: #287FB8;
	}

	@media (min-width: 1000px) {
		.nav-account-button {
			background: transparent;
		}
	}

	/* Below 1000px the personal column is only 80-100px wide (see the logo/search bar
	   grid), so the buttons stay icon-only; the text lines switch on at 1000px. */
	.nav-account-greeting,
	.nav-account-label,
	.nav-cart-label {
		display:none;
	}

	.nav-cart .nav-icon {
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: 'FlipH';
	}

	.nav {
		padding-top:10px;
		height: auto;
		background: #0E1E2B;
		box-shadow: rgb(236, 236, 236) 0 1px 0px;
		z-index:auto;
	}

	@media (min-width: 768px) {
		.nav {
			padding-top:40px;
		}
	}

	@media (min-width: 1000px) {
		.nav {
			padding-top:30px;
			z-index:2000;
			position: relative;
		}
	}

	.nav-search {
		display:block;
		width: 100%;
	}

	@media (min-width: 1000px) {
		.nav-search {
			display:inline-block;
		}
	}

	/* The search bar's geometry is shared by rules that sit far apart in this file: the
	   field's own height, the ring it paints when focused, the padding the pinned bar
	   wraps it in, and the height of the top bar the pinned bar has to clear. Everything
	   downstream is a calc() off these, so the derived offsets can't drift out of sync
	   with the boxes they describe -- change a value here and the rest follows.
	   --top-bar-fixed-height is separate from --top-bar-height on purpose: .top only
	   pins from 768px up, so below that there is nothing for the search bar to clear. */
	:root {
		--nav-search-field-height: 40px;
		--nav-search-focus-ring: 3px;
		--nav-search-pin-pad-y: 10px;
		--nav-search-pin-pad-x: 20px;
		--top-bar-height: 30px;
		--top-bar-fixed-height: 0px;
	}

	@media (min-width: 768px) {
		:root {
			--top-bar-fixed-height: var(--top-bar-height);
		}
	}

	/* The autocomplete panel is absolutely positioned. With a static search bar it
	   resolves against the viewport instead, so at phone widths it started at the bar's
	   15px inset and still ran a full 100% wide -- 15px of horizontal overflow, and a
	   page that scrolls sideways, whenever the dropdown is open. Anchoring it to the bar
	   lines the panel up with the input at every width: phone widths resolved against the
	   viewport, desktop against .nav (position:relative from 1000px up), which is why the
	   panel's offsets had to be re-tuned per breakpoint. Now there is one box to measure
	   from. The pinned bar below is position:fixed and anchors it on its own. */
	.nav-search {
		position:relative;
	}

	/* Mobile search affix: the scroll observer (public-scripts.js) sets
	   top-cart-revealed on #nav-top once the nav scrolls under the top bar, and the
	   search bar in the sibling nav pins directly below the top bar -- replaces the
	   bootstrap affix plugin's own scroll listener. Width gate matches the plugin's
	   old <=770px bind check; checkout opts out in public-checkout.css. */
	@media (max-width: 770px) {
		.top.top-cart-revealed ~ .nav #nav-search {
			position:fixed;
			/* clears .top where .top is fixed, and sits flush at the viewport top below
			   768px where .top is static and has already scrolled away */
			top:var(--top-bar-fixed-height);
			left:0px;
			right:0px;
			background:#0E1E2B;
			border-bottom: none;
			width:auto;
			padding:var(--nav-search-pin-pad-y) var(--nav-search-pin-pad-x);
			margin:0;
			z-index:2000;

			/* the resting state IS the pinned position: slide-in only animates the way
			   in, so an animation that is throttled, skipped or interrupted (first pin
			   of a fresh load on mobile) can't leave the bar parked above the viewport */
			animation: slide-in 0.3s;
		}

		/* the autocomplete is positioned against the pinned bar's padding box, so its
		   width:100% would run 20px past the right edge of the viewport. Inset it by the
		   bar's own padding rather than bleeding to the edges, so the panel lines up with
		   the input here the same way it does when the bar sits at rest in the nav. */
		.top.top-cart-revealed ~ .nav #nav-search .search-autocomplete {
			left:var(--nav-search-pin-pad-x);
			right:var(--nav-search-pin-pad-x);
			width:auto;

			/* the pinned bar's padding pushes the field down, so the panel has to clear
			   that padding as well as the field and its focus ring */
			top:calc(var(--nav-search-pin-pad-y) + var(--nav-search-field-height) + var(--nav-search-focus-ring));
		}
	}

	@keyframes slide-in {
		from { transform: translateY(-100%); }
		to { transform: translateY(0); }
	}

	/* add visual emphasis to search bar */
	.nav-search .input-group {
		position: relative;
		display: table;
		border-collapse: separate;
		border-radius: 4px;
		width: 100%;
	}

	.nav-search .input-group .form-control {
		border-radius: 4px;
		display: table-cell;
		position: relative;
		z-index: 2;
		float: left;
		margin-bottom: 0;
	}

	.nav-search .form-control {
		height: var(--nav-search-field-height);
		width: 100%;
		font-size: 15px;
		line-height: 15px;
		padding: 6px 52px 6px 12px;
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		box-shadow: none;
	}

	.nav-search .form-control:focus {
		border-color: #66afe9;
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 0 var(--nav-search-focus-ring) rgb(102 175 233 / 100%);
		box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 0 var(--nav-search-focus-ring) rgb(102 175 233 / 100%);
	}

	.nav-search .input-group-btn {
		display: table-cell;
		position: absolute;
		right: -1px;
		width: 40px;
		height: var(--nav-search-field-height);
		font-size: 0;
		white-space: nowrap;
	}

	.nav-search .btn {
		font-family: inherit;
		-webkit-appearance: button;
		text-transform: none;
		margin: 0;
		position: relative;
		border: 1px solid transparent;
		white-space: nowrap;
		display: inline-block;
		margin-left: -1px;
		margin-bottom: 0;
		font-weight: 400;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;

		z-index: 2;
		width: 40px;
		height: 40px;
		font-size: 16px;
		line-height: 16px;
		padding: 10px 11px;
		border-radius: 4px;
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
	}

	.nav-logo {
		max-width:135px;
		width: 100%;
		display:inline-block;
		float:left;
		margin-top:7px;
	}

	@media (min-width: 400px) {
		.nav-logo {
			max-width:165px;
			margin-top:8px;
		}
	}

	@media (min-width: 1000px) {
		.nav-logo {
			max-width:200px;
			margin-top:28px;
		}
	}

	@media (min-width: 1400px) {
		.nav-logo {
			max-width:200px;
		}
	}

	.nav-logo img {
		max-width:100%;
		aspect-ratio: 25 / 3;
	}

	.nav ul.nav-main {
		list-style: none;
		margin:0;
		float:left;
		-moz-transition: margin-left 0.35s ease;
		-o-transition: margin-left 0.35s ease;
		-webkit-transition: margin-left 0.35s ease;
		transition: margin-left 0.35s ease;
		margin-left:-250px;
		width:250px;
		position:absolute;
		display:block;
		opacity:0;
	}

	@media (min-width: 1000px) {
		.nav ul.nav-main {
			margin-left: 10px;
			padding-left:0;
			display:block;
			width: 100%;
			opacity:1;
			position: static;
		}
	}

	@media (min-width: 1300px) {
		.nav ul.nav-main {
			padding-left:0;
			margin-left: 20px;
		}
	}

	@media (min-width: 1100px) {
		.nav ul.nav-main {
			margin-left: 15px;
			padding-left:10px;
		}
	}

	.nav ul.nav-main > li {
		display:inline-block;
		margin:0 8px;
	}

	@media (min-width: 1400px) {
		.nav ul.nav-main > li {
			display:inline-block;
			margin:0 14px;
		}
	}

	/* scroll to top */
	a.mh--footer-scroll,
	.mh--footer-scroll {
		background: #0E1E2B;
		width:100%;
		padding:20px;
		display:none;
		color: #fff;
		text-align: center;
		font-size:12px;
		font-family: Montserrat, sans-serif;
		font-weight: bold;
		text-transform: uppercase;
	}

	@media (max-width: 768px) {
		a.mh--footer-scroll,
		.mh--footer-scroll {
			display:block;
		}
	}

	a.mh--footer-scroll:hover,
	a.mh--footer-scroll:active {
		color: #fff;
	}

	/* footer */

	.footer {
		position: static;
		clear: both;
		flex-shrink: 0;
		text-transform: uppercase;
		color: #fff;
	}

	.footer ul {
		list-style: none;
		margin:0;
		padding:0;
	}

	.footer ul li {
		display: block;
		margin-bottom: 8px;
	}

	.footer .support a {
		font-size:14px;
		padding:3px 0;
	}

	.footer input::placeholder {
		color: rgba(41, 128, 185, 0.5);
	}
	.footer input::-webkit-input-placeholder {
		color: rgba(41, 128, 185, 0.5);
	}
	.footer input::-moz-placeholder {
		color: rgba(41, 128, 185, 0.5);
	}
	.footer input:-ms-input-placeholder {
		color: rgba(41, 128, 185, 0.5);
	}

	.footer .newsletter {
		padding: 5px 0;
		border-top: 1px solid #d2e9f8;
		background: #e8f4fb;
		grid-template-columns: 8fr 4fr;
		grid-column-gap: 20px;
	}

	@media screen and (min-width: 1300px) {
		.footer .newsletter {
			display: grid;
		}
	}

	.footer .email {
		text-align:center;
	}

	.footer #newsletterSignupMessage {
		text-align:center;
		margin-top:10px;
		font-size:13px;
		font-family: 'Roboto', sans-serif;
		color:#da932b;
		text-transform: none;
	}

	.footer .newsletter form {
		display: inline-block;
	}

	.footer .newsletter .latest {
		text-align: center;
		display: inline-block;
		margin:0;
		letter-spacing: 0.06em;
		margin-right:25px;
		color: #0887db;
	}

	.footer .button-submit {
		display:inline-block;
		margin: -4px 0 0 0;
		color: #0887db;
		background: transparent;
		border:2px solid #0887db;
		padding:6px 45px;
		max-width:300px;
		border-radius: 35px;
	}

	.footer .button-submit-filled {
		background: #0887db;
		border:2px solid #0887db;
		color: #fff;
	}

	.footer .button-submit:hover {
		color: #fff;
		background-color: #0887db;
	}

	.footer #mce-EMAIL {
		background: transparent;
		display: inline-block;
		margin: 0 20px 0 0;
		border: none;
		border-bottom: 2px solid #0887db;
		color: #0887db;
		width: inherit;
		max-width: 285px;
	}

	.footer .mailchimp {
		margin-top:11px;
	}

	.footer .menu a, .footer .button {
		transition: all 0.2s ease-out;
	}

	.footer .site-map {
		padding:20px 20px 30px;
		background: #0E1E2B;
		border-top: #ECF0F1 1px solid;
		grid-column-gap: 20px;
		grid-template-columns: repeat(3, minmax(auto, 520px)) minmax(auto, 333px);
		justify-content: center;
	}

	@media screen and (min-width: 1300px) {
		.footer .site-map {
			display: grid;
		}
	}

	.footer .site-map .company {
		text-align: center;
		margin-top:20px
	}

	.footer .company li a {
		display:inline-block;
	}

	.footer .site-map a.logo img {
		max-width: 110px;
		width:100%;
		aspect-ratio: 1/1;
	}

	.footer a.no-link {
		color: #fff;
		text-decoration: none;
	}

	.footer a.no-link:hover {
		text-decoration: underline;
	}

	.footer a.no-link:focus {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	.footer .site-map .menu a {
		color: #f2fbff;
		font-size:14px;
		padding: 5px 0 1px;
		text-decoration: none;
		position: relative;
		width: initial;
	}

	.footer .site-map .menu a:hover {
		color: #fff;
		text-decoration: none;
		/*margin-left:4px;*/
	}

	.footer .site-map .menu a::after {
		content: '';
		position: absolute;
		top: 100%;
		border-bottom: 0.125em solid #f29500;
		transition: all 0.35s;
		left: 0;
		right: 100%;
	}

	.footer .site-map .menu a:hover::after {
		transition: all 0.35s;
		right: 0;
	}

	.footer .site-map .title {
		display: block;
		font-weight:bold;
		font-size:13px;
		padding-bottom:5px;
		border-bottom:2px solid #1e425e;
		max-width:90%;
		margin-bottom:15px;
		color: #349ce1;
	}

	.footer .social {
		margin:5px 0 3px;
		padding:5px 0;
	}

	.footer .social li {
		display: inline-block;
		width:35px;
		transition: background ease-in-out 0.2s;
		border-radius: 50%;
	}

	.footer .social li:hover {
		background: #d2e9f8;
	}

	.footer-copyright {
		text-align: center;
		text-transform: none;
		color: #fff;
		font-size:13px;
		margin-top:15px;
	}

	/* Temporary Stylesheet Hacks until public_page_wrapper.html gets fixed */

	.footer .newsletter .latest {
		margin:15px 15px 15px;
	}

	.footer .newsletter .email {
		margin-top:5px;
		width:100%;
	}

	.footer .social-footer {
		width:100%;
	}

	.footer .menu {
		margin-top:30px;
	}

	.footer .site-map {
		padding: 20px 80px 50px
	}

	.footer.row {
		right: 15px;
	}

	@media screen and (min-width: 768px) {
		.footer .social {
			margin-left:auto;
			margin-right:auto;
			text-align: center;
		}

		.footer .site-map {
			padding:25px 80px 50px;
		}
	}

	@media screen and (min-width: 770px) and (max-width: 990px) {
		.footer .support {
			text-align: center;
		}
	}

	@media screen and (max-width: 990px) {
		.footer .support a {
			font-size:15px;
		}

		.footer .support .title {
			max-width: 70%;
			margin-left:auto;
			margin-right:auto;
		}
	}

	@media screen and (min-width: 990px) {
		.footer .menu {
			margin-top:0px;
		}
	}

	@media screen and (max-width: 768px) {
		.content-body {
			padding-bottom: 120px !important;
		}

		.footer {
			min-height:270px !important;
		}

		.content-body {
			margin-bottom:935px;
		}

		.footer .newsletter .latest {
			margin:15px auto;
			display: block;
		}

		.footer .newsletter-email {
			height:25px;
			width:180px;
			font-size:1em;
			-webkit-font-smoothing: antialiased;
		}

		.footer #newsletterSignupMessage {
			top:0;
			margin-top: 0px;
			font-size:13px;
			font-family: 'Roboto', sans-serif;
			color:#da932b;
			text-transform: none;
		}

		.footer .newsletter form {
			display: block;
			max-width:90%;
			min-width: 90%;
			margin:auto;
		}

		.footer #mce-EMAIL {
			max-width:100%;
			min-width: 100%;
			display:block;
			margin:0 10px 5px 0;
			height:35px;
		}

		.footer .social {
			text-align: center;
		}

		.footer .site-map {
			padding:20px 20px 50px;
		}

		.footer .site-map .title {
			max-width:100%;
		}
	}

	@media screen and (min-width: 1312px) {
		.footer .email {
			text-align: right;
		}

		.footer #newsletterSignupMessage {
			text-align:right;
			margin-right:10px;
		}

		.footer .site-map .company {
			margin-top:24px;
		}
	}

	/* admin */

	.nav-admin::before {
		content: 'Admin:';
		position:absolute;
		left:5px;
		top:1px;
		font-size:11px;
		color: #AEB7BF;
		padding:3px;
		display:block;
		width:40px;
		height:20px;
	}

	.nav-admin {
		opacity:0.65;
		position:fixed;
		background-color: #344A5F;
		color: #AEB7BF;
		display:block;
		left:20px;
		bottom:20px;
		font-size:12px;
		box-shadow: 1px 1px 0px 1px #2b3d4f42;
		border-radius:5px;
		padding:3px 10px 3px 45px;
		transition: opacity 0.3s;
	}

	.nav-admin:hover {
		opacity:1;
	}

	.nav-admin a,
	.nav-admin span {
		color:#ffffffe8;
		padding:0 5px;
	}

	.nav-admin-version {
		font-size:10px;
		opacity:0.7;
	}

	/* sidebar */
	.sidebar {
		margin-top:10px;
		font-family: 'Montserrat', sans-serif;
	}

	.sidebar:empty {
		margin:0;
	}

	.sidebar ul {
		list-style:none;
		margin:2px 0 15px;
		padding:0;
	}

	.sidebar ul label {
		font-weight:normal;
		margin-bottom:0;
		display: grid;
		grid-template-columns: 1fr 25px;
		grid-column-gap: 15px;
	}

	.sidebar ul ul {
		margin:2px 0 8px;
	}

	.sidebar ul ul ul {
		margin:  2px 3px;
	}

	.sidebar .multi-level > li > a {
		color: #428bca;
	}

	.sidebar li {
		font-size: 14px;
		margin:2px 0;
	}

	.sidebar li .sidebar-link-selected {
		color: #005195;
		font-weight:bold;
	}

	.sidebar li li {
		margin:0 0 0 5px;
		font-size: 13px;
	}

	.sidebar li li a {
		color: #404040;
		font-family: 'Roboto', sans-serif;
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sidebar li li .sidebar-link-selected {
		font-weight:bold;
	}

	.sidebar li li .sidebar-link-selected span {
		font-weight:normal;
	}

	.sidebar li span {
		color: #929292;
		display:none;
	}

	@media (min-width: 880px) and (max-width:1190px) {
		.sidebar li span {
			display:inline-block;
			margin:0 0 0 3px;
		}
	}

	@media (min-width: 1375px) {
		.sidebar li span {
			display:inline-block;
			margin:0 0 0 3px;
		}
	}

	.sidebar li a:hover,
	.sidebar li a:hover span {
		text-decoration:underline;
		color: #006BC0;
	}

	.sidebar-cta {
		font-family: 'Montserrat', sans-serif;
		margin:10px 0;
		display:block;
	}

	.sidebar-cta-header {
		color: #929292;
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 0.07em;
		border-bottom: 1px solid #F7F9F9;
		padding-bottom: 5px;
		margin-bottom:10px;
	}

	.sidebar-cta-header:hover {
		color: #5a5a5a;
	}

	.sidebar-cta-footer {
		color: #065798;
		text-decoration:underline;
		margin-bottom:30px;
	}

	.sidebar-cta-footer:hover {
		text-decoration:none;
	}

	.sidebar .sidebar-title {
		border-bottom: 1px solid #eee;
	}

	.sidebar .module-title {
		margin-top: 24px;
		margin-bottom:19px;
		display:block;
		color: #676767;
	}

	.sidebar .module-tags {
		margin:30px 0 20px;
	}

	.sidebar .module-tags a {
		display:block;
		font-family: 'Montserrat', sans-serif;
		margin: 4px 0;
	}

	/* embedding media */

	.embed-youtube {
		background-color: #000;
		margin-bottom: 30px;
		position: relative;
		padding-top: 56.25%;
		overflow: hidden;
		cursor: pointer;
		border-radius: 5px;
	}

	.embed-youtube img {
		width: 100%;
		top: -16.82%;
		left: 0;
		opacity: 0.6;
		border-radius: 5px;
		transition: opacity .2s ease-in-out;
		aspect-ratio: 4/3;
	}

	.embed-youtube:hover img {
		opacity:0.7;
	}

	.embed-youtube .play-button {
		width: 90px;
		height: 60px;
		background-color: #3498DB;
		box-shadow: 2px 2px 10px rgb(35, 83, 107);
		z-index: 1;
		opacity: 1;
		border-radius: 6px;
		transition: background .2s ease-in-out;
	}

	.embed-youtube:hover .play-button {
		background-color:#287FB8;
	}

	.embed-youtube .play-button:before {
		content: "";
		border-style: solid;
		border-width: 15px 0 15px 26px;
		border-color: transparent transparent transparent #fff;
	}

	.embed-youtube img,
	.embed-youtube .play-button {
		cursor: pointer;
	}

	.embed-youtube img,
	.embed-youtube iframe,
	.embed-youtube .play-button,
	.embed-youtube .play-button:before {
		position: absolute;
	}

	.embed-youtube .play-button,
	.embed-youtube .play-button:before {
		top: 50%;
		left: 50%;
		transform: translate3d( -50%, -50%, 0 );
	}

	.embed-youtube iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.embed-youtube img.youtube-image-custom {
		top: 0;
	}


	/* top and nav styles */

	.top .mh--bootstrap-container,
	.top .container,
	.nav .mh--bootstrap-container,
	.nav .container {
		max-width: 1800px;
		display: table;
	}

	.top {
		height: auto;
		max-height:var(--top-bar-height);
		width: 100%;
		background-color: #2980b9;
		overflow: visible;
		z-index: 10;
		border-bottom:none;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	@media (min-width: 768px) {
		.top {
			position:fixed;
			top:0;
		}
	}

	@media (min-width: 1000px) {
		.top {
			z-index:2300;
		}
	}

	.top a {
		color: #fff;
	}

	.top-tagline {
		float:left;
		padding-bottom:2px;
		width: 317px;
	}

	.top-tagline-mobile {
		display:none;
	}

	@media (max-width: 1050px) {
		.top-tagline{
			display:none
		}

		.top-tagline-mobile{
			float:left;
			padding-bottom:2px;
			display:inline-block;
			width: 251px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.top-title {
		font-family: 'Montserrat', sans-serif;
		font-size: 12px;
		color: #fff;
		padding-top:2px;
	}

	@media (min-width: 768px) {
		.top-title {
			padding-top:6px;
			display:inline-block;
		}
	}

	.top-site {
		display:none;
		float:left;
		width:105px;
	}

	/* Like the .top-cart copy below, the wordmark is revealed by the scroll observer's
	   top-cart-revealed class once the nav scrolls under the fixed top bar; the width
	   transition keeps the old jQuery slide look — both in AND back out at the top of
	   the page — without any scroll-time JS. Desktop only, matching the old >=1000px
	   script gate. Collapsed state stays rendered (width:0) so the slide-out can
	   animate; visibility (flipped only after the collapse finishes) keeps the
	   zero-width link out of the tab order. */
	@media (min-width: 1000px) {
		.top-site {
			display: block;
			overflow: hidden;
			white-space: nowrap;
			width: 0;
			opacity: 0;
			visibility: hidden;
			transition: width 0.25s ease-out, opacity 0.25s ease-out, visibility 0s linear 0.25s;
		}

		.top.top-cart-revealed .top-site {
			width: 105px;
			opacity: 1;
			visibility: visible;
			transition-delay: 0s;
		}
	}

	.top-contact-title {
		display:none;
	}

	@media (min-width: 480px) {
		.top-contact-title {
			display:inline-block;
		}
	}

	@media (max-width: 480px) {
		.top-contact-title {
			display:none;
		}
	}

	.top-contact {
		margin-left:10px;
		display:none;
		float:left;
	}

	@media (min-width: 767px) {
		.top-contact {
			display:inline-block;
		}
	}

	/* Account and cart moved into the nav bar (.nav-account/.nav-cart), so these top bar
	   copies are hidden at rest -- the top bar keeps only the site title, tagline
	   and contact info. The .top-cart copy is NOT dead markup: it is revealed once the
	   nav scrolls out of view (top-cart-revealed below), so phase 2 of the nav move
	   must keep it in nav.html; only the .top-account copy can be removed then. */
	.top-account,
	.top-cart {
		float:right;
		border-right:1px solid rgba(138, 175, 199, 0.75);
		color: #fff;
		cursor: pointer;
		height:30px;
		font-family: 'Montserrat', sans-serif;
		display:none;
	}

	.top-cart {
		text-transform: uppercase;
		padding:5px 20px;
		border-left: 1px solid rgba(138, 175, 199, 0.75);
	}

	/* The scroll observer (public-scripts.js) sets top-cart-revealed on #nav-top once
	   the nav -- which holds the cart at rest -- is fully under the fixed top bar;
	   only then does the top bar's cart copy appear. Scoped to widths where the top
	   bar is position:fixed, so the revealed cart is actually pinned to the viewport. */
	@media (min-width: 768px) {
		.top.top-cart-revealed .top-cart {
			display: block;
			animation: top-cart-fade-in 0.2s ease-out;
		}
	}

	@keyframes top-cart-fade-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	.top-account:hover,
	.top-cart:hover {
		background: #fff;
		color: #2980B9;
	}

	.top-cart:hover .top-cart-count {
		color: #fff;
	}

	.top-cart:hover,
	.top-cart:focus,
	.top-cart:active {
		text-decoration: none;
	}

	.top-cart-count {
		background: #F39C0F;
		border-radius: 2px;
		font-size: 14px;
		padding: 2px 11px;
	}

	.top-account {
		width:auto;
		min-width:200px;
		text-align: center;
	}

	.top-account .top-account-link {
		padding:5px 20px;
	}

	.top-account .top-icon {
		margin: 0 2px 0 12px;
	}

	.top-cart .top-icon {
		margin: 0 12px 0 2px;
		-ms-filter: 'FlipH';
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
	}

	.top-account .top-account-button {
		padding:5px 10px;
		display:inline-block;
	}

	.top-account #top-account-menu {
		display:none;
		text-align: left;
		min-width: 200px;
		box-shadow: rgba(56, 56, 56, 0.15) 2px 1px 4px 0px;
	}

	/* Chrome borrowed wholesale from .search-autocomplete, the other panel hanging off this
	   same nav bar: same 1px #c9c9c9 line, same 5px radius, same white. The two used to be
	   two different design languages sitting 200px apart; where they disagreed the
	   autocomplete's value wins, here and in every rule below.

	   One deliberate departure: the autocomplete is square-topped and borderless on top
	   because it sits flush under the search input. This panel keeps all four corners and a
	   full border -- it is only flush under its button at 1000px+, it floats on a 4px margin
	   below that, and the caret tail needs a line to interrupt (see the ::after rule in the
	   desktop block).

	   overflow:hidden is what lets the full-bleed hover bands below run edge to edge and
	   still be clipped by the corner radius. */
	.nav-account #nav-account-menu {
		display:none;
		position: absolute;
		z-index: 50;
		background: #fff;
		margin: 4px;
		border-radius: 5px;
		border: 1px #c9c9c9 solid;
		overflow: hidden;
		/* Sized to the rows, not to the identity block: the widest row was My Rewards at
		   ~219px with a four-figure balance. That was measured at the old 16px row padding;
		   at the 10px the rows carry now the same row needs ~207px, so the floor is
		   comfortable rather than tight. It is left at 240px on purpose -- the panel width
		   should not move just because the padding did.

		   The cap is what makes the name and email actually truncate. Without it the
		   floor is only a floor, and because the panel is absolutely positioned it sizes
		   shrink-to-fit -- a long address on a nowrap line pushed it out to max-content
		   (393px for a 55-character one) instead of ellipsising inside 240px. */
		min-width: 240px;
		max-width: 240px;
		right:60px;
	}

	/* Below the desktop breakpoint the panel is not anchored to the button -- .nav-account
	   is only position:relative from 1000px up, so the panel resolves against
	   .mh--bootstrap-container instead and sits at right:60px inside it. At that offset a
	   fixed floor puts the left edge at (container - floor - 64px), which runs off the
	   side of a 320px phone and hands the page a sideways scroll -- the same bug the
	   autocomplete panel had. min-width has to come off rather than just be capped: where
	   the two conflict, CSS resolves min-width over max-width, so a cap alone would not
	   bite. */
	@media (max-width: 999px) {
		.nav-account #nav-account-menu {
			min-width: 0;
			width: 240px;
			max-width: calc(100% - 68px);
		}
	}

	/* Name over email, above the divider. Both are written client-side, so the block has
	   to hold its shape while they are still empty -- hence the min-height on each line
	   rather than letting the panel resize under the pointer when session data lands. */
	.nav-account-menu-identity {
		padding: 8px 10px;
		border-bottom: 1px solid #eee;
	}

	/* Both lines are held to one line and ellipsised rather than wrapped. A display name
	   or address long enough to wrap would otherwise break mid-domain
	   ("nick.lefors@matterhackers" / ".com") and grow the panel a line taller than it was
	   when the pointer entered it. The script that writes them also sets a title, so the
	   full value is still available on hover.

	   No font-family here any more: the panel inherits the body Arial that the autocomplete
	   rows use, which is the whole point of matching the two. */
	.nav-account-menu-name,
	.nav-account-menu-email {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav-account-menu-name {
		font-weight: 700;
		line-height: 1.3;
		min-height: 20px;
		color: #0E1E2B;
	}

	/* Sized and coloured off .search-autocomplete-collection-description, the autocomplete's
	   secondary line. */
	.nav-account-menu-email {
		font-size: 11px;
		line-height: 1.3;
		min-height: 16px;
		margin-top: 2px;
		color: #868e93;
	}

	/* .search-autocomplete-heading, to the pixel -- including the #F9F9F9 band, which is
	   what separates the sections in that panel. */
	.nav-account-menu-heading {
		display: block;
		padding: 5px 10px;
		font-size: 9px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #8597A6;
		background: #F9F9F9;
	}

	/* .search-autocomplete-footer. Logging out stays visually separate from the account
	   links, but the grey band on the button below does that job now -- the rule that used
	   to sit here would double up against the last row's own #eee hairline. */
	.nav-account-menu-footer {
		padding: 0;
		font-size: 12px;
	}

	.top-account ul,
	.nav-account ul {
		list-style:none;
		margin:0;
		background:#fff;
		padding:0;
	}

	.top-account ul {
		border: 1px solid #d2d2d2;
		border-top:none;
	}

	.top-account:before {
		content: '';
		display:block;
		border-left: 1px solid rgba(138, 175, 199, 0.75);
		position:absolute;
		height:30px;
		top:0;
	}

	.top-account {
		height:auto;
		border:none;
	}

	.top-account li:hover a,
	.top-account li:hover span {
		background: #F7F9F8;
		color: #2980B9;
		text-decoration:underline;
	}

	.top-account li {
		display: block;
		width: 100%;
	}

	.top-account li a,
	.top-account li span {
		color: #333;
		display: block;
		width: 100%;
		padding:10px 15px;
	}

	.top-account li:first-child {
		padding-top:10px;
	}

	.top-account li:last-child {
		padding-bottom:10px;
	}

	/* No pad at all: the footer's grey band butts flush against the last row, the way the
	   autocomplete's search-all band does. (The pad was never on li:first-child /
	   li:last-child -- those two rules put 10px above the first row and 15px below the
	   last, so the panel sat visibly off-centre.) */
	.nav-account ul {
		padding: 0;
	}

	/* One rule for every row, links and the logout button alike, so the button stops
	   drifting from the links it sits above. The values are a.search-autocomplete-suggestion
	   -- the autocomplete row that also carries a 20px icon -- so the two panels stack rows
	   at the same height, in the same inherited body Arial, in the same #0E1E2B.

	   flex + gap rather than a fixed icon column on purpose: pages are served from the
	   page cache, so a visitor can pair this stylesheet with cached HTML whose rows have
	   no <svg> in them yet. gap only applies *between* items, so an icon-less row lays
	   out flush at the text instead of holding an empty 20px gutter. That is why this is
	   not the autocomplete's own `display:grid` + grid-template-columns.

	   Direct-child selectors matter here: the rows now carry their own <span>s (the label
	   and the reward balance), and a bare `.nav-account li span` would style those as
	   rows too and pad every label a second time. */
	.nav-account li > a,
	.nav-account li > span,
	.nav-account-menu-footer > button.js-account-logout {
		display: flex;
		align-items: center;
		gap: 15px;
		width: 100%;
		padding: 5px 10px;
		color: #0E1E2B;
		text-align: left;
		background: none;
		border: none;
		cursor: pointer;
	}

	/* Row hairlines, matching .search-autocomplete a:not(.search-autocomplete-search-all-btn).
	   The logout button is excluded for the same reason the search-all button is: it is the
	   footer band, not a row. */
	.nav-account li > a,
	.nav-account li > span {
		border-bottom: 1px solid #eee;
	}

	/* .search-autocomplete-search-all-btn: grey band, muted text, standing underline (not a
	   hover state -- that button is underlined at rest too). Because the band is the
	   button's resting look it does not take the #EAEDF0 row band on hover either; see the
	   hover rule below, which deliberately leaves it out. */
	.nav-account-menu-footer > button.js-account-logout {
		padding: 10px 12px 10px 10px;
		background: #F9F9F9;
		color: #636363;
	}

	.nav-account-menu-footer > button.js-account-logout .nav-account-menu-text {
		text-decoration: underline;
	}

	.nav-account-menu-footer > button.js-account-logout:hover {
		background: #F9F9F9;
		color: #636363;
	}

	/* Icons are stroked outlines in currentColor, so they pick up the row's hover colour
	   with no separate rule. flex-shrink guards the glyph against a long row label. */
	.nav-account-menu-icon {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		color: #7A8B99;
	}

	/* nowrap so a row label never stacks itself against the reward balance sharing its
	   row -- "My Rewards" was breaking across two lines to make room for the figure. */
	.nav-account-menu-text {
		flex: 1 1 auto;
		white-space: nowrap;
	}

	/* PARKED -- reward balance, right-aligned on its row. Off with the markup and the
	   lookup that fed it (see the note above loadNavRewardBalance() in public-scripts.js)
	   pending a decision on the OFS load. Uncomment along with those to revive.

	   Note if it comes back: the panel's 240px floor was measured with this on the row --
	   My Rewards needed ~219px with a four-figure balance, which is what sized it. That
	   figure is stale in one direction only: it was taken at the old 16px row padding, and
	   the rows carry 10px now, so the same row needs ~207px and the floor has more slack
	   than it did. It is deliberately left at 240px either way, so the panel width does not
	   move when this returns.

	.nav-account-menu-balance {
		flex: 0 0 auto;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: #16A163;
		white-space: nowrap;
	}

	.nav-account-menu-balance:empty {
		display: none;
	}
	*/

	/* Band plus label underline, the literal .search-autocomplete a:hover pair -- same
	   #EAEDF0, same "underline the title, not the whole row".

	   The logout button is not in this list: it keeps its own #F9F9F9 band on hover, the
	   way .search-autocomplete-search-all-btn does. It IS still here on :focus-visible
	   though, which the search-all button has no equivalent of -- that is a deliberate
	   departure from the match, because this is a focusable control and dropping its
	   keyboard affordance to chase a visual would be an accessibility regression. */
	.nav-account li:hover > a,
	.nav-account li:hover > span,
	.nav-account li > a:focus-visible,
	.nav-account-menu-footer > button.js-account-logout:focus-visible {
		background: #EAEDF0;
		color: #0E1E2B;
		outline: none;
	}

	.nav-account li:hover > a .nav-account-menu-text,
	.nav-account li:hover > span .nav-account-menu-text,
	.nav-account li > a:focus-visible .nav-account-menu-text {
		text-decoration: underline;
	}

	.nav-account li:hover > a .nav-account-menu-icon,
	.nav-account li > a:focus-visible .nav-account-menu-icon,
	.nav-account-menu-footer > button.js-account-logout:focus-visible .nav-account-menu-icon {
		color: #0E1E2B;
	}

	/* top-cart and top-account icons */
	.top-cart-icon {
		width: 18px;
		height: 18px;
		margin: 0 6px -4px 2px;
	}

	.top-account-icon {
		width: 18px;
		height: 18px;
		margin: 0 0 -4px 2px;
	}

	/* nav-cart and nav-account icons */
	.nav-cart-icon {
		width: 24px;
		height: 24px;
		margin: 0 0 -3px 0;
	}

	.nav-account-icon {
		width: 15px;
		height: 15px;
		margin: 0 0 -2px 0;
	}

	/* nav-search icon */
	.nav-search-icon {
		width: 20px;
		height: 20px;
		margin: -1px 0 0 -1px;
	}

	/* hamburger flyout account icon */
	.hamburger-account-icon {
		width: 24px;
		height: 24px;
		display: inline-block;
		margin-right: 9px;
	}

	/* checkout page cart icon */
	.checkout-page-cart-icon {
		width: 50px;
		height: 50px;
		margin: 0;
	}

	/* checkout and account pages */
	.input-error-container {
		color: #E64D3D;
	}

	/* Season of Deals Banner */
	.mh--nav .mh--nav-section.mh--nav-season-of-deals a {
		padding-top:0;
		padding-bottom:0;
		border-top:none;
	}

	.mh--nav-section.mh--nav-season-of-deals img {
		width:100%;
		max-width:250px;
	}

	/* join hamburger button to main navigation */
	.mh--hamburger {
		position: absolute;
		left: 5px;
		top: 52px;
		clear: both;
		padding-left: 5px;
		padding-right: 5px;
	}

	.mh--hamburger .hamburger-bars {
		float: left;
		padding: 3px;
	}

	.mh--hamburger .hamburger-bars .bar {
		display: block;
		width: 20px;
		height: 2px;
		margin: 4px auto;
		background-color: #287FB8;
		transition: none;
		border-radius: 0;
	}

	.mh--hamburger .hamburger-label {
		float: right;
		font-family: 'Montserrat', sans-serif;
		text-transform: uppercase;
		color: #333;
		font-size: 12px;
		display: inline-block;
		padding: 5px 2px 5px 5px;
		text-decoration: none;
	}

	.mh--hamburger:hover .hamburger-label {
		color: #287FB8;
	}

	.mh--hamburger:hover .hamburger-bars .bar {
		background-color: #287FB8;
	}

	@media (min-width: 1000px) {
		.nav .mh--bootstrap-container,
		.nav .container {
			position: relative;
		}

		.nav ul.nav-main {
			margin: 10px 0 2px 72px;
			padding-left: 0;
			width: calc(100% - 72px);
		}

		.nav-dropdown-item {
			box-shadow: 0px 7px 14px 4px rgba(0,0,0,0.17);
			border-radius: 5px;
		}
	}

	/* Dark header background and quicklinks */
	.nav {
		padding-top: 0;
		box-shadow: none;
	}

	@media (min-width: 768px) {
		.nav {
			padding-top: 30px;
		}
	}

	@media (min-width: 1000px) {
		.nav {
			padding-top: 30px;
		}
	}

	/* Top bar area */
	.mh--dark-top-bar {
		background-color: #0E1E2B;
	}

	.mh--dark-top-bar {
		border-bottom: 1px solid #1C3C56;
	}

	@media (min-width: 1050px) {
		.mh--dark-top-bar .top-title {
			width: 650px;
		}
	}

	.mh--dark-top-bar .top-account,
	.mh--dark-top-bar .top-cart {
		border-color: #1C3C56;
	}

	.mh--dark-top-bar .top-account::before {
		border-left: 1px solid #1C3C56;
	}


	/* Logo and Search bar area */
	.mh--logo-search-bar {
		background-color: #0E1E2B;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.mh--logo-search-bar .mh--bootstrap-container {
		display: grid;
		grid-row-gap: 10px;
		align-items: center;
		grid-column-gap: 10px;
		/* Below 1000px the deliver widget is not in the top row: it gets its own full-width
		   row under the search bar, placed into an implicit third row (see the max-width:999px
		   block further down). The middle cell of the top row is left empty rather than being
		   handed to the logo so that hiding/showing the widget can't move anything else, and
		   the implicit row only exists while the widget is visible -- so no stray row gap
		   while it ships hidden. */
		grid-template-areas: 'logo . personal' 'search search search';
		grid-template-columns: minmax(120px, 165px) 1fr minmax(80px, 100px);
		/* max-width: 100%; */
		/* overflow: hidden; */
	}

	@media (min-width: 1000px) and (max-width: 1300px) {
		.mh--logo-search-bar .mh--bootstrap-container {
			grid-template-columns: minmax(150px, 180px) auto 1fr minmax(160px, auto);
			grid-template-areas: 'logo deliver search personal';
			grid-column-gap: 10px;
		}
	}

	@media (min-width: 1301px) {
		.mh--logo-search-bar .mh--bootstrap-container {
			grid-template-columns: minmax(180px, 200px) auto 1fr minmax(200px, auto);
			grid-template-areas: 'logo deliver search personal';
			grid-column-gap: 20px;
		}
	}

	@media (min-width: 1000px) {
		.mh--logo-search-bar .nav-cart-button,
		.mh--logo-search-bar .nav-account-button {
			background: transparent;
			/* border: 1px solid #1C3C56; */
			border: 1px solid transparent;
			border-radius: 5px;
			padding: 8px 12px;
			color: #fff;
			text-align: center;
			transition: background-color 0.2s;
			min-height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(44, 60, 86, 0.2);
		}

		.mh--logo-search-bar .nav-cart-button:hover,
		.mh--logo-search-bar .nav-account-button:hover {
			/* background-color: rgba(44, 60, 86, 0.2); */
			text-decoration: none;
			border: 1px solid #b2d9f8;
		}

		/* .mh--logo-search-bar .nav-cart-button {
			background: #EA950D;
		} */

		.mh--logo-search-bar .nav-account-button {
			/* background: #287FB8; */
			border-color:transparent;
			
		}

		.mh--logo-search-bar .nav-cart-count {
			margin-left: 5px;
			background: #F39C0F;
			border-radius: 2px;
			font-size: 12px;
			padding: 2px 6px;
		}

		.mh--logo-search-bar .nav-account-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.mh--logo-search-bar .nav-deliver {
		grid-area: deliver;
		/* Shipped hidden until the delivery-estimate rollout; this flex is the launch
		   switch — already-cached pages carry the markup, so they pick the widget up
		   with no markup/JS deploy. One rule covers both placements: its own slot in
		   the top row at >= 1000px, and a full-width row under the search bar below
		   that (the max-width:999px block owns the mobile row's layout). */
		display: flex;
		align-items: center;
	}

	.mh--logo-search-bar .nav-personal {
		grid-area: personal;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 'account cart';
	}

	/* Desktop account + cart. These rules have to sit after the .nav-personal rule above
	   (same specificity) so the sized-to-content tracks win over its 1fr 1fr. */
	@media (min-width: 1000px) {
		.mh--logo-search-bar .nav-personal {
			grid-template-columns: auto auto;
			justify-content: end;
			align-items: center;
			grid-column-gap: 10px;
		}

		/* Two-line account button: the icon spans both rows, "Hello, <name>" (or
		   "Hello, Sign In" until session data says otherwise) sits above a static
		   "Account & Orders". Line sizes match the neighboring nav-deliver button. */
		.mh--logo-search-bar .nav-account-button {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-areas: 'icon greeting' 'icon name';
			grid-column-gap: 8px;
			justify-content: start;
			text-align: left;
			padding: 5px 12px;
		}

		.mh--logo-search-bar .nav-account-icon {
			grid-area: icon;
			align-self: center;
			width: 20px;
			height: 20px;
			margin: 0;
		}

		/* The username line. Its max-width matches the static "Account & Orders" line below
		   so the bold line is what sizes the button: a long name ellipsis-clips instead of
		   widening the nav (zero reflow when session data lands).
		   !important beats the inline display:none the script injects the span with -- that
		   inline style is what keeps the greeting hidden for visitors still on a cached copy
		   of the stylesheet that predates these rules. Phase 2 bakes the span into nav.html
		   without the inline style and this can go back to a plain `block`. */
		.mh--logo-search-bar .nav-account-greeting {
			grid-area: greeting;
			display: block !important;
			max-width: 122px;
			font-size: 11px;
			font-weight: normal;
			line-height: 1.2;
			color: #B8CDD9;
			letter-spacing: 0.02em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* Static text ("Account & Orders"), so no width reservation is needed. The
		   min-height only matters in the cache-mix case where this span is still the
		   username hook and can be momentarily empty. */
		.mh--logo-search-bar .nav-account-label {
			grid-area: name;
			display: block;
			font-size: 14px;
			font-weight: 600;
			line-height: 1.2;
			min-height: 17px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* Faded caret after the bold line, hinting that the button opens a menu. A border
		   triangle rather than a glyph so it stays crisp and can't pick up the 600 weight
		   or a fallback font. It rides the label's own inline flow inside that nowrap,
		   overflow-hidden box, so in every state it stays inside the button and can never
		   wrap or escape -- in the cache-mix state where the line still carries a username
		   the button simply widens to fit both. The explicit zero width/height keeps the
		   triangle from collapsing if a box-sizing: border-box rule ever folds the borders
		   inside a set size. */
		.mh--logo-search-bar .nav-account-label::after {
			content: '';
			display: inline-block;
			vertical-align: middle;
			margin-left: 6px;
			width: 0;
			height: 0;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid rgba(184, 205, 217, 0.75);
		}

		.mh--logo-search-bar .nav-account:hover .nav-account-label::after {
			border-top-color: #B8CDD9;
		}

		.mh--logo-search-bar .nav-cart-label {
			display: block;
			/* clears the badge overlapping the glyph's top-right corner, even at 3 digits */
			margin-left: 14px;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.2;
			letter-spacing: 0.02em;
			text-transform: uppercase;
			white-space: nowrap;
		}

		.mh--logo-search-bar .nav-cart-button {
			position: relative;
		}

		/* The count rides the top-right corner of the cart glyph rather than sitting inline
		   between it and the "Cart" label. Out of flow, so the "..." placeholder -> count
		   swap can't jitter the button width either. */
		.mh--logo-search-bar .nav-cart-count {
			position: absolute;
			top: 0;
			left: 22px;
			margin: 0;
			min-width: 16px;
			padding: 0 4px;
			font-size: 11px;
			font-weight: 600;
			line-height: 15px;
			text-align: center;
			border-radius: 8px;
		}

		/* Hairline between the account group and the cart group (grid order is account
		   then cart), sized to the row rather than the button. */
		.mh--logo-search-bar .nav-personal .nav-cart {
			display: flex;
			align-items: center;
			align-self: stretch;
			padding-left: 10px;
			border-left: 1px solid rgba(138, 175, 199, 0.35);
		}

		/* Anchor the dropdown under the account button (it hangs off the whole nav bar
		   otherwise, which is where the mobile layout still wants it). */
		.mh--logo-search-bar .nav-account {
			position: relative;
		}

		.mh--logo-search-bar .nav-account #nav-account-menu {
			top: 100%;
			right: 0;
			/* flush under the button so the pointer never leaves the hover target */
			margin: 0;
			/* Two floors, not a width. 100% keeps the panel from rendering narrower than
			   the button it hangs off once a long username widens that button (the same
			   trick the autocomplete panel uses); max() keeps the base floor in play,
			   which a plain `min-width: 100%` would otherwise override -- the button is
			   only ~195px, so the panel collapsed to that and wrapped its rows. */
			min-width: max(100%, 240px);
		}

		/* Tail pointing back at the button. It hangs off .nav-account rather than the
		   panel because the panel is overflow:hidden (that clip is what keeps the hover
		   bands inside the corner radius) and would cut it off. Painted the same white
		   as the panel: it is legible because it sits over the dark nav bar, which is
		   also why it is desktop-only -- below 1000px the panel is not anchored to the
		   button and there would be nothing for it to point at.

		   The panel has a visible #c9c9c9 border now, and this is what breaks it: at
		   z-index 51 over the panel's 50, the triangle's 16px base paints over the top
		   border and the tail reads as merging into the box. It has no outline of its own
		   -- a second #c9c9c9 triangle a pixel larger behind it would give it one, if the
		   unbordered white wedge ever looks wrong against the bordered panel. */
		.mh--logo-search-bar .nav-account[data-view="open"]::after {
			content: '';
			position: absolute;
			top: calc(100% - 7px);
			/* Lines this caret up under the one on the button. That one is the
			   .nav-account-label::after triangle, which rides the end of the "Account &
			   Orders" text and so centres 20px in from .nav-account's right edge; this
			   one is 16px wide, so 20 - 8 puts the two on the same axis. The button
			   caret's offset holds at any username length because the greeting line
			   above it is capped at max-width:122px, leaving the static label line to
			   size the button. */
			right: 12px;
			z-index: 51;
			width: 0;
			height: 0;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid #fff;
		}
	}

	.nav-deliver-button {
		display: flex;
		align-items: center;
		gap: 6px;
		text-align: left;
		background: transparent;
		border: 1px solid transparent;
		/* border: 1px solid #1C3C56; */
		background-color: rgba(44, 60, 86, 0.2);
		border-radius: 5px;
		padding: 5px 12px;
		color: #fff;
		cursor: pointer;
		transition: background-color 0.2s;
		min-height: 40px;
		max-width: 210px;
	}

	.nav-deliver-button:hover {
		border: 1px solid #b2d9f8;
		background-color: rgba(44, 60, 86, 0.2);
	}

	.nav-deliver-icon {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
	}

	.nav-deliver-text {
		display: flex;
		flex-direction: column;
		text-align: left;
		line-height: 1.2;
		min-width: 0;
		/* Fixed width reserves the space so the box doesn't reflow when the
		   async location text loads (no layout jank); overflow ellipsis-clips. */
		width: 200px;
	}

	/* Top line: "Delivering to <city…> <zip>" — the place clips, the prefix and zip stay visible. */
	.nav-deliver-label {
		display: flex;
		align-items: baseline;
		gap: 4px;
		min-width: 0;
		font-size: 11px;
		color: #B8CDD9;
		letter-spacing: 0.02em;
		font-weight: normal;
	}

	.nav-deliver-prefix {
		flex: none;
		white-space: nowrap;
	}

	.nav-deliver-place {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
		flex: 0 1 auto;
	}

	.nav-deliver-zip {
		flex: none;
		white-space: nowrap;
	}

	/* Bottom line: bold "<city…> <zip>" location (city clips, zip stays) or a plain CTA. */
	.nav-deliver-action {
		display: flex;
		align-items: baseline;
		gap: 4px;
		min-width: 0;
		margin-top: 1px;
		font-size: 14px;
		font-weight: 600;
		color: #fff;
	}

	/* Empty spans (the unused location/CTA slot) are removed so they don't leave a
	   stray flex gap before the visible text. */
	.nav-deliver-label span:empty,
	.nav-deliver-action span:empty {
		display: none;
	}

	.nav-deliver-cta {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	@media (max-width: 999px) {
		/* Own full-width row directly under the search bar (row 3 is an implicit track,
		   created by the widget itself). */
		.mh--logo-search-bar .nav-deliver {
			grid-column: 1 / -1;
			grid-row: 3;
		}

		/* One compact line: pin icon + "Deliver to" + the bold location, left aligned. */
		.nav-deliver-button {
			padding: 5px 8px;
			min-height: 32px;
			width: 100%;
			max-width: none;
		}

		.nav-deliver-text {
			flex-direction: row;
			align-items: baseline;
			gap: 6px;
			width: auto;
			flex: 1 1 auto;
		}

		.nav-deliver-icon {
			width: 18px;
			height: 18px;
		}

		.nav-deliver-label {
			font-size: 12px;
			flex: 0 1 auto;
		}

		.nav-deliver-action {
			font-size: 13px;
			margin-top: 0;
			flex: 0 1 auto;
		}
	}

	.mh--logo-search-bar .nav-logo {
		border: 1px solid transparent;
		border-radius: 5px;
	}

	.mh--logo-search-bar .nav-logo:hover {
		border: 1px solid #b2d9f8;
	}


	.mh--logo-search-bar .nav-logo img,
	.mh--logo-search-bar .nav-logo svg {
		max-width: 165px;
		width: 100%;
		height: 20px;
	}

	@media (min-width: 1000px) {
		.mh--logo-search-bar .nav-logo {
			padding: 10px;
			margin:0;
		}
		
		.mh--logo-search-bar .nav-logo img,
		.mh--logo-search-bar .nav-logo svg {
			max-width: 200px;
		}
	}

	.mh--logo-search-bar .nav-cart {
		grid-area: cart;
	}

	.mh--logo-search-bar .nav-account,
	.mh--logo-search-bar .nav-cart {
		display:inline-block;
	}

	.mh--logo-search-bar .nav-account {
		grid-area: account;
	}

	.mh--logo-search-bar .nav-search {
		grid-area: search;
	}

	/* Hamburger and Quicklinks bar area */
	.mh--hamburger-quicklinks-bar {
		background-color: #1C3C56;
		min-height: 45px;
	}

	.mh--hamburger-quicklinks-bar .mh--bootstrap-container,
	.mh--hamburger-quicklinks-bar .container {
		padding-right: 0;
		display:block;
	}

	.mh--hamburger-quicklinks-bar .mh--hamburger {
		position: relative;
		top: 5px;
		left: 0;
		margin-top: 0;
		margin-right: 17px;

		font-weight: bold;
		border: 1px solid #287FB8;
	}

	@media (min-width: 1000px) {
		.mh--hamburger-quicklinks-bar .mh--hamburger {
			left: -10px;
		}
	}

	.mh--hamburger-quicklinks-bar .mh--hamburger:hover {
		background-color: transparent;
		border: 1px solid #fff;
	}

	.mh--hamburger-quicklinks-bar .mh--hamburger .hamburger-label {
		color: #fff;
	}

	.mh--hamburger-quicklinks-bar .mh--quicklinks {
		width: calc(100% - 100px);
		height: 45px;
		display: block;
		margin: 0;
		padding: 0;
		overflow-x: scroll;
		white-space: nowrap;
		position: relative;
		right: -2px;
		cursor: grab;
	}

	.mh--hamburger-quicklinks-bar .mh--quicklinks.mh--quicklinks-overflowing {
		background: fixed linear-gradient(90deg, rgba(0,0,0,0) 95%, rgba(0,0,0,0.25) 100%);
	}

	.mh--quicklinks.mh--quicklinks-dragging {
		cursor: grabbing;
		-webkit-user-select: none;
		user-select: none;
	}

	.mh--hamburger-quicklinks-bar .mh--quicklinks::-webkit-scrollbar {
		display: none; /* Chrome, Safari and Opera */
	}

	.mh--hamburger-quicklinks-bar .mh--quicklinks {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}

	.mh--hamburger-quicklinks-bar .mh--quicklinks li {
		display: inline-block;
	}

	.mh--hamburger-quicklinks-bar .mh--quicklinks a {
		font-family: 'Montserrat', sans-serif;
		font-size: 12px;
		display: inline-block;
		color: #fff;
		border: 1px solid transparent;
		padding: 7px 10px 8px;
		margin: 5px 0;
		border-radius: 3px;
	}
	.mh--hamburger-quicklinks-bar .mh--quicklinks a:hover,
	.mh--hamburger-quicklinks-bar .mh--quicklinks a:focus {
		text-decoration: none;
		border: 1px solid #fff;
		border-radius: 3px;
	}

	.mh--hotdog-quicklinks-secondary {
		min-height: auto;
		background-color: #eee;
		border-bottom: 1px solid #e2e8f0;
	}

	.mh--hotdog-quicklinks-secondary .container,
	.mh--hotdog-quicklinks-secondary .mh--bootstrap-container {
		padding: 0;
	}

	.mh--hotdog-quicklinks-secondary .mh--quicklinks {
		height: 32px;
		width: 100%;
		right: 0;
		cursor: grab;
	}

	.mh--hotdog-quicklinks-secondary .mh--quicklinks.mh--quicklinks-overflowing {
		background: fixed linear-gradient(90deg, rgba(0,0,0,0) 95%, rgba(0,0,0,0.1) 100%);
	}

	.mh--hotdog-quicklinks-secondary .mh--quicklinks a {
		color: #333;
		font-family: 'Roboto', sans-serif;
		padding: 0 11px;
		margin: 0;
		border: none;
		border-bottom: 2px solid transparent;
		height: 32px;
		line-height: 32px;
	}

	.mh--hotdog-quicklinks-secondary .mh--quicklinks a:hover,
	.mh--hotdog-quicklinks-secondary .mh--quicklinks a:focus {
		border-radius: 0;
		color: #0887DB;
		background-color: #ffffff9e;
		border: none;
		border-bottom: 2px solid #0887DB !important;
	}

	.mh--hotdog-quicklinks-secondary .mh--quicklinks li.main a {
		font-weight: 700;
	}

	@media (max-width: 1000px) {
		.mh--hotdog-quicklinks-secondary  {
			padding-left: 10px;
		}
	}

	/* Product and Collection Widgets */
	.feature-pw2022a .products-container,
	.page-search .products-container,
	.page-collection .products-container {
		margin-bottom: 20px;
	}

	.feature-pw2022a .products-container .product-single-container,
	.feature-pw2022a .products-container .collection-single-container,
	.page-search .products-container .product-single-container,
	.page-search .products-container .collection-single-container,
	.page-collection .products-container .product-single-container,
	.page-collection .products-container .collection-single-container {
		height: 100%;
		border-radius: 10px;
		padding: 15px 20px;
	}

	.feature-pw2022a .products-container .product-single .product-image,
	.feature-pw2022a .products-container .collection-single .collection-image,
	.page-search .products-container .product-single .product-image,
	.page-search .products-container .collection-single .collection-image,
	.page-collection .products-container .product-single .product-image,
	.page-collection .products-container .collection-single .collection-image {
		mix-blend-mode: multiply;
	}

	/* Product Widgets */
	.feature-pw2022a .products-container .product-single-container,
	.page-search .products-container .product-single-container,
	.page-collection .products-container .product-single-container {
		background-color: #f4f5f5;
	}

	.feature-pw2022a .product-related-sales-slider .feature-pw2022a .products-container .product-single-container {
		background-color: #f7f9f9;
		padding:0 15px;
	}

	.feature-pw2022a .products-container .product-single .product-pricerange,
	.page-search .products-container .product-single .product-pricerange,
	.page-collection .products-container .product-single .product-pricerange {
		display: block;
	}

	.feature-pw2022a .products-container .product-single .product-pricerange,
	.feature-pw2022a .products-container .product-single .product-price .bulk,
	.feature-pw2022a .products-container .product-single .product-price s,
	.page-search .products-container .product-single .product-pricerange,
	.page-search .products-container .product-single .product-price .bulk,
	.page-search .products-container .product-single .product-price s,
	.page-collection .products-container .product-single .product-pricerange,
	.page-collection .products-container .product-single .product-price .bulk,
	.page-collection .products-container .product-single .product-price s {
		color: #6b7280;
		font-size: 15px;
	}

	.feature-pw2022a .products-container .product-single .product-title,
	.page-search .products-container .product-single .product-title,
	.page-collection .products-container .product-single .product-title {
		color: #2b2b2b;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: initial;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.feature-pw2022a .products-container .product-single .product-price,
	.feature-pw2022a .products-container .product-single .product-min-price,
	.page-search .products-container .product-single .product-price,
	.page-search .products-container .product-single .product-min-price,
	.page-collection .products-container .product-single .product-price,
	.page-collection .products-container .product-single .product-min-price {
		color: #2b2b2b;
		font-size: 22px;
	}

	.feature-pw2022a .products-container .product-single .product-cta .product-customize,
	.feature-pw2022a .products-container .product-single .product-cta .product-addtocart,
	.page-search .products-container .product-single .product-cta .product-customize,
	.page-search .products-container .product-single .product-cta .product-addtocart,
	.page-collection .products-container .product-single .product-cta .product-customize,
	.page-collection .products-container .product-single .product-cta .product-addtocart {
		color: #275793;
	}

	.feature-pw2022a .products-container .product-single .product-cta .product-outofstock,
	.page-search .products-container .product-single .product-cta .product-outofstock,
	.page-collection .products-container .product-single .product-cta .product-outofstock {
		color: #6A1006;
	}

	.feature-pw2022a .products-container .product-single .product-cta .product-futurestock,
	.page-search .products-container .product-single .product-cta .product-futurestock,
	.page-collection .products-container .product-single .product-cta .product-futurestock {
		color: #035D28;
	}

	.feature-pw2022a .products-container .product-widget-discount,
	.feature-pw2022a .products-container .product-widget-clearance,
	.feature-pw2022a .products-container .product-widget-deal,
	.feature-pw2022a .products-container .product-single-overlay-tag:before,
	.page-search .products-container .product-widget-discount,
	.page-search .products-container .product-widget-clearance,
	.page-search .products-container .product-widget-deal,
	.page-search .products-container .product-single-overlay-tag:before,
	.page-collection .products-container .product-widget-discount,
	.page-collection .products-container .product-widget-clearance,
	.page-collection .products-container .product-widget-deal,
	.page-collection .products-container .product-single-overlay-tag:before {
		top: -16px;
		left: -6px;
	}

	.feature-pw2022a .products-container .product-single-overlay-tag-bestseller:before,
	.page-search .products-container .product-single-overlay-tag-bestseller:before,
	.page-collection .products-container .product-single-overlay-tag-bestseller:before {
		background: #0E1E2B;
	}

	.feature-pw2022a .products-container .product-single-overlay-tag-new:before,
	.page-search .products-container .product-single-overlay-tag-new:before,
	.page-collection .products-container .product-single-overlay-tag-new:before {
		background: #0887DB;
	}

	.feature-pw2022a .products-container .product-widget-clearance,
	.page-search .products-container .product-widget-clearance,
	.page-search .products-container .product-single-overlay-tag-clearance:before,
	.page-collection .products-container .product-widget-clearance,
	.page-collection .products-container .product-single-overlay-tag-clearance:before {
		background: #E8230D;
	}

	.feature-pw2022a .products-container .product-widget-discount,
	.feature-pw2022a .products-container .product-single-overlay-tag-sale:before,
	.page-search .products-container .product-widget-discount,
	.page-search .products-container .product-single-overlay-tag-sale:before,
	.page-collection .products-container .product-widget-discount,
	.page-collection .products-container .product-single-overlay-tag-sale:before {
		background: #06CC58;
	}

	.feature-pw2022a .products-container .product-single-overlay-tag-staff-picks:before,
	.page-search .products-container .product-single-overlay-tag-staff-picks:before,
	.page-collection .products-container .product-single-overlay-tag-staff-picks:before {
		background: #f65701;
	}

	.feature-pw2022a .products-container .product-single-overlay-tag-refurbished:before,
	.page-search .products-container .product-single-overlay-tag-refurbished:before,
	.page-collection .products-container .product-single-overlay-tag-refurbished:before {
		background: #f65701;
	}

	/* Collection Widgets */
	.feature-pw2022a .products-container .collection-single-container,
	.page-search .products-container .collection-single-container,
	.page-collection .products-container .collection-single-container {
		background-color: #f1f5f9;
	}

	.feature-pw2022a .products-container .collection-single-container .collection-meta,
	.page-search .products-container .collection-single-container .collection-meta,
	.page-collection .products-container .collection-single-container .collection-meta {
		padding-bottom: 20px;
	}

	.feature-pw2022a .products-container .collection-single-container .collection-meta:after,
	.page-search .products-container .collection-single-container .collection-meta:after,
	.page-collection .products-container .collection-single-container .collection-meta:after {
		font-size: 14px;
		font-family: 'Montserrat', sans-serif;
		font-weight: normal;
		line-height: 1.3;
		text-align: center;
		position: absolute;
		display: block;
		padding: 4px 17px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		opacity: 0.9;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		content: 'Collection';
		color: #6b7280;
		background: #e2e8f0;
	}

	.feature-pw2022a .products-container .collection-single .collection-single-container .collection-title,
	.page-search .products-container .collection-single .collection-single-container .collection-title,
	.page-collection .products-container .collection-single .collection-single-container .collection-title {
		color: #275793;
	}

	.feature-pw2022a .products-container .collection-single .collection-price,
	.page-search .products-container .collection-single .collection-price,
	.page-collection .products-container .collection-single .collection-price {
		color: #2b2b2b;
	}

	.feature-pw2022a .products-container .collection-single .collection-desc,
	.page-search .products-container .collection-single .collection-desc,
	.page-collection .products-container .collection-single .collection-desc {
		color: #6b7280;
	}

	/* Star Ratings for Product Widgets */
	.products-container .product-price {
		margin-top: 0;
	}

	.products-container .product-price.product-price-overflow-hidden {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: initial;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.page-search .product-rating,
	.page-collection .product-rating {
		display: flex;
		margin-bottom: 10px;
		position: relative;
		left: -5px;
	}

	.product-rating-star,
	.product-rating-star-half,
	.product-rating-star-empty {
		display: block;
		width: 20px;
		height: 20px;
	}

	.product-rating-star {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F29500' height='24' width='24'%3E%3Cpath d='M7.2,19.21l1.42-4.67c0.06-0.2-0.01-0.42-0.19-0.55l-3.63-2.6c-0.39-0.28-0.19-0.9,0.29-0.9h4.51 c0.22,0,0.41-0.14,0.47-0.35l1.45-4.83c0.14-0.47,0.81-0.47,0.95,0l1.45,4.83c0.06,0.21,0.26,0.35,0.47,0.35h4.51 c0.48,0,0.68,0.62,0.29,0.9l-3.63,2.6c-0.17,0.12-0.25,0.34-0.19,0.55l1.42,4.67c0.14,0.46-0.39,0.83-0.77,0.54L12.3,16.9 c-0.18-0.14-0.42-0.14-0.6,0l-3.73,2.84C7.59,20.04,7.06,19.67,7.2,19.21z'/%3E%3C/svg%3E%0A");
	}

	.product-rating-star-half {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F29500' height='24' width='24'%3E%3Cpath d='M12,8.9v5.65c0,0.16,0.07,0.3,0.19,0.4l2.23,1.72l-0.82-2.73c-0.06-0.21,0.01-0.43,0.19-0.55L15.75,12h-2.43 c-0.22,0-0.41-0.14-0.48-0.35L12,8.9z M7.2,19.19l1.42-4.64c0.06-0.21-0.01-0.43-0.19-0.55l-3.59-2.58 c-0.4-0.28-0.19-0.91,0.29-0.91H9.6c0.22,0,0.42-0.15,0.48-0.36l1.44-4.81c0.14-0.48,0.82-0.48,0.96,0l1.44,4.81 c0.06,0.21,0.26,0.36,0.48,0.36h4.47c0.49,0,0.69,0.62,0.29,0.91l-3.59,2.58c-0.17,0.13-0.25,0.35-0.19,0.55l1.42,4.64 c0.14,0.47-0.4,0.84-0.78,0.55l-3.71-2.83c-0.18-0.14-0.43-0.14-0.61,0l-3.71,2.83C7.6,20.03,7.06,19.65,7.2,19.19z'/%3E%3C/svg%3E%0A");
	}

	.product-rating-star-empty {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23F29500' height='24' width='24'%3E%3Cpath d='M9.6,16.65l2.1-1.62c0.18-0.14,0.43-0.14,0.6,0l2.1,1.62l-0.8-2.71c-0.06-0.2,0.02-0.42,0.19-0.54l1.96-1.4h-2.43 c-0.22,0-0.41-0.14-0.47-0.35L12,8.9l-0.84,2.75C11.09,11.86,10.9,12,10.68,12H8.25l1.96,1.4c0.17,0.12,0.25,0.34,0.19,0.54 L9.6,16.65z M7.2,19.21l1.42-4.67c0.06-0.2-0.01-0.42-0.19-0.55l-3.63-2.6c-0.39-0.28-0.19-0.9,0.29-0.9h4.51 c0.22,0,0.41-0.14,0.47-0.35l1.45-4.83c0.14-0.47,0.81-0.47,0.95,0l1.45,4.83c0.06,0.21,0.26,0.35,0.47,0.35h4.51 c0.48,0,0.68,0.62,0.29,0.9l-3.63,2.6c-0.17,0.12-0.25,0.34-0.19,0.55l1.42,4.67c0.14,0.46-0.39,0.83-0.77,0.54L12.3,16.9 c-0.18-0.14-0.42-0.14-0.6,0l-3.73,2.84C7.59,20.04,7.06,19.67,7.2,19.21z'/%3E%3C/svg%3E%0A");
	}

	/* Brand for Product Widgets */
	.feature-pw2022a .product-brand,
	.page-search .product-brand,
	.page-collection .product-brand {
		display: block;
		color: #555;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0;
	}

	lite-youtube {
		border-radius: 5px;
	}

	/* sitewide banner -- moved to file */

/* enabled only when the banner is active */
.sub-sitewide-banner,
.sale-sitewide-banner {
	display:none;
}

/* modal */
	.css--modal-body {
		padding:0;
		max-height: calc(100vh - 40px);
		width: 675px;
	}

	.css--modal-body a {
		font-weight:bold;
		color: #3598DB;
		text-decoration: underline;
	}

	.css--modal-body a:hover {
		color: #344A5F;
	}

	.css--modal-header,
	.css--modal-content,
	.css--modal-footer {
		background: #fafafa;
	}

	.css--modal-header {
		padding:20px 20px 5px 20px;
		border-top: 3px #3598DB solid;
		border-bottom:none;
	}

	.css--modal-close:before,
	.css--modal-close:after {
		background-color: #9da8af;
		content: "";
		display: block;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(45deg);
		transform-origin: center center;
	}

	.css--modal-close:before {
		height: 2px;
		width: 50%;
	}

	.css--modal-close:after {
		height: 50%;
		width: 2px;
	}

	.css--modal-close:hover,
	.css--modal-close:focus {
		background-color: #e0e0e0;
	}

	.css--modal-close:active {
		background-color: #c7c7c7;
	}

	.css--modal-content {
		box-shadow: none;
		border-radius:5px;
	}

	.css--modal-footer {
		margin-top:0;
		text-align: right;
		padding: 10px 15px;
		border-top:none;
		display:flex;
		flex-direction:row-reverse;
	}

	@media screen and (min-width: 767px) {
		.css--modal-footer {
			padding:14px 20px;
		}
	}

	.css--modal-footer .form-btn {
		margin-left:7px;
	}

	.css--modal-body {
		padding:0;
		padding: 5px 20px 0;
	}

	.css--modal-body a {
		font-weight:bold;
		color: #3598DB;
		text-decoration: underline;
	}

	.css--modal-body a:hover {
		color: #344A5F;
	}

	.css--modal {
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		align-items: center;
		display: none;
		justify-content: center;
		overflow: hidden;
		position: fixed;
		z-index: 1000;
	}

	.css--modal.is-active {
		display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
		display: -ms-flexbox;  /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
		display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
		-webkit-overflow-scrolling: touch;
		z-index: 3000;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
	}

	.css--modal-background {
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		background-color: rgba(43, 61, 79, 0.85);
	}

	.css--modal-content,
	.css--modal-card {
		margin: 0;
		max-height: 100%;
		overflow: auto;
		position: relative;
		width: 100%;
		border-top:0;
	}

	@media screen and (min-width: 769px) {
		.css--modal-content,
		.css--modal-card {
			margin: 0 auto;
			max-height: calc(100vh - 40px);
			width: 675px;
		}
	}

	.css--modal-title {
		font-size: 15px;
		color:#3e3e3e;
	}

	@media screen and (min-width: 769px) {
		.css--modal-title {
			font-size: 18px;
		}
	}

	.css--modal-close {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		border: none;
		border-radius: 290486px;
		cursor: pointer;
		display: inline-block;
		flex-grow: 0;
		flex-shrink: 0;
		font-size: 1rem;
		max-height: 20px;
		max-width: 20px;
		min-height: 20px;
		min-width: 20px;
		position: absolute;
		vertical-align: top;
		background: none;
		height: 40px;
		right: 20px;
		top: 20px;
		width: 40px;
	}

	.css--modal-close:before,
	.css--modal-close:after {
		background-color: #9da8af;
		content: "";
		display: block;
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(45deg);
		transform-origin: center center;
	}

	.css--modal-close:before {
		height: 2px;
		width: 50%;
	}

	.css--modal-close:after {
		height: 50%;
		width: 2px;
	}

	.css--modal-close:hover,
	.css--modal-close:focus {
		background-color: #e0e0e0;
	}

	.css--modal-close:active {
		background-color: #c7c7c7;
	}

	a.form-btn,
	button.form-btn,
	.form-btn {
		border: 1px solid transparent;
		background:#efefef;
		border-color: #a9a9a9;
		background-image: linear-gradient(to bottom, #efefef, #e4e4e4);
		-webkit-border-radius: 2px;
		border-radius: 3px;
		color: #616161;
		font-size: 13px;
		padding: 10px 15px;
		text-decoration: none;
		cursor:pointer;
		-moz-user-select: none;
		-webkit-user-select: none;
		display: inline-block;
		position:relative;
	}

	button.form-btn:hover,
	a.form-btn:hover,
	.form-btn:hover {
		text-decoration:underline;
	}

	button.form-btn.form-btn-remove,
	.form-btn.form-btn-remove {
		background-image: linear-gradient(to bottom, #E64D3D, #ad3124);
		border-color: transparent;
		background: #E64D3D;
		color:#fff;
	}

	button.form-btn.form-btn-plain,
	.form-btn.form-btn-plain {
		background: #929292;
		background-image: linear-gradient(to bottom, #929292, #888888);
		border-color: #828282;
		color:#fff;
	}

	.form-btn:active,
	button.form-btn:active {
		bottom: -1px;
		top: 1px;
		left: 1px;
	}

	a.form-btn.form-btn-main,
	button.form-btn.form-btn-main,
	.form-btn.form-btn-main {
		color: #fff;
		border-color: #287EB5;
		background: #287EB5;
		background-image: linear-gradient(to top, #287EB7, #379dde);
	}

	a.form-btn.form-btn-main:hover,
	button.form-btn.form-btn-main:hover,
	.form-btn.form-btn-main:hover {
		color: #fff;
		background: #344A5F;
		border-color: #344A5F;
		background-image: linear-gradient(to bottom, #287EB7, #379dde);
	}

	button.form-btn.disabled:active,
	.form-btn.disabled:active {
		bottom:0;
		top:0;
		left:0;
	}

	button.form-btn.disabled,
	.form-btn.disabled {
		border: 1px solid transparent;
		background: linear-gradient(to bottom, #b9b9b9, #c1c1c1);
		cursor: default;
	}

	.css--modal-body-columns-2 {
		grid-column-gap: 20px;
		grid-template-columns: 1fr 1fr;
	}

	@media (min-width: 560px) {
		.css--modal-body-columns-2 {
			display: grid;
		}
	}

	.css--modal-shake {
		-webkit-animation: kf_shake 0.4s 1 linear;
		-moz-animation: kf_shake 0.4s 1 linear;
		-o-animation: kf_shake 0.4s 1 linear;
	}
	@-webkit-keyframes kf_shake {
		0% { -webkit-transform: translate(15px); }
		20% { -webkit-transform: translate(-15px); }
		40% { -webkit-transform: translate(10px); }
		60% { -webkit-transform: translate(-10px); }
		80% { -webkit-transform: translate(5px); }
		100% { -webkit-transform: translate(0px); }
	}
	@-moz-keyframes kf_shake {
		0% { -moz-transform: translate(15px); }
		20% { -moz-transform: translate(-15px); }
		40% { -moz-transform: translate(10px); }
		60% { -moz-transform: translate(-10px); }
		80% { -moz-transform: translate(5px); }
		100% { -moz-transform: translate(0px); }
	}
	@-o-keyframes kf_shake {
		0% { -o-transform: translate(15px); }
		20% { -o-transform: translate(-15px); }
		40% { -o-transform: translate(10px); }
		60% { -o-transform: translate(-10px); }
		80% { -o-transform: translate(5px); }
		100% { -o-origin-transform: translate(0px); }
	}

	#jsDynamicRequestQuoteModal .form-btn-main {
		width:100%;
		display: inline-block;
		margin-top:15px;
		margin-bottom: 15px
	}

	#jsDynamicRequestQuoteModal .css--modal-content,
	#jsDynamicRequestQuoteModal .css--modal-body {
		max-width: 545px;
		width: 100%;
	}

	.product-request-quote .form-btn-main {
		display: inline-block;
		text-transform: uppercase;
		font-weight: bold;
		font-family: 'Montserrat', sans-serif;
		width: 100%;
		margin-top: 10px;
	}

	.product-request-quote .field-input {
		margin-bottom:15px;
	}

	.request-quote-open svg {
		display: inline-flex;
		width: 25px;
		height: 14px;
		margin-top: 0;
		fill: #0B5C2A;
	}

	.request-quote-open {
		width:100%;
		background-color: #E8FAEF;
		color: #0B5C2A;
		padding:10px 10px;
	}

	.css--modal-body .request-quote-open {
		margin-bottom:10px;
	}

	.request-quote-open a,
	.css--modal-body .request-quote-open a {
		color: #053719;
		text-decoration: underline;
	}

	.product-request-quote-open svg {
		display: inline-flex;
		width: 25px;
		height: 14px;
		margin-top: 0;
		fill: #0B5C2A;
	}

	/* modal error messages */
	.status-message {
		padding: 10px 20px;
		background: #FBFBFD;
		border-radius:5px;
		display:block;
		margin-bottom:10px;
	}

	.status-message:empty {
		display:none;
	}

	.status-message.status-success {
		color: #0B5C2A;
		background-color: #E8FAEF;
	}

	.status-message.status-error {
		color: #69120C;
		background-color: #FCEBE9;
	}

	.status-message a {
		font-weight: bold;
	}

	.search-autocomplete {
		position: absolute;
		background: white;
		display: block;
		border: 1px #c9c9c9 solid;
		border-top: none;
		border-radius: 0 0 5px 5px;
		z-index: 300;
		margin: 0;
		overflow: hidden;
		transition: opacity .2s ease-in, filter .2s ease-in;
		/* sits under the field, clear of the ring it paints when focused */
		top: calc(var(--nav-search-field-height) + var(--nav-search-focus-ring));
		/* a floor, not a layout tool: whatever the panel is anchored to, it can never
		   hand the page a sideways scroll again -- worst case it clips */
		max-width: 100vw;
		width:100%;
	}

	/* The panel hangs off the search bar now, so one offset (input height + focus ring)
	   holds at every width -- the 106px and 46px overrides existed because 770-999px
	   measured from the viewport and 1000px+ from .nav. Desktop keeps a content-sized
	   panel, but min-width stops it rendering NARROWER than the field it belongs to:
	   above ~1150px the field outgrows the 500px row floor, and the panel used to stay
	   502px, sitting under a much wider input. */
	@media screen and (min-width: 770px) {
		.search-autocomplete {
			width:unset;
			min-width:100%;
		}
	}

	.search-autocomplete:empty {
		display: none;
	}

	.search-autocomplete a:not(.search-autocomplete-search-all-btn) {
		width:100%;
		display:grid;
		grid-column-gap:15px;
		color: #0E1E2B;
		min-width:500px;
		border-bottom: 1px solid #eee;
		align-items: center;
	}

	/* the 500px floor overflows every phone-width dropdown -- the rows kept their
	   right-hand side clipped by the panel's overflow:hidden instead of fitting */
	@media (max-width: 770px) {
		.search-autocomplete a:not(.search-autocomplete-search-all-btn) {
			min-width:0;
		}
	}

	a.search-autocomplete-suggestion {
		display: grid;
		grid-template-columns: 20px 1fr;
		padding:5px 10px;
	}

	a.search-autocomplete-sku {
		display: grid;
		grid-template-columns: 30px 1fr;
		padding:7px 10px;
	}

	a.search-autocomplete-collection {
		display: grid;
		grid-template-columns: 30px 1fr;
		padding:7px 10px;
	}

	.search-autocomplete a:hover,
	a.search-autocomplete-highlight,
	.search-autocomplete-highlight {
		background:#EAEDF0;
		text-decoration: none;
	}

	.search-autocomplete a:hover .search-autocomplete-title,
	.search-autocomplete-highlight .search-autocomplete-title {
		text-decoration: underline;
	}

	.search-autocomplete-heading {
		text-transform: uppercase;
		color: #8597A6;
		font-size:9px;
		display:block;
		padding:5px 10px;
		letter-spacing:0.1em;
		background: #F9F9F9;
	}

	.search-autocomplete-image {
		width: 30px;
		height: 30px;
		border-radius:5px;
		background: #ffffff;
		display:block;
	}

	.search-autocomplete-image img {
		border:1px solid #fff;
		border-radius:3px;
	}

	.search-autocomplete-icon {
		padding:3px;
		display: flex;
		justify-content: center;
	}

	.search-autocomplete-collection-description {
		font-size:11px;
		color: #868e93;
		text-decoration: none;
	}

	.search-autocomplete a:hover .search-autocomplete-collection-description {
		text-decoration: none;
	}

	.search-autocomplete-icon-search-svg {
		width: 20px;
		height: 20px;
		margin: -1px 0 0 -1px;
	}

	.search-autocomplete-footer {
		font-size:12px;
	}

	.search-autocomplete-search-all-btn {
		width:100%;
		display:block;
		text-decoration: underline;
		padding: 10px 12px 10px 10px;
		background: #F9F9F9;
		color: #636363;
	}

	.search-autocomplete-search-all-btn:hover {
		color: #636363;
		text-decoration: underline;
	}

/* .mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals {
	background: linear-gradient(51deg, #1A72F8 3%, #104186 98%) fixed;
	border: 1px solid #1A72F8;
	border-bottom: none;
	border-radius: 3px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-right: 10px;
	transition: background 0.3s ease;
}

.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals:hover {
	background: linear-gradient(272deg, #1A72F8 3%, #104186 98%) fixed;
}

.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals a {
	color: #f0fff0;
}

.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-pill {
	display: none;
}

.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals a:hover, 
.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals a:focus {
	background: none;
	border: 1px solid transparent;
	border-bottom: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	text-decoration: none;
	color: #fff;
}

@keyframes cyber-glitch-1 {
    0%, 88%, 100% { 
        transform: translate(0); 
        opacity: 0; 
    }
    89% { 
        transform: translate(-4px, 2px); 
        opacity: 0.8; 
    }
    90% { 
        transform: translate(2px, -2px); 
        opacity: 0.8; 
    }
}

@keyframes cyber-glitch-2 {
    0%, 82%, 100% { 
        transform: translate(0); 
        opacity: 0; 
    }
    84% { 
        transform: translate(3px, -3px); 
        opacity: 0.7; 
    }
    86% { 
        transform: translate(-2px, 2px); 
        opacity: 0.7; 
    }
}

.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals a {
    position: relative;
    display: inline-block;
    animation: cyber-glow 3s ease-in-out infinite;
}

.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals a::before,
.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals a::after {
    content: attr(data-text);
    position: absolute;
    left: 5px;
    top: 5px;
}

.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals a::before {
    color: #ff00ff;
    animation: cyber-glitch-1 1s infinite;
    filter: blur(1px);
}

.mh--hamburger-quicklinks-bar .mh--quicklinks .nav-snake-deals a::after {
    color: #00ffff;
    animation: cyber-glitch-2 2s infinite;
    filter: blur(1px);
} */
/* Admin-only product-page delivery estimate: light prefix text, bold dates */
.product-delivery-estimate {
    font-weight: 100;
    font-size: 13px;
    line-height: 1.4;
    /* margin-top: 4px; */
}

.product-delivery-estimate strong {
    font-weight: 700;
}

/* Admin-only "Deliver to {city} {zip}" line — a blue link that opens the zipcode modal */
.product-deliver-to {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    cursor: pointer;
    color: #2980b9;
    font-weight: 100;
    font-size: 13px;
}

.product-deliver-to:hover {
    text-decoration: underline;
}

.product-deliver-to strong {
    font-weight: 700;
}

.deliver-to-pin {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.deliver-to-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #b9c4cd;
    border-top-color: #2980b9;
    border-radius: 50%;
    flex-shrink: 0;
    animation: deliver-to-spin 0.6s linear infinite;
}

@keyframes deliver-to-spin {
    to { transform: rotate(360deg); }
}

/* Opt-in arrow variants for mh--carousel.
   Usage: add ONE modifier class next to mh--carousel-scroller on the embed —
   either mh--carousel-scroller--arrows-panel (tall floating white panel) or
   mh--carousel-scroller--arrows-square (small bordered square). With no
   modifier the page's own arrow styling (the grey full-height slab) applies
   unchanged. The JS class contract is unchanged: mh--carousel-arrow-hidden and
   mh--carousel-arrow-disabled are still toggled by the carousel script.
   Both variants take the arrows out of flow and overlay them on the strip
   edges, so a scroller opting in must not rely on the arrows occupying flex
   width. Every arrow selector below carries the .mh--carousel-scroller.<modifier>
   compound so it outweighs the page-scoped rules (.page-home .mh--carousel-arrow
   and friends) that would otherwise win on source order. The scroller rule that
   follows is the one exception: it only ties the page-scoped
   .page-X .mh--carousel-scroller rules at (0,2,0); it applies only because no
   page stylesheet declares position on the scroller — if one ever does, that
   later-loading sheet wins the tie. */
.mh--carousel-scroller.mh--carousel-scroller--arrows-panel,
.mh--carousel-scroller.mh--carousel-scroller--arrows-square {
	position: relative;
}

.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow,
.mh--carousel-scroller.mh--carousel-scroller--arrows-square .mh--carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Must clear the product-card badge tier (z-index: 10 on
	   .product-tags-stacked and the .product-single-overlay-* :before chips),
	   which shares the strip's stacking context. */
	z-index: 11;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	cursor: pointer;
	box-sizing: border-box;
	/* Drops the drop shadow the deals/gift-guide/blue-friday/black-friday pages
	   put on .mh--carousel-arrow; the panel re-adds its own shadow below. */
	box-shadow: none;
}

.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow.mh--carousel-arrow-disabled,
.mh--carousel-scroller.mh--carousel-scroller--arrows-square .mh--carousel-arrow.mh--carousel-arrow-disabled {
	opacity: 0.3;
	cursor: default;
	/* The variants overlay the arrows on top of the strip, so a disabled arrow
	   would still swallow clicks and drags aimed at the card beneath it. Strips
	   load with prev disabled at scrollLeft 0, which parks a dead 36-48px hit
	   target over the first card until the user scrolls. */
	pointer-events: none;
}

.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow.mh--carousel-arrow-hidden,
.mh--carousel-scroller.mh--carousel-scroller--arrows-square .mh--carousel-arrow.mh--carousel-arrow-hidden {
	display: none;
}

/* Variant: tall floating panel */
.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow {
	width: 48px;
	height: 80%;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow-prev {
	left: 0;
}

.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow-next {
	right: 0;
}

/* Scale up the inline 8x12 chevron to suit the taller panel */
.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow svg {
	width: 16px;
	height: 24px;
}

/* background is restated so the page hover rules (background: #EEF3FA) don't
   tint the panel. */
.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):hover,
.mh--carousel-scroller.mh--carousel-scroller--arrows-panel .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):active {
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Variant: minimal bordered square */
.mh--carousel-scroller.mh--carousel-scroller--arrows-square .mh--carousel-arrow {
	width: 36px;
	height: 36px;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 6px;
}

.mh--carousel-scroller.mh--carousel-scroller--arrows-square .mh--carousel-arrow-prev {
	left: 8px;
}

.mh--carousel-scroller.mh--carousel-scroller--arrows-square .mh--carousel-arrow-next {
	right: 8px;
}

.mh--carousel-scroller.mh--carousel-scroller--arrows-square .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):hover,
.mh--carousel-scroller.mh--carousel-scroller--arrows-square .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):active {
	border-color: #999;
	background: #fafafa;
}

/* ==========================================================================
   Toast notifications (Toastify)

   Overrides the vendored toastify block in public-plugins.css, which is
   loaded ahead of this file in include/header.html. snackbarNotify() in
   public-scripts.js still supplies background + text colour inline, one pair
   per status; everything structural is owned here.
   ========================================================================== */

.toastify {
	display: flex;
	align-items: center;
	/* space-between only bites on mobile, where the toast is stretched to the
	   viewport and the close button would otherwise sit mid-bar next to the
	   text. Desktop toasts are shrink-to-fit, so there is no free space. */
	justify-content: space-between;
	gap: 12px;
	/* Toastify wires an onClick handler onto every toast, so the vendored rule
	   sets cursor: pointer unconditionally. Only the toasts snackbarNotify gave
	   a destination actually navigate anywhere. */
	cursor: default;
	/* The vendored rule caps every toast at calc(50% - 20px): half a 1440px
	   window for a one-line message on desktop, and only ~175px on a 390px
	   phone, which wraps "Item Added to Cart" onto three lines. */
	max-width: 420px;
	padding: 14px 16px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
	/* Long SKU names and pasted URLs shouldn't punch out of the toast. */
	overflow-wrap: anywhere;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
	/* Clears the iOS home indicator. Toastify writes `bottom` as an inline
	   style from reposition(), so the extra offset has to come from a margin
	   rather than from `bottom` itself. */
	margin-bottom: env(safe-area-inset-bottom, 0px);
}

.toastify.toastify--linked {
	cursor: pointer;
}

.toast-close {
	/* Vendored: padding 0 5px at opacity .4, which is a ~10px wide, washed-out
	   tap target sitting flush against the message text. */
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	/* Negative margins keep the enlarged hit area from driving the toast's
	   height past the text line. */
	margin: -4px -4px -4px 0;
	font-size: 13px;
	line-height: 1;
	border-radius: 4px;
	opacity: 0.8;
	transition: opacity 0.15s;
}

.toast-close:hover,
.toast-close:focus {
	opacity: 1;
}

.toast-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

@media only screen and (max-width: 768px) {
	/* Full-bleed bar with a gutter. The vendored stylesheet only does this
	   below 360px, so every phone from 361px up got the 50% cap. The doubled
	   class beats both the vendored .toastify-right and its 360px override
	   without needing !important. */
	.toastify.toastify-left,
	.toastify.toastify-right {
		left: 12px;
		right: 12px;
		/* the 360px override sets these to auto */
		margin-left: 0;
		margin-right: 0;
		max-width: none;
	}
}