/* ═══════════════════════════════════════════════════════════════════════════
   HCA — WooCommerce page styles
   Loaded only on WooCommerce pages (shop / product / cart / checkout / account)
   Mirrors the custom .dash layout so the WC my-account page matches
   the hand-built page-account.php exactly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   MY ACCOUNT — two-column dash layout
   .woocommerce wraps both the nav and the content on the my-account page.
   ────────────────────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce {
  display: flex;
  gap: 2%;
  align-items: flex-start;
}

/* ── Sidebar navigation ─────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem;
  position: sticky;
  top: 92px;
  width: 21% !important;
}

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

.woocommerce-MyAccount-navigation-link {
  margin-bottom: .15rem;
}

.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: .62rem .85rem;
  color: var(--ink-soft);
  border-radius: 9px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.woocommerce-MyAccount-navigation-link a:hover {
  background: var(--gold-mist);
  color: var(--ink);
}

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  background: var(--gold-mist);
  color: var(--gold-deep);
  font-weight: 600;
}

/* Separator before logout */
.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}

/* ── Main content panel ─────────────────────────────────────────────────── */
.woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem;
  min-width: 0; /* prevent overflow in grid */
  width: 77%;
}

.woocommerce-MyAccount-content > p:first-child {
  color: var(--ink-soft);
  font-size: .95rem;
  margin-bottom: 1rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   ORDER OVERVIEW (dashboard welcome strip)
   ────────────────────────────────────────────────────────────────────────── */
ul.woocommerce-MyAccount-orders-info,
ul.order-overview {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

ul.woocommerce-MyAccount-orders-info li,
ul.order-overview li {
  background: linear-gradient(160deg, var(--gold-mist), #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

ul.order-overview li span {
  display: block;
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--gold-deep);
  font-weight: 600;
  line-height: 1;
}

ul.order-overview li label {
  display: block;
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: .35rem;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────
   ORDERS TABLE  (.woocommerce-orders-table)
   ────────────────────────────────────────────────────────────────────────── */
table.woocommerce-orders-table,
table.woocommerce-MyAccount-orders {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

table.woocommerce-orders-table thead th,
table.woocommerce-MyAccount-orders thead th {
  text-align: left;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .5rem .8rem;
  border-bottom: 2px solid var(--line);
}

table.woocommerce-orders-table tbody td,
table.woocommerce-MyAccount-orders tbody td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

table.woocommerce-orders-table tbody tr:last-child td,
table.woocommerce-MyAccount-orders tbody tr:last-child td {
  border-bottom: none;
}

table.woocommerce-orders-table tbody tr:hover td,
table.woocommerce-MyAccount-orders tbody tr:hover td {
  background: var(--bg);
}

table.woocommerce-orders-table .woocommerce-Price-amount,
table.woocommerce-MyAccount-orders .woocommerce-Price-amount {
  color: var(--gold-deep);
  font-family: var(--serif);
}

/* View order button inside the table */
table.woocommerce-orders-table .woocommerce-button,
table.woocommerce-orders-table a.button,
table.woocommerce-MyAccount-orders .woocommerce-button,
table.woocommerce-MyAccount-orders a.button {
  padding: .35rem .85rem;
  font-size: .8rem;
}

/* ── Order status badges ────────────────────────────────────────────────── */
.woocommerce-orders-table .order-status,
.woocommerce-MyAccount-orders .order-status,
mark.order-status {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--gold-mist);
  color: var(--gold-deep);
}

mark.order-status.status-completed   { background: var(--gold-mist); color: var(--gold-deep) }
mark.order-status.status-processing  { background: #dbeafe; color: #1e40af }
mark.order-status.status-pending     { background: #fff3da; color: #9c7a2c }
mark.order-status.status-on-hold     { background: #fef3c7; color: #92400e }
mark.order-status.status-cancelled   { background: #f7e2e2; color: var(--red) }
mark.order-status.status-refunded    { background: #f3f4f6; color: #6b7280 }
mark.order-status.status-failed      { background: #f7e2e2; color: var(--red) }

/* ──────────────────────────────────────────────────────────────────────────
   ADDRESSES PAGE  (.woocommerce-Addresses)
   ────────────────────────────────────────────────────────────────────────── */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.woocommerce-Address {
  background: linear-gradient(160deg, var(--gold-mist), #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;
  gap: .6rem;
}

.woocommerce-Address-title h3 {
  font-size: 1rem;
  margin: 0;
  color: var(--ink);
}

.woocommerce-Address-title .edit {
  font-size: .8rem;
  color: var(--gold-deep);
  text-decoration: none;
  font-weight: 500;
  padding: .25rem .65rem;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  transition: background .15s, border-color .15s;
}

.woocommerce-Address-title .edit:hover {
  background: var(--gold-mist);
  border-color: var(--gold);
}

address {
  font-style: normal;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────────────────────
   EDIT ADDRESS / ACCOUNT DETAILS FORMS
   ────────────────────────────────────────────────────────────────────────── */
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
  max-width: 600px;
}

.woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.woocommerce-EditAccountForm fieldset legend {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .8rem;
  padding: 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  padding-bottom: .5rem;
}

/* form-row is already styled in hca-main.css WC section —
   these selectors target the account page specifically */
.woocommerce-EditAccountForm p.form-row,
.woocommerce-address-fields p.form-row {
  margin-bottom: 1rem;
}

.woocommerce-EditAccountForm p.form-row label,
.woocommerce-address-fields p.form-row label {
  font-size: .82rem;
  color: var(--ink-soft);
  display: block;
  margin-bottom: .32rem;
  font-weight: 500;
}

.woocommerce-EditAccountForm p.form-row input.input-text,
.woocommerce-EditAccountForm p.form-row select,
.woocommerce-address-fields p.form-row input.input-text,
.woocommerce-address-fields p.form-row select {
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .72rem .9rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}

.woocommerce-EditAccountForm p.form-row input.input-text:focus,
.woocommerce-EditAccountForm p.form-row select:focus,
.woocommerce-address-fields p.form-row input.input-text:focus,
.woocommerce-address-fields p.form-row select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,165,120,.28);
}

/* Password strength meter */
.woocommerce-password-strength {
  font-size: .82rem;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  margin-top: .4rem;
}
.woocommerce-password-strength.short       { background: #f7e2e2; color: var(--red) }
.woocommerce-password-strength.bad         { background: #fff3da; color: #9c7a2c }
.woocommerce-password-strength.good        { background: #dbeafe; color: #1e40af }
.woocommerce-password-strength.strong      { background: #e6f1ea; color: var(--green) }

.woocommerce-password-hint {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .25rem;
  display: block;
}

/* Save / submit buttons */
.woocommerce-EditAccountForm .woocommerce-Button,
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-address-fields ~ p button[type="submit"],
.woocommerce-address-fields + p button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .74rem 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--gold-deep);
  font-family: inherit;
  font-weight: 500;
  font-size: .92rem;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(165,126,66,.26);
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.9,.4,1), box-shadow .2s;
  margin-top: .6rem;
}

.woocommerce-EditAccountForm .woocommerce-Button:hover,
.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-address-fields ~ p button[type="submit"]:hover,
.woocommerce-address-fields + p button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(165,126,66,.34);
  color: #fff;
}

/* ──────────────────────────────────────────────────────────────────────────
   DOWNLOADS TABLE
   ────────────────────────────────────────────────────────────────────────── */
table.woocommerce-MyAccount-downloads {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

table.woocommerce-MyAccount-downloads thead th {
  text-align: left;
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .5rem .8rem;
  border-bottom: 2px solid var(--line);
}

table.woocommerce-MyAccount-downloads tbody td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

table.woocommerce-MyAccount-downloads tbody tr:last-child td { border-bottom: none }
table.woocommerce-MyAccount-downloads tbody tr:hover td { background: var(--bg) }

/* ──────────────────────────────────────────────────────────────────────────
   SINGLE ORDER VIEW  (view-order endpoint)
   ────────────────────────────────────────────────────────────────────────── */
.woocommerce-order-details,
.woocommerce-customer-details {
  margin-top: 1.5rem;
}

.woocommerce-order-details__title,
.woocommerce-column__title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

table.woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin-bottom: 1.4rem;
}

table.woocommerce-table--order-details thead th {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  padding: .4rem .6rem .5rem;
  font-weight: 500;
  text-align: left;
}

table.woocommerce-table--order-details tbody td,
table.woocommerce-table--order-details tfoot td,
table.woocommerce-table--order-details tfoot th {
  padding: .7rem .6rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

table.woocommerce-table--order-details tfoot tr:last-child td,
table.woocommerce-table--order-details tfoot tr:last-child th {
  border-bottom: none;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--gold-deep);
  font-size: 1rem;
}

table.woocommerce-table--order-details .woocommerce-Price-amount {
  color: var(--gold-deep);
  font-family: var(--serif);
}

.woocommerce-customer-details--billing address,
.woocommerce-customer-details--shipping address {
  background: var(--gold-mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  font-style: normal;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────────────────────
   PAYMENT METHODS  (if enabled)
   ────────────────────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content table.woocommerce-table--payment-methods {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.woocommerce-MyAccount-content table.woocommerce-table--payment-methods thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: .5rem .8rem;
  border-bottom: 2px solid var(--line);
  font-weight: 600;
  text-align: left;
}

.woocommerce-MyAccount-content table.woocommerce-table--payment-methods tbody td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

/* ──────────────────────────────────────────────────────────────────────────
   WC NOTICES on account pages
   (base notices already in hca-main.css, these override margin/spacing here)
   ────────────────────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
  margin-bottom: 1.2rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE  — tablet: stack to column below 860px
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
    gap: 1.2rem;
  }

  /* Both panels go full width */
  .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-content {
    width: 100% !important;
  }

  .woocommerce-MyAccount-navigation {
    position: static;
  }

  /* Nav turns into a horizontal pill strip */
  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
  }

  .woocommerce-MyAccount-navigation-link {
    margin-bottom: 0;
    flex: 1;
  }

  .woocommerce-MyAccount-navigation-link a {
    text-align: center;
    min-width: 100px;
    white-space: nowrap;
  }

  .woocommerce-MyAccount-navigation-link--customer-logout {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }

  .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile: tighter padding below 560px ──────────────────────────────── */
@media (max-width: 560px) {
  .woocommerce-account .woocommerce {
    gap: .8rem;
  }

  .woocommerce-MyAccount-content {
    padding: 1.2rem;
  }

  .woocommerce-MyAccount-navigation {
    padding: .7rem;
  }

  /* Nav pills wrap and shrink on very small screens */
  .woocommerce-MyAccount-navigation-link {
    flex: none;
  }

  .woocommerce-MyAccount-navigation-link a {
    font-size: .82rem;
    padding: .5rem .7rem;
    min-width: auto;
  }
}