/* The customer account card inherits Spectra's typography and graphite palette. */
.customer-account-page { padding-block:34px 80px}
.customer-account-intro { max-width:560px; margin:0 auto 26px; text-align:center}
.customer-account-intro .eyebrow { margin-block:0 12px; font-size:12px; color:#687078}
.customer-account-intro h1 { margin:0 0 12px; color:#2d3136; font-size:clamp(32px,4.4vw,56px); font-weight:700; line-height:1.35}
.customer-account-intro > p:last-child { margin:0; font-size:14px; color:#656b70; line-height:1.9}
.customer-account {
  --account-ink:var(--ink);
  --account-muted:var(--ink-2);
  --account-line:var(--hairline);
  width:min(100%, 560px);
  margin-inline:auto;
  padding:clamp(22px, 4vw, 38px);
  color:var(--account-ink);
  background:#fff;
  border:1px solid var(--account-line);
  border-radius:var(--r-card);
  box-shadow:none;
  font-family:inherit}
.customer-account *, .customer-account *::before, .customer-account *::after { box-sizing:border-box}
.customer-account [hidden] { display:none!important}
.customer-account h2 { margin:0 0 12px; color:var(--account-ink); font-size:clamp(28px,3vw,40px); font-weight:700; line-height:1.45; letter-spacing:0}
.customer-account[dir="rtl"] h2 { letter-spacing:0}
.customer-account__description { margin:0 0 26px; color:var(--account-muted); font-size:14px; line-height:1.9}
.customer-account__methods, .customer-account__form { display:grid; gap:14px}
.customer-account__button { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:50px; padding:12px 16px; color:var(--account-ink); background:#fff; border:1px solid #bfc5ca; border-radius:var(--r-pill); font:inherit; font-size:14px; line-height:1.6; font-weight:400; text-align:center; cursor:pointer; transition:background-color .15s, border-color .15s}
.customer-account__button:hover:not(:disabled) { border-color:#707a82; background:#f1f3f4}
.customer-account__button:disabled { color:#7b8186; background:#f2f3f4; border-color:#d9dde0; cursor:not-allowed}
.customer-account.is-busy .customer-account__button:disabled { cursor:wait}
.customer-account__button--primary { background:#33383e; border-color:#33383e; color:#fff}
.customer-account__button--primary:hover:not(:disabled) { background:#1e2328; border-color:#1e2328}
.customer-account__button--quiet { min-height:44px; border-color:transparent; background:transparent; padding:10px 6px; margin-block-start:10px; color:#555e65; font-size:14px; font-weight:400; text-decoration:underline; text-underline-offset:4px}
.customer-account__button--quiet:hover:not(:disabled) { border-color:transparent; background:#f5f6f6}
.customer-account__method { justify-content:flex-start; text-align:start}
.customer-account__method-icon { flex:0 0 27px; width:27px; height:27px; display:grid; place-items:center; color:#4d5962; font-family:Arial,sans-serif; font-size:21px; font-weight:400}
.customer-account__method-icon img { display:block; width:20px; height:20px; object-fit:contain}
.customer-account__notice { margin:24px 0 0; padding:15px 17px; background:#f0f2f3; border:1px solid #d8dde1; border-inline-start:3px solid #6d7780; border-radius:var(--r-tool); color:#535c64; font-size:14px; line-height:1.95}
.customer-account__hint { margin:19px 0 0; color:var(--account-muted); font-size:12px; line-height:1.9}
.customer-account__field { display:flex; flex-direction:column; gap:7px; min-width:0}
.customer-account__field label { font-size:14px; font-weight:400; color:#414a51; line-height:1.8}
.customer-account__field input { width:100%; min-width:0; min-height:50px; padding:12px 13px; border:1px solid #bac2c8; background:#fff; border-radius:var(--r-pill); color:var(--account-ink); font:inherit; font-size:17px; line-height:1.5; text-align:start}
.customer-account__field input:disabled { background:#f6f7f7; color:#687078}
.customer-account__field input::placeholder { color:#8b9298}
.customer-account__field .customer-account__hint { margin:0 0 3px}
.customer-account__destination { display:block; color:#424b52; background:#f4f6f6; border-radius:var(--r-tool); padding:12px 14px; margin-block:0 22px; font-size:14px; line-height:1.6; overflow-wrap:anywhere; text-align:center}
.customer-account__identity { display:grid; gap:8px; padding:18px; margin-block:24px 16px; background:#f4f6f6; border:1px solid #e0e4e6; border-radius:var(--r-tool); font-size:17px; line-height:1.7; overflow-wrap:anywhere}
.customer-account__identity strong { font-size:17px; font-weight:400}
.customer-account__identity bdi { color:#58626a; font-size:14px}
.customer-account__status { margin:22px 0 0; padding:13px 15px; border:1px solid #c7d6ce; border-radius:var(--r-tool); background:#f2f7f4; color:#3c5d4c; font-size:14px; line-height:1.9; overflow-wrap:anywhere}
.customer-account__status--error { background:#fff6ed; color:#80542a; border-color:#e0cbb3}
.customer-account__guest { display:block; width:fit-content; max-width:100%; margin:28px auto 0; padding:10px 6px; color:#525c64; font-size:14px; line-height:1.7; text-align:center; text-decoration:underline; text-underline-offset:4px}
.customer-account__captcha { display:flex; justify-content:center; max-width:100%; min-height:0}
.customer-account__captcha:empty { display:none}
.customer-account :is(button, input, a):focus-visible { outline:3px solid #587a8f; outline-offset:3px}
@media (max-width: 420px) {
  .customer-account-page { padding-block:24px 50px}
  .customer-account-intro { margin-block-end:22px}
  .customer-account-intro > p:last-child { font-size:14px}
  .customer-account { padding:20px 15px; border-radius:var(--r-card)}
  .customer-account__description { margin-block-end:22px}
  .customer-account__button { padding-inline:12px; gap:10px; font-size:14px}
  .customer-account__captcha { justify-content:flex-start}}
@media (prefers-reduced-motion: reduce) { .customer-account__button { transition:none}}