@charset "utf-8"; /* global */

.mh--page-container {
	max-width: 1800px;
}

/* general layout */

/* default */

.page-description {
	border-radius:5px;
	width:100%;
	color:#2C3D4F;
	font-size:13px;
	border: 1px solid #e2e9e9;
	padding: 0;
	margin:10px 0;
}

.page-collection.hide-collection-price-range .collection-single .collection-price {
	display:none;
}

.page-collection.has-banner .page-description {
	margin:0 0 20px;
}

@media (min-width: 520px) {
	.page-description:has(.page-image) {
		display: grid;
		grid-template-columns: 175px 1fr;
	}
}

/* The products control bar (filter summary, On Sale / Clearance toggles, sort) sits right
   after the heading box and is drawn as its bottom row: no gap, shared edge, the heading's
   bottom border as the divider. It stays a sibling so filter mode's hide/stick of the two
   elements needs no JS awareness of the merge. Cached pages without the .page-controls
   class render the bar standalone under .main with the plain .box look. */
.page-collection .page-description:has(+ .page-controls:not(.page-controls-hidden)) {
	margin-bottom: 0;
	border-radius: 5px 5px 0 0;
}

/* A page with too few products to sort or filter keeps the bar in the markup and hidden, so the
   sidebar collection filter still has somewhere to put its result count, its tags and Clear
   Filters (show_page_controls in public_page_product_collection.py). Hidden by class rather than
   inline display because the filter reveals the bar with an inline display:flex, which has to win.
   The heading box above keeps its own bottom edge and margin in this state - the :has() test above
   passes only over a bar that is actually drawn. */
.js-product-title.page-controls-hidden {
	display: none;
}

/* Styled on its own rather than as a .box - that class brings display:block, a 15px top
   margin and a full frame, all of which would need undoing here. public-collections.js
   toggles the bar with .hide() / .css('display', 'flex'); .box--title supplies its padding
   and type. */
.page-controls {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 0 5px;
	color: #2C3D4F;
	background-color: #F7F9F9;
	border: 1px solid #e2e9e9;
	border-top: 0;  /* the heading box's bottom border is the divider */
	border-radius: 0 0 5px 5px;
}

/* Filter mode hides the heading box and sticks the bar over the grid (public-collections.js),
   so the bar gets its full frame back */
.page-controls.collection-sticky {
	border-top: 1px solid #e2e9e9;
	border-radius: 5px;
}

.page-collection ul.breadcrumb,
.page-collection ol.breadcrumb {
	margin-top: 0;
	margin-bottom: 10px;
}

/* The trail sits at the top of the heading box, sized to match the product page's: 11px,
   no frame padding of its own. Rules are scoped to the .page-breadcrumb wrapper so they
   outweigh the generic .page-collection .breadcrumb sizing below without reaching for
   !important. */
.page-collection .page-breadcrumb {
	margin: 4px 0 6px;
}

.page-collection .page-breadcrumb .breadcrumb {
	font-size: 11px;
	padding: 0;
	margin: 0;
}

.page-collection .page-breadcrumb .breadcrumb a,
.page-collection .page-breadcrumb .breadcrumb > .active {
	font-size: 11px;
}

.page-collection .breadcrumb a {
	font-weight:normal;
	text-decoration: none;
	font-size:12px;
	color: #565959;
}

.page-collection .breadcrumb a:hover {
	text-decoration:underline;
}

.page-description a {
	font-weight: bold;
	color: #287FB8;
	text-decoration:underline;
}

.page-description a:hover {
	color: #344A5F;
}

.page-description li {
	font-weight:normal;
	text-decoration: none;
	font-size:12px;
}

.page-collection .breadcrumb>.active {
	color: #7a7a7a;
	padding: 0 4px;
}

.page-collection .breadcrumb {
	padding: 0 0 10px 0;
	margin-bottom:10px;
	background-color: transparent;
}

	.page-collection .breadcrumb li {
		display:none;
	}

	.page-collection .breadcrumb>li+li:before {
		content: "\2039";
		color: #a7a7a7;
		padding: 0 5px;
	}

	.page-collection .breadcrumb li:nth-last-child(2) {
		display:inline-block;
	}

	@media (min-width: 1000px) {
		.page-collection .breadcrumb li {
			display:inline-block;
		}

		.page-collection .breadcrumb>li+li:before {
			content: "/\00a0";
		}
	}

.page-title {
	display:block;
	text-transform: none;
}

.page-title h1 {
	font-family: 'Montserrat', sans-serif;
	font-size:18px;
	font-weight:bold;
	margin:0 0 9px;
	color:#2C3D4F;
	display:block;
}

.page-title h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size:16px;
	margin:0 0 10px;
	color:#2C3D4F;
	display:block;
}

.page-image {
	width:100%;
	max-width:185px;
	display:none;
}

@media (min-width: 520px) {
	.page-image {
		display: inline-block;
	}
}

@media (min-width: 768px) {
	.page-image {
		margin:0;
	}
}

.page-image img {
	max-width:100%;
	border-radius:5px;
}

.page-seo {
	display: block;
	background-color: #F7F9F9;
	border-left: 2px solid #2980b9;
	padding:10px 20px 20px;
	width:100%;
}

@media (min-width: 1200px) {
	.page-seo {
		padding: 15px 25px;
	}
}

/* Compact heading: a collection with no description of any kind (see compact_heading in
   public_page_product_collection.py) has nothing to fill the tall row the 175px widget image
   builds, so the whole heading collapses to a short bar - breadcrumb, title, and a 75px image -
   sitting directly on top of the products control bar. Everything below the heading is untouched. */
.collection-heading-compact .page-seo {
	display: flex;
	align-items: center;
	padding: 8px 15px;
}

@media (min-width: 1200px) {
	.collection-heading-compact .page-seo {
		padding: 8px 20px;
	}
}

.collection-heading-compact .page-title {
	width: 100%;
}

/* The breadcrumb and title carry the row on their own here, so their stacked bottom spacing
   (10px padding + 10px margin under the breadcrumb, 9px under the h1) comes off. */
.collection-heading-compact .breadcrumb,
.collection-heading-compact ol.breadcrumb,
.collection-heading-compact ul.breadcrumb {
	padding-bottom: 0;
	margin-bottom: 4px;
}

.collection-heading-compact .page-title h1 {
	margin: 0;
}

.collection-heading-compact .page-image {
	max-width: 75px;
	align-self: center;
	margin-left: 5px;
}

@media (min-width: 520px) {
	.collection-heading-compact .page-description:has(.page-image) {
		grid-template-columns: 85px 1fr;
	}
}

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

.page-read-content a,
.secondary-content a {
	color: #287FB8;
	text-decoration:underline;
}

.page-read-content a:hover,
.secondary-content a:hover {
	color: #3498DB;
}

.page-seo h2 {
	font-size: 17px;
}

.page-seo h3 {
	font-size: 15px;
}

.page-seo h4 {
	font-size: 13px;
}

.page-seo h5 {
	font-size: 13px;
}

.page-read {
	/*max-height: 120px;*/
	position: relative;
	/*overflow: hidden;*/
}

.page-read-cta {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: left;
	margin: 0;
	padding: 70px 0 5px 0;
	font-family: 'Roboto', sans-serif;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), #f7f9f9);
}

a.cta,
.cta {
	display: inline-block;
	background-color: #2980B9;
	color: #fff;
	padding: 5px 16px;
	border-radius: 3px;
	text-decoration:none;
}

.page-banner-desktop img {
	width:100%;
	aspect-ratio: 6 / 1;
}

.page-collection .page-banner-mobile {
	display:none;
	aspect-ratio: 5 / 3;
}

@media screen and (max-width: 960px) {
	.page-collection  .page-banner-desktop.page-banner-has-mobile {
		display:none;
	}

	.page-collection .page-banner-mobile {
		display:block;
	}
}

	/* override max width */
	.container {
		max-width:1800px;
	}

	.collection-page {
		max-width:100%;
		font-family: 'Roboto', sans-serif;
		margin-bottom:30px;
		*zoom: 1;
	}

	.collection-page:before { /*clearfix for collection page */
		display: table;
		content: "";
		line-height: 0;
	}

	.collection-page:after { /*clearfix for collection page */
		display: table;
		content: "";
		line-height: 0;
		clear: both;
	}

	/* collection headers */

	.collection-page .collection-masthead {
		background-color: #36A9E1;
		color: #fff;
		padding:15px 40px;
		border-radius:3px;
		background-size:cover;
	}

	.collection-page .collection-masthead.collection-masthead-green {
		background: #27AF60;
	}

	/* for default_group.html */

	.page-collection .page-header,
	.default-group .page-header {
		margin:0;
	}

	.page-collection .page-header h1,
	.default-group h1 {
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		color: #065798;
		text-transform: uppercase;
		font-size:22px;
		margin-top: 15px;
		margin-bottom: 5px;
	}

	/* masthead style 1 -- bg image and subnav */

	.collection-page .collection-masthead-hero .gradient {
		padding: 200px 60px 15px;
		background-image: -webkit-gradient(linear, center top, center bottom, color-stop(0, transparent), color-stop(60%, transparent), color-stop(100%, rgba(0, 0, 0, 0.95)) );
		background-image: -webkit-linear-gradient( top, transparent, transparent 60%, rgba(0, 0, 0, 0.95) 100% );
		background-image: -moz-linear-gradient( top, transparent, transparent 60%, rgba(0, 0, 0, 0.95) 100% );
		background-image: -ms-linear-gradient( top, transparent, transparent 60%, rgba(0, 0, 0, 0.95) 100% );
		background-image: -o-linear-gradient( top, transparent, transparent 60%, rgba(0, 0, 0, 0.95) 100% );
	}

	.collection-page .collection-masthead-hero h1 {
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		font-size:30px;
	}

	.collection-page .collection-masthead-hero h1,
	.collection-page .collection-masthead-hero p {
		color:#fff;
		text-align:center;
	}

	.collection-page .collection-masthead-hero p {
		font-size: 15px;
	}

	.collection-page .collection-masthead-hero a {
		color:#fff;
		font-weight:bold;
		padding:3px 12px;
		border-radius:3px;
		border:2px solid #fff;
		margin-left:5px;
	}

	.collection-page .collection-masthead-hero .nav {
		display:block;
		margin-bottom:10px;
	}

	.collection-page .collection-masthead-hero .nav a {
		display:inline-block;
		margin:0;
		margin-bottom:-5px;
		background:#fff;
		color: #333;
		padding:10px 30px;
	}

	.collection-page .collection-masthead-hero .nav li.active a {
		border-bottom: 2px solid #E74D3C;
	}

	.collection-page .collection-masthead-hero .nav li a {
		border: #F7F9F9 2px solid;
	}

	.collection-page .collection-masthead-hero .nav li:hover {
		background:inherit;
	}

	.collection-page .products-container {
		margin-top:20px;
	}

	/*  subnav */

	.collection-page .subnav a:first-child {
		border-top-right-radius: 4px;
		border-top-left-radius: 4px;
	}

	.collection-page .subnav a {
		position: relative;
		color: #555;
		display: block;
		padding: 10px 15px;
		margin-bottom: -1px;
		background-color: #fff;
		border: 1px solid #F7F9F9;
	}

	.collection-page .subnav a:hover {
		background: #F7F9F9;
	}

	/* callout boxes */

	.collection-page .callout h3 {
		margin-top: 0;
	}

	.collection-page .callout {
			padding: 30px;
			border-radius: 3px;
			background:rgb(247, 249, 249);
		}

	.collection-page .callout-dark {
		background: #344A5F;
		color: #fff;
	}

	.collection-page .callout-green {
		background: #2ECC70;
		color: #fff;
	}

	.collection-page .callout-red {
		background: #E74D3C;
		color: #fff;
	}

	.collection-page .callout-orange {
		background: #F39C0F;
		color: #fff;
	}

	.collection-page .callout-blue {
		background: #3498DB;
		color: #fff;
	}

	.collection-page .callout-outline {
		background: transparent;
	}

	.collection-page .callout img {
		border-radius: 3px;
		max-width:100%;
		width:100%;
		margin:20px 0;
	}

	@media (min-width: 768px) {
		.collection-page .callout img {
			margin:10px 15px 10px 15px;
			width:auto;
		}
	}


	/* content page font layout */

	.collection-page h1,
	.collection-page .h1,
	.collection-page h2,
	.collection-page .h2,
	.collection-page h3,
	.collection-page .h3,
	.collection-page h4,
	.collection-page .h4,
	.collection-page h5,
	.collection-page .h5 {
		font-family:'Roboto';
	}

	.collection-page .collection-header h1,
	.collection-page .collection-masthead h1,
	.collection-page .title {
		font-size:22px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		word-wrap: normal;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.bold {
		font-weight: bold;
	}

	.collection-title-default {
		text-transform: uppercase;
		color: #065798;
		margin-top:10px;
	}

	.table-striped>tbody>tr:nth-child(odd)>td,
	.table-striped>tbody>tr:nth-child(odd)>th {
			background: #F7F9F9;
	}

	.table>thead>tr>th,
	.table>tbody>tr>th,
	.table>tfoot>tr>th,
	.table>thead>tr>td,
	.table>tbody>tr>td,
	.table>tfoot>tr>td {
		border-color: #ECF0F1;
	}

	/* breadcrumbs */

	.collection-page .breadcrumb {
		font-size: 13px;
		background: #f7f9f9;
		margin-bottom:0;
	}

	.collection-page .collection-masthead .breadcrumb {
		background: transparent;
		padding: 8px 15px 8px 0;
	}

	.collection-page .collection-masthead .breadcrumb a {
		color: #ffffff;
	}

	.collection-page .collection-masthead .breadcrumb>li+li:before {
		color: #8acff1;
	}

	.collection-page .collection-masthead .breadcrumb>.active {
		color: #afe5ff;
	}

	.collection-page .collection-masthead.collection-masthead-green .breadcrumb>li+li:before {
		color: #ABEBC6;
	}

	.collection-page .collection-masthead.collection-masthead-green .breadcrumb>.active {
		color: #ABEBC6;
	}

	.collection-page .collection-masthead.collection-masthead-orange .breadcrumb>li+li:before {
		color: #FAD79F;
	}

	.collection-page .collection-masthead.collection-masthead-orange .breadcrumb>.active {
		color: #FAD79F;
	}

	.collection-page .collection-masthead.collection-masthead-red .breadcrumb>li+li:before {
		color: #F5B8B1;
	}

	.collection-page .collection-masthead.collection-masthead-red .breadcrumb>.active {
		color: #F5B8B1;
	}

	.collection-page .collection-masthead.collection-masthead-dark .breadcrumb>li+li:before {
		color: #AEB7BF;
	}

	.collection-page .collection-masthead.collection-masthead-dark .breadcrumb>.active {
		color: #AEB7BF;
	}

	/* responsive videos */

	.collection-page .video-container {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}

	.collection-page .video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* filament pages */

		/* when resizing page, display only certain amount of products */
		@media (max-width: 568px) {
			.page-landing-filaments .product-single.product-loaded:not(:empty):not(:nth-child(-n+1)) {
				display:none !important;
			}
		}

		@media (max-width: 915px) {
			.page-landing-filaments .product-single.product-loaded:not(:empty):not(:nth-child(-n+2)) {
				display:none !important;
			}
		}

		@media (max-width: 1200px) {
			.page-landing-filaments .product-single.product-loaded:not(:empty):not(:nth-child(-n+3)) {
				display:none !important;
			}
		}

		@media (max-width: 1400px) {
			.page-landing-filaments .product-single.product-loaded:not(:empty):not(:nth-child(-n+4)) {
				display:none !important;
			}
		}

	.collection-page .filament-desc {
		max-width:100%;
		display:inline-block;
		vertical-align: middle;
	}

	@media (min-width: 915px) {
		.collection-page .filament-desc {
			max-width:40%;
		}
	}

	@media (min-width: 1200px) {
		.collection-page .filament-desc {
			max-width:50%;
			margin-right:30px;
		}
	}

	.collection-page .filament-desc h1 {
		margin-top:10px;
	}

	.collection-page .filament-composition,
	.collection-page .filament-properties {
		max-width:30%;
		vertical-align: middle;
		font-family:'Montserrat', sans-serif;
		display:none;
	}

	@media (min-width: 915px) {
		.collection-page .filament-composition,
		.collection-page .filament-properties {
			display:inline-block;
		}
	}

	@media (min-width: 1200px) {
		.collection-page .filament-composition,
		.collection-page .filament-properties {
			max-width:20%;
		}

		.collection-page .filament-properties {
			margin-left:50px;
		}
	}

	.collection-page .filament-composition {
		text-align: center;
		padding: 0 35px;
	}

	@media (min-width: 1200px) {
		.collection-page .filament-composition {
			border-left: 1px solid #6ec3ec;
			border-right: 1px solid #6ec3ec;
		}

		.collection-page .collection-masthead-green .filament-composition {
			border-left: 1px solid #ABEBC6;
			border-right: 1px solid #ABEBC6;
		}

		.collection-page .collection-masthead-orange .filament-composition {
			border-left: 1px solid #FAD79F;
			border-right: 1px solid #FAD79F;
		}

		.collection-page .collection-masthead-red .filament-composition {
			border-left: 1px solid #F5B8B1;
			border-right: 1px solid #F5B8B1;
		}

		.collection-page .collection-masthead-dark .filament-composition {
			border-left: 1px solid #AEB7BF;
			border-right: 1px solid #AEB7BF;
		}
	}

	.collection-page .filament-composition img {
		max-width:100%;
	}

	.collection-page .filament-composition h2 {
		margin:0;
		font-weight:bold;
	}

	.collection-page .filament-extruder {
		background: url('/static/icons/extruder-white.svg') no-repeat left 10px;
		background-size: 25px;
		padding: 10px 0 0 50px;
		margin-bottom:15px;
	}

	.collection-page .filament-bedtemp {
		background: url('/static/icons/bedtemp-white.svg') no-repeat left 8px;
		background-size: 30px;
		padding: 10px 0 0 50px;
		margin-bottom:5px;
	}

	.collection-page .filament-property {
		text-transform: uppercase;
		font-size: 12px;
		color: #fff;
		display: block;
	}

	.collection-page .filament-properties h4 {
		margin:0 0 3px 0;
	}

	.collection-page .filament-property {
		font-size: 13px;
	}

	.collection-page .filament-value {
		font-size: 20px;
		font-weight:bold;
	}

	.collection-page .collection-masthead {
		background-color: #36A9E1;
		color: #fff;
		padding:5px 40px 15px;
		border-radius:3px;
	}

	.collection-page .collection-masthead img {
		text-align:center;
		margin:auto;
		display:block;
		vertical-align: middle;
		max-width:100%;
	}

	 /* quick link list */

	.collection-page .definition-list a {
		background: transparent;
		color: #404040;
		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 */
		padding:10px;
		border-bottom: 1px solid #ECF0F1;
		border-radius:3px;
	}

	.collection-page .definition-list a:hover {
		background-color: #F7F9F9;
		text-decoration:none;
	}

	.collection-page .definition-list a:hover h3 {
		text-decoration:underline;
	}

	.collection-page .definition-image {
		text-align: center;
		padding: 10px 10px 0 0;
		max-width:20%;
		display: inline-block;
		vertical-align: top;
		margin-left:-10px;
	}

	@media (min-width: 768px) {
		.collection-page .definition-image {
			padding: 15px 10px;
			margin-left:0;
		}
	}

	.collection-page .definition-list img {
		display:inline-block;
		border-radius:5px;
		border: 3px solid #f7f9f9;
		margin: 0 10px 10px 0;
		width:50px;
		max-width:100%;
	}

	.collection-page .definition-text {
		display:inline-block;
		max-width:70%;
		font-size:13px;
	}

	.collection-page .definition-text h3 {
		font-weight:bold;
		color: #005195;
		margin-bottom:5px;
	}

	.collection-page .additional h2 {
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		margin-top: 40px;
	}

	.collection-page .additional {
		border-radius:3px;
	}

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

	@media screen and (min-width: 768px) {
		.featured-heading {
			text-align: left;
		}
	}

	.featured h2.heading {
		letter-spacing: 0.06em;
		font-size:17px;
		text-transform: uppercase;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		display:block;
		text-align: center;
	}

	@media screen and (min-width: 768px) {
		.featured h2.heading {
			display:inline-block;
			text-align: left;
		}
	}

	.featured h2.heading span {
		font-weight: normal;
	}

	@media screen and (min-width: 770px) {
		.featured h2 {
			margin: 15px 0 30px 20px;
			text-align: left;
		}
	}

	.product-collections .featured {
		border-bottom: 0.5px solid #efefef;
	}

	.featured-cta {
		display: inline-block;
		padding: 5px 7px;
		border: 2px solid #2980b9;
		color: #fff;
		background: #2980b9;
		border-radius:5px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
	}

	@media screen and (min-width: 768px) {
		.featured-cta {
			float: right;
			margin-top:12px;
		}
	}

	.featured-cta:hover {
		text-decoration: underline;
		color: #fff;
	}

	.product-collections-header {
		font-size:15px;
		border-bottom: 0.5px solid #efefef;
		padding:10px 0;
	}

	@media screen and (min-width: 768px) {
		.product-collections-header {
			padding:20px 0;
		}
	}

	.product-collections-header h2 {
		font-size:17px;
		text-align: center;
	}

	@media screen and (min-width: 768px) {
		.product-collections-header h2 {
			display:inline-block;
			margin:0 10px 0 0;

		}
	}

	.product-collections-header h2 a {
		font-weight: bold;
		text-decoration:underline;
		margin:0 5px 0;
	}

	.product-collections-header .button-group {
		text-align: center;
		display:block;
		margin:auto;
	}

	@media screen and (min-width: 768px) {
		.product-collections-header .button-group {
			margin-right:15px;
			display:inline-block;
		}
	}

	.filament-button {
		margin:0 2px;
		padding: 4px 20px;
		font-size: 16px;
		color: #2980b9;
		text-decoration: none;
		display: inline-block;
		cursor: pointer;
		border-radius:5px;
		position: relative;
		background: #fff;
		border: 2px solid #2980B9;
		transition: all .1s ease-in-out;
		-moz-transition: all .1s ease-in-out;
		-webkit-transition: all .1s ease-in-out;
	}

	.filament-button:hover {
		background-color: #2980B9;
		color: #fff;
	}

	.filament-button.active {
		border-color: #2980b9;
		color: #fff;
		background-color: #2980b9;
		cursor: default;
		outline:none;
	}

	.filament-button.active::before,
	.filament-button.active::after {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.filament-button.active:after {
		border-color: rgba(41, 128, 185, 0);
		border-top-color: #2980b9;
		border-width: 5px;
		margin-left: -5px;
	}

	.filament-button.active:before {
		border-color: rgba(41, 128, 185, 0);
		border-top-color: #2980b9;
		border-width: 8px;
		margin-left: -8px;
	}

	.landing-featured-brands a {
		text-decoration:underline;
		display:inline-block;
		margin:0 4px;
	}

	.landing-featured-brands a:hover {
		text-decoration:none;
	}

	.landing-featured-brands,
	.landing-filters {
		display:block;
		margin-bottom:10px;
		text-align: center;
	}

	@media (min-width: 768px) {
		.landing-featured-brands,
		.landing-filters {
			display:inline-block;
			text-align: left;
		}
	}

	.collection-sidebar .related-list img {
		max-width:100%;
		border-radius:5px;
	}

	.collection-page .video-list {
		text-align: center;
	}

	.collection-page .video-list a {
		display:inline-block;
		text-align: center;
		margin:10px auto;
	}

	.collection-page .video-list h4 {
		font-weight: bold;
		color: #005195;
		font-size:16px;
	}

	@media (min-width: 768px) {
		.collection-page .video-list h4 {
			font-size:18px;
		}
	}

	.collection-page .video-list img {
		max-width:100%;
		border-radius:5px;
	}

	.collection-page .video-list .video {
		cursor: pointer;
		margin:20px auto;
		display:block;
		border-bottom: 1px solid #ECF0F1;
		padding:0 10px;
	}

	.collection-page .collection-sidebar {
		margin:10px 0;
	}

	/* video modal popup - bootstrap */

	.collection-page .modal-content {
		-webkit-box-shadow: none;
		box-shadow: none;
		background:transparent;
		border:none;
		outline:none;
	}

	.collection-page .modal-content iframe {
		border:none;
		padding:0;
		margin:0;
	}

	.collection-page .close {
		font-size: 40px;
		color: #fff;
		text-shadow:none;
		opacity:0.8;
	}

	.collection-page .close:hover {
		color:#fff;
		opacity:0.95;
	}

/* custom pages */

	.page-enable {
		max-width: 1550px;
		margin: auto;
		margin-bottom:20px;
	}

	.page-enable .collection-masthead .breadcrumb>li+li:before {
		color: #78a9c5;
	}

	.page-enable .collection-masthead .breadcrumb>.active {
		color: #78a9c5;
	}

	.page-enable .callout {
		margin-top:10px;
	}

	.page-enable .callout .title {
		margin-top:0;
	}

	.page-enable .callout a {
		font-weight: bold;
		color: #2980B9;
	}

	.page-enable .collection-masthead-special {
		background-position: top center;
		background-color: #184159;
	}

	.page-enable .masthead-cta {
		display:inline-block;
		padding:8px 25px;
		background: #27AF60;
		border-radius:3px;
		color: #fff;
		margin:10px auto 20px;
		font-family: 'Montserrat', sans-serif;
		text-transform: uppercase;
	}

	.page-enable .masthead-cta:hover {
		text-decoration:none;
	}

	.page-enable .callout-enable {
		border-left:3px solid #184359;
	}

	@media (min-width: 915px) {
		.page-enable #enable-about {
			background: url('https://lh3.googleusercontent.com/Tv_kfN0sfM513zj23wP6MrUsTmG3VR8hc4D7YnTmoooXYAQHrWpHcMp6HSSCNtIwjI31IzPUNSpCusoItDGv3BejoA=s301-fh') #F7F9F9 no-repeat right bottom;
			padding-right:245px;
		}
	}

	.page-enable .collection-masthead h1 {
		font-size:30px;
	}

	@media (min-width: 768px) {
		.page-enable .collection-masthead h1 {
			font-size:42px;
		}

	}

	.page-enable .collection-masthead h2 {
		font-size: 16px;
		line-height: 1.5;
		margin-top:5px;
		margin-bottom:15px;
	}

	@media (min-width: 768px) {
		.page-enable .collection-masthead h2 {
			font-size: 24px;
			line-height: 1.3;
		}
	}

	.page-enable .collection-masthead {
		padding-left:15px;
		padding-right:15px;
	}

	@media (min-width: 768px) {
		.page-enable .collection-masthead {
			padding-left:15px;
			padding-right:15px;
		}
	}

/* grid */

	.article-meta,
	.child-content {
		display:block;
		padding:7px 20px;
	}

	.child-image,
	.article-image {
		display:none;
	}

	@supports (display: grid) {
		.article-meta,
		.child-content {
			padding:0;
		}

		.child-image,
		.article-image {
			display:block;
		}
	}

	.page-collection .embed-youtube {
		margin-bottom:0;
	}

	.box {
		border-radius: 5px;
		width: 100%;
		color: #2C3D4F;
		font-size: 13px;
		border: 1px solid #e2e9e9;
		padding: 0;
		margin: 15px 0 5px;
		display: block;
		background-color: #F7F9F9;
	}

	.box--body {
		padding:20px;
	}

	.box--body button {
		display: inline-block;
		background: #2980b9;
		color: #fff;
		border: 2px solid #2980b9;
		padding: 12px 45px;
		font-family: 'Montserrat', sans-serif;
		border-radius: 5px;
		transition: all 0.2s ease-out;
		width: 100%;
	}

	.box--title {  /* maybe do things here */
		padding: 8px 20px;
		font-weight: bold;
		font-family: 'Roboto', sans-serif;
		font-size: 14px;
	}

	/*.js-product-title,*/
	/*.js-collection-title{*/
	/*	border-bottom-right-radius: 0;*/
	/*	border-bottom-left-radius: 0;*/
	/*	border-bottom-width: 0;*/
	/*}*/

	.box--title h2,
	.box--title h4 {
		margin:3px 0;
	}

	.box--title h2 {
		font-size: 18px;
	}

	@media (min-width: 1300px) {
		.page-content {
			display:grid;
			grid-template-columns: 1fr 360px;
			grid-template-areas: "products side";
			grid-column-gap: 20px;
		}
	}

	.page-content.page-content-main-only {
		grid-template-areas: initial;
		grid-template-columns: 1fr;
	}

	.video {
		margin-top:15px;
		margin-bottom:15px;
	}

	.side {
		padding-bottom:20px;
	}

	.box--content a.article,
	.box--content a.child {
		display: grid;
		grid-template-columns: 50px 1fr;
		grid-column-gap: 20px;
		margin-top:20px;
		text-decoration:none;
	}

	.box--content a.article:hover .article-title,
	.box--content a.child:hover .child-title {
		text-decoration:underline;
		color: #2980B9;
	}

	.box--content .article-desc,
	.box--content .child-desc {
		text-wrap: pretty;
		font-size: 13px;
		color: #828282;
		line-height: 1.42857143;
	}

	.box--content .article-title,
	.box--content .child-title {
		font-size: 14px;
		max-width: 100%;
		margin-top: 0;
		font-family: 'Montserrat', sans-serif;
		margin: 0 0 4px 0;
		color: #333;
		letter-spacing: -0.03px;
		line-height: 1.3;
	}

	.box--content .article-title {
		font-weight: bold;
	}

	.box--content .child-desc {
		display: block;
		width: 100%;
	}

	.box--content .article-image img,
	.box--content .child-image img {
		width:100%;
		max-width:100%;
		border-radius:5px;
		aspect-ratio: 1 / 1;
	}

	.box--content .article-image .article-image-icon,
	.box--content .child-image .article-image-icon {
		aspect-ratio: 1 / 1;  /* icons are square */
	}

	.box--content .article-image .article-image-default,
	.box--content .child-image .article-image-default {
		opacity:0.5;
		padding:10px;
		background-color: #AED6F1;
	}

	.box--content .child-image img {
		max-width:50px;
	}

	.page-read-description {
		color: #96989a;
	}

	.page-banner img {
		width:100%;
		height:100%;
	}

	.box--content a {
		color: #287FB8;
		text-decoration: underline;
	}

	.technical .box--content {
		margin-top:15px;
	}

	.box .status:empty,
	.box .status-error:empty,
	.box .status-warning:empty,
	.box .status-success:empty  {
		display: none; /* hides error message in form if empty */
	}

	.box .status {
		width: 100%;
		display: block;
		padding: 10px 20px;
		margin-bottom: 15px;
	}

	.box .status-error {
		border-top: 2px solid #BF3A2B;
		border-bottom: 2px solid #BF3A2B;
		background-color: #E74D3C;
		color: #fff;
	}

	.box .status-error a {
		color: #BF3A2B;
	}

	.box .status-warning {
		border-top:2px solid #E77E21;
		border-bottom:2px solid #E77E21;
		background-color: #F39C0F;
		color: #fff;
	}

	.box .status-warning a {
		color: #E77E21;
	}

	.box .status-success {
		border-top:2px solid #27AF60;
		border-bottom:2px solid #27AF60;
		background-color: #2ECC70;
		color: #fff;
	}

	.box .status-success a {
		color: #27AF60;
	}

	.child-content {
		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 */
		align-items: center;
		flex-wrap: wrap;
		align-content: center;
	}

	.secondary {
		display: block;
		background-color: #F7F9F9;
		padding: 30px;
		width:100%;
	}

	@media (min-width: 1200px) {
		.secondary {
			margin:20px 0;
		}
	}

	.secondary h2 {
		font-family:'Montserrat', sans-serif;
		font-size:16px;
		margin:0 0 10px;
		color:#4e5052;
		display:block;
	}

	.secondary-content {
		max-width: 960px;
		font-size: 12px;
		color: #727379;
	}

	/* collection landing pages */
	.page-collection.page-collection-landing .page-description {
		margin-bottom:0;
	}

	/* An active On Sale / Clearance toggle or facet dropdown marks the curated sub-collections
	   flag-hidden (toggleSubcollectionVisibility in public-product-filters.js) - the landing
	   template's title box + grid, either template's carousel strip, and the sub-collection cards
	   that ride inline in the products grid when there were too few for a strip - matching the
	   sidebar collection filter, which hides all three outright. !important because that filter
	   show()/hide()s the inline cards themselves (public-collections.js), so this has to compose
	   with an inline display rather than lose to it. */
	.product-collection-subcollection-container.collection-flag-hidden,
	.page-collection .mh--carousel-scroller.collection-flag-hidden,
	.page-collection .products-container > .collection-single.collection-flag-hidden {
		display: none !important;
	}

	.page-collection.page-collection-landing.has-banner .page-description {
		margin-top:0;
	}

	.page-collection.page-collection-landing .box--content .child-desc {
		display:block;
		width:100%;
	}

	.page-collection.page-collection-landing .child-content {
		flex-wrap: wrap;
	}

	/* Pre-carousel cached HTML only: non-top-level landing pages used to stamp
	   page-collection-truncate-subcollections and CSS-hide the sub-collection tiles past
	   the first row. Fresh renders ship 4+ tiles in the carousel strip instead and no
	   longer stamp the class; drop these two rules once landing page caches cycle. */
	@media (min-width: 915px) and (max-width:1200px) {
		.page-collection.page-collection-truncate-subcollections .products-container .collection-single:nth-child(n+4) {
			display:none;
		}
	}

	@media (min-width: 1200px) {
		.page-collection.page-collection-truncate-subcollections .products-container .collection-single:nth-child(n+5) {
			display:none;
		}
	}

	.page-wrap {
		position: relative;
	}

	.collection-sidenav {
		position: sticky;
		max-height: calc(100vh - 30px);
		overflow-y: auto;
		top: 30px;
		bottom: 0;
	}

	.collection-checkbox{
		float: right; /* cached sidebars predating collection-filter-row keep their box on the right */
		accent-color: #006BC0;
	}

	.collection-checkbox:hover{
		cursor: pointer;
	}

	/* Filter rows (checkbox-first markup): hover and checked state paint the whole label
	   so the box and its collection name read as one control. */
	.sidebar ul label.collection-filter-row {
		grid-template-columns: 20px 1fr;
		grid-column-gap: 6px;
		align-items: center;
		padding: 2px 4px;
		border-radius: 3px;
		cursor: pointer;
	}

	.sidebar ul label.collection-filter-row .collection-checkbox {
		float: none;
		margin: 0;
	}

	.sidebar ul label.collection-filter-row:hover {
		background-color: #EAF4FB;
	}

	.sidebar ul label.collection-filter-row:hover .collection-checkbox {
		box-shadow: 0 0 0 2px #AED6F1;
		border-radius: 2px;
	}

	/* class kept in sync by syncFilterRowSelectedClass() in public-collections.js */
	.sidebar ul label.collection-filter-row-checked {
		background-color: #E3F0FA;
	}

	.sidebar ul label.collection-filter-row-checked:hover {
		background-color: #D9EBF8;
	}

	.collection-truncate{
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.collection-tag{
		border-radius: 5px;
		font-size: 10px;
		margin-left: 5px;
		border: 1px solid #AED6F1;
		display: inline-block;
		padding: 1px 3px 1px 3px;
		cursor: pointer;
	}

	.collection-tag:hover{
		border-color: #287FB8;
	}

	.collection-tag:hover .collection-tag-clear{
		color: #287FB8;
		font-weight: bold;
	}

	.collection-tag-clear{
		float: right;
		font-size: 10px;
		padding-left: 3px;
		color: #3498DB;
		font-weight: normal;
	}

	.collection-tag-clear:hover {
		font-weight: bold;
		color: #287FB8;
	}

	.collection-tag-list {
		display: inline-block;
		vertical-align: top;
	}

	.collection-sticky {
		position: sticky;
		top: 30px;
		z-index: 100;
	}

.dedicated-article .article-title {
	font-family: 'Montserrat', sans-serif;
	color: #333;
	font-weight: bold;
	text-decoration: underline;
	padding:15px;
	display:block;
}

.dedicated-article .article-title:hover {
	color: #2a6496;
}

.dedicated-article .dedicated-article-image {
	margin-top:10px;
	display:block;
}

.dedicated-article .dedicated-article-image img {
	width:100%;
	border-radius:3px;
	aspect-ratio: 45 / 19;
}

.collection-empty {
	/*border: 1px dashed #AF6D18;*/
	display: block;
	padding: 5px 20px;
	margin-top: 0;
	margin-bottom: 10px;
	border-radius: 5px;
	background: #FDF5E8;
	color: #AF6D18;
	font-size:12px;
}

/* Sub-collections carousel strip on both default collection templates: the same CSS
   scroll-snap strip as the search page's collections section (.page-search
   .mh--carousel-* in public-search.css), scoped to the variant classes the two
   templates stamp on their roots - product-collection-non-landing (4+ sub-collection
   cards, gated in the controller) and product-collection-landing (4+ tiles on a
   non-top-level page, where the strip replaced the old one-row CSS truncation).
   Drag-to-scroll and the arrows come from initMhCarousels in public-scripts.js.
   Cards are standard collection widgets in their own .products-container wrapper,
   so all card styling comes from public.css; only strip layout and flex-item
   sizing live here. */
.product-collection-non-landing .mh--carousel-scroller,
.product-collection-landing .mh--carousel-scroller {
	display: flex;
	align-items: center;
	margin: 0 0 20px 0;
	min-width: 0;
	max-width: 100%;
	/* slate backdrop sets the strip apart from the white page and the grid below */
	background-color: #e2e8f0;
	border-radius: 10px;
	padding: 12px;
}

.product-collection-non-landing .mh--carousel-track,
.product-collection-landing .mh--carousel-track {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 10px;
	padding: 2px 0; /* breathing room so the overflow container never clips card borders */
	width: 100%;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scroll-padding-left: 2px;
	scroll-behavior: smooth;
	scrollbar-width: none;
	cursor: grab;
	min-width: 0;
}

/* active mouse drag: snap + smooth would fight direct scrollLeft writes, so
   both turn off for the duration; releasing re-snaps to the nearest card */
.product-collection-non-landing .mh--carousel-track.mh--carousel-dragging,
.product-collection-landing .mh--carousel-track.mh--carousel-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	-webkit-user-select: none;
	user-select: none;
}

.product-collection-non-landing .mh--carousel-track::-webkit-scrollbar,
.product-collection-landing .mh--carousel-track::-webkit-scrollbar {
	display: none;
}

.product-collection-non-landing .mh--carousel-track:empty,
.product-collection-landing .mh--carousel-track:empty {
	display: none;
}

.product-collection-non-landing .mh--carousel-arrow,
.product-collection-landing .mh--carousel-arrow {
	align-self: stretch;
	background-color: #f8fafc; /* near-white so the arrows read as controls on the slate strip */
	padding: 2px 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 2px;
	border: none;
}

.product-collection-non-landing .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):hover,
.product-collection-landing .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):hover,
.product-collection-non-landing .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):active,
.product-collection-landing .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):active {
	background-color: #EEF3FA;
}

.product-collection-non-landing .mh--carousel-arrow svg,
.product-collection-landing .mh--carousel-arrow svg {
	stroke: #4a4a4a;
	color: #4a4a4a;
}

.product-collection-non-landing .mh--carousel-arrow-prev,
.product-collection-landing .mh--carousel-arrow-prev {
	margin-right: 2px;
}

.product-collection-non-landing .mh--carousel-arrow-next,
.product-collection-landing .mh--carousel-arrow-next {
	margin-left: 2px;
}

.product-collection-non-landing .mh--carousel-arrow.mh--carousel-arrow-disabled,
.product-collection-landing .mh--carousel-arrow.mh--carousel-arrow-disabled {
	opacity: 0.3;
}

.product-collection-non-landing .mh--carousel-arrow.mh--carousel-arrow-hidden,
.product-collection-landing .mh--carousel-arrow.mh--carousel-arrow-hidden {
	display: none;
}

/* Each strip card's .products-container wrapper: only flex-item sizing is
   carousel-specific; mirrors .page-search .mh--carousel-track > .products-container
   in public-search.css. 270px matches the grid's card tracks. */
.product-collection-non-landing .mh--carousel-track > .products-container,
.product-collection-landing .mh--carousel-track > .products-container {
	flex-shrink: 0;
	flex-grow: 0;
	scroll-snap-align: start;
	width: 270px;
	margin-bottom: 0;
	grid-auto-rows: 1fr; /* public.css min-content rows leave dead space in flex-stretched wrappers; 1fr lets every card fill to the tallest card so backgrounds align */
}

/* The catalog table under the grid: the collection's SKUs with no product card, in the IsCatalog
   page's table (its rules come from public-brand-catalog.css, linked only when the table renders).
   Rows filter and hide like cards. The section ships with an inline display:none while the feature
   is dark (rendered, styled and wired, not shown; reveal on a live page with
   document.getElementById('jsCollectionCatalog').style.display = ''), so the JS states are classes:
   -empty when a toggle hides every row, -filtered while the sidebar collection filter shows other
   collections' items. !important so they win over that inline style either way. */
.collection-catalog {
	margin-top: 30px;
	padding: 0 15px;
}

/* The table heading is the IsCatalog page's h2 (public-brand-catalog.css sets no size, so it renders
   at the browser default ~24px). On a collection page it sits under the 18px page title, so size it
   like .page-title h2. */
.collection-catalog .category-title {
	font-size: 16px;
	font-weight: 600;
	color: #2C3D4F;
}

.collection-catalog .catalog-item.collection-flag-hidden,
.collection-catalog.collection-catalog-empty,
.collection-catalog.collection-catalog-filtered {
	display: none !important;
}

/* Product Collection sidebar mobile filtering */
.sidebar-button {
	display: none;
}

.sidebar-close-button {
	display: none;
}

@media screen and (max-width: 767px) { /* hide sidebar on revised handler when shrunk */
	.sidebar-button {
		display: block;
		padding: 5px 10px;
		margin: 5px 0;
		color: #2C3D4F;
		background: #FFF;
		border: 1px solid #e2e9e9;
		border-radius: 5px;
		font-family: 'Montserrat', sans-serif;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0.5px;
		line-height: 1.5em;
		text-transform: uppercase;
	}

	.sidebar-button:hover {
		background: #F7F9F9;
	}

	.sidebar-button svg {
		width: 16px;
		height: 16px;
		position: relative;
		top: 3px;
	}

	.sidebar {
		display: none;
		position: fixed !important;
		top: 68px !important;
		bottom: 0;
		overflow-y: scroll;
		z-index: 9999;
		height: 100%;
		width: calc(100% - 30px);
		margin: 0 !important;
		background-color: #fff;
		border: 1px solid #e2e9e9;
		padding: 10px 0 10px 10px;
		border-radius: 5px;
		padding-bottom: 50px;
	}

	.sidebar-close-button {
		position: absolute;
		top: 7px;
		right: 7px;
		width: 32px;
		height: 32px;
		/*background: #e5e5e5;*/
		border: none;
		border-radius: 5px;
		cursor: pointer;
		display:inline-block;
	}
	.sidebar-cta-header {
		display: inline-block;
		width: calc(100% - 50px);
	}
}