/*
 * Espace pro — the logged-in customer area.
 *
 * WooCommerce's account markup arrives as a nav and a content div side by
 * side. Everything here is layout and tone; the structure is Woo's, so a
 * plugin adding an endpoint gets styled without anyone editing this file.
 */

/* --- Two columns, one on a phone ---------------------------------------- */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--eld-space-6);
  padding: var(--eld-space-5) 0 var(--eld-space-7);
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

/*
 * WooCommerce clearfixes this container with ::before and ::after. In a float
 * layout they are invisible; in a grid each becomes a cell — so the navigation
 * landed in column two and the orders in column one, which is exactly the
 * fault already documented on ul.products in shop.css.
 *
 * !important for the same reason it is used there: Woo's selector is more
 * specific, and matching it would mean pinning a selector that changes between
 * releases.
 */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
  content: none !important;
  display: none !important;
}

/* The logged-out state is a single centred form, not a two-column shell. */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
}

/* --- Navigation --------------------------------------------------------- */

.eld-account__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--eld-border);
  border-radius: var(--eld-radius);
  overflow: hidden;
}

.eld-account__nav li + li { border-top: 1px solid var(--eld-border); }

.eld-account__nav a {
  display: block;
  padding: 0.875rem 1rem;
  color: var(--eld-ink-2);
  font-size: var(--eld-text-small);
  font-weight: 500;
  transition: background-color var(--eld-transition), color var(--eld-transition);
}

.eld-account__nav a:hover {
  background-color: var(--eld-bg-2);
  color: var(--eld-accent);
}

/*
 * The current page is marked by a rule down the left edge rather than a fill.
 * A filled row next to a bordered list reads as a button someone forgot to
 * finish; a rule reads as position.
 */
.eld-account__nav .is-active > a {
  background-color: var(--eld-bg-2);
  box-shadow: inset 3px 0 0 var(--eld-accent);
  color: var(--eld-ink);
}

.eld-account__nav .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--eld-ink-3);
}

/* --- Content ------------------------------------------------------------ */

.woocommerce-MyAccount-content { min-width: 0; }

.woocommerce-MyAccount-content > h2,
.eld-dash__title {
  margin: 0 0 var(--eld-space-3);
  font-family: var(--eld-font-body);
  font-size: var(--eld-text-micro);
  font-weight: 500;
  letter-spacing: var(--eld-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eld-ink-3);
}

/* --- Dashboard ---------------------------------------------------------- */

.eld-dash__hello {
  margin: 0 0 var(--eld-space-5);
  font-size: 1.125rem;
  color: var(--eld-ink);
}

.eld-dash__last,
.eld-dash__shortcut {
  padding: var(--eld-space-5);
  border: 1px solid var(--eld-border);
  border-radius: var(--eld-radius);
}

.eld-dash__shortcut { margin-top: var(--eld-space-5); }

.eld-dash__meta {
  margin: 0 0 var(--eld-space-3);
  font-size: var(--eld-text-small);
  color: var(--eld-ink-2);
}

.eld-dash__sep { color: var(--eld-ink-3); margin: 0 0.375rem; }

.eld-dash__refs,
.eld-order-card__refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  margin: 0 0 var(--eld-space-4);
}

.eld-dash__more,
.eld-order-card__more {
  align-self: center;
  font-size: var(--eld-text-micro);
  color: var(--eld-ink-3);
}

.eld-dash__actions,
.eld-account__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eld-space-3);
  margin: 0;
}

.eld-dash__shortcut p { color: var(--eld-ink-2); }

/* --- Order cards -------------------------------------------------------- */

.eld-orders {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--eld-space-4);
}

.eld-order-card {
  padding: var(--eld-space-5);
  border: 1px solid var(--eld-border);
  border-radius: var(--eld-radius);
}

.eld-order-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.875rem;
  margin-bottom: var(--eld-space-3);
}

.eld-order-card__number {
  font-weight: 600;
  color: var(--eld-ink);
}

.eld-order-card__number:hover { color: var(--eld-accent); }

.eld-order-card__date {
  font-size: var(--eld-text-small);
  color: var(--eld-ink-3);
}

/*
 * The status is a word, not a coloured pill. Six WooCommerce statuses in six
 * colours would be a traffic light nobody taught the customer to read, and
 * "En cours" already says it.
 */
.eld-order-card__status {
  margin-left: auto;
  font-size: var(--eld-text-micro);
  font-weight: 500;
  letter-spacing: var(--eld-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eld-ink-3);
}

.eld-order-card__status--completed { color: var(--eld-stock-in); }
.eld-order-card__status--cancelled,
.eld-order-card__status--failed { color: var(--eld-stock-out); }

.eld-order-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eld-space-4);
  padding-top: var(--eld-space-4);
  border-top: 1px solid var(--eld-border);
}

.eld-order-card__total {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--eld-ink);
}

.eld-order-card__items {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--eld-text-micro);
  font-weight: 400;
  color: var(--eld-ink-3);
}

.eld-order-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eld-space-3);
}

/*
 * WooCommerce prints the reorder button from its own template with class
 * "order-again"; it inherits .eld-btn from base.css, so it only needs to be
 * told it is the primary action here.
 */
.eld-order-card__actions .order-again { order: -1; }

.eld-orders__pagination {
  display: flex;
  gap: var(--eld-space-3);
  margin-top: var(--eld-space-5);
}

/* --- Empty state -------------------------------------------------------- */

.eld-account__empty {
  padding: var(--eld-space-6) var(--eld-space-5);
  border: 1px solid var(--eld-border);
  border-radius: var(--eld-radius);
  text-align: center;
}

.eld-account__empty p { margin: 0 0 var(--eld-space-3); color: var(--eld-ink); }

.eld-account__empty-hint {
  max-width: 46ch;
  margin-inline: auto;
  color: var(--eld-ink-2);
  font-size: var(--eld-text-small);
}

.eld-account__empty-actions { justify-content: center; margin-top: var(--eld-space-5); }

/* --- Addresses and details ---------------------------------------------- */

.woocommerce-Addresses {
  display: grid;
  gap: var(--eld-space-4);
}

@media (min-width: 700px) {
  .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.woocommerce-Address {
  padding: var(--eld-space-5);
  border: 1px solid var(--eld-border);
  border-radius: var(--eld-radius);
}

.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eld-space-3);
  margin-bottom: var(--eld-space-3);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  margin: 0;
  font-family: var(--eld-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--eld-ink);
}

.woocommerce-Address address {
  font-style: normal;
  line-height: var(--eld-leading-relaxed);
  color: var(--eld-ink-2);
}

.woocommerce-EditAccountForm fieldset {
  margin: var(--eld-space-5) 0 0;
  padding: var(--eld-space-5) 0 0;
  border: 0;
  border-top: 1px solid var(--eld-border);
}

.woocommerce-EditAccountForm legend {
  padding: 0;
  font-weight: 600;
  color: var(--eld-ink);
}