@charset "utf-8";

/* global */

.container {
	max-width:1800px;
}

.product-page .callout {
	margin: 20px 0;
	padding: 20px;
	border-left: 3px solid #eee;
}

.product-page .section .row {
	display: grid;

	grid-column-gap: 20px;
}

@media (min-width: 1200px) {
	.product-page .section .row {
		grid-template-columns: 1fr 1fr;
	}
}

.product-page .callout a {
	font-weight: bold;
}

.product-page .callout-warning {
	background-color: rgba(243, 156, 15, 0.05);
	border-color: #F39C0F;
}

.product-page .callout-warning a {
	color: #d8902a;
}

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

.product-page .border-light-top {
	border-top: 1px solid #e8e8e8;
}

.product-page .table-responsive {
	border:none;
}

/* Product Rewards Banner */
.product-rewards {
	background: #eef5ff;
	padding: 4px 12px;
	border: 1px solid #1A6DF1;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.product-rewards .product-rewards-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-rewards .product-rewards-icon-container svg {
	width: 20px;
	height: 20px;
}

.product-rewards .product-rewards-star-icon {
	color: #1A6DF1;
	font-size: 16px;
}

.product-rewards .product-rewards-text-container {
	color: #1A6DF1;
	font-size: 12px;
}

.product-rewards .product-rewards-text-container span {
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
}

.product-rewards .product-rewards-small-text {
	opacity: 0.8;
}

.product-rewards a {
	color: #1A6DF1;
	text-decoration: underline;
}

.product-page .padding-normal {
	padding:10px;
}

/* product page */

.product-page {
	font-family: 'Roboto', sans-serif;
	max-width:1400px;
	margin:auto;
}

.product-page .btn,
.product-page .btn:hover {
	background-image:none;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-weight: bold;
}

	.product-page .btn:hover, 
	.product-page .btn:focus,
	.product-page .btn:active {
		background: #287FB8;
		color: #fff;
	}

/* pricing affix */

.product-page .product-description .product-price {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;

	width:100%;
	top: 50px;
	margin-bottom: 20px;
	border: transparent solid 2px;
}

.product-page-admin-details {
	padding:22px 15px;
	width:100%;
	max-width:750px;
	margin:auto;
	background-color: #fad79f24;
	color: #E77E21;
	border:2px solid #E77E21;
	border-radius: 0 0 5px 5px;
	border-top:none;
}

.product-page-admin-details h3 {
	font-size:15px;
	font-weight:bold;
	margin: 0 0 3px;
}

.product-page-admin-note {
}

.product-page-multi-sku.product-page .product-description .product-price {
	margin-top: 0;
}

/* header */
.product-page .product-rating {
	display: flex;
	margin-bottom: 5px;
	position: relative;
	left: -5px;
}

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

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

.product-page .product-page-title-bundle-name {
	font-size: 23px;
	font-weight: 400;
	margin-bottom: 3px;
	margin-top: 3px;
	display:block;
	color: #313131;
	font-family: 'Roboto', sans-serif;
}

.product-page .product-page-title-bundle-name:empty {
	display:none;
}

.product-page .product-page-title-h1-brand,
.product-page .product-page-title-h1-brand a {
	display: block;
	color: #787d87;
	font-size: 17px;
	font-weight: 400;
	margin-bottom: 3px;
}

.product-page h1 {
	color: #111827;
	text-wrap: balance;
	font-weight: bold;
	font-size: 22px;
	font-family: 'Montserrat', sans-serif;
	word-wrap: normal;
	margin:0 0 15px;
	line-height: 1.1em;
	letter-spacing: -0.035em;
}

@media (min-width: 990px) {
	.product-page h1 {
		font-size:28px;
	}
}

.product-page h1 small {
	font-size:14px;
	margin-top:10px;
}

.product-page .breadcrumb {
	font-size: 11px;
	background: transparent;
	padding: 4px 0 0 0;
	margin-bottom:5px;
}

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

.product-page .breadcrumb>li+li:before {
	content: "\2039";
	color: #a7a7a7;
}

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

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

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

@media (min-width: 1200px) {
	.product-page .breadcrumb {
		margin-bottom:10px;
		margin-top: 8px;
	}
}

.product-page .breadcrumb a,
.product-page .breadcrumb>.active {
	color: #565959;
	padding: 0 4px;
}

.product-page .breadcrumb > li#collectionBreadCrumb:empty {
	display:none; /* if empty, hide breadcrumb */
}

.product-page .page-header {
	margin-top:0;
}

@media (max-width: 450px) {
	.product-page .page-header {
		margin: 0px 0 20px;
	}
}

/* images */
.product-images #thumbnailsViewer {
	height: auto !important;
}

.product-page .product-images {
	margin-top:50px;
	padding-left:90px;
}

@media (max-width: 768px) {
	.product-page .product-images.pull-right {
		float:none !important;
		padding-left:10px;
		margin-top:0;
	}

	.product-page .pull-left {
		float:none !important;
	}
}

.product-tagged {
	display: block;
	color: #383838;
	background-repeat:  no-repeat;
	background-position: 0;
	background-size: 23px;
	font-size: 13px;
	margin-bottom: 10px;
	
	display: none;
}

.product-page-multi-sku .product-tagged {
	margin-top: 0;
}

.product-tagged.product-tagged-background {
	padding-left: 36px;	/* pad the left when there is a top level icon showing */
}

.product-tagged em {
	color: #a0a0a0;
}

/* product short description */
.product-page .product-sid {
	background: #f7f9f9;
	padding: 5px 13px;
	font-size: 13px;
	margin: 13px 0 0;
	color: #868686;
}

/* product short description */
.product-page .product-short-desc {
	margin-top:10px;
	font-size:15px;
	float:none;
}

.product-promotion-description:empty {
	display: none;
}

.product-promotion-description {
	color:#27AF60;
	font-weight: bold;
	margin-bottom: 10px;
}

.sku-is-on-sale .product-promotion-description {
	color:#27AF60;
}

.sku-is-on-clearance-sale .product-promotion-description {
	color:#27AF60;
}

.sku-is-on-clearance .product-promotion-description {
	color:#E8230D;
}

.sku-is-refurbished .product-promotion-description {
	color:#FF8050;
}

@media (min-width: 990px) {
	.product-page .product-short-desc {
		float:right;
	}
}

@media (min-width: 1200px) {
	.product-page .product-short-desc {
		margin-top:0px;
	}
}

.product-page .product-short-desc .callout {
	margin-top:0;
}

/* product sale */

.product-photos{
	position:relative;
}

.product-photos .product-page-badge {
	position: absolute;
	left: 15px;
	top: 15px;
	z-index: 1;
	font-size: 24px;
	padding: 3px 8px;
}

@media screen and (min-width: 767px) {
	.product-photos .product-page-badge {
		left: -5px;
	}
}

.product-page-badge {
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-size: 85%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
	max-width:275px;
	border: 2px solid #2ECC70;
	color: #2ECC70;
}

.product-photos .product-page-badge {
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	padding: 2px 17px;
	font-size: 20px;
	font-weight: normal;
	user-select: none; /* disable text selection */
}

.product-page-badge.sku-is-refurbished {
	border-color: #FF8050;
	background-color: #FF8050;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	font-size: 15px;
	padding: 2px 17px;
	font-weight: normal;
}

.product-page-badge.sku-is-on-sale {
	border-color: #2ECC70;
	background-color: #2ECC70;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	font-size: 20px;
	padding: 2px 17px;
	font-weight: normal;
}

.product-page-badge.sku-is-on-clearance-sale {
	border-color: #2ECC70;
	background-color: #2ECC70;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	font-size: 20px;
	padding: 2px 17px;
	font-weight: normal;
}

.product-page-badge.sku-is-on-clearance {
	background-color: #E8230D;
	border-color: #E8230D;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	font-size: 15px;
	padding: 2px 17px;
	font-weight: normal;
}

.product-page-badge.sku-is-new {
	background-color: #208DD6;
	border-color: #208DD6;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
	text-transform: none;
	font-size: 15px;
	padding: 2px 17px;
	font-weight: normal;
}

/* colors of price */

.product-price-shipping-message {
	background-color: #F6F9F8;
	padding: 7px 10px;
	color: #6A6A6A;
	border-radius: 5px;
}

.product-page .product-is-on-sale #price,
.product-page .product-is-on-sale .product-price-price-value,
.product-page .product-is-on-sale #pricebulk,
.product-page .sku-is-on-clearance-sale #price,
.product-page .sku-is-on-clearance-sale .product-price-price-value,
.product-page .sku-is-on-clearance-sale #pricebulk
.product-page .sku-is-on-sale #price,
.product-page .sku-is-on-sale .product-price-price-value,
.product-page .sku-is-on-sale #pricebulk {
	color: #27AF60;
}

.product-page .sku-is-on-clearance #price,
.product-page .sku-is-on-clearance .product-price-price-value,
.product-page .sku-is-on-clearance #pricebulk {
	color: #E8230D;
}

.product-page .product-description.sku-is-on-clearance-sale .product-price,
.product-page .product-description.sku-is-on-sale .product-price,
.product-page .product-is-on-sale .product-price {
	background: #F6FDF9;
	border: #2ECC70 solid 2px;
	border-radius: 3px;
}

.product-page .product-description.sku-is-on-clearance-sale .product-price,
.product-page .product-description.sku-is-on-clearance .product-price {
	background: #fffdfd;
	border: #E8230D solid 2px;
	border-radius: 3px;
}

.product-page .sku-is-on-clearance-sale .product-addons-background,
.product-page .sku-is-on-sale .product-addons-background,
.product-page .product-is-on-sale .product-addons-background {
	border-color: #2ECC70;
	background-color: #f6fdf9;
}

.product-page .sku-is-on-clearance .product-addons-background {
	border-color: #E8230D;
	background-color: #fffdfd;
}

.product-page .sku-is-on-clearance .product-addon-fadeout {
	background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, #FFFDFD 100% );
	background-image: -moz-linear-gradient( rgba(255, 255, 255, 0) 0%, #FFFDFD 100% );
	background-image: -o-linear-gradient(rgba(251, 251, 251, 0) 0%,#FFFDFD 100%);
	background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, #FFFDFD 100% );
}

.product-page .product-is-on-sale .product-addon-fadeout {
	background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, #f6fdf9 100% );
	background-image: -moz-linear-gradient( rgba(255, 255, 255, 0) 0%, #f6fdf9 100% );
	background-image: -o-linear-gradient(rgba(251, 251, 251, 0) 0%,#f6fdf9 100%);
	background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, #f6fdf9 100% );
}

.product-page .sku-is-on-sale .product-addon-details a,
.product-page .sku-is-on-clearance-sale .product-addon-details a,
.product-page .product-is-on-sale .product-addon-details a {
	color: #27AF60;
	border-color: #ABEBC6;
	background:#F6FDF9;
}

.product-page .sku-is-on-clearance .product-addon-details a {
	color: #E8230D;
	border-color: #edafa9;
	background:#fffdfd;
}

.product-page .sku-is-on-sale .product-addon-details a:hover,
.product-page .sku-is-on-clearance-sale .product-addon-details a:hover,
.product-page .product-is-on-sale .product-addon-details a:hover {
	background: #E2F8EC;
}

.product-page .sku-is-on-clearance .product-addon-details a:hover {
	background: #ffefed;
}

.product-page .sku-is-on-sale .input-group-addon,
.product-page .sku-is-on-clearance-sale .input-group-addon,
.product-page .product-is-on-sale .input-group-addon {
	background: rgba(46, 204, 112, 0.1);
}

.product-page .sku-is-on-clearance .input-group-addon {
	background: #ffffff;
}

.product-page .product-is-on-sale .product-available .product-availability-value {
	color: #2980B9;
}

/* pulse */

/* .product-page .product-is-on-sale .product-price::before {
	border: 3px solid #2ecc70;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	height: 18px;
	content: ' ';
	width: 18px;
	position: absolute;
	-ms-animation:  pulsate 1s ease-out;
	-webkit-animation: pulsate 1s ease-out;
	animation: pulsate 1s ease-out;
	-ms-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite; 
	animation-iteration-count: infinite;
	opacity: 0.0
}

.product-page .product-is-on-sale .product-price::before {
	top: -8px;
	left: 6px;
}

@media screen and (min-width: 1200px) {
	.product-page .product-is-on-sale .product-price::before {
		top: 3px;
	}
}

@media screen and (min-width: 1200px) {
	.product-page .product-is-on-sale .product-price::before {
		top: 3px;
	}
}

@-webkit-keyframes pulsate {
	0% {
		-webkit-transform: scale(0.1, 0.1);
		-ms-transform: scale(0.1, 0.1);
		transform: scale(0.1, 0.1);
		opacity: 0.0;}
	50% {
		opacity: 1.0;
	}
	100% {
		-webkit-transform: scale(1.2, 1.2); 
		-ms-transform: scale(1.2, 1.2); 
		transform: scale(1.2, 1.2); 
		opacity: 0.0;
		
	}
} */

/* addons */
.addon-title {
	display:inline-block
}

.product-page .add-to-cart-button .btn {
	padding: 13px 15px;
}

.product-page .add-to-cart-button.add-to-cart-button-admin .btn {
	background: #E6261D;
}

.product-page .add-to-cart-button.preorder-button .btn {
	background:#344A5F;
	padding: 13px 8px;
}

.product-page .add-to-cart-button.preorder-button .btn::before {
	content: 'Pre-order:';
	display: inline-block;
	font-size: 9px;
	position:absolute;
	top:2px;
	left:0;
	right:0;
	text-align: center;
	text-transform: none;
	color: #AEB7C0;
	font-weight: normal;
}

/* add to cart button re-sizing */
@media (min-width: 400px) {
	.product-page .add-to-cart-button .btn,
	.product-page .add-to-cart-button.preorder-button .btn {
		padding: 13px 20px;	
	}

	.product-page .add-to-cart-button.preorder-button .btn::before {
		position:relative;
		margin-right: 8px;	
		font-size: 11px;
		top:0;
	}
}

@media (min-width: 450px) {
	.product-page .add-to-cart-button .btn {
		padding: 13px 60px;	
	}

	.product-page .add-to-cart-button.preorder-button .btn {
		padding: 13px 40px;
	}	
}

@media (min-width: 600px) {
	.product-page .add-to-cart-button .btn,
	.product-page .add-to-cart-button.preorder-button .btn {
		padding: 13px 90px;	
	}
}

@media (min-width: 767px) {
	.product-page .add-to-cart-button .btn,
	.product-page .add-to-cart-button.preorder-button .btn {
		padding: 13px 60px;
	}
}

@media (min-width: 990px) {
	.product-page .add-to-cart-button .btn,
	.product-page .add-to-cart-button.preorder-button .btn {
		padding: 13px 120px;
	}
}

@media (min-width: 1200px) {
	.product-page .add-to-cart-button .btn {
		padding: 13px 30px;
	}

	.product-page .add-to-cart-button.preorder-button .btn {
		padding: 13px 40px;
	}	
}

@media (min-width: 1330px) {
	.product-page .add-to-cart-button .btn {
		padding: 13px 70px;
	}

	.product-page .add-to-cart-button.preorder-button .btn {
		padding: 13px 50px;
	}	
}

@media (min-width: 1500px) {
	.product-page .add-to-cart-button .btn {
		padding: 13px 80px;
	}

	.product-page .add-to-cart-button.preorder-button .btn {
		padding: 13px 70px;
	}		
}

.product-page .btn-full {
	padding:13px 100px;
	width:100%;
}


.product-page .pp-add-to-cart-btn .btn {
	padding: 13px 15px;
}

.product-page .pp-add-to-cart-btn.pp-add-to-cart-btn-admin .btn {
	background-color: #E6261D;
}

.product-page .pp-add-to-cart-btn.preorder-button .btn {
	background:#344A5F;
	padding: 13px 8px;
}

.product-page .pp-add-to-cart-btn.preorder-button .btn::before {
	content: 'Pre-order:';
	display: inline-block;
	font-size: 9px;
	position:absolute;
	top:2px;
	left:0;
	right:0;
	text-align: center;
	text-transform: none;
	color: #AEB7C0;
	font-weight: normal;
}

/* add to cart button re-sizing */
@media (min-width: 400px) {
	.product-page .pp-add-to-cart-btn .btn,
	.product-page .pp-add-to-cart-btn.preorder-button .btn {
		padding: 13px 20px;
	}

	.product-page .pp-add-to-cart-btn.preorder-button .btn::before {
		position:relative;
		margin-right: 8px;
		font-size: 11px;
		top:0;
	}
}

@media (min-width: 450px) {
	.product-page .pp-add-to-cart-btn .btn {
		padding: 13px 60px;
	}

	.product-page .pp-add-to-cart-btn.preorder-button .btn {
		padding: 13px 40px;
	}
}

@media (min-width: 600px) {
	.product-page .pp-add-to-cart-btn .btn,
	.product-page .pp-add-to-cart-btn.preorder-button .btn {
		padding: 13px 90px;
	}
}

@media (min-width: 767px) {
	.product-page .pp-add-to-cart-btn .btn,
	.product-page .pp-add-to-cart-btn.preorder-button .btn {
		padding: 13px 60px;
	}
}

@media (min-width: 990px) {
	.product-page .pp-add-to-cart-btn .btn,
	.product-page .pp-add-to-cart-btn.preorder-button .btn {
		padding: 13px 120px;
	}
}

@media (min-width: 1200px) {
	.product-page .pp-add-to-cart-btn .btn {
		padding: 13px 30px;
	}

	.product-page .pp-add-to-cart-btn.preorder-button .btn {
		padding: 13px 40px;
	}
}

@media (min-width: 1330px) {
	.product-page .pp-add-to-cart-btn .btn {
		padding: 13px 70px;
	}

	.product-page .pp-add-to-cart-btn.preorder-button .btn {
		padding: 13px 50px;
	}
}

@media (min-width: 1500px) {
	.product-page .pp-add-to-cart-btn .btn {
		padding: 13px 100px;
	}

	.product-page .pp-add-to-cart-btn.preorder-button .btn {
		padding: 13px 70px;
	}
}

.product-page .btn-full {
	padding:13px 100px;
	width:100%;
}

.product-page .add-to-cart-quantity {
	height: 48px;
}

.product-page .go-to-checkout-button {
	padding: 13px;
}

.product-page .product-page-checkout-button {
	padding: 13px;
}


.product-page .input-group-addon {
	border-color: #ecf0f1;
	background:#ECF0F1;
}

/* pricing table */
.product-page .product-addon-details {
	margin-top:2px;
	margin-left: 18px;
	color: grey;
	text-transform: uppercase;
	font-size:13px;
}

.product-page .product-addon-details a {
	font-weight: bold;
	font-size: 12px;
	margin-left: 3px;
	text-decoration: underline;
	color: #333;
}

.product-page .product-description .product-price {
	margin-top:10px;
	background: #F7F9F9;
	order: 50; /* to display last */

	/* to keep price rules from overflowing with slickjs */
	min-height: 0;
	min-width: 0;
}

.product-page .product-description .product-price-spacing {
	padding: 15px 15px 0 15px;
}

.product-price .product-price-spacing:first-child {
	padding-top:10px;
}

.product-price .product-price-spacing:last-child {
	padding-bottom:15px;
}

.product-price-rule-helper-text {
	position: absolute;
	/* top: -14px; */
	border-radius: 3px;
	margin: auto;
	margin-top:-20px;
	left: 10%;
	padding: 2px 10px;
	font-size: 11px;
	color: #A5A5A5;
}

.product-price-rule-fade.product-price-rule-fade-right {
	position: absolute;
	/* bottom: 95px; */
	right: 12px;
	height: 55px;
	display: none;
	width:25px;
	background: -webkit-linear-gradient( to right, rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -moz-linear-gradient( to right, rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -o-linear-gradient(to right, rgba(251, 251, 251, 0) 0%,#f7f9f9 100%);
	background-image: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -ms-linear-gradient(to right, rgba(251, 251, 251, 0) 0%,#f7f9f9 100%);
}

.product-price-rule-fade.product-price-rule-fade-left {
	position: absolute;
	/* bottom: 95px; */
	left: 12px;
	height: 55px;
	display: none;
	width:25px;
	background: -webkit-linear-gradient( to left, rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -moz-linear-gradient( to left, rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -o-linear-gradient(to left, rgba(251, 251, 251, 0) 0%,#f7f9f9 100%);
	background-image: linear-gradient( to left, rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -ms-linear-gradient(to left, rgba(251, 251, 251, 0) 0%,#f7f9f9 100%);
}

@media (min-width: 767px) {
	.product-price-rule-fade.product-price-rule-fade-left,
	.product-price-rule-fade.product-price-rule-fade-right {
		display:none;
	}
}

.product-page .product-description .product-price-rule {
	white-space: nowrap;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	/*overflow-x: auto;*/
}

/* CSS scroll-snap strip that replaced the slick carousel for the price-rule
   tiles. The scroller wrapper + arrows are injected at runtime (single-SKU JS)
   or rendered by Vue (multi-SKU); the nav/tiles keep their original classes. */
.product-price-rule-scroller {
	display: flex;
	align-items: center;
}

.product-price-rule-nav {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	padding: 2px 0; /* breathing room so the overflow container never clips tile borders */
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: 2px;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
}

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

.product-price-rule-nav::-webkit-scrollbar {
	display: none;
}

/* arrows fill the strip height like the old slick arrows did (scroller centers items; stretch overrides per-arrow) */
.product-price-rule-scroller .product-pricing-arrows {
	align-self: stretch;
}

.product-price-rule-item:focus {
	outline:none;
}

.product-price-rule-item.product-price-rule-item-selected:focus {
	outline:none;
}

.product-pricing-arrows.slick-arrow.slick-disabled {
	opacity:0.3;
}

.product-pricing-arrows.product-pricing-arrows-disabled {
	opacity:0.3;
}

.product-pricing-arrows {
	background-color: #e2e2e2;
	padding:2px 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 2px;
}

.product-pricing-arrows.product-pricing-arrows-prev {
	margin-right:2px;
}
.product-pricing-arrows.product-pricing-arrows-next {
	margin-left:2px;
}

.product-price-rule-item {
	display:inline-block;
	flex:0 0 auto;
	scroll-snap-align:start;
	padding:3px 10px;
	border: 2px solid #C1C1C1;
	text-align: center;
	cursor: pointer;
	border-radius:3px;
	color: #4a4a4a;
	margin:0 2px;
}

.product-rules {
	/* to keep price rules from overflowing with slickjs */
	min-height: 0;
	min-width: 0;
}

.product-rules .add-to-cart-button button {
	width:100%;
}

.product-price-rule-item:hover {
	border-color: #A5A5A5;
}

.product-price-rule-item.product-price-rule-item-selected {
	border-color: #3498DB;
}

.product-price-rule-item-title {
	font-family: 'Roboto', sans-serif;
	color: #4a4a4a;
	font-size:14px;
}

.product-price-rule-item-price {
	font-family: 'Roboto', sans-serif;;
}

.product-price-rule-item-price {
	color: #3498DB;
	font-weight:bold;
}

.product-price-rule-item-price-currency {
	font-weight:normal;
	color: #4a4a4a;
}

.product-price table td,
.product-price table th {
	padding:3px 5px;
	font-weight: normal;
	font-size:12px;
}

.product-price table{
	table-layout: auto;
}

.product-price table td{
	width: 77%;
}

.product-price table th {
	width: auto;
}

.product-price .product-pricing-table {
	color: #6d6d6d;
	width: 100%;
}

.product-price .product-pricing-table tr {
	min-height:33px;
}

.product-page .product-description #listprice,
.product-page .product-description .product-price-list {
	color: #6d6d6d;
}

.product-page .product-price-list-hide {
	display: none;
}

.product-page .product-price-hide {
	display: none;
}

.product-page .product-description .product-price-list-value {
	text-decoration: line-through;
}

.product-price-list .product-price-list-value i,
.product-price-price .product-price-price-value i {
	font-size: 13px;
	font-weight: normal;
}

.product-page .product-price-financing {
	font-size:12px;
	font-weight:normal;
	color: #405A74;
}

#product-price-price-start.product-price-price-strike .product-price-price-value {
	text-decoration: line-through;
	animation: strike 0.2s linear;
	text-decoration-color: #949494;
	/*font-weight: normal;*/
	color: #949494;
	transition:all 0.2s linear;
}
  
@keyframes strike{
	0%   { text-decoration-color: transparent; }
	100% { text-decoration-color: #949494; }
}

.product-page #price {
}

.product-page #listprice {
	font-weight:normal;
	font-size:15px;

}

#product-price-price-now {
	display: none;
}

.product-availability .product-availability-value,
.product-price-price-value,
.product-page #price,
.product-page .price-rewards {
	font-size:17px;
	text-align: left;
}

.product-price-price .product-price-price-value {
	color: #4a4a4a;
	font-size: 17px;
	font-weight: bold;	
}

.product-price-rewards .product-price-rewards-value {
	color: #1A6DF1;
	font-size: 17px;
	font-weight: bold;	
}

.product-price-rewards .product-price-rewards-label {
	color: #1A6DF1;
}

.product-page .product-description #price,
.product-page .product-description #pricebulk,
.product-page .product-description .product-price-price {
}

.product-page .product-est .product-est-value {
	color: #3c763d;
	font-weight:bold;
	font-size: 85%;
	text-align: left;
}

.product-page .product-shipping {
	margin-top:0px;
}

#product-shipping-ship-date.loading {
	color: #bbbbbb;
	font-weight:normal !important;
}

.product-page .product-shipping-value {
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	font-size: 13px;
}

.product-shipping-label {
	vertical-align: top;
}

.product-shipping-notice {
	margin-top: 10px;
	font-size: 11px;
	border-top: 1px solid #e9e9e9;
	padding: 12px;
	font-style: italic;
	color: #6d6d6d;
}

@media (min-width: 768px) {
	.product-shipping-notice {
		padding:10px;
	}
}

.product-shipping-notice:empty {
	display: none;
}

/* to deprecate */
.no-po-box-msg-container{
	margin-bottom:12px;
	margin-top:10px;
	margin-left:14px;
}

.freight-msg-container {
	margin-bottom:12px;
	margin-top:10px;
	margin-left:14px;
}

.freight-msg {
	font-style: italic;
	padding:12px;
	color:#6d6d6d;
}

.no-po-box-msg {
	font-style: italic;
	color:#6d6d6d;
}

@media (min-width: 768px) {
	.no-po-box-msg {
		padding:10px;
	}
}
/* end deprecate */

/* start quote */

.product-financing .css--modal-content {
	background-color: #fff;
}

.product-financing .css--modal-header {
	border-bottom: 1px solid #dfdfdf;
}

.product-financing .css--modal-body {
	margin-bottom:20px;
	width:100%;
}

.product-request-quote .css--modal-content,
.product-request-quote .css--modal-body {
	max-width:545px;
	width:100%;
}

.product-page-request-half {
	grid-column-gap: 20px;
	grid-template-columns: 1fr 1fr;
}

@media (min-width: 560px) {
	.product-page-request-half {
		display: grid;
	}
}

.product-request-quote hr {
	margin:10px 0;
}

.product-page-form-required {
	color: #E74D3C;
}

.product-request-quote .form-group {
	display: inline-block;
	width: 100%;
}

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

.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-open {
	width:100%;
	background-color: #E8FAEF;
	color: #0B5C2A;
	padding:10px 10px;
}

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

.product-request-quote-open a,
.css--modal-body .product-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;
}

.product-page-request-quote-btn {
	width: fit-content;
	margin-top: 4px;
	padding: 6px 18px;
	border-radius: 5px;
	color: #344A5F;
	cursor: pointer;
	text-decoration: underline;
	display: flex;
	justify-content: end;
	font-size: 13px;
	margin-right: 0;
	margin-left: auto;
}

.product-page-request-quote-btn:hover {
	color: #2B3D4F;
}

.product-page-request-quote-btn-focus {
	margin-top: 7px;
	padding: 7px 22px;
	border-radius: 5px;
	border: 1px solid #3e5870;
	cursor: pointer;
	display: flex;
	justify-content: center;
	font-size: 15px;
	margin-right: 0;
	margin-left: auto;
	text-align: center;
	color: hsl(209deg 29% 94%);
	background-image: linear-gradient(to top, #344a5f, #476480);
}

@media (max-width: 767px) {
	.product-page-request-quote-btn-focus,
	.product-page-request-quote-btn {
		width:100%;
		display:block;
		text-align: center;
	}
}

.product-page-request-quote-btn-focus:hover {
	color: #fff;
	text-decoration: underline;
	background-image: linear-gradient(to top, #476480, #344a5f);
}

/* end quote */

.product-page .product-shipping-value img {
	margin:0 5px;
}

.product-shipping-free {
	display:block;
	font-size:12px;
}

.product-shipping-free svg {
	width:25px;
	height:14px;
	display:inline-block;
	margin: -3px 6px;
}

@media (min-width: 768px) {
	.product-shipping-free {
		display:inline;
	}
}

.product-shipping-free img {
	display:none;
}

@media (min-width: 768px) {
	.product-shipping-free img {
		display:inline-block;
	}
}

.product-page .product-checkbox-container input[type="checkbox"] {
	display:inline-block;
}

/* text align pricing table to the right for desktop */
@media (min-width: 768px) {
	.product-availability-label,
	.product-price-list-label,
	.product-price-price-label,
	.product-price-license-label,
	.product-price-general-label,
	.product-price-rewards-label,
	.product-shipping-label {
		text-align: right;
	}
}

.product-page .padding-tight {
	padding:5px;
}

.product-page .product-description .product-price-availability {
	text-align: right;
}

/* addons */
.addon-toggle {
	display:none;  
	padding:3px 8px;
	margin-left:15px;
	border-radius:3px;
	cursor: pointer;
	font-size:11px;
	text-transform: uppercase;
	font-family:'Montserrat';
	transition: background-color 0.3s ease;
	background: #3498db;
	color: #fff;
	position:relative;
}

.product-page-multi-sku .addon-toggle { /* no display:none;  for VueJS use */
	display:inline-block;
}

.addon-toggle-active {
	background: #3498db;
	color: #fff;
}

.addon-toggle-inactive {
	background: #cecece;
	color: #fff;
}

.product-page .product-addons h3 {
	font-size:20px;
	margin-top: 5px;
}

.product-page .addon-item {
	font-family: 'Montserrat', sans-serif;
	padding:10px 20px;
}

	.product-page .addon-item:hover {
		background-color: #f5f5f5;
	}

.product-page .product-addon-details s {
	/* color:#737373; */
	font-size: small;
}

.product-page .addon-title {
	font-family: 'Montserrat', sans-serif;
	display:inline-block
}

.product-page .product-addons-title.pointer {
	cursor: pointer;
}

.product-page .product-addons-show-more {
	box-shadow: 0px -7px 5px whitesmoke;
	text-align: center;
	font-size: 13px;
}

.product-page .product-addons-show-more a {
	color: rgba(6, 87, 152, 1);
	font-family: 'Montserrat', sans-serif;
	display: block;
	padding:10px 0;
}

.product-page #product-addon-more {
	display:none;
}

#product-addons {
	position:relative;
}

.product-addons {
	line-height: 1.42857143;
}

.product-addon-fadeout {
	position: absolute;
	height: 125px;
	bottom: 0;
	right: 0;
	left: 0;
	
	display:none;
	
	/* todo, add a png fallback for this */
	background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -moz-linear-gradient( rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -o-linear-gradient(rgba(251, 251, 251, 0) 0%,#f7f9f9 100%);
	background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, #f7f9f9 100% );
	background-image: -ms-linear-gradient(rgba(251, 251, 251, 0) 0%,#f7f9f9 100%);
}

.product-page-multi-sku .product-addon-fadeout { /* no display:none;  for VueJS use */
	display: block;
}

.product-page .product-addons-background {
	background: #F7F9F9;
	border-top: 2px solid #3498db;
	position: relative;
}

.product-page .product-addon-view-product {
	width: 100%;
	/*background: #f3f3f3;*/
	font-size: 11px;
	border-radius:3px;
	padding: 6px 11px;
	display: inline-block;
	margin-top: 7px;
	text-align: center;
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}
	
	@media (min-width: 425px) {
		.product-page .product-addon-view-product {
			display:inline;
		}
	}

	.product-page .product-addon-view-product:hover {
		/*background: #e8e8e8;*/
		/*text-decoration: none;*/
		color: #1C3C56;
	}

.product-page .product-addon-single {
	margin: 0 0 8px;
	padding-bottom: 3px;
}

.product-page .product-addon-single:last-child {
	border-bottom:none;
}


.product-page .product-addon-single .product-addon-checkbox {
	margin:0;
	cursor: pointer;
}

.product-page .product-addon-checkbox label {
	font-family: 'Roboto', sans-serif;
	padding-left:20px;
	cursor: pointer;
	font-size:14px;
	margin-bottom:3px;
}

.product-page .product-addon-checkbox input {
	margin-right: 8px;
	margin-left:-20px;
	position:absolute;
}

.product-page .product-addon-single-disabled label {
	opacity:0.65;
}

.product-page .product-addon-details {
	margin-top:0;
	margin-left: 21px;
	text-transform: none;
	color: #333;
}

/* padding for each section */
.product-page .padding-normal {
	padding:10px 15px;
}

/* addons title row */
.product-page .product-addons-title {
	margin:5px 0 0 0;
	font-size:17px;
}

/* addons title row */
.product-page .active-sku-title {
	margin:5px 0 0 0;
	font-size:20px;
}

/* remove bottom padding */
.product-page .padding-no-bottom {
	padding-bottom:0 !important;
}

/* shipping */
.product-page .product-shipping #shippingDataContainer span {
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
}

/* stock */
.btn-subscribe-blue {
	background: #2980b9;
	width:100%;
	display:block;
	margin: 10px 0 0 0;
	padding: 13px;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-weight: 600;
}

	.btn-subscribe-blue:hover {
		background: #2980b9;
		color: #fff;
	}

.product-page .btn-subscribe {
	background: #F39C0F;
	width:100%;
	display:block;
	margin: 10px 0 0 0;
	padding: 13px;
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-weight: bold;
}

	.product-page .btn-subscribe:hover {
		background: #E77E21;
	}

.product-page .product-notify-me {
	display: inline;
	padding: 0.2em 0.6em 0.3em;
	font-size: 75%;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25em;
	margin-left:4px;
	cursor: pointer;
}

.product-page .product-outofstock .product-notify-me {
	background: #F39C0F;
}

.product-page .product-preorder .product-notify-me {
	background: #344A5F;
}

.product-page .product-available .product-availability-value {
	color: #27AF60;
}

.product-page .product-delayed .product-availability-value {
	color: #E77E21;
}

.product-page .product-ondemand .product-availability-value {
	color: #C1A028;
}

.product-page .product-preorder .product-availability-value {
	color: #344A5F;
}

.product-page .product-outofstock .product-availability-value {
	color: #F39C0F;
}

.product-page .product-retired .product-availability-value,
.product-page.product-page-retired .product-availability-value {
	color: #A94442;
}

.product-page .product-limited .product-availability-value {
	color: #E77E21;
}

.product-page .multi-sku-container {
	padding-top:8px;
	padding-bottom:8px;
}

.product-page .multi-sku-container .sku-name-link{
	margin:0 0 1px;
	font-size:15px;
	font-family: 'Montserrat', sans-serif;
	width:100%;
}

.product-page .active-sku-widget:hover a{
	text-decoration: underline;
	color:#2a6496
}

/* product page content */
.product-page .product-content {
	margin: 10px 0 45px 0;
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;

	/* Instead use this non-standard one: */
	word-break: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.product-content h1,
.product-content h2,
.product-content h3,
.product-content h4,
.product-content h5 {
	text-transform: uppercase;
}

.product-content h2 {
	font-size:21px;
}

.product-content h3 {
	font-size:18px;
}

.product-content h4 {
	font-size:16px;
}

.product-content h5 {
	font-size:13px;
}

.product-content img,
.product-content iframe,
.product-content video {
	max-width:100%;
}

.product-content a {
	text-decoration: underline;
	color: #287FB8;
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;

	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.product-content a:hover {
	color:#3498DB;
}

.product-content .content-body {
	overflow:hidden;
}

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

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

.product-final-sale-notice {
	margin-top: 15px;
	font-style: italic;
}

/* related sales */

.feature-pw2022a .product-related-sales-slider .products-container {
	margin-bottom: 0;
}

.feature-pw2022a .product-related-sales-slider .products-container .product-single-container {
	background-color: transparent;
}

.product-related-sales-slider .product-listing-overlay-sale .product-image img {
	margin:auto;
}

.product-related-sales {
	background: #F4F5F5;
	padding: 15px;
	border-radius:5px;
	display: block;
	margin:15px 0;
}

.product-related-sales-title {
	font-size: 18px;
	margin-bottom:5px;
}

/* MH Carousel
   CSS scroll-snap strip shell for the related-sales strips, scoped under
   .product-related-sales. Ported from public-home.css (.page-home
   .mh--carousel-*); the product page loads public-store.css and never
   public-home.css, so these rules have to be self-contained here. The JS engine
   (initMhCarousels in public-scripts.js) handles drag, snap, arrow scrolling,
   and overflow detection. */
.product-related-sales .mh--carousel-scroller {
	display: flex;
	align-items: center;
	margin: 0; /* no bottom margin here: .product-related-sales already pads the box */
	min-width: 0;
	max-width: 100%;
}

.product-related-sales .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-related-sales .mh--carousel-track.mh--carousel-dragging {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
	-webkit-user-select: none;
	user-select: none;
}

.product-related-sales .mh--carousel-track::-webkit-scrollbar {
	display: none;
}

.product-related-sales .mh--carousel-track:empty {
	display: none;
}

.product-related-sales .mh--carousel-arrow {
	align-self: stretch;
	background-color: #e2e2e2;
	padding: 2px 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 2px;
	border: none;
}

.product-related-sales .mh--carousel-arrow svg {
	stroke: #4a4a4a;
	color: #4a4a4a;
}

.product-related-sales .mh--carousel-arrow-prev {
	margin-right: 2px;
}

.product-related-sales .mh--carousel-arrow-next {
	margin-left: 2px;
}

.product-related-sales .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):hover,
.product-related-sales .mh--carousel-arrow:not(.mh--carousel-arrow-disabled):active {
	background: #EEF3FA;
}

.product-related-sales .mh--carousel-arrow.mh--carousel-arrow-disabled {
	opacity: 0.3;
}

.product-related-sales .mh--carousel-arrow.mh--carousel-arrow-hidden {
	display: none;
}

/* Product cards: match the site-wide grid column width
   (public.css .products-container repeat(auto-fill, 270px)). flex-basis, not
   width: public.css:1247 sets width:auto on
   .products-container.products-container-non-responsive .product-single at
   equal specificity, and flex-basis wins for flex-item sizing regardless of
   source order. */
.product-related-sales .mh--carousel-track > .product-single {
	flex: 0 0 270px;
	scroll-snap-align: start;
}

.product-content .products-container a {
	font-weight:normal;
}

/* add padding to the bottom of the page */
.product-page #questions {
	margin-bottom:30px;
}

.product-page #questions #comments-view-all {
	padding: 0 5px;
}

@media (min-width: 990px) {
	.product-page #questions #comments-view-all {
		padding: 0 25px;
	}
}

/* retired products */

.product-retired {
	max-width: 1200px;
	margin:auto;
}

.product-retired .products-container {
	border: 1px solid #e0e0e0;
	margin-top: 15px;
	background: #fff;
}

.product-retired .product-group-explore {
	margin:10px;
	background: #fff;
	padding: 15px;
}

.product-retired-box {
	border: 1px solid #F7F9F9;
	padding: 20px;
	margin-top: 15px;
	font-family: 'Roboto', sans-serif;
	border-top: #2B3D4F 2px solid;
	background:#F7F9F9;
}

.product-retired-box-title {
	font-size:18px;
	color: #2B3D4F;
	margin-bottom:5px;
}

.product-retired-box-title span {
	font-weight:bold;
}

.product-retired-box-desc {
	color:grey;
}

/* multi-sku listing page */

.product-page .product-page-checkout-button ,
.product-page .go-to-checkout-button {
	background: #2ECC70;
	margin: 10px 0 0 0;
	width:100%;
}

	.product-page .product-page-checkout-button:hover,
	.product-page .product-page-checkout-button:active,
	.product-page .go-to-checkout-button:hover,
	.product-page .go-to-checkout-button:active {
		background: #27AF60;
	}

.product-page .sku-is-on-clearance .product-page-checkout-button {
	background-color: #E8230D;
}

.product-information-box {
	display: grid;
	border-radius:5px;
	padding: 25px;
	background: #F7F9F9;
}

/* SKU warnings */
.sku-warning-box:empty {
	display:none;
}

.sku-warning-box {
	display: grid;
	grid-column-gap: 15px;
	grid-template-columns: 30px 1fr;
	border-radius:5px;
	padding: 25px;
	background: #F7F9F9;
}

.sku-warning-box h3 {
	grid-column-start: -1;
	grid-column-end: 1;
	margin: 0 0 12px;
	text-transform: none;
}

.sku-warning-message {
	margin:0 0 10px;
}

.sku-warning-message:last-child {
	margin-bottom:0;
}

/* widget sidebar font sizing */

.side-nav .product-detail-widget-item-label {
	font-size: 13px !important;
}

.side-nav .cart-text-highlight-color {
	font-size:13px !important;
}

.side-nav .product-detail-widget-action-links {
	font-size:17px;
}

/* article collections */

.article-collections {
	width:100%;
}

.article-collections a.article {
		background: transparent;
		color: #404040;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex; 
		padding:15px 10px;
		border-bottom: 1px solid #F7F9F9;
		border-radius:3px;
		*zoom: 1;
}

	@media screen and (min-width: 767px) {
		.article-collections a.article {
			padding:10px;
		}
	}

.article-collections a.article:last-child {
	border-bottom:none;
}

	/* clearfix */
	.article-collections a.article:before {
		display: table;
		content: "";
		line-height: 0; 
	}

	.article-collections a.article:after {
		display: table;
		content: "";
		line-height: 0;
		clear: both;
	}
	
	.article-collections a.article:hover {
		background-color: #F7F9F9;
		text-decoration:none;
	}
	
	.article-collections a.article:hover .article-title {
		text-decoration:underline;
		color: #005195;		
	}

	.article-collections .article-image {
		float:none;
		vertical-align: top;
		text-align: center;
		/* margin:auto; */
		display:none;
	}

	@media screen and (min-width: 767px) {
		.article-collections .article-image {
			display:block;
			padding: 0 15px 0 0px;
		}
	}

	.article-collections .article-meta {
		width:100%;
		margin:auto;
	}
	
	.article-collections .article-image img {
		display:inline-block;
		border-radius:50%;
		margin: 0 10px 10px 0;
		max-width: 47px;
		float: left;
	}

	@media screen and (min-width: 767px) {
		.article-collections .article-image img {
			max-width:50px;
		}
	}		
	
	.article-collections .article-desc {
		font-size:13px;
		max-width:100%;
	}
	
	.article-collections .article-title {
		font-size: 14px;
		max-width:100%;
		text-transform: none; /* override public.css */
		font-family:'Montserrat', sans-serif;
		margin: 0 0 4px 0;
		color: #333;
		font-weight: bold;
		letter-spacing: -0.03px;
		line-height: 1.3;
	}

	.digital-name,
	.digital-cta,
	.digital-image {
		display:inline-block;
	}

	@media (min-width: 450px) {
		.digital-cta,
		.digital-image {
			margin:0 7px 0 0;
		}
	}

	.product-page .digital-cta .btn {
		text-transform: none;
	} 

	.product-page .design-file-downloads .product-addon-single {
		margin-top:5px;
		margin-bottom:5px;
	}

	.digital-name {
		color: #565656;
	}

	.digital-image {
		background-color: #AEB7BF;
		padding:3px;
	}

	.digital-image img {
		max-height: 29px;
		height: 29px;
		width: 29px;
	}

	.product-page .add-to-library-button {
		background-color: #2ECC70;
		width: 100%;
		padding: 13px;
	}
	.product-page .add-to-library-button:hover {
		background-color: #27AF60;
	}		

@media print {
	.breadcrumb,
	.product-price-spacing .input-group,
	.product-page .go-to-checkout-button,
	.product-addon-view-product,
	.btn-subscribe,
	.product-page .product-notify-me {
		display:none !important;
	}

	.product-page {
		max-width:100%;
	}

	.product-addons-background {
		border:none !important;
		margin:0 !important;
	}

	.product-page .slick-slide {
		width:45% !important;
		max-width:500px !important;
		float:left !important;
		margin:auto !important;
	}

	.product-page .product-carousel {
		border:none !important;
	}

	.product-page .product-carousel-nav.slick-initialized {
		display:none !important;
	}

	.product-page .product-carousel.slick-initialized .slick-track {
		max-width:100% !important;
		width:100% !important;
		overflow:hidden !important;
		transform:none !important;
	}

	.product-page .product-carousel.slick-initialized .slick-slide {
		display:inline-block !important;
		margin:20px;
	}

	/* mh--gallery (the scroll-snap gallery that replaces slick): same idea as the
	   slick rules above -- drop the thumbnail rail and unroll the scroller so every
	   image prints instead of just the one in view. */
	.product-page .mh--gallery-rail {
		display:none !important;
	}

	.product-page .mh--gallery {
		display:block !important;
	}

	.product-page .mh--gallery-stage {
		display:block !important;
		overflow:visible !important;
		border:none !important;
	}

	.product-page .mh--gallery-slide {
		display:inline-block !important;
		width:45% !important;
		max-width:500px !important;
		margin:20px !important;
	}
}

.product-page .product-breadcrumb {
	width:100%;
}

@media (min-width: 1000px) {
	.product-page .product-breadcrumb {
	}
}

.product-page .product-description {
	width:100%;
	display: flex;
	flex-direction: column;
	line-height: 1.6;
}

@media (min-width: 1200px) {
	.product-page .product-description {
		width:40%;
		float:right;
	}
}

.product-page .product-description a {
	text-decoration: underline;
	color: #005195;
}

.product-page .product-description a.btn {
	text-decoration: none;
	color: #fff;
}

.product-page .product-photos {
	width:100%;
	margin-bottom: 15px;

	/* to keep price rules from overflowing with slickjs */
	min-height: 0;
	min-width: 0;
}

@keyframes zoominoutsinglefeatured {
	0% {
		transform: scale(1.2,1.2);
		opacity:0;
	}
	100% {
		transform: scale(1,1);
		opacity:1;
	}
}

.product-photos .product-carousel .item:first-child img.gallery-cell-image {
	/*animation: zoominoutsinglefeatured 1s ;*/
}

.admin-note {
	margin-top:15px;
	max-width:800px;
	padding-left: 15px;
	padding-right: 15px;
}

.admin-note h3{
	margin-top:0;
	font-size:18px;
}


@media (min-width: 1200px) {
	.product-page .product-photos {
		width:55%;
	}
}

.product-page .product-details {
	width:100%;
	display:block;
	max-width: 660px;
	line-height: 1.6;
}

.product--price-financing {
	font-size:12px;
}

.product-page .product-details-section,
.product-page .product-details-description {
	border-bottom: 1px solid #E6E6E6;
	margin-bottom:20px;
	padding-bottom:10px;
}

.product-page .product-details-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;
}

.product-page .product-questions {
	width:100%;
	max-width: 660px;
}

@supports (display: grid) {
	.product-page {
		display:grid;
		grid-column-gap: 30px;
		grid-template-columns: minmax( 0, 1fr );
		grid-template-rows: auto;
		grid-template-areas:
			"breadcrumb"
			"title"
			"photos"
			"description"
			"details" 
			"questions";
	}

	@media (min-width: 1200px) {
		.product-page {
			grid-column-gap: 30px;
			grid-template-columns: minmax( 0, 1fr ) minmax( 0, 466px );
			grid-template-rows: auto;
			grid-template-areas:
				"breadcrumb breadcrumb"
				"photos title"
				"photos description"
				"details description"
				"questions description";
		}
	}

	.product-page .product-breadcrumb {
		grid-area: breadcrumb;
		float:none;
		width:100%;
	}

	.product-page .product-description {
		grid-area: description;
		float:initial;
		width:initial;
	}

	.product-page .product-photos {
		grid-area: photos;
		float:initial;
		width:initial;
	}

	@media (min-width: 1200px) {
		.product-page .product-photos {
			margin-top: initial;
		}
	}

	.product-page .product-details {
		grid-area: details;
	}

	.product-page .product-questions {
		grid-area: questions;
	}

	.product-page .product-heading {
		grid-area: title;
	}

	.product-page .product-price {
		grid-area: price;
	}
}

/* multi-sku */

.product-page .product-attributes {
	border-top: 1px solid lightgrey;
	padding-top:15px;
}

.product-page .product-attribute-description {
	font-size: 13px;
	color: #868686;
	margin-bottom: 3px;
}

.product-page .product-attribute {
	padding: 5px 13px 2px;
	margin: 0 0 7px;
}

.product-page .product-attribute:last-child {
	margin:0;
}

.product-page .product-attribute-droplist select {
	border: 2px solid #F39C0F;
	width:auto;
	border-radius:3px;
	min-width: 110px;
	padding: 4px;
	outline:0;
	color: #F39C0F;
	font-weight: bold;
}

.product-page .product-attribute-droplist select:active,
.product-page .product-attribute-droplist select:focus {
	border-color: #F39C0F;
	-webkit-box-shadow: inset 0 1px 1px #f39c0f54, 0 0 8px #f39c0f54;
	box-shadow: inset 0 1px 1px #f39c0f54, 0 0 8px #f39c0f54;
}

.product-page .product-attribute-droplist select option {
	color: #555;
}

.product-page .product-attribute-option {
	cursor:pointer;
	border-radius:3px;
	position: relative;
}

.product-page .product-attribute-color .product-attribute-option {
	width:100%;
	height:35px;
	display:inline-block;
	border:2px solid #dadada;
	border-radius:5px;
}

.product-page .product-attribute-thumbnail .product-attribute-option,
.product-page .product-attribute-thumbnail .product-attribute-option img {
	width:55px;
	height:55px;
}

.product-page .product-attribute-thumbnail .product-attribute-option.product-attribute-inactive:not(.product-attribute-pre-order) {
	order: 25;
}

.product-page .product-attribute-option.product-attribute-retired-hide {
	display: none;
}

.product-page .product-attribute-options {
	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 */
	flex-wrap:wrap;
	margin-top:7px;
	gap: 7px;
}

.product-page .product-attribute-container > div {
	padding-bottom:7px;
}

.product-page .product-attribute-container > div:last-child {
	padding-bottom:0;
}

.product-page .product-attribute-thumbnail .product-attribute-options {
	display: grid;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
}

.product-page .product-attribute-color .product-attribute-options {
	display: grid;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
}

.product-page .product-attribute-label-title {
	font-size: 13px;
}

.product-page .product-attribute-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: initial;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.product-page .product-attribute-label-selected {
	font-weight:bold;
}

.product-page .product-attribute-pill {
	padding:8px 13px;
	display:inline-block;
	box-shadow: 1px 1px 0px 0px #e6e6e6;
	border: 2px solid #C1C1C1;
	background-color: rgba(255, 255, 255, 0.75);
	min-width: 72px;
}

.product-page .product-attribute-option.product-attribute-on-sale:before {
	content: "Sale";
	display: block;
	color: #fff;
	background-color: #2ECC70;
	border-radius: 10px;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-align: center;
	width: 30px;
	margin-left: -15px;
	position: absolute;
	top: -6px;
	left: 50%;
}

.product-page .product-attribute-option.product-attribute-pre-order:before {
	content: "Pre-order";
	display: block;
	color: #fff;
	background-color: #344A5F;
	border-radius: 10px;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-align: center;
	width: 54px;
	margin-left: -27px;
	position: absolute;
	top: -6px;
	left: 50%;
}

.product-page .product-attribute-selected {
	font-weight: bold;
	color: #F39C0F;
	border-color: #F39C0F;
}

.product-attribute-inactive,
.product-attribute-inactive div.strike{
	cursor:default;
	background-color: transparent;
	background-image: repeating-linear-gradient(163deg, transparent 0%, transparent 48%, #dadada 50%, transparent 52%, transparent 100%);
	color: #c1c1c1;
	opacity: 0.7;
}

.product-attribute-radio-inactive {
	cursor:default;
	background-color: transparent;
	color: #c1c1c1;
	opacity: 0.7;
}

.product-attribute-inactive div.strike {
	color: #333;
	opacity: 0.5;
}

.product-attribute-thumbnail .product-attribute-option {
	display: block;
	position: relative;
	margin: 0 2px;
}

.product-attribute-thumbnail .product-attribute-option img {
	border: 2px solid #dadada;
	border-radius:5px;
}

.product-attribute-thumbnail .product-attribute-selected img {
	border-color: #F39C0F;
}

.product-page .product-attribute-color .product-attribute-selected {
	border-color: #F39C0F;
}

.product-attribute-thumbnail .product-attribute-option div.strike {
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	z-index: 5;
	background-color: #ccc;
	display: none;
	pointer-events: none;
}

.product-attribute-thumbnail .product-attribute-option.product-attribute-inactive div.strike:after {
	content: "";
	position: absolute;
	display: block;
	height: 100%;
	width: 100%;
	pointer-events: none;
	background-image: repeating-linear-gradient(163deg, transparent 0%, transparent 48%, #333 50%, transparent 52%, transparent 100%);
}

.product-attribute-thumbnail .product-attribute-option.product-attribute-inactive div.strike {
	display: block;
	color: #000;
}

.product-description .product-attribute-container {
	background: #f7f9f9;
	margin-top:10px;
	margin-bottom:0;
	padding-bottom:10px;
}

.product-price-shipping .product-shipping-value .loading {
	color: #bbbbbb;
	font-weight:normal !important;
}

/* Pre-order button styles */

.product-attribute-no-sku {
	display: none !important;
}

.product-attribute-pill.product-attribute-inactive.product-attribute-pre-order {
	color: #333;
	background-image: none;
	padding: 13px 13px 3px;
}

.product-attribute-pill.product-attribute-inactive.product-attribute-pre-order,
.product-attribute-pill.product-attribute-inactive.product-attribute-pre-order div.strike{
	opacity: 1;
}

.product-attribute-pill.product-attribute-inactive.product-attribute-pre-order:before {
	content: "Pre-order";
	position: absolute;
	top: 4px;
	color: #344A5F;
	font-size: 10px;
	font-weight: bold;
	display: block;
}

.product-attribute-selected.product-attribute-pill.product-attribute-inactive.product-attribute-pre-order,
.product-attribute-selected.product-attribute-pill.product-attribute-inactive.product-attribute-pre-order:before {
	font-weight: bold;
	color: #F39C0F;
	border-color: #F39C0F;
}

/* Pre-order image thumbnail styles */
.product-attribute-thumbnail .product-attribute-option.product-attribute-inactive.product-attribute-pre-order {
	opacity: 1 !important;
	position: relative;
}

.product-attribute-thumbnail .product-attribute-option.product-attribute-inactive.product-attribute-pre-order::before {
	content: "Pre-order";
	font-size: 9px;
	text-align: center;
	padding-top: 18px;
	color: #000;
	background-color: #ddd;
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	opacity: 0.5;
	pointer-events: none;
}

.product-attribute-thumbnail .product-attribute-option.product-attribute-inactive.product-attribute-pre-order div.strike {
	opacity: 0 !important;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.large-overlay-spinner{
	opacity: 0.75;
	pointer-events: none;
}
.large-overlay-spinner:before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	border-radius: 50%;
	border: 2px solid #ccc;
	border-top-color: #000;
	animation: spinner .5s linear infinite;
}

.product-price-price-value.product-available {
	color: #E77E21;
}

.product-price-loading {
	padding:10px;
	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 */
	justify-content: center;
	text-align:center;
}

.product-attribute-loading {
	padding:10px;
	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 */
	justify-content: center;
	text-align:center;
}

/* 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 {
		-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;
		background-color: rgba(10, 10, 10, 0.2);
		border: none;
		border-radius: 290486px;
		cursor: pointer;
		display: inline-block;
		flex-grow: 0;
		flex-shrink: 0;
		font-size: 1rem;
		height: 20px;
		max-height: 20px;
		max-width: 20px;
		min-height: 20px;
		min-width: 20px;
		outline: none;
		position: absolute;
		vertical-align: top;
		width: 20px;
		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;
	}

	.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;
		position: absolute;
		right: 0;
		top: 0;
		align-items: center;
		display: none;
		justify-content: center;
		overflow: hidden;
		position: fixed;
		z-index: 20;

		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;
		background-color: rgba(10, 10, 10, 0.2);
		border: none;
		border-radius: 290486px;
		cursor: pointer;
		display: inline-block;
		flex-grow: 0;
		flex-shrink: 0;
		font-size: 1rem;
		height: 20px;
		max-height: 20px;
		max-width: 20px;
		min-height: 20px;
		min-width: 20px;
		outline: none;
		position: absolute;
		vertical-align: top;
		width: 20px;
		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;
		text-decoration: none;
		-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;
	}

	.product-notification .css--modal-body {
		margin-top:6px;
	}

	.product-notification .product-notification-message {
		background: #FCEBE9;
		padding: 10px;
		font-size: 12px;
		color: #A71C15;
	}

	.product-notification .css--modal-title {
		margin:0;
		font-size:15px;
	}

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

	.product-notification .css--modal-content,
	.product-notification .css--modal-body,
	.product-notification .css--modal-card {
			width: 400px;
	}

	.product-notification .product-notification-loading {
		display:inline-block;
		margin:0 4px 0 0;
		width:20px;
		height:20px;
	}

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

/* reason to buy from MatterHackers */
.product-whybuy {
	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 */
	flex-wrap: wrap;
	justify-content: center;
	background: #297eb7;
	color: #fff;
	padding: 15px 20px;
	align-items: center;
	border-radius: 5px;
	margin: 30px auto 15px;
	background-image: url(https://lh3.googleusercontent.com/_-z3RkF9IlLbnnucGwL0b4n_5Rw3NZU58GkdXIatic7_owGrSvlFXP0ZhB0L6kvBTAFJVeiBDB_fGC4AS9JSGxSQBg=s600);
	background-position: center center;
	background-size: cover;
}

@media (min-width: 768px) {
	.product-whybuy {
		padding: 20px 30px;
	}
}

.product-whybuy strong {
	color: #fff;
}

.product-whybuy a {
	font-weight: bold;
	color: #fff !important;
	text-decoration: underline;
}

.product-whybuy-desc {
	line-height: 1.6;
	color: #e4f4ff;
}

.product-whybuy-desc ul {
	padding:3px 0 3px 10px;
}

@media (min-width: 768px) {
	.product-whybuy-desc ul {
		padding:5px 0 5px 20px;
	}
}

.product-whybuy-desc li {
	margin-bottom:10px;
}

.product-whybuy-desc li strong {
	font-size:16px;
}

.product-whybuy .product-whybuy-content {
	width: 100%;
	min-width: 50%;
}

.product-whybuy .product-whybuy-title {
	font-size: 18px;
	word-wrap: normal;
	margin-top: 5px;
	margin-bottom: 10px;
	font-family:'Montserrat', sans-serif;
}

/* Holiday Shipping Messaging */
.product-page-gift-card-promotion {
	display: grid;
	grid-column-gap:15px;
	grid-template-columns: 35px 1fr;
	border: 1px solid #bf3a2b24;
	border-radius: 10px;
	padding: 6px 9px;
	font-size: 13px;
	width: 100%;
	margin-top: 4px;
	background-color: #fcf3f3;
	color: #91180a;
}

.product-page-gift-card-promotion a {
	color: #BF3A2B;
	text-decoration: underline;
}

.product-page-gift-card-promotion a:hover {
	color: #E74D3C;
}

.product-page-gift-card-promotion-title {
	font-size: 14px;
	display:block;
	font-weight: bold;
	color: #BF3A2B;
}

.product-page-gift-card-promotion-image {
	width: 26px;
	fill: #BF3A2B;
	align-self:center;
	justify-self: center;
}

.product-page-gift-card-promotion:hover .product-page-gift-card-promotion-image {
	opacity:0.7;
	transition:all 0.2s linear;
}

/* Apple Pay */

/* CSS */
.apple-pay-button:empty {
	display:none;
}

.apple-pay-button {
	display: inline-block;
	-webkit-appearance: -apple-pay-button;
	-apple-pay-button-type: buy; /* Use any supported button type. */
}

.apple-pay-button-black {
	-apple-pay-button-style: black;
}

.apple-pay-button-white {
	-apple-pay-button-style: white;
}

.apple-pay-button-white-with-line {
	-apple-pay-button-style: white-outline;
}

/* apple pay overrides */
.apple-pay-button {
	width:100%;
	padding:20px;
	max-width:400px;
	margin:10px auto 0;
	display:block;
}

/* wishlist */

.product-page-wishlist {
	font-size:12px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	grid-column-gap: 10px;
}

.product-page-wishlist-heart {
	margin-right:-8px;
	cursor: pointer;
	height: 50px;
	width: 50px;
	background-image:url( 'https://lh3.googleusercontent.com/rlJkS1NIEcIeGkGwdxkLtceABZLt6KU3YpxXiPHsvWjPpNBVcac-1wfzJsdN40QhFoS2ywG-MAph2L8gDWFTG1MzxbZLH0osuBEauyb8=h50');
	background-repeat:no-repeat;
	background-size:2900%;
	display:inline-block;
	background-position:left;
	margin-top: -5px;
}

.product-page-wishlist-btn {
	display: inline-flex;
	align-items: center;
	margin-left: -8px;
}

.product-page-wishlist-btn:hover .product-page-wishlist-heart {
	background-position:right;
}

.product-page-wishlist-is-active {
	background-position:right;
}

.product-page-wishlist-is-animating {
	animation: heart-burst .8s steps(28) 1;
}

.product-page-wishlist-status {
	margin-left:5px;
}

@keyframes heart-burst {
	from {background-position:left;}
	to { background-position:right;}
}

/* ---- product page image zoom (hover zoom) ---- */
.product-zoom-lens {
	display: none;
	position: fixed;
	z-index: 30; /* above #product-page-badge (z-index 1), below fixed bars (1000+) */
	pointer-events: none;
	background-color: rgba(102, 153, 204, 0.30);
	border: 1px solid rgba(60, 110, 160, 0.65);
}
.product-zoom-pane {
	display: none;
	position: fixed;
	z-index: 30;
	pointer-events: none;
	overflow: hidden;
	background-color: #fff;
	background-repeat: no-repeat;
	border: 1px solid #e6e6e6;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
/* Only while the zoom is on -- public-product-image-zoom.js adds the class off its
   ZOOM_ENABLED flag, and a crosshair over an image that doesn't zoom is a lie. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	body.mh--product-zoom-on .product-page .product-carousel img.gallery-cell-image,
	body.mh--product-zoom-on .product-page .mh--gallery-stage img.mh--gallery-image {
		cursor: crosshair;
	}
}

/* ---- product page image lightbox (full view) ---- */
/* The main image opens the full-view lightbox on click, so it always needs an affordance.
   Scoped to the zoom being off rather than to a media query: when ZOOM_ENABLED flips on,
   the crosshair rule above takes over on desktop and this keeps the hint everywhere else. */
body:not(.mh--product-zoom-on) .product-page .product-carousel img.gallery-cell-image,
body:not(.mh--product-zoom-on) .product-page .mh--gallery-stage img.mh--gallery-image {
	cursor: zoom-in;
}

/* The hover zoom's lens/pane are position:fixed on body and keep an inline
   display:block once shown, which only !important can beat while the modal is up.
   The lightbox also calls the zoom's own deactivate(); this is the safety net. */
body.product-lightbox-open .product-zoom-lens,
body.product-lightbox-open .product-zoom-pane {
	display: none !important;
}

body.product-lightbox-open {
	overflow: hidden; /* JS pads body by the scrollbar width so nothing shifts sideways */
}

/* The shared modal caps content at 675px (public.css:3893) -- full view needs the room.
   Heights come from a flex chain rather than stacked calc()s: the shell is height-capped,
   the body flexes into what is left, and the stage scrolls inside that, so no rule has to
   know the outer inset or how tall the title block happens to be. */
.product-lightbox .css--modal-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1400px;
	background: #fff;
	padding: 20px;
	overscroll-behavior: contain; /* it is the scroller in the single-column layout */
}

/* The shared close button is pinned to a 20px box; widen it to a tappable target
   while keeping the :before/:after X glyph every other MH modal uses. */
.product-lightbox .css--modal-close {
	max-height: 40px;
	max-width: 40px;
	min-height: 40px;
	min-width: 40px;
	right: 10px;
	top: 10px;
	z-index: 2;
	background: #fff;
}

.product-lightbox-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-column-gap: 30px; /* matches the product page's own gutter */
	flex: 1 1 auto;
	min-height: 0; /* without this the flex item won't shrink under its content, so the stage never scrolls */
}

/* The stage is the scroll container on desktop. */
.product-lightbox-stage {
	overflow-y: auto;
	overscroll-behavior: contain; /* keeps iOS rubber-banding from scrolling the page behind */
	-webkit-overflow-scrolling: touch;
	min-height: 0;
}

/* The reserved 4:3 box is what makes the scroll math and the observer stable: slide
   height depends only on the stage width, never on when an image finishes loading or
   what its intrinsic ratio turns out to be. The image is letterboxed inside it, so
   full view still shows the whole uncropped image. */
.product-lightbox-slide {
	aspect-ratio: 4 / 3;
	max-height: 80vh;
	margin-bottom: 20px;
	overflow: hidden; /* clips the zoom transform to the slide box */
	text-align: center;
}

.product-lightbox-slide:last-child {
	margin-bottom: 0;
}

.product-lightbox-image {
	display: block; /* fills the reserved box even before it loads, so the click target is stable */
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: zoom-in;
}

.product-lightbox-image.is-zoomed {
	transform: scale(2); /* the JS sets transform-origin from the pointer to pan */
	cursor: zoom-out;
}

.product-lightbox-rail {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.product-lightbox-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	line-height: 1.35;
	color: #3e3e3e;
	padding-right: 40px; /* clear of the absolutely positioned close button */
}

.product-lightbox-counter {
	display: block;
	font-size: 12px;
	color: #767676;
	margin: 6px 0 12px;
}

.product-lightbox-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, 72px);
	grid-gap: 8px;
	flex: 1 1 auto; /* takes the rail's leftover height and scrolls, so the rail itself doesn't */
	min-height: 0;
	overflow-y: auto;
	align-content: start;
}

.product-lightbox-thumb {
	padding: 0;
	border: none;
	background: none;
	line-height: 0;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease-out;
}

.product-lightbox-thumb:hover,
.product-lightbox-thumb:focus,
.product-lightbox-thumb.is-active {
	opacity: 1;
}

.product-lightbox-thumb img {
	width: 72px;
	height: 72px;
	aspect-ratio: 1 / 1;
	border: 3px solid #FAFAFA;
}

.product-lightbox-thumb.is-active img {
	border-color: #a5a5a5;
}

/* VIDEOS/IMAGES tab header. The JS drops the [hidden] attribute only when the listing
   actually has videos, so a listing with images alone never shows a one-tab header. */
.product-lightbox-tabs {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 14px;
	padding-right: 50px; /* clear of the close button: 40px box at right: 10px */
}

/* display:flex above beats the [hidden] attribute's UA display:none, so restate it. */
.product-lightbox-tabs[hidden] {
	display: none;
}

.product-lightbox-tab {
	padding: 10px 2px;
	border: none;
	border-bottom: 3px solid transparent;
	background: none;
	margin-bottom: -1px; /* the active underline sits on the header's own border */
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #767676;
	cursor: pointer;
}

.product-lightbox-tab:hover,
.product-lightbox-tab.is-active {
	color: #3e3e3e;
}

.product-lightbox-tab.is-active {
	border-bottom-color: #005195;
}

/* Only one panel is up at a time; images is the default, so the videos panel starts
   hidden and .is-videos-tab on the modal root swaps them. */
.product-lightbox-videos {
	display: none;
}

.product-lightbox.is-videos-tab .product-lightbox-body {
	display: none;
}

/* Same two-column shape as .product-lightbox-body, for the same reason: the player
   flexes into the shell's leftover height and the list scrolls inside the rail. */
.product-lightbox.is-videos-tab .product-lightbox-videos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	grid-column-gap: 30px;
	flex: 1 1 auto;
	min-height: 0;
}

/* Reserved 16:9 box, like the stage's 4:3 slide: the iframe has no intrinsic ratio, and
   without a reserved box the panel would jump as the embed loads.
   The cap is on the width, not the height: aspect-ratio derives the height from the column
   width, and nothing scrolls in the desktop layout (the shell is overflow:hidden at 901px+),
   so on a short viewport a max-height would just letterbox while the 16:9 box itself stayed
   too tall and YouTube's control bar got clipped. 210px is the shell's vertical chrome:
   120px margin (60px top + bottom) + 40px padding (20px top + bottom) + 50px tab header
   (~36px tab row + 14px margin-bottom). */
.product-lightbox-video-player {
	aspect-ratio: 16 / 9;
	width: min(100%, calc((100vh - 210px) * 16 / 9));
	background: #000;
	align-self: start;
	min-width: 0;
}

.product-lightbox-video-player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.product-lightbox-video-rail {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.product-lightbox-video-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	line-height: 1.35;
	color: #3e3e3e;
	padding-right: 40px; /* clear of the absolutely positioned close button */
}

.product-lightbox-video-list {
	flex: 1 1 auto; /* takes the rail's leftover height and scrolls, so the rail itself doesn't */
	min-height: 0;
	overflow-y: auto;
	margin-top: 12px;
}

.product-lightbox-video-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 6px;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease-out;
}

.product-lightbox-video-item:hover,
.product-lightbox-video-item:focus,
.product-lightbox-video-item.is-active {
	opacity: 1;
}

.product-lightbox-video-item-thumb {
	width: 104px;
	height: 58.5px; /* 16:9 at the 104px thumb width */
	object-fit: cover;
	flex: 0 0 auto;
	border: 3px solid #FAFAFA;
}

.product-lightbox-video-item.is-active .product-lightbox-video-item-thumb {
	border-color: #a5a5a5;
}

.product-lightbox-video-item-label {
	font-size: 14px;
	color: #3e3e3e;
}

/* Desktop: inset the shell so there is a comfortable band of backdrop to dismiss on,
   top, bottom and sides. */
@media screen and (min-width: 901px) {
	.product-lightbox .css--modal-content {
		width: calc(100% - 40px);
		max-height: calc(100vh - 120px);
		margin: 60px auto;
		overflow: hidden; /* the stage scrolls, never the shell */
	}

	/* .css--modal.is-active is overflow:auto (public.css:3861-3872), which with a tall
	   inset can make the modal root the scroller and swallow backdrop clicks. */
	.css--modal.product-lightbox.is-active {
		overflow: hidden;
	}
}

/* Narrow: effectively full screen, one column, title + thumbs above the stage, and the
   shell -- not the stage -- is the scroller so the whole thing moves as one column. */
@media screen and (max-width: 900px) {
	.product-lightbox .css--modal-content {
		display: block;
		overflow-y: auto;
		padding: 15px;
	}

	.product-lightbox-body {
		grid-template-columns: minmax(0, 1fr);
		grid-row-gap: 15px;
	}

	.product-lightbox-rail {
		display: block;
		order: -1;
		padding-right: 30px; /* clear of the close button */
	}

	.product-lightbox-stage {
		overflow-y: visible;
	}

	.product-lightbox-slide {
		max-height: none;
	}

	.product-lightbox-thumbs {
		overflow-y: visible;
	}

	/* Player stacked above the list. The shell is the scroller here, so the rail and its
	   list give up their own flex/scroll box exactly like the images panel's do. */
	.product-lightbox.is-videos-tab .product-lightbox-videos {
		grid-template-columns: minmax(0, 1fr);
		grid-row-gap: 15px;
	}

	/* The shell scrolls here, so the player has no height to fit inside -- capping its width
	   off the viewport height would only shrink it for nothing. */
	.product-lightbox-video-player {
		width: 100%;
	}

	.product-lightbox-video-rail {
		display: block;
	}

	.product-lightbox-video-list {
		overflow-y: visible;
	}
}

/* ---- product page gallery: vertical thumbnail rail (desktop) ---- */
/* At 1200px and up the thumbnails come out from under the main image and into a rail on its
   left. Slick itself runs in native vertical mode there -- see setProductCarousels() in
   public-products.js -- so this is only the layout around it; below 1200px slick's
   responsive ladder puts the horizontal strip back and none of these rules apply.
   `screen and` is load-bearing: a bare min-width query matches print too, where the
   @media print block above deliberately hides the nav, and the grid would survive into
   print still reserving an empty rail column. */
@media screen and (min-width: 1200px) {
	/* .product-photos-has-nav is added by setProductCarousels() when there is more than one
	   image. A single-image listing hides the nav instead, and an unconditional grid would
	   leave a dead rail column shoving the main image sideways. */
	.product-page .product-photos-has-nav {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		grid-column-gap: 16px;
	}

	/* Placed by grid line, not by DOM order: the main image stays first in the markup
	   because it carries fetchpriority="high" and is the page's LCP element. */
	.product-page .product-photos-has-nav .product-carousel-nav {
		grid-column: 1;
		grid-row: 1;
		position: relative; /* anchors the up/down arrows */
		border-top: 2px solid rgba(238, 238, 238, 0.3); /* public.css drops it for a strip sitting flush under the image */
	}

	.product-page .product-photos-has-nav .product-carousel {
		grid-column: 2;
		grid-row: 1;
	}

	/* Slick's vertical mode sizes both the rail and its track from the FIRST thumbnail's
	   outerHeight(true) (slick.js setDimensions), measured at init and before it assigns any
	   slide width. The thumbnail is a 1:1 aspect-ratio img with no intrinsic height until it
	   has a width, so without a fixed height here the rail can measure short or collapse
	   outright on a cold cache. outerHeight(true) includes margin, which is why the space
	   between thumbs is margin-bottom -- slick accounts for that, but not for a gap on the
	   track. */
	.product-page .product-photos-has-nav .product-carousel-nav .item {
		height: 92px; /* square at the 92px rail width */
		margin-bottom: 8px;
	}

	/* Up/down arrows. They keep the shared .product-carousel-arrows circle and slick's own
	   .slick-disabled dimming; only the placement is scoped here. The
	   .product-carousel-prev/-next they also carry are horizontal-strip rules, so their
	   left/right offsets and prev's rotate(180deg) are overridden outright and the chevron
	   is turned on the inner img instead -- rotating the span would fight the centering
	   transform. */
	.product-page .product-photos-has-nav .product-carousel-arrow-up,
	.product-page .product-photos-has-nav .product-carousel-arrow-down {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.product-page .product-photos-has-nav .product-carousel-arrow-up {
		top: 0 !important; /* .product-carousel-arrows pins top: 30% !important */
	}

	.product-page .product-photos-has-nav .product-carousel-arrow-down {
		top: auto !important;
		bottom: 0;
	}

	.product-page .product-photos-has-nav .product-carousel-arrow-up img {
		transform: rotate(-90deg);
	}

	.product-page .product-photos-has-nav .product-carousel-arrow-down img {
		transform: rotate(90deg);
	}

	/* .product-photos is the grid container now, so the badge's -5px would land it on the
	   rail; clear the rail column and its gutter to keep it over the main image. */
	.product-page .product-photos-has-nav .product-page-badge {
		left: 103px; /* 92px rail + 16px gutter, less the 5px overhang it has today */
	}
}

/* ---- mh--gallery: native scroll-snap product gallery (replaces slick) ---- */
/* The wrapper also carries .product-photos, so the page grid-area and the badge keep their
   existing plumbing; everything below is scoped to the new classes only.
   The old .product-carousel/.slick-* rules above stay put -- cached product pages still
   render the slick markup. Visual constants (image border, thumb opacity ramp, thumb
   borders) are the old gallery's, from public.css:525-578. */
.mh--gallery-stage {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	border: 2px solid rgba(238, 238, 238, 0.3);
}

.mh--gallery-stage::-webkit-scrollbar {
	display: none;
}

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

.mh--gallery-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.mh--gallery-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
}

/* Static capped rail: a horizontal strip under the stage by default. It never scrolls, so
   on narrow phones the tiles wrap onto a second line instead of being cut off. */
.mh--gallery-rail {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* Vue owns this container on multi-SKU listings; display:contents keeps its children as
   direct flex items of the rail so the video tile lines up with the thumbs. */
.mh--gallery-thumbs {
	display: contents;
}

.mh--gallery-thumb,
.mh--gallery-video-tile {
	position: relative;
	width: 72px;
	height: 72px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.mh--gallery-thumb {
	opacity: 0.5;
	transition: opacity 0.2s ease-out;
}

.mh--gallery-thumb:hover,
.mh--gallery-thumb:focus-visible,
.mh--gallery-thumb.is-active {
	opacity: 1;
}

.mh--gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 3px solid #FAFAFA;
	box-sizing: border-box;
}

.mh--gallery-thumb.is-active img {
	border-color: #a5a5a5;
}

/* the "+N more images" tile: it is an overflow affordance rather than a slide, so it never
   dims the way the real thumbs do */
.mh--gallery-thumb-more {
	opacity: 1;
}

.mh--gallery-thumb-more-label {
	position: absolute;
	inset: 3px; /* inside the thumb's 3px border */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	pointer-events: none;
}

.mh--gallery-video-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 3px solid #FAFAFA;
	box-sizing: border-box;
}

.mh--gallery-video-tile:hover img,
.mh--gallery-video-tile:focus-visible img,
.mh--gallery-video-tile.is-active img {
	border-color: #a5a5a5;
}

/* the play badge over the tile's poster: what marks it as a video rather than one more
   image, now that the count sits below the rail instead of on top of the thumb */
.mh--gallery-video-tile-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid #fff;
	border-radius: 50%;
	pointer-events: none;
}

.mh--gallery-video-tile-play::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	/* a border triangle's visual centre sits left of its box centre, so nudge it back right */
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #fff;
}

/* width:100% is load-bearing: on the wrapping flex row rail it forces the count onto its own
   full-width line under the tiles instead of squeezing in beside one, and in the 72px
   desktop column it just fills the column. */
.mh--gallery-video-count {
	width: 100%;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 10px;
	font-weight: 600;
	color: #333;
}

/* The preview of the featured area is a desktop hover affordance only -- there is no hover
   on touch, and the narrow layouts open the lightbox straight from the tile. */
.mh--gallery-video-preview {
	display: none;
}

.mh--gallery-video-preview-poster {
	/* absolute so the poster cannot inflate the grid row the stage sizes */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mh--gallery-video-preview-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	background: rgba(0, 0, 0, 0.6);
	border: 2px solid #fff;
	border-radius: 50%;
	pointer-events: none;
}

.mh--gallery-video-preview-play::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	/* same optical nudge as the tile badge */
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}

/* ---- mh--gallery: vertical thumbnail rail (desktop) ---- */
/* At 1200px and up the rail comes out from under the stage and into a column on its left,
   the same layout the slick gallery gets above, at the new 72px tile size.
   `screen and` is load-bearing: a bare min-width query matches print too, where the
   @media print block above deliberately hides the rail, and the grid would survive into
   print still reserving an empty rail column. */
@media screen and (min-width: 1200px) {
	/* .mh--gallery-has-rail is only on the wrapper when there is more than one image. A
	   single-image listing renders no rail at all, and an unconditional grid would leave a
	   dead rail column shoving the main image sideways. */
	.product-page .mh--gallery-has-rail {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-column-gap: 16px;
		/* stage keeps its natural height: stretching it to match a tall rail would put dead
		   space inside its border */
		align-items: start;
	}

	/* Placed by grid line, not by DOM order: the stage stays first in the markup because
	   its first image carries fetchpriority="high" and is the page's LCP element. */
	.product-page .mh--gallery-has-rail .mh--gallery-stage {
		grid-column: 2;
		grid-row: 1;
	}

	/* Row 1 only: an item spanning into row 2 has its min-content contribution distributed
	   across both auto rows, which inflates the empty second row into a blank gap under the
	   gallery. With align-items: start, row 1 just grows to max(stage, rail) and row 2 stays 0. */
	.product-page .mh--gallery-has-rail .mh--gallery-rail {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		flex-wrap: nowrap;
		margin-top: 0;
	}

	/* .product-photos is the grid container now, so the badge's -5px would land it on the
	   rail; clear the rail column and its gutter to keep it over the main image. */
	.product-page .mh--gallery-has-rail .product-page-badge {
		left: 83px; /* 72px rail + 16px gutter, less the 5px overhang it has today */
	}

	/* The hover preview takes the stage's own grid cell: two items in one cell overlap, so
	   it covers the stage exactly, borders included. :not([hidden]) so the hidden attribute
	   the JS toggles still wins over display:block.
	   Height comes from aspect-ratio, not from the row: the row auto-sizes to
	   max(stage, rail), and a rail of 6 tiles plus the count is taller than the stage on a
	   1280-1440px viewport, so align-self:stretch would track the rail and hang the black box
	   below the image. 4/3 against the same column width, with the same 2px border around
	   it, is exactly how the stage gets its own height. */
	.product-page .mh--gallery-has-rail .mh--gallery-video-preview:not([hidden]) {
		display: block;
		grid-column: 2;
		grid-row: 1;
		position: relative;
		z-index: 2; /* over .product-page-badge (z-index 1), or the sale badge pokes through */
		align-self: start;
		aspect-ratio: 4 / 3;
		cursor: pointer;
		background: #000;
		border: 2px solid rgba(238, 238, 238, 0.3); /* the stage's border */
	}
}