/* ══════════════════════════════════════════════════════════════════
   منقولٌ من ثيم «لافين فاشن» الابن — nav-menu.css
   الثيمُ الأبُ واحدٌ في الموقعين (DavinciWoo 1.4.8)، فالنقلُ استبدالُ
   طبقةِ ابنٍ لا هجرةُ ثيم. والمتغيّرُ الوحيدُ **اللوحة**: لوحةُ لافين
   النحاسيّةُ أُبدلت بلوحة الجيل الأخضر التيليّة (20 لوناً).
   الأصلُ يبقى مرجعاً في مستودع لافين؛ لا يُحرَّر هنا إلّا بقياس.
   ══════════════════════════════════════════════════════════════════ */

/* ============================================================
   Lavin Fashion — تصميم القوائم والتصنيفات بهوية العلامة
   يغطي: القائمة العلوية (top_menu) · قائمة التصنيفات الجانبية (slider_menu)
   · درج الجوال/التابلت (mobile_menu) — كل الأجهزة، RTL كامل.
   الهوية: Copper #0b8571 · Gold #71ac6f/#5a9058 · Mahogany #05372f
   · Ivory #e8f7f4 · Blush #c6ede5 · Noir #2d2d2d · Warm-gray #4e514f
   ============================================================ */

:root {
	--lav-copper: #0b8571;
	--lav-copper-deep: #096a5a;
	--lav-gold: #71ac6f;
	--lav-gold-deep: #84603C;
	--lav-mahogany: #05372f;
	--lav-ivory: #e8f7f4;
	--lav-blush: #c6ede5;
	--lav-noir: #2d2d2d;
	--lav-gray: #4e514f;
	--lav-shadow: 0 18px 44px rgba(5, 55, 47, .18);
	--lav-shadow-sm: 0 8px 22px rgba(5, 55, 47, .12);
}

/* ========================================================
   1) قائمة التصنيفات الجانبية (slider_menu) — نجمة الديسكتوب
   ======================================================== */
.slider-menu-wrap {
	padding: 0 !important;
}
ul.slider-menu {
	background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
	border: 1px solid #efe1d2;
	border-radius: 16px;
	box-shadow: var(--lav-shadow-sm);
	overflow: visible;
	padding: 8px 0 !important;
	position: relative;
	list-style: none;
	margin: 0;
}
/* شريط عنوان علوي أنيق بهوية العلامة */
ul.slider-menu::before {
	/* بالهروب الست عشري لا بالحرف الخام — مصغّر LiteSpeed أفسد سلسلة عربية
	   خاماً في product-cards.css (قيس 2026-08-28)، وهذا تحصينٌ من الصنف نفسه. */
	content: "\62a\633\648\651\642\64a\20\62d\633\628\20\627\644\641\626\629"; /* تسوّقي حسب الفئة */
	display: block;
	font-family: 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	background: linear-gradient(135deg, var(--lav-copper) 0%, var(--lav-mahogany) 100%);
	padding: 13px 20px;
	margin: -8px 0 8px;
	border-radius: 16px 16px 0 0;
	letter-spacing: .2px;
}

ul.slider-menu > li {
	list-style: none;
	position: relative;
	margin: 0;
}
ul.slider-menu > li > a.nav-top-link,
ul.slider-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 20px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: #3a2c22;
	border: 0;
	position: relative;
	/* لا `padding` في الانتقال: تحريكه يعيد تخطيط الصف كل إطار، واسمُ فئةٍ
	   يقارب عرض القائمة قد يُعاد لفّه في منتصف الحركة. الإزاحة تثبت فوراً،
	   وشريط التمييز (scaleY أدناه) والألوان يحملان الحركة. */
	transition: color .2s ease, background .2s ease;
}
/* شريط تمييز عنّابي على الحافة اليمنى (RTL) عند المرور */
ul.slider-menu > li > a::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 3px;
	/* النمو من المنتصف عبر scaleY لا height — نفس الشكل بلا إعادة تخطيط */
	height: 60%;
	background: linear-gradient(180deg, var(--lav-copper), var(--lav-gold));
	border-radius: 3px;
	transform: translateY(-50%) scaleY(0);
	transition: transform .22s ease;
}
/* :focus-visible مصاحبة للهوفر — مستخدمة لوحة المفاتيح ترى الإشارة نفسها،
   كما تفعل :focus-within للقوائم المنسدلة في هذا الملف نفسه. */
ul.slider-menu > li:hover > a,
ul.slider-menu > li.active > a,
ul.slider-menu > li > a:focus-visible {
	background: linear-gradient(90deg, rgba(232, 207, 194, .35), rgba(232, 207, 194, 0));
	color: var(--lav-copper-deep);
	padding-right: 26px;
}
ul.slider-menu > li:hover > a::before,
ul.slider-menu > li.active > a::before,
ul.slider-menu > li > a:focus-visible::before {
	transform: translateY(-50%) scaleY(1);
}
/* عدّاد المنتجات — حبة ذهبية هادئة */
ul.slider-menu .count {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--lav-gold-deep);
	background: rgba(201, 164, 92, .14);
	border-radius: 999px;
	padding: 2px 9px;
	line-height: 1.6;
	direction: ltr;
	transition: background .2s ease, color .2s ease;
}
ul.slider-menu > li:hover > .count,
ul.slider-menu > li:hover a .count {
	background: rgba(11, 133, 113, .14);
	color: var(--lav-copper);
}
/* سهم القوائم ذات الأبناء — شيفرون يساري صريح (‹) على يسار الصف (RTL) */
ul.slider-menu > li.menu-item-has-children > a::after {
	content: "\2039" !important; /* ‹ يشير لليسار */
	/* ⚠️ U+2039 من أحرف Bidi-Mirrored: في سطرٍ RTL يقلبه المتصفح فيُرسم «›»
	   مشيراً يميناً — عكس جهة الفلاي-آوت (مُبلَّغ ومقيس ٢٠٢٦-٠٨-٢٩). عزلُ
	   اتجاه الرمز LTR يُبطل القلب فيُرسم الحرف على وجهه. والزوج معاً مقصود:
	   `direction` وحدها لا تكفي إن صار الصندوق inline يوماً، و`isolate` تمنع
	   الرمز من التأثير في ترتيب جيرانه. */
	direction: ltr;
	unicode-bidi: isolate;
	font-family: 'Tajawal', 'Inter', sans-serif !important;
	font-size: 20px !important;
	line-height: 1 !important;
	color: var(--lav-gold) !important;
	position: static !important;    /* عنصر flex — يقع في نهاية الصف (يسار RTL) */
	transform: none !important;
	width: auto !important;
	height: auto !important;
	margin-inline-start: 2px;
	transition: color .2s ease, transform .2s ease;
}
ul.slider-menu > li:hover.menu-item-has-children > a::after {
	color: var(--lav-copper) !important;
	transform: translateX(-2px) !important;
}

/* الفلاي-آوت (nav-dropdown) — لوحة بيضاء بظل عنّابي تُفتح لليسار */
ul.slider-menu .nav-dropdown {
	background: #fff;
	border: 1px solid #f0e2d3;
	border-radius: 14px;
	box-shadow: var(--lav-shadow);
	padding: 12px !important;
	min-width: 260px;
}
ul.slider-menu .nav-dropdown::before {
	content: "";
	display: block;
	height: 3px;
	width: 44px;
	background: linear-gradient(90deg, var(--lav-copper), var(--lav-gold));
	border-radius: 3px;
	margin: 2px 8px 10px;
}
ul.slider-menu .nav-dropdown li { list-style: none; }
ul.slider-menu .nav-dropdown > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	border-radius: 9px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--lav-copper);
	transition: background .18s ease, color .18s ease;
}
ul.slider-menu .nav-dropdown > li > a:hover {
	background: rgba(232, 207, 194, .35);
	color: var(--lav-copper-deep);
}
/* أبناء المستوى الثالث */
ul.slider-menu .nav-dropdown .nav-dropdown a {
	color: var(--lav-gray);
	font-weight: 500;
	font-size: 13.5px;
}
ul.slider-menu .nav-dropdown .nav-dropdown a:hover {
	color: var(--lav-copper);
}

/* ========================================================
   2) القائمة العلوية الأفقية (top_menu) — الشريط العلوي
   ======================================================== */
ul.topmenu {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.topmenu > li { list-style: none; position: relative; }
ul.topmenu > li > a {
	display: inline-block;
	padding: 6px 12px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--lav-ivory);
	position: relative;
	transition: color .2s ease;
}
/* خط ذهبي يكبر تحت الرابط عند المرور */
ul.topmenu > li > a::after {
	content: "";
	position: absolute;
	right: 12px;
	left: 12px;
	bottom: 2px;
	height: 2px;
	background: linear-gradient(90deg, var(--lav-gold), var(--lav-blush));
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .25s ease;
	border-radius: 2px;
}
ul.topmenu > li:hover > a { color: #fff; }
ul.topmenu > li:hover > a::after { transform: scaleX(1); }
ul.topmenu .count {
	font-size: 10.5px;
	color: var(--lav-gold);
	direction: ltr;
	margin-inline-start: 3px;
}
/* فلاي-آوت القائمة العلوية — نفس روح لوحة الجانبية */
ul.topmenu .nav-dropdown {
	background: #fff;
	border: 1px solid #f0e2d3;
	border-radius: 12px;
	box-shadow: var(--lav-shadow);
	padding: 10px !important;
	min-width: 230px;
}
ul.topmenu .nav-dropdown a {
	color: var(--lav-copper);
	font-family: 'Tajawal', sans-serif;
	font-weight: 600;
	font-size: 13.5px;
	padding: 8px 11px;
	border-radius: 8px;
	display: block;
	transition: background .18s ease, color .18s ease;
}
ul.topmenu .nav-dropdown a:hover {
	background: rgba(232, 207, 194, .35);
	color: var(--lav-copper-deep);
}

/* ========================================================
   3) درج الجوال/التابلت (mobile_menu) — off-canvas
   ======================================================== */
.mobile-menu-wrap,
.mobile-menu-inner,
.canvas-menu,
.off-canvas .mobile-menu {
	background: linear-gradient(180deg, #ffffff 0%, var(--lav-ivory) 100%) !important;
}
ul.mobile-menu {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}
ul.mobile-menu li { list-style: none; }
ul.mobile-menu > li > a,
ul.mobile-menu li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 20px;
	font-family: 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: 15.5px;
	color: var(--lav-mahogany);
	border-bottom: 1px solid rgba(11, 133, 113, .08);
	transition: background .18s ease, color .18s ease;
}
ul.mobile-menu li li > a {
	font-weight: 500;
	font-size: 14px;
	color: var(--lav-gray);
	padding-right: 34px;
	background: rgba(245, 237, 227, .5);
}
ul.mobile-menu li li li > a {
	padding-right: 48px;
	font-size: 13.5px;
}
ul.mobile-menu a:hover,
ul.mobile-menu a:active {
	background: rgba(232, 207, 194, .4);
	color: var(--lav-copper-deep);
}
ul.mobile-menu .count {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: var(--lav-gold-deep);
	background: rgba(201, 164, 92, .16);
	border-radius: 999px;
	padding: 2px 9px;
	direction: ltr;
}
/* زر توسيع الأبناء (السهم) — عنّابي، يشير لليسار في RTL */
ul.mobile-menu .caret,
ul.mobile-menu .toggle-sub,
ul.mobile-menu .menu-item-has-children > a::after {
	color: var(--lav-copper);
}

/* 🔴 إصلاح جوهري: درج الجوال يستخدم أيقونة «icon-right-open-1» (سهم يمين) ولا
   يعكسها الثيم في RTL — فتشير يميناً خطأً. نعكسها أفقياً فتشير لليسار (اتجاه القراءة
   في RTL). الثيم لا يدوّرها عند التوسيع فالعكس آمن في الحالتين. */
ul.mobile-menu .arrow i,
.mobile-menu .arrow i,
ul.mobile-menu .arrow [class^="icon-right"],
ul.mobile-menu .arrow [class*="icon-right"],
/* قوائم الديسكتوب المنسدلة: نفس الأيقونة داخل .nav-dropdown بقيت غير معكوسة
   (تحقق A12: transform=none على 7 عناصر مخفية تظهر عند فتح القائمة) */
.nav-dropdown .arrow i,
.nav-dropdown .arrow [class*="icon-right"],
.nav-dropdown .menu-item-has-children > a > i[class*="icon-right"] {
	display: inline-block !important;
	transform: scaleX(-1) !important;
	color: var(--lav-copper) !important;
}

/* أسهم أبناء الفلاي-آوت وأحفاده (المستويان ٢ و٣ في القائمة الجانبية):
   الثيم يرسمها بآلية ثالثة لا تطالها القاعدة أعلاه — `::after` على الرابط
   نفسه بأيقونة U+E802 (شيفرون يميني من منطقة الاستعمال الخاص، فلا يعكسه
   Bidi كالأحرف ولا هو `<i>` فتلتقطه قاعدة scaleX أعلاه) — وبلا أي عكس RTL،
   فيشير يميناً وجهةُ الفتح يسار (مُبلَّغ ٢٠٢٦-٠٨-٢٩).
   `scale` الخاصية المستقلة تتركّب فوق `transform` الثيم (translate ‑50%)
   فتقلب الرمز في مكانه دون إعادة كتابة تموضعه ودون حرب `!important`. */
ul.slider-menu .nav-dropdown li.menu-item-has-children > a::after {
	scale: -1 1;
}
/* رأس الدرج (إن وُجد) */
.mobile-menu-header,
.canvas-header,
.off-canvas-header {
	background: linear-gradient(135deg, var(--lav-copper) 0%, var(--lav-mahogany) 100%) !important;
	color: #fff !important;
}
.mobile-menu-header *,
.canvas-header * { color: #fff !important; }

/* ========================================================
   4) تموضع الفلاي-آوت في RTL — يُفتح لليسار فعلاً لا بالنيّة وحدها
   ------------------------------------------------------
   كان هنا `right: auto` وحدها، وتعليقها يقول «تُفتح لليسار لا لليمين».
   لكنها لا تفتحه لليسار: ورقة RTL في الثيم تقلب `left:100%` إلى `right:100%`،
   فإلغاءُ `right` يترك الطرفين `auto` معاً — والصندوق المطلق حينئذٍ يسقط إلى
   **موضعه الساكن**، أي فوق القائمة نفسها.

   وقِيس أثره على الإنتاج ٢٠٢٦-٠٨-٢٥ بعرض ١٤٤٠px: القائمة تشغل ١٠٩٧→١٣٥٠،
   والفلاي-آوت مفتوحاً يشغل **١٠٨٩→١٣٤٩ بارتفاع ٧٥٤px** — أي أنه يغطّي الفئات
   التسع كلّها. فما إن تُفتح فئةٌ حتى تصير لوحتها فوق بقيّة الفئات، وتوجيهُ
   الفأرة إلى فئةٍ أخرى يقع **داخل لوحة الأولى** — وهي ابنةُ صفّها، فيبقى الصفّ
   الأوّل محوَّماً ولوحته مفتوحة. وهذا حرفياً ما يُبلَّغ عنه: «الفأرة تمرّ في
   مكانٍ مختلف عن الفئة فتفتح الفئة».

   و`right: 100%` تضع حافّته اليمنى عند حافّة القائمة اليسرى: مقيسٌ بعد الإصلاح
   ٨٣٨→١٠٩٨، أي يسار القائمة كاملاً وملاصقاً لها بلا فجوة تقطع مسار الفأرة.

   ⚠️ والقائمة العلوية **لا تُذكر هنا**: `mega-menu.css` يتولّى تموضعها
   (`right: 0` نسبةً إلى `.topmenu-wrap`)، وإعادة ذكرها هنا تنازعٌ على قاعدة
   محسومة.
   ======================================================== */
.rtl ul.slider-menu .nav-dropdown {
	right: 100%;
	left: auto;
}

/* ── نيّة التحويم لقائمة الفئات — نفس علاج القائمة العلوية ──
   تسعة صفوف بارتفاع ٤٦px فوق بعضها: المرور بالفأرة من أعلى القائمة إلى أسفلها
   كان يفتح تسع لوحات متتابعة، كلٌّ منها ٧٥٤px. والتأخير هو ما يجعل العبور
   عبوراً: مؤشّرٌ مارٌّ لا يبلغ العتبة، فلا يبدأ الانتقال أصلاً.

   والأرقام هي أرقام `mega-menu.css` نفسها عمداً — سلوكان مختلفان لقائمتين
   متجاورتين على الشاشة نفسها يُقرآن عطلاً لا تصميماً. */
@media (hover: hover) and (min-width: 850px) {
	.rtl ul.slider-menu > li > .nav-dropdown,
	ul.slider-menu > li > .nav-dropdown {
		transition:
			opacity .16s ease-out .2s,
			visibility 0s linear .36s;
		pointer-events: none;
	}
	.rtl ul.slider-menu > li:hover > .nav-dropdown,
	ul.slider-menu > li:hover > .nav-dropdown {
		transition:
			opacity .18s ease-out .18s,
			visibility 0s linear .18s;
		pointer-events: auto;
	}
	/* التركيز نيّةٌ بذاته — لوحة المفاتيح لا تنتظر. */
	.rtl ul.slider-menu > li:focus-within > .nav-dropdown,
	ul.slider-menu > li:focus-within > .nav-dropdown {
		transition: none;
		pointer-events: auto;
	}
}

/* ========================================================
   5) الأجهزة اللمسية: إظهار الفلاي-آوت عند النقر أيضاً
   ======================================================== */
@media (hover: none) {
	ul.slider-menu > li:focus-within > .nav-dropdown,
	ul.topmenu > li:focus-within > .nav-dropdown {
		display: block;
	}
}