.account-nav-trigger { display: none; }
.account-nav-panel, .account-nav-items { display: contents; }

@media (max-width: 1023px) {
 body.maquette-app .account-reference .account-sidebar.tabs.mobile-account-nav,
 body.maquette-app .sale-detail-page .account-sidebar.tabs.mobile-account-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  padding: 8px;
  border-radius: 24px;
 }
 body.maquette-app .account-sidebar.mobile-account-nav .account-nav-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: transparent;
  color: var(--bb9-green);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
 }
 .account-nav-trigger > i:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
 }
 .account-nav-trigger .account-nav-chevron { margin-left: auto; font-size: 12px; transition: transform .24s ease; }
 .is-expanded .account-nav-trigger .account-nav-chevron { transform: rotate(180deg); }
 .mobile-account-nav .account-nav-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .24s ease, opacity .18s ease, visibility 0s linear .24s;
 }
 .mobile-account-nav.is-expanded .account-nav-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .24s ease, opacity .18s ease, visibility 0s;
 }
 .mobile-account-nav .account-nav-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
 }
 .mobile-account-nav .account-nav-items > .tab:first-child { margin-top: 6px; }
 body.maquette-app .account-sidebar.tabs.mobile-account-nav .tab {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  flex: 0 0 auto;
  border-radius: 16px;
 }
 body.maquette-app .mobile-account-nav > :focus-visible {
  outline: 2px solid var(--bb9-green);
  outline-offset: 2px;
 }
 body.maquette-app.theme-dark .account-sidebar.mobile-account-nav .account-nav-trigger { color: #f7fbfb; }
}

@media (prefers-reduced-motion: reduce) {
 .mobile-account-nav .account-nav-panel,
 .mobile-account-nav.is-expanded .account-nav-panel,
 .account-nav-trigger .account-nav-chevron { transition: none; }
}