/* =============================================================================
   MY ACCOUNT — WOOCOMMERCE FLOAT RESET
   Must come first — WooCommerce applies float:left to nav by default.
   ============================================================================= */

.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-navigation ul li,
.woocommerce-MyAccount-content {
  float: none !important; /* override WooCommerce inline float:left */
  width: auto !important;
}

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

/* =============================================================================
   MY ACCOUNT — PAGE SHELL
   ============================================================================= */

.woocommerce-account .site-main {
  background: var(--color-off-white);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
}

/* Astra sets min-height on #page (and .admin-bar #page) to fill the viewport —
   on account pages this creates a large white gap below short content. */
.woocommerce-account #page,
.admin-bar.woocommerce-account #page {
  min-height: 0;
}

.woocommerce-account .woocommerce {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =============================================================================
   MY ACCOUNT — DESKTOP TWO-COLUMN GRID
   ============================================================================= */

@media (min-width: 768px) {
  .woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  /* WooCommerce injects a notices-wrapper div as the first child — pin it
     to span both columns so it doesn't steal column 1 from the nav. */
  .woocommerce-account.logged-in .woocommerce > * {
    grid-column: 1 / -1;
  }

  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation {
    grid-column: 1;
    min-width: 0;
    height: 100%
  }

  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 2;
    min-width: 0;
  }
}

/* =============================================================================
   MY ACCOUNT — SIDEBAR PANEL
   ============================================================================= */

.woocommerce-MyAccount-navigation {
  padding: 0;
}

@media (min-width: 768px) {
  .woocommerce-MyAccount-navigation {
    position: sticky;
    top: calc(64px + var(--space-5));
  }
}

/* =============================================================================
   MY ACCOUNT — PROFILE CARD (desktop sidebar)
   ============================================================================= */

.store-account-profile {
  display: none; /* hidden on mobile — dashboard header carries the greeting */
}

@media (min-width: 768px) {
  .store-account-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: var(--space-5);
  }
}

.store-account-profile__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  color: var(--color-gold);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.store-account-profile__name {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  color: var(--color-black);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}

.store-account-profile__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray);
  margin: 0 0 var(--space-5);
}

.store-account-profile__rule {
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  margin-bottom: var(--space-5);
}

/* =============================================================================
   MY ACCOUNT — NAV GREETING ("Hello, [first name]" above the nav list)
   ============================================================================= */

.store-account-nav__greeting {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  margin: 0 0 var(--space-4);
  padding: 0 var(--space-4);
}

/* =============================================================================
   MY ACCOUNT — NAV LINKS (dot indicator + bottom border divider)
   ============================================================================= */

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  border: none !important; /* override WooCommerce native border */
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Reset WooCommerce/Astra borders on list items */
.woocommerce-MyAccount-navigation-link,
.woocommerce-MyAccount-navigation-link:first-child,
.woocommerce-MyAccount-navigation-link:last-child {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-MyAccount-navigation-link a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  text-decoration: none;
  min-height: 44px;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid var(--color-sand);
  box-shadow: none !important;
  transition: color var(--duration-fast) ease;
}

.woocommerce-MyAccount-navigation-link a:hover {
  color: var(--color-black);
}

/* Dot indicator — kept for fallback but hidden when icons are present */
.store-account-nav__dot {
  display: none;
}

/* SVG nav icons */
.store-account-nav-icon {
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.5;
  transition: opacity var(--duration-fast) ease;
}

.woocommerce-MyAccount-navigation-link a:hover .store-account-nav-icon {
  opacity: 0.8;
}

.woocommerce-MyAccount-navigation-link.is-active .store-account-nav-icon {
  opacity: 1;
  color: var(--color-gold);
}

/* Active state */
.woocommerce-MyAccount-navigation-link.is-active a {
  color: var(--color-black);
  font-weight: var(--weight-medium);
}

.woocommerce-MyAccount-navigation-link.is-active .store-account-nav__dot {
  background: var(--color-gold);
}

.woocommerce-MyAccount-navigation-link a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
}

/* Logout link — separated by spacing only (last nav item already has border-bottom) */
.store-account-nav__logout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-2);
  border-top: none;
  min-height: 44px;
  transition: color var(--duration-fast) ease;
}

.store-account-nav__logout:hover {
  color: var(--color-black);
}

.store-account-nav__logout:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* =============================================================================
   MY ACCOUNT — CONTENT AREA
   ============================================================================= */

.woocommerce-MyAccount-content {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  line-height: var(--leading-body);
}

@media (min-width: 768px) {
  .woocommerce-MyAccount-content {
    border-left: 1px solid var(--color-sand);
    padding-left: var(--space-8);
  }
}

.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message {
  margin-top: 0;
}

/* =============================================================================
   MY ACCOUNT — DASHBOARD WELCOME HEADER
   ============================================================================= */

.store-account-dashboard__header {
  margin-bottom: var(--space-7);
}

.store-account-dashboard__greeting {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-light);
  color: var(--color-black);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}

.store-account-dashboard__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray);
  margin: 0 0 var(--space-5);
}

.store-account-dashboard__rule {
  width: 40px;
  height: 1px;
  background: var(--color-gold);
}

/* =============================================================================
   MY ACCOUNT — DASHBOARD STAT CARDS
   ============================================================================= */

.store-account-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

@media (min-width: 480px) {
  .store-account-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.store-account-stat {
  background: var(--color-cream);
  border-radius: 2px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.store-account-stat__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
}

.store-account-stat__value {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  color: var(--color-black);
  line-height: var(--leading-tight);
}

/* =============================================================================
   MY ACCOUNT — DASHBOARD RECENT ORDERS
   ============================================================================= */

.store-account-section-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  margin: 0 0 var(--space-5);
}

.store-account-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-small);
}

.store-account-orders-table th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-sand);
}

.store-account-orders-table td {
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--color-sand);
  color: var(--color-charcoal);
  vertical-align: middle;
}

.store-account-orders-table th:last-child,
.store-account-orders-table td:last-child {
  text-align: right;
  padding-right: 0;
}

/* Hide Date column below 480px */
.store-account-orders-table__date {
  display: none;
}

@media (min-width: 480px) {
  .store-account-orders-table__date {
    display: table-cell;
  }
}

/* Status badges */
.store-account-status {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
}

.store-account-status--completed {
  background: var(--color-background-success);
  color: var(--color-text-success);
}

.store-account-status--processing {
  background: var(--color-background-info);
  color: var(--color-text-info);
}

.store-account-status--on-hold {
  background: var(--color-background-warning);
  color: var(--color-text-warning);
}

.store-account-status--cancelled,
.store-account-status--refunded,
.store-account-status--failed {
  background: var(--color-background-danger);
  color: var(--color-text-danger);
}

/* View order link */
.store-account-view-order {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  text-decoration: none;
  background: none;
  border: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--duration-fast) ease;
}

.store-account-view-order:hover {
  color: var(--color-gold-dark);
}

.store-account-view-order:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* View all orders link */
.store-account-view-all {
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.store-account-view-all:hover {
  color: var(--color-gold-dark);
}

/* =============================================================================
   MY ACCOUNT — ORDERS TABLE
   ============================================================================= */

.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-small);
}

.woocommerce-account table.woocommerce-orders-table th,
.woocommerce-account table.shop_table th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-sand);
  text-align: left;
}

.woocommerce-account table.woocommerce-orders-table td,
.woocommerce-account table.shop_table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-sand);
  color: var(--color-charcoal);
  vertical-align: middle;
}

/* WooCommerce default order status badges (orders list page) */
.woocommerce-order-status,
mark.order-status {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
}

.woocommerce-order-status.status-completed,
mark.order-status.status-completed {
  background: var(--color-background-success);
  color: var(--color-text-success);
}

.woocommerce-order-status.status-processing,
mark.order-status.status-processing {
  background: var(--color-background-info);
  color: var(--color-text-info);
}

.woocommerce-order-status.status-on-hold,
mark.order-status.status-on-hold {
  background: var(--color-background-warning);
  color: var(--color-text-warning);
}

.woocommerce-order-status.status-pending,
mark.order-status.status-pending {
  background: rgba(140, 140, 140, 0.10);
  color: var(--color-gray);
}

.woocommerce-order-status.status-cancelled,
.woocommerce-order-status.status-refunded,
.woocommerce-order-status.status-failed,
mark.order-status.status-cancelled,
mark.order-status.status-refunded {
  background: var(--color-background-danger);
  color: var(--color-text-danger);
}

/* View order / action links (WC orders list page) */
.woocommerce-account .woocommerce-orders-table__cell-order-actions a {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
  text-decoration: none;
  background: none;
  border: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--duration-fast) ease;
}

.woocommerce-account .woocommerce-orders-table__cell-order-actions a:hover {
  color: var(--color-gold-dark);
}

/* =============================================================================
   MY ACCOUNT — ADDRESSES (store-address-card custom template)
   ============================================================================= */

.store-addresses__intro {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-gray);
  margin: 0 0 var(--space-6);
}

/* ── Grid: 1 col mobile → 2 col equal-width at 600px ── */
.store-addresses__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .store-addresses__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Card shell ── */
.store-address-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-cream);
  padding: var(--space-6);
  border-left: 2px solid transparent;
  transition: border-left-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}

.store-address-card:hover {
  border-left-color: var(--color-gold);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* ── Card header: icon + title ── */
.store-address-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-sand);
}

.store-address-card__icon {
  flex-shrink: 0;
  color: var(--color-gold);
  opacity: 0.7;
  display: flex;
  align-items: center;
}

.store-address-card__title {
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  margin: 0;
}

/* ── Gold button below title ── */
.store-address-card__edit {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-gold);
  text-decoration: none;
  border-radius: 2px;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  position: relative;
  overflow: hidden;
  transition: background var(--duration-fast) ease;
}

/* Light overlay on hover — sits above background, below text */
.store-address-card__edit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--duration-fast) ease;
}

.store-address-card__edit:hover::after {
  background: rgba(255, 255, 255, 0.12);
}

.store-address-card__edit:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ── Body ── */
.store-address-card__body {
  flex: 1;
}

.store-address-card__body address {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-charcoal);
  line-height: 1.75;
}

.store-address-card__empty {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-light-gray);
  margin: 0;
  font-style: italic;
}

/* ── WooCommerce native fallback (if WC ever bypasses the template override) ── */
.woocommerce-account .woocommerce-MyAccount-content .addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* WooCommerce's col2-set clearfix injects ::before and ::after with display:table —
   as grid children they become invisible grid items that shift real cards to wrong cells. */
.woocommerce-account .woocommerce-MyAccount-content .addresses::before,
.woocommerce-account .woocommerce-MyAccount-content .addresses::after {
  display: none !important; /* override WooCommerce clearfix */
}

@media (min-width: 600px) {
  .woocommerce-account .woocommerce-MyAccount-content .addresses {
    grid-template-columns: repeat(2, 1fr);
  }
}

.woocommerce-account .woocommerce-Address {
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-cream);
  border: none !important;
  border-left: 2px solid transparent !important;
  padding: var(--space-6);
  transition: border-left-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}

.woocommerce-account .woocommerce-Address:hover {
  border-left-color: var(--color-gold) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Matches WC/Astra specificity (0,3,0) to override their padding/bg/border on Address-title */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--space-3);
  padding: 0 0 var(--space-4) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--color-sand) !important;
  background: none !important;
  margin-bottom: 0 !important;
}

body.woocommerce-account .woocommerce-Address h2 {
  font-family: var(--font-sans) !important;
  font-size: var(--text-small) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-black) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
  background: none !important;
}

.woocommerce-account .woocommerce-Address-title a {
  display: inline-flex !important;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white) !important;
  background: var(--color-gold);
  text-decoration: none !important;
  border-radius: 2px;
  min-height: 48px;
  padding: var(--space-3) var(--space-5);
  position: relative;
  overflow: hidden;
  transition: background var(--duration-fast) ease;
}

.woocommerce-account .woocommerce-Address-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--duration-fast) ease;
}

.woocommerce-account .woocommerce-Address-title a:hover::after {
  background: rgba(255, 255, 255, 0.12); /* light gray overlay on hover */
}

.woocommerce-account .woocommerce-Address address {
  font-style: normal !important;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-charcoal);
  line-height: 1.75;
}

/* =============================================================================
   MY ACCOUNT — LOGGED-OUT LOGIN VIEW
   WC's default form-login.php: a centred, unboxed column instead of a small
   bordered box stuck to the left of an empty page.
   ============================================================================= */

.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.5rem) 0 var(--section-gap);
}

/* Astra paints this h2 gold and bold — match the serif heading style instead. */
.woocommerce-account:not(.logged-in) .woocommerce > h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-light);
  color: var(--color-black);
  text-align: center;
  margin: 0 0 var(--space-6);
}

/* WC's default .woocommerce form.login box (border, radius, padding) */
.woocommerce-account:not(.logged-in) .woocommerce form.login {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-bottom: var(--space-4);
  cursor: pointer;
}

/* A global input rule strips the native checkbox down to a bottom border; restore it. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: auto;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  border: 1px solid var(--color-charcoal);
  accent-color: var(--color-gold);
  flex-shrink: 0;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login__submit {
  width: 100%;
  min-height: 48px;
}

.woocommerce-account:not(.logged-in) .woocommerce-LostPassword {
  text-align: center;
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-small);
}

.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a {
  color: var(--color-charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================================
   MY ACCOUNT — FORMS (edit account, edit address, login)
   ============================================================================= */

/* Form wrapper — constrain width for readability */
.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-ResetPassword {
  max-width: 560px;
}

/* Fieldset — visual section grouping */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 0;
  margin: var(--space-6) 0 var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-sand);
}

.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gray);
  padding: 0;
  margin-bottom: var(--space-3);
  width: 100%;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-sand);
}

/* Side-by-side first/last name */
.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
.woocommerce-account .woocommerce-EditAccountForm .form-row-last,
.woocommerce-account .woocommerce-address-fields .form-row-first,
.woocommerce-account .woocommerce-address-fields .form-row-last {
  float: none;
  width: 100%;
  clear: none;
}

@media (min-width: 480px) {
  .woocommerce-account .woocommerce-EditAccountForm fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
  }

  .woocommerce-account .woocommerce-EditAccountForm .form-row-wide,
  .woocommerce-account .woocommerce-EditAccountForm legend {
    grid-column: 1 / -1;
  }
}

/* All form rows */
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-address-fields .form-row {
  margin-bottom: var(--space-5);
  float: none;
  clear: none;
}

/* Labels */
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-address-fields label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: var(--space-2);
}

.woocommerce-account .woocommerce-EditAccountForm label .required,
.woocommerce-account .woocommerce-address-fields label .required {
  color: var(--color-gold);
  text-decoration: none;
}

/* Inputs — specificity (0,4,2) beats the global woocommerce.css rule at (0,3,2) */
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row input[type="password"],
.woocommerce-account .woocommerce form .form-row select {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem; /* 16px — anything smaller makes iOS zoom on focus */
  color: var(--color-black);
  background: var(--color-white) !important;
  border: 1px solid var(--color-sand) !important;
  border-radius: 2px !important;
  padding: var(--space-3) var(--space-4) !important;
  min-height: 48px;
  outline: none;
  transition: border-color var(--duration-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce-account .woocommerce form .form-row input.input-text:focus,
.woocommerce-account .woocommerce form .form-row input[type="password"]:focus,
.woocommerce-account .woocommerce form .form-row select:focus {
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 2px rgba(188, 152, 100, 0.15) !important;
}

/* Password strength meter (edit-account page) — inherits the same minimal bar design as .store-lp */
.woocommerce-account .woocommerce-password-strength {
  background: none !important;
  border: none;
  padding: 0;
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  line-height: 1;
}

.woocommerce-account .woocommerce-password-strength::before {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-sand);
  box-shadow: 24px 0 0 var(--color-sand), 48px 0 0 var(--color-sand);
}

.woocommerce-account .woocommerce-password-strength.short::before,
.woocommerce-account .woocommerce-password-strength.bad::before {
  background: #b94040;
  box-shadow: 24px 0 0 var(--color-sand), 48px 0 0 var(--color-sand);
}

.woocommerce-account .woocommerce-password-strength.good::before {
  background: var(--color-gold-light);
  box-shadow: 24px 0 0 var(--color-gold-light), 48px 0 0 var(--color-sand);
}

.woocommerce-account .woocommerce-password-strength.strong::before {
  background: var(--color-gold);
  box-shadow: 24px 0 0 var(--color-gold), 48px 0 0 var(--color-gold);
}

/* Save button */
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  background: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
  padding: var(--space-4) var(--space-7);
  cursor: pointer;
  min-height: 48px;
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

/* =============================================================================
   MY ACCOUNT — LOST PASSWORD PAGE
   ============================================================================= */

.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .lost_reset_password {
  max-width: 480px;
  margin-inline: auto;
}

/* =============================================================================
   MY ACCOUNT — MOBILE PANEL NAVIGATION
   Default (mobile-first): nav visible, content hidden = dashboard is nav-only.
   WooCommerce adds an endpoint body class on sub-pages (e.g. .woocommerce-orders).
   Use those classes to flip which panel shows. Restore both at 768px+.
   ============================================================================= */

/* Mobile: nav padding-top */
.woocommerce-MyAccount-navigation {
  padding-top: var(--space-6);
  margin-bottom: var(--space-5);
}

/* Mobile default: hide content (nav shown, dashboard is the index) */
.woocommerce-account .woocommerce-MyAccount-content {
  display: none;
}

/* Sub-pages: show content */
.woocommerce-orders .woocommerce-MyAccount-content,
.woocommerce-downloads .woocommerce-MyAccount-content,
.woocommerce-edit-address .woocommerce-MyAccount-content,
.woocommerce-edit-account .woocommerce-MyAccount-content,
.woocommerce-view-order .woocommerce-MyAccount-content,
.woocommerce-payment-methods .woocommerce-MyAccount-content,
.woocommerce-add-payment-method .woocommerce-MyAccount-content,
.woocommerce-lost-password .woocommerce-MyAccount-content,
.woocommerce-wishlist .woocommerce-MyAccount-content {
  display: block;
}

/* Sub-pages: hide nav */
.woocommerce-orders .woocommerce-MyAccount-navigation,
.woocommerce-downloads .woocommerce-MyAccount-navigation,
.woocommerce-edit-address .woocommerce-MyAccount-navigation,
.woocommerce-edit-account .woocommerce-MyAccount-navigation,
.woocommerce-view-order .woocommerce-MyAccount-navigation,
.woocommerce-payment-methods .woocommerce-MyAccount-navigation,
.woocommerce-add-payment-method .woocommerce-MyAccount-navigation,
.woocommerce-lost-password .woocommerce-MyAccount-navigation,
.woocommerce-wishlist .woocommerce-MyAccount-navigation {
  display: none;
}

/* Back button: hidden by default */
.store-account-back {
  display: none;
}

/* Sub-pages: show back button */
.woocommerce-orders .store-account-back,
.woocommerce-downloads .store-account-back,
.woocommerce-edit-address .store-account-back,
.woocommerce-edit-account .store-account-back,
.woocommerce-view-order .store-account-back,
.woocommerce-payment-methods .store-account-back,
.woocommerce-add-payment-method .store-account-back,
.woocommerce-lost-password .store-account-back,
.woocommerce-wishlist .store-account-back {
  display: inline-flex;
  margin-top: var(--space-5);
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  text-decoration: none;
  margin-bottom: var(--space-6);
  transition: color var(--duration-fast) ease;
}

.woocommerce-orders .store-account-back:hover,
.woocommerce-downloads .store-account-back:hover,
.woocommerce-edit-address .store-account-back:hover,
.woocommerce-edit-account .store-account-back:hover,
.woocommerce-view-order .store-account-back:hover,
.woocommerce-payment-methods .store-account-back:hover,
.woocommerce-add-payment-method .store-account-back:hover,
.woocommerce-wishlist .store-account-back:hover {
  color: var(--color-black);
}

/* Desktop: restore both panels, remove mobile overrides */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-content,
  .woocommerce-orders .woocommerce-MyAccount-content,
  .woocommerce-downloads .woocommerce-MyAccount-content,
  .woocommerce-edit-address .woocommerce-MyAccount-content,
  .woocommerce-edit-account .woocommerce-MyAccount-content,
  .woocommerce-view-order .woocommerce-MyAccount-content,
  .woocommerce-payment-methods .woocommerce-MyAccount-content,
  .woocommerce-add-payment-method .woocommerce-MyAccount-content,
  .woocommerce-lost-password .woocommerce-MyAccount-content {
    display: block;
  }

  .woocommerce-orders .woocommerce-MyAccount-navigation,
  .woocommerce-downloads .woocommerce-MyAccount-navigation,
  .woocommerce-edit-address .woocommerce-MyAccount-navigation,
  .woocommerce-edit-account .woocommerce-MyAccount-navigation,
  .woocommerce-view-order .woocommerce-MyAccount-navigation,
  .woocommerce-payment-methods .woocommerce-MyAccount-navigation,
  .woocommerce-add-payment-method .woocommerce-MyAccount-navigation,
  .woocommerce-lost-password .woocommerce-MyAccount-navigation,
  .woocommerce-wishlist .woocommerce-MyAccount-navigation {
    display: block;
  }

  .store-account-back {
    display: none !important;
  }

  .woocommerce-MyAccount-navigation {
    padding-top: 0;
    margin-bottom: 0;
  }
}

/* =============================================================================
   MY ACCOUNT — EMPTY STATE (orders, downloads)
   ============================================================================= */

.store-account-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: clamp(3rem, 8vw, 5rem) var(--space-4);
  text-align: center;
}

.store-account-empty-state__icon {
  color: var(--color-gold);
  opacity: 0.7;
  flex-shrink: 0;
}

.store-account-empty-state__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--weight-light);
  color: var(--color-black);
  margin: 0;
  letter-spacing: 0.01em;
}

.store-account-empty-state__message {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-gray);
  margin: 0;
  max-width: 36ch;
  line-height: var(--leading-body);
}

.store-account-empty-state__cta {
  margin-top: var(--space-2);
}

/* Hide WC default notices inside the account content area so they don't
   conflict with our custom empty states. */
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info:only-child {
  display: none;
}

/* =============================================================================
   MY ACCOUNT — WISHLIST PAGE
   ============================================================================= */

/* ── Standalone page shell ── */
.store-wishlist-standalone {
  padding-bottom: var(--space-12);
}

/* ── Page header band ── */
.store-wishlist-header {
  border-bottom: 1px solid var(--color-gold);
  padding: var(--space-8) 0 var(--space-6);
  margin-bottom: var(--space-8);
}

.store-wishlist-header__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--weight-light);
  color: var(--color-black);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.01em;
}

/* Count + continue shopping row */
.store-wishlist-header__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.store-wishlist-header__count {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.store-wishlist-header__continue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-charcoal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.store-wishlist-header__continue:hover {
  color: var(--color-gold);
}

/* ── Product section ── */
.store-wishlist-page {
  padding-top: 0;
}

/* ── Product grid — plain <ul>, no WC class dependency ── */
.store-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .store-wishlist-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .store-wishlist-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Keep WC ul.products grid intact inside My Account endpoint */
.store-wishlist-page .products.columns-4,
.store-wishlist-page ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .store-wishlist-page .products.columns-4,
  .store-wishlist-page ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .store-wishlist-page .products.columns-4,
  .store-wishlist-page ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Empty state ── */
.store-wishlist-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-12) var(--space-4) var(--space-10);
  text-align: center;
}

.store-wishlist-page__empty-icon {
  width: 48px;
  height: 48px;
  color: var(--color-gold);
  flex-shrink: 0;
}

.store-wishlist-page__empty-heading {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  color: var(--color-black);
  margin: 0;
}

.store-wishlist-page__empty-msg {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-gray);
  margin: 0;
  max-width: 30ch;
}

/* =============================================================================
   MY ACCOUNT — LOST / RESET PASSWORD FORMS (.store-lp)
   ============================================================================= */

.store-lp {
  max-width: 480px;
}

.store-lp__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-light);
  color: var(--color-black);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.01em;
}

.store-lp__intro {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-gray);
  margin: 0 0 var(--space-7);
  line-height: var(--leading-body);
}

.store-lp .form-row {
  margin-bottom: var(--space-6);
  float: none;
  clear: none;
}

.store-lp .form-row label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: var(--space-2);
}

.store-lp .form-row label .required {
  color: var(--color-gold);
  text-decoration: none;
  margin-left: 2px;
}

/* Inputs — 1rem (16px) prevents iOS zoom on focus */
.store-lp .form-row .input-text {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-sand);
  border-radius: 2px;
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  outline: none;
  transition: border-color var(--duration-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}

.store-lp .form-row .input-text:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 2px rgba(184, 147, 90, 0.15);
}

.store-lp__actions {
  margin-top: var(--space-7);
  margin-bottom: 0;
}

.store-lp__submit {
  display: block;
  width: 100%;
  background: var(--color-gold);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  min-height: 48px;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}

.store-lp__submit:hover {
  background: var(--color-gold-dark) !important; /* override Astra button:hover */
  color: var(--color-white) !important;
}

.store-lp__footer {
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-gray);
}

.store-lp__footer a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.store-lp__footer a:hover {
  color: var(--color-gold);
}

/* Password field wrapper — positions the show/hide toggle */
.store-lp__input-wrap {
  position: relative;
  display: block;
}

.store-lp__input-wrap .input-text {
  padding-right: 3rem; /* room for the toggle button */
}

/* Show/hide password toggle button */
.store-lp__pw-toggle {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  box-shadow: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--color-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  transition: color var(--duration-fast) ease;
}

.store-lp__pw-toggle:hover,
.store-lp__pw-toggle:focus {
  color: var(--color-black);
  background: none !important; /* override Astra button:hover */
  border: none;
  box-shadow: none;
  outline: none;
}

.store-lp__pw-icon {
  width: 18px;
  height: 18px;
  pointer-events: none;
  flex-shrink: 0;
}

/* Default: show "eye open", hide "eye crossed" */
.store-lp__pw-icon--hide {
  display: none;
}

/* When revealed (aria-pressed="true"): swap icons */
.store-lp__pw-toggle[aria-pressed="true"] .store-lp__pw-icon--show {
  display: none;
}

.store-lp__pw-toggle[aria-pressed="true"] .store-lp__pw-icon--hide {
  display: block;
}

/* Password strength meter — 3-segment minimal bar replacing WooCommerce's coloured block */
.store-lp .woocommerce-password-strength {
  background: none !important; /* WC sets bg-color per class; we override with the bar below */
  border: none;
  padding: 0;
  margin-top: var(--space-3);
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray);
  line-height: 1;
}

/* Three pill segments via box-shadow — no extra markup needed */
.store-lp .woocommerce-password-strength::before {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-sand);
  box-shadow: 24px 0 0 var(--color-sand), 48px 0 0 var(--color-sand);
}

/* Weak — 1 segment */
.store-lp .woocommerce-password-strength.short::before,
.store-lp .woocommerce-password-strength.bad::before {
  background: #b94040;
  box-shadow: 24px 0 0 var(--color-sand), 48px 0 0 var(--color-sand);
}

/* Good — 2 segments */
.store-lp .woocommerce-password-strength.good::before {
  background: var(--color-gold-light);
  box-shadow: 24px 0 0 var(--color-gold-light), 48px 0 0 var(--color-sand);
}

/* Strong — 3 segments, all gold */
.store-lp .woocommerce-password-strength.strong::before {
  background: var(--color-gold);
  box-shadow: 24px 0 0 var(--color-gold), 48px 0 0 var(--color-gold);
}

.store-lp .woocommerce-password-hint {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-gray);
  margin-top: var(--space-2);
  line-height: 1.5;
}

/* "Generate password" button injected by WooCommerce JS — style as ghost */
.store-lp .woocommerce-Button--generate-password {
  background: none;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-5);
  min-height: 40px;
  cursor: pointer;
  border-radius: 2px;
  margin-top: var(--space-3);
  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
}

.store-lp .woocommerce-Button--generate-password:hover {
  background: var(--color-gold) !important; /* override Astra button:hover */
  color: var(--color-white) !important;
  border-color: var(--color-gold) !important;
}

/* ── Guest login nudge strip ── */
.store-wishlist-nudge {
  background: var(--color-cream);
  margin-top: var(--space-10);
  padding: var(--space-7) 0;
}

.store-wishlist-nudge .store-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.store-wishlist-nudge__text {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  margin: 0;
}

/* Ghost button on cream background needs charcoal colour */
.store-wishlist-nudge .store-btn-ghost {
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
  white-space: nowrap;
}

.store-wishlist-nudge .store-btn-ghost:hover {
  color: var(--color-black);
  border-color: var(--color-black);
}
