/* Video Product Player - استایل ریسپانسیو */

.vpp-video-wrapper {
	width: 100%;
	margin: 20px 0;
	box-sizing: border-box;
}

.vpp-video-title {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 10px;
}

.vpp-video-ratio-box {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	background: #000;
}

/* نسبت‌های تصویر مختلف با استفاده از تکنیک padding-top */
.vpp-ratio-16-9 .vpp-video-ratio-box {
	padding-top: 56.25%;
}
.vpp-ratio-4-3 .vpp-video-ratio-box {
	padding-top: 75%;
}
.vpp-ratio-1-1 .vpp-video-ratio-box {
	padding-top: 100%;
}
.vpp-ratio-9-16 .vpp-video-ratio-box {
	padding-top: 177.77%;
}

.vpp-video-ratio-box iframe,
.vpp-video-ratio-box video {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vpp-video-inner.vpp-video-oembed {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.vpp-video-inner.vpp-video-oembed iframe {
	width: 100% !important;
	height: 100% !important;
}

/* حالت موبایل: چون پلیر داخل ستون خلاصه محصول (summary) قرار می‌گیرد و در اکثر
   قالب‌ها (از جمله WoodMart) در حالت موبایل، خلاصه محصول زیر گالری تصاویر
   قرار می‌گیرد، به‌صورت طبیعی پلیر زیر عکس محصول نمایش داده می‌شود.
   قوانین زیر برای اطمینان بیشتر و رفع تداخل احتمالی با برخی قالب‌ها اضافه شده‌اند. */
@media (max-width: 768px) {
	.vpp-video-wrapper {
		margin: 15px 0;
	}
	.vpp-video-ratio-box {
		border-radius: 6px;
	}
}

/* اطمینان از عدم برخورد با استایل‌های gallery ووکامرس/وودمارت */
.summary.entry-summary .vpp-video-wrapper,
.product-summary .vpp-video-wrapper {
	clear: both;
}