/*
 * Ohime — My Account & Login styles.
 * Loaded ONLY on account pages (is_account_page) via functions.php.
 * Styles WooCommerce's classic account markup to the Ohime design system.
 * Tokens come from theme.json (--wp--preset--*).
 */

/* ── Page heading (page.html renders <h1> post-title above the WC content) ──── */
.woocommerce-account main.wp-block-group > .wp-block-post-title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  margin-bottom: 1.75rem;
}

/* ── Shared form fields (login, edit-address, edit-account) ─────────────────── */
.woocommerce-account .form-row,
.woocommerce-account .woocommerce-form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.25rem;
}

.woocommerce-account label {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--wp--preset--color--contrast, #141412);
  margin-bottom: 0.5rem;
}

.woocommerce-account .woocommerce-Input,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select,
.woocommerce-account textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast, #141412);
  background: #fff;
  border: 1px solid var(--wp--preset--color--gray-30, #c2c2c1);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce-account input::placeholder { color: var(--wp--preset--color--gray-50, #999998); }

.woocommerce-account .woocommerce-Input:focus,
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary, #ae91cd);
  box-shadow: 0 0 0 3px var(--wp--preset--color--purple-20, #efe9f5);
}

.woocommerce-account .required { color: var(--wp--preset--color--primary, #ae91cd); border: 0; }

/* Error-state field (WC adds .woocommerce-invalid) */
.woocommerce-account .woocommerce-invalid input,
.woocommerce-account .woocommerce-invalid select {
  border-color: var(--wp--preset--color--alert, #fd3f3f);
}

/* ── Shared button: black pill (mirrors theme.json elements.button) ─────────── */
.woocommerce-account .woocommerce-button,
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type="submit"] {
  display: inline-block;
  background: var(--wp--preset--color--contrast, #141412);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button[type="submit"]:hover {
  background: var(--wp--preset--color--gray-90, #474745);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════════
   LOGIN / LOST-PASSWORD (logged-out)  —  centered card
   ════════════════════════════════════════════════════════════════════════════ */
body.woocommerce-account:not(.logged-in) .wp-block-post-title {
  text-align: center;
  font-size: 2rem;
}

/* Constrain + center the WC wrapper into a single card column */
body.woocommerce-account:not(.logged-in) .woocommerce {
  max-width: 440px;
  margin-inline: auto;
}

body.woocommerce-account:not(.logged-in) .woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword,
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword form,
body.woocommerce-account:not(.logged-in) form.lost_reset_password {
  background: #fff;
  border: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
  border-radius: 16px;
  padding: 2rem;
  box-sizing: border-box;
  box-shadow: 0 4px 24px rgba(20, 20, 18, 0.06);
  margin: 0;
}

/* Remember-me: inline row, black checkbox */
.woocommerce-form-login__rememberme {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  color: var(--wp--preset--color--gray-80, #5b5b59);
}
.woocommerce-form-login__rememberme input {
  width: auto;
  accent-color: var(--wp--preset--color--contrast, #141412);
}

/* Full-width submit on the card */
.woocommerce-form-login__submit,
.woocommerce-account:not(.logged-in) button[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
}

/* Lost-password link under the button */
.woocommerce-LostPassword {
  text-align: center;
  margin: 1rem 0 0;
}
.woocommerce-LostPassword a {
  color: var(--wp--preset--color--primary, #ae91cd);
  text-decoration: none;
  font-size: 0.875rem;
}
.woocommerce-LostPassword a:hover { text-decoration: underline; }

/* Lost/reset intro text */
body.woocommerce-account:not(.logged-in) .woocommerce > p {
  text-align: center;
  color: var(--wp--preset--color--gray-70, #70706f);
  font-size: 0.875rem;
}

/* WC section heading ("Login" / "Lost password") above the card → centered */
body.woocommerce-account:not(.logged-in) .woocommerce h2 {
  text-align: center;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 1rem 0 1rem;
}

/* Make the form + its rows + inputs fill the full card inner width */
body.woocommerce-account:not(.logged-in) .woocommerce form {
  width: 100%;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .form-row,
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-row,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .form-row,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .woocommerce-form-row {
  width: 100%;
  max-width: none;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-Input,
body.woocommerce-account:not(.logged-in) .woocommerce-form-login input[type="text"],
body.woocommerce-account:not(.logged-in) .woocommerce-form-login input[type="password"],
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword .woocommerce-Input,
body.woocommerce-account:not(.logged-in) .woocommerce-ResetPassword input[type="text"] {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════════════════════
   LOGGED-IN SHELL  —  sidebar + content
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Widen the account region beyond the 720px content size for sidebar + content */
  body.woocommerce-account.logged-in .wp-block-post-content,
  body.woocommerce-account.logged-in .wp-block-post-content > .woocommerce {
    max-width: 1080px;
  }
  body.woocommerce-account.logged-in .woocommerce {
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 2.5rem;
    align-items: start;
  }
  body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; width: 100%; }
  body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content    { grid-column: 2; grid-row: 2; min-width: 0; width: 100%; }
  body.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper,
  body.woocommerce-account.logged-in .woocommerce > .woocommerce-message,
  body.woocommerce-account.logged-in .woocommerce > .woocommerce-error,
  body.woocommerce-account.logged-in .woocommerce > .woocommerce-info { grid-column: 1 / -1; grid-row: 1; }
}

/* Sidebar nav */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* WC adds `padding: 0 0 16px` to each nav <li> — drop that bottom gap so items sit
   tight (only padding-bottom, so the Log-out divider's border/padding-top survive) */
.woocommerce-account .woocommerce-MyAccount-navigation li {
  padding-bottom: 0;
}
.woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--wp--preset--color--gray-80, #5b5b59);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.woocommerce-MyAccount-navigation-link a:hover {
  background: var(--wp--preset--color--gray-5, #f4f4f4);
  color: var(--wp--preset--color--contrast, #141412);
}
.woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
}
/* Never underline nav items — WC's blocktheme CSS underlines the active link
   (.woocommerce-MyAccount-navigation li.is-active a). Override in every state. */
.woocommerce-account .woocommerce-MyAccount-navigation li a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  text-decoration: none;
}

/* Icons via mask-image (inherits currentColor) */
.woocommerce-MyAccount-navigation-link a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--orders a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 4 6v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6l-2-4Z'/%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M9 10a3 3 0 0 0 6 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 4 6v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6l-2-4Z'/%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M9 10a3 3 0 0 0 6 0'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-address a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--edit-account a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--payment-methods a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}
.woocommerce-MyAccount-navigation-link--customer-logout a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

/* Log out: separated at the bottom */
.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
}

/* Mobile: nav becomes a horizontal scrollable pill row above content */
@media (max-width: 768px) {
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .woocommerce-MyAccount-navigation-link a {
    white-space: nowrap;
    border: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
    border-radius: 100px;
    padding: 0.5rem 0.875rem;
  }
  .woocommerce-MyAccount-navigation-link--customer-logout {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD CONTENT + NOTICES
   ════════════════════════════════════════════════════════════════════════════ */
.woocommerce-MyAccount-content > p {
  color: var(--wp--preset--color--gray-80, #5b5b59);
  line-height: 1.7;
  margin: 0 0 1rem;
}
.woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.woocommerce-Button) {
  color: var(--wp--preset--color--primary, #ae91cd);
}

/* Notices (success / info / error) — classic WC markup */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.woocommerce-account .woocommerce-message li,
.woocommerce-account .woocommerce-info li,
.woocommerce-account .woocommerce-error li {
  list-style: none;
  margin: 0;
}
.woocommerce-account .woocommerce-message {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  border-color: var(--wp--preset--color--purple-40, #dfd3eb);
  color: var(--wp--preset--color--contrast, #141412);
}
.woocommerce-account .woocommerce-info {
  background: var(--wp--preset--color--gray-5, #f4f4f4);
  border-color: var(--wp--preset--color--gray-15, #e0e0e0);
  color: var(--wp--preset--color--gray-90, #474745);
}
.woocommerce-account .woocommerce-error {
  background: #fde8e8;
  border-color: var(--wp--preset--color--alert, #fd3f3f);
  color: #7a1a1a;
}
/* Inline button inside a notice → keep pill, size down */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
  flex: 0 0 auto;
  padding: 0.5rem 1.125rem;
  font-size: 0.75rem;
}

/* This WC build renders notices as BLOCK banners (.wc-block-components-notice-banner),
   even via the classic shortcode. Recolor those to the Ohime palette. */
.woocommerce-account .wc-block-components-notice-banner {
  border-radius: 8px;
  font-size: 0.875rem;
}
.woocommerce-account .wc-block-components-notice-banner.is-success {
  background: var(--wp--preset--color--purple-20, #efe9f5);
  border-color: var(--wp--preset--color--primary, #ae91cd);
  color: var(--wp--preset--color--contrast, #141412);
}
.woocommerce-account .wc-block-components-notice-banner.is-error {
  background: #fde8e8;
  border-color: var(--wp--preset--color--alert, #fd3f3f);
  color: #7a1a1a;
}
.woocommerce-account .wc-block-components-notice-banner.is-info,
.woocommerce-account .wc-block-components-notice-banner.is-warning {
  background: var(--wp--preset--color--gray-5, #f4f4f4);
  border-color: var(--wp--preset--color--gray-15, #e0e0e0);
  color: var(--wp--preset--color--gray-90, #474745);
}

/* Notice icons: WC renders each as a colored circle (svg background-color) + symbol.
   Default circles are off-palette (info = WP blue #007cba). Recolor the circle per
   variant to the Ohime palette with a white symbol for contrast. */
.woocommerce-account .wc-block-components-notice-banner svg {
  fill: #fff;
}
.woocommerce-account .wc-block-components-notice-banner.is-info svg,
.woocommerce-account .wc-block-components-notice-banner.is-success svg {
  background-color: var(--wp--preset--color--primary, #ae91cd);
}
.woocommerce-account .wc-block-components-notice-banner.is-error svg {
  background-color: var(--wp--preset--color--alert, #fd3f3f);
}
.woocommerce-account .wc-block-components-notice-banner.is-warning svg {
  background-color: var(--wp--preset--color--gray-50, #999998);
}

/* ════════════════════════════════════════════════════════════════════════════
   ORDERS TABLE
   ════════════════════════════════════════════════════════════════════════════ */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.woocommerce-orders-table thead th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--gray-60, #848483);
  border-bottom: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
}
.woocommerce-orders-table thead th .nobr { font-weight: inherit; }
.woocommerce-orders-table tbody td,
.woocommerce-orders-table tbody th {
  padding: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--gray-10, #ebebeb);
  vertical-align: middle;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--wp--preset--color--contrast, #141412);
}
.woocommerce-orders-table tbody th a { color: var(--wp--preset--color--contrast, #141412); text-decoration: none; font-weight: 600; }
.woocommerce-orders-table tbody th a:hover { text-decoration: underline; }

/* Status badge (orders.php override wraps the status in <mark class="ohime-order-status--{status}">).
   Scoped + element-qualified to beat WC's `mark` resets (specificity). */
.woocommerce-account mark.ohime-order-status {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  background-color: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
}
.woocommerce-account mark.ohime-order-status--processing { background-color: var(--wp--preset--color--purple-30, #e7def0); }
.woocommerce-account mark.ohime-order-status--on-hold,
.woocommerce-account mark.ohime-order-status--pending { background-color: var(--wp--preset--color--gray-10, #ebebeb); color: var(--wp--preset--color--gray-70, #70706f); }
.woocommerce-account mark.ohime-order-status--cancelled,
.woocommerce-account mark.ohime-order-status--failed,
.woocommerce-account mark.ohime-order-status--refunded { background-color: #fde8e8; color: #b3261e; }

/* Action buttons: View = outline pill, Pay = solid black pill */
.woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
  display: inline-block;
  border-radius: 100px;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.5rem 1.125rem;
  text-decoration: none;
  margin: 0 0 0 0.375rem;
  background: var(--wp--preset--color--contrast, #141412);
  color: #fff;
  border: 1px solid var(--wp--preset--color--contrast, #141412);
}
.woocommerce-orders-table__cell-order-actions .button.view,
.woocommerce-orders-table__cell-order-actions .woocommerce-button.view {
  background: #fff;
  color: var(--wp--preset--color--contrast, #141412);
}
.woocommerce-orders-table__cell-order-actions .button.view:hover { background: var(--wp--preset--color--gray-5, #f4f4f4); color: var(--wp--preset--color--contrast, #141412); }
.woocommerce-orders-table__cell-order-actions .button.pay:hover { background: var(--wp--preset--color--gray-90, #474745); color: #fff; }

/* Empty-orders state: block notice "No order has been made yet." + Browse button.
   High-specificity + qualified to beat WC block button styles. */
.woocommerce-account .wc-block-components-notice-banner__content a,
.woocommerce-account .wc-block-components-notice-banner a.button,
.woocommerce-account .woocommerce-info a.button,
.woocommerce-account .woocommerce-info a.wc-forward {
  display: inline-block;
  margin-left: 0.75rem;
  border-radius: 100px !important;
  background-color: var(--wp--preset--color--contrast, #141412) !important;
  background-image: none !important;
  color: #fff !important;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  padding: 0.5rem 1.125rem !important;
  text-decoration: none;
}

/* Mobile: collapse table rows into cards (shop_table_responsive provides data-title) */
@media (max-width: 768px) {
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table tbody tr {
    display: block;
    border: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
  }
  .woocommerce-orders-table tbody td,
  .woocommerce-orders-table tbody th {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border: 0;
    text-align: right;
  }
  .woocommerce-orders-table tbody td::before,
  .woocommerce-orders-table tbody th::before {
    content: attr(data-title);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--wp--preset--color--gray-70, #70706f);
    text-transform: uppercase;
  }
  .woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
  .woocommerce-orders-table__cell-order-actions::before { display: none; }
  .woocommerce-orders-table__cell-order-actions .button { margin: 0; }
}

/* Mobile: WC's smallscreen CSS hides the order-number <th>; show it as a card row */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive tbody th {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border: 0;
    text-align: right;
  }
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive tbody th::before {
    content: attr(data-title);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--wp--preset--color--gray-70, #70706f);
    text-transform: uppercase;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   VIEW ORDER (single) + ADDRESSES
   ════════════════════════════════════════════════════════════════════════════ */
.woocommerce-table--order-details,
.woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.75rem;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--wp--preset--color--gray-10, #ebebeb);
  text-align: left;
  font-size: 0.875rem;
}
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td { font-weight: 700; }
.woocommerce-order-again .button {
  border-radius: 100px;
  background: var(--wp--preset--color--contrast, #141412);
  color: #fff;
  text-transform: uppercase;
}

/* Address card (Addresses page) */
.woocommerce-Address {
  background: #fff;
  border: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
  border-radius: 12px;
  padding: 1.5rem;
}
.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.woocommerce-Address-title .edit {
  flex: 0 0 auto;
  background: var(--wp--preset--color--purple-20, #efe9f5);
  color: var(--wp--preset--color--contrast, #141412);
  border-radius: 100px;
  padding: 0.375rem 1rem;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
.woocommerce-Address-title .edit:hover { background: var(--wp--preset--color--purple-30, #e7def0); }
.woocommerce-Address address {
  font-style: normal;
  line-height: 1.7;
  color: var(--wp--preset--color--gray-80, #5b5b59);
}

/* View-order titles — WC scopes heading rules under .woocommerce (0,1,1), so raise ours */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-downloads__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1rem;
}
/* Order's billing/shipping address blocks → cards */
.woocommerce-account .woocommerce-customer-details address {
  font-style: normal;
  line-height: 1.7;
  color: var(--wp--preset--color--gray-80, #5b5b59);
  border: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
  border-radius: 12px;
  padding: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

/* Address <h2>/<h3> heading size (WC sizes them huge; override) */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.woocommerce-account .woocommerce-Address-title .edit { margin: 0; }

/* Address columns (Addresses page + order billing/shipping): flexbox, NOT grid — WC's
   .col-1/.col-2 carry grid-column placement that breaks grid auto-flow (cards land
   diagonally), and WC floats the columns. Flex + float:none on the items fixes both. */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-account .woocommerce-customer-details .col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
  width: 100%;
}
/* WC's .col2-set clearfix pseudos become flex items and add a leading inset — drop them */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .woocommerce-customer-details .col2-set::before,
.woocommerce-account .woocommerce-customer-details .col2-set::after {
  display: none;
}
.woocommerce-account .woocommerce-Addresses > .woocommerce-Address,
.woocommerce-account .woocommerce-customer-details .woocommerce-column {
  flex: 1 1 240px;
  min-width: 0;
  float: none;
  width: auto;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   FORMS POLISH (edit-address / account-details)
   Fields, first/last side-by-side, and save pill already come from the base layer
   + WC's form-row floats. This only rounds the password fieldset + tidies hints.
   ════════════════════════════════════════════════════════════════════════════ */
.woocommerce-account form fieldset {
  border: 1px solid var(--wp--preset--color--gray-15, #e0e0e0);
  border-radius: 12px;
  padding: 1.25rem 1.5rem 0.25rem;
  margin: 1.25rem 0;
}
.woocommerce-account form legend {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0 0.5rem;
  color: var(--wp--preset--color--contrast, #141412);
}
/* Field hints (e.g. "This will be how your name will be displayed…") */
.woocommerce-account form em,
.woocommerce-account form .description,
.woocommerce-account form span.description {
  display: inline-block;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--wp--preset--color--gray-60, #848483);
  margin-top: 0.375rem;
}