/* القائمة الكبرى وقائمة الجوال — إضافة على الأصل (مكتوبة يدويًا؛ site.css يولّده prep.py).
   الترويسة نفسها في parts/header.html: قوائم الأصل الأربع + «المساعدة» + «المدونة»، وقائمة الجوال بأقسام قابلة للطي. */

/* الصفحة الحالية (يميزها vr_header في functions.php) */
.mega a[aria-current="page"],.mnav a[aria-current="page"]{background:var(--sky-soft);color:var(--blue)}
.nav .dd.cur>button,.nav>a[aria-current="page"]{color:var(--blue)}

/* «دليل الشراء» صار أربعة أعمدة (1040px) فلا يتسع مثبتًا عند زره كبقية القوائم: هو و«المساعدة» يتوسطان الترويسة */
.top .wrap{position:relative}
.nav .dd:nth-of-type(n+4){position:static}
.nav .dd:nth-of-type(n+4) .mega{right:auto;left:50%;transform:translateX(-50%)}

/* الأصل يخفي القوائم المنسدلة بين 861 و1080px ولا يظهر زر قائمة الجوال إلا تحت 860px، فلا قائمة في هذا المدى.
   صار زر القائمة يظهر حتى 1199px (الترويسة بقوائمها الست تحتاج 1188px). */
@media (max-width:1199px){
  .nav,.top-cta .btn-ghost{display:none}
  .menu-btn{display:grid}
  .top-cta{margin-inline-start:auto}
  .mnav{position:fixed;inset:76px 0 auto 0;background:var(--white);border-bottom:1.5px solid var(--line);padding:12px 24px 20px;z-index:49;flex-direction:column}
  .mnav.open{display:flex}
  .mnav a{padding:14px 4px;border-bottom:1px solid var(--line);font-weight:600}
}

/* قائمة الجوال: أقسام القائمة الكبرى نفسها قابلة للطي، والمدونة آخرها، ثم زرا العرض التوضيحي وعرض السعر */
.mnav{max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
.mnav .mg{border-bottom:1px solid var(--line)}
.mnav .mg summary{list-style:none;cursor:pointer;padding:14px 4px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px}
.mnav .mg summary::-webkit-details-marker{display:none}
.mnav .mg summary svg{color:var(--grey);transition:transform .2s;flex-shrink:0}
.mnav .mg[open] summary{color:var(--blue)}
.mnav .mg[open] summary svg{transform:rotate(180deg)}
.mnav .mg-body{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:0 4px 14px}
.mnav .mg-body h5{grid-column:1/-1;margin:10px 0 4px;font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--grey)}
.mnav .mg-body a{padding:8px 10px;border:0;border-radius:10px;font-size:15px;font-weight:500;color:var(--ink-2);line-height:1.5}
.mnav .mnav-cta{display:flex;gap:10px;padding-top:16px}
.mnav .mnav-cta a.btn{flex:1;padding:12px 10px;border-bottom:0;font-size:15px;font-weight:700}
.mnav .mnav-cta a.btn-primary{color:#fff}
@media (max-width:520px){
  .mnav{padding-inline:18px}
  .mnav .mg-body{grid-template-columns:1fr}
  .mnav .mnav-cta{flex-direction:column}
}