.account-route, .account-route body { background: #000; }
.account-route #home-view, .account-route #product-view { display: none !important; }
.account-route #account-view { display: block !important; }
.account-view {
  min-height: 100svh;
  padding: calc(var(--menu-top, calc(var(--announcement-height) + var(--header-height))) + clamp(48px, 8vh, 100px)) 24px 80px;
  background: #000;
  color: #fff;
  font-family: inherit;
}
.account-panel { width: 100%; max-width: 400px; margin: 0 auto; }
.account-panel h1, .account-panel h2 {
  margin: 0 0 24px;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .02em;
}
.account-panel h2 { margin-top: 42px; }
.account-panel input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: none;
  appearance: none;
}
.account-panel input::placeholder { color: #fff; opacity: 1; }
.account-panel input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
.account-panel input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: inset 0 0 0 1000px #000; }
.account-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 32px;
  padding: 10px 16px;
  border: 1px solid #fff;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .035em;
  text-align: center;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.account-button:not(:disabled):hover { background: #fff; color: #000; }
.account-button:disabled { opacity: .55; cursor: wait; }
.account-links { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: .875rem; line-height: 1.5; }
.account-links a, .account-order a, .account-text-button, .account-setup { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.account-links a:hover, .account-text-button:hover, .account-setup:hover { opacity: .7; }
.account-help, .account-message, .account-identity { margin: 24px 0 0; font-size: .875rem; line-height: 1.7; overflow-wrap: anywhere; }
.account-help { margin-top: 28px; }
.account-message:empty { display: none; }
.account-text-button { min-height: 44px; padding: 8px 0; font: inherit; font-size: .875rem; cursor: pointer; text-align: left; }
.account-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; padding: 18px 0; border-bottom: 1px solid #555; font-size: .875rem; line-height: 1.5; }
.account-order time { grid-column: 1 / -1; }
.account-actions { margin-top: 32px; }
.account-actions .account-button { margin-top: 14px; }
.account-setup { display: inline-block; margin-top: 16px; font-size: .875rem; line-height: 1.5; }
.account-route .nav-link[data-destination="account"] { cursor: pointer; }
@media (max-width: 480px) {
  .account-view { padding-inline: 24px; padding-top: calc(var(--menu-top, 132px) + 44px); }
  .account-links { flex-wrap: wrap; }
  .account-links a { margin-left: auto; }
}
