/* ==========================================================================
   بطاقةُ المنتج — لغةُ لافين بتوكنات الجيل الأخضر
   --------------------------------------------------------------------------
   منقولةٌ عن `لافين فاشن/store/child-theme/assets/css/product-cards.css`،
   وتعمل هنا **بلا إعادةِ ربطٍ واحدة**: الأبُ واحد، ومحدِّداتُها ترميزُه نفسُه —
   `.product-small` · `.box-image` · `.image-tools` · `.onsale` (قِيس حيّاً:
   24 عنصر `.product-small` و24 `.box-image` على `/shop/`).

   ═══ ما تغيّر: اللونُ بالدور لا بالدرجة ═══

   لوحةُ لافين **دافئة** (نحاسيٌّ `#90543c` وذهبيٌّ `#c9a45c` وعاجيّ)، ولوحةُ
   الجيل الأخضر **باردة** (تيلٌ وورقيّ). فلا استبدالَ hex بـhex بل ربطٌ بالدور:

     نصٌّ ملوَّنٌ على سطحٍ فاتح   ⇐ `--teal-700`  (‏6.52:1 — يمرّ AA بفارق)
     خلفيّةٌ ملوّنةٌ تحت نصٍّ أبيض  ⇐ `--teal-600`  (‏4.56:1 — يمرّ AA)
     حدٌّ ناعم                    ⇐ `--color-border`
     حدُّ التحويم                 ⇐ `--teal-200`
     اللكنة                      ⇐ `--harvest` (سقفُ 10٪ من التخطيط)

   ⚠️ **والظلُّ يُحوَّل كذلك لا يُنسخ**: `rgba(144,84,60,.14)` ظلٌّ **نحاسيّ**
     يقرأ دافئاً تحت بطاقةٍ خضراء. صار `rgba(14,164,137,.14)`.
   ========================================================================== */

/* ---- البطاقة: زوايا دائرية + حد ناعم + ظل خفيف + رفع عند المرور ----
   (البطاقات في الصفحة الرئيسية div.product-small، وفي المتجر li.product) */
.product-small.product,
ul.products li.product {
	position: relative;
	isolation: isolate;              /* حاوية تكديس مستقلة: تُبقي الشارة/الزر ضمن البطاقة */
	border: 1px solid var(--color-border, #DCDFDD) !important;
	/* دليل الهوية §٤.٢: «البطاقات والصور: حواف 8px» — والتطبيق على 8 أيضاً،
	   فتقرأ العلامة بزاوية واحدة على السطحين. */
	border-radius: 8px !important;
	overflow: hidden;
	background: #ffffff !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.product-small.product:hover,
ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 32px rgba(14, 164, 137, .14) !important;
	border-color: var(--teal-200, #93DECF) !important;
}

/* ---- حاوية الصورة: قص التكبير + زاوية علوية دائرية ----
   (.box-image موضعها relative أصلاً من الثيم — نبقيها مرجع التموضع للشارة والزر) */
.product-small .box-image,
.product-small .box-image-wrap,
.product-small .box-image-inner {
	overflow: hidden !important;
	border-radius: 7px 7px 0 0;
}

.product-small .box-image img {
	transition: transform .55s cubic-bezier(.2, .6, .2, 1);
	width: 100%;
}

.product-small:hover .box-image img {
	transform: scale(1.07);
}

/* ---- زر "عرض المنتج" يظهر بنعومة عند المرور (CSS فقط، لا يعيق النقر) ---- */
.product-small .box-image::after {
	/* بالهروب الست عشري لا بالحرف الخام: مصغّر LiteSpeed قصّ محرفاً متعدد
	   البايتات من هذه السلسلة وحقن سطراً داخلها فقتل تفسير الورقة المدموجة
	   كلها بعد هذه النقطة (قيس 2026-08-28). النمط نفسه المعتمد في قاعدتَي
	   السهم «\2039» في nav-menu.css وshop-sidebar.css. */
	content: "\639\631\636\20\627\644\645\646\62a\62c"; /* عرض المنتج */
	position: absolute;
	inset-inline: 0;
	bottom: 14px;
	margin: 0 auto;
	width: -moz-max-content;
	width: max-content;
	max-width: 80%;
	background: rgba(14, 164, 137, .96);
	color: #fff;
	/* Tajawal فقط: El Messiri ليس من خطوط الهوية ولا يوجد @font-face يحمّله
	   أصلاً — كان تصريحاً ميتاً يوهم بخط ثالث في المنظومة. */
	font-family: "Tajawal", sans-serif;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 22px;
	border-radius: 999px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
	box-shadow: 0 6px 18px rgba(14, 164, 137, .35);
	z-index: 110;                     /* أعلى من رابط الصورة (100) ليظهر فوق الصورة */
}

.product-small:hover .box-image::after {
	opacity: 1;
	transform: translateY(0);
}

/*
 * ⚠️ ونظيرٌ إنجليزيٌّ لازم: الموقعُ **لغتان**، و`content:` نصٌّ في الورقة لا في
 *   الترميز — فلا يبلغه qTranslate ولا `.mo`. وبدون هذه القاعدة تقرأ زائرةُ
 *   `/en/` زرّاً عربيّاً فوق كلّ بطاقة.
 *   و`:lang(en)` يطابق `en-US` بمطابقة البادئة، وهو ما يعلنه المستند هناك.
 *
 *   والهروبُ السداسيُّ هنا كذلك — لا لأنّ اللاتينيّةَ تحتاجه، بل لأنّ خلطَ
 *   صيغتين في ملفٍّ واحدٍ يُنسي القاعدةَ عند التعديل التالي.
 */
:lang(en) .product-small .box-image::after {
	content: "\56\69\65\77\20\70\72\6f\64\75\63\74"; /* View product */
}

/* ---- شارة الخصم: حبة دائرية بلون الهوية ---- */
.product-small .onsale,
.products .onsale {
	border-radius: 999px !important;
	background: var(--teal-600, #0B8571) !important;
	color: #fff !important;
	font-weight: 700 !important;
	padding: 5px 12px !important;
	font-size: 12px !important;
	line-height: 1 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	box-shadow: 0 2px 8px rgba(14, 164, 137, .28);
	top: 12px !important;
	inset-inline-start: 12px !important;
	inset-inline-end: auto !important;
	z-index: 120 !important;          /* أعلى من رابط الصورة (z-index:100 من الثيم) */
}

.product-small .onsale span,
.product-small .onsale strong {
	background: transparent !important;
	color: #fff !important;
	padding: 0 !important;
}

/* ---- زر المفضلة فوق الصورة: أيقونة قلب فقط ----
   YITH 4.16 يُخرج <a> فيه أيقونة SVG + <span class="__label">أضيفي إلى المفضلة</span>.
   الثيم يضع الزر في .image-tools المطلقة فوق الصورة (مصمّمة لأيقونة فقط)،
   فكان النص يتمدد أفقياً ويطفو فوق صورة المنتج.
   نُخفي النص بصرياً فقط (clip) لا بـ display:none — لأن الرابط بلا aria-label
   ولا title، فحذف النص كلياً يفقده اسمه المتاح لقارئات الشاشة. */
.product-small .image-tools,
ul.products li.product .image-tools {
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 115 !important;          /* فوق رابط الصورة (100)، تحت الشارة (120) */
}

.product-small .image-tools .yith-wcwl-add-to-wishlist-button__label,
ul.products li.product .image-tools .yith-wcwl-add-to-wishlist-button__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.product-small .image-tools .yith-wcwl-add-to-wishlist-button,
ul.products li.product .image-tools .yith-wcwl-add-to-wishlist-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .92) !important;
	color: var(--teal-700, #096A5A) !important;
	box-shadow: 0 2px 8px rgba(45, 45, 45, .16);
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.product-small .image-tools .yith-wcwl-add-to-wishlist-button:hover,
ul.products li.product .image-tools .yith-wcwl-add-to-wishlist-button:hover {
	background: var(--teal-600, #0B8571) !important;
	color: #fff !important;
	transform: scale(1.08);
}

.product-small .image-tools .yith-wcwl-add-to-wishlist-button-icon,
ul.products li.product .image-tools .yith-wcwl-add-to-wishlist-button-icon {
	width: 19px !important;
	height: 19px !important;
	margin: 0 !important;
}

/* حالة "مضاف للمفضلة": قلب ممتلئ بلون الهوية */
.product-small .image-tools .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-add-to-wishlist-button-icon,
ul.products li.product .image-tools .yith-wcwl-add-to-wishlist-button--added .yith-wcwl-add-to-wishlist-button-icon {
	fill: var(--teal-700, #096A5A) !important;
}

.product-small .image-tools .yith-wcwl-add-to-wishlist-button--added:hover .yith-wcwl-add-to-wishlist-button-icon,
ul.products li.product .image-tools .yith-wcwl-add-to-wishlist-button--added:hover .yith-wcwl-add-to-wishlist-button-icon {
	fill: #fff !important;
}

/* حاوية YITH الداخلية: لا تفرض عرضاً */
.product-small .image-tools .yith-add-to-wishlist-button-block,
ul.products li.product .image-tools .yith-add-to-wishlist-button-block {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- منطقة النص: تنفّس داخلي ومحاذاة يمين ---- */
.product-small .box-text {
	padding: 14px 15px 18px !important;
	text-align: right;
}

/* ---- العنوان: سطران بارتفاع ثابت (محاذاة البطاقات) + لون الهوية عند المرور ---- */
/* الثيم الأب يفرض `height:4.125em` (= 2.66 سطر) على العنوان، وهو يتغلّب على
   قصّ السطرين فيُرسم سطر ثالث **مقصوص من منتصف الحروف** — ظهر بوضوح في شبكة
   «منتجات ذات صلة» الأضيق (المحتوى 90px داخل صندوق 59.8px على الديسكتوب).
   `height:auto` يعيد القصّ إلى سطرين نظيفين بثلاث نقاط (45px)، و`min-height`
   يحافظ على تساوي ارتفاع البطاقات وهو الغرض الأصلي. */
.product-small .box-text .woocommerce-loop-product__title,
.product-small .box-text .name.product-title,
.product-small .box-text .name a {
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	height: auto !important;
	min-height: 2.9em;
	max-height: 3.1em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 8px !important;
	color: var(--neutral-900, #2D2D2D) !important;
	transition: color .25s ease;
}

.product-small:hover .box-text .woocommerce-loop-product__title,
.product-small:hover .box-text .name a {
	color: var(--teal-700, #096A5A) !important;
}

/* ---- السعر: الحالي بلون الهوية بارز، القديم رمادي مقروء ومشطوب ---- */
.product-small .box-text .price {
	font-size: 16px !important;
	display: block;
}

.product-small .box-text .price ins,
.product-small .box-text .price ins .amount {
	text-decoration: none !important;
	color: var(--teal-700, #096A5A) !important;
	font-weight: 800 !important;
}

.product-small .box-text .price > .amount {
	color: var(--teal-700, #096A5A) !important;
	font-weight: 800 !important;
}

/* `del` و`del .amount` كانا يأخذان `.82em` معاً، و`.amount` وريث `del` —
   فيتراكم التصغير (0.82 × 0.82 = 0.672em) ويهبط رمز «ر.س» إلى 9.7px.
   نطبّق التصغير على `del` وحدها ونترك ما بداخلها بحجمه الموروث. */
.product-small .box-text .price del {
	font-size: .82em !important;
}

.product-small .box-text .price del,
.product-small .box-text .price del .amount {
	/* بنّي دافئ من اللوحة (8.8:1 على الأبيض، 7.6:1 على العاجي) بدل رمادي
	   محايد كان 4.5:1 على الأبيض فقط ويرسب على العاجي. */
	color: var(--neutral-600, #6A6D6B) !important;
	font-weight: 500 !important;
	margin-inline-start: 6px;
}

.product-small .box-text .price del .amount {
	font-size: 1em !important;
}

/* ---- الجوال: مسافات أنسب للبطاقة ---- */
@media only screen and (max-width: 549px) {
	.product-small .box-text {
		padding: 10px 10px 14px !important;
	}
	.product-small .box-text .woocommerce-loop-product__title,
	.product-small .box-text .name a {
		font-size: 13px !important;
	}
	.product-small .box-text .price {
		font-size: 14.5px !important;
	}
	.product-small .box-image-wrap::after {
		font-size: 12px;
		padding: 7px 16px;
	}
}