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

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

.store-skin-button:hover,
.store-skin-button[aria-expanded="true"] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.store-skin-button:active .skin-head-stage { transform: scale(.97); }
.store-skin-button:focus-visible .skin-head-stage {
  outline: 2px solid var(--green-2);
  outline-offset: 5px;
  border-radius: 4px;
}

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

.store-skin-button:hover .skin-head-stage,
.store-skin-button[aria-expanded="true"] .skin-head-stage {
  filter: drop-shadow(0 8px 13px rgba(0,0,0,.36)) brightness(1.05);
}

.skin-head-rotor {
  --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(.2,.7,.2,1);
  will-change: transform;
}

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

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

.skin-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;
}

.skin-head-base .skin-face-front  { background-position: -52px -52px; transform: translateZ(26px); }
.skin-head-base .skin-face-back   { background-position: -156px -52px; transform: rotateY(180deg) translateZ(26px); }
.skin-head-base .skin-face-right  { background-position: 0 -52px; transform: rotateY(90deg) translateZ(26px); }
.skin-head-base .skin-face-left   { background-position: -104px -52px; transform: rotateY(-90deg) translateZ(26px); }
.skin-head-base .skin-face-top    { background-position: -52px 0; transform: rotateX(90deg) translateZ(26px); }
.skin-head-base .skin-face-bottom { background-position: -104px 0; transform: rotateX(-90deg) translateZ(26px); }

.skin-head-overlay .skin-face-front  { background-position: -260px -52px; transform: translateZ(26px); }
.skin-head-overlay .skin-face-back   { background-position: -364px -52px; transform: rotateY(180deg) translateZ(26px); }
.skin-head-overlay .skin-face-right  { background-position: -208px -52px; transform: rotateY(90deg) translateZ(26px); }
.skin-head-overlay .skin-face-left   { background-position: -312px -52px; transform: rotateY(-90deg) translateZ(26px); }
.skin-head-overlay .skin-face-top    { background-position: -260px 0; transform: rotateX(90deg) translateZ(26px); }
.skin-head-overlay .skin-face-bottom { background-position: -312px 0; transform: rotateX(-90deg) translateZ(26px); }

.skin-head-rotor.loading .skin-head-base .skin-face {
  background-image:
    linear-gradient(135deg, rgba(141,255,103,.22), rgba(255,255,255,.03));
  background-size: auto;
  background-position: center;
}
.skin-head-rotor.loading .skin-head-overlay { display: none; }
.skin-head-rotor.skin-unavailable .skin-head-base .skin-face {
  background-image: linear-gradient(135deg, #1b211a, #0d100d);
  background-size: auto;
  background-position: center;
}
.skin-head-rotor.skin-unavailable .skin-head-overlay { display: none; }

.store-account-dropdown {
  position: absolute;
  z-index: 80;
  top: calc(100% + 2px);
  right: 0;
  width: 220px;
  overflow: hidden;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(13,15,13,.985);
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
}

.store-account-dropdown[hidden] { display: none; }

.store-account-identity {
  display: flex;
  min-width: 0;
  padding: 10px 11px 11px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-direction: column;
  gap: 3px;
}
.store-account-identity span {
  color: var(--muted-2);
  font-size: .63rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.store-account-identity strong {
  overflow: hidden;
  color: var(--text-soft);
  font-size: .76rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.store-account-menu-item {
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  color: var(--text-soft);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 650;
  text-align: left;
  transition: color 140ms ease, background 140ms ease;
}
.store-account-menu-item:hover,
.store-account-menu-item:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.055);
  outline: none;
}
.store-account-menu-item.danger:hover,
.store-account-menu-item.danger:focus-visible {
  color: #ffaaaa;
  background: rgba(255,90,90,.065);
}

@media (prefers-reduced-motion: reduce) {
  .skin-head-rotor,
  .skin-head-stage { transition: none; }
}

@media (max-width: 620px) {
  .store-skin-button { width: 64px; height: 64px; }
  .skin-head-stage { transform: scale(.88); }
  .store-account-dropdown { right: -4px; width: min(220px, calc(100vw - 24px)); }
}