/* =========================================================
   Studio387 — Ninium Mobile Menu
   ========================================================= */

.nn-wrap{display:flex;justify-content:flex-end;}

/* ---- Hamburger → X ---- */
.nn-wrap .nn-burger,
.nn-burger{
  -webkit-appearance:none;appearance:none;
  box-shadow:none !important;font-size:0;line-height:0;min-width:0;min-height:0;
  width:var(--nn-burger-size,44px);
  height:var(--nn-burger-size,44px);
  border:1px solid var(--nn-burger-border,#D9D2CF) !important;
  border-radius:var(--nn-burger-radius,11px);
  background:var(--nn-burger-bg,rgba(255,255,255,0.5)) !important;
  background-image:none !important;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:0;position:relative;
  z-index:calc(var(--nn-z,9999) + 1);
  transition:background .3s,border-color .3s;
  -webkit-tap-highlight-color:transparent;
}
.nn-burger span{
  width:18px;height:2px;background:var(--nn-burger-line,#3A0A21);
  border-radius:2px;display:block;
  transition:transform .3s ease,opacity .2s ease,width .3s ease,background .3s;
}
.nn-burger .l3{width:12px;align-self:flex-end;margin-right:calc((var(--nn-burger-size,44px) - 18px) / 2);}
.nn-wrap .nn-burger:hover,
.nn-wrap .nn-burger:focus,
.nn-wrap .nn-burger:focus-visible,
.nn-wrap .nn-burger:active,
.nn-burger:hover,
.nn-burger:focus,
.nn-burger:active{
  background:var(--nn-burger-bg-h,#650031) !important;
  border-color:var(--nn-burger-bg-h,#650031) !important;
  outline:none;
}
.nn-wrap .nn-burger:hover span,
.nn-wrap .nn-burger:focus span,
.nn-wrap .nn-burger:active span{background:var(--nn-burger-line-h,#fff);}

.nn-wrap .nn-burger.open,
.nn-burger.open{
  border-color:rgba(255,255,255,0.35) !important;
  background:transparent !important;
  opacity:0;pointer-events:none;
}
.nn-burger.open span{background:var(--nn-burger-line-o,#fff);}
.nn-burger.open .l1{transform:translateY(7px) rotate(45deg);}
.nn-burger.open .l2{opacity:0;}
.nn-burger.open .l3{width:18px;align-self:center;margin:0;transform:translateY(-7px) rotate(-45deg);}

/* ---- Meni: kružni reveal iz hamburgera ---- */
.nn-menu{
  position:fixed;inset:0;
  z-index:var(--nn-z,9999);
  background:linear-gradient(var(--nn-angle,165deg),var(--nn-bg1,#3A0A21) 0%,var(--nn-bg2,#650031) 100%);
  display:flex;flex-direction:column;padding:18px 20px 24px;
  font-family:'Archivo',sans-serif;
  clip-path:circle(0 at var(--nn-ox,calc(100% - 42px)) var(--nn-oy,40px));
  transition:clip-path var(--nn-speed,.55s) cubic-bezier(.22,.8,.3,1),visibility 0s var(--nn-speed,.55s);
  visibility:hidden;
  width:100%;max-width:100%;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}
.nn-menu *,
.nn-menu *::before,
.nn-menu *::after{box-sizing:border-box;}
.nn-menu.open{
  clip-path:circle(150% at var(--nn-ox,calc(100% - 42px)) var(--nn-oy,40px));
  visibility:visible;
  transition:clip-path var(--nn-speed,.55s) cubic-bezier(.22,.8,.3,1);
}
.nn-menu-n{
  position:absolute;right:-12%;top:30%;height:45%;width:auto;max-width:none;
  opacity:var(--nn-wm-opacity,0.07);pointer-events:none;user-select:none;
}
.nn-menu-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;position:relative;z-index:2;}

/* ---- X dugme unutar menija ---- */
.nn-menu .nn-close,
.nn-close{
  flex:0 0 auto;
  -webkit-appearance:none;appearance:none;
  box-shadow:none !important;outline:none;
  background:transparent !important;background-image:none !important;
  border:1px solid var(--nn-close-border,rgba(255,255,255,0.35)) !important;
  min-width:0;min-height:0;font-size:0;line-height:0;
  width:var(--nn-burger-size,44px);
  height:var(--nn-burger-size,44px);
  border:1px solid var(--nn-close-border,rgba(255,255,255,0.35));
  border-radius:var(--nn-burger-radius,11px);
  background:transparent;cursor:pointer;padding:0;
  position:relative;margin-left:auto;
  transition:background .2s,border-color .2s;
  -webkit-tap-highlight-color:transparent;
}
.nn-close span{
  position:absolute;left:50%;top:50%;
  width:18px;height:2px;border-radius:2px;
  background:var(--nn-close,#fff);display:block;
}
.nn-close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
.nn-close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);}
.nn-menu .nn-close:hover,
.nn-menu .nn-close:focus,
.nn-menu .nn-close:active,
.nn-close:hover,
.nn-close:focus,
.nn-close:active{
  background:rgba(255,255,255,0.14) !important;
  border-color:var(--nn-close,#fff) !important;
}
.nn-close:focus-visible{outline:2px solid var(--nn-close,#fff);outline-offset:2px;}
.nn-menu-logo{height:var(--nn-logo-h,34px);width:auto;display:block;max-width:60vw;object-fit:contain;}
.nn-menu-logotext{
  color:var(--nn-text,#fff);font-family:'Archivo',sans-serif;
  font-size:calc(var(--nn-logo-h,34px) * 0.62);
  font-weight:900;letter-spacing:0.14em;text-transform:uppercase;line-height:1;
}

/* ---- Stavke + stagger ---- */
.nn-menu-nav{display:flex;flex-direction:column;margin-top:30px;position:relative;}
.nn-mi{
  display:flex;align-items:center;gap:14px;width:100%;
  color:var(--nn-text,#fff);font-family:inherit;
  font-size:var(--nn-item-size,26px);font-weight:800;
  text-transform:uppercase;letter-spacing:0.02em;line-height:1.15;
  padding:13px 0;border:none;border-bottom:1px solid var(--nn-line,rgba(255,255,255,0.14));
  background:transparent;text-align:left;cursor:pointer;text-decoration:none;
  opacity:0;transform:translateY(18px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.8,.3,1),color .2s;
}
.nn-menu.open .nn-mi{opacity:1;transform:none;}
.nn-menu.open .nn-mi:nth-of-type(1){transition-delay:.12s;}
.nn-menu.open .nn-mi:nth-of-type(2){transition-delay:.19s;}
.nn-menu.open .nn-mi:nth-of-type(3){transition-delay:.26s;}
.nn-menu.open .nn-mi:nth-of-type(4){transition-delay:.33s;}
.nn-menu.open .nn-mi:nth-of-type(5){transition-delay:.40s;}
.nn-menu.open .nn-mi:nth-of-type(6){transition-delay:.47s;}
.nn-menu.open .nn-mi:nth-of-type(7){transition-delay:.54s;}
.nn-menu.open .nn-mi:nth-of-type(8){transition-delay:.61s;}
.nn-mi:hover,.nn-mi:focus-visible{color:var(--nn-text-hover,#EBD3DA);}
.nn-mi em{
  font-style:normal;font-size:12px;font-weight:700;
  color:var(--nn-num,#B97F97);letter-spacing:0.1em;min-width:24px;
}
.nn-mi span{flex:1;}
.nn-mi i{
  font-style:normal;flex:0 0 auto;
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--nn-arrow,#D9A9BC);transition:transform .3s ease,color .2s;
}
.nn-mi i svg{width:100%;height:auto;display:block;}
.nn-mi-drop .chev{width:16px;height:16px;}
.nn-mi-drop.open .chev{transform:rotate(180deg);}
.nn-mi-drop.open{border-bottom:none;}
.nn-mi:hover i{color:var(--nn-text-hover,#EBD3DA);}

/* ---- Dropdown ---- */
.nn-sub{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.22,.8,.3,1);
  border-bottom:1px solid var(--nn-line,rgba(255,255,255,0.14));
}
.nn-sub.open{grid-template-rows:1fr;}
.nn-sub-inner{overflow:hidden;display:flex;padding:0 0 0 38px;}
.nn-sub.open .nn-sub-inner{padding:6px 0 14px 38px;}
.nn-sub-inner a{
  color:var(--nn-pill,#EBD3DA);text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;
}

/* Lista — jedno ispod drugog */
.nn-sub--list .nn-sub-inner{flex-direction:column;gap:0;}
.nn-sub--list .nn-sub-inner a{
  display:block;width:100%;
  font-size:14px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  padding:11px 0;
  border-bottom:1px solid var(--nn-line,rgba(255,255,255,0.10));
}
.nn-sub--list .nn-sub-inner a:last-child{border-bottom:none;}
.nn-sub--list .nn-sub-inner a:hover{color:var(--nn-text,#fff);}

/* Pilule — u redu */
.nn-sub--pills .nn-sub-inner{flex-wrap:wrap;gap:8px;}
.nn-sub--pills .nn-sub-inner a{
  font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  border:1px solid var(--nn-pill-border,rgba(255,255,255,0.25));border-radius:999px;
  padding:9px 16px;
}
.nn-sub--pills .nn-sub-inner a:hover{background:var(--nn-cta-bg,#fff);color:var(--nn-cta-text,#650031);}

/* ---- Dno ---- */
.nn-menu-foot{margin-top:auto;padding-top:28px;}
.nn-menu-cta{
  display:block;background:var(--nn-cta-bg,#fff);color:var(--nn-cta-text,#650031);
  font-size:13px;font-weight:700;letter-spacing:0.12em;
  padding:17px 24px;border-radius:11px;text-align:center;text-decoration:none;
  transition:background .2s,color .2s;
}
.nn-menu-cta:hover{background:var(--nn-cta-bg-h,#EBD3DA);color:var(--nn-cta-text-h,#3A0A21);}
.nn-menu-soc{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.nn-menu-soc a{
  width:42px;height:42px;border:1px solid var(--nn-pill-border,rgba(255,255,255,0.3));border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--nn-arrow,#D9A9BC);text-decoration:none;
  transition:background .2s,color .2s;
}
.nn-menu-soc a svg{width:16px;height:16px;fill:currentColor;}
.nn-menu-soc a:hover{background:var(--nn-cta-bg,#fff);color:var(--nn-cta-text,#650031);}
.nn-menu-tag{text-align:center;font-size:12px;color:var(--nn-tag,#B97F97);line-height:1.6;margin-top:16px;}

/* ---- Bez plavog iOS tap highlighta i bez tema :active pozadina ---- */
.nn-menu a,
.nn-menu button,
.nn-wrap a,
.nn-wrap button{-webkit-tap-highlight-color:transparent;}

.nn-menu .nn-mi,
.nn-menu .nn-mi:hover,
.nn-menu .nn-mi:focus,
.nn-menu .nn-mi:focus-visible,
.nn-menu .nn-mi:active,
.nn-menu .nn-mi:visited{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:none;
}
.nn-menu .nn-sub-inner a:focus,
.nn-menu .nn-sub-inner a:active{background:transparent !important;box-shadow:none !important;outline:none;}
.nn-menu .nn-sub--pills .nn-sub-inner a:active{background:var(--nn-cta-bg,#fff) !important;color:var(--nn-cta-text,#650031);}
.nn-menu .nn-menu-cta:focus,
.nn-menu .nn-menu-cta:active{
  background:var(--nn-cta-bg-h,#EBD3DA) !important;
  color:var(--nn-cta-text-h,#3A0A21) !important;
  box-shadow:none !important;outline:none;
}
.nn-menu .nn-menu-soc a:focus,
.nn-menu .nn-menu-soc a:active{
  background:var(--nn-cta-bg,#fff) !important;
  color:var(--nn-cta-text,#650031) !important;
  box-shadow:none !important;outline:none;
}

/* ---- Body lock (iOS safe) ---- */
html.nn-locked,
body.nn-locked{
  overflow:hidden !important;
  overscroll-behavior:none;
}
body.nn-locked{
  position:fixed;
  width:100%;
  left:0;right:0;
}

/* ---- Nista unutar menija ne smije siriti viewport ---- */
.nn-menu-nav,
.nn-menu-foot,
.nn-menu-top{max-width:100%;min-width:0;}
.nn-mi span{min-width:0;overflow-wrap:break-word;word-break:break-word;}
.nn-menu-tag{overflow-wrap:break-word;}

/* ---- Vrlo mali ekrani ---- */
@media (max-width:360px){
  .nn-mi{font-size:calc(var(--nn-item-size,26px) * 0.82);padding:11px 0;}
  .nn-menu{padding:16px 16px 20px;}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .nn-menu,.nn-mi,.nn-sub,.nn-burger span{transition-duration:.01ms !important;}
}

/* ---- Trenutna stranica (2026-10-27: "na mobile mora biti označena stranica na kojoj je korisnik") ----
   šampanj boja (kao akcent u footeru) + kratka crta ispod naziva; roditelj (npr. Proizvodi) je označen i na podstranicama */
.nn-menu .nn-mi.is-current,
.nn-menu .nn-mi.is-current:hover,
.nn-menu .nn-mi.is-current em,
.nn-menu .nn-mi.is-current i{color:var(--nn-current,#E4CFA6);}
.nn-menu .nn-mi.is-current span{position:relative;}
.nn-menu .nn-mi.is-current span::after{content:"";position:absolute;left:0;bottom:-7px;width:28px;height:2px;border-radius:2px;background:var(--nn-current,#E4CFA6);}
.nn-menu .nn-sub-inner a.is-current{color:var(--nn-current,#E4CFA6);}
.nn-menu .nn-sub--pills .nn-sub-inner a.is-current{border-color:var(--nn-current,#E4CFA6);}