/**
 * توحيد شبكة المنتجات.
 *
 * ووكومرس يبني الشبكة بالتعويم (float) وعرض بالنسبة المئوية، وهو تخطيط لا
 * يساوي ارتفاعات العناصر في الصف الواحد؛ فأي فرق في طول العنوان أو ارتفاع
 * الصورة يجعل البطاقات متفاوتة ويكسر المحاذاة. نحوّلها إلى Grid فيتساوى
 * الارتفاع تلقائياً، ونثبّت صندوق الصورة بنسبة 1:1.
 */

/* ------------------------------------------------------------------ */
/* الشبكة                                                              */
/* ------------------------------------------------------------------ */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(var(--pm-pg-cols, 4), minmax(0, 1fr));
	/* 1fr للصفوف الضمنية = كل الصفوف بارتفاع أطولها، فتتساوى البطاقات في
	   الشبكة كلها لا داخل الصف الواحد فقط، دون قصّ أي نص. */
	grid-auto-rows: 1fr;
	column-gap: var(--pm-pg-gap-x, 24px);
	row-gap: var(--pm-pg-gap-y, 34px);
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

/* ووكومرس يضيف ::before/::after كـ clearfix لتخطيط التعويم. داخل Grid
   يتحوّلان إلى عنصرين حقيقيين يحتلّان خانتين ويزيحان المنتجات خانة كاملة،
   فتظهر فجوة في أول الصف. لم نعد نستخدم التعويم أصلاً فنلغيهما. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	display: none;
}

/* عدد الأعمدة يتبع كلاس ووكومرس نفسه */
.woocommerce ul.products.columns-1, .woocommerce-page ul.products.columns-1 { --pm-pg-cols: 1; }
.woocommerce ul.products.columns-2, .woocommerce-page ul.products.columns-2 { --pm-pg-cols: 2; }
.woocommerce ul.products.columns-3, .woocommerce-page ul.products.columns-3 { --pm-pg-cols: 3; }
.woocommerce ul.products.columns-4, .woocommerce-page ul.products.columns-4 { --pm-pg-cols: 4; }
.woocommerce ul.products.columns-5, .woocommerce-page ul.products.columns-5 { --pm-pg-cols: 5; }
.woocommerce ul.products.columns-6, .woocommerce-page ul.products.columns-6 { --pm-pg-cols: 6; }

/* ------------------------------------------------------------------ */
/* البطاقة                                                             */
/* ------------------------------------------------------------------ */

.woocommerce ul.products > li.product,
.woocommerce-page ul.products > li.product {
	/* إلغاء تخطيط التعويم الخاص بووكومرس — يحتاج !important لأن قواعده
	   موزّعة على محدّدات nth-child بأولويات متفاوتة. */
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;

	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* رابط ووكومرس يلفّ كل المحتوى، فنمدّده ليملأ البطاقة */
.woocommerce ul.products > li.product > a.woocommerce-loop-product__link,
.woocommerce-page ul.products > li.product > a.woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* ------------------------------------------------------------------ */
/* صندوق الصورة: نسبة ثابتة + الصورة كاملة بداخله                      */
/* ------------------------------------------------------------------ */

.woocommerce ul.products li.product .cz_image_in {
	position: relative;
	width: 100%;
	aspect-ratio: var(--pm-pg-ratio, 1 / 1);
	overflow: hidden;
	background: #fff;
}

.woocommerce ul.products li.product .cz_image_in .cz_main_image,
.woocommerce ul.products li.product .cz_image_in > a {
	display: block;
	width: 100%;
	height: 100%;
}

.woocommerce ul.products li.product .cz_image_in img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	/* الصور المربّعة والعريضة والطويلة تتساوى داخل نفس المساحة */
}

/* شريط "تخفيضات ساخنة" المتحرّك يُحصر داخل عرض الصورة */
.woocommerce ul.products li.product .xtra-product-thumbnail {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
}

/* ------------------------------------------------------------------ */
/* المحتوى النصّي: ارتفاعات ثابتة لتتحاذى الأسعار                      */
/* ------------------------------------------------------------------ */

/* لا نقصّ العنوان: القالب يفرض display:flow-root من أنماطه المضمّنة في
   wp_head فيُبطل -webkit-line-clamp ويبقى overflow:hidden وحده عاملاً،
   والنتيجة نصّ مقطوع في منتصف السطر. توحيد الارتفاع تكفّلت به الشبكة. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	overflow-wrap: anywhere;
}

/* السعر يُدفع لأسفل البطاقة فيستقيم على خط واحد في كل الصف */
.woocommerce ul.products li.product .price {
	margin-top: auto;
	padding-top: 6px;
}

/* زر الإضافة للسلة أسفل الكل */
.woocommerce ul.products > li.product > a.button,
.woocommerce ul.products > li.product > .button {
	margin-top: 10px;
}

/* ------------------------------------------------------------------ */
/* الكاروسيلات تعود لتخطيطها الأصلي                                    */
/* slick يبني .slick-list > .slick-track ويحسب العروض بنفسه            */
/* ------------------------------------------------------------------ */

.slick ul.products,
ul.products.slick-slider,
ul.products.slick-initialized {
	display: block;
	grid-template-columns: none;
}

/* الكاروسيل ما زال يعتمد تخطيط التعويم، فنعيد له الـ clearfix */
.slick ul.products::before,
.slick ul.products::after,
ul.products.slick-slider::before,
ul.products.slick-slider::after {
	display: table;
	content: " ";
}

.slick ul.products > li.product,
ul.products.slick-slider > li.product,
ul.products.slick-initialized li.product {
	display: block;
}

/* ------------------------------------------------------------------ */
/* الاستجابة                                                           */
/* ------------------------------------------------------------------ */

/* ملاحظة: قواعد columns-N أعلاه محدّدها أقوى من محدّد الحاوية وحده، لذا
   يجب أن تحمل قواعد الاستجابة نفس درجة التحديد (كلاس columns-N) وإلا لن
   تتغلّب عليها ويظل عدد الأعمدة كما هو على الشاشات الصغيرة. */

@media (max-width: 1200px) {
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6,
	.woocommerce-page ul.products.columns-5,
	.woocommerce-page ul.products.columns-6 { --pm-pg-cols: 4; }
}

@media (max-width: 1024px) {
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6,
	.woocommerce-page ul.products.columns-4,
	.woocommerce-page ul.products.columns-5,
	.woocommerce-page ul.products.columns-6 { --pm-pg-cols: 3; }
}

@media (max-width: 767px) {
	.woocommerce ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6,
	.woocommerce-page ul.products.columns-2,
	.woocommerce-page ul.products.columns-3,
	.woocommerce-page ul.products.columns-4,
	.woocommerce-page ul.products.columns-5,
	.woocommerce-page ul.products.columns-6 { --pm-pg-cols: 1; }

	.woocommerce ul.products,
	.woocommerce-page ul.products {
		--pm-pg-gap-x: 14px;
		--pm-pg-gap-y: 22px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 14px;
	}

	/* عمود واحد: البطاقة بعرض الشاشة كاملاً، فالصورة المربّعة تصبح ضخمة جداً
	   (بارتفاع الشاشة تقريباً). نلغي النسبة الثابتة ونحدّد ارتفاعاً معقولاً
	   مع object-fit: contain فتظهر صورة الطابعة كاملة داخل مساحة مضغوطة. */
	.woocommerce ul.products li.product .cz_image_in {
		aspect-ratio: auto;
		height: 230px;
	}
}