/* Engravous - account.css
   Enqueued on is_account_page() after tokens.css, base.css and layout.css (handle order per
   contract). Covers the logged-out login screen (mockup isLogin minus its B2B-only parts), the
   account head + pill navigation, the dashboard card grid, and WooCommerce's own account
   endpoints (orders, addresses, account details, lost password) so they read as one system.

   WooCommerce core styles stay loaded. Every override below is scoped to body.woocommerce-account
   (added by wc_body_class on the account page) and matches or exceeds the core selector's
   specificity, so ours wins by source order. Colors only via tokens.css variables. */

:root {
  /* The mockup's body copy #4a5a58 is not a token - same derivation as home.css / about.css,
     picks up a shared --eg-muted from base.css when that exists. */
  --eg-account-muted: var(--eg-muted, color-mix(in srgb, var(--color-text) 78%, var(--color-bg)));
  --eg-account-radius-panel: calc(var(--radius-lg) * 1.15);
  --eg-account-label: color-mix(in srgb, var(--color-text) 70%, transparent);
  --eg-account-hover: color-mix(in srgb, var(--color-text) 7%, transparent);
  --eg-account-row-line: color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* ---- WooCommerce layout resets ------------------------------------------- */
/* Core floats the navigation (30%) next to the content (68%). The pill navigation sits above
   the content instead, both full width. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content {
  padding-bottom: 80px;
}
.woocommerce-account .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- kicker (mockup values; base.css .eg-kicker carries the same look) --- */
.eg-account .eg-kicker,
.eg-account-head .eg-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 18px;
}

/* ---- login screen ------------------------------------------------------- */
.eg-account {
  container-type: inline-size;
}
.eg-account--login {
  padding: 32px 0 80px;
}

/* mockup: grid 1.05fr / 0.95fr, gap 56px */
.eg-account-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}
.eg-account-hero__intro,
.eg-account-hero__panel {
  min-width: 0;
}

.eg-account-hero__title {
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  max-width: 16ch;
}
.eg-account-hero__lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--eg-account-muted);
  max-width: 48ch;
  margin: 0 0 32px;
}

/* mockup's three stat tiles, repurposed for the account areas (no net prices) */
.eg-account-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.eg-account-tile {
  min-width: 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.eg-account-tile__title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}
.eg-account-tile__label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-700);
  margin-top: 6px;
}

.eg-account-hero__aside {
  font-size: 14px;
  line-height: 1.6;
  color: var(--eg-account-muted);
  margin: 0;
}
.eg-account-link {
  color: var(--color-accent-700);
  font-weight: 600;
  text-decoration: none;
}
.eg-account-link:hover {
  text-decoration: underline;
}

/* login / register card - mockup: surface, radius lg*1.15, padding 40px 44px */
.eg-account-panel {
  background: var(--color-surface);
  border-radius: var(--eg-account-radius-panel);
  padding: 40px 44px;
}
.eg-account-panel + .eg-account-panel {
  margin-top: 20px;
}
.eg-account-panel__title {
  font-size: 26px;
  line-height: 1.12;
  margin: 0 0 6px;
}
.eg-account-panel__lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--eg-account-muted);
  margin: 0 0 24px;
}
.eg-account-panel__lead-link {
  color: var(--color-accent-700);
  font-weight: 700;
  text-decoration: none;
}
.eg-account-panel__lead-link:hover {
  text-decoration: underline;
}
.eg-account-panel__note {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-neutral-700);
}

/* ---- login / register forms --------------------------------------------- */
/* core boxes form.login / form.register with a border and 2em margins - the card is the box */
.woocommerce-account form.login,
.woocommerce-account form.register {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}
.woocommerce-account .eg-account-form .form-row {
  display: block;
  padding: 0;
  margin: 0 0 16px;
}
.woocommerce-account .eg-account-form .form-row.eg-account-form__field--last {
  margin-bottom: 18px;
}
.woocommerce-account .eg-account-form .form-row label {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 5px;
  color: var(--eg-account-label);
}
.woocommerce-account .eg-account-form .form-row .required {
  display: none;
}
.woocommerce-account .eg-account-form .form-row .input,
.woocommerce-account .eg-account-form .form-row input.input-text {
  min-height: 46px;
}
.eg-account-form__hint,
.woocommerce-account .eg-account-form .woocommerce-privacy-policy-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  margin: 0 0 18px;
}
.woocommerce-account .eg-account-form .woocommerce-privacy-policy-text a {
  color: var(--color-accent-700);
}

/* remember-me + lost password row - mockup: flex, space-between, 13.5px, mb 22px */
.eg-account-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 22px;
  font-size: 13.5px;
}
.woocommerce-account .eg-account-form .eg-account-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--color-text);
}
.woocommerce-account .eg-account-form .eg-account-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.woocommerce-account .eg-account-form .eg-account-form__forgot {
  margin: 0;
  font-size: 13.5px;
}

/* submit - mockup: btn-primary btn-block, 15px, min-height 48px, margin-top 0 */
.woocommerce-account .eg-account-form button.button,
.woocommerce-account .eg-account-form .eg-account-form__submit {
  float: none;
  width: 100%;
  margin: 0;
  min-height: 48px;
  font-size: 15px;
}

/* ---- buttons across the account area (core .button reset -> .btn-primary) */
.woocommerce-account a.button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account a.button.alt,
.woocommerce-account button.button.alt,
.woocommerce-account input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: static;
  float: none;
  left: auto;
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  line-height: 1.2;
  color: var(--color-bg);
  background: var(--color-accent);
  background-image: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 14px 28px;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
}
.woocommerce-account a.button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account a.button.alt:hover,
.woocommerce-account button.button.alt:hover,
.woocommerce-account input.button.alt:hover {
  color: var(--color-bg);
  background: var(--color-accent-600);
}
.woocommerce-account a.button:active,
.woocommerce-account button.button:active,
.woocommerce-account input.button:active {
  background: var(--color-accent-700);
}
.woocommerce-account a.button:disabled,
.woocommerce-account button.button:disabled,
.woocommerce-account input.button:disabled,
.woocommerce-account a.button.disabled,
.woocommerce-account button.button.disabled,
.woocommerce-account input.button.disabled,
.woocommerce-account a.button:disabled:hover,
.woocommerce-account button.button:disabled:hover,
.woocommerce-account input.button:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--color-bg);
  background: var(--color-accent);
  padding: 14px 28px;
}

/* secondary (outline) buttons inside tables, notices and pagination - mockup's small
   btn-secondary: 12.5px, padding 7px 16px */
.woocommerce-account table.shop_table a.button,
.woocommerce-account .woocommerce-pagination a.button,
.woocommerce-account .woocommerce-message a.button,
.woocommerce-account .woocommerce-info a.button,
.woocommerce-account .woocommerce-error a.button {
  min-height: 0;
  padding: 7px 16px;
  font-size: 12.5px;
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-divider);
}
.woocommerce-account table.shop_table a.button:hover,
.woocommerce-account .woocommerce-pagination a.button:hover,
.woocommerce-account .woocommerce-message a.button:hover,
.woocommerce-account .woocommerce-info a.button:hover,
.woocommerce-account .woocommerce-error a.button:hover {
  color: var(--color-text);
  background: var(--eg-account-hover);
}
.woocommerce-account table.shop_table a.button + a.button {
  margin-left: 8px;
}
.woocommerce-account .woocommerce-pagination {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

/* ---- notices (login errors, saved-address confirmations, ...) ------------- */
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
  position: relative;
  width: auto;
  list-style: none;
  margin: 0 0 24px;
  padding: 14px 18px 14px 20px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 0;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
}
.woocommerce-account .woocommerce-message {
  border-left-color: var(--color-accent-2-600);
}
.woocommerce-account .woocommerce-error {
  border-left-color: var(--color-accent-800);
}
.woocommerce-account .woocommerce-info {
  border-left-color: var(--color-neutral-500);
}
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before {
  content: none;
  display: none;
}
.woocommerce-account .woocommerce-error li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-account .woocommerce-error li + li {
  margin-top: 6px;
}
.woocommerce-account .woocommerce-error a,
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-message a {
  color: var(--color-accent-700);
}
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.woocommerce-account .woocommerce-message a.button,
.woocommerce-account .woocommerce-info a.button {
  order: 2;
  margin-left: auto;
}

/* ---- account head + pill navigation (logged in) --------------------------- */
.eg-account-head {
  padding: 32px 0 0;
  margin-bottom: 28px;
}
.eg-account-head__title {
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 16ch;
}

.woocommerce-account .eg-account-nav {
  margin: 0 0 40px;
}
.woocommerce-account .eg-account-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.woocommerce-account .eg-account-nav__item {
  margin: 0;
  padding: 0;
}
.woocommerce-account .eg-account-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 18px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
}
.woocommerce-account .eg-account-nav__link:hover {
  background: var(--eg-account-hover);
}
.woocommerce-account .eg-account-nav__item.is-active .eg-account-nav__link {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.woocommerce-account .eg-account-nav__item.is-active .eg-account-nav__link:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
}

/* ---- dashboard ------------------------------------------------------------ */
.eg-account-dashboard__hello {
  font-size: 15px;
  line-height: 1.6;
  color: var(--eg-account-muted);
  margin: 0 0 24px;
}
.eg-account-dashboard__hello strong {
  color: var(--color-text);
  font-weight: 600;
}
.eg-account-dashboard__hello a {
  color: var(--color-accent-700);
  font-weight: 600;
  text-decoration: none;
}
.eg-account-dashboard__hello a:hover {
  text-decoration: underline;
}

/* mockup's account cards: surface, radius lg*1.15, padding 30px 32px, gap 20px */
.eg-account-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.eg-account-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--eg-account-radius-panel);
  padding: 30px 32px;
}
.eg-account-card:hover {
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-text));
}
.eg-account-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-text);
  margin: 0 0 10px;
}
.eg-account-card__body {
  flex: 1;
  font-size: 14px;
  line-height: 1.7;
  color: var(--eg-account-muted);
  margin: 0 0 16px;
}
.eg-account-card__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-700);
  text-decoration: none;
}
/* whole card is the click target */
.eg-account-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--eg-account-radius-panel);
}
.eg-account-card__link:focus-visible {
  outline: none;
}
.eg-account-card:has(.eg-account-card__link:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- WooCommerce endpoint content (orders, addresses, account details) ---- */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
  margin: 0 0 16px;
}
.woocommerce-account .woocommerce-MyAccount-content h2 {
  font-size: 26px;
}
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: 20px;
}
.woocommerce-account .woocommerce-MyAccount-content p {
  font-size: 15px;
  line-height: 1.6;
}
.woocommerce-account .woocommerce-MyAccount-content mark {
  background: transparent;
  color: var(--color-text);
  font-weight: 600;
}

/* tables: orders, order details, downloads - tokens.css .table look */
.woocommerce-account table.shop_table {
  width: 100%;
  margin: 0 0 24px;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  font-size: 14.5px;
  text-align: left;
}
.woocommerce-account table.shop_table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--color-divider);
  line-height: 1.5;
}
.woocommerce-account table.shop_table td {
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--eg-account-row-line);
  vertical-align: middle;
  line-height: 1.5;
}
.woocommerce-account table.shop_table tbody th,
.woocommerce-account table.shop_table tfoot th,
.woocommerce-account table.shop_table tfoot td {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  border-top: 0;
  border-bottom: 1px solid var(--eg-account-row-line);
}
.woocommerce-account table.shop_table tbody tr:hover > td {
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-number a {
  font-weight: 600;
  color: var(--color-accent-700);
  text-decoration: none;
}
.woocommerce-account table.shop_table .woocommerce-orders-table__cell-order-actions {
  text-align: right;
}

/* addresses (edit-address overview) */
.woocommerce-account .woocommerce-Address {
  background: var(--color-surface);
  border-radius: var(--eg-account-radius-panel);
  padding: 30px 32px;
  margin-bottom: 20px;
}
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-size: 20px;
  margin: 0;
}
.woocommerce-account .addresses .title .edit,
.woocommerce-account .woocommerce-Address-title .edit {
  float: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-accent-700);
  text-decoration: none;
}
.woocommerce-account .woocommerce-Address address,
.woocommerce-account .woocommerce-MyAccount-content address {
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--eg-account-muted);
}

/* forms on the endpoints (edit-account, edit-address, lost password) */
.woocommerce-account .woocommerce-MyAccount-content fieldset,
.woocommerce-account .woocommerce-ResetPassword fieldset {
  border: 0;
  padding: 0;
  margin: 32px 0 0;
  min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content legend {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  line-height: 1.2;
  padding: 0;
  margin: 0 0 16px;
}
.woocommerce-account .woocommerce-MyAccount-content form .form-row,
.woocommerce-account .woocommerce-ResetPassword .form-row {
  padding: 0;
  margin: 0 0 16px;
}
.woocommerce-account .woocommerce-MyAccount-content form .form-row label,
.woocommerce-account .woocommerce-ResetPassword .form-row label {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 5px;
  color: var(--eg-account-label);
}
.woocommerce-account .woocommerce-MyAccount-content form .form-row label.checkbox,
.woocommerce-account .woocommerce-MyAccount-content form .form-row label.inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--color-text);
}
.woocommerce-account .woocommerce-MyAccount-content form .form-row span em {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-style: normal;
  color: var(--color-neutral-700);
}
.woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content form .form-row-last {
  width: calc(50% - 8px);
}
.woocommerce-account .woocommerce-ResetPassword .form-row-first {
  float: none;
  width: 100%;
}

/* inputs: tokens.css .input look, 46px tall like the mockup */
.woocommerce-account form .form-row input.input-text,
.woocommerce-account form .form-row textarea,
.woocommerce-account form .form-row select {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  outline: 0;
  min-height: 46px;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
}
.woocommerce-account form .form-row textarea {
  min-height: 90px;
  border-radius: var(--radius-md);
  resize: vertical;
}
.woocommerce-account form .form-row input.input-text::placeholder,
.woocommerce-account form .form-row textarea::placeholder {
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.woocommerce-account form .form-row input.input-text:hover,
.woocommerce-account form .form-row textarea:hover,
.woocommerce-account form .form-row select:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.woocommerce-account form .form-row input.input-text:focus-visible,
.woocommerce-account form .form-row textarea:focus-visible,
.woocommerce-account form .form-row select:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}
/* core's show/hide password toggle, re-centred for the taller input */
.woocommerce-account form .show-password-input {
  top: 13px;
  right: 14px;
}

/* lost / reset password card */
.woocommerce-account .woocommerce-ResetPassword {
  max-width: 560px;
  background: var(--color-surface);
  border-radius: var(--eg-account-radius-panel);
  padding: 40px 44px;
  margin: 32px 0 80px;
}
.woocommerce-account .woocommerce-ResetPassword > p:first-child {
  font-size: 14px;
  line-height: 1.55;
  color: var(--eg-account-muted);
  margin: 0 0 24px;
}
.woocommerce-account .woocommerce-ResetPassword .form-row .required {
  display: none;
}
.woocommerce-account .woocommerce-ResetPassword button.button {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
}

/* ---- responsive ----------------------------------------------------------- */
/* Container queries: the account page is rendered inside page.php's content column, so the
   grids respond to the column they actually get, not the viewport. */
@container (min-width: 1000px) {
  .eg-account-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}
@container (max-width: 900px) {
  .eg-account-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@container (max-width: 600px) {
  .eg-account-tiles {
    grid-template-columns: 1fr;
  }
}
@container (max-width: 540px) {
  .eg-account-cards {
    grid-template-columns: 1fr;
  }
}
@container (max-width: 480px) {
  .eg-account-panel {
    padding: 28px 24px;
  }
  .eg-account-hero__title {
    font-size: 36px;
  }
  .eg-account-card {
    padding: 24px;
  }
}

/* Viewport fallbacks (browsers without container queries; the head sits outside the container). */
@media (max-width: 1100px) {
  .eg-account-hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 720px) {
  .eg-account-hero__title,
  .eg-account-head__title {
    font-size: 36px;
  }
  .eg-account-tiles,
  .eg-account-cards {
    grid-template-columns: 1fr;
  }
  .eg-account-panel {
    padding: 28px 24px;
  }
  .eg-account-card {
    padding: 24px;
  }
  .eg-account--login {
    padding-top: 24px;
  }
  .eg-account-head {
    padding-top: 24px;
  }
  .woocommerce-account .woocommerce-ResetPassword {
    padding: 28px 24px;
  }
  .woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content form .form-row-last {
    float: none;
    width: 100%;
  }
}