/* ===== HEADER (MOBIL/TABLETĂ ≤979px) ===== */
.topbar{ position:sticky; top:0; z-index:3000; background:#0b0e14d9; }
.topbar .container{ width:100%; }

/* bară principală: 1fr | logo | 1fr  (logo centrat) */
.topbar .header-inner{
  display:grid; align-items:center;
  grid-template-columns: 1fr auto 1fr;
  gap:12px; padding:10px 12px;
  background:#0e1b4d;
}

/* zone stânga/dreapta */
.topbar .h-left{ display:flex; align-items:center; justify-content:flex-start; }
.topbar .h-right,
.topbar .header-actions{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; white-space:nowrap; padding-right:6px;  /* împinge iconițele dinspre marginea ecranului */
}

/* logo centrat și scalat pe ecrane mici */
.topbar .brand{ justify-self:center; }
.topbar .brand img{ height:34px; width:auto; display:block; max-width:60vw; }
@media (max-width:640px){ .topbar .brand img{ height:28px; max-width:55vw; } }
@media (max-width:480px){ .topbar .brand img{ height:24px; max-width:50vw; } }

/* butoane icon – hit area corectă */
.topbar .icon-btn,
.topbar .cart-btn{
  width:44px; height:44px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text);
  position:relative; cursor:pointer;
}
.topbar .icon-btn svg,
.topbar .cart-btn svg{ width:20px; height:20px; display:block; }

/* badge coș */
.topbar .cart-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; line-height:18px;
  font-size:12px; font-weight:700; padding:0 5px;
  border-radius:999px; background:#ff3b3b; color:#fff;
  box-shadow:0 0 0 2px rgba(18,24,41,.98);
}

/* UI desktop ascuns pe mobil */
.topbar .desktop-row{ display:none !important; }
.topbar .user-desktop{ display:none !important; }
.topbar .mini-cart{ display:none !important; } /* mobil → click coș = pagina coș */

/* căutare dropdown pe mobil */
.mobile-search{
  position:sticky; top:0; z-index:3600;
  background:rgba(18,24,41,.98);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 0;
}
.mobile-search[hidden]{ display:none; }
.mobile-search .mobile-search-row{
  display:grid; grid-template-columns:1fr auto; gap:10px;
}

/* drawer meniu – overlay + slide-in din stânga */
.nav-drawer{
  position:fixed; inset:0; z-index:4000;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.nav-drawer[hidden]{ display:none; }
.nav-drawer::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.45); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s ease;
}
.nav-drawer .nav-drawer-inner{
  position:absolute; left:0; top:0; bottom:0;
  width:min(86vw, 360px);
  background:linear-gradient(180deg, rgba(18,24,41,.98), rgba(18,24,41,.96));
  border-right:1px solid rgba(255,255,255,.10);
  padding:14px; overflow:auto;
  transform:translateX(-100%);
  transition:transform .24s cubic-bezier(.22,.7,.2,1);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.nav-drawer.open{ pointer-events:auto; opacity:1; }
.nav-drawer.open::before{ opacity:1; }
.nav-drawer.open .nav-drawer-inner{ transform:translateX(0); }

.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.drawer-nav{ display:grid; gap:6px; margin-bottom:12px; }
.drawer-nav a{
  display:block; padding:10px 10px; border-radius:10px; color:var(--text);
  border:1px solid transparent;
}
.drawer-nav a:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.drawer-extra{ display:grid; gap:12px; }
.drawer-user a{ display:block; padding:8px 10px; color:var(--text); border-radius:8px; }
.drawer-user a:hover{ background:rgba(255,255,255,.06); }

/* body lock când drawer e deschis */
body.drawer-open{ overflow:hidden; }