/* ============================================================
   Megamenu V2 (type2) — horizontalni multi-kolone flyout
   ------------------------------------------------------------
   Skopirano na `.category-menu.mega-v2` / `.megamenu.type2`, pa
   NE dira V1 (`.megamenu.flex-column`). Override-uje uska globalna
   `.megamenu` pravila iz custom.css (min/max-width: 300px).

   Kolone preko CSS multicolumn (column-width) da bi se blokovi
   podkategorija ravnomerno spakovali bez obzira na broj stavki,
   bez stepenastih rupa koje pravi flex-wrap sa neravnomernim
   visinama.
   ============================================================ */

/* --- Li postaje statičan: panel se kotvi na vrh dropdown-box-a
       (ne na hover-ovanu stavku) -> uvek "zalepljen gore". --- */
.category-menu.mega-v2 > li {
  position: static;
}

/* --- Panel: pun, do desne ivice containera --- */
.category-menu.mega-v2 .megamenu.type2 {
  position: absolute;
  width: calc(100vw - 28rem);       /* do desne ivice containera na užim ekranima... */
  max-width: 100rem !important;     /* ...max ≈ 125rem (1280px-2*15px) sadržaj - 24rem sidebar, -1rem rezerva */
  min-width: 0 !important;
  padding: 2.5rem 2.5rem 0.5rem !important;
  max-height: var(--mega-v2-maxh, 65rem) !important;  /* prati levi meni (vidi --mega-v2-maxh) */
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* --- Prikaz: zalepljen gore-desno, SAMO na hover/active.
       Skriveni paneli moraju da ostanu na top:-9999px (tema ih tako
       gura van ekrana) jer im je unutrašnji <ul> uvek visibility:visible —
       ako ih dovučemo na top:0, ti ul-ovi se preklope na ekranu. --- */
.category-menu.mega-v2 > li:hover .megamenu.type2,
.category-menu.mega-v2 > li.active .megamenu.type2 {
  top: 0 !important;
  bottom: 0 !important;             /* ista visina kao levi meni -> panel uvek
                                       vertikalno pokriva hover-ovanu stavku,
                                       nema "mrtve zone" pri prelasku na desno */
  left: 100% !important;            /* desna ivica sidebara (24rem) */
}

/* JS-vođeno stanje "otvoreno": drži panel otvorenim i kad se :hover izgubi
   (npr. pri prelasku preko scrollbar-a). Mora eksplicitno visibility/transform
   jer tema vidljivost vezuje za :hover. Vidi skriptu u megamenu-v2.html. */
.category-menu.mega-v2 > li.mega-open .megamenu.type2 {
  top: 0 !important;
  bottom: 0 !important;
  left: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* --- Red sa kolonama: multicolumn umesto flex --- */
.category-menu.mega-v2 .megamenu.type2 > li.row {
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 0;
  column-width: 20rem;              /* auto broj kolona prema širini */
  column-gap: 3rem;
}

/* --- Jedna podkategorija = blok koji se ne lomi između kolona --- */
.category-menu.mega-v2 .megamenu.type2 > li.row > [class*="col-"] {
  display: inline-block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 0 1rem;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* --- Naslov kolone (NADKATEGORIJA): istaknut + border-bottom --- */
.category-menu.mega-v2 .megamenu.type2 .menu-title {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0;
  padding-bottom: 0;
  color: #555;
  border-bottom: 1px solid #eee;   /* linija nosi NASLOV (nadkategorija) */
}
.category-menu.mega-v2 .megamenu.type2 .menu-title a {
  padding: 0 !important;
  line-height: 1.25 !important;
  font-weight: 700;
  color: #555;
  border: 0 !important;
}
.category-menu.mega-v2 .megamenu.type2 .menu-title a:hover {
  color: var(--primary);
}
/* Divider (<hr>) se NE koristi — liniju nosi naslov. Gasimo agresivno. */
.category-menu.mega-v2 .megamenu.type2 .divider,
.category-menu.mega-v2 .megamenu.type2 hr {
  display: none !important;
  border: 0 !important;
}

/* --- Lista dece (sub-sub kategorije) --- */
.category-menu.mega-v2 .megamenu.type2 ul {
  width: 100%;
  margin: 15px 0 0 !important;
  padding: 0;
  list-style: none;
}
.category-menu.mega-v2 .megamenu.type2 ul li {
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  border: 0 !important;            /* PODKATEGORIJE bez ikakve linije */
}
.category-menu.mega-v2 .megamenu.type2 ul li a {
  display: block;
  padding: 0.35rem 0 !important;
  line-height: 1.35 !important;
  white-space: normal;
  font-size: 1.3rem;
  color: #999;
  border: 0 !important;            /* PODKATEGORIJE bez ikakve linije */
}
.category-menu.mega-v2 .megamenu.type2 ul li a:hover {
  color: var(--primary);
}

/* --- Levi meni (lista kategorija): zakucana visina + vertikalni scroll.
       Overflow MORA biti na ul-u, a NE na .dropdown-box-u: dropdown-box je
       containing block iskačućeg panela (li je position:static), pa bi
       overflow na njemu isekao flyout. Ovde je ul iznad/ispod containing
       block-a, pa flyout ostaje neisečen. --- */
.category-menu.mega-v2 {
  /* Visina = min(zakucanih 65rem, prostor do dna viewporta).
     Header zauzima ~24rem do vrha liste, pa na nižim ekranima (laptop)
     lista više ne ide van ekrana. Tuning: promeni 65rem ili 24rem. */
  --mega-v2-maxh: min(65rem, calc(100vh - 24rem));
  max-height: var(--mega-v2-maxh) !important;
  overflow-y: auto !important;
  overflow-x: hidden;
}
/* tanji, diskretan scrollbar */
.category-menu.mega-v2::-webkit-scrollbar {
  width: 6px;
}
.category-menu.mega-v2::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}