/* ==========================================================================
   Account area: profile, and the orders/wishlist pages that follow it.

   Loads after base.css, shop.css (for the masthead and footer) and auth.css
   (for the .field, .btn and .alert vocabulary), so the forms here are the
   same forms as sign-in rather than a second dialect of them.
   ========================================================================== */

/* Hidden page scrollbar and the sideways-scroll guard both live in base.css. */

/* auth.css sizes its fields for a compact sign-in card, down at 0.625rem for
   a label. These pages read at storefront scale instead, so the inherited
   type comes up a step. Scoped to .account-page, so sign-in is untouched. */
.account-page .field__label { font-size: 0.72rem; }
.account-page .field__input { font-size: 1rem; }
.account-page .field__hint,
.account-page .field__error { font-size: 0.8rem; }
.account-page .field__optional,
.account-page .field__toggle { font-size: 0.66rem; }
.account-page .btn { font-size: 0.75rem; letter-spacing: 0.19em; }

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

.account-page { padding: 52px 0 92px; }

.account-head {
  margin-bottom: 34px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.account-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  line-height: 1.12;
  color: var(--maroon);
  margin: 8px 0 0;
}

.account-lede {
  margin: 9px 0 0;
  max-width: 52ch;
  font-weight: 300;
  color: var(--ink-muted);
}

.account-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 54px;
  align-items: start;
}

/* An <input> reports an intrinsic width of about twenty characters, so the
   field and its wrapper have to be allowed to shrink too, not just the track
   they sit in (base.css handles that part). */
.account-page .field,
.account-page .field__wrap,
.account-page .field__input { min-width: 0; max-width: 100%; }

/* --------------------------------------------------------------------------
   Rail
   -------------------------------------------------------------------------- */

/* Clears the sticky masthead, which settles at roughly 128px once scrolled. */
.rail { position: sticky; top: 150px; }

.rail__list { list-style: none; margin: 0; padding: 0; }

.rail__link {
  display: block;
  padding: 11px 0 11px 15px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-left: 1px solid var(--border);
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.rail__link:hover { color: var(--maroon); border-left-color: var(--border-strong); }

/* The gold rule is the only thing marking the current page, which is enough
   and keeps the rail from turning into a set of buttons. */
.rail__link.is-active {
  color: var(--maroon);
  border-left: 1px solid var(--gold);
}

.rail__link--danger { color: var(--ink-faint); }
.rail__link--danger:hover { color: var(--danger); border-left-color: var(--danger); }

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 32px 34px 28px;
}
.panel + .panel { margin-top: 24px; }

.panel__head {
  margin-bottom: 26px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--border);
}

.panel__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--maroon);
  margin: 7px 0 0;
}

.panel__note {
  margin: 7px 0 0;
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 56ch;
}

/* Two columns for the short fields; long ones span the row. */
.fieldgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
.fieldgrid .field--wide { grid-column: 1 / -1; }

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Reserves its line so the panel does not jump when a message appears. */
.panel__status {
  min-height: 18px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--ink-faint);
}
.panel__status.is-ok { color: var(--success); }
.panel__status.is-error { color: var(--danger); }

/* Inline width; auth.css sets .btn to full width for its stacked forms. */
.btn--inline {
  width: auto;
  min-width: 168px;
  padding: 13px 30px;
}

/* --------------------------------------------------------------------------
   Searchable dropdown (city, state)
   -------------------------------------------------------------------------- */

/* Lifts the open field over the panel that follows it, so the list is not
   painted under the next section. */
.account-page .field:focus-within { position: relative; z-index: 20; }

.cb {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 30;
  /* Roughly nine rows, so a long list reads as scrollable at a glance
     rather than looking like it ends. */
  max-height: 290px;
  overflow-y: auto;
  /* The page must not start scrolling once the list hits its end. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  /* Close and soft. --shadow-lg is built for the hero and reads as a slab
     under something this small. */
  box-shadow: 0 10px 28px rgba(42, 29, 24, 0.13),
              0 1px 2px rgba(42, 29, 24, 0.06);
  animation: cb-in 0.16s var(--ease) both;
}
.cb[hidden] { display: none; }

@keyframes cb-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* A hairline thumb of its own. base.css sets a universal 8px beige bar,
   which is far too heavy inside a panel this size. */
.cb {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.cb::-webkit-scrollbar { width: 4px; }
.cb::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.cb::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 2px;
}
.cb::-webkit-scrollbar-thumb:hover { background: var(--maroon-soft); }

.cb__item {
  position: relative;
  padding: 10px 16px 10px 18px;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}

/* The gold marker is the same flourish the rail uses, so a selected row here
   reads as part of the same system. */
.cb__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform 0.14s var(--ease);
}

/* Hover and keyboard focus look identical, so moving between mouse and
   arrow keys does not change what "the current one" looks like. */
.cb__item:hover,
.cb__item.is-active {
  background: var(--cream);
  color: var(--maroon);
}
.cb__item:hover::before,
.cb__item.is-active::before { transform: scaleY(1); }

/* The matched run, so it is obvious why a row is in the list. */
.cb__hit {
  background: none;
  color: var(--maroon);
  font-weight: 500;
}

.cb__empty {
  padding: 14px 18px;
  font-size: 0.87rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Read-only rows
   -------------------------------------------------------------------------- */

/* Email is shown but not editable: it is a verified login identifier, so it
   has to change through an OTP round trip rather than a text box. */
.readonly {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 0 8px;
  border-bottom: 1px solid var(--border);
}

.readonly__value {
  font-size: 1rem;
  color: var(--ink-muted);
  word-break: break-all;
}

.badge {
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--success);
}
.badge--pending { color: var(--gold); }

/* --------------------------------------------------------------------------
   Password
   -------------------------------------------------------------------------- */

/* The reset runs on the OTP endpoints the sign-in pages already use, so it
   arrives in two steps: request a code, then set the new password. */
.pwstep[hidden] { display: none; }

.pw__sent {
  margin: 0 0 22px;
  padding: 11px 14px;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--success);
  background: var(--success-bg);
  border-radius: 2px;
}

.pw__back {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.pw__back:hover { color: var(--maroon); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .account-page { padding: 34px 0 68px; }

  .account-layout { grid-template-columns: 1fr; gap: 26px; }

  /* The rail becomes a scrollable tab strip rather than stacking four
     full-width rows above the content. */
  .rail { position: static; }
  .rail__list {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .rail__list::-webkit-scrollbar { display: none; }
  .rail__list li { flex: 0 0 auto; }

  .rail__link {
    width: auto;
    padding: 10px 16px;
    border-left: 0;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
  }
  .rail__link:hover { border-left: 0; }
  .rail__link.is-active {
    border-left: 0;
    border-bottom: 1px solid var(--gold);
  }
  .rail__link--danger:hover { border-left: 0; border-bottom-color: var(--danger); }
}

@media (max-width: 620px) {
  .panel { padding: 24px 20px 22px; }
  .panel__title { font-size: 1.34rem; }
  .fieldgrid { grid-template-columns: 1fr; }

  .panel__foot { flex-direction: column; align-items: stretch; }
  /* min-width would otherwise stop the button shrinking on a narrow phone. */
  .btn--inline { width: 100%; min-width: 0; }
  .panel__status { order: 2; text-align: center; }

  /* The label row is a flex pair; let the long half wrap rather than push. */
  .account-page .field__label { flex-wrap: wrap; gap: 2px 10px; }

  /* Rows sized for a thumb rather than a cursor: roughly 46px each. */
  .cb { max-height: 262px; }
  .cb__item { padding: 13px 16px 13px 18px; font-size: 1rem; }
  .cb::-webkit-scrollbar { width: 3px; }
}

@media (max-width: 400px) {
  .panel { padding: 20px 15px 18px; }
  .account-title { font-size: 1.95rem; }
  .rail__link { padding: 10px 12px; }
}