/* ── TOPBAR ── */
.topbar{height:30px;background:#fff;border-bottom:0.5px solid rgba(65,91,140,.07);position:sticky;top:0;z-index:201}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 36px;height:100%;display:grid;grid-template-columns:1fr auto;align-items:center;position:relative}
.topbar-center{font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-400);position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400)}
.topbar-dot{width:5px;height:5px;border-radius:50%;background:var(--pink);flex-shrink:0;display:inline-block}

/* ── HEADER PREMIUM ── */
.header{background:#fff;border-bottom:0.5px solid rgba(65,91,140,.08);padding:0 36px;display:flex;align-items:center;gap:0;position:sticky;top:30px;z-index:200;height:64px}
.logo{display:flex;align-items:center;gap:0;text-decoration:none;flex-shrink:0}
.logo-img{height:32px;width:auto;display:block}
@media(max-width:640px){.logo-img{height:26px}}
.logo-sub{display:none}
.header-nav{display:flex;align-items:stretch;flex:1;justify-content:center;height:100%;overflow-x:auto;scrollbar-width:none;margin:0 32px}
.header-nav::-webkit-scrollbar{display:none}
.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Botão carrinho */
.cart-btn{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:8px 20px;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:opacity .15s;letter-spacing:.01em}
.cart-btn:hover{opacity:.88}
.cart-badge{background:rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:1px 7px;font-size:10px;font-weight:500;min-width:18px;text-align:center;letter-spacing:0}

/* Chip do usuário */
.user-chip{font-size:11px;color:var(--blue);background:var(--blue-light);border:0.5px solid var(--blue-border);border-radius:20px;padding:4px 12px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;letter-spacing:-.01em}

/* Botão sair */
.btn-exit{background:none;border:none;color:var(--gray-400);font-size:12px;cursor:pointer;padding:4px 6px;font-weight:400;transition:color .15s;white-space:nowrap}
.btn-exit:hover{color:var(--gray-700)}

.dist-bar{display:none}
.dist-bar strong{color:var(--blue-dark)}

/* Tabs de navegação */
.nav-tab{position:relative;padding:0 18px;height:100%;display:inline-flex;align-items:center;font-size:13px;font-weight:400;color:var(--text-secondary);border:none;background:none;cursor:pointer;white-space:nowrap;transition:color .18s ease;letter-spacing:-.01em}
.nav-tab::after{content:'';position:absolute;bottom:0;left:18px;right:18px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:center;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.nav-tab:hover{color:var(--text-primary)}
.nav-tab:hover::after{transform:scaleX(.35)}
.nav-tab.active{color:var(--text-primary);font-weight:500}
.nav-tab.active::after{transform:scaleX(1)}

/* ── HAMBURGER BUTTON ── */
.hamburger-btn{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;
  width:44px;height:44px;
  border:none;background:none;cursor:pointer;
  border-radius:8px;
  flex-shrink:0;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.hamburger-btn:active{background:rgba(65,91,140,.07)}
.hamburger-line{
  display:block;
  width:22px;height:2px;
  background:var(--text-primary);
  border-radius:2px;
  pointer-events:none;
  transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .18s;
}
.hamburger-btn.open .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger-btn.open .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger-btn.open .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── NAV OVERLAY ── */
.nav-overlay{
  position:fixed;inset:0;
  background:rgba(20,30,50,.52);
  z-index:299;
  opacity:0;pointer-events:none;
  transition:opacity .28s;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.nav-overlay.open{opacity:1;pointer-events:auto}

/* ── NAV DRAWER ── */
.nav-drawer{
  position:fixed;top:0;left:0;
  width:280px;max-width:calc(100% - 56px);
  height:100%;height:100dvh;
  background:#fff;
  z-index:300;
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  visibility:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .28s;
  box-shadow:4px 0 32px rgba(20,30,60,.18);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.nav-drawer.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
}
.nav-drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px 16px;
  border-bottom:0.5px solid rgba(65,91,140,.1);
  flex-shrink:0;
}
.nav-drawer-logo{height:28px;width:auto;display:block}
.nav-drawer-close{
  width:36px;height:36px;
  border:none;background:none;cursor:pointer;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-400);
  transition:background .15s;
  flex-shrink:0;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.nav-drawer-close:active{background:rgba(65,91,140,.07)}
.nav-drawer-user-info{
  display:none;
  padding:11px 20px;
  font-size:12px;color:var(--blue);font-weight:500;
  background:rgba(65,91,140,.05);
  border-bottom:0.5px solid rgba(65,91,140,.08);
  flex-shrink:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-drawer-nav{flex:1;padding:8px 0}
.nav-drawer-item{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:0 20px;
  min-height:52px;
  border:none;background:none;cursor:pointer;
  font-family:var(--font);font-size:14px;font-weight:400;
  color:var(--text-primary);
  text-decoration:none;
  transition:background .14s;
  text-align:left;letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
}
.nav-drawer-item:active{background:rgba(65,91,140,.06)}
.nav-drawer-item.active{color:var(--blue);font-weight:600;background:rgba(65,91,140,.05)}
.nav-drawer-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center;line-height:1}
.nav-drawer-chevron{
  margin-left:auto;color:var(--gray-400);font-size:20px;line-height:1;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.nav-drawer-item--account.open .nav-drawer-chevron{transform:rotate(90deg)}
.nav-drawer-acct-panel{
  max-height:0;overflow:hidden;
  transition:max-height .26s cubic-bezier(.4,0,.2,1);
  background:rgba(65,91,140,.04);
  margin:0 12px 4px;
  border-radius:10px;
}
.nav-drawer-acct-info{padding:12px 16px}
.nav-drawer-acct-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:5px 0;
  border-bottom:0.5px solid rgba(65,91,140,.07);
}
.nav-drawer-acct-row:last-child{border-bottom:none}
.nav-drawer-acct-row>span:first-child{
  color:var(--gray-400);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;
}
.nav-drawer-acct-row>span:last-child{
  color:var(--text-primary);font-size:12px;text-align:right;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-drawer-footer{
  padding:8px 0 max(16px,env(safe-area-inset-bottom));
  border-top:0.5px solid rgba(65,91,140,.08);
  flex-shrink:0;
}
.nav-drawer-item--exit{color:#c0392b}

@media(max-width:768px){
  .topbar{display:none}
  .header{top:0;padding:0 16px;height:56px;justify-content:space-between}
  /* hide horizontal nav — replaced by hamburger drawer */
  .header-nav{display:none}
  /* show hamburger */
  .hamburger-btn{display:flex}
  /* logo absolutely centered between hamburger and cart */
  .logo{position:absolute;left:50%;transform:translateX(-50%);z-index:1}
  .logo-img{height:28px}
  /* desktop-only controls */
  .user-chip{display:none}
  .btn-exit{display:none}
  /* compact cart: hide text, keep badge */
  .cart-btn{min-height:44px;padding:10px 14px;gap:4px}
  .cart-btn-text{display:none}
}