.store-nav-account,
.store-nav-account #store-account-actions,
.acct-menu {
  position: relative;
}

.acct-skin-btn {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.acct-skin-btn:hover,
.acct-skin-btn[aria-expanded='true'] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.acct-skin-btn:active .mc-head {
  transform: scale(0.97);
}

.acct-skin-btn:focus-visible .mc-head {
  border-radius: 4px;
  outline: 2px solid var(--green-2);
  outline-offset: 5px;
}

.mc-head {
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  perspective: 900px;
  perspective-origin: 50% 50%;
  filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.3));
  transition:
    transform 120ms ease,
    filter 150ms ease;
}

.acct-skin-btn:hover .mc-head,
.acct-skin-btn[aria-expanded='true'] .mc-head {
  filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.36)) brightness(1.05);
}

.mc-head-spin {
  --head-pitch: -4deg;
  --head-yaw: -8deg;

  position: absolute;
  top: 8px;
  left: 8px;
  width: 52px;
  height: 52px;
  transform: rotateX(var(--head-pitch)) rotateY(var(--head-yaw));
  transform-style: preserve-3d;
  transition: transform 85ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.mc-head-cube {
  position: absolute;
  inset: 0;
  width: 52px;
  height: 52px;
  transform-style: preserve-3d;
}

.mc-head-hat {
  transform: scale3d(1.125, 1.125, 1.125);
  transform-origin: 50% 50% 0;
  pointer-events: none;
}

.mc-face {
  position: absolute;
  inset: 0;
  width: 52px;
  height: 52px;
  backface-visibility: hidden;
  background-image: var(--skin-texture);
  background-repeat: no-repeat;
  background-size: var(--skin-sheet-width, 416px) var(--skin-sheet-height, 416px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.mc-head-base .mc-face-front {
  background-position: -52px -52px;
  transform: translateZ(26px);
}

.mc-head-base .mc-face-back {
  background-position: -156px -52px;
  transform: rotateY(180deg) translateZ(26px);
}

.mc-head-base .mc-face-right {
  background-position: -104px -52px;
  transform: rotateY(90deg) translateZ(26px);
}

.mc-head-base .mc-face-left {
  background-position: 0 -52px;
  transform: rotateY(-90deg) translateZ(26px);
}

.mc-head-base .mc-face-top {
  background-position: -52px 0;
  transform: rotateX(90deg) translateZ(26px);
}

.mc-head-base .mc-face-bottom {
  background-position: -104px 0;
  transform: rotateX(-90deg) translateZ(26px);
}

.mc-head-hat .mc-face-front {
  background-position: -260px -52px;
  transform: translateZ(26px);
}

.mc-head-hat .mc-face-back {
  background-position: -364px -52px;
  transform: rotateY(180deg) translateZ(26px);
}

.mc-head-hat .mc-face-right {
  background-position: -312px -52px;
  transform: rotateY(90deg) translateZ(26px);
}

.mc-head-hat .mc-face-left {
  background-position: -208px -52px;
  transform: rotateY(-90deg) translateZ(26px);
}

.mc-head-hat .mc-face-top {
  background-position: -260px 0;
  transform: rotateX(90deg) translateZ(26px);
}

.mc-head-hat .mc-face-bottom {
  background-position: -312px 0;
  transform: rotateX(-90deg) translateZ(26px);
}

.mc-head-spin.loading .mc-head-base .mc-face {
  background-image: linear-gradient(
    135deg,
    rgba(141, 255, 103, 0.22),
    rgba(255, 255, 255, 0.03)
  );
  background-position: center;
  background-size: auto;
}

.mc-head-spin.loading .mc-head-hat,
.mc-head-spin.no-skin .mc-head-hat {
  display: none;
}

.mc-head-spin.no-skin .mc-head-base .mc-face {
  background-image: linear-gradient(135deg, #1b211a, #0d100d);
  background-position: center;
  background-size: auto;
}

.acct-drop {
  position: absolute;
  z-index: 80;
  top: calc(100% + 2px);
  right: 0;
  width: 220px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(13, 15, 13, 0.985);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

.acct-drop[hidden] {
  display: none;
}

.acct-id {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.acct-id span {
  color: var(--muted-2);
  font-size: 0.63rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.acct-id strong {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-item {
  display: flex;
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  padding: 0 11px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  transition:
    color 140ms ease,
    background 140ms ease;
}

.acct-item:hover,
.acct-item:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}

.acct-item.danger:hover,
.acct-item.danger:focus-visible {
  color: #ffaaaa;
  background: rgba(255, 90, 90, 0.065);
}

@media (prefers-reduced-motion: reduce) {
  .mc-head-spin,
  .mc-head {
    transition: none;
  }
}

@media (max-width: 620px) {
  .acct-skin-btn {
    width: 64px;
    height: 64px;
  }

  .mc-head {
    transform: scale(0.88);
  }

  .acct-drop {
    right: -4px;
    width: min(220px, calc(100vw - 24px));
  }
}