/* =============================================================================
   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;
  flex-direction: row;
  align-items: center;
  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
   WooCommerce renders .u-column1 / .u-column2 with float:left; width:48%.
   Reset those and use CSS grid on the container instead.
   ============================================================================= */

.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns.addresses {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  overflow: hidden; /* clear float context */
}

/* Reset WooCommerce float layout on address column wrappers */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
  float: none !important;
  width: 100% !important;
  clear: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

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

.woocommerce-account .woocommerce-Address {
  background: var(--color-cream);
  border: 1px solid var(--color-sand);
  padding: var(--space-6);
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-sand);
}

.woocommerce-account .woocommerce-Address-title h3 {
  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-black);
  margin: 0;
}

.woocommerce-account .woocommerce-Address-title a {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-gold);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

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

.woocommerce-account p.woocommerce-Address-add a {
  color: var(--color-gray);
  font-family: var(--font-sans);
  font-size: var(--text-small);
}

/* =============================================================================
   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: 0 0 var(--space-7);
}

.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-5);
  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 */
.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
.woocommerce-account .woocommerce-EditAccountForm input[type="password"],
.woocommerce-account .woocommerce-EditAccountForm input[type="tel"],
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="email"],
.woocommerce-account .woocommerce-address-fields input[type="tel"],
.woocommerce-account .woocommerce-address-fields select {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-black);
  background: var(--color-white);
  border: 1px solid var(--color-sand);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  outline: none;
  transition: border-color var(--duration-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce-account .woocommerce-EditAccountForm input:focus,
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-address-fields select:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 2px rgba(var(--color-gold-rgb, 188, 152, 100), 0.15);
}

/* Password strength meter */
.woocommerce-account .woocommerce-password-strength {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-2);
}

/* 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 {
  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 {
  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 {
  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 {
  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 {
    display: block;
  }

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

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

/* =============================================================================
   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;
}

/* ── 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);
}
