/* TOPINEXUS V35 — Universal single compact top bar
   Keep every page header on one clean row like Home. */
.topbar,
header.topbar{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:58px!important;
  height:auto!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  overflow:hidden!important;
}
.topbar-inner{
  width:100%!important;
  max-width:1240px!important;
  min-height:42px!important;
  height:42px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:8px!important;
  overflow:hidden!important;
}
.topbar-inner>.brand,
.topbar>.brand{
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:45%!important;
  height:42px!important;
  display:flex!important;
  align-items:center!important;
}
.topbar .brand-mark,
.topbar .tn-universal-brand-logo{
  width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;
  flex:0 0 32px!important;border-radius:9px!important;
}
.topbar .brand-name,
.topbar .tn-universal-brand-copy strong{
  font-size:16px!important;line-height:1.15!important;
  max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.topbar .search-wrap{flex:1 1 auto!important;min-width:0!important;max-width:none!important}
.topbar .header-icons{
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:55%!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  overflow:hidden!important;
}
.topbar .header-icons>*{
  flex:0 0 auto!important;min-width:0!important;
}
.topbar .currency-switcher{width:82px!important;min-width:82px!important;height:36px!important;padding:0 7px!important}
.topbar .track-link{height:36px!important;min-width:36px!important;padding:0 8px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.topbar .theme-toggle,
.topbar .tn-global-theme-toggle{height:36px!important;min-height:36px!important;min-width:36px!important;width:auto!important;padding:0 9px!important}
.topbar .icon-btn,
.topbar .tn-topnav-toggle{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;flex:0 0 36px!important;padding:0!important}
.topbar .tn-topnav-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:4px!important}
.topbar .tn-topnav-toggle span{display:block!important;width:18px!important;height:2px!important;min-height:2px!important;max-height:2px!important;border-radius:2px!important}

/* Admin's separate title bar uses the same single-row height/spacing. */
.main>.topbar{
  min-height:58px!important;height:58px!important;padding:8px 12px!important;
  flex-wrap:nowrap!important;
}
.main>.topbar>div{min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important}
.main>.topbar h2{font-size:16px!important;line-height:1.2!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.main>.topbar .who{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:35%!important}
.main>.topbar .hamburger{width:36px!important;height:36px!important;min-width:36px!important;flex:0 0 36px!important;padding:0!important}

@media(max-width:700px){
  .topbar,
  header.topbar{min-height:54px!important;height:54px!important;padding:6px 9px!important}
  .topbar-inner{height:42px!important;min-height:42px!important;gap:5px!important;flex-wrap:nowrap!important}
  .topbar-inner>.brand{max-width:38%!important}
  .topbar .brand-mark{width:30px!important;height:30px!important;min-width:30px!important;max-width:30px!important}
  .topbar .brand-name{font-size:14px!important}
  .topbar .search-wrap{display:none!important}
  .topbar .header-icons{max-width:62%!important;gap:3px!important;flex-wrap:nowrap!important}
  .topbar .currency-switcher{width:70px!important;min-width:70px!important;height:34px!important;font-size:11px!important}
  .topbar .track-link{width:34px!important;min-width:34px!important;height:34px!important;padding:0!important;font-size:0!important}
  .topbar .track-link .track-icon{font-size:16px!important}
  .topbar .theme-toggle,.topbar .tn-global-theme-toggle{width:34px!important;min-width:34px!important;height:34px!important;padding:0!important}
  .topbar .theme-toggle .theme-label,.topbar .tn-global-theme-toggle .theme-label{display:none!important}
  .topbar .icon-btn,.topbar .tn-topnav-toggle{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;flex-basis:34px!important}
  .topbar .tn-topnav-toggle span{width:17px!important;height:2.5px!important;min-height:2.5px!important;max-height:2.5px!important}
  .main>.topbar{min-height:54px!important;height:54px!important;padding:6px 9px!important}
}

@media(max-width:390px){
  .topbar-inner>.brand{max-width:34%!important}
  .topbar .brand-name{font-size:13px!important}
  .topbar .currency-switcher{width:62px!important;min-width:62px!important;font-size:10px!important}
  .topbar .track-link,.topbar .theme-toggle,.topbar .tn-global-theme-toggle,.topbar .icon-btn,.topbar .tn-topnav-toggle{width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;flex-basis:32px!important}
  .topbar .tn-topnav-toggle span{width:16px!important}
}

/* ===== V37 MOBILE BOTTOM NAV — Home / Shop / Cart / Support / Account ===== */
:root{--tn-bottom-nav-h:72px}
body{padding-bottom:calc(var(--tn-bottom-nav-h) + env(safe-area-inset-bottom) + 14px)!important}
.tn-bottom-nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tn-bottom-nav-h) + env(safe-area-inset-bottom));padding:7px 8px calc(7px + env(safe-area-inset-bottom));display:flex;align-items:flex-start;justify-content:space-around;gap:2px;background:rgba(255,255,255,.96);border-top:1px solid #e3dced;box-shadow:0 -8px 28px rgba(40,20,70,.10);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:9990}
.tn-bottom-item{position:relative;flex:1;min-width:0;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;color:#687080;text-decoration:none;font-size:11px;font-weight:700;line-height:1.1;transition:color .18s ease,background .18s ease,transform .18s ease}
.tn-bottom-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:10px}
.tn-bottom-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tn-bottom-item.active{color:#7029d8}
.tn-bottom-item.active .tn-bottom-icon{background:#f0e7ff}
.tn-bottom-item:active{transform:scale(.94)}
.tn-bottom-badge{position:absolute;top:1px;right:calc(50% - 20px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#e53935;color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:border-box}
.tn-bottom-badge[hidden]{display:none}
html[data-theme="dark"] .tn-bottom-nav{background:rgba(20,16,30,.97);border-top-color:#34274b;box-shadow:0 -10px 30px rgba(0,0,0,.28)}
html[data-theme="dark"] .tn-bottom-item{color:#aaa1bb}
html[data-theme="dark"] .tn-bottom-item.active{color:#a66cff}
html[data-theme="dark"] .tn-bottom-item.active .tn-bottom-icon{background:#2a1c45}
html[data-theme="dark"] .tn-bottom-badge{border-color:#14101e}
@media(min-width:861px){.tn-bottom-nav{display:none!important}body{padding-bottom:14px!important}}
@media(max-width:420px){.tn-bottom-nav{padding-left:5px;padding-right:5px}.tn-bottom-item{font-size:10.5px}.tn-bottom-icon{width:27px;height:27px}.tn-bottom-icon svg{width:21px;height:21px}}
/* Keep the floating support control above the bottom navigation instead of covering it. */
.support-float{bottom:calc(var(--tn-bottom-nav-h) + env(safe-area-inset-bottom) + 10px)!important}
@media(min-width:861px){.support-float{bottom:22px!important}}

/* V41: mobile primary navigation stays at the bottom, like a native storefront app. */
[data-tn-legacy-bottom-nav],.legacy-bottom-nav,.old-bottom-nav,.mobile-bottom-nav,.bottom-navigation:not(#tn-bottom-nav){display:none!important}

@media(max-width:860px){
  body{padding-bottom:calc(var(--tn-bottom-nav-h) + env(safe-area-inset-bottom) + 10px)!important;padding-top:0!important}
  .tn-bottom-nav{top:auto!important;bottom:0!important;height:calc(var(--tn-bottom-nav-h) + env(safe-area-inset-bottom))!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;border-top:1px solid #e3dced!important;border-bottom:0!important;box-shadow:0 -8px 28px rgba(40,20,70,.10)!important}
  html[data-theme="dark"] .tn-bottom-nav{border-top-color:#34274b!important;box-shadow:0 -10px 30px rgba(0,0,0,.28)!important}
  /* The bottom navigation replaces the mobile hamburger; keep the header clean. */
  .topbar .tn-topnav-wrap,.topbar .tn-topnav-toggle{display:none!important}
  .topbar .header-icons .tn-topnav-toggle{display:none!important}
}

@media(min-width:861px){
  .tn-bottom-nav{display:none!important}
  body{padding-bottom:14px!important;padding-top:0!important}
}

@media(max-width:420px){
  .tn-bottom-nav{padding-left:5px;padding-right:5px}
  .tn-bottom-item{font-size:10.5px}
  .tn-bottom-icon{width:27px;height:27px}
  .tn-bottom-icon svg{width:21px;height:21px}
}

/* Keep the floating support control above the bottom navigation instead of covering it. */
.support-float{bottom:calc(var(--tn-bottom-nav-h) + env(safe-area-inset-bottom) + 10px)!important}
@media(min-width:861px){.support-float{bottom:22px!important}}


/* V42 — true viewport-fixed mobile navigation. It must stay pinned to the phone viewport while page content scrolls. */
@media (max-width:860px){
  html,body{min-height:100%;}
  .tn-bottom-nav{
    position:fixed!important;
    inset-inline:0!important;
    top:auto!important;
    bottom:0!important;
    margin:0!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    z-index:2147483000!important;
    padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px))!important;
  }
  body{
    padding-bottom:calc(var(--tn-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 10px)!important;
  }
}