/* ══════════════════════════════════════════════════
   منتجات ذات صلة — ArabLady
   النسخة: 2.0 — إصلاح شامل مع تجاوز WooCommerce Flex
   ══════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   1. القسم الخارجي
   ════════════════════════════════════════ */
.arablady-related-products {
	--arp-brand:        #a80077;
	--arp-brand-dark:   #831843;
	--arp-brand-light:  #fdf2f8;
	--arp-shadow:       0 4px 18px rgba(0, 0, 0, 0.07);
	--arp-shadow-hover: 0 14px 40px rgba(168, 0, 119, 0.18);
	--arp-transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--arp-gap:          1.25rem;
	--arp-cols:         4;

	margin-top: var(--wp--preset--spacing--60, 3.5rem);
	margin-bottom: var(--wp--preset--spacing--40, 2rem);
}

.arablady-related-products__wrap {
	width: 100%;
}

/* ════════════════════════════════════════
   2. عنوان القسم
   ════════════════════════════════════════ */
.arablady-related-products__header {
	text-align: center;
	margin-bottom: 2rem;
}

.arablady-related-products__title {
	position: relative;
	display: inline-block;
	font-size: clamp(1.3rem, 3vw, 1.75rem);
	font-weight: 800;
	color: var(--arablady-brand-dark, var(--arp-brand-dark)) !important;
	margin: 0 !important;
	padding-bottom: 0.9rem;
}

.arablady-related-products__title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--arablady-brand, var(--arp-brand)),
		var(--arablady-brand-dark, var(--arp-brand-dark))
	);
	border-radius: 2px;
}

/* ════════════════════════════════════════
   3. تجاوز WooCommerce Flex وفرض Grid
   هذا هو الإصلاح الجوهري لمشكلة الأعمدة الضيقة
   ════════════════════════════════════════ */

/* إلغاء flex من WooCommerce وفرض grid بالكامل */
.arablady-related-products .wc-block-product-template,
.arablady-related-products .wc-block-product-template.is-flex-container,
.arablady-related-products ul.wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(var(--arp-cols, 4), minmax(0, 1fr)) !important;
	gap: var(--arp-gap) !important;

	/* إلغاء خصائص flex */
	flex-wrap: unset !important;
	flex-direction: unset !important;
	align-items: unset !important;

	/* إلغاء هوامش WooCommerce */
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* إعادة ضبط عرض كل بطاقة — WooCommerce يضبط width مباشرة على li */
.arablady-related-products .wc-block-product-template li.wc-block-product,
.arablady-related-products .wc-block-product-template .wc-block-product {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: none !important;
	margin: 0 !important;
}

/* ════════════════════════════════════════
   4. بطاقة المنتج
   ════════════════════════════════════════ */
.arablady-related-products .wc-block-product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(168, 0, 119, 0.08);
	border-radius: 16px;
	box-shadow: var(--arp-shadow);
	overflow: hidden;
	transition:
		transform var(--arp-transition),
		box-shadow var(--arp-transition),
		border-color var(--arp-transition);
	will-change: transform;
}

.arablady-related-products .wc-block-product:hover {
	transform: translateY(-5px);
	box-shadow: var(--arp-shadow-hover);
	border-color: rgba(168, 0, 119, 0.22);
}

/* ════════════════════════════════════════
   5. صورة المنتج
   ════════════════════════════════════════ */
.arablady-related-products .wc-block-components-product-image,
.arablady-related-products .wc-block-product figure {
	overflow: hidden;
	border-radius: 14px 14px 0 0;
	margin: 0 !important;
	/* خلفية ثابتة — لا تتأثر بالوضع الداكن */
	background: #fdf2f8 !important;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	width: 100%;
}

.arablady-related-products .wc-block-components-product-image a,
.arablady-related-products .wc-block-product figure a {
	display: block;
	width: 100%;
	height: 100%;
}

.arablady-related-products .wc-block-components-product-image img,
.arablady-related-products .wc-block-product figure img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.55s ease;
}

.arablady-related-products .wc-block-product:hover .wc-block-components-product-image img,
.arablady-related-products .wc-block-product:hover figure img {
	transform: scale(1.07);
}

/* ════════════════════════════════════════
   6. محتوى البطاقة
   ════════════════════════════════════════ */
.arablady-related-products .wc-block-product__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0.65rem 0.85rem 0.85rem;
	gap: 0.4rem;
}

/* ════════════════════════════════════════
   7. اسم المنتج
   ════════════════════════════════════════ */
.arablady-related-products .wc-block-components-product-name,
.arablady-related-products .wc-block-components-product-name a,
.arablady-related-products h2.wc-block-components-product-name,
.arablady-related-products h3.wp-block-post-title,
.arablady-related-products h3.wp-block-post-title a {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	color: #1f2937 !important;
	text-align: center;
	text-decoration: none !important;
	margin: 0 !important;
	transition: color 0.2s ease;
	writing-mode: unset !important;
	word-break: break-word;
	overflow-wrap: anywhere;
	white-space: normal !important;
}

.arablady-related-products .wc-block-components-product-name:hover,
.arablady-related-products .wc-block-components-product-name a:hover,
.arablady-related-products h3.wp-block-post-title a:hover {
	color: var(--arp-brand) !important;
}

/* ════════════════════════════════════════
   8. إخفاء السعر والزر — الصورة والعنوان فقط
   ════════════════════════════════════════ */
.arablady-related-products .wp-block-woocommerce-product-price,
.arablady-related-products [data-block-name="woocommerce/product-price"],
.arablady-related-products .wc-block-components-product-price,
.arablady-related-products .price,
.arablady-related-products .wc-block-components-product-button,
.arablady-related-products .wp-block-button,
.arablady-related-products [data-block-name="woocommerce/product-button"] {
	display: none !important;
}

/* إزالة الهامش المتبقي من العنوان بعد إخفاء السعر */
.arablady-related-products h3.wp-block-post-title {
	margin-bottom: 0 !important;
}

/* ════════════════════════════════════════
   9. شارة التخفيض
   ════════════════════════════════════════ */
.arablady-related-products .wc-block-components-product-sale-badge,
.arablady-related-products .onsale {
	position: absolute !important;
	top: 0.6rem !important;
	inset-inline-start: 0.6rem !important;
	background: #dc2626 !important;
	color: #fff !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	padding: 0.2em 0.5em !important;
	border-radius: 6px !important;
	border: none !important;
	z-index: 3;
	line-height: 1.4;
}

.arablady-related-products .wc-block-components-product-sale-badge__text,
.arablady-related-products .wc-block-components-product-sale-badge span {
	background: transparent !important;
	color: inherit !important;
}

/* ════════════════════════════════════════
   11. التجاوب — بمتغير --arp-cols
   ════════════════════════════════════════ */

/* لوحي كبير: 4 → 3 */
@media (max-width: 1199px) {
	.arablady-related-products--cols-4 {
		--arp-cols: 3;
	}
}

/* لوحي عادي: 3/4 → 2 */
@media (max-width: 899px) {
	.arablady-related-products--cols-4,
	.arablady-related-products--cols-3 {
		--arp-cols: 2;
	}

	.arablady-related-products__title {
		font-size: clamp(1.1rem, 4vw, 1.4rem);
	}
}

/* هاتف: 2 أعمدة دائماً */
@media (max-width: 599px) {
	.arablady-related-products {
		--arp-cols: 2;
		--arp-gap: 0.75rem;
	}

	.arablady-related-products .wc-block-product__content {
		padding: 0.5rem 0.6rem 0.65rem;
	}

	.arablady-related-products .wc-block-components-product-name,
	.arablady-related-products .wc-block-components-product-name a,
	.arablady-related-products h3.wp-block-post-title,
	.arablady-related-products h3.wp-block-post-title a {
		font-size: 0.78rem !important;
	}
}

/* هاتف صغير جداً: عمود واحد */
@media (max-width: 359px) {
	.arablady-related-products {
		--arp-cols: 1;
	}
}