/* SVITA MICRO — shared UI layer (mobile + nav consistency) */

/* Unified nav sizing across pages */
nav#nav{padding:18px 32px}
nav#nav.scrolled{padding:14px 32px}

/* Reveal animations safe default */
.reveal{opacity:0;transform:translateY(20px);transition:all 700ms cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* Touch target min 44px on interactive elements */
.nav-right a,.chip,.sel,.btn-s,.col-btn{min-height:36px}
.nav-cta{min-height:40px;display:inline-flex;align-items:center;justify-content:center}

/* Sortable column chips (shop.html) */
.sort-chip{display:inline-flex;align-items:center;gap:6px}
.sort-chip .arr{opacity:0.4;font-size:10px;transition:all 200ms}
.sort-chip.on .arr{opacity:1;color:#0A0A0B}
.sort-chip.asc .arr::before{content:'↑'}
.sort-chip.desc .arr::before{content:'↓'}
.sort-chip:not(.on) .arr::before{content:'↕'}

/* ====== MOBILE BREAKPOINTS ====== */
@media(max-width:900px){
  .wrap{padding:0 20px!important}
  nav#nav{padding:14px 18px}
  nav#nav.scrolled{padding:12px 18px}
  .brand{font-size:15px}
  .brand small{display:none}
  .nav-right{gap:12px}
  .nav-right a{font-size:12px}
  .nav-cta{padding:9px 14px;font-size:12px}

  .page,section.page{padding:110px 0 60px!important}
  .page-head{margin-bottom:28px}
  .page-head h1{font-size:clamp(2rem,8vw,3rem)!important;line-height:1.05}
  .page-head p{font-size:14px!important}

  .toolbar,.tools{gap:8px!important;padding:14px 0!important;flex-wrap:wrap!important;flex-direction:column;align-items:stretch!important}
  .toolbar-group{flex-wrap:wrap!important;width:100%;gap:6px!important}
  .search{min-width:0!important;width:100%!important;order:-1}
  .sel{font-size:11px;padding:9px 30px 9px 14px}
  .chip{padding:8px 13px;font-size:11px}

  .stats{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .stat{padding:18px 20px!important}
  .stat .num{font-size:30px!important}

  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px!important}
  table{min-width:640px}
  thead th,td{padding:12px 14px!important;font-size:12px!important}
  td .cell-name{min-width:180px}
  td .cell-name .name{max-width:160px}

  .grid{gap:16px!important}
  .card h3{font-size:17px!important}
  .card .body{padding:16px 18px!important}
}

@media(max-width:600px){
  .wrap{padding:0 16px!important}
  nav#nav{padding:12px 14px}
  .nav-right{gap:8px}
  .nav-right a:not(.nav-cta){font-size:0;padding:0}
  .nav-right a:not(.nav-cta)::before{font-size:12px}
  .nav-right a[href*="shop"]:not(.nav-cta)::before{content:'Shop'}
  .nav-right a[href*="account"]:not(.nav-cta)::before{content:'Cabinet'}
  .nav-right a[href*="#how"]:not(.nav-cta)::before{content:'How'}
  .nav-right a:not(.nav-cta){font-size:12px}

  .page,section.page{padding:92px 0 50px!important}
  .stats{grid-template-columns:1fr!important}
  .cols{display:none!important}

  /* catalog cards full-width */
  .grid{grid-template-columns:1fr!important}
}

/* Global: remove horizontal scroll at root */
html,body{overflow-x:hidden}

/* Tabular scroll hint */
.table-wrap::after{content:none}

/* ====== SHARED NAV — language switcher ====== */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:#A1A1AA;font-weight:500;
  padding:8px 12px;border:1px solid #232327;border-radius:100px;
  text-transform:uppercase;letter-spacing:0.1em;
  background:none;cursor:pointer;
  transition:all 200ms cubic-bezier(.22,1,.36,1);
}
.lang-btn:hover{border-color:#2F2F34;color:#FAFAFA}
.lang-btn svg{width:10px;height:10px;opacity:0.6}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:#111113;border:1px solid #232327;border-radius:10px;
  padding:6px;min-width:96px;display:none;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
  z-index:150;
}
.lang.open .lang-menu{display:block}
.lang-menu button{
  display:block;width:100%;text-align:left;padding:9px 14px;
  font-size:12px;color:#A1A1AA;border-radius:6px;
  text-transform:uppercase;letter-spacing:0.08em;
  background:none;border:0;cursor:pointer;
  transition:all 150ms ease;
}
.lang-menu button:hover{background:#18181B;color:#FAFAFA}
.lang-menu button.active{color:#D6FF3E}

/* ====== SHARED NAV — icon button (cart etc.) ====== */
.icon-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:100px;
  color:#A1A1AA;border:1px solid #232327;background:none;
  transition:all 200ms cubic-bezier(.22,1,.36,1);
  text-decoration:none;
}
.icon-btn:hover{border-color:#2F2F34;color:#FAFAFA;transform:translateY(-1px)}
.icon-btn svg{display:block}
.cart-count{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
  color:#0A0A0B;background:#D6FF3E;
  border-radius:100px;border:2px solid #0A0A0B;
  letter-spacing:0;line-height:1;
}
.mi-count{
  margin-left:auto;background:#D6FF3E;color:#0A0A0B;
  padding:1px 7px;border-radius:100px;font-size:10px;font-weight:700;
}

/* ====== SHARED NAV — Log in / Sign up buttons ====== */
.nav-login{
  background:none!important;color:#A1A1AA!important;
  border:1px solid #232327!important;
}
.nav-login:hover{color:#FAFAFA!important;border-color:#2F2F34!important;background:none!important}
.nav-signup{background:#D6FF3E;color:#0A0A0B}
.nav-signup:hover{background:#C5EE2D;transform:translateY(-1px)}

/* ====== SHARED NAV USER MENU ====== */
.user-menu{position:relative}
.user-btn{
  display:flex;align-items:center;gap:8px;
  padding:4px 12px 4px 4px;
  background:#FAFAFA;color:#0A0A0B;
  border-radius:100px;
  font-size:12px;font-weight:500;
  transition:all 200ms cubic-bezier(.22,1,.36,1);
  cursor:pointer;
}
.user-btn:hover{background:#D6FF3E;transform:translateY(-1px)}
.user-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#D6FF3E,#9FC22F);
  color:#0A0A0B;font-size:11px;font-weight:700;
  letter-spacing:0.03em;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(10,10,11,0.12) inset;
}
.user-avatar.lg{width:44px;height:44px;font-size:14px}
.role-tag{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  background:#0A0A0B;color:#D6FF3E;padding:3px 8px;border-radius:100px;
}
.user-btn svg{opacity:0.6;flex-shrink:0}
.user-drop{
  position:absolute;top:calc(100% + 10px);right:0;
  min-width:260px;padding:8px;
  background:#111113;border:1px solid #232327;border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,0.55),0 2px 6px rgba(0,0,0,0.4);
  display:none;
  z-index:150;
}
.user-head{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px 10px;
}
.user-head-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.user-head-email{
  font-size:12px;font-weight:600;color:#FAFAFA;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-head-role{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  color:#D6FF3E;
}
.user-menu.open .user-drop{display:block;animation:dropIn 180ms cubic-bezier(.22,1,.36,1)}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.user-drop a,
.user-drop button{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:11px 14px;
  color:#A1A1AA;font-size:13px;font-weight:500;
  border-radius:9px;text-align:left;
  transition:all 150ms ease;
  background:none;border:0;cursor:pointer;
}
.user-drop a:hover,
.user-drop button:hover{background:#18181B;color:#FAFAFA}
.user-drop .ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;font-size:14px;opacity:0.7;
}
.user-sep{height:1px;background:#232327;margin:6px 4px}

/* Ensure lang/user button stays touchable */
.lang-btn,.user-btn{min-height:36px}

@media(max-width:600px){
  .user-btn{padding:3px 8px 3px 3px}
  .user-avatar{width:28px;height:28px;font-size:10px}
  .role-tag{display:none}
  .user-drop{min-width:240px;right:-8px}
  .icon-btn{width:34px;height:34px}
  .icon-btn svg{width:16px;height:16px}
  .nav-signup{display:none}
  /* keep shop/how text visible in shared nav */
  .nav-right a:not(.nav-cta){font-size:12px!important;padding:4px 2px}
  .nav-right a:not(.nav-cta)::before{content:none!important}
}