/* ============================================================================
   nav.css — category ke menu ki teen shaklein: chips | bar | mega.

   Load ki tarteeb: theme.css -> catalogue.css -> links.css -> nav.css (ye file).
   Jagah aur naap catalogue.css ki seerhi se uthaye gaye hain (--s*, --t*, --ease),
   rang theme.css ke tokens se — yahan koi naya paimana ya hard-code rang nahi.
   Sirf menu ke rules yahan hain; kisi doosri file ko haath nahi lagaya gaya.

   Teen baatein jo is file ki har satar chalati hain:

   1. Koi JS nahi. Panel :hover aur :focus-within se khulta hai. Keyboard is
      tarteeb se andar jata hai: pehle upar wala asli link focus hota hai ->
      li par :focus-within lagta hai -> panel nazar aa jata hai -> ab us ke
      andar ke link bhi focus ho sakte hain. (visibility:hidden cheez focus
      nahi hoti — isi liye parent ka apna asli link hona zaroori hai.)

   2. Phone par panel hai hi nahi — wo @media (hover: hover) ke andar band hai.
      Ungli category par tap kare to category khulni chahiye, koi menu nahi.
      Us ki qismein neeche wali patti (.catnav-sub) me hamesha maujood hoti hain.

   3. left/right nahi — inline-start/end. Urdu me poora safha dir="rtl" ho
      jata hai aur seedhi property wahan galat taraf ja girti hai.
   ============================================================================ */


/* ============================================================================
   1. Khol (shell) aur chipakna
   ============================================================================ */

.catnav { position: relative; background: var(--surface); }
.catnav-bar, .catnav-mega { border-bottom: 1px solid var(--line); }

/* Chips ko ground chahiye — surface ka chip surface ke background me ghul jata hai. */
.catnav-chips { background: var(--ground); }

/* .wrap theme.css se aata hai (max-width + side padding); yahan sirf upar-neeche
   ki jagah. Do class ka selector is liye ke .wrap ke baraabar reh kar na haare. */
.catnav .catnav-wrap { padding-block: var(--s2); }
.catnav-chips:not(.is-sticky) .catnav-wrap { padding-block: var(--s1) var(--s6); }
.catnav-head { margin-bottom: var(--s3); }

/*
 * Chipka hua menu. Header pehle se sticky hai (top:0, qareeb 77px unchai:
 * .header .wrap ki min-height 76px + 1px lakeer).
 *
 * Menu ka top jaan bujh kar do-teen pixel kam rakha hai: menu header ke neeche
 * halka sa ghus jata hai (header ka z-index 40 hai, menu ka 30). Zyada rakhte
 * to beech me ek pixel ki jhiri reh jati aur us me se scroll hota hua content
 * jhalakta — wo toota hua lagta hai.
 */
/*
 * --header-h catalogue.js asli header naap kar rakhta hai (lamba dukan ka naam, Urdu
 * ki unchi qatar — header 77px se bara ho jata hai aur menu us ke neeche ghus jata tha).
 * JS na chale to purana andaza (77px).
 */
.catnav.is-sticky {
  position: sticky;
  top: calc(var(--header-h, 77px) - 3px);
  z-index: 30;
  border-bottom: 1px solid var(--line);
}

/* Header ki tarah zara si aar-paar — dono pattiyan ek hi cheez lagti hain. */
@supports (backdrop-filter: blur(6px)) {
  .catnav-bar.is-sticky,
  .catnav-mega.is-sticky {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
  }
  .catnav-chips.is-sticky {
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
  }
}

@media (max-width: 720px) {
  /*
   * Phone par sirf menu chipakta hai, header (logo + search, do qatar) nahi. Pehle
   * header + menu + neeche ki WhatsApp patti mil kar screen ka 32-49% kha jate the.
   * Menu chalu hi na ho to header pehle ki tarah chipka rehta hai (catalogue.css).
   */
  html:has(.catnav.is-sticky) .header { position: static; }
  .catnav.is-sticky { top: 0; }
}

/* Landscape phone me catalogue.css header ko static kar deti hai — menu bhi
   chipakna chhor de, warna do chipki pattiyan aadhi screen kha jati hain. */
@media (max-height: 460px) and (orientation: landscape) {
  .catnav.is-sticky { position: static; }
}

/*
 * catalogue.css me --stick-h chipki hui pattiyon ka kul qad hai aur usi se
 * html ka scroll-padding-top banta hai ("#products" par jump isi se neeche
 * nahi chhupta). Menu bhi chipak raha hai to wo qad barh jata hai — wahi
 * variable yahan se barha dete hain, naya scroll-padding nahi likhte.
 *
 * :has ki specificity us ke andar wale selector se banti hai, is liye
 * html:has(.catnav.is-sticky) catalogue.css ke :root se jeet jata hai —
 * yani har media query ka jawab yahan bhi dena parta hai.
 * Purana browser :has na samjhe to sirf itna hota hai ke jump thora upar
 * ruk jata hai; safha phir bhi theek chalta hai.
 */
/* Ye sirf JS na chalne ki surat ka andaza hai — catalogue.js asli qad naap kar
   --stick-h khud rakhta hai (menu do qatar ka ho, ya sub-chips ki qatar ho). */
html:has(.catnav.is-sticky) { --stick-h: 152px; }
html:has(.catnav.is-sticky .catnav-sub),
html:has(.catnav.is-sticky .subchips) { --stick-h: 210px; }

@media (max-width: 720px) {
  /* Phone par header chipakta nahi (upar dekhein) — sirf menu ka qad. */
  html:has(.catnav.is-sticky) { --stick-h: 72px; }
  html:has(.catnav.is-sticky .catnav-sub),
  html:has(.catnav.is-sticky .subchips) { --stick-h: 124px; }
}

@media (max-height: 460px) and (orientation: landscape) {
  html:has(.catnav.is-sticky),
  html:has(.catnav.is-sticky .catnav-sub) { --stick-h: 0px; }
}


/* ============================================================================
   2. CHIPS — shaklein catalogue.css me hain (.chip / .chip.on)
   ============================================================================ */

/*
 * Yahan chip ki shakl dobara nahi likhi: chuna hua chip .on class se wahi
 * accent wala andaz le leta hai jo baqi site par hai. Iske ilawa har chip par
 * aria-current="page" bhi lagta hai — link ke liye yahi durust hai aur screen
 * reader "current page" bolta hai. position sirf is liye ke ginti ke sath
 * chhupa hua lafz (.vh, "products") chip ke andar hi lunga rahe.
 */
.catnav .chip { position: relative; }


/* ============================================================================
   2a. Category ke nishan — chips, patti, panel aur sub ki patti, sab me
   ============================================================================ */
/* Bunyadi shakal theme.css ki .caticon me hai (mask + currentColor). Yahan sirf naap
   aur halka pan: chuni hui cheez ka nishan poora gehra, baqi zara halke. */
.catnav .caticon { width: 20px; height: 20px; }
.catnav .caticon:not(.caticon-pic) { opacity: .8; }
.catnav .chip.on .caticon,
.catnav [aria-current="page"] .caticon,
.catnav .is-trail .caticon,
.catnav a:hover .caticon { opacity: 1; }

.catnav-list .caticon,
.catnav-pill .caticon { width: 18px; height: 18px; }

/* Panel ki qatar: bayen nishan + naam, dayen ginti (space-between wahi rehta hai). */
.catnav-name { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }


/* ============================================================================
   3. BAR aur MEGA — upar ki patti
   ============================================================================ */

.catnav-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Phone par patti ungli se side me khisakti hai. Overflow isi dabbe me
     rehta hai, safhe par nahi — 360px par bhi page chaura nahi hota. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.catnav-row::-webkit-scrollbar { display: none; }

.catnav-item { display: flex; }

.catnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 46px;
  padding: 0 var(--s3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.catnav-link:hover { background: var(--raised); color: var(--ink); }

.catnav-count { font-size: var(--t-xs); font-weight: 400; color: var(--muted); }

.catnav-caret {
  width: 15px; height: 15px; flex: none; opacity: .5;
  transition: transform .15s var(--ease);
}
/* Ungli wali screen par panel hota hi nahi (neeche dekhein) — teer jhoota wada karta tha. */
@media (hover: none) {
  .catnav-caret { display: none; }
}

/*
 * Chuni hui category: accent ka halka takiya, gehra likha, aur ek baarik ghera.
 * --accent-soft aur --accent-text ka jora server par (ThemeColors) parhne laiq
 * bana kar bheja jata hai, is liye chaaron theme me chalta hai.
 * .is-trail = wo main category jis ke andar se koi sub chuni hui hai.
 */
.catnav-link[aria-current="page"],
.catnav-link.is-trail {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
.catnav-link[aria-current="page"] .catnav-count,
.catnav-link.is-trail .catnav-count { color: inherit; opacity: .75; }


/* ============================================================================
   4. Neeche khulne wala panel — sirf mouse wali screen par
   ============================================================================ */

/* Bunyadi haalat: panel hai hi nahi. Ungli se tap karne par category khulti hai. */
.catnav-drop { display: none; }

@media (hover: hover) {

  /* Mouse wali screen par patti khisakti nahi, lipatti hai — overflow rehta
     to panel usi dabbe me kat jata. */
  .catnav-row { flex-wrap: wrap; overflow: visible; }

  /* Bar ka panel apni category ke neeche khulta hai (ghar = li),
     mega ka poori qatar jitna chaura (ghar = ul). */
  .catnav-bar .catnav-item { position: relative; }
  .catnav-mega .catnav-row { position: relative; }

  .catnav-drop {
    display: block;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: 5;
    /* Ye khaali jagah mouse ka pul hai: card is padding ke neeche shuru hota
       hai. Margin rakhte to beech me hover toot jata aur panel band ho jata. */
    padding-block-start: var(--s2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .14s var(--ease), transform .14s var(--ease), visibility 0s linear .14s;
  }

  .catnav-mega .catnav-drop { inset-inline: 0; }
  /* Bar ka panel apne li ke andar simat kar 250px par atak jata tha — nishan ke baad lambi
     qatar ("All in Cables & Accessories") do line ho jati. Ab matn jitna, 340px ki had tak. */
  .catnav-bar .catnav-drop { width: max-content; }

  /* Qatar ke aakhri do panel apne kinare se khulte hain, warna wo screen se
     bahar nikal kar poore safhe ko chaura kar dete hain. (Ye sirf JS na chalne ka
     andaza hai: patti do qatar me lipat jaye to "aakhri do" doosri qatar ke SHURU
     me hote hain aur ulta kinara unhein screen se bahar dhakel deta tha.) */
  .catnav-bar .catnav-item:nth-last-child(-n+2) > .catnav-drop {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  /* catalogue.js khulne se pehle naap leta hai ke panel screen me samata hai ya nahi,
     aur zaroorat ho to kinara badal deta hai. left/right jaan boojh kar (physical):
     naap bhi physical pixels me hai, RTL ho ya LTR. */
  .catnav-bar .catnav-item.pin-right > .catnav-drop { left: auto; right: 0; }
  .catnav-bar .catnav-item.pin-left > .catnav-drop { right: auto; left: 0; }

  .catnav-item:hover > .catnav-drop,
  .catnav-item:focus-within > .catnav-drop {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* Khula hua panel apne baad wale menu items ke upar rehna chahiye. */
  .catnav-bar .catnav-item:hover,
  .catnav-bar .catnav-item:focus-within { z-index: 6; }

  .catnav-item:hover > .catnav-link .catnav-caret,
  .catnav-item:focus-within > .catnav-link .catnav-caret { transform: rotate(180deg); }
}

/* Bari mouse wali screen: upar ki patti ki ginti panel me hi kaafi hai — patti patli
   rehti hai aur kam lipat-ti hai (chipki patti ka qad bhi kam). */
@media (hover: hover) and (min-width: 1280px) {
  /* Nazar se chhupi, screen-reader ke liye maujood (display:none "Inverters products" bulwata tha). */
  .catnav-row > .catnav-item > .catnav-link > .catnav-count {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .catnav-link { padding-inline: 10px; gap: 6px; }
}

.catnav-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s2);
  /* Chalees qismon wali dukan me panel poori screen na kha jaye. */
  max-height: min(70vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.catnav-bar .catnav-card { min-width: 250px; max-width: min(340px, 86vw); }
.catnav-mega .catnav-card { padding: var(--s4); }


/* ---------- Panel ke andar ki list ---------- */

.catnav-list { list-style: none; margin: 0; padding: 0; }
.catnav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 40px;
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--t-md);
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.catnav-list a:hover { background: var(--raised); color: var(--ink); }
.catnav-list a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}
.catnav-list .catnav-count { flex: none; }


/* ---------- Mega ka andaruni bantwara ---------- */

.catnav-grid { display: flex; flex-wrap: wrap; gap: var(--s4); }
.catnav-col { flex: 1 1 260px; min-width: 0; }
/* Brands do column me — ek patli column me panel ke andar scroll karna parta tha. */
.catnav-col-brands { flex: 0 1 360px; }
.catnav-brandcols { columns: 2 150px; column-gap: var(--s3); }
.catnav-brandcols li { break-inside: avoid; }

/* Brands ka column apni lakeer se alag hota hai — magar sirf tab jab wo
   sath me hi ho. Tang panel me wo neeche chala jata hai, wahan lakeer
   be-matlab lagti. */
@media (min-width: 860px) {
  .catnav-col-brands {
    border-inline-start: 1px solid var(--line-soft);
    padding-inline-start: var(--s4);
  }
}

/* Qismein 2 se 4 column me — jitni jagah mile. Column ki chaurai khud tay
   hoti hai, is liye har screen ke liye alag rule nahi likhna parta. */
/* 240px (195 nahi): nishan + ginti ke baad naam ko jagah — "Off-Grid / UPS | Inverters" na toote. */
.catnav-cols { columns: 240px 3; column-gap: var(--s3); }
.catnav-cols li { break-inside: avoid; }

.catnav-colhead {
  margin: 0 0 var(--s2);
  padding-inline: var(--s3);
  font-family: var(--font-body);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Nastaliq me harf aapas me jurte hain — letter-spacing un ka jor tor deti hai. */
body[dir="rtl"] .catnav-colhead {
  font-family: var(--font-urdu);
  letter-spacing: 0;
  text-transform: none;
}

.catnav-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.catnav-more:hover { background: var(--accent-soft); color: var(--accent-text); }
.catnav-more svg { width: 15px; height: 15px; flex: none; }
body[dir="rtl"] .catnav-more svg { transform: scaleX(-1); }


/* ============================================================================
   5. Chuni hui category ki qismein — patti ke neeche, hamesha nazar aane wali
   ============================================================================ */

/*
 * Ye patti hover wale panel ka mutabadil nahi, us ka saathi hai:
 *   - phone par hover hota hi nahi,
 *   - panel me ye nahi dikhta ke abhi kaun si qism lagi hui hai,
 *   - JS band ho ya keyboard chal raha ho, dono surat me qismein yahan milti hain.
 */
.catnav-sub {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line-soft);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.catnav-sub::-webkit-scrollbar { display: none; }

.catnav-subtitle {
  flex: none;
  padding-inline-end: var(--s1);
  font-family: var(--font-body);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
body[dir="rtl"] .catnav-subtitle {
  font-family: var(--font-urdu);
  letter-spacing: 0;
  text-transform: none;
}

.catnav-pill {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 var(--s3);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--raised);
  color: var(--ink);
  font-size: var(--t-sm);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.catnav-pill:hover { border-color: var(--line); color: var(--ink); }
.catnav-pill[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.catnav-pill .catnav-count { color: inherit; opacity: .72; }


/* ============================================================================
   6. Chhoti screen aur ungli wali screen
   ============================================================================ */

@media (max-width: 720px) {
  .catnav-chips:not(.is-sticky) .catnav-wrap { padding-block: var(--s1) var(--s5); }
  .catnav-head { margin-bottom: var(--s2); }
  .catnav-link { padding: 0 var(--s3); }

  /* Patti kinare tak chale — beech me ruki hui qatar se pata hi nahi chalta
     ke aur categories bhi hain. Scroller apna overflow khud sambhalta hai.
     --gutter (catalogue.css), sabit 16px nahi: 420px se neeche .wrap ka padding
     14px hai aur 16px wali patti dono taraf 2px bahar nikal kar safhe ko side me
     scroll karwa deti thi (Urdu safha khulte hi khiska hua). */
  .catnav-row,
  .catnav-sub { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}

@media (max-width: 560px) {
  /* Chipki hui patti par har pixel qeemti hai — category ka naam upar wali
     patti me pehle se chuna hua nazar aa raha hota hai. */
  .catnav-subtitle { display: none; }
}

/* Ungli se chalne wali screen: koi nishana 44px se chhota na ho. */
@media (pointer: coarse) {
  .catnav-link { min-height: 48px; }
  .catnav-pill { min-height: 44px; }
  .catnav-list a { min-height: 44px; }
}