/**
 * فيديو المنتج على الواجهة.
 *
 * النسبة تُحجَز بـ`aspect-ratio` على الإطار لا على الفيديو: الغلاف والإطار
 * والفيديو ثلاثةُ عناصر تتبادل الموضع نفسه، فالمقاس على حاويتها يمنع قفزة
 * المحتوى تحتها حين يُستبدل أحدها بالآخر.
 */

.ss-pv {
	margin-block: 1.6em;
}

.ss-pv__title {
	margin: 0 0 0.7em;
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ss-ink, #1a1715);
}

.ss-pv__frame {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: #111;
}

.ss-pv--16-9 .ss-pv__frame { aspect-ratio: 16 / 9; }
.ss-pv--1-1 .ss-pv__frame  { aspect-ratio: 1 / 1; }

/* الطولي يُقصّ عرضه: ريلز بعرض العمود كلّه يصير أطول من الشاشة. */
.ss-pv--9-16 .ss-pv__frame {
	aspect-ratio: 9 / 16;
	max-inline-size: 22em;
	margin-inline: auto;
}

.ss-pv__frame > iframe,
.ss-pv__frame > video {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	object-fit: contain;
	background: #111;
}

/* ---------------------------------------------------------- الغلاف */

.ss-pv__poster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: #111;
	color: #fff;
	cursor: pointer;
}

.ss-pv__poster img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.62;
	transition: opacity 0.3s ease, transform 0.5s ease;
}

.ss-pv__poster:hover img,
.ss-pv__poster:focus-visible img {
	opacity: 0.5;
	transform: scale(1.03);
}

.ss-pv__play {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 4em;
	block-size: 4em;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.94 );
	color: var(--ss-accent, #a4004f);

	/* الأيقونة مثلّثٌ بصريّاً، ومركزُ ثقله يمين مركزه الهندسي — فبلا الإزاحة
	   يبدو الزرّ مائلاً لليسار مهما ضُبط. */
	padding-inline-start: 0.18em;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.3 );
	transition: transform 0.25s ease;
}

.ss-pv__poster:hover .ss-pv__play,
.ss-pv__poster:focus-visible .ss-pv__play {
	transform: scale(1.08);
}

.ss-pv__label {
	position: relative;
	font-size: 0.9em;
	font-weight: 600;
	text-shadow: 0 1px 6px rgba( 0, 0, 0, 0.6 );
}

.ss-pv__poster:focus-visible {
	outline: 3px solid var(--ss-accent, #a4004f);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.ss-pv__poster img,
	.ss-pv__play {
		transition: none;
	}
}

/* ================================================================== *
 * الفيديو شريحةً في معرض المنتج
 *
 * الشريحة ترث من ووكومرس ومن `shop.css` كلَّ ما يخصّ الصندوق: عرضٌ كامل لا
 * ينكمش، ومربّعٌ يحدّ ارتفاعه، وتوسيطٌ داخله. فلا يُكتب هنا إلا ما يخصّ ما
 * بداخله — والمصغَّر مثله: صنفُ ووكومرس عليه بمقاسه وحدّه، وقرصُ التشغيل
 * وحده هو الزائد.
 * ================================================================== */

.ss-pv-slide,
.ss-pv-slide__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* **لماذا كان زرّ التشغيل لا يستجيب للضغط أصلاً — وهو زرٌّ سليم.**
 *
 * صندوق الصورة الكبيرة عند ووكومرس فيه طبقتان لا طبقة: صفُّ الشرائح، وفوقه
 * ‏`__inner-blocks` وهو `position: absolute` بمقاس الصندوق كلّه تقريباً
 * (‏`calc(100% - 10px)` طولاً وعرضاً) يحمل شارة الخصم والسهمين. وهذه الطبقة
 * **لا تحمل `pointer-events: none`** — أي أنها تلتقط كل ضغطةٍ تقع عليها.
 *
 * وصور المنتج تنجو منها بسطرٍ في أنماط ووكومرس:
 *
 *     .wc-block-woocommerce-product-gallery-large-image__image {
 *         position: relative; z-index: 1
 *     }
 *
 * فترتفع فوق الطبقة (‏`z-index: auto` عندها) وتصلها الضغطة. وشريحتنا لم
 * تكن تحمل شيئاً من ذلك: عنصرٌ في المجرى بلا تموضع، فتقع تحت الطبقة، وكل
 * ضغطةٍ على زرّ التشغيل تصيب الطبقة لا الزرّ — ولا يحدث شيء ولا خطأ في
 * الكونسول، لأن الضغطة وصلت إلى عنصرٍ لا معالج له.
 *
 * فالعلاج ما فعله ووكومرس لصوره حرفاً بحرف. */
.ss-pv-slide__inner {
	position: relative;
	z-index: 1;
}

/* **داخل المعرض تُلغى نسبةُ الفيديو ويملأ الإطارُ المربّع.**
 *
 * الشريحة مربّعة (‏`shop.css` يفرض `aspect-ratio: 1/1` على `__wrapper`)،
 * ولها في الشريط مصغَّرٌ بين مصغَّرات الصور. فإطارٌ بنسبته هو — ‏16:9 مثلاً —
 * يترك في المربّع شريطين فارغين فوقه وتحته، فتُقرأ الشريحة «صورةً ناقصة» بين
 * صورٍ تملأ إطارها. والمقصود أن يظهر الفيديو كصورةٍ من المعرض لا كصندوقٍ
 * داخله.
 *
 * ولهذا تُكتب النِّسب الثلاث صراحةً: `.ss-pv--9-16` وأختاها محدّدٌ من صنفين،
 * فلا يغلبها `.ss-pv-slide .ss-pv__frame` (صنفان كذلك) إلا بترتيب الملفّ —
 * وهو سندٌ هشّ. والثلاثةُ هنا من ثلاثة أصناف فتغلب بلا `!important`.
 *
 * ‏(`max-inline-size` و`margin-inline` يُردّان لأن قاعدة ‏9:16 تحصر الطولي في
 * ‏22em وتوسّطه — وهو صوابٌ في القسم المستقلّ، وقصٌّ للمربّع هنا.)
 *
 * وما بقي من أثر النسبة هو ما يفعله يوتيوب داخل الإطار: فيديو ريلز في إطارٍ
 * مربّع يحوّطه هو بشريطين جانبيّين، ولا سبيل إلى قصّه — قصُّ إطار المشغّل
 * يقصّ أزراره معه. أمّا الغلاف — وهو ما تراه أغلب الزائرات — فيملأ المربّع. */
.ss-pv-slide .ss-pv__frame {
	inline-size: 100%;
	border-radius: var(--ss-r-lg, 12px);
}

.ss-pv-slide.ss-pv--16-9 .ss-pv__frame,
.ss-pv-slide.ss-pv--1-1 .ss-pv__frame,
.ss-pv-slide.ss-pv--9-16 .ss-pv__frame {
	aspect-ratio: 1 / 1;
	inline-size: 100%;
	max-inline-size: none;
	margin-inline: 0;
}

/* الغلاف يملأ الشريحة قصّاً لا احتواءً: `shop.css` يفرض `contain` على كل
   صورةٍ في المعرض الكبير بـ`!important` — وهي قاعدةٌ لصور المنتج على خلفيةٍ
   بيضاء، والغلاف هنا خلفيّةٌ معتمة تحت زرٍّ لا صورةُ منتج. */
.ss-pv-slide .ss-pv__poster img {
	object-fit: cover !important;
	border-radius: 0 !important;

	/* وأفتحُ من غلاف القسم المستقلّ (0.62): هناك يقع الفيديو وحده في مساحته
	   فالإعتام يميّزه، وهنا يقع بين صورٍ مضيئة فيبدو المعتِم منها مطفأً. و0.8
	   يكفي القرصَ الأبيض وسطره — وللسطر ظلٌّ مكتوبٌ له أصلاً. */
	opacity: 0.8;
}

/* وقاعدة المرور (0.5) محدّدُها صنفان كقاعدتنا أعلاه، وقاعدتنا بعدها في
   الملفّ فتغلبها — أي أن المرور كان سيفقد أثره في الشريحة. فيُعاد بثلاثة. */
.ss-pv-slide .ss-pv__poster:hover img,
.ss-pv-slide .ss-pv__poster:focus-visible img {
	opacity: 0.66;
}

/* الملفّ المرفوع يُقصّ كالغلاف: `<video>` يقبل `object-fit` بخلاف `<iframe>`،
   فما يُرفع إلى المكتبة يملأ المربّع فعلاً. */
.ss-pv-slide .ss-pv__frame > video {
	object-fit: cover;
}

/* ---------------------------------------------------------- المصغَّر */

/* **والقرص في وسط المصغَّر لا في ركنه.**
 *
 * غلافُ الفيديو صورةُ المنتج نفسها ما لم تُختَر له صورةٌ أخرى — فمصغَّره
 * ومصغَّرُ الصورة الأولى صورةٌ واحدة مكرَّرة في الشريط، ولا شيء يقول أيّهما
 * الفيديو إلا هذه العلامة. وفي الركن تصير تفصيلاً يُلمح، وفي الوسط تُقرأ
 * قبل الصورة. */
.ss-pv-thumb {
	position: relative;
}

/* والقرص لا يلتقط النقر: النقرة للصورة تحته، وهي ما يحمل
   `actions.selectCurrentImage` عند ووكومرس. */
.ss-pv-thumb__mark {
	/* توسيطٌ بالخصائص الفيزيائية لا المنطقية: `transform` يزيح إلى اليسار
	   في الاتّجاهين، فلو قابله `inset-inline-start` لَخرج القرص في العربية. */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;

	/* المثلّث مركزُ ثقله يمين مركزه الهندسي — كما في زرّ الغلاف الكبير. */
	padding-inline-start: 2px;
	border-radius: 50%;
	background: rgba( 26, 23, 21, 0.72 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.28 );
	color: #fff;
	pointer-events: none;
}