/* ==========================================================================
   MY ACCOUNT — bespoke portal (editorial · luxury · minimal · mobile-first).
   Loaded only on account pages. Consumes design tokens.
   The default account/address/login forms are restyled here (not overridden)
   so WooCommerce's nonces & handlers stay intact.
   ========================================================================== */

/* ===== WELCOME + LAYOUT =============================================== */
.ps-account__wrap { max-width: var(--container); }
.ps-account__welcome { margin-bottom: var(--space-2xl); }
.ps-account__hello { font-size: var(--fs-h1); letter-spacing: var(--tracking-display); margin: var(--space-xs) 0; }
.ps-account__layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) {
  .ps-account__layout { grid-template-columns: 248px 1fr; gap: var(--space-3xl); }
  .ps-anav { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ===== NAVIGATION (no default sidebar) =============================== */
.ps-anav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ps-anav__list::-webkit-scrollbar { display: none; }
.ps-anav__item { flex: none; }
.ps-anav__link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); color: var(--text-soft); font-weight: var(--weight-medium); font-size: var(--fs-sm); white-space: nowrap; border: 1px solid transparent; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.ps-anav__link:hover { background: rgba(10,37,64,0.04); color: var(--c-ink); }
.ps-anav__icon { width: 20px; height: 20px; display: grid; place-items: center; color: var(--c-brand-300); flex: none; }
.ps-anav__icon svg { width: 20px; height: 20px; }
.woocommerce-MyAccount-navigation-link.is-active .ps-anav__link { background: var(--c-brand-tint); color: var(--c-brand); border-color: rgba(15,76,129,0.14); }
.woocommerce-MyAccount-navigation-link.is-active .ps-anav__icon { color: var(--c-brand); }

@media (min-width: 900px) {
  .ps-anav__list { flex-direction: column; gap: 2px; }
  .ps-anav__link { padding: var(--space-sm) var(--space-md); }
}

/* ===== DASHBOARD ===================================================== */
.ps-dash { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.ps-dash__sec { display: flex; flex-direction: column; gap: var(--space-lg); }
.ps-dash__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.ps-dash__h { font-size: var(--fs-h3); font-family: var(--font-display); }
.ps-dash__grid { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 760px) { .ps-dash__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Quick reorder hero */
.ps-dash__hero { background: var(--c-sacred); color: var(--c-on-sacred); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.ps-dash__hero .overline { color: var(--c-gold-soft); }
.ps-dash__hero-title { color: #fff; font-family: var(--font-display); font-size: var(--fs-h3); margin: var(--space-xs) 0; }
.ps-dash__hero .muted { color: var(--c-on-sacred-mut); }

/* Order cards */
.ps-ordlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.ps-ordcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); display: grid; gap: var(--space-sm) var(--space-lg); align-items: center;
  grid-template-columns: 1fr auto; grid-template-areas: "main status" "total total" "actions actions"; }
.ps-ordcard__main { grid-area: main; display: flex; flex-direction: column; }
.ps-ordcard__no { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--weight-semibold); }
.ps-ordcard__date { font-size: var(--fs-meta); }
.ps-ordcard__total { grid-area: total; font-weight: var(--weight-semibold); }
.ps-ordcard__count { grid-area: total; justify-self: end; font-size: var(--fs-meta); }
.ps-ordcard__actions { grid-area: actions; display: flex; gap: var(--space-xs); flex-wrap: wrap; padding-top: var(--space-sm); border-top: 1px solid var(--border); }
@media (min-width: 620px) {
  .ps-ordcard { grid-template-columns: 1.4fr auto auto auto; grid-template-areas: "main status total actions"; }
  .ps-ordcard__count { display: none; }
  .ps-ordcard__actions { border-top: 0; padding-top: 0; justify-content: flex-end; }
}
.ps-ordlist--full .ps-ordcard { grid-template-columns: 1fr auto; grid-template-areas: "main status" "total total" "actions actions"; }
@media (min-width: 700px) {
  .ps-ordlist--full .ps-ordcard { grid-template-columns: 1fr auto auto; grid-template-areas: "main status actions" "total status actions"; align-items: center; }
}

/* Status pill */
.ps-status { grid-area: status; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--fs-meta); font-weight: var(--weight-medium); background: var(--c-paper-2); color: var(--text-soft); white-space: nowrap; }
.ps-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ps-status--processing { background: rgba(29,111,216,0.14); color: var(--c-gold-ink); }
.ps-status--completed { background: var(--c-brand-tint); color: var(--c-brand); }
.ps-status--on-hold { background: rgba(178,59,59,0.10); color: var(--c-danger); }
.ps-status--pending, .ps-status--failed, .ps-status--cancelled { background: rgba(10,37,64,0.06); color: var(--text-muted); }

/* Addresses + details */
.ps-addr { display: grid; gap: var(--space-md); }
.ps-addr__card, .ps-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.ps-addr__card { display: flex; flex-direction: column; gap: var(--space-sm); }
.ps-addr__card address { font-style: normal; color: var(--text-soft); line-height: var(--lh-base); }
.ps-addr__add { color: var(--c-brand); font-size: var(--fs-sm); font-weight: var(--weight-medium); }
@media (min-width: 480px) { .ps-addr { grid-template-columns: 1fr 1fr; } }
.ps-detail { display: flex; flex-direction: column; }
.ps-detail__row { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.ps-detail__row:last-child { border-bottom: 0; }
.ps-detail__k { font-size: var(--fs-meta); letter-spacing: 0.02em; }

/* Support block */
.ps-dash__support { background: var(--c-brand); color: var(--c-paper); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: var(--space-lg); align-items: center; }
.ps-dash__support-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; margin-bottom: var(--space-xs); }
.ps-dash__support-icon svg { width: 26px; height: 26px; }
.ps-dash__support-title { color: #fff; font-family: var(--font-display); font-size: var(--fs-h3); }
.ps-dash__support-copy p { color: rgba(234,244,255,0.82); }
.ps-dash__contacts { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.ps-dash__contacts li { display: inline-flex; align-items: center; gap: var(--space-xs); color: #fff; }
.ps-dash__contacts svg { width: 18px; height: 18px; color: var(--c-gold-soft); }
.ps-dash__contacts a:hover { color: var(--c-gold-soft); }
.ps-dash__wa { background: #fff !important; color: var(--c-brand) !important; border: 1px solid #fff !important; justify-self: start; }
.ps-dash__wa svg { width: 20px; height: 20px; }
@media (min-width: 820px) { .ps-dash__support { grid-template-columns: 1fr auto; } .ps-dash__wa { justify-self: end; } }

.ps-dash__empty { background: var(--surface); border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg); padding: var(--space-2xl); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.ps-dash__empty .ps-empty__mark { width: 60px; height: 60px; margin: 0; }

/* Pagination */
.ps-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin-top: var(--space-xl); }

/* ===== STYLED DEFAULT FORMS (account details / addresses / login) ====
   We don't override these templates; we restyle WC's markup so it stops
   looking default while keeping its fields, nonces and handlers intact. */
.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content .ps-dash__h { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--space-lg); }
.woocommerce-EditAccountForm, .woocommerce-address-fields, .woocommerce form.login, .woocommerce form.register, .woocommerce form.edit-account {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2rem); max-width: 640px;
}
.woocommerce-MyAccount-content .form-row { display: flex; flex-direction: column; margin: 0 0 var(--space-md); }
.woocommerce-MyAccount-content label { font-size: var(--fs-sm); font-weight: var(--weight-medium); color: var(--text-soft); margin-bottom: 6px; }
.woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox { flex-direction: row; align-items: center; gap: var(--space-xs); }
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
  width: 100%; min-height: 52px; font-size: 16px; padding: 0 var(--space-md);
  background: var(--bg); border: 1px solid var(--c-line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.woocommerce-MyAccount-content input:focus, .woocommerce-MyAccount-content select:focus { border-color: var(--c-brand-300); box-shadow: var(--ring); outline: none; }
.woocommerce-MyAccount-content fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg); margin-top: var(--space-lg); }
.woocommerce-MyAccount-content fieldset legend { font-family: var(--font-display); font-weight: var(--weight-semibold); padding: 0 var(--space-xs); }
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h);
  padding: 0 var(--space-lg); background: var(--c-brand); color: #fff; border: 1px solid var(--c-brand);
  border-radius: var(--radius-sm); font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--fs-sm);
  text-shadow: none; cursor: pointer; transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.woocommerce-MyAccount-content .button:hover, .woocommerce-MyAccount-content button[type="submit"]:hover { background: var(--c-brand-700); transform: translateY(-1px); }
.woocommerce-MyAccount-content .woocommerce-Address { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-family: var(--font-display); font-size: var(--fs-lg); }
.woocommerce-MyAccount-content address { font-style: normal; color: var(--text-soft); line-height: var(--lh-base); }

/* Login / register (logged-out account page) */
.woocommerce .col2-set { display: grid; gap: var(--space-lg); }
@media (min-width: 760px) { .woocommerce .col2-set { grid-template-columns: 1fr 1fr; } }
.woocommerce form.login h2, .woocommerce form.register h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: var(--space-md); }

/* Notices in account area */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error { border-radius: var(--radius-md); }
.woocommerce-MyAccount-content .woocommerce-Message--info { background: var(--c-brand-tint); border-left: 3px solid var(--c-brand); }