@charset "UTF-8";
/* Video's-tab — self-contained (was Bootstrap .btn/.btn-light + .ratio.ratio-16x9 + theme-icon-font) */
.videos {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
/* knop-variant (was @extend .btn .btn-light) */
.videos .video--btn {
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
	text-decoration: none;
	cursor: pointer;
	color: var(--wcp-color-dark, #374151);
	background-color: var(--wcp-color-light, #f5f4f0);
	border: 1px solid transparent;
	border-radius: var(--wcp-radius, 0.375rem);
	transition: all 0.2s ease-in-out;
}
.videos .video--btn:hover {
	color: var(--wcp-color-primary, #873EFF);
}
@media (min-width: 36rem) {
	.videos .video--btn { width: calc(50% - 0.5rem); }
}
.videos .video--btn .content {
	display: flex;
	flex-direction: column;
	align-items: start;
}
.videos .video--btn i {
	font-size: inherit;
	flex-shrink: 0;
	margin-right: 1rem;
	line-height: 0;
}
.videos .video--btn small {
	font-size: 0.75rem;
}
/* play-icoon als SVG-mask, door de add-on zelf gedragen (geen theme-icon-font) */
.videos .video--btn i.svg-icon__play:before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445'/%3E%3C/svg%3E");
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: currentColor;
}
/* embed-variant (was Bootstrap .ratio.ratio-16x9) */
.videos .video--embed {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--wcp-radius, 0.375rem);
	overflow: hidden;
}
.videos .video--embed iframe,
.videos .video--embed video {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Video-slide in de productgalerij: poster vult de slide, afspeelknop gecentreerd,
   na een klik vult de speler (iframe) dezelfde ruimte. */
.woocommerce-product-gallery__image.product-video .product-video__frame {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wcp-color-light, #f5f4f0);
}
/* Zelfde selectorgewicht als de galerij-regels van WooCommerce Plus
   (.single-product div.product .woocommerce-product-gallery img zet height: auto) en het
   Starter-thema (.video__play): poster vult het vierkant, knop in het midden. */
.woocommerce-product-gallery__image.product-video .product-video__poster,
.single-product div.product .woocommerce-product-gallery .product-video .product-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.woocommerce-product-gallery__image.product-video .product-video__play,
.single-product div.product .woocommerce-product-gallery .product-video .product-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 2.5rem;
	text-decoration: none;
	background: rgba(0, 0, 0, 0.15);
}
/* Thumbnail van de video (YouTube levert 16:9) in hetzelfde vierkant als de productfoto's. */
.woocommerce-product-gallery .flex-control-thumbs img[src*="ytimg.com"],
.woocommerce-product-gallery .flex-control-thumbs img[src*="vimeocdn.com"] {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.woocommerce-product-gallery__image.product-video .product-video__play i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--wcp-color-primary, #873EFF);
	font-size: 1.75rem;
}
.woocommerce-product-gallery__image.product-video .product-video__play:hover i {
	background: var(--wcp-color-primary-hover, var(--wcp-color-primary, #873EFF));
}
.woocommerce-product-gallery__image.product-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}