/**
 * My Account: two-column dashboard shell (woocommerce/myaccount/my-account.php
 * override) + restyling of WooCommerce's own default forms/tables
 * (orders, addresses, edit-account, login/register) - none of those are
 * template-overridden, just restyled through their native classes.
 */

/* ---------- Layout shell ---------- */

/* The My Account page's own content wrapper uses the block editor's
   "constrained" layout (.is-layout-constrained), which caps every
   direct child - including this - to the theme's narrow content width
   via a zero-specificity :where() selector. A plain class selector
   already wins on specificity; this just makes that override explicit
   instead of relying on source order. */
.hs-account {
  max-width: var(--hs-container-max-width);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--hs-container-padding-inline);
  padding-block: var(--hs-space-32) var(--hs-space-64);
}

.hs-account__layout {
  display: flex;
  align-items: flex-start;
  gap: var(--hs-space-32);
}

.hs-account__sidebar {
  flex: 0 0 16rem;
  width: 16rem;
  position: sticky;
  top: var(--hs-space-24);
}

.hs-account__content {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--hs-color-surface);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
  padding: var(--hs-space-32);
}

.hs-account__user {
  display: flex;
  align-items: center;
  gap: var(--hs-space-12);
  padding: var(--hs-space-16);
  margin-block-end: var(--hs-space-16);
  background: var(--hs-color-surface);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
}

.hs-account__avatar {
  border-radius: 50%;
  flex-shrink: 0;
}

.hs-account__user-info {
  min-width: 0;
}

.hs-account__user-name {
  margin: 0;
  font-weight: var(--hs-font-weight-semibold);
  font-size: var(--hs-font-size-body-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hs-account__user-email {
  margin: 0;
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Sidebar navigation (WooCommerce's own markup) ---------- */

.woocommerce-MyAccount-navigation {
  background: var(--hs-color-surface);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: var(--hs-space-12) var(--hs-space-16);
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text);
  border-inline-start: 3px solid transparent;
  transition: background-color var(--hs-transition-fast) var(--hs-ease),
    border-color var(--hs-transition-fast) var(--hs-ease);
}

.woocommerce-MyAccount-navigation-link:not(:last-child) a {
  border-block-end: 1px solid var(--hs-color-border);
}

.woocommerce-MyAccount-navigation-link a:hover {
  background: var(--hs-color-surface-sunken);
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--hs-color-danger-600);
}

.woocommerce-MyAccount-navigation-link.is-active a {
  background: color-mix(in srgb, var(--hs-color-primary-500) 12%, var(--hs-color-surface));
  border-inline-start-color: var(--hs-color-primary-500);
  color: var(--hs-color-primary-500);
  font-weight: var(--hs-font-weight-semibold);
}

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

.hs-account-dashboard__greeting {
  font-size: var(--hs-font-size-h5);
  margin: 0 0 var(--hs-space-24);
}

.hs-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hs-space-16);
  margin-block-end: var(--hs-space-40);
}

.hs-account-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  padding: var(--hs-space-20);
  background: var(--hs-color-surface-sunken);
  border-radius: var(--hs-radius-lg);
  text-align: center;
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}

.hs-account-stats__item:hover {
  background: color-mix(in srgb, var(--hs-color-primary-500) 12%, var(--hs-color-surface));
}

.hs-account-stats__value {
  font-size: var(--hs-font-size-h3);
  font-weight: var(--hs-font-weight-bold);
  color: var(--hs-color-primary-600);
}

.hs-account-stats__label {
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text-muted);
}

.hs-account-dashboard__section {
  margin-block-end: var(--hs-space-40);
}

.hs-account-dashboard__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--hs-space-16);
}

.hs-account-dashboard__section h2 {
  font-size: var(--hs-font-size-h6);
  margin: 0 0 var(--hs-space-16);
}

.hs-account-dashboard__section-header h2 {
  margin: 0;
}

.hs-account-orders-preview {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
  overflow: hidden;
}

.hs-account-orders-preview__item:not(:last-child) {
  border-block-end: 1px solid var(--hs-color-border);
}

.hs-account-orders-preview__item a {
  display: flex;
  align-items: center;
  gap: var(--hs-space-16);
  padding: var(--hs-space-16);
  flex-wrap: wrap;
}

.hs-account-orders-preview__item a:hover {
  background: var(--hs-color-surface-sunken);
}

.hs-account-orders-preview__number {
  font-weight: var(--hs-font-weight-medium);
  color: var(--hs-color-text);
}

.hs-account-orders-preview__date {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
}

.hs-account-orders-preview__total {
  margin-inline-start: auto;
  font-weight: var(--hs-font-weight-medium);
}

.hs-account-quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--hs-space-12);
}

.hs-account-quick-links__item {
  display: flex;
  align-items: center;
  gap: var(--hs-space-12);
  padding: var(--hs-space-16);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text);
  transition: border-color var(--hs-transition-fast) var(--hs-ease);
}

.hs-account-quick-links__item svg {
  color: var(--hs-color-primary-500);
  flex-shrink: 0;
}

.hs-account-quick-links__item:hover {
  border-color: var(--hs-color-primary-500);
}

/* ---------- Wishlist / Recently Viewed panels ---------- */

.hs-account-panel__title {
  font-size: var(--hs-font-size-h6);
  margin: 0 0 var(--hs-space-20);
}

.hs-account-panel__empty {
  color: var(--hs-color-text-muted);
  font-size: var(--hs-font-size-body-sm);
}

.hs-account-panel__empty a {
  color: var(--hs-color-primary-600);
  text-decoration: underline;
  margin-inline-start: var(--hs-space-4);
}

/* ---------- Orders table ---------- */

.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-orders-table__header {
  text-align: start;
  padding: var(--hs-space-12);
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-text-muted);
  border-block-end: 1px solid var(--hs-color-border);
}

.woocommerce-orders-table__cell {
  padding: var(--hs-space-16) var(--hs-space-12);
  border-block-end: 1px solid var(--hs-color-border);
  font-size: var(--hs-font-size-body-sm);
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-downloads-file,
.woocommerce-Button {
  display: inline-flex;
  align-items: center;
  padding: var(--hs-space-8) var(--hs-space-16);
  border-radius: var(--hs-radius-md);
  font-size: var(--hs-font-size-caption);
  font-weight: var(--hs-font-weight-medium);
  background: var(--hs-color-surface-sunken);
  color: var(--hs-color-text);
  margin-inline-end: var(--hs-space-8);
}

.woocommerce-orders-table__cell-order-actions .view,
.woocommerce-Button.button.pay,
.woocommerce-Button.button.view {
  background: var(--hs-color-primary-fill);
  color: #fff;
}

@media (max-width: 48rem) {
  .woocommerce-orders-table__header {
    display: none;
  }

  .woocommerce-orders-table tr {
    display: block;
    padding-block: var(--hs-space-12);
    border-block-end: 1px solid var(--hs-color-border);
  }

  .woocommerce-orders-table__cell {
    display: flex;
    justify-content: space-between;
    gap: var(--hs-space-16);
    border: none;
    padding: var(--hs-space-4) 0;
  }

  .woocommerce-orders-table__cell::before {
    content: attr(data-title);
    font-weight: var(--hs-font-weight-medium);
    color: var(--hs-color-text-muted);
  }
}

/* ---------- Addresses ---------- */

.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--hs-space-16);
}

.woocommerce-Address {
  padding: var(--hs-space-20);
  border: 1px solid var(--hs-color-border);
  border-radius: var(--hs-radius-lg);
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--hs-space-12);
}

.woocommerce-Address-title h2 {
  font-size: var(--hs-font-size-body);
  margin: 0;
}

.woocommerce-Address-title .edit {
  font-size: var(--hs-font-size-caption);
  color: var(--hs-color-primary-600);
  text-decoration: underline;
}

.woocommerce-Address address {
  font-style: normal;
  font-size: var(--hs-font-size-body-sm);
  color: var(--hs-color-text-muted);
  line-height: 1.7;
}

/* ---------- Forms (login/register/edit-account/edit-address) ---------- */

.woocommerce-form-row {
  margin-block-end: var(--hs-space-16);
}

.woocommerce-form-row label {
  display: block;
  margin-block-end: var(--hs-space-8);
  font-size: var(--hs-font-size-label);
  font-weight: var(--hs-font-weight-medium);
  color: var(--hs-color-text);
}

.woocommerce-form-row .woocommerce-Input,
.woocommerce-form-row select {
  width: 100%;
  padding: var(--hs-space-12) var(--hs-space-16);
  border: 1px solid var(--hs-color-border-strong);
  border-radius: var(--hs-radius-md);
  font-size: var(--hs-font-size-body-sm);
  background: var(--hs-color-surface);
  color: var(--hs-color-text);
}

.woocommerce-form-row .woocommerce-Input:focus,
.woocommerce-form-row select:focus {
  outline: none;
  border-color: var(--hs-color-primary-500);
  box-shadow: 0 0 0 3px var(--hs-color-primary-100);
}

.woocommerce-form :is(.woocommerce-button, .button):not(.hs-btn) {
  display: inline-flex;
  align-items: center;
  padding: var(--hs-space-12) var(--hs-space-24);
  border-radius: var(--hs-radius-md);
  background: var(--hs-color-primary-fill);
  color: #fff;
  font-weight: var(--hs-font-weight-medium);
  font-size: var(--hs-font-size-body-sm);
}

.woocommerce-form :is(.woocommerce-button, .button):not(.hs-btn):hover {
  background: var(--hs-color-primary-fill-hover);
}

.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center;
  gap: var(--hs-space-8);
  font-weight: var(--hs-font-weight-regular) !important;
}

.woocommerce-form__input-checkbox {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--hs-color-primary-500);
}

.woocommerce-LostPassword {
  font-size: var(--hs-font-size-body-sm);
}

.woocommerce-LostPassword a {
  color: var(--hs-color-primary-600);
  text-decoration: underline;
}

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

@media (max-width: 61.9375rem) {
  .hs-account__layout {
    flex-direction: column;
  }

  .hs-account__sidebar {
    width: 100%;
    position: static;
  }

  .hs-account__content {
    width: 100%;
    padding: var(--hs-space-20);
  }

  .hs-account-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 30rem) {
  .hs-account-stats {
    grid-template-columns: 1fr;
  }
}