/* pages/account.css — owns My Avant: the ink tab rail's desktop link style and
   the panel spacing inside each tab. The mobile rail reuses .am-chip--on-ink. */

.am-account-nav__label {
  font-size: var(--am-size-crumb);
  letter-spacing: var(--am-track-crumb);
  text-transform: uppercase;
  color: var(--am-text-on-ink-meta);
  margin-bottom: var(--am-gap-m);
}
/* On mobile the rail is a horizontal strip; the label sits inline with the tabs. */
@media (max-width: 899px) {
  .am-account-nav__label { margin-bottom: 0; margin-right: var(--am-gap-xs); }
}

@media (min-width: 900px) {
  .am-account-nav__tab {
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    text-align: left;
    font-size: var(--am-size-body);
    font-family: var(--am-font-body);
    padding: var(--am-gap-m) 0;
    color: var(--am-text-on-ink-meta);
    text-decoration: none;
  }
  .am-account-nav__tab[aria-current="page"],
  .am-account-nav__tab[aria-current="true"] {
    color: var(--am-text-on-ink);
    border-bottom-color: var(--am-red);
  }
}

.am-account__panel[hidden] { display: none; }
.am-account__title { margin-bottom: 22px; }

.am-account__card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--am-gap-m);
  margin-bottom: var(--am-gap-s);
  flex-wrap: wrap;
}
.am-account__actions { display: flex; gap: var(--am-gap-s); flex-wrap: wrap; font-size: var(--am-size-meta); }

.am-account__section-label {
  font-size: var(--am-size-crumb);
  letter-spacing: var(--am-track-caps);
  text-transform: uppercase;
  color: var(--am-text-meta);
  margin-bottom: var(--am-gap-m);
}
.am-account__section-label--spaced { margin: var(--am-gap-2xl) 0 var(--am-gap-m); }

.am-account__order {
  border: 1px solid var(--am-line-15);
  padding: var(--am-gap-l) 18px;
  margin-bottom: var(--am-gap-s);
  font-size: var(--am-size-small);
}
.am-account__order-head { display: flex; justify-content: space-between; gap: var(--am-gap-l); margin-bottom: 4px; }
.am-account__order-meta { color: var(--am-text-meta); font-size: var(--am-size-meta); }
.am-account__order-actions { margin-top: var(--am-gap-s); display: flex; gap: var(--am-gap-s); flex-wrap: wrap; }

.am-account__cancel[hidden] { display: none; }

.am-account__actions--spaced { margin: 0 0 26px; }
.am-account__scent { font-size: var(--am-size-small); margin-bottom: 26px; padding: var(--am-gap-l) 18px; border: 1px solid var(--am-line-15); }