/* ==========================================================================
   GOLAZO — Nav account button (logged-out / logged-in states)
   Sits at the FAR RIGHT of the navbar icons (order: search · cart · account).
   Reuses the .btn--icon glass circle, so it matches the navbar in both modes
   (dark over hero / light when scrolled) automatically.

   STATES (data-state attribute):
   · "out" — user silhouette + small gold "?" badge (question mark = no account
     yet / who are you?). Links to /my-account/ (login).
   · "in"  — the circle morphs into a solid green disc with the user's first
     initial (white, Saira Condensed 700 — 7.66:1 on green). Links to dashboard.
   The state change is animated: icon scales out, initial scales in, bg fades
   to green (250ms, brand ease). Reduced-motion: instant swap.

   Markup:
   <a class="btn--icon nacct" data-state="out" data-initial="ნ" href="/my-account/" aria-label="ანგარიში">
     <svg class="nacct__user" …user icon…></svg>
     <span class="nacct__q" aria-hidden="true">?</span>
     <span class="nacct__init" aria-hidden="true"></span>
   </a>
   JS helper in nav-account.js: golazoAccount.set(el,{loggedIn,initial})
   ========================================================================== */

.nacct{position:relative; overflow:visible; transition:background .25s var(--ease-out), border-color .25s, color .25s}

.nacct__user{width:22px; height:22px; transition:opacity .2s, transform .25s var(--ease-out)}

/* "?" badge — gold dot, same language as the cart count */
.nacct__q{
  position:absolute; top:-1px; right:-1px; width:17px; height:17px; border-radius:50%;
  background:var(--strike-gold); color:var(--boot-black);
  font-family:var(--font-body); font-weight:700; font-size:11px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .2s, transform .25s var(--ease-out);
}

/* the initial (hidden until logged in) */
.nacct__init{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff;
  opacity:0; transform:scale(.55); transition:opacity .2s .05s, transform .25s var(--ease-out) .05s;
}

/* ---- LOGGED IN ---- */
.nacct[data-state="in"]{
  /* v1.31.2 THEME DIVERGENCE (Giorgi): solid green fill removed so the chip follows the
     navbar state tints like every other icon; logged-in reads via the initial/avatar. */
}
.nacct[data-state="in"] .nacct__user{opacity:0; transform:scale(.55)}
.nacct[data-state="in"] .nacct__q{opacity:0; transform:scale(.55)}
.nacct[data-state="in"] .nacct__init{opacity:1; transform:none}
.nacct[data-state="in"]:hover{background:var(--deep-pitch) !important}

@media (prefers-reduced-motion:reduce){
  .nacct, .nacct__user, .nacct__q, .nacct__init{transition:opacity .15s ease !important; transform:none !important}
}