/* md_product_video: the card's video indicator (the markup is the theme's, its CSS a dark circle at the
   bottom-left) - here a grey outline of the YouTube play button at the bottom-right of the photo, with a faint
   white backdrop so it reads on dark photos; z-index above the card gallery of addit-img.js (its Swiper wrapper
   has z-index 1), the top icons keep z-index 10 */
.product-card-new .product-card__video-indicator {
	top: auto;
	left: auto;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	box-sizing: border-box;
	width: 30px;
	height: 21px;
	border: 2px solid #8d8d8d;
	border-radius: 7px;
	background: rgba(255, 255, 255, .6);
	color: #8d8d8d;
	font-size: 9px;
}

.product-card-new .product-card__video-indicator i {
	margin-left: 2px;
}

/* md_product_video: a video thumb in the product gallery strip - the same box as an image thumb
   (#product-product .product__images-thumb in the theme's product-page.css), a play badge on top */
#product-product .product__images-video {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 3px;
	border: 1px solid #e1e1e1;
	border-radius: 0;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .2s ease, transform .2s ease;
}

#product-product .product__images-video:hover,
#product-product .product__images-video:focus {
	border-color: var(--product-gallery-accent, #e05a2b);
	outline: none;
}

#product-product .product__images-video:active {
	transform: scale(.96);
}

#product-product .product__images-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#product-product .product__images-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 11px;
	pointer-events: none;
}

#product-product .product__images-video-play i {
	margin-left: 2px;
}