/*
 * Readable customer scale for the Website account and order surfaces.
 * This file intentionally changes type metrics only; the existing layout,
 * interaction order and responsive structure remain unchanged.
 */

/* Keep the guest form out of the first paint while the HttpOnly session is
   checked. The pending message is replaced by store.js after the first
   server-backed render. */
.shop-main--account.is-auth-pending [data-account-auth],
.shop-main--account.is-auth-pending [data-account-private] {
  visibility: hidden;
}

.shop-auth-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px 16px;
  color: #526a7d;
  background: #f7fafc;
  border: 1px solid #dce7ee;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.shop-auth-pending::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 2px solid #b9cbd8;
  border-top-color: #07367e;
  border-radius: 50%;
  animation: shop-auth-pending-spin .8s linear infinite;
}

.shop-auth-pending[hidden] {
  display: none !important;
}

@keyframes shop-auth-pending-spin {
  to { transform: rotate(360deg); }
}

/* Shared page copy */
.shop-body .shop-main--account,
.shop-body .shop-main--orders {
  font-size: 16px;
  line-height: 1.6;
}

.shop-body .shop-main--account .shop-breadcrumbs,
.shop-body .shop-main--orders .shop-breadcrumbs {
  font-size: 13px;
  line-height: 1.5;
}

.shop-body .shop-main--account .shop-page-heading h1 {
  font-size: clamp(34px, 4vw, 46px);
}

.shop-body .shop-main--orders .shop-page-heading h1 {
  font-size: clamp(38px, 4vw, 50px);
}

.shop-body .shop-main--account .shop-page-heading p,
.shop-body .shop-main--orders .shop-page-heading > p {
  font-size: 16px;
  line-height: 1.6;
}

.shop-body .shop-main--account .shop-visually-live,
.shop-body .shop-main--orders .shop-visually-live {
  font-size: 14px;
  line-height: 1.55;
}

/* Account / authentication */
.shop-body .shop-main--account .shop-auth-intro__brand small {
  font-size: 11px;
}

.shop-body .shop-main--account .shop-auth-intro__brand strong {
  font-size: 20px;
}

.shop-body .shop-main--account .shop-auth-intro p {
  font-size: 15px;
  line-height: 1.65;
}

.shop-body .shop-main--account .shop-auth-tabs button {
  font-size: 15px;
}

.shop-body .shop-main--account .shop-auth-view > header h2,
.shop-body .shop-main--account .shop-recovery h2 {
  font-size: 24px;
}

.shop-body .shop-main--account .shop-auth-view > header p,
.shop-body .shop-main--account .shop-recovery > p {
  font-size: 15px;
  line-height: 1.6;
}

.shop-body .shop-main--account .shop-field > span:first-child {
  font-size: 15px;
}

.shop-body .shop-main--account .shop-field > small {
  font-size: 13px;
  line-height: 1.55;
}

.shop-body .shop-main--account .shop-field input:not([type="checkbox"]):not([type="radio"]),
.shop-body .shop-main--account .shop-field select,
.shop-body .shop-main--account .shop-field textarea {
  font-size: 16px;
  line-height: 1.5;
}

.shop-body .shop-main--account .shop-auth-helper,
.shop-body .shop-main--account .shop-auth-helper > button,
.shop-body .shop-main--account .shop-password-field button {
  font-size: 14px;
  line-height: 1.5;
}

.shop-body .shop-main--account .shop-auth-zalo-note,
.shop-body .shop-main--account .shop-auth-legal {
  font-size: 13px;
  line-height: 1.6;
}

.shop-body .shop-main--account .shop-member-card__avatar {
  object-fit: contain;
}

.shop-body .shop-main--account .shop-member-card__avatar.is-zalo-avatar {
  object-fit: cover;
  padding: 0;
  background: #eef5fb;
  border-radius: 50%;
}

.shop-body .shop-main--account .shop-member-card small {
  font-size: 11px;
}

.shop-body .shop-main--account .shop-member-card strong {
  font-size: 24px;
}

.shop-body .shop-main--account .shop-member-card span {
  font-size: 16px;
}

.shop-body .shop-main--account .shop-member-card em {
  font-size: 12px;
}

.shop-body .shop-main--account [data-account-signed-in] > button {
  font-size: 15px;
}

.shop-body .shop-main--account .shop-panel__heading h2 {
  font-size: 21px;
}

.shop-body .shop-main--account .shop-account-overview strong {
  font-size: 28px;
}

.shop-body .shop-main--account .shop-account-overview span {
  font-size: 14px;
}

.shop-body .shop-main--account .shop-account-actions nav strong {
  font-size: 15px;
}

.shop-body .shop-main--account .shop-account-actions nav span {
  font-size: 13px;
  line-height: 1.5;
}

.shop-body .shop-main--account .shop-address-card__heading strong {
  font-size: 14px;
}

.shop-body .shop-main--account .shop-address-card address {
  font-size: 14px;
  line-height: 1.55;
}

.shop-body .shop-main--account .shop-address-card address span:first-child {
  font-size: 15px;
}

.shop-body .shop-main--account .shop-address-card__actions button {
  font-size: 14px;
}

/* Orders / status tracking */
.shop-body .shop-main--orders .shop-kicker {
  font-size: 12px;
}

.shop-body .shop-main--orders .shop-demo-note,
.shop-body .shop-main--orders .shop-orders-refresh {
  font-size: 14px;
  line-height: 1.55;
}

.shop-body .shop-main--orders .shop-orders-refresh button {
  font-size: 14px;
}

.shop-body .shop-main--orders .commerce-filter-bar button {
  font-size: 14px;
}

.shop-body .shop-main--orders .shop-order-card__code {
  font-size: 19px;
}

.shop-body .shop-main--orders .shop-order-card time {
  font-size: 14px;
}

.shop-body .shop-main--orders .shop-order-card__items {
  font-size: 15px;
  line-height: 1.55;
}

.shop-body .shop-main--orders .shop-order-card__footer {
  font-size: 14px;
}

.shop-body .shop-main--orders .shop-order-card__footer strong {
  font-size: 20px;
}

.shop-body .shop-main--orders .commerce-status,
.shop-body .shop-main--orders .commerce-tag {
  font-size: 12px;
}

.shop-body .shop-main--orders .shop-cancellation-notice,
.shop-body .shop-main--orders .shop-crm-sync {
  font-size: 14px;
  line-height: 1.55;
}

.shop-body .shop-main--orders .shop-cancellation-notice strong,
.shop-body .shop-main--orders .shop-crm-sync strong {
  font-size: 15px;
}

.shop-body .shop-main--orders .shop-crm-sync small {
  font-size: 13px;
}

.shop-body .shop-main--orders .shop-empty-state h2 {
  font-size: 26px;
}

.shop-body .shop-main--orders .shop-empty-state p {
  font-size: 16px;
}

.shop-body .shop-main--orders .shop-order-detail__title h1 {
  font-size: 36px;
}

.shop-body .shop-main--orders .shop-order-detail__title time,
.shop-body .shop-main--orders .shop-back-link,
.shop-body .shop-main--orders .shop-order-line span,
.shop-body .shop-main--orders .shop-order-timeline time,
.shop-body .shop-main--orders .shop-order-timeline p,
.shop-body .shop-main--orders .shop-address,
.shop-body .shop-main--orders .shop-fulfillment > div,
.shop-body .shop-main--orders .shop-definition-list > div {
  font-size: 14px;
  line-height: 1.55;
}

.shop-body .shop-main--orders .shop-panel__section h2 {
  font-size: 21px;
}

.shop-body .shop-main--orders .shop-order-line b {
  font-size: 15px;
}

@media (max-width: 700px) {
  .shop-body .shop-main--account .shop-page-heading h1 {
    font-size: 30px;
  }

  .shop-body .shop-main--orders .shop-page-heading h1 {
    font-size: 34px;
  }

  .shop-body .shop-main--account .shop-page-heading p,
  .shop-body .shop-main--orders .shop-page-heading > p {
    font-size: 15px;
  }

  .shop-body .shop-main--account .shop-auth-intro p,
  .shop-body .shop-main--account .shop-auth-view > header p,
  .shop-body .shop-main--account .shop-recovery > p {
    font-size: 14px;
  }

  .shop-body .shop-main--account .shop-auth-tabs button,
  .shop-body .shop-main--account .shop-field > span:first-child {
    font-size: 14px;
  }

  .shop-body .shop-main--account .shop-field input:not([type="checkbox"]):not([type="radio"]),
  .shop-body .shop-main--account .shop-field select,
  .shop-body .shop-main--account .shop-field textarea {
    font-size: 16px;
  }

  .shop-body .shop-main--account .shop-member-card strong {
    font-size: 21px;
  }

  .shop-body .shop-main--account .shop-member-card span {
    font-size: 15px;
  }

  .shop-body .shop-main--account .shop-account-overview strong {
    font-size: 23px;
  }

  .shop-body .shop-main--account .shop-account-overview span,
  .shop-body .shop-main--account .shop-account-actions nav span,
  .shop-body .shop-main--account .shop-address-card address,
  .shop-body .shop-main--account .shop-address-card__actions button {
    font-size: 13px;
  }

  .shop-body .shop-main--orders .shop-order-card__code {
    font-size: 18px;
  }

  .shop-body .shop-main--orders .shop-order-card__items,
  .shop-body .shop-main--orders .shop-order-card__footer {
    font-size: 14px;
  }

  .shop-body .shop-main--orders .shop-order-card__footer strong {
    font-size: 19px;
  }

  .shop-body .shop-main--orders .shop-order-detail__title h1 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-auth-pending::before { animation: none; }
}