/* MI CUENTA / PERFIL — ultra compact, especially on phones */
.accountShell.profileCompactShell{
  width:min(980px,calc(100% - 20px))!important;
  margin:0 auto!important;
}
.profileCompactShell .accountHero{
  padding:9px 12px!important;
  min-height:0!important;
}
.profileCompactShell .accountHero h1{
  font-size:clamp(18px,2.2vw,25px)!important;
  margin:2px 0!important;
}
.profileCompactShell .accountHero p,
.profileCompactShell .accountSince{
  margin:2px 0!important;
  font-size:9px!important;
}
.profileCompactShell .accountPersistentNav{
  gap:5px!important;
  margin:6px 0!important;
}
.profileCompactShell .accountPersistentNav button{
  min-height:31px!important;
  padding:5px 7px!important;
  font-size:8.5px!important;
}
.profileCompactShell .profileEditToolbar{
  min-height:0!important;
  padding:5px 2px!important;
  margin:0 0 4px!important;
}
.profileCompactShell .profileEditToolbar h2{
  font-size:16px!important;
  margin:0!important;
}
.profileCompactShell .profileEditToolbar p{
  font-size:8px!important;
  margin:1px 0 0!important;
}
.profileCompactShell .profileCompactPanel{
  padding:8px 10px!important;
}
.profileCompactShell .profileSectionTitle{
  font-size:11px!important;
  margin:5px 0 4px!important;
  padding:4px 0!important;
}
.profileCompactShell .profileGridCompact{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px 7px!important;
}
.profileCompactShell .profileGridCompact .field{
  margin:0!important;
  min-width:0!important;
}
.profileCompactShell .profileGridCompact .field label{
  display:block!important;
  margin:0 0 2px!important;
  font-size:7.5px!important;
  line-height:1.05!important;
  font-weight:800!important;
}
.profileCompactShell .profileGridCompact input,
.profileCompactShell .profileGridCompact select{
  width:100%!important;
  height:29px!important;
  min-height:29px!important;
  padding:3px 6px!important;
  font-size:10px!important;
  border-radius:6px!important;
}
.profileCompactShell .profileGridCompact textarea{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  padding:5px 6px!important;
  font-size:10px!important;
  border-radius:6px!important;
}
.profileCompactShell .profileGridCompact .full{
  grid-column:1/-1!important;
}
.profileCompactShell .profileGridCompact.addressCompact{
  min-height:0!important;
}
.profileCompactShell .measureUnitLabel{
  font-size:7px!important;
}
.profileCompactShell .profileSaveBar{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:7px 0 0!important;
  margin-top:5px!important;
  flex-wrap:wrap!important;
}
.profileCompactShell .profileSaveBar button,
.profileCompactShell .profileEditToolbar button{
  min-height:30px!important;
  padding:5px 9px!important;
  font-size:8.5px!important;
}

/* Summary profile also compact */
.accountShell .profileInfoPanel{
  padding:8px 10px!important;
}
.accountShell .profileInfoGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;
}
.accountShell .profileInfoGrid>*{
  min-height:42px!important;
  padding:5px 7px!important;
}
.accountShell .profileSizesSummary{
  margin-top:7px!important;
}
.accountShell .profileSizesSummary h3{
  margin:0 0 4px!important;
  font-size:11px!important;
}
.accountShell .profileSizeChips{
  gap:4px!important;
}
.accountShell .profileSizeChips span{
  padding:4px 6px!important;
  font-size:8px!important;
}

/* Account registration/sign-in fields smaller too */
.accountShell .accountGrid .panel{
  padding:10px!important;
}
.accountShell .accountGrid .field{
  margin:0 0 6px!important;
}
.accountShell .accountGrid .field label{
  font-size:8px!important;
  margin-bottom:2px!important;
}
.accountShell .accountGrid input{
  height:31px!important;
  min-height:31px!important;
  padding:4px 7px!important;
  font-size:10px!important;
}

/* Mobile: no horizontal scroll, two-column compact profile where practical */
@media(max-width:760px){
  html,body,#app,.accountShell{
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  .accountShell.profileCompactShell{
    width:calc(100% - 10px)!important;
  }
  .profileCompactShell .accountHero{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:6px!important;
    padding:7px 8px!important;
  }
  .profileCompactShell .accountHero h1{
    font-size:16px!important;
  }
  .profileCompactShell .accountHero p{
    display:none!important;
  }
  .profileCompactShell .accountPersistentNav{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;
    overflow:visible!important;
  }
  .profileCompactShell .accountPersistentNav button{
    min-width:0!important;
    min-height:29px!important;
    padding:4px 3px!important;
    white-space:normal!important;
    line-height:1.05!important;
    font-size:7.5px!important;
  }
  .profileCompactShell .profileCompactPanel{
    padding:6px!important;
  }
  .profileCompactShell .profileGridCompact{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px 5px!important;
  }
  .profileCompactShell .profileGridCompact input,
  .profileCompactShell .profileGridCompact select{
    height:28px!important;
    min-height:28px!important;
    font-size:9px!important;
  }
  .profileCompactShell .profileGridCompact textarea{
    height:38px!important;
    min-height:38px!important;
  }
  .accountShell .profileInfoGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .profileCompactShell .profileSaveBar{
    position:sticky!important;
    bottom:0!important;
    z-index:50!important;
    background:#fffdf9!important;
    padding:5px!important;
    border-top:1px solid #d9e3dc!important;
  }

  /* Admin: protect fixed header/nav/content from phone overflow */
  body.adminBody,#app,.adminView{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }
  #app .adminNav{
    width:100%!important;
    max-width:100vw!important;
  }
  .adminView:not([hidden]){
    width:calc(100% - 4px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .modalBack>.modal,
  .modalBack>.orderModalWide{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
  }
  .tableWrap{
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}
@media(max-width:390px){
  .profileCompactShell .profileGridCompact{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .profileCompactShell .profileGridCompact .field label{
    font-size:7px!important;
  }
  .profileCompactShell .profileGridCompact input,
  .profileCompactShell .profileGridCompact select{
    font-size:8.5px!important;
    padding:3px 4px!important;
  }
}