/* ==========================================================================
   GOLAZO — Nav wishlist button + account-gate popup
   Heart icon button sits BETWEEN search and cart in the navbar
   (final icon order, left→right: search · wishlist · cart · account).

   STATES (data-state):
   · "out" — logged out. Clicking the heart (nav OR any catalogue card heart)
     opens the account-gate popup („შექმენი ანგარიში…"). Hearts never toggle
     while logged out — the wishlist is accounts-only.
   · "in"  — logged in. Nav heart links to the wishlist (account ფავორიტები)
     and shows a gold count badge when count > 0. Card hearts toggle normally.

   Popup: centered card, mint heart chip, Georgian copy, primary register CTA,
   secondary login link, ✕ / Esc / overlay click to close. 250ms scale-fade,
   reduced-motion instant. Markup at the bottom of this file's comments and in
   the demo page.
   ========================================================================== */

/* ---- nav heart button (reuses .btn--icon glass circle, inherits nav mode) ---- */
.nwish{position:relative}
.nwish__count{
  position:absolute; top:-1px; right:-1px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--strike-gold); color:var(--boot-black);
  font-family:var(--font-body); font-weight:700; font-size:10.5px; line-height:1;
  display:none; align-items:center; justify-content:center;
}
.nwish[data-state="in"][data-count]:not([data-count="0"]) .nwish__count{display:flex}
.nwish svg{width:22px;height:22px}
.nwish[data-state="in"].has-items svg{fill:currentColor}

/* ==========================================================================
   ACCOUNT-GATE POPUP  (#gwish-gate)
   ========================================================================== */
.gwgate{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px}
.gwgate.open{display:flex}
.gwgate__overlay{position:absolute; inset:0; background:rgba(10,10,10,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s ease}
.gwgate.open .gwgate__overlay{opacity:1}
.gwgate__card{
  position:relative; width:100%; max-width:400px; background:#fff;
  border:1px solid var(--neutral-300); border-radius:var(--radius-lg);
  padding:40px 32px 32px; text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.45);
  opacity:0; transform:translateY(14px) scale(.96);
  transition:opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
.gwgate.open .gwgate__card{opacity:1; transform:none}
.gwgate__close{position:absolute; top:14px; right:14px; width:36px; height:36px; border:none; border-radius:50%;
  background:var(--neutral-100); color:var(--neutral-600); cursor:pointer; display:flex; align-items:center; justify-content:center}
.gwgate__close:hover{color:var(--ink)} .gwgate__close svg{width:16px;height:16px}
.gwgate__chip{width:64px; height:64px; border-radius:20px; background:#e9f3ec; color:var(--golazo-green);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px}
.gwgate__chip svg{width:30px; height:30px}
.gwgate h3{font-family:var(--font-ka); font-weight:700; font-size:var(--t-h3); line-height:1.25; color:var(--ink); margin-bottom:10px}
.gwgate p{font-family:var(--font-ka); font-size:15px; line-height:1.6; color:var(--neutral-600); margin-bottom:24px}
.gwgate .btn{width:100%}
.gwgate__alt{display:inline-block; margin-top:14px; font-family:var(--font-ka); font-weight:600; font-size:13.5px;
  color:var(--golazo-green); text-decoration:none}
.gwgate__alt:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .gwgate__overlay,.gwgate__card{transition:opacity .15s ease !important; transform:none !important}
}
@media (max-width:480px){ .gwgate{align-items:flex-end; padding:0}
  .gwgate__card{max-width:none; border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding-bottom:40px} }