/*
  ILLUMIN3D STOREFRONT — customer account and order tracking pages
  (/account, /account/sign-in, /account/orders/<number>, /orders/view, /track).
  The account card on /success has its own small file, account-success.css.
  Loads after brand-v3-commerce.css. The pages use body[data-site-page="cart"], so the commerce
  layer already gives them the Night panel, fields, summary rows and buttons. This file adds
  the account compositions with the same brand pieces:
  - the eyebrow label (light-bars glyph) for section titles,
  - media frames with the halo / floor glow and glass chips for product photography,
  - one gradient primary per view; outline pills and violet text links for the rest,
  - Signal colors only on live status (chips, the package marker).
  Every rule is scoped to `body.i3-v3:not(#i3)[data-account-page]`, like the brand layers, so it
  wins over the legacy page-scoped selectors without !important.
*/

body.i3-v3:not(#i3)[data-account-page] {
  --account-gap: clamp(16px, 2.4vw, 24px);
  --account-section-gap: clamp(40px, 6vw, 72px);
  --account-info-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.2v.1' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --account-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.i3-v3:not(#i3)[data-account-page] [hidden] {
  display: none !important;
}

body.i3-v3:not(#i3)[data-account-page] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--i3-violet);
  outline-offset: 3px;
}

/* ===== 1. SHARED PIECES ===================================================== */
body.i3-v3:not(#i3)[data-account-page] main > .account-section {
  padding-top: clamp(8px, 2vw, 16px);
}

body.i3-v3:not(#i3)[data-account-page] .account-muted {
  color: var(--i3-grey-300);
}

body.i3-v3:not(#i3)[data-account-page] .account-small {
  margin: 0;
  color: var(--i3-grey-300);
  font-size: var(--i3-size-small);
  line-height: 1.55;
}

body.i3-v3:not(#i3)[data-account-page] .account-small a,
body.i3-v3:not(#i3)[data-account-page] .account-link {
  color: var(--i3-violet-300);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(193, 162, 253, 0.4);
  text-underline-offset: 3px;
}

body.i3-v3:not(#i3)[data-account-page] .account-small a:hover,
body.i3-v3:not(#i3)[data-account-page] .account-link:hover {
  text-decoration-color: currentColor;
}

/* Brand text link: accent color with an arrow, no box. */
body.i3-v3:not(#i3)[data-account-page] .account-link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--i3-size-small);
  text-decoration: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-link-arrow::after {
  content: "\203A";
  margin-left: 6px;
  font-size: 1.2em;
  line-height: 1;
  transition: transform var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-link-arrow:hover::after {
  transform: translateX(2px);
}

body.i3-v3:not(#i3)[data-account-page] .account-text-button {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--i3-violet-300);
  font: inherit;
  font-size: var(--i3-size-small);
  font-weight: 600;
  cursor: pointer;
}

body.i3-v3:not(#i3)[data-account-page] .account-text-button:hover:not(:disabled) {
  color: var(--i3-violet-200);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.i3-v3:not(#i3)[data-account-page] .account-text-button:disabled {
  color: var(--i3-grey-400);
  cursor: default;
}

/* Section titles are the brand eyebrow: Archivo 125% caps with the light-bars glyph. */
body.i3-v3:not(#i3)[data-account-page] .account-section-title {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--i3-violet-300);
  font-family: var(--i3-font);
  font-stretch: var(--i3-stretch-label);
  font-size: var(--i3-size-label);
  font-weight: var(--i3-weight-label);
  letter-spacing: var(--i3-track-label);
  line-height: 1.25;
  text-transform: uppercase;
}

body.i3-v3:not(#i3)[data-account-page] .account-section-title::before {
  content: "";
  flex: none;
  width: 1.6em;
  height: 1em;
  margin-right: 0.9em;
  background: currentColor;
  -webkit-mask: var(--i3-bars-mask) center / contain no-repeat;
  mask: var(--i3-bars-mask) center / contain no-repeat;
}

body.i3-v3:not(#i3)[data-account-page] .account-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
}

body.i3-v3:not(#i3)[data-account-page] .account-section-head .account-link {
  font-size: var(--i3-size-small);
}

body.i3-v3:not(#i3)[data-account-page] .account-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

body.i3-v3:not(#i3)[data-account-page] .account-panel-head .card-title {
  margin: 0;
}

body.i3-v3:not(#i3)[data-account-page] .checkout-panel :is(h2, h3).card-title {
  font-size: var(--i3-size-title);
}

body.i3-v3:not(#i3)[data-account-page] .account-form {
  display: grid;
  gap: 16px;
}

body.i3-v3:not(#i3)[data-account-page] .account-form + .account-form {
  margin-top: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-form .button-row {
  margin-top: 4px;
}

body.i3-v3:not(#i3)[data-account-page] .checkout-panel .field select {
  min-height: 48px;
  border: 1px solid var(--i3-line-dark-strong);
  border-radius: var(--i3-radius-m);
  background-color: var(--i3-night);
  box-shadow: none;
  color: var(--i3-white);
  font-family: var(--i3-font);
  font-size: 16px;
}

body.i3-v3:not(#i3)[data-account-page] .checkout-panel .field select:focus {
  border-color: var(--i3-violet);
  outline: 2px solid rgba(150, 94, 250, 0.4);
  outline-offset: 1px;
}

body.i3-v3:not(#i3)[data-account-page] .checkout-panel .field input[readonly] {
  color: var(--i3-grey-300);
}

body.i3-v3:not(#i3)[data-account-page] .account-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding-top: 10px;
  color: var(--i3-grey-200);
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
}

body.i3-v3:not(#i3)[data-account-page] .account-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--i3-violet);
}

body.i3-v3:not(#i3)[data-account-page] .account-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  color: var(--i3-grey-300);
  font-size: 15px;
}

body.i3-v3:not(#i3)[data-account-page] .account-loading::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(193, 162, 253, 0.25);
  border-top-color: var(--i3-violet-300);
  border-radius: 50%;
  animation: account-spin 0.9s linear infinite;
}

@keyframes account-spin {
  to { transform: rotate(360deg); }
}

body.i3-v3:not(#i3)[data-account-page] .status-box:not(.hidden) {
  margin-bottom: var(--account-gap);
}

body.i3-v3:not(#i3)[data-account-page] .button-ghost:disabled,
body.i3-v3:not(#i3)[data-account-page] .button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Status chips: Signal colors are for live status only (brand rule). */
body.i3-v3:not(#i3)[data-account-page] .account-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid var(--i3-line-dark-strong);
  border-radius: var(--i3-radius-pill);
  background: var(--i3-raised);
  color: var(--i3-grey-200);
  font-size: var(--i3-size-label);
  font-weight: 600;
  font-stretch: var(--i3-stretch-display);
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

body.i3-v3:not(#i3)[data-account-page] .account-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

body.i3-v3:not(#i3)[data-account-page] .account-chip[data-tone="done"] {
  border-color: rgba(60, 230, 172, 0.35);
  color: var(--i3-signal-green);
}

body.i3-v3:not(#i3)[data-account-page] .account-chip[data-tone="moving"] {
  border-color: rgba(69, 214, 255, 0.35);
  color: var(--i3-signal-cyan);
}

body.i3-v3:not(#i3)[data-account-page] .account-chip[data-tone="active"] {
  border-color: rgba(193, 162, 253, 0.4);
  color: var(--i3-violet-200);
}

body.i3-v3:not(#i3)[data-account-page] .account-chip:is([data-tone="pending"], [data-tone="attention"]) {
  border-color: rgba(255, 182, 72, 0.35);
  color: var(--i3-signal-amber);
}

body.i3-v3:not(#i3)[data-account-page] .account-chip[data-tone="stopped"] {
  border-color: rgba(255, 84, 112, 0.35);
  color: #ff8fa2;
}

body.i3-v3:not(#i3)[data-account-page] .account-chip[data-tone="neutral"]::before {
  background: var(--i3-grey-400);
  box-shadow: none;
}

/* Product photos: square tiles framed like the cart line items. */
body.i3-v3:not(#i3)[data-account-page] .account-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--i3-line-dark-strong);
  border-radius: var(--i3-radius-m);
  background: var(--i3-night);
}

body.i3-v3:not(#i3)[data-account-page] .account-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.i3-v3:not(#i3)[data-account-page] .account-thumb.is-empty {
  background: radial-gradient(closest-side, rgba(150, 94, 250, 0.22), transparent), var(--i3-raised);
}

body.i3-v3:not(#i3)[data-account-page] .account-thumb-mark {
  width: 26px !important;
  height: auto !important;
  opacity: 0.8;
  object-fit: contain !important;
}

/* Media frame: product photography with the brand halo behind it. */
body.i3-v3:not(#i3)[data-account-page] .account-media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-xl);
  background: var(--i3-night);
}

body.i3-v3:not(#i3)[data-account-page] .account-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.i3-v3:not(#i3)[data-account-page] .account-media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 55%, rgba(7, 6, 13, 0.55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-media-chip {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 32px);
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--i3-radius-pill);
  background: rgba(7, 6, 13, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--i3-white);
  font-size: var(--i3-size-label);
  font-stretch: var(--i3-stretch-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

body.i3-v3:not(#i3)[data-account-page] .account-media-chip span {
  color: var(--i3-grey-300);
  font-weight: 500;
}

/* Segmented progress meter (order cards). */
body.i3-v3:not(#i3)[data-account-page] .account-meter {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
}

body.i3-v3:not(#i3)[data-account-page] .account-meter > span {
  height: 4px;
  border-radius: 2px;
  background: var(--i3-rule);
}

body.i3-v3:not(#i3)[data-account-page] .account-meter > span[data-state="done"] {
  background: var(--i3-violet-400);
}

body.i3-v3:not(#i3)[data-account-page] .account-meter > span[data-state="current"] {
  background: var(--i3-violet-200);
  box-shadow: 0 0 10px rgba(171, 127, 251, 0.85);
}

body.i3-v3:not(#i3)[data-account-page] .account-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Loading: placeholders in the shape of the order cards. Same fill and shimmer as the
   order page's .account-skel (--account-skel, account-shimmer), so both pages match. */
body.i3-v3:not(#i3)[data-account-page] .account-skeleton-head {
  margin: 6px 0 22px;
}

body.i3-v3:not(#i3)[data-account-page] .account-skeleton-head span,
body.i3-v3:not(#i3)[data-account-page] .account-skeleton-media,
body.i3-v3:not(#i3)[data-account-page] .account-skeleton-body > span {
  display: block;
  background: var(--account-skel, rgba(217, 198, 255, 0.06));
  background-size: 300% 100%;
  animation: account-shimmer 1.6s linear infinite;
}

body.i3-v3:not(#i3)[data-account-page] .account-skeleton-head span {
  width: 132px;
  height: 12px;
  border-radius: 6px;
}

body.i3-v3:not(#i3)[data-account-page] .account-skeleton-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: var(--account-gap);
}

body.i3-v3:not(#i3)[data-account-page] .account-skeleton-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-l);
  background: var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-skeleton-media {
  height: 100%;
}

body.i3-v3:not(#i3)[data-account-page] .account-skeleton-body {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(18px, 2.4vw, 24px);
}

body.i3-v3:not(#i3)[data-account-page] .account-skeleton-body > span {
  height: 12px;
  border-radius: 6px;
}

body.i3-v3:not(#i3)[data-account-page] .account-skeleton-body > span:nth-child(1) { width: 46%; }
body.i3-v3:not(#i3)[data-account-page] .account-skeleton-body > span:nth-child(2) { width: 78%; height: 18px; }
body.i3-v3:not(#i3)[data-account-page] .account-skeleton-body > span:nth-child(3) { width: 60%; }
body.i3-v3:not(#i3)[data-account-page] .account-skeleton-body > span:nth-child(4) { width: 40%; height: 40px; margin-top: 18px; border-radius: var(--i3-radius-pill); }

@media (max-width: 719px) {
  body.i3-v3:not(#i3)[data-account-page] .account-skeleton-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.i3-v3:not(#i3)[data-account-page] .account-skeleton-media {
    aspect-ratio: 2 / 1;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-skeleton-card + .account-skeleton-card {
    display: none;
  }
}

/* Sections settle in when the account loads. */
body.i3-v3:not(#i3)[data-account-page] [data-account-content]:not([hidden]) > section,
body.i3-v3:not(#i3)[data-account-page] .account-active-order,
body.i3-v3:not(#i3)[data-account-page] .account-orders:not([hidden]) {
  animation: account-step-in var(--i3-dur-slow) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] [data-account-content]:not([hidden]) > section + section {
  animation-delay: 90ms;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-order:nth-child(2) { animation-delay: 60ms; }
body.i3-v3:not(#i3)[data-account-page] .account-active-order:nth-child(n + 3) { animation-delay: 120ms; }
body.i3-v3:not(#i3)[data-account-page] .account-orders:not([hidden]) { animation-delay: 120ms; }

/* Focus card: the one compact, centred card on a quiet halo used by /account/sign-in
   and /track (440px, Night panel with a soft violet wash and a lit top edge).
   Markup: <main class="account-auth account-focus"> > .container.account-focus-wrap >
   .checkout-panel.account-focus-card (h1 inside, lead = .account-focus-lead), and an
   optional note under the card (.account-focus-note). */
body.i3-v3:not(#i3)[data-account-page] main.account-focus {
  padding: clamp(28px, 7vw, 88px) 0 clamp(64px, 9vw, 120px);
}

/* Sign-in: the card sits in a full-height stage so the footer starts just below the fold. */
body.i3-v3:not(#i3)[data-account-page] main.account-signin {
  display: grid;
  align-content: center;
  min-height: calc(100svh - 72px);
  padding-block: clamp(40px, 8vh, 96px) clamp(72px, 12vh, 140px);
}

/* Stage: the same dark showroom backdrop as the landing-page hero (index.html
   .showroom-hero): the travelling 64px violet grid, the ambient corner wash, the
   drifting floor glow and the three light orbs, with the same values and animations.
   Markup: first child of <main>: <div class="account-stage" aria-hidden="true"> with
   .account-stage-grid, .account-stage-backdrop and .account-stage-glow inside. */
body.i3-v3:not(#i3)[data-account-page] > main#main-content {
  position: relative;
  isolation: isolate;
}

body.i3-v3:not(#i3)[data-account-page]::before,
body.i3-v3:not(#i3)[data-account-page]::after {
  content: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  /* Fade the bottom edge into the page so the stage never ends in a hard line above the footer. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 220px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 220px), transparent);
  background:
    radial-gradient(42rem circle at 14% 18%, rgba(202, 185, 255, 0.16), transparent 62%),
    radial-gradient(36rem circle at 86% 16%, rgba(124, 96, 255, 0.18), transparent 64%),
    radial-gradient(48rem circle at 72% 92%, rgba(83, 48, 143, 0.22), transparent 66%),
    linear-gradient(180deg, #040408 0%, #0b0a12 42%, #07070b 100%);
}

body.i3-v3:not(#i3)[data-account-page] .account-stage > div,
body.i3-v3:not(#i3)[data-account-page] .account-stage::before,
body.i3-v3:not(#i3)[data-account-page] .account-stage::after {
  position: absolute;
  pointer-events: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-stage > div {
  z-index: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-stage-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(190, 156, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 156, 255, 0.1) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.3;
  animation: heroGridTravel 18s linear infinite;
}

body.i3-v3:not(#i3)[data-account-page] .account-stage-backdrop {
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(148, 120, 255, 0.2), transparent 30%),
    radial-gradient(circle at bottom right, rgba(73, 38, 152, 0.22), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(202, 185, 255, 0.13), transparent 26%);
  animation: heroAmbientDrift 13s ease-in-out infinite;
}

body.i3-v3:not(#i3)[data-account-page] .account-stage-glow {
  inset-inline: 0;
  bottom: -12rem;
  height: 30rem;
  background: radial-gradient(ellipse at center, rgba(161, 110, 255, 0.3), transparent 60%);
  filter: blur(64px);
  opacity: 0.95;
  animation: glowDrift 9.5s ease-in-out infinite;
}

body.i3-v3:not(#i3)[data-account-page] .account-stage::before,
body.i3-v3:not(#i3)[data-account-page] .account-stage::after {
  content: "";
  z-index: 1;
}

body.i3-v3:not(#i3)[data-account-page] .account-stage::before {
  inset: 0;
  background:
    radial-gradient(34rem circle at 10% 18%, rgba(242, 239, 250, 0.2), transparent 68%),
    radial-gradient(38rem circle at 84% 14%, rgba(196, 148, 255, 0.28), transparent 66%),
    radial-gradient(30rem circle at 78% 82%, rgba(95, 72, 210, 0.26), transparent 68%);
  mix-blend-mode: screen;
  opacity: 0.95;
}

body.i3-v3:not(#i3)[data-account-page] .account-stage::after {
  inset-inline: 0;
  bottom: -20rem;
  height: 34rem;
  background:
    radial-gradient(ellipse at center, rgba(202, 185, 255, 0.18), transparent 58%),
    radial-gradient(ellipse at 62% 42%, rgba(233, 229, 244, 0.1), transparent 52%);
  filter: blur(18px);
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  body.i3-v3:not(#i3)[data-account-page] .account-stage > div {
    animation: none;
  }
}

body.i3-v3:not(#i3)[data-account-page] .account-focus-wrap {
  display: grid;
  justify-items: center;
  gap: 20px;
}

body.i3-v3:not(#i3)[data-account-page] .checkout-panel.account-focus-card {
  position: relative;
  width: min(100%, 440px);
  padding: clamp(24px, 4vw, 36px);
  border-color: var(--i3-line-dark);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(150, 94, 250, 0.09), transparent 62%),
    var(--i3-panel);
  animation: account-card-in var(--i3-dur-slow) var(--i3-ease-out) both;
}

/* A thin line of light along the top edge, like the lit edge of a light box. */
body.i3-v3:not(#i3)[data-account-page] .checkout-panel.account-focus-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 198, 255, 0.6), transparent);
  pointer-events: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-focus-card h1 {
  margin: 14px 0 0;
  font-size: clamp(1.85rem, 1.5rem + 1.3vw, 2.5rem);
  line-height: 1.05;
  text-wrap: balance;
}

body.i3-v3:not(#i3)[data-account-page] .account-focus-card h1:focus {
  outline: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-focus-lead {
  margin: 8px 0 0;
  color: var(--i3-grey-300);
  font-size: var(--i3-size-body);
  line-height: 1.5;
  text-wrap: pretty;
}

body.i3-v3:not(#i3)[data-account-page] .account-focus-note {
  max-width: 440px;
  margin: 0;
  padding: 0 8px;
  color: var(--i3-grey-400);
  font-size: var(--i3-size-small);
  line-height: 1.55;
  text-align: center;
}

body.i3-v3:not(#i3)[data-account-page] .account-focus-note a {
  color: var(--i3-violet-300);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(193, 162, 253, 0.4);
  text-underline-offset: 3px;
}

body.i3-v3:not(#i3)[data-account-page] .account-focus-note a:hover {
  text-decoration-color: currentColor;
}

@keyframes account-card-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* ===== 2. SIGN IN AND TRACK ================================================ */
/* Both pages are one compact focus card (section 1, .account-focus-*). */
body.i3-v3:not(#i3)[data-account-page] main.account-auth {
  padding: clamp(32px, 6vw, 80px) 0 clamp(56px, 8vw, 112px);
}

body.i3-v3:not(#i3)[data-account-page] .account-sent-to {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-m);
  background: var(--i3-night);
  color: var(--i3-grey-300);
  font-size: 15px;
  line-height: 1.5;
}

body.i3-v3:not(#i3)[data-account-page] .account-sent-to strong {
  color: var(--i3-white);
  overflow-wrap: anywhere;
}

body.i3-v3:not(#i3)[data-account-page] [data-track-sent] {
  display: grid;
  gap: 16px;
}

body.i3-v3:not(#i3)[data-account-page] [data-track-sent] .button-row {
  margin-top: 0;
}

/* ----- Sign in ------------------------------------------------------------- */
body.i3-v3:not(#i3)[data-account-page] .account-signin-head {
  margin-bottom: 28px;
}

/* Continue with Google: Google's dark-theme button (fill #131314, stroke #8E918F,
   text #E3E3E3, the standard four-color G at 18px, 12/10/12 padding, pill shape).
   The block slides open when the server offers Google, so nothing below jumps. */
body.i3-v3:not(#i3)[data-account-page] .account-providers {
  display: grid;
  grid-template-rows: 1fr;
}

body.i3-v3:not(#i3)[data-account-page] .account-providers[data-reveal="animate"] {
  animation: account-providers-in var(--i3-dur) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-providers-inner {
  display: grid;
  gap: 20px;
  min-height: 0;
  /* Room for the focus ring inside the clip used while it slides open. */
  margin: -5px -5px 0;
  padding: 5px 5px 25px;
  overflow: hidden;
}

body.i3-v3:not(#i3)[data-account-page] .account-google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid #8e918f;
  border-radius: var(--i3-radius-pill);
  background: #131314;
  color: #e3e3e3;
  font-family: "Google Sans", Roboto, var(--i3-font);
  font-stretch: var(--i3-stretch-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background-color var(--i3-dur-fast) var(--i3-ease),
    opacity var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-google-button:hover {
  background: #232324;
  color: #e3e3e3;
}

body.i3-v3:not(#i3)[data-account-page] .account-google-button:active {
  background: #2b2b2c;
}

body.i3-v3:not(#i3)[data-account-page] .account-google-button[data-busy] {
  opacity: 0.7;
  cursor: progress;
}

body.i3-v3:not(#i3)[data-account-page] .account-google-mark {
  flex: none;
  width: 18px;
  height: 18px;
}

body.i3-v3:not(#i3)[data-account-page] .account-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--i3-grey-400);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}

body.i3-v3:not(#i3)[data-account-page] .account-divider::before,
body.i3-v3:not(#i3)[data-account-page] .account-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--i3-line-dark);
}

/* Each step (email, code, link) fades in when it takes over the card. */
body.i3-v3:not(#i3)[data-account-page] .account-signin-step:not([hidden]) {
  animation: account-step-in var(--i3-dur) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-signin .button.account-signin-submit {
  display: flex;
  justify-content: center;
  width: 100%;
}

body.i3-v3:not(#i3)[data-account-page] .checkout-panel .field input.account-code-input {
  width: 100%;
  min-height: 60px;
  padding: 0 18px;
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5em;
  /* Letter spacing trails the last digit; the indent re-centres the code. */
  text-indent: 0.5em;
  text-align: center;
}

body.i3-v3:not(#i3)[data-account-page] .checkout-panel .field input.account-code-input::placeholder {
  color: var(--i3-grey-600);
  letter-spacing: 0.5em;
}

body.i3-v3:not(#i3)[data-account-page] .account-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  margin: -8px 0 -10px;
}

body.i3-v3:not(#i3)[data-account-page] .account-inline-actions:has(> :only-child) {
  justify-content: center;
}

body.i3-v3:not(#i3)[data-account-page] .account-signin-card .status-box:not(.hidden) {
  margin: -8px 0 20px;
  animation: account-step-in var(--i3-dur) var(--i3-ease-out) both;
}

@keyframes account-step-in {
  from { opacity: 0; transform: translateY(6px); }
}

@keyframes account-providers-in {
  from { grid-template-rows: 0fr; opacity: 0; }
}

/* ----- Track: the shared focus card (section 1) with the lookup form ---------- */
body.i3-v3:not(#i3)[data-account-page] .account-track-card .account-form {
  margin-top: 28px;
}

body.i3-v3:not(#i3)[data-account-page] .account-track .account-track-submit {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

body.i3-v3:not(#i3)[data-account-page] .account-track-card .status-box:not(.hidden) {
  margin: 16px 0 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-track-sent {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  animation: account-rise var(--i3-dur) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-track-sent-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-m);
  background: var(--i3-night);
  color: var(--i3-grey-300);
  font-size: 15px;
  line-height: 1.55;
}

body.i3-v3:not(#i3)[data-account-page] .account-track-sent-copy strong {
  color: var(--i3-white);
  overflow-wrap: anywhere;
}

body.i3-v3:not(#i3)[data-account-page] .account-track-sent-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(193, 162, 253, 0.36);
  border-radius: 50%;
  background: var(--i3-raised);
  color: var(--i3-violet-200);
}

body.i3-v3:not(#i3)[data-account-page] .account-track-sent-icon svg {
  width: 18px;
  height: 18px;
}

/* ===== 3. SHIPMENT JOURNEY: studio -> scan cities -> customer ============== */
body.i3-v3:not(#i3)[data-account-page] .account-journey {
  --track-h: 92px;
  position: relative;
  margin: 4px 0 0;
  padding: 0 6px 22px;
  background:
    radial-gradient(60% 80% at 50% 35%, rgba(150, 94, 250, 0.10), transparent 70%);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-track {
  position: relative;
  height: var(--track-h);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-line path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-rest {
  stroke: var(--i3-grey-600);
  stroke-width: 2;
  stroke-dasharray: 1 7;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-done {
  stroke: var(--i3-violet-400);
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(171, 127, 251, 0.75));
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-dot {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--i3-grey-600);
  border-radius: 50%;
  background: var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-reached] .account-journey-dot {
  border-color: var(--i3-violet-400);
  background: var(--i3-violet-400);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node:is([data-kind="origin"], [data-kind="destination"]) {
  width: 16px;
  height: 16px;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-kind="destination"] .account-journey-dot {
  border-width: 2px;
  border-color: var(--i3-grey-300);
  box-shadow: inset 0 0 0 3px var(--i3-panel);
  background: var(--i3-grey-300);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-kind="destination"][data-reached] .account-journey-dot {
  border-color: var(--i3-violet-200);
  background: var(--i3-violet-200);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-label {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  display: grid;
  gap: 1px;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-label strong {
  color: var(--i3-grey-200);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-label span {
  color: var(--i3-grey-400);
  font-size: 12px;
  line-height: 1.3;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-kind="stop"] .account-journey-label strong {
  color: var(--i3-grey-300);
  font-weight: 500;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-current] .account-journey-label {
  top: calc(100% + 18px);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-current] .account-journey-label strong {
  color: var(--i3-white);
  font-weight: 650;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-kind="origin"] .account-journey-label {
  left: 0;
  transform: none;
  text-align: left;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-kind="destination"] .account-journey-label {
  right: 0;
  left: auto;
  transform: none;
  text-align: right;
}

/* The package: a glowing marker at its latest scan. */
body.i3-v3:not(#i3)[data-account-page] .account-journey-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: var(--i3-gradient-cta);
  box-shadow: 0 0 0 6px rgba(150, 94, 250, 0.18), 0 0 26px rgba(171, 127, 251, 0.8);
  color: var(--i3-midnight);
  transform: translate(-50%, -50%);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-marker svg {
  width: 18px;
  height: 18px;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey-marker::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid rgba(193, 162, 253, 0.7);
  border-radius: 50%;
  animation: account-ping 2.4s var(--i3-ease-out) infinite;
}

@keyframes account-ping {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(2); opacity: 0; }
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-state="delivered"] .account-journey-marker::after {
  animation: none;
  opacity: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-state="attention"] .account-journey-marker {
  background: var(--i3-signal-amber);
  box-shadow: 0 0 0 6px rgba(255, 182, 72, 0.16), 0 0 22px rgba(255, 182, 72, 0.6);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-state="attention"] .account-journey-marker::after {
  border-color: rgba(255, 182, 72, 0.7);
}

/*
  Entrance, once: the travelled line draws in from the studio while the package glides
  along the arc to its latest scan. --account-t runs 0 -> --p (the package position, set by
  account-order.js). The arc's x is linear in t, so the marker follows the same curve as the
  drawing: y = (60 - 136t(1 - t)) / 120 of the track, and the line is clipped at x = t.
  Without @property support the marker simply sits at --p.
*/
@property --account-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-animate] {
  --account-t: var(--p);
  animation: account-route 1.2s var(--i3-ease-light) 0.2s both;
}

@keyframes account-route {
  from { --account-t: 0; }
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-animate] .account-journey-marker {
  left: calc(var(--account-t) * 100%);
  top: calc((60 - 136 * var(--account-t) * (1 - var(--account-t))) * 100% / 120);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-animate] .account-journey-done {
  clip-path: inset(-24px calc(100% - var(--account-t) / var(--p) * 100%) -24px -24px);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-animate] .account-journey-marker::after {
  animation-delay: 1.4s;
}

/* Stops light up as the package passes them: the fill fades in over the last 2.5% of travel
   before the stop (opacity clamps to 0..1). Without animation, t = --p and they are lit. */
body.i3-v3:not(#i3)[data-account-page] .account-journey[data-animate] .account-journey-node[data-reached] .account-journey-dot {
  position: relative;
  border-color: var(--i3-grey-600);
  background: var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-animate] .account-journey-node[data-reached] .account-journey-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--i3-violet-400);
  opacity: calc((var(--account-t) - var(--n, 0)) * 40 + 1);
}

body.i3-v3:not(#i3)[data-account-page] .account-journey[data-animate] .account-journey-node[data-kind="destination"][data-reached] .account-journey-dot::after {
  background: var(--i3-violet-200);
}

@media (max-width: 639px) {
  body.i3-v3:not(#i3)[data-account-page] .account-journey {
    --track-h: 80px;
    padding: 0 4px 30px;
  }

  /* On phones only the two ends are named; the scan list names every stop. */
  body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-kind="stop"]:not([data-current]) .account-journey-label {
    display: none;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-journey-node[data-kind="stop"][data-current] .account-journey-label {
    top: auto;
    bottom: calc(100% + 20px);
  }
}

/* ===== 4. ORDER PAGE ======================================================== */
body.i3-v3:not(#i3)[data-account-page] .account-order-hero-grid {
  display: grid;
  gap: 24px clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 960px) {
  body.i3-v3:not(#i3)[data-account-page] .account-order-hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  }
}

/* "← Your orders": the product pages' "← Back to shop", above the eyebrow. */
body.i3-v3:not(#i3)[data-account-page] .account-order-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: -12px 0 6px;
  color: var(--i3-grey-300);
  font-size: var(--i3-size-small);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-back span {
  transition: transform var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-back:hover {
  color: var(--i3-white);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-back:hover span {
  transform: translateX(-2px);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-hero .eyebrow {
  display: block;
  overflow-wrap: anywhere;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-hero h1 {
  margin-top: 14px;
  font-size: var(--i3-size-display-l);
  line-height: 1.02;
}

/* ETA: the accent words of the page, like the gradient words in the home and product heroes. */
body.i3-v3:not(#i3)[data-account-page] .page-hero p.account-order-eta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
  max-width: none;
  margin: 10px 0 0;
  color: var(--i3-grey-200);
  font-stretch: var(--i3-stretch-display);
  font-size: var(--i3-size-display-m);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-eta strong {
  background: var(--i3-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--i3-weight-display);
}

body.i3-v3:not(#i3)[data-account-page] .page-hero p.account-order-sub {
  margin-top: 14px;
  font-size: 16px;
  text-wrap: pretty;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-sub > span {
  white-space: nowrap;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-sub > span:not(:last-child)::after {
  content: "\00a0\00b7";
  color: var(--i3-grey-400);
}

/* Problem states: the hero is the whole page, so its lead takes the lead size. */
body.i3-v3:not(#i3)[data-account-page] .account-order-hero[data-problem] p.account-order-sub {
  max-width: 52ch;
  font-size: var(--i3-size-lead);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-problem-actions {
  margin-top: 26px;
}

/* Loading: the hero's own words become soft bars until the order arrives. */
body.i3-v3:not(#i3)[data-account-page] .account-order-hero[data-loading] :is(h1, .account-order-sub) {
  width: fit-content;
  max-width: 100%;
  border-radius: 12px;
  background: var(--account-skel);
  background-size: 300% 100%;
  color: transparent;
  animation: account-shimmer 1.6s linear infinite;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-hero[data-loading] .account-order-sub {
  border-radius: 8px;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-hero-media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 440px;
  margin: 0;
  animation: account-rise var(--i3-dur-slow) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-hero-media::before {
  content: "";
  position: absolute;
  inset: -16% -10% -22%;
  z-index: -1;
  background: var(--i3-halo);
  pointer-events: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-hero-media .account-media-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--i3-radius-l);
}

/* Tablets and phones: the photo becomes a quiet 2:1 strip between the words and the progress. */
@media (max-width: 959px) {
  body.i3-v3:not(#i3)[data-account-page] .account-order-hero-media {
    justify-self: stretch;
    max-width: 560px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order-hero-media::before {
    inset: -8% 0 -14%;
    opacity: 0.7;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order-hero-media .account-media-frame {
    aspect-ratio: 2 / 1;
  }
}

/* Progress: a centred stepper on wide screens, a segmented bar on phones. */
body.i3-v3:not(#i3)[data-account-page] .account-progress {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 22px clamp(12px, 2vw, 20px) 20px;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-l);
  background: rgba(18, 16, 25, 0.72);
  animation: account-rise var(--i3-dur) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-timeline {
  --dot: 14px;
  display: grid;
  grid-template-columns: repeat(var(--steps, 7), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-step {
  position: relative;
  display: grid;
  grid-template-rows: var(--dot) auto;
  justify-items: center;
  gap: 12px;
  padding: 0 4px;
  color: var(--i3-grey-400);
  text-align: center;
}

/* The connector runs from this dot's centre to the next one. */
body.i3-v3:not(#i3)[data-account-page] .account-step::before {
  content: "";
  position: absolute;
  top: calc(var(--dot) / 2 - 1px);
  left: calc(50% + var(--dot) / 2 + 6px);
  right: calc(-50% + var(--dot) / 2 + 6px);
  height: 2px;
  border-radius: 2px;
  background: var(--i3-rule);
}

body.i3-v3:not(#i3)[data-account-page] .account-step:last-child::before {
  display: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-step[data-state="done"]::before {
  background: linear-gradient(90deg, var(--i3-violet-400), rgba(171, 127, 251, 0.55));
}

body.i3-v3:not(#i3)[data-account-page] .account-step-dot {
  position: relative;
  z-index: 1;
  width: var(--dot);
  height: var(--dot);
  border: 2px solid var(--i3-rule);
  border-radius: 50%;
  background: var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-step[data-state="done"] .account-step-dot {
  border-color: var(--i3-violet-400);
  background: var(--i3-violet-400);
}

body.i3-v3:not(#i3)[data-account-page] .account-step[data-state="current"] .account-step-dot {
  border-color: var(--i3-violet-200);
  background: var(--i3-violet-200);
  box-shadow: 0 0 0 5px rgba(150, 94, 250, 0.22), 0 0 18px rgba(171, 127, 251, 0.75);
}

body.i3-v3:not(#i3)[data-account-page] .account-step:is([data-key="cancelled"], [data-key="refunded"]) .account-step-dot {
  border-color: #ff8fa2;
  background: #ff8fa2;
  box-shadow: 0 0 0 5px rgba(255, 84, 112, 0.16);
}

/* A finished order (delivered, picked up): the last step is done, with a check, like the
   delivered package marker. Negative margins keep it on the connector line. */
body.i3-v3:not(#i3)[data-account-page] .account-step[data-complete] .account-step-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -5px 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--i3-gradient-cta);
  box-shadow: 0 0 16px rgba(171, 127, 251, 0.55);
  color: var(--i3-midnight);
}

body.i3-v3:not(#i3)[data-account-page] .account-step[data-complete] .account-step-dot svg {
  width: 15px;
  height: 15px;
}

body.i3-v3:not(#i3)[data-account-page] .account-step[data-complete] .account-step-label {
  color: var(--i3-white);
}

body.i3-v3:not(#i3)[data-account-page] .account-step-copy {
  display: grid;
  gap: 2px;
  max-width: 100%;
}

body.i3-v3:not(#i3)[data-account-page] .account-step-label {
  font-size: var(--i3-size-small);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

body.i3-v3:not(#i3)[data-account-page] .account-step[data-state="done"] .account-step-label {
  color: var(--i3-grey-200);
}

body.i3-v3:not(#i3)[data-account-page] .account-step[data-state="current"] .account-step-label {
  color: var(--i3-white);
}

body.i3-v3:not(#i3)[data-account-page] .account-step-time {
  color: var(--i3-grey-400);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

body.i3-v3:not(#i3)[data-account-page] .account-progress-summary {
  display: none;
}

@media (max-width: 719px) {
  body.i3-v3:not(#i3)[data-account-page] .account-progress {
    padding: 16px 18px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-timeline {
    gap: 4px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-step {
    display: block;
    height: 6px;
    padding: 0;
    border-radius: 3px;
    background: var(--i3-rule);
  }

  body.i3-v3:not(#i3)[data-account-page] .account-step::before,
  body.i3-v3:not(#i3)[data-account-page] .account-step-dot {
    display: none;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-step[data-state="done"] {
    background: var(--i3-violet-400);
  }

  body.i3-v3:not(#i3)[data-account-page] .account-step[data-state="current"] {
    background: var(--i3-violet-200);
    box-shadow: 0 0 12px rgba(171, 127, 251, 0.85);
  }

  body.i3-v3:not(#i3)[data-account-page] .account-step:is([data-key="cancelled"], [data-key="refunded"]) {
    background: #ff8fa2;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-step-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-progress-summary {
    display: block;
    margin: 12px 0 0;
    color: var(--i3-grey-200);
    font-size: var(--i3-size-small);
    font-weight: 600;
  }
}

/* Detail layout: delivery first, the order summary beside it. */
body.i3-v3:not(#i3)[data-account-page] .account-detail-layout {
  display: grid;
  gap: var(--account-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  /* Left: delivery, then Details. Right: the summary, spanning both, so the left column
     never ends far above the right one on short (pickup, delivered, in-production) orders. */
  body.i3-v3:not(#i3)[data-account-page] .account-detail-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--account-gap) 28px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-detail-main {
    grid-column: 1;
    grid-row: 1;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order-details {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  /* Top-align the summary with the first package card, not with the eyebrow above it
     (one eyebrow line + the 16px gap), as checkout aligns its two panels. */
  body.i3-v3:not(#i3)[data-account-page] .account-detail-side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: 96px;
    margin-top: calc(var(--i3-size-label) * 1.25 + 16px);
  }
}

body.i3-v3:not(#i3)[data-account-page] :is(.account-detail-main, .account-detail-side) {
  display: grid;
  gap: var(--account-gap);
  align-content: start;
  min-width: 0;
}

/* Content rises in once the order arrives. */
body.i3-v3:not(#i3)[data-account-page] .account-detail-layout:not([hidden]) :is(.account-delivery, .account-order-details, .account-detail-side > :not([hidden])) {
  animation: account-rise var(--i3-dur-slow) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-detail-layout:not([hidden]) .account-detail-side > :nth-child(2) {
  animation-delay: 60ms;
}

body.i3-v3:not(#i3)[data-account-page] .account-detail-layout:not([hidden]) .account-detail-side > :nth-child(3) {
  animation-delay: 120ms;
}

@keyframes account-rise {
  from { opacity: 0; transform: translateY(8px); }
}

body.i3-v3:not(#i3)[data-account-page] .account-delivery {
  display: grid;
  gap: 16px;
}

body.i3-v3:not(#i3)[data-account-page] .account-shipments {
  display: grid;
  gap: var(--account-gap);
}

body.i3-v3:not(#i3)[data-account-page] .account-shipment {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-l);
  background: var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-shipment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

body.i3-v3:not(#i3)[data-account-page] .account-shipment-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-shipment-title h3 {
  margin: 0;
  color: var(--i3-white);
  font-size: var(--i3-size-title);
  font-weight: var(--i3-weight-title);
  line-height: 1.2;
}

body.i3-v3:not(#i3)[data-account-page] .account-shipment-title h3 span {
  color: var(--i3-grey-300);
  font-weight: 500;
}

body.i3-v3:not(#i3)[data-account-page] .account-shipment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 16px;
  margin: 0;
  color: var(--i3-grey-300);
  font-size: var(--i3-size-small);
  line-height: 1.5;
}

body.i3-v3:not(#i3)[data-account-page] .account-tracking-number {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-tracking-number span {
  color: var(--i3-grey-200);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}

/* Copy tracking number: a quiet icon button; the check shows for a moment after copying. */
body.i3-v3:not(#i3)[data-account-page] .account-copy {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -4px -6px -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--i3-grey-400);
  cursor: pointer;
  transition: color var(--i3-dur-fast) var(--i3-ease), background-color var(--i3-dur-fast) var(--i3-ease);
}

/* 44px touch target around the 32px circle. */
body.i3-v3:not(#i3)[data-account-page] .account-copy::after {
  content: "";
  position: absolute;
  inset: -6px;
}

body.i3-v3:not(#i3)[data-account-page] .account-copy:hover {
  background: var(--i3-raised);
  color: var(--i3-violet-200);
}

body.i3-v3:not(#i3)[data-account-page] .account-copy svg {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  transition: opacity var(--i3-dur-fast) var(--i3-ease), transform var(--i3-dur) var(--i3-ease-out);
}

body.i3-v3:not(#i3)[data-account-page] .account-copy .account-icon-check,
body.i3-v3:not(#i3)[data-account-page] .account-copy[data-copied] svg:first-child {
  opacity: 0;
  transform: scale(0.6);
}

body.i3-v3:not(#i3)[data-account-page] .account-copy[data-copied] {
  color: var(--i3-signal-green);
}

body.i3-v3:not(#i3)[data-account-page] .account-copy[data-copied] .account-icon-check {
  opacity: 1;
  transform: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-shipment-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--i3-line-dark);
}

body.i3-v3:not(#i3)[data-account-page] .account-now {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-now-label {
  color: var(--i3-grey-400);
  font-size: 13px;
  font-weight: 600;
}

body.i3-v3:not(#i3)[data-account-page] .account-now strong {
  color: var(--i3-white);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
}

body.i3-v3:not(#i3)[data-account-page] .account-now-time {
  color: var(--i3-grey-300);
  font-size: var(--i3-size-small);
}

body.i3-v3:not(#i3)[data-account-page] .account-carrier-button {
  gap: 8px;
  white-space: nowrap;
}

body.i3-v3:not(#i3)[data-account-page] .account-carrier-button svg {
  width: 16px;
  height: 16px;
  transition: transform var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-carrier-button:hover svg {
  transform: translate(1px, -1px);
}

body.i3-v3:not(#i3)[data-account-page] .account-live-note {
  flex: 1 1 260px;
  margin: 0;
  color: var(--i3-grey-200);
  font-size: var(--i3-size-small);
  line-height: 1.5;
}

/* Tracking history: a disclosure row under the latest scan. */
body.i3-v3:not(#i3)[data-account-page] .account-history {
  margin-top: 18px;
  border-top: 1px solid var(--i3-line-dark);
}

body.i3-v3:not(#i3)[data-account-page] .account-history-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-bottom: -10px;
  padding: 4px 0 0;
  border: 0;
  background: none;
  color: var(--i3-grey-200);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body.i3-v3:not(#i3)[data-account-page] .account-history-title {
  font-size: var(--i3-size-small);
  font-weight: 650;
}

body.i3-v3:not(#i3)[data-account-page] .account-history-count {
  color: var(--i3-grey-400);
  font-size: 13px;
}

body.i3-v3:not(#i3)[data-account-page] .account-history-chevron {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--i3-grey-400);
  transition: transform var(--i3-dur) var(--i3-ease), color var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-history-toggle:hover :is(.account-history-title, .account-history-chevron) {
  color: var(--i3-white);
}

body.i3-v3:not(#i3)[data-account-page] .account-history-toggle[aria-expanded="true"] .account-history-chevron {
  transform: rotate(180deg);
}

body.i3-v3:not(#i3)[data-account-page] .account-history-panel {
  padding: 18px 0 2px;
  animation: account-rise var(--i3-dur) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-events {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-event {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 0 0 16px 26px;
}

body.i3-v3:not(#i3)[data-account-page] .account-event::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--i3-grey-600);
}

body.i3-v3:not(#i3)[data-account-page] .account-event::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 2px;
  left: 6px;
  width: 2px;
  background: var(--i3-rule);
}

body.i3-v3:not(#i3)[data-account-page] .account-event:last-child {
  padding-bottom: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-event:last-child::after {
  display: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-event:first-child::before {
  background: var(--i3-violet-300);
  box-shadow: 0 0 10px rgba(193, 162, 253, 0.7);
}

body.i3-v3:not(#i3)[data-account-page] .account-event strong {
  color: var(--i3-white);
  font-size: 15px;
  font-weight: 600;
}

body.i3-v3:not(#i3)[data-account-page] .account-event span {
  color: var(--i3-grey-400);
  font-size: 13px;
}

/* Pickup and local delivery: one hand-off card instead of a route. */
body.i3-v3:not(#i3)[data-account-page] .account-handoff {
  display: flex;
  align-items: center;
  gap: 18px;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(150, 94, 250, 0.12), transparent 70%),
    var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-handoff-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(193, 162, 253, 0.36);
  border-radius: 50%;
  background: var(--i3-raised);
  color: var(--i3-violet-200);
}

body.i3-v3:not(#i3)[data-account-page] .account-handoff[data-state="done"] .account-handoff-icon {
  border-color: rgba(60, 230, 172, 0.4);
  color: var(--i3-signal-green);
  box-shadow: 0 0 18px rgba(60, 230, 172, 0.16);
}

body.i3-v3:not(#i3)[data-account-page] .account-handoff-icon svg {
  width: 24px;
  height: 24px;
}

body.i3-v3:not(#i3)[data-account-page] .account-handoff-copy {
  display: grid;
  gap: 4px;
}

body.i3-v3:not(#i3)[data-account-page] .account-handoff-copy h3 {
  margin: 0;
  color: var(--i3-white);
  font-size: var(--i3-size-title);
  font-weight: var(--i3-weight-title);
}

body.i3-v3:not(#i3)[data-account-page] .account-handoff-copy p {
  margin: 0;
  color: var(--i3-grey-300);
  font-size: 15px;
  line-height: 1.55;
}

/* Order summary */
body.i3-v3:not(#i3)[data-account-page] .account-items {
  display: grid;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--i3-line-dark);
}

body.i3-v3:not(#i3)[data-account-page] .account-item:first-child {
  padding-top: 0;
  border-top: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-item .account-thumb {
  width: 64px;
  height: 64px;
}

body.i3-v3:not(#i3)[data-account-page] .account-item-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-item-copy strong {
  color: var(--i3-white);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  text-wrap: pretty;
}

body.i3-v3:not(#i3)[data-account-page] .account-item-copy span {
  color: var(--i3-grey-300);
  font-size: 13px;
}

body.i3-v3:not(#i3)[data-account-page] .account-item-price {
  color: var(--i3-white);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.i3-v3:not(#i3)[data-account-page] .account-totals {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--i3-line-dark);
}

body.i3-v3:not(#i3)[data-account-page] .account-mockup {
  margin-top: 14px;
}

body.i3-v3:not(#i3)[data-account-page] .account-reorder {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

body.i3-v3:not(#i3)[data-account-page] .account-reorder-button {
  justify-content: center;
  width: 100%;
  min-height: 48px;
}

body.i3-v3:not(#i3)[data-account-page] .account-reorder-button[data-state="added"] {
  border-color: rgba(60, 230, 172, 0.45);
  color: var(--i3-signal-green);
}

body.i3-v3:not(#i3)[data-account-page] .account-reorder-status[data-tone="danger"] {
  color: #ffb3c0;
}

body.i3-v3:not(#i3)[data-account-page] .account-facts {
  display: grid;
  gap: 0;
  margin: 10px 0 14px;
}

body.i3-v3:not(#i3)[data-account-page] .account-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--i3-line-dark);
}

body.i3-v3:not(#i3)[data-account-page] .account-facts > div:first-child {
  border-top: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-facts dt {
  color: var(--i3-grey-300);
  font-size: var(--i3-size-small);
}

body.i3-v3:not(#i3)[data-account-page] .account-facts dd {
  margin: 0;
  color: var(--i3-white);
  font-size: var(--i3-size-small);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

body.i3-v3:not(#i3)[data-account-page] .account-nudge {
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(150, 94, 250, 0.18), transparent 70%),
    var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-nudge p {
  margin: 8px 0 0;
  color: var(--i3-grey-300);
  font-size: 15px;
  line-height: 1.55;
}

body.i3-v3:not(#i3)[data-account-page] .account-nudge .button-row {
  margin-top: 16px;
}

/* Loading skeleton: the shapes of a package card and the summary, not a spinner. */
body.i3-v3:not(#i3)[data-account-page] {
  --account-skel: linear-gradient(100deg, rgba(217, 198, 255, 0.06) 30%, rgba(217, 198, 255, 0.13) 50%, rgba(217, 198, 255, 0.06) 70%);
}

@keyframes account-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

body.i3-v3:not(#i3)[data-account-page] .account-order-skeleton {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 1024px) {
  body.i3-v3:not(#i3)[data-account-page] .account-order-skeleton {
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
  }

  body.i3-v3:not(#i3)[data-account-page] .account-skel-side {
    margin-top: calc(var(--i3-size-label) * 1.25 + 16px);
  }
}

body.i3-v3:not(#i3)[data-account-page] .account-skel-main {
  display: grid;
  gap: 16px;
}

body.i3-v3:not(#i3)[data-account-page] .account-skel-card {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-l);
  background: var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-skel {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: var(--account-skel);
  background-size: 300% 100%;
  animation: account-shimmer 1.6s linear infinite;
}

body.i3-v3:not(#i3)[data-account-page] .account-skel-eyebrow { width: 140px; height: 12px; }
body.i3-v3:not(#i3)[data-account-page] .account-skel-title { width: 46%; height: 22px; border-radius: 11px; }
body.i3-v3:not(#i3)[data-account-page] .account-skel-title.is-short { width: 38%; }
body.i3-v3:not(#i3)[data-account-page] .account-skel-line { width: 70%; }
body.i3-v3:not(#i3)[data-account-page] .account-skel-line.is-short { width: 44%; }
body.i3-v3:not(#i3)[data-account-page] .account-skel-pill { flex: none; width: 150px; height: 46px; border-radius: var(--i3-radius-pill); }
body.i3-v3:not(#i3)[data-account-page] .account-skel-thumb { flex: none; width: 64px; height: 64px; border-radius: var(--i3-radius-m); }

body.i3-v3:not(#i3)[data-account-page] .account-skel-route {
  display: block;
  height: 72px;
  margin: 6px 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-skel-route span {
  display: block;
  height: 100%;
  border-top: 2px dotted var(--i3-grey-600);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0.8;
}

body.i3-v3:not(#i3)[data-account-page] :is(.account-skel-foot, .account-skel-item) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.i3-v3:not(#i3)[data-account-page] .account-skel-item {
  justify-content: flex-start;
}

body.i3-v3:not(#i3)[data-account-page] .account-skel-foot {
  padding-top: 16px;
  border-top: 1px solid var(--i3-line-dark);
}

body.i3-v3:not(#i3)[data-account-page] .account-skel-foot .account-skel-line {
  width: 40%;
}

body.i3-v3:not(#i3)[data-account-page] .account-skel-item .account-skel-line {
  width: 55%;
}

@media (max-width: 480px) {
  body.i3-v3:not(#i3)[data-account-page] .account-shipment-foot .account-carrier-button {
    width: 100%;
    justify-content: center;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-skel-foot {
    flex-wrap: wrap;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-skel-pill {
    width: 100%;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order-problem-actions > * {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.i3-v3:not(#i3)[data-account-page] :is(.account-journey[data-animate], .account-skel, .account-order-hero[data-loading] :is(h1, .account-order-sub), .account-order-hero-media, .account-progress, .account-history-panel, .account-track-sent),
  body.i3-v3:not(#i3)[data-account-page] .account-detail-layout:not([hidden]) :is(.account-delivery, .account-order-details, .account-detail-side > *) {
    animation: none;
  }

  body.i3-v3:not(#i3)[data-account-page] :is(.account-copy, .account-copy svg, .account-history-chevron, .account-order-back, .account-order-back span, .account-carrier-button svg) {
    transition: none;
  }
}

/* ===== 5. ACCOUNT PAGE ====================================================== */
/* Hero: Sign out rides on the eyebrow row, so it never sits alone above the orders. */
body.i3-v3:not(#i3)[data-account-page] .account-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.i3-v3:not(#i3)[data-account-page] .account-hero-top .button-ghost.account-sign-out {
  flex: none;
  min-height: 40px;
  margin: -12px 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-hero h1 {
  overflow-wrap: anywhere;
}

body.i3-v3:not(#i3)[data-account-page] .account-hero h1:focus {
  outline: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-layout {
  display: grid;
  gap: var(--account-section-gap);
}

body.i3-v3:not(#i3)[data-account-page] .account-signed-out {
  display: grid;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 100% 50%, rgba(150, 94, 250, 0.16), transparent 70%),
    var(--i3-panel);
}

@media (min-width: 820px) {
  body.i3-v3:not(#i3)[data-account-page] .account-signed-out {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  }
}

body.i3-v3:not(#i3)[data-account-page] .account-signed-out-copy {
  display: grid;
  gap: 12px;
}

body.i3-v3:not(#i3)[data-account-page] .account-signed-out-copy .button-row {
  margin-top: 8px;
}

body.i3-v3:not(#i3)[data-account-page] .account-signed-out-media {
  overflow: hidden;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-m);
  aspect-ratio: 16 / 9;
}

body.i3-v3:not(#i3)[data-account-page] .account-signed-out-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Orders in progress: product photo beside status, progress and the next action. */
body.i3-v3:not(#i3)[data-account-page] .account-active-orders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: var(--account-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-order {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  overflow: hidden;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-l);
  background: var(--i3-panel);
  transition: border-color var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-active-order:hover {
  border-color: var(--i3-line-dark-strong);
}

body.i3-v3:not(#i3)[data-account-page] .account-active-media {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background: var(--i3-night);
}

body.i3-v3:not(#i3)[data-account-page] .account-active-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--i3-dur-slow) var(--i3-ease-out);
}

body.i3-v3:not(#i3)[data-account-page] .account-active-order:hover .account-active-media img:not(.account-thumb-mark) {
  transform: scale(1.03);
}

body.i3-v3:not(#i3)[data-account-page] .account-active-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(18, 16, 25, 0.6));
  pointer-events: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-media.is-empty {
  display: grid;
  place-items: center;
  background: radial-gradient(closest-side, rgba(150, 94, 250, 0.24), transparent), var(--i3-night);
}

body.i3-v3:not(#i3)[data-account-page] .account-active-media.is-empty img {
  position: static;
  width: 44px;
  height: auto;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 24px);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-number {
  color: var(--i3-grey-300);
  font-stretch: var(--i3-stretch-label);
  font-size: var(--i3-size-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-number span {
  color: var(--i3-grey-200);
  font-variant-numeric: tabular-nums;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-title {
  margin: 2px 0 0;
  color: var(--i3-white);
  font-size: 20px;
  font-weight: var(--i3-weight-title);
  line-height: 1.25;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-meta {
  margin: 0;
  color: var(--i3-grey-300);
  font-size: var(--i3-size-small);
  line-height: 1.45;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-meta > :is(span, strong) {
  white-space: nowrap;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-meta strong {
  color: var(--i3-white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-progress {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-step {
  color: var(--i3-white);
  font-size: 13px;
  font-weight: 600;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-step span {
  color: var(--i3-grey-400);
  font-weight: 500;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-body .account-order-actions {
  margin-top: 8px;
}

/* Buy again feedback: a toned note under the order, and "Added to cart" on the button. */
body.i3-v3:not(#i3)[data-account-page] .account-order-status {
  position: relative;
  margin: 0;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-m);
  background: var(--i3-night);
  color: var(--i3-grey-200);
  font-size: var(--i3-size-small);
  line-height: 1.5;
  animation: account-step-in var(--i3-dur) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-status::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--i3-grey-400);
  -webkit-mask: var(--account-info-mask) center / contain no-repeat;
  mask: var(--account-info-mask) center / contain no-repeat;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-status:is([data-tone="success"], [data-tone="partial"]) {
  border-color: rgba(193, 162, 253, 0.32);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-status:is([data-tone="success"], [data-tone="partial"])::before {
  border-radius: 0;
  background: var(--i3-violet-300);
  -webkit-mask-image: var(--account-check-mask);
  mask-image: var(--account-check-mask);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-status[data-tone="danger"] {
  border-color: rgba(255, 84, 112, 0.35);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-status[data-tone="danger"]::before {
  background: #ff8fa2;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-status a {
  color: var(--i3-violet-300);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(193, 162, 253, 0.4);
  text-underline-offset: 3px;
}

body.i3-v3:not(#i3)[data-account-page] .account-text-button[data-state="added"] {
  color: var(--i3-violet-200);
}

body.i3-v3:not(#i3)[data-account-page] .account-text-button[data-state="added"]::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: var(--account-check-mask) center / contain no-repeat;
  mask: var(--account-check-mask) center / contain no-repeat;
}

/* Orders couldn't load: a calm panel with a retry, not a stray sentence. */
body.i3-v3:not(#i3)[data-account-page] .account-orders-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-l);
  background: var(--i3-panel);
}

body.i3-v3:not(#i3)[data-account-page] .account-orders-error strong {
  display: block;
  margin-bottom: 4px;
  color: var(--i3-white);
  font-weight: 600;
}

@media (max-width: 719px) {
  body.i3-v3:not(#i3)[data-account-page] .account-active-order {
    grid-template-columns: minmax(0, 1fr);
  }

  body.i3-v3:not(#i3)[data-account-page] .account-active-media {
    min-height: 0;
    aspect-ratio: 2 / 1;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-active-media::after {
    background: linear-gradient(180deg, transparent 55%, rgba(18, 16, 25, 0.7));
  }

  body.i3-v3:not(#i3)[data-account-page] .account-active-body .account-order-actions .button {
    flex: 1 1 auto;
  }
}

/* Order history: one panel, rows on hairlines. Each row opens its order. */
body.i3-v3:not(#i3)[data-account-page] .account-subhead {
  margin: clamp(32px, 4vw, 44px) 0 14px;
  color: var(--i3-white);
  font-size: var(--i3-size-body);
  font-weight: var(--i3-weight-title);
  letter-spacing: 0;
  line-height: 1.3;
}

body.i3-v3:not(#i3)[data-account-page] .account-orders {
  margin: 0;
  padding: 6px;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-l);
  background: var(--i3-panel);
  list-style: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-active-orders[hidden] + .account-subhead + .account-orders {
  margin-top: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-order {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 18px;
  align-items: center;
  padding: 14px clamp(12px, 2vw, 18px);
  border-radius: calc(var(--i3-radius-l) - 6px);
  transition: background-color var(--i3-dur-fast) var(--i3-ease);
}

/* Hairlines between rows, inset so the hover wash stays a clean rounded tile. */
body.i3-v3:not(#i3)[data-account-page] .account-order + .account-order::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(12px, 2vw, 18px);
  right: clamp(12px, 2vw, 18px);
  height: 1px;
  background: var(--i3-line-dark);
}

body.i3-v3:not(#i3)[data-account-page] .account-order:hover,
body.i3-v3:not(#i3)[data-account-page] .account-order:focus-within {
  background: rgba(217, 198, 255, 0.04);
}

body.i3-v3:not(#i3)[data-account-page] .account-order:is(:hover, :focus-within)::before,
body.i3-v3:not(#i3)[data-account-page] .account-order:is(:hover, :focus-within) + .account-order::before {
  opacity: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-thumbs {
  display: flex;
  align-items: center;
}

body.i3-v3:not(#i3)[data-account-page] .account-thumb + .account-thumb {
  margin-left: -20px;
  box-shadow: -6px 0 12px rgba(7, 6, 13, 0.55);
}

body.i3-v3:not(#i3)[data-account-page] .account-order-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-copy .account-order-top {
  justify-content: flex-start;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-title {
  color: var(--i3-white);
  font-size: var(--i3-size-body);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

/* The title link covers the row; Buy again and the status line sit above it. */
body.i3-v3:not(#i3)[data-account-page] .account-order-title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-title:focus-visible {
  outline: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-title:focus-visible::after {
  outline: 2px solid var(--i3-violet);
  outline-offset: -2px;
  border-radius: calc(var(--i3-radius-l) - 6px);
}

body.i3-v3:not(#i3)[data-account-page] .account-order .account-order-actions {
  grid-column: 2;
  gap: 4px 12px;
  margin: -8px 0 -10px -4px;
}

body.i3-v3:not(#i3)[data-account-page] .account-order .account-order-actions .account-text-button,
body.i3-v3:not(#i3)[data-account-page] .account-order .account-order-status {
  position: relative;
  z-index: 2;
}

body.i3-v3:not(#i3)[data-account-page] .account-order-chevron {
  display: none;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--i3-grey-400);
  transition: transform var(--i3-dur-fast) var(--i3-ease), color var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-order:hover .account-order-chevron {
  color: var(--i3-violet-300);
  transform: translateX(2px);
}

body.i3-v3:not(#i3)[data-account-page] .account-order .account-order-status {
  grid-column: 1 / -1;
}

/* Phones: the chevron sits beside the title line; the top line keeps the full width. */
@media (max-width: 719px) {
  body.i3-v3:not(#i3)[data-account-page] .account-orders {
    padding: 4px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order {
    gap: 10px 14px;
    padding-inline: 10px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order .account-order-top {
    gap: 6px 8px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order .account-thumb {
    width: 48px;
    height: 48px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order-copy > :not(.account-order-top) {
    padding-right: 22px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order-chevron {
    position: absolute;
    top: 44px;
    right: 8px;
    display: block;
  }
}

@media (min-width: 720px) {
  body.i3-v3:not(#i3)[data-account-page] .account-order {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-block: 16px;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order .account-order-actions {
    grid-column: auto;
    justify-content: flex-end;
    margin: 0;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-order-chevron {
    display: block;
  }
}

/* No orders yet: the cart's empty state and its "Current favorites". */
body.i3-v3:not(#i3)[data-account-page] .account-empty {
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-l);
}

body.i3-v3:not(#i3)[data-account-page] .account-favorites {
  margin-top: 28px;
}

/* Account details: two equal-height panels. */
body.i3-v3:not(#i3)[data-account-page] .account-details-grid {
  display: grid;
  gap: var(--account-gap);
  align-items: stretch;
}

@media (min-width: 900px) {
  body.i3-v3:not(#i3)[data-account-page] .account-details-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* While the address form is open the panels size to their own content. */
body.i3-v3:not(#i3)[data-account-page] .account-details-grid:has(.account-address-form:not([hidden])) {
  align-items: start;
}

body.i3-v3:not(#i3)[data-account-page] .account-details-grid > .checkout-panel {
  display: flex;
  flex-direction: column;
}

body.i3-v3:not(#i3)[data-account-page] .account-details-grid .account-form {
  margin-top: 20px;
}

/* No addresses yet: the whole tile is the "Add your first address" button. */
body.i3-v3:not(#i3)[data-account-page] .account-addresses-empty {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  gap: 6px;
  width: 100%;
  min-height: 180px;
  margin-top: 16px;
  padding: 24px 16px;
  border: 1px dashed var(--i3-line-dark-strong);
  border-radius: var(--i3-radius-m);
  background: rgba(13, 11, 20, 0.5);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--i3-dur-fast) var(--i3-ease),
    background-color var(--i3-dur-fast) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-addresses-empty:hover:not(:disabled) {
  border-color: var(--i3-violet-300);
  background: rgba(150, 94, 250, 0.07);
}

body.i3-v3:not(#i3)[data-account-page] .account-addresses-empty:disabled {
  cursor: default;
}

body.i3-v3:not(#i3)[data-account-page] .account-addresses-empty .account-empty-icon {
  transition: box-shadow var(--i3-dur) var(--i3-ease), border-color var(--i3-dur) var(--i3-ease);
}

body.i3-v3:not(#i3)[data-account-page] .account-addresses-empty:is(:hover, :focus-visible):not(:disabled) .account-empty-icon {
  border-color: var(--i3-violet-300);
  box-shadow: 0 0 18px rgba(150, 94, 250, 0.45);
}

body.i3-v3:not(#i3)[data-account-page] .account-addresses-empty:disabled .account-empty-icon {
  color: var(--i3-grey-400);
}

@media (max-width: 899px) {
  body.i3-v3:not(#i3)[data-account-page] .account-addresses-empty {
    min-height: 0;
  }
}

body.i3-v3:not(#i3)[data-account-page] .account-addresses-empty strong {
  color: var(--i3-white);
  font-size: var(--i3-size-body);
  font-weight: 600;
}

body.i3-v3:not(#i3)[data-account-page] .account-empty-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border: 1px solid rgba(193, 162, 253, 0.32);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 94, 250, 0.22), transparent), var(--i3-raised);
  color: var(--i3-violet-200);
}

body.i3-v3:not(#i3)[data-account-page] .account-empty-icon svg {
  width: 22px;
  height: 22px;
}

body.i3-v3:not(#i3)[data-account-page] .account-profile-email {
  display: grid;
  gap: 2px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-m);
  background: var(--i3-night);
}

body.i3-v3:not(#i3)[data-account-page] .account-profile-label {
  color: var(--i3-grey-400);
  font-size: var(--i3-size-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}

body.i3-v3:not(#i3)[data-account-page] .account-profile-email strong {
  color: var(--i3-white);
  font-size: var(--i3-size-body);
  font-weight: 600;
  overflow-wrap: anywhere;
}

body.i3-v3:not(#i3)[data-account-page] .account-profile-email .account-small {
  margin-top: 2px;
}

body.i3-v3:not(#i3)[data-account-page] .account-profile-grid.form-grid {
  margin: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 4px;
}

/* Small inline feedback beside the control that caused it. */
body.i3-v3:not(#i3)[data-account-page] .account-inline-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--i3-grey-200);
  font-size: var(--i3-size-small);
  line-height: 1.45;
  animation: account-step-in var(--i3-dur) var(--i3-ease-out) both;
}

body.i3-v3:not(#i3)[data-account-page] .account-inline-status[data-tone="success"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--i3-violet-300);
  -webkit-mask: var(--account-check-mask) center / contain no-repeat;
  mask: var(--account-check-mask) center / contain no-repeat;
}

body.i3-v3:not(#i3)[data-account-page] .account-inline-status[data-tone="danger"] {
  color: #ff8fa2;
}

body.i3-v3:not(#i3)[data-account-page] .account-panel-head + .account-inline-status {
  margin-top: 12px;
}

body.i3-v3:not(#i3)[data-account-page] .account-danger-confirm .account-inline-status {
  margin-top: 12px;
}

body.i3-v3:not(#i3)[data-account-page] .account-addresses {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-addresses:empty {
  display: none;
}

body.i3-v3:not(#i3)[data-account-page] .account-address {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--i3-line-dark);
  border-radius: var(--i3-radius-m);
  background: var(--i3-night);
}

body.i3-v3:not(#i3)[data-account-page] .account-address[data-default="true"] {
  border-color: rgba(193, 162, 253, 0.36);
}

body.i3-v3:not(#i3)[data-account-page] .account-address-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.i3-v3:not(#i3)[data-account-page] .account-address-head strong {
  color: var(--i3-white);
  font-weight: 650;
}

body.i3-v3:not(#i3)[data-account-page] .account-address address {
  color: var(--i3-grey-300);
  font-size: var(--i3-size-small);
  font-style: normal;
  line-height: 1.55;
}

body.i3-v3:not(#i3)[data-account-page] .account-address-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: -6px 0 -10px;
}

body.i3-v3:not(#i3)[data-account-page] [data-addresses-empty] {
  margin-top: 12px;
}

body.i3-v3:not(#i3)[data-account-page] .account-address-form {
  margin-top: 16px;
  padding: 18px 16px;
  border: 1px solid var(--i3-line-dark-strong);
  border-radius: var(--i3-radius-m);
  background: var(--i3-night);
}

body.i3-v3:not(#i3)[data-account-page] .account-address-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.i3-v3:not(#i3)[data-account-page] .account-address-form legend {
  padding: 0;
  color: var(--i3-white);
  font-size: 16px;
  font-weight: 650;
}

body.i3-v3:not(#i3)[data-account-page] .account-address-form .form-grid {
  margin-top: 14px;
}

/* Delete account: a quiet row under the details, not a third card. */
body.i3-v3:not(#i3)[data-account-page] .account-danger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 24px;
  border-top: 1px solid var(--i3-line-dark);
}

body.i3-v3:not(#i3)[data-account-page] .account-danger-copy {
  display: grid;
  flex: 1 1 360px;
  gap: 6px;
  max-width: 68ch;
}

body.i3-v3:not(#i3)[data-account-page] .account-danger-copy h3 {
  margin: 0;
  color: var(--i3-white);
  font-size: 16px;
  font-weight: 650;
}

body.i3-v3:not(#i3)[data-account-page] .account-danger-confirm {
  flex: 1 1 100%;
  padding: 16px;
  border: 1px solid rgba(255, 84, 112, 0.35);
  border-radius: var(--i3-radius-m);
  background: rgba(255, 84, 112, 0.05);
}

body.i3-v3:not(#i3)[data-account-page] .button-ghost.account-danger-button {
  border-color: rgba(255, 84, 112, 0.5);
  color: #ffb3c0;
}

body.i3-v3:not(#i3)[data-account-page] .button-ghost.account-danger-button:hover:not(:disabled) {
  border-color: var(--i3-signal-red);
  background: rgba(255, 84, 112, 0.1);
}

/* ===== 6. PHONE ============================================================= */
@media (max-width: 480px) {
  body.i3-v3:not(#i3)[data-account-page] .account-thumb {
    width: 56px;
    height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.i3-v3:not(#i3)[data-account-page] .account-loading::before,
  body.i3-v3:not(#i3)[data-account-page] .account-journey-marker::after {
    animation: none;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-active-order,
  body.i3-v3:not(#i3)[data-account-page] .account-link-arrow::after {
    transition: none;
  }

  /* Account and sign-in: no entrances, slides, sheens or zooms. */
  body.i3-v3:not(#i3)[data-account-page] :is(.account-focus-card, .account-signin-step, .account-providers, .status-box, .account-inline-status, .account-order-status, .account-active-order, .account-orders, [data-account-content] > section),
  body.i3-v3:not(#i3)[data-account-page] :is(.account-skeleton-head span, .account-skeleton-media, .account-skeleton-body > span) {
    animation: none;
  }

  body.i3-v3:not(#i3)[data-account-page] :is(.account-active-media img, .account-order, .account-order-chevron, .account-google-button, .account-addresses-empty, .account-addresses-empty .account-empty-icon) {
    transition: none;
  }

  body.i3-v3:not(#i3)[data-account-page] .account-active-order:hover .account-active-media img:not(.account-thumb-mark) {
    transform: none;
  }
}