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

/* ============================================================
   Lavin Fashion — الميجا-مينيو الحقيقي
   ============================================================
   لماذا هذا الملف موجود:

   الثيم يُخرِج أصلاً ترميز ثلاثة مستويات صالحاً للوحة متعدّدة الأعمدة:
       ul.topmenu > li.has-dropdown > ul.nav-dropdown
                                     > li.nav-dropdown-col > ul.nav-column > li
   أي أن التسميات نفسها («عمود المنسدل»، «عمود») مصمّمة لميجا-مينيو. لكن CSS
   الثيم يرسم `ul.nav-dropdown` عموداً واحداً ضيّقاً (≈١٧٠px) ويرسم المستوى
   الثالث `position:absolute` — أي flyout يطير عند التحويم.

   القياس ٢٠٢٦-٠٨-١٢ على lavin.fashion بعرض ١٤٤٠px:
     • «الأزياء النسائية» = ١٨ عنصراً في عمود واحد بارتفاع ≈٣٤٠px.
     • عرض اللوحة ≈١٧٠px من أصل ١٤٤٠ متاحة — ٨٨٪ من عرض الشاشة مهدور.
     • الوصول للمستوى الثالث يتطلّب اجتياز نفق تحويم (hover tunnel): خروج
       المؤشّر بمقدار بكسل واحد يغلق اللوحة كلّها.

   ما يفعله هذا الملف: يقلب اللوحة نفسها — بلا PHP وبلا لمس الثيم الأب —
   إلى شبكة كاملة العرض، ويُنزل المستوى الثالث من الطيران إلى داخل عموده.
   فيرى المستوى الثالث كلّه دفعةً واحدة، ويختفي نفق التحويم.

   الهوية: نفس رموز nav-menu.css (نحاسي/ذهبي/عاجي) — تُقرأ من :root هناك،
   ومعها بدائل هنا كي يبقى الملف صالحاً لو حُمّل وحده.
   ============================================================ */

:root {
	--lav-mega-max: 1180px;   /* أقصى عرض للوحة — أوسع من هذا يصير المسح البصري متعباً */
	--lav-mega-col: 178px;    /* أدنى عرض للعمود قبل أن ينكسر السطر */
	--lav-mega-gap: 26px;
	--lav-mega-promo-w: 190px;
}

/* ========================================================
   ١) الحاوية — اللوحة تحتاج مرجعاً للتموضع
   ======================================================== */

/* بلا هذا يتموضع المنسدل نسبةً إلى الـli فيبقى بعرضه. */
.topmenu-wrap {
	position: relative;
}

/* ⚠️ والقاعدة أعلاه وحدها **لم تكن تُستعمل إطلاقاً**: الثيم يضع
   `position: relative` على `li.has-dropdown`، فالمرجع الأقرب هو العنصر لا
   الحاوية، و`right: 0` كان يُثبِّت اللوحة على حافّة العنصر نفسه.

   ما كان يفعله ذلك، مقيساً على عرض ١٤٤٠px:
     • «الأزياء النسائية» حافّته اليمنى ١٣٥٠ ⇒ لوحة ١١٨٠px تبدأ من ١٧٠. سليم.
     • «أزياء الأطفال»    حافّته ١١٦٧      ⇒ تبدأ من **‑١٣**، أي خارج الشاشة.
   وكلما تحرّك العنصر يساراً ازداد الفيضان، وعلى شاشة أضيق يصير الفيضان
   مئات البكسلات. أي أن العطل كان **متدرّجاً** لا ثنائياً — ولذلك لم يظهر
   في أول فحص بصري وقع على أوّل عنصر.

   `static` هنا تُعيد المرجع إلى `.topmenu-wrap`، فتتحاذى كل اللوحات مع
   حاوية القائمة ويستحيل الفيضان بنيوياً لا بالضبط اليدوي. والنطاق مقصور
   على القائمة العلوية للديسكتوب — درج الجوال يستعمل `ul.mobile-menu`. */
ul.topmenu > li.has-dropdown {
	position: static;
}

/* ========================================================
   ٢) اللوحة — من عمود ضيّق إلى شبكة كاملة العرض
   ======================================================== */

ul.topmenu > li.has-dropdown > ul.nav-dropdown {
	/* التموضع: تُمسك بحافّة **الحاوية** لا بحافّة العنصر (انظر §١).
	   والعرض `100%` = عرض `.topmenu-wrap` — لا رقم ثابت: الرقم الثابت هو
	   ما أفاض اللوحة أصلاً، لأنه لا يعرف أين تقف الحاوية. النسبة تتبعها
	   مهما ضاقت الشاشة، فيسقط الفيضان من قائمة الأعطال الممكنة. */
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	width: 100%;
	max-width: min(var(--lav-mega-max), calc(100vw - 32px));

	/* ⚠️ **لا `max-height` هنا.** أُضيف سقف ٧٠vh مع `overflow-y:auto` بوصفه
	   شبكة أمان، فكان ضرراً صافياً لسببين قِيسا:

	     ١) لم يعمل أصلاً: قاعدة `overflow: visible` أدناه تأتي بعده فتغلبه،
	        فلا الحاوية تُمرَّر ولا `overscroll-behavior` يعني شيئاً.
	     ٢) وما فعله هو الأسوأ: السقف يقصّ **الصندوق** بينما المحتوى يبقى
	        ظاهراً (`visible`) — فيتدلّى خارج الخلفية البيضاء بلا حدود ولا
	        ظلّ. وأطول لوحة ٥٤٦px، فأي شاشة أقصر من ٧٨٠px تُفعّله: لابتوب
	        ١٣٦٦×٧٦٨ سقفه ٥٣٨px ⇒ يتدلّى ثمانية بكسلات ثم يزداد.

	   والارتفاع مضبوط أصلاً بحدّ العمق (ثلاثة مستويات) وبعرضٍ يتبع عدد
	   الأسطر — لا بسقفٍ يقصّ ما لا يستطيع إخفاءه. ولوحةٌ طويلة ظاهرةٌ
	   كاملةً تبقى صالحة للاستعمال؛ أمّا المقصوصة فمكسورة. */

	/* التخطيط: أعمدة نصّية (multi-column) لا شبكة (grid).
	   ------------------------------------------------------------------
	   جرّبنا الشبكة أولاً فأخرجت فراغات مُسنَّنة: الشبكة تُحاذي **الصفوف**،
	   فارتفاع الصف = أطول عنصر فيه. و«فساتين» لها ٣ أبناء بينما «عبايات
	   وكافتان» بلا أبناء — فتترك الثانية فراغاً بارتفاع الأولى. وبلغت الفجوة
	   في القياس صفّين كاملين من الفراغ أسفل اللوحة.
	   الأعمدة النصّية تحشو رأسياً ثم تنتقل للعمود التالي، فلا محاذاة صفوف
	   ولا فراغ. (البديل النظري `grid-template-rows: masonry` لا يزال خلف
	   علم تجريبي في فايرفوكس وحده.) */
	display: block;
	columns: var(--lav-mega-col) 5;
	column-gap: var(--lav-mega-gap);

	/* `!important` ليس ترفاً: `nav-menu.css` يحمل
	   `ul.topmenu .nav-dropdown { padding: 10px !important }` من عهد الفلاي-آوت
	   الضيّق. وبلا تجاوزه يُبتلع حشوُ اللوحة كلّه — وقيس أثره: الحشو المحجوز
	   للبطاقة المميّزة يسقط، فتجري الفئات **تحت** البطاقة وتختفي أسماؤها. */
	padding: 26px 30px 24px !important;
	background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
	border: 1px solid #efe1d2;
	border-top: 3px solid var(--lav-copper, #0b8571);
	border-radius: 0 0 18px 18px;
	box-shadow: var(--lav-shadow, 0 18px 44px rgba(5, 55, 47, .18));
	overflow: visible;
	z-index: 999;
}

/* لوحة قصيرة (فئة بابنَين أو ثلاثة) يجب ألّا تتمدّد على ١١٨٠px فتبدو فارغة.

   الصنف على الـ«li» لا على الـ«ul» عمداً: walker الثيم
   (adswth\walker\adsMenuDropdown::start_lvl) يبني أصناف الـ«ul» بيده ولا يطبّق
   `nav_menu_submenu_css_class`، بينما يطبّق `nav_menu_css_class` على الـ«li». */
ul.topmenu > li.has-dropdown.ggen-mega-sm > ul.nav-dropdown {
	width: min(660px, calc(100vw - 32px));
	columns: var(--lav-mega-col) 2;
}
ul.topmenu > li.has-dropdown.ggen-mega-md > ul.nav-dropdown {
	width: min(880px, calc(100vw - 32px));
	columns: var(--lav-mega-col) 3;
}

/* حجز مكان البطاقة المميّزة — تُرسم خارج تدفّق الأعمدة (انظر §٥)، فلولا هذا
   الحجز لجرت الفئات تحتها. والصنف يضعه lavin-mega-menu.php حين توجد بطاقة
   فعلاً: قسم بلا بطاقة يجب ألّا يحجز فراغاً لا يملؤه شيء. */
ul.topmenu > li.has-dropdown.ggen-mega-has-promo > ul.nav-dropdown {
	padding-inline-end: calc(var(--lav-mega-promo-w) + 34px) !important;
	/* أرضية ارتفاع تسع البطاقة كاملةً:
	     ٢٦ حشو علوي + ١٨٨ صورة (مربّعة) + ~١٠٠ نصّ + ٢٤ حشو سفلي ≈ ٣٣٨
	   ولوحة «أزياء الأطفال» محتواها ١٦ فئة مسطّحة تُحشى في أعمدة قصيرة فيهبط
	   ارتفاعها إلى ~٢٥٠ — أي أقصر من البطاقة، فتُقصّ بلا هذه الأرضية. */
	min-height: 350px;
}

/* ========================================================
   ٣) المستوى الثاني — رأس عمود، لا صفّ في قائمة
   ======================================================== */

ul.topmenu > li.has-dropdown > ul.nav-dropdown > li {
	display: block;
	position: static;   /* يُلغي مرجع تموضع الـflyout */
	width: auto;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	/* بلا هذا ينكسر «فساتين» فيبقى عنوانه في عمود وأبناؤه في التالي. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* الاستثناء: كتلة طويلة **يجب** أن تنقسم.
   `avoid` صواب لثلاثة أسطر وكارثة لسبعة عشر — الكتلة تفرض ارتفاعها على
   العمود كلّه فترتفع اللوحة إلى ٦٣٠px وتحتاج تمريراً، ولوحةُ تحويمٍ تُمرَّر
   لا تُستعمل. والوسم يضعه lavin-mega-menu.php عند ١٠ أبناء فأكثر. */
ul.topmenu > li.has-dropdown > ul.nav-dropdown > li.ggen-mega-tall {
	break-inside: auto;
	-webkit-column-break-inside: auto;
	page-break-inside: auto;
}
/* لكن العنوان يبقى ملتصقاً بأوّل أبنائه — انقسامٌ يترك العنوان وحده في قاع
   عمود أسوأ من الطول الذي جئنا نعالجه. */
ul.topmenu > li.has-dropdown > ul.nav-dropdown > li.ggen-mega-tall > a {
	break-after: avoid;
	-webkit-column-break-after: avoid;
}

ul.topmenu > li.has-dropdown > ul.nav-dropdown > li > a {
	display: block;
	font-family: 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--lav-mahogany, #05372f);
	padding: 4px 0 7px;
	margin: 0 0 4px;
	border-bottom: 1px solid #f0e3d5;
	white-space: normal;      /* أسماء الفئات العربية تُقصّ بلا هذا */
	background: none;
	transition: color .18s ease;
}

ul.topmenu > li.has-dropdown > ul.nav-dropdown > li > a:hover,
ul.topmenu > li.has-dropdown > ul.nav-dropdown > li > a:focus-visible {
	color: var(--lav-copper, #0b8571);
	background: none;
}

/* أسهم «افتح الفرعية» التي يرسمها الثيم داخل اللوحة — على كل عمق لا الثاني
   وحده: walker::start_lvl يضع `nav-dropdown-default` على المستويين الثاني
   والثالث معاً، فقاعدة أيقونة الثيم
   `.nav-dropdown-default > li.menu-item-has-children > a::after`
   تصيب المستوى الثالث أيضاً. والسهم بلا معنى بعد أن صار ما يفتحه مرئياً. */
ul.topmenu > li.has-dropdown ul.nav-dropdown li > a::after,
ul.topmenu > li.has-dropdown ul.nav-dropdown li > a::before,
ul.topmenu > li.has-dropdown ul.nav-dropdown li > a > .nav-arrow,
ul.topmenu > li.has-dropdown ul.nav-dropdown .toggle-dropdown {
	content: none !important;
	display: none !important;
}

/* ========================================================
   ٤) المستوى الثالث — من flyout طائر إلى قائمة داخل العمود
   ======================================================== */

/* ⚠️ `inherit` لا `visible`، و`inherit` لا `auto` — والفرق هو العطل المبلَّغ
   ٢٠٢٦-٠٨-٢٩ («تفتح ولم تمر عليها الفأرة»، مستنسَخ بالقياس):

   `visibility: visible !important` غير المشروط كان يجعل ابناً **ينقض إخفاء
   أبيه** — هذه سيمانتيكا `visibility` وحدها دون `opacity`/`display`. فاللوحة
   المغلقة (`hidden` + `opacity: 0`) كانت أعمدتها الداخلية مرئيةً في نظر
   hit-testing وشفافةً في نظر العين (شفافية الأب تُظلّم الرسم لا الالتقاط).
   قِيس على الإنتاج: `elementFromPoint(1100, 150)` — فوق البانر بصرياً —
   يعيد رابط «إكسسوارات» داخل لوحة «الأحذية والحقائب» المغلقة، وتحويمٌ هناك
   ثانيةً واحدة فتح اللوحة فعلاً. أي مصيدة تحويم شفافة بمساحة اللوحة كاملة
   (حتى ٩٨٣×٥٤٦px) فوق البطل، تُبقي `li:hover` حيّاً فتُفتح اللوحة «من فراغ».

   `inherit` يجعل المستوى الثالث يتبع حالة اللوحة نفسها: مغلقة ⇒ يرث الإخفاء
   فيخرج من الالتقاط بنيوياً؛ مفتوحة ⇒ يرث الظهور فيغلب `hidden` الذي يضعه
   الثيم على `nav-dropdown-default` (الـ`!important` باقٍ لهذا الغلب).
   وكذلك `pointer-events`: القيمة `auto` كانت تنقض `none` التي تضعها §٩ على
   اللوحة عند الإغلاق والمغادرة، فتُبقي الأعمدة تعترض النقر أثناء التلاشي —
   و`inherit` (وهي أصلاً الوراثة الطبيعية للخاصية) تُعيدها لحكم §٩. */
ul.topmenu ul.nav-dropdown ul.nav-column,
ul.topmenu ul.nav-dropdown ul.nav-dropdown {
	position: static !important;
	display: block !important;
	opacity: 1 !important;
	visibility: inherit !important;
	transform: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	inset: auto !important;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	pointer-events: inherit;
}

ul.topmenu ul.nav-dropdown ul.nav-column > li {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ========================================================
   ٤-ب) المستوى الرابع — لا يُرسَم

   القائمة أربعة مستويات لا ثلاثة: «إكسسوارات» (مستوى ٣) تحتها تسع فئات
   (أحزمة · أساور · أقراط · خواتم …). ورسمُها يُنتج عيبين معاً:

     • **الهرميّة تضيع.** الأربعة تُرسَم مسطّحةً في عمود واحد، فتقرأ الزائرة
       «أحزمة» ولا شيء يقول إنها تحت «إكسسوارات» تحت «حقائب وإكسسوارات».
     • **الارتفاع ينفجر.** كتلة «حقائب وإكسسوارات» صارت ١٧ سطراً بدل ٨،
       فبلغت ٥٤٠px وحدها ورفعت اللوحة إلى ٦٣٠px مع تمرير.

   وحين حاولنا علاج الارتفاع وحده (السماح للكتلة بالانقسام عبر الأعمدة)
   ساء العيب الأول: عمودان من الروابط بلا عنوان فوقهما.

   فالعلاج عند السبب: لوحةُ تصفّحٍ تعرض مستويين — عنوان الفئة وأبناءها.
   والمستوى الرابع يبقى **متاحاً كاملاً** من صفحة «إكسسوارات» نفسها، ومن
   زرّ «تصفّحي القسم كاملاً». لا يُحذف شيء من الموقع، يُنقل مكانُ عرضه.
   ======================================================== */
ul.topmenu ul.nav-dropdown ul.nav-column ul {
	display: none !important;
}

ul.topmenu ul.nav-dropdown ul.nav-column > li > a {
	display: block;
	font-family: 'Tajawal', sans-serif;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--lav-gray, #4e514f);
	padding: 5px 0;
	white-space: normal;
	background: none;
	/* `transform` لا `padding-inline-start`: تحريك الحشو يعيد التخطيط عند كل
	   تحويم، واسمُ فئةٍ يقارب عرض العمود قد يُعاد لفّه فيقفز العمود كلّه.
	   والقيمة سالبة لأن الواجهة RTL — الإزاحة عن بداية السطر تعني يساراً. */
	transition: color .16s ease, transform .16s ease;
}

ul.topmenu ul.nav-dropdown ul.nav-column > li > a:hover,
ul.topmenu ul.nav-dropdown ul.nav-column > li > a:focus-visible {
	color: var(--lav-copper, #0b8571);
	transform: translateX(-5px);
	background: none;
}

/* ========================================================
   ٥) البطاقة المميّزة — العمود الأخير الذي يحقنه lavin-mega-menu.php
   ======================================================== */

/* خارج تدفّق الأعمدة عمداً: عنصرٌ داخل `columns` يُقسَّم ويُنقَل بين الأعمدة
   بحسب الحشو، فلا يمكن تثبيته في الطرف. والمرجع هو الـ«ul» نفسها لأنها
   `position:absolute` أصلاً. */
ul.topmenu > li.has-dropdown > ul.nav-dropdown > li.ggen-mega-promo {
	position: absolute;
	inset-inline-end: 30px;   /* RTL ⇒ الطرف الأيسر البصري */
	top: 26px;
	/* **بلا `bottom`** — أي بارتفاع طبيعي لا ممدود. المحاولة الأولى مدّدتها
	   بـ`top`+`bottom` وجعلت الصورة مرنة (`flex:1`)، فقُصّ عنوان البطاقة
	   وزرّها. السبب أن الثيم يفرض `display:block` على كل `<a>` داخل المنسدل
	   بأسبقيّة أعلى، فلم تكن البطاقة حاويةً مرنة أصلاً ولم يشتغل التقلّص.
	   الارتفاع الطبيعي لا يحتاج المرونة، ولا يعتمد على كسب حرب أسبقيّة. */
	width: var(--lav-mega-promo-w);
	margin: 0;
}

.ggen-mega-card {
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: var(--lav-ivory, #e8f7f4);
	border: 1px solid #efe1d2;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}

.ggen-mega-card:hover,
.ggen-mega-card:focus-visible {
	box-shadow: var(--lav-shadow-sm, 0 8px 22px rgba(5, 55, 47, .12));
	transform: translateY(-2px);
}

.ggen-mega-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;   /* ارتفاع معلوم سلفاً ⇒ أرضية اللوحة أعلاه قابلة للحساب */
	overflow: hidden;
	background: #f4ece4;
}

.ggen-mega-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ggen-mega-card__body {
	flex: 0 0 auto;
	padding: 12px 14px 14px;
}

.ggen-mega-card__eyebrow {
	display: block;
	font-family: 'Tajawal', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .4px;
	color: var(--lav-copper, #0b8571);
	margin: 0 0 4px;
}

.ggen-mega-card__title {
	display: block;
	font-family: 'Tajawal', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--lav-noir, #2d2d2d);
	margin: 0 0 8px;
	/* سطران ثم قصّ — عناوين المنتجات عندنا طويلة (٥٠ حرفاً+). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ggen-mega-card__cta {
	display: inline-block;
	font-family: 'Tajawal', sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: var(--lav-copper, #0b8571);
}

/* ========================================================
   ٦) رابط «عرض كل القسم» أسفل اللوحة
   ======================================================== */

ul.topmenu > li.has-dropdown > ul.nav-dropdown > li.ggen-mega-all {
	column-span: all;   /* يعبر الأعمدة كلّها فيقع في القاع */
	margin: 8px 0 0;
	padding-top: 16px;
	border-top: 1px solid #f0e3d5;
}

ul.topmenu > li.has-dropdown > ul.nav-dropdown > li.ggen-mega-all > a {
	display: inline-block;
	font-family: 'Tajawal', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	background: linear-gradient(135deg, var(--lav-copper, #0b8571) 0%, var(--lav-mahogany, #05372f) 100%);
	padding: 9px 22px;
	border-radius: 999px;
	border: 0;
	transition: filter .18s ease;
}

ul.topmenu > li.has-dropdown > ul.nav-dropdown > li.ggen-mega-all > a:hover,
ul.topmenu > li.has-dropdown > ul.nav-dropdown > li.ggen-mega-all > a:focus-visible {
	filter: brightness(1.08);
	color: #fff;
}

/* ========================================================
   ٧) الوصول بلوحة المفاتيح
   ------------------------------------------------------
   الثيم يفتح اللوحة على :hover وحده — أي أن التنقّل بـTab لا يفتحها إطلاقاً،
   فيصير القسم كلّه غير قابل للوصول بلوحة المفاتيح (WCAG 2.1.1).

   ⚠️ وكانت `:focus-within` — فاتّسعت عن قصدها: كروم يمنح التركيز للرابط عند
   **نقرة الفأرة** أيضاً، فنقرةُ قسمٍ تفتح لوحته فوق الصفحة أثناء الانتقال،
   والرجوعُ بالسهم (bfcache يستعيد التركيز) يعيد الصفحة واللوحةُ مفتوحة بلا
   مؤشّرٍ قربها — وجهٌ ثانٍ من عطل «تفتح ولم تمر عليها الفأرة» (٢٠٢٦-٠٨-٢٩).
   `:has(:focus-visible)` تقصرها على التركيز المرئي: Tab يفتح دائماً، ونقرة
   الفأرة لا تُنشئ `:focus-visible` أصلاً فلا تفتح. والأصنافيّة محفوظة كما
   كانت (0,4,3) — `:has()` تأخذ أصنافيّة حجّتها.
   ======================================================== */

ul.topmenu > li.has-dropdown:has(:focus-visible) > ul.nav-dropdown {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto;
}

ul.topmenu a:focus-visible {
	outline: 2px solid var(--lav-copper, #0b8571);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ========================================================
   ٨) الشاشات الأضيق والحركة المخفَّضة
   ======================================================== */

@media (max-width: 1100px) {
	:root { --lav-mega-col: 158px; }
	ul.topmenu > li.has-dropdown > ul.nav-dropdown {
		padding: 20px 22px 18px;
		gap: 4px 18px;
	}
}

/* الدرج (mobile_menu) له تصميمه في nav-menu.css — لا نلمسه.
   القاعدة أدناه تمنع تسرّب قواعد اللوحة إليه فقط. */
@media (max-width: 849px) {
	ul.topmenu > li.has-dropdown > ul.nav-dropdown {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ggen-mega-card,
	ul.topmenu ul.nav-dropdown ul.nav-column > li > a {
		transition: none;
	}
	.ggen-mega-card:hover {
		transform: none;
	}
}

/* ========================================================
   ٩) نيّة التحويم — اللوحة لا تُفتح لمؤشّرٍ عابر
   ------------------------------------------------------
   العطل المبلَّغ: مرور المؤشّر على شريط الفئات — أو أسفلها في طريقه إلى حقل
   البحث والحساب — يفتح اللوحة **فوراً**، فتغطّي الترويسة وربع الصفحة الأولى
   لكل حركةِ عبورٍ غير مقصودة.

   القياس (٢٠٢٦-٠٨-٢٥، عرض ١٤٤٠px، الإنتاج): اللوحة تبدأ عند y=٣٢٫٣ وتنتهي
   عند y=٥٧٨٫٣ بعرض ٩٨٣px — أي أنها تبتلع `#top-bar` و`#main-bar` معاً ونصف
   البانر. وعبورٌ فوق رابطٍ عرضه ٩٠px يستغرق ~٩٠ms عند سرعة مؤشّرٍ معتادة،
   فكل تنقّلٍ في الترويسة كان يومض لوحةً بنصف مساحة الشاشة.

   ولماذا لم يُخفِّفه انتقال الثيم ٠٫٥s: `visibility` تقفز إلى `visible` في
   اللحظة صفر مهما طالت المدّة — خاصّيّة تفاعلها أن الطرف `visible` يسري على
   المدّة كلّها لا على طرفها. فالمدّة تؤخّر الشفافية وحدها، والظهورُ آنيّ.
   إبطاء الانتقال لا يعالج «تظهر بمجرّد المرور» أبداً.

   العلاج: **تأخير** الانتقال لا مدّته. مهلةٌ على حالة التحويم تعني أن المؤشّر
   العابر لا يبلغ العتبة أصلاً — يرتدّ النمط إلى الحالة المغلقة قبل انقضائها
   فلا يبدأ شيء. نيّةُ تحويمٍ كاملة بلا سطر جافاسكربت وبلا لمس الثيم الأب.

   الأرقام:
     • ١٨٠ms عتبةَ فتح — فوق زمن العبور (~٩٠ms) بهامشٍ مضاعف، ودون عتبة
       الإحساس بالبطء في التحويم المقصود.
     • ٢٠٠ms مهلةَ سماحٍ قبل الإغلاق — `ul.topmenu` بينها `gap: 4px`، وهي
       أرضٌ لا يملكها أي `li`. فالانتقال الأفقي بين قسمين كان يُغلق اللوحة
       ويُعيد فتحها عند كل فجوة.

   و`pointer-events` تُسحب **بلا مهلة** عند المغادرة: أثناء التلاشي تبقى
   `visibility: visible` بحكم القاعدة نفسها أعلاه، فكانت اللوحة تعترض نقرةً
   على حقل البحث الواقع تحتها بعد أن غادرتها الزائرة بثلث ثانية.

   النطاق: `hover: hover` وحده — على اللمس يُحاكى `:hover` بالنقر فتصير
   المهلة تأخيراً صافياً بلا مقابل. و`min-width` تتبع حدّ الرسم في §٨.
   ======================================================== */

@media (hover: hover) and (min-width: 850px) {

	/* الحالة المغلقة = مسار المغادرة. */
	ul.topmenu > li.has-dropdown > ul.nav-dropdown {
		transition:
			opacity .16s ease-out .2s,
			visibility 0s linear .36s;
		pointer-events: none;
	}

	/* الحالة المفتوحة = مسار الفتح، وعتبته هي المهلة. */
	ul.topmenu > li.has-dropdown:hover > ul.nav-dropdown {
		transition:
			opacity .18s ease-out .18s,
			visibility 0s linear .18s;
		pointer-events: auto;
	}

	/* لوحة المفاتيح لا تنتظر نيّة — التركيز نفسه هو النيّة، وتأخيرُه
	   ٣٦٠ms يجعل الوصول يبدو معطّلاً. تأتي بعد قاعدة التحويم عمداً:
	   الأسبقيّة متساوية (٠-٤-٣) فيحسم ترتيب المصدر.
	   و`:has(:focus-visible)` لا `:focus-within` — للسبب المشروح في §٧. */
	ul.topmenu > li.has-dropdown:has(:focus-visible) > ul.nav-dropdown {
		transition: none;
		pointer-events: auto;
	}
}