/* WDK My Account — loads ONLY on is_account_page()
 * (inc/wdk-account.php, wp_enqueue_scripts @10013, dep 'wdk-shop').
 *
 * WHAT THIS SHEET IS
 * ------------------
 * Pure CSS over WooCommerce's own my-account markup. NO template override
 * ships with it, so every hook on these screens still fires where it fires
 * today: woocommerce_before_account_navigation, woocommerce_account_dashboard,
 * woocommerce_account_content, woocommerce_view_order, woocommerce_login_form,
 * woocommerce_login_form_end, woocommerce_register_form, and whatever the
 * store's Google-login mu-plugin is hooked to. The only additions are the
 * status chip and the dashboard overview printed by inc/wdk-account.php
 * through WooCommerce's own actions.
 *
 * NO @font-face. Archivo Black is declared once, in assets/wdk-shop.css, which
 * is this sheet's enqueue dependency and therefore always present before it.
 *
 * SCOPING RULE, NON-NEGOTIABLE
 * ---------------------------
 * The jade header (with its search field), the ticker, the account popover,
 * the mini cart and the footer all render on the account page too. Every
 * selector below is therefore prefixed with `body.woocommerce-account` AND
 * lands inside a WooCommerce account container. There is not one bare
 * `input`, `table`, `button`, `label`, `select` or `h2` rule in this file, so
 * the header search field and the footer's email signup cannot be reached.
 *
 * The header popovers are NOT inside a `.woocommerce` element — they are
 * `.wdk-pop` / `.wdk-mc` in inc/wdk-chrome.php — and `.woocommerce` as a class
 * selector does not match `class="woocommerce-mini-cart"`, so the `.button`
 * rules here cannot reach the mini cart's own buttons either.
 *
 * LAYERING
 * --------
 * assets/wdk-hdr-jade.css enqueues at priority 10020, AFTER this sheet. That
 * is the known trap for anything that styles a header part. Nothing here
 * styles a header part, and the jade sheet contains no selector outside its
 * own `.wdk-*` / `#ud-banner-bar` namespace, so the two cannot collide.
 *
 * DEFENSIVE LAYOUT
 * ----------------
 * WDK's my-account markup is Porto's, which is not in this repo. The one rule
 * that would BREAK the page if the expected children were missing — the
 * rail/content two-column grid — is gated behind `:has()` on both direct
 * children. Where `:has()` is unsupported or Porto nests them differently,
 * that rule never matches and the page falls back to the stacked layout, which
 * is the mobile layout and is fully styled. Everything else is additive.
 *
 * ACCESSIBILITY BUDGET
 * --------------------
 * Focus is always visible (deep jade, 2.5px, offset 2). Body text is >= 4.5:1
 * on its own ground; --wdka-mut (#6C7570) is 4.75:1 on white and is the floor.
 * Status is never carried by colour alone — every chip prints its name.
 * Motion is colour-transition only and stops on prefers-reduced-motion.
 *
 * PALETTE
 * -------
 * Tokens are namespaced --wdka-* so they cannot collide with wdk-shop.css's
 * --cw-* block, wdk-chrome.css's --wdk-* block or wdk-cart.css's --wdkc-*
 * block. Values are DESIGN-TOKENS.md's: jade, deep jade, jade text, mint,
 * orange, ink, paper, hairline.
 */

:root{
  --wdka-jade:#3EB785;          /* brand jade — borders, tints, accents      */
  --wdka-deep:#1F8A5F;          /* deep jade — hovers, focus rings           */
  --wdka-jadetext:#177A52;      /* jade text — 5.3:1 on white, 5.0:1 on mint */
  /* Filled primary CTAs use the jade-TEXT value, not brand jade: white on
     #3EB785 is 2.5:1. One token — change this line to move every primary
     button on the account screens at once. Matches wdk-cart.css --wdkc-cta. */
  --wdka-cta:#177A52;
  --wdka-cta-hover:#0F6342;
  --wdka-mint:#F1F9F5;          /* emphasis panels, active rail item         */
  --wdka-orange:#FF9800;        /* waiting-on-someone only                   */
  --wdka-orange-ink:#1A1204;    /* 8.6:1 on orange                           */
  --wdka-ink:#151917;
  --wdka-mut:#6C7570;           /* 4.75:1 on white — the floor for meta text */
  --wdka-paper:#F7F8F7;
  --wdka-card:#FFFFFF;
  --wdka-line:#E9EDEA;          /* hairline                                  */
  --wdka-line-2:#D9E0DB;        /* hairline, one step firmer (field borders) */
  --wdka-warn:#A52016;
  --wdka-warn-bg:#FCEDEC;
  --wdka-display:'Archivo Black','Arial Black',Impact,sans-serif;
  --wdka-ui:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wdka-r:10px;                /* card radius     */
  --wdka-r-sm:6px;              /* control radius  */
}

/* ============================================================
   1. PAGE SHELL
   Ground + page title. Porto centres and greys the entry title;
   it becomes a left-aligned Archivo Black plate like the rest of
   the rebuild.
   ============================================================ */
body.woocommerce-account .woocommerce{
  font-family:var(--wdka-ui);color:var(--wdka-ink);
}
body.woocommerce-account .entry-title,
body.woocommerce-account .page-title{
  font-family:var(--wdka-display)!important;font-weight:400!important;
  text-transform:uppercase;letter-spacing:-0.01em;
  font-size:clamp(24px,3.4vw,34px)!important;line-height:1.08!important;
  color:var(--wdka-ink)!important;text-align:left!important;margin:0 0 18px!important;
}

/* Woo's AJAX overlay (address save, details save) lands on the content card;
   give it the same radius so an in-flight save does not square the corners. */
body.woocommerce-account .blockUI.blockOverlay{
  border-radius:var(--wdka-r);background:rgba(247,248,247,.72)!important;opacity:1!important;
}

/* Focus is always visible and always the deep jade (4.3:1 against white, so
   the ring itself clears the 3:1 non-text minimum). */
body.woocommerce-account .woocommerce a:focus-visible,
body.woocommerce-account .woocommerce button:focus-visible,
body.woocommerce-account .woocommerce input:focus-visible,
body.woocommerce-account .woocommerce select:focus-visible,
body.woocommerce-account .woocommerce textarea:focus-visible{
  outline:2.5px solid var(--wdka-deep);outline-offset:2px;border-radius:var(--wdka-r-sm);
}

/* ============================================================
   2. WOOCOMMERCE NOTICES
   The account screens are where Woo's stock amber panel turns up
   at the worst moment — a wrong password, "please enter a valid
   email", "address changed successfully". Same treatment as the
   cart sheet gives cart/checkout, so the two halves of the site
   speak once. State is carried by the GROUND and by a caps
   eyebrow, never by colour alone.
   ============================================================ */
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info{
  display:block;position:relative;list-style:none;
  margin:0 0 18px!important;padding:14px 16px 15px!important;
  border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r-sm);
  background:var(--wdka-paper);box-shadow:none!important;
  font:400 13.5px/1.55 var(--wdka-ui)!important;color:var(--wdka-ink)!important;
}
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-info::before{
  content:"Notice";display:block;
  font:800 10px/1 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--wdka-mut);margin:0 0 7px;
  /* neutralise Woo's icon font glyph, which the pseudo-element replaces */
  position:static;width:auto;height:auto;background:none;border:0;
  font-family:var(--wdka-ui)!important;
}
body.woocommerce-account .woocommerce-message{background:var(--wdka-mint);border-color:#CBE7D8}
body.woocommerce-account .woocommerce-message::before{content:"Done";color:var(--wdka-jadetext)}
body.woocommerce-account .woocommerce-error{background:var(--wdka-warn-bg);border-color:#F0C9C6}
body.woocommerce-account .woocommerce-error::before{content:"Check this";color:var(--wdka-warn)}
body.woocommerce-account .woocommerce-info::before{content:"Heads up"}

body.woocommerce-account .woocommerce-error li,
body.woocommerce-account .woocommerce-message li,
body.woocommerce-account .woocommerce-info li{list-style:none;margin:0 0 4px;padding:0}
body.woocommerce-account .woocommerce-error li:last-child,
body.woocommerce-account .woocommerce-message li:last-child,
body.woocommerce-account .woocommerce-info li:last-child{margin-bottom:0}

body.woocommerce-account .woocommerce-error a,
body.woocommerce-account .woocommerce-message a,
body.woocommerce-account .woocommerce-info a{
  color:var(--wdka-jadetext)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-account .woocommerce-error a{color:var(--wdka-warn)!important}

/* The "View cart" / "Continue" button some notices carry: Woo floats it right,
   which drops it into the middle of the sentence once the panel is a plain
   block. Its own line, at its own width, at every viewport. */
body.woocommerce-account .woocommerce-message .button,
body.woocommerce-account .woocommerce-info .button{
  float:none!important;display:flex;width:fit-content;max-width:100%;margin:12px 0 0!important;
}

/* ============================================================
   3. BUTTONS — one instrument, three voices.
   PRIMARY   = filled --wdka-cta, white label (Log in, Register,
               Save address, Save changes, Pay)
   SECONDARY = ink outline on white (View, Browse products)
   QUIET     = plain jade-text link (Lost your password?, Edit)

   THE GOOGLE-LOGIN EXCLUSION IS LOAD-BEARING. WDK's Google sign-in
   is a store mu-plugin that is not in this repo, so its markup is
   unknown; it may well render as <a class="button …google…">. Any
   class containing google / social / openid / miniorange / nsl is
   excluded from every rule in this section so the plugin's own
   branding survives intact. Nothing in this sheet hides it, and
   there is no display:none anywhere in the logged-out screens.

   No bare `button` or `input[type=submit]` selector is used: Woo
   puts `.button` or `.woocommerce-Button` on every control it owns
   here, so matching those two classes covers the whole page while
   leaving any third-party control alone by default.
   ============================================================ */
body.woocommerce-account .woocommerce .button:not([class*="google"]):not([class*="social"]):not([class*="openid"]):not([class*="miniorange"]):not([class*="nsl"]),
body.woocommerce-account .woocommerce .woocommerce-Button:not([class*="google"]):not([class*="social"]):not([class*="openid"]):not([class*="miniorange"]):not([class*="nsl"]){
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;border-radius:var(--wdka-r-sm);
  border:1.5px solid var(--wdka-ink);background:var(--wdka-card);color:var(--wdka-ink);
  font:800 12px/1 var(--wdka-ui);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
  box-shadow:none;text-shadow:none;
}
body.woocommerce-account .woocommerce .button:not([class*="google"]):not([class*="social"]):not([class*="openid"]):not([class*="miniorange"]):not([class*="nsl"]):hover,
body.woocommerce-account .woocommerce .woocommerce-Button:not([class*="google"]):not([class*="social"]):not([class*="openid"]):not([class*="miniorange"]):not([class*="nsl"]):hover{
  background:var(--wdka-ink);color:#fff;border-color:var(--wdka-ink);
}

/* PRIMARY. Woo marks its own primary with .alt; the named submits below are
   the ones this area actually has. */
body.woocommerce-account .woocommerce .button.alt,
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce-EditAccountForm button[type=submit],
body.woocommerce-account .woocommerce-address-fields button[type=submit],
body.woocommerce-account .woocommerce-ResetPassword button[type=submit],
body.woocommerce-account .woocommerce-orders-table .button.pay{
  background:var(--wdka-cta);border-color:var(--wdka-cta);color:#fff;
  font-family:var(--wdka-display);font-weight:400;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;
}
body.woocommerce-account .woocommerce .button.alt:hover,
body.woocommerce-account .woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-form-register__submit:hover,
body.woocommerce-account .woocommerce-EditAccountForm button[type=submit]:hover,
body.woocommerce-account .woocommerce-address-fields button[type=submit]:hover,
body.woocommerce-account .woocommerce-ResetPassword button[type=submit]:hover,
body.woocommerce-account .woocommerce-orders-table .button.pay:hover{
  background:var(--wdka-cta-hover);border-color:var(--wdka-cta-hover);color:#fff;
}
body.woocommerce-account .woocommerce .button:disabled,
body.woocommerce-account .woocommerce .button.disabled{
  opacity:1;background:var(--wdka-paper);border-color:var(--wdka-line-2);color:var(--wdka-mut);cursor:not-allowed;
}

/* Cancel is destructive and quiet — a link, not a second button competing with
   Pay. It keeps its full label and a visible underline, so it is not a
   colour-only affordance. */
body.woocommerce-account .woocommerce-orders-table .button.cancel{
  min-height:auto;padding:0;border:0;background:none;color:var(--wdka-warn);
  font:700 12px/1.4 var(--wdka-ui);letter-spacing:.04em;text-transform:none;
  text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-account .woocommerce-orders-table .button.cancel:hover{
  background:none;color:#7C1810;border:0;
}

/* ============================================================
   4. FORM FIELDS — the site's input language (46px, hairline,
   jade on focus), matching the cart/checkout sheet exactly so a
   customer moving between the two never sees two input designs.
   Scoped hard: Woo's own form containers only, never a bare
   element selector.
   ============================================================ */
body.woocommerce-account .woocommerce .form-row input.input-text,
body.woocommerce-account .woocommerce .form-row textarea,
body.woocommerce-account .woocommerce .form-row select,
body.woocommerce-account .woocommerce .woocommerce-form-row input.input-text,
body.woocommerce-account .woocommerce-address-fields input.input-text,
body.woocommerce-account .woocommerce-address-fields select,
body.woocommerce-account .woocommerce-EditAccountForm input.input-text,
body.woocommerce-account .woocommerce-ResetPassword input.input-text{
  width:100%;box-sizing:border-box;min-height:46px;
  padding:11px 13px;border:1.5px solid var(--wdka-line-2);border-radius:var(--wdka-r-sm);
  background:var(--wdka-card);color:var(--wdka-ink);
  font:400 14.5px/1.4 var(--wdka-ui);box-shadow:none;
  transition:border-color .15s ease;
}
body.woocommerce-account .woocommerce .form-row input.input-text:focus,
body.woocommerce-account .woocommerce .form-row select:focus,
body.woocommerce-account .woocommerce .form-row textarea:focus,
body.woocommerce-account .woocommerce-address-fields input.input-text:focus,
body.woocommerce-account .woocommerce-address-fields select:focus,
body.woocommerce-account .woocommerce-EditAccountForm input.input-text:focus,
body.woocommerce-account .woocommerce-ResetPassword input.input-text:focus{
  border-color:var(--wdka-jade);box-shadow:none;
}
body.woocommerce-account .woocommerce .form-row input.input-text::placeholder{color:var(--wdka-mut);opacity:1}

/* Field label = caps eyebrow. `.checkbox` rows keep a normal sentence label. */
body.woocommerce-account .woocommerce .form-row > label,
body.woocommerce-account .woocommerce .woocommerce-form-row > label,
body.woocommerce-account .woocommerce-address-fields .form-row > label,
body.woocommerce-account .woocommerce-EditAccountForm .form-row > label{
  display:block;margin:0 0 6px;
  font:800 10.5px/1.4 var(--wdka-ui);letter-spacing:.11em;text-transform:uppercase;
  color:var(--wdka-mut);
}
body.woocommerce-account .woocommerce .form-row > label.woocommerce-form__label-for-checkbox,
body.woocommerce-account .woocommerce .form-row > label.checkbox{
  display:inline-flex;align-items:center;gap:9px;
  font:400 13.5px/1.5 var(--wdka-ui);letter-spacing:0;text-transform:none;color:var(--wdka-ink);
  margin:0;
}
body.woocommerce-account .woocommerce .form-row input[type=checkbox],
body.woocommerce-account .woocommerce .form-row input[type=radio]{
  width:18px;height:18px;flex:0 0 auto;accent-color:var(--wdka-deep);margin:0;
}
body.woocommerce-account .woocommerce .required{color:var(--wdka-warn);text-decoration:none;border:0}
body.woocommerce-account .woocommerce .form-row,
body.woocommerce-account .woocommerce .woocommerce-form-row{margin:0 0 16px;padding:0}
body.woocommerce-account .woocommerce em,
body.woocommerce-account .woocommerce .woocommerce-form-row span.description{
  display:block;margin-top:6px;font:400 12.5px/1.5 var(--wdka-ui);font-style:normal;color:var(--wdka-mut);
}

/* Woo's show/hide-password eye, which core absolutely-positions inside a
   .password-input wrapper. Kept, given a real hit area and a visible focus
   ring — it is a control, not decoration. */
body.woocommerce-account .woocommerce .password-input{position:relative;display:block;width:100%}
body.woocommerce-account .woocommerce .password-input input.input-text{padding-right:46px}
body.woocommerce-account .woocommerce .show-password-input{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;opacity:.6;
}
body.woocommerce-account .woocommerce .show-password-input:hover,
body.woocommerce-account .woocommerce .show-password-input.display-password{opacity:1}
body.woocommerce-account .woocommerce .show-password-input:focus-visible{
  outline:2.5px solid var(--wdka-deep);outline-offset:-2px;border-radius:var(--wdka-r-sm);
}

/* select2, if Porto/Woo swaps the country + province selects for it on the
   Addresses tab. */
body.woocommerce-account .woocommerce .select2-container .select2-selection--single{
  height:46px;border:1.5px solid var(--wdka-line-2);border-radius:var(--wdka-r-sm);background:var(--wdka-card);
}
body.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__rendered{
  padding-left:12px;color:var(--wdka-ink);font:400 14.5px/44px var(--wdka-ui);
}
body.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__arrow{height:44px}
body.woocommerce-account .woocommerce .select2-container--open .select2-selection--single{border-color:var(--wdka-jade)}

/* ============================================================
   5. LOGGED OUT — the login card.
   Woo prints:
     div.woocommerce
       div.u-columns.col2-set#customer_login
         div.u-column1.col-1  > h2 + form.woocommerce-form-login
         div.u-column2.col-2  > h2 + form.woocommerce-form-register
   …and, when registration is DISABLED, no #customer_login wrapper
   at all — just the h2 + form. Both cases are handled: the pair
   becomes two side-by-side cards on a paper ground, and the lone
   login form becomes one centred card.
   ============================================================ */
body.wdk-account-out .woocommerce{
  max-width:960px;margin-inline:auto;
}
body.wdk-account-out #customer_login.col2-set{
  display:grid;grid-template-columns:1fr;gap:22px;align-items:start;
  /* Porto/bootstrap put negative side gutters on .col2-set rows. */
  margin:0;padding:0;
}
@media (min-width:820px){
  body.wdk-account-out #customer_login.col2-set{grid-template-columns:1fr 1fr;gap:26px}
}
body.wdk-account-out #customer_login > .u-column1,
body.wdk-account-out #customer_login > .u-column2,
body.wdk-account-out #customer_login > .col-1,
body.wdk-account-out #customer_login > .col-2{
  float:none!important;width:auto!important;max-width:none!important;
  margin:0!important;padding:26px 24px 24px!important;
  background:var(--wdka-card);border:1.5px solid var(--wdka-line);
  border-radius:var(--wdka-r);box-sizing:border-box;
}
/* The register column is the secondary offer: same card, quieter ground, so
   the eye lands on Log in first without either being hidden. */
body.wdk-account-out #customer_login > .u-column2,
body.wdk-account-out #customer_login > .col-2{
  background:var(--wdka-paper);
}

/* Registration disabled => no #customer_login. Centre the lone form. */
body.wdk-account-out .woocommerce > form.woocommerce-form-login{
  max-width:440px;margin:0 auto;padding:26px 24px 24px;
  background:var(--wdka-card);border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);
}
body.wdk-account-out .woocommerce > h2{text-align:center}
body.wdk-account-out .woocommerce:has(> #customer_login) > h2{text-align:left}

/* Card headings. Woo emits a bare <h2>; scoped to the logged-out account page
   and to the login wrapper, so no other h2 on the site is reachable. */
body.wdk-account-out #customer_login h2,
body.wdk-account-out .woocommerce > h2,
body.wdk-account-out .woocommerce-ResetPassword ~ h2{
  font-family:var(--wdka-display)!important;font-weight:400!important;
  font-size:19px!important;line-height:1.15!important;letter-spacing:-0.01em;
  text-transform:uppercase;color:var(--wdka-ink)!important;
  margin:0 0 4px!important;padding:0!important;border:0!important;
}
/* A one-line lead under each heading, so the two cards read as an offer and
   not as two identical forms. Content-only, never load-bearing. */
body.wdk-account-out #customer_login > .u-column1 > h2::after{
  content:"Welcome back — pick up where you left off.";
  display:block;margin-top:5px;
  font:400 13px/1.5 var(--wdka-ui);letter-spacing:0;text-transform:none;color:var(--wdka-mut);
}
body.wdk-account-out #customer_login > .u-column2 > h2::after{
  content:"New here? Create an account for faster checkout and order tracking.";
  display:block;margin-top:5px;
  font:400 13px/1.5 var(--wdka-ui);letter-spacing:0;text-transform:none;color:var(--wdka-mut);
}

body.wdk-account-out form.woocommerce-form-login,
body.wdk-account-out form.woocommerce-form-register{
  margin:18px 0 0;padding:0;border:0;background:none;
}
body.wdk-account-out .woocommerce-form-login__submit,
body.wdk-account-out .woocommerce-form-register__submit{
  width:100%;margin:4px 0 0!important;float:none!important;
}
/* Woo puts "Remember me" and the submit in ONE <p class="form-row">. Split
   them onto two rows so the checkbox is not fighting the button for width. */
body.wdk-account-out form.woocommerce-form-login p.form-row:has(> .woocommerce-form-login__rememberme){
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
body.wdk-account-out .woocommerce-form-login__rememberme{flex:1 1 100%}

/* "Lost your password?" — a quiet link, not a button. */
body.wdk-account-out .woocommerce-LostPassword{
  margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--wdka-line);
}
body.wdk-account-out .woocommerce-LostPassword a{
  color:var(--wdka-jadetext);font:400 13px/1.4 var(--wdka-ui);
  text-decoration:underline;text-underline-offset:3px;
}
body.wdk-account-out .woocommerce-LostPassword a:hover{color:var(--wdka-cta-hover)}

body.wdk-account-out .woocommerce-privacy-policy-text p,
body.wdk-account-out .woocommerce-form-register .woocommerce-privacy-policy-text{
  font:400 12.5px/1.55 var(--wdka-ui);color:var(--wdka-mut);margin:0 0 14px;
}
body.wdk-account-out .woocommerce-privacy-policy-text a{color:var(--wdka-jadetext);text-decoration:underline;text-underline-offset:3px}

/* ---- THIRD-PARTY SOCIAL / GOOGLE SIGN-IN --------------------------------
   The store's Google login is an mu-plugin outside this repo, hooked to one
   of the woocommerce_login_form* actions. Its own CSS is left completely
   alone (see the exclusion list in section 3) — all that happens here is
   breathing room and a labelled divider so the button does not appear to
   belong to the form above it. If the plugin's container is not one of these
   the rules simply never match and nothing is harmed. NOTHING IS HIDDEN. */
body.wdk-account-out .woocommerce-form-login .nsl-container,
body.wdk-account-out .woocommerce-form-login [class*="social-login"],
body.wdk-account-out .woocommerce-form-login [class*="google-login"],
body.wdk-account-out .woocommerce-form-login [class*="mo-openid"],
body.wdk-account-out .woocommerce-form-login [class*="miniorange"],
body.wdk-account-out .woocommerce-form-login [class*="wdk-google"]{
  display:block;margin:16px 0 0;padding:16px 0 0;position:relative;
  border-top:1px solid var(--wdka-line);
}
body.wdk-account-out .woocommerce-form-login .nsl-container::before,
body.wdk-account-out .woocommerce-form-login [class*="social-login"]::before,
body.wdk-account-out .woocommerce-form-login [class*="google-login"]::before,
body.wdk-account-out .woocommerce-form-login [class*="wdk-google"]::before{
  content:"or";position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  padding:0 10px;background:var(--wdka-card);
  font:800 10px/1 var(--wdka-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wdka-mut);
}

/* ---- LOST PASSWORD ------------------------------------------------------
   form.woocommerce-ResetPassword.lost_reset_password, both the "enter your
   email" step and the "choose a new password" step. Same centred card. */
body.woocommerce-account .woocommerce-ResetPassword{
  max-width:440px;margin:0 auto;padding:26px 24px 24px;
  background:var(--wdka-card);border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);
}
body.woocommerce-account .woocommerce-ResetPassword > p:first-of-type{
  font:400 13.5px/1.6 var(--wdka-ui);color:var(--wdka-mut);margin:0 0 16px;
}
body.woocommerce-account .woocommerce-ResetPassword button[type=submit]{width:100%}
/* Woo's lost-password CONFIRMATION is a bare notice + paragraph on an empty
   page. Give the paragraph the same measure as the card it replaced so the
   screen does not fall out of the design at the last step. */
body.wdk-acct-ep-lost-password .woocommerce > p{
  max-width:440px;margin:0 auto;font:400 14px/1.65 var(--wdka-ui);color:var(--wdka-ink);
}

/* ============================================================
   6. LOGGED IN — rail + content.
   Woo prints:
     div.woocommerce
       div.woocommerce-notices-wrapper
       nav.woocommerce-MyAccount-navigation > ul > li[.is-active] > a
       div.woocommerce-MyAccount-content
   Woo's own stylesheet floats the nav 30% / content 68%. The
   float is cleared unconditionally (so a Porto/Woo half-layout can
   never survive), and the two-column grid is gated on BOTH being
   direct children of .woocommerce. If they are not, the page
   stacks — rail as a horizontal tab strip above the content —
   which is the mobile layout and is fully designed.
   ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content{
  float:none!important;width:auto!important;margin:0;
}
@media (min-width:900px){
  body.wdk-account-in .woocommerce:has(> .woocommerce-MyAccount-navigation):has(> .woocommerce-MyAccount-content){
    display:grid;grid-template-columns:242px minmax(0,1fr);
    column-gap:28px;row-gap:0;align-items:start;
  }
  /* Notices come first in the DOM but must span both columns, above both. */
  body.wdk-account-in .woocommerce:has(> .woocommerce-MyAccount-navigation):has(> .woocommerce-MyAccount-content) > .woocommerce-notices-wrapper{
    grid-column:1 / -1;
  }
}

/* ---- the rail -----------------------------------------------------------
   Desktop: a white card of stacked rows, the current one on mint with a jade
   edge and ink text (contrast is carried by the text, not by the jade).
   Mobile: the same list becomes a horizontal, scrollable tab strip. */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  background:var(--wdka-card);border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);
  overflow:hidden;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;margin:0;padding:0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li{
  list-style:none;margin:0;padding:0;border-bottom:1px solid var(--wdka-line);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
body.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;position:relative;padding:13px 16px 13px 18px;
  font:800 12px/1.3 var(--wdka-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--wdka-ink);text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:var(--wdka-paper);color:var(--wdka-jadetext);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a{
  background:var(--wdka-mint);color:var(--wdka-ink);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a::before{
  background:var(--wdka-jade);
}
/* Log out reads as an exit, not as another destination. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a{
  color:var(--wdka-mut);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover{
  color:var(--wdka-warn);background:var(--wdka-warn-bg);
}

@media (max-width:899.5px){
  body.woocommerce-account .woocommerce-MyAccount-navigation{
    margin:0 0 18px;border-radius:var(--wdka-r);
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul{
    display:flex;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    /* The strip still scrolls; its scrollbar does not show (owner, 2026-08-20:
       "there is a grey line under dashboard remove it on mobile"). A thin
       scrollbar under three tabs reads as a stray rule beneath the active tab's
       own 3px indicator, not as a control. */
    scrollbar-width:none;-ms-overflow-style:none;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{
    width:0;height:0;display:none;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation li{
    border-bottom:0;border-right:1px solid var(--wdka-line);flex:0 0 auto;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{border-right:0}
  body.woocommerce-account .woocommerce-MyAccount-navigation li a{
    padding:13px 16px;white-space:nowrap;
  }
  body.woocommerce-account .woocommerce-MyAccount-navigation li a::before{
    left:0;right:0;top:auto;bottom:0;width:auto;height:3px;
  }
}

/* ---- the content card --------------------------------------------------- */
body.woocommerce-account .woocommerce-MyAccount-content{
  background:var(--wdka-card);border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);
  padding:24px;box-sizing:border-box;min-width:0;
  font:400 14.5px/1.65 var(--wdka-ui);color:var(--wdka-ink);
}
body.woocommerce-account .woocommerce-MyAccount-content > h2,
body.woocommerce-account .woocommerce-MyAccount-content > h3,
body.woocommerce-account .woocommerce-MyAccount-content legend{
  font-family:var(--wdka-display)!important;font-weight:400!important;
  font-size:16px!important;line-height:1.2!important;letter-spacing:.01em;text-transform:uppercase;
  color:var(--wdka-ink)!important;
  margin:0 0 14px!important;padding:0 0 10px!important;border-bottom:1px solid var(--wdka-line)!important;
  width:100%;float:none;
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.wdk-schip){
  color:var(--wdka-jadetext);text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover{color:var(--wdka-cta-hover)}
body.woocommerce-account .woocommerce-MyAccount-content > p:last-child{margin-bottom:0}

/* ============================================================
   7. DASHBOARD
   Core prints two unclassed <p> paragraphs (the "Hello X" greeting
   and a sentence explaining the rail) and then fires
   woocommerce_account_dashboard, where inc/wdk-account.php prints
   the overview. Both core paragraphs are KEPT — the greeting
   carries the Log out link — and merely re-set: the greeting reads
   as a heading, the explanation as quiet meta. Scoped to the
   dashboard endpoint so no other tab's paragraphs are touched.
   ============================================================ */
body.wdk-acct-ep-dashboard .woocommerce-MyAccount-content > p:first-of-type{
  font-family:var(--wdka-display);font-weight:400;font-size:20px;line-height:1.2;
  letter-spacing:-0.01em;text-transform:uppercase;color:var(--wdka-ink);margin:0 0 6px;
}
body.wdk-acct-ep-dashboard .woocommerce-MyAccount-content > p:first-of-type a{
  font-family:var(--wdka-ui);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:none;
}
body.wdk-acct-ep-dashboard .woocommerce-MyAccount-content > p:first-of-type + p{
  font:400 13.5px/1.6 var(--wdka-ui);color:var(--wdka-mut);
  margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--wdka-line);
}

/* ---- the overview (markup from inc/wdk-account.php) ---------------------- */
body.woocommerce-account .wdk-ov{margin:0}
body.woocommerce-account .wdk-ov-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:0 0 18px;padding:0;
}
body.woocommerce-account .wdk-ov-stat{
  background:var(--wdka-paper);border:1px solid var(--wdka-line);border-radius:var(--wdka-r-sm);
  padding:12px 14px;min-width:0;
}
body.woocommerce-account .wdk-ov-stat dt{
  font:800 10px/1 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--wdka-mut);margin:0 0 7px;
}
body.woocommerce-account .wdk-ov-stat dd{
  margin:0;font-family:var(--cw-money);font-weight:600;font-size:22px;line-height:1.05;
  letter-spacing:-0.01em;color:var(--wdka-ink);font-variant-numeric:tabular-nums;
}
body.woocommerce-account .wdk-ov-stat dd .amount,
body.woocommerce-account .wdk-ov-stat dd bdi{font-family:inherit;font-size:inherit;color:inherit}
body.woocommerce-account .wdk-ov-stat dd small{
  display:block;margin-top:5px;
  font:400 12px/1.4 var(--wdka-ui);letter-spacing:0;color:var(--wdka-mut);
}

body.woocommerce-account .wdk-ov-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
}
body.woocommerce-account .wdk-ov-panel{
  background:var(--wdka-card);border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);
  padding:16px 16px 15px;min-width:0;
}
@media (min-width:640px){
  body.woocommerce-account .wdk-ov-wide{grid-column:1 / -1}
}
body.woocommerce-account .wdk-ov-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--wdka-line);
}
body.woocommerce-account .wdk-ov-head h4{
  margin:0;font:800 11px/1.2 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--wdka-mut);
}
body.woocommerce-account .wdk-ov-edit{
  font:700 12px/1.2 var(--wdka-ui);color:var(--wdka-jadetext);text-decoration:underline;text-underline-offset:3px;
  flex:0 0 auto;
}
body.woocommerce-account .wdk-ov-order{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 8px;
}
body.woocommerce-account .wdk-ov-oid{
  font-family:var(--wdka-display);font-weight:400;font-size:19px;line-height:1;letter-spacing:-0.01em;
  color:var(--wdka-ink)!important;text-decoration:none!important;
}
body.woocommerce-account .wdk-ov-oid:hover{color:var(--wdka-jadetext)!important;text-decoration:underline!important}
body.woocommerce-account .wdk-ov-when{font:400 12.5px/1.2 var(--wdka-ui);color:var(--wdka-mut)}
body.woocommerce-account .wdk-ov-lines{
  margin:0 0 12px;font:400 13.5px/1.55 var(--wdka-ui);color:var(--wdka-ink);
}
body.woocommerce-account .wdk-ov-foot{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin:0;padding:12px 0 0;border-top:1px solid var(--wdka-line);
}
body.woocommerce-account .wdk-ov-sum{display:flex;align-items:baseline;gap:9px}
body.woocommerce-account .wdk-ov-sum > span{
  font:800 10px/1 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--wdka-mut);
}
body.woocommerce-account .wdk-ov-sum .amount,
body.woocommerce-account .wdk-ov-sum bdi{
  font-family:var(--cw-money);font-weight:600;font-size:19px;color:var(--wdka-ink);
  font-variant-numeric:tabular-nums;
}
body.woocommerce-account .wdk-ov-ghost{
  display:inline-flex;align-items:center;min-height:38px;padding:0 15px;
  border:1.5px solid var(--wdka-ink);border-radius:var(--wdka-r-sm);
  background:var(--wdka-card);color:var(--wdka-ink)!important;
  font:800 11px/1 var(--wdka-ui);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none!important;transition:background .15s ease,color .15s ease;
}
body.woocommerce-account .wdk-ov-ghost:hover{background:var(--wdka-ink);color:#fff!important}
body.woocommerce-account .wdk-ov-name{
  margin:0 0 4px;font-family:var(--wdka-display);font-weight:400;font-size:15px;line-height:1.2;
  letter-spacing:-0.01em;color:var(--wdka-ink);
}
body.woocommerce-account .wdk-ov-body{margin:0;font:400 13.5px/1.6 var(--wdka-ui);font-style:normal;color:var(--wdka-ink)}
body.woocommerce-account .wdk-ov-mut{color:var(--wdka-mut)}
body.woocommerce-account address.wdk-ov-body{font-style:normal}

/* ============================================================
   8. STATUS CHIPS
   Printed by inc/wdk-account.php into WooCommerce's own status
   cell and into the dashboard's latest-order panel. The dot is
   decorative (aria-hidden) — the chip always prints the status
   NAME, so colour is never the only carrier. `mut` is the
   fallback tone for WDK's driver statuses (udldd-*,
   out-for-delivery) and for anything else unrecognised: ink on
   paper, 12.6:1, fully legible. NOTHING is ever set to
   display:none or to a colour that hides the label.
   ============================================================ */
body.woocommerce-account .wdk-schip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 8px;border-radius:999px;border:1px solid var(--wdka-line-2);
  background:var(--wdka-paper);color:#3A423E;
  font:800 10.5px/1.35 var(--wdka-ui);letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;text-decoration:none!important;vertical-align:middle;
}
body.woocommerce-account .wdk-schip > i{
  width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.85;
}
body.woocommerce-account .wdk-schip-ok{background:#E6F4EC;border-color:#BFE3D0;color:#146A48}
body.woocommerce-account .wdk-schip-go{background:var(--wdka-mint);border-color:#BFE3D0;color:var(--wdka-jadetext)}
body.woocommerce-account .wdk-schip-wait{background:#FFF3E0;border-color:#FFD79A;color:#7A4A00}
body.woocommerce-account .wdk-schip-off{background:var(--wdka-warn-bg);border-color:#F0C9C6;color:var(--wdka-warn)}
body.woocommerce-account .wdk-schip-mut{background:var(--wdka-paper);border-color:var(--wdka-line-2);color:#3A423E}

/* FALLBACK. If a plugin already owns the order-status column, the PHP hook
   stands down (inc/wdk-account.php, wdk_acct_register_order_columns) and the
   cell keeps whatever that plugin prints. In that case the cell still gets a
   tone, taken from the class WooCommerce puts on the ROW —
   `woocommerce-orders-table__row--status-<slug>` — and a dot, so the column
   does not read as plain grey text next to a designed table. Guarded with
   :has() so it can never double up with a real chip. */
body.woocommerce-account td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip)){
  font:800 11px/1.4 var(--wdka-ui);letter-spacing:.07em;text-transform:uppercase;color:#3A423E;
}
body.woocommerce-account td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip))::after{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:currentColor;margin-left:7px;vertical-align:middle;opacity:.85;
}
body.woocommerce-account tr[class*="--status-completed"] td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip)){color:#146A48}
body.woocommerce-account tr[class*="--status-processing"] td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip)){color:var(--wdka-jadetext)}
body.woocommerce-account tr[class*="--status-on-hold"] td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip)),
body.woocommerce-account tr[class*="--status-pending"] td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip)){color:#7A4A00}
body.woocommerce-account tr[class*="--status-cancelled"] td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip)),
body.woocommerce-account tr[class*="--status-failed"] td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip)),
body.woocommerce-account tr[class*="--status-refunded"] td.woocommerce-orders-table__cell-order-status:not(:has(.wdk-schip)){color:var(--wdka-warn)}

/* ============================================================
   9. ORDERS TABLE
   table.woocommerce-orders-table.shop_table.shop_table_responsive
   with, per row, td.woocommerce-orders-table__cell-order-number /
   -order-date / -order-status / -order-total / -order-actions,
   each carrying data-title="<column label>".

   Desktop  : a real table, hairline rows, tabular money.
   <=767px  : CARD PER ORDER, built from those data-title labels —
              no template override, and it degrades to a plain
              stacked list if a data-title is ever missing.
   ============================================================ */
body.woocommerce-account table.woocommerce-orders-table{
  width:100%;border-collapse:collapse;border:0;margin:0;
  font:400 14px/1.5 var(--wdka-ui);color:var(--wdka-ink);
}
body.woocommerce-account table.woocommerce-orders-table thead th{
  padding:0 12px 9px;border:0;border-bottom:1.5px solid var(--wdka-line);
  background:none;text-align:left;
  font:800 10px/1.2 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--wdka-mut);
}
body.woocommerce-account table.woocommerce-orders-table tbody td{
  padding:15px 12px;border:0;border-bottom:1px solid var(--wdka-line);background:none;vertical-align:middle;
}
body.woocommerce-account table.woocommerce-orders-table tbody tr:last-child td{border-bottom:0}
body.woocommerce-account table.woocommerce-orders-table tbody tr:hover td{background:var(--wdka-paper)}

body.woocommerce-account table.woocommerce-orders-table th:first-child,
body.woocommerce-account table.woocommerce-orders-table td:first-child{padding-left:2px}
body.woocommerce-account table.woocommerce-orders-table th:last-child,
body.woocommerce-account table.woocommerce-orders-table td:last-child{padding-right:2px;text-align:right}

/* Order number — the anchor of the row (printed by wdk_acct_orders_number_column,
   with core's own "#123" link as the fallback shape). */
body.woocommerce-account .woocommerce-orders-table__cell-order-number a,
body.woocommerce-account a.wdk-ol-id{
  display:inline-block;
  font-family:var(--wdka-display);font-weight:400;font-size:15px;line-height:1.2;letter-spacing:-0.01em;
  color:var(--wdka-ink)!important;text-decoration:none!important;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover,
body.woocommerce-account a.wdk-ol-id:hover{color:var(--wdka-jadetext)!important;text-decoration:underline!important}
body.woocommerce-account .wdk-ol-items{
  display:block;margin-top:4px;max-width:34ch;
  font:400 12.5px/1.45 var(--wdka-ui);color:var(--wdka-mut);
}
body.woocommerce-account .woocommerce-orders-table__cell-order-date{
  font-size:13px;color:var(--wdka-mut);white-space:nowrap;
}
/* The cell's own text is core's "for N items" trailer, which is meta; the
   money inside it is the figure, so the display face lives on .amount/bdi. */
body.woocommerce-account .woocommerce-orders-table__cell-order-total{
  font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--wdka-mut);
}
body.woocommerce-account .woocommerce-orders-table__cell-order-total .amount,
body.woocommerce-account .woocommerce-orders-table__cell-order-total bdi{
  font-family:var(--cw-money);font-weight:600;font-size:15px;color:var(--wdka-ink);
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 12px;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button{
  min-height:38px;padding:0 14px;font-size:11px;
}
/* View is the least interesting thing on the row — the number already links to
   the same place — so it drops to a quiet link and leaves Pay as the only
   button. */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view{
  min-height:auto;padding:0;border:0;background:none;color:var(--wdka-jadetext);
  font:700 12px/1.4 var(--wdka-ui);letter-spacing:.04em;text-transform:none;
  text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button.view:hover{
  background:none;border:0;color:var(--wdka-cta-hover);
}

/* ---- CARD PER ORDER, <=767px ------------------------------------------- */
@media (max-width:767.5px){
  body.woocommerce-account table.woocommerce-orders-table,
  body.woocommerce-account table.woocommerce-orders-table tbody,
  body.woocommerce-account table.woocommerce-orders-table tr,
  body.woocommerce-account table.woocommerce-orders-table td{
    display:block;width:auto;
  }
  body.woocommerce-account table.woocommerce-orders-table thead{
    /* visually hidden, not removed: the header cells stay in the a11y tree */
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  body.woocommerce-account table.woocommerce-orders-table tbody tr{
    border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);
    padding:14px;margin:0 0 12px;background:var(--wdka-card);
  }
  body.woocommerce-account table.woocommerce-orders-table tbody tr:hover td{background:none}
  body.woocommerce-account table.woocommerce-orders-table tbody td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:7px 0;border-bottom:1px solid var(--wdka-line);text-align:right;
  }
  body.woocommerce-account table.woocommerce-orders-table tbody td::before{
    content:attr(data-title);flex:0 0 auto;text-align:left;
    font:800 10px/1.5 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--wdka-mut);
  }
  /* Order number is the card's headline: full width, no label, no rule. */
  body.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-number{
    display:block;text-align:left;padding-top:0;border-bottom:0;
  }
  body.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-number::before{display:none}
  body.woocommerce-account .woocommerce-orders-table__cell-order-number a,
  body.woocommerce-account a.wdk-ol-id{font-size:18px}
  body.woocommerce-account .wdk-ol-items{max-width:none}
  /* Actions row: full-width buttons, no label, no rule. */
  body.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions{
    justify-content:flex-start;border-bottom:0;padding:12px 0 0;margin-top:4px;
    border-top:1px solid var(--wdka-line);
  }
  body.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before{display:none}
  body.woocommerce-account table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions .button.pay{flex:1 1 auto}
  body.woocommerce-account table.woocommerce-orders-table tbody td:first-child,
  body.woocommerce-account table.woocommerce-orders-table tbody td:last-child{padding-left:0;padding-right:0}
}

/* Empty state — Woo prints it as an .woocommerce-message/.woocommerce-info
   notice with a "Browse products" button; section 2 already handles it. */

/* Pagination (Previous / Next). */
body.woocommerce-account .woocommerce-pagination{
  display:flex;gap:10px;justify-content:space-between;align-items:center;
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--wdka-line);
}
body.woocommerce-account .woocommerce-pagination .button{min-height:40px;font-size:11px}

/* ============================================================
   10. DOWNLOADS
   table.woocommerce-table--order-downloads, same data-title
   pattern; the same card conversion applies below 768px.
   ============================================================ */
body.woocommerce-account table.woocommerce-table--order-downloads{
  width:100%;border-collapse:collapse;border:0;margin:0;
  font:400 14px/1.5 var(--wdka-ui);color:var(--wdka-ink);
}
body.woocommerce-account table.woocommerce-table--order-downloads thead th{
  padding:0 12px 9px;border:0;border-bottom:1.5px solid var(--wdka-line);background:none;text-align:left;
  font:800 10px/1.2 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--wdka-mut);
}
body.woocommerce-account table.woocommerce-table--order-downloads tbody td{
  padding:14px 12px;border:0;border-bottom:1px solid var(--wdka-line);background:none;vertical-align:middle;
}
body.woocommerce-account table.woocommerce-table--order-downloads tbody tr:last-child td{border-bottom:0}
@media (max-width:767.5px){
  body.woocommerce-account table.woocommerce-table--order-downloads,
  body.woocommerce-account table.woocommerce-table--order-downloads tbody,
  body.woocommerce-account table.woocommerce-table--order-downloads tr,
  body.woocommerce-account table.woocommerce-table--order-downloads td{display:block;width:auto}
  body.woocommerce-account table.woocommerce-table--order-downloads thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  body.woocommerce-account table.woocommerce-table--order-downloads tbody tr{
    border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);padding:14px;margin:0 0 12px;
  }
  body.woocommerce-account table.woocommerce-table--order-downloads tbody td{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:7px 0;border-bottom:1px solid var(--wdka-line);text-align:right;
  }
  body.woocommerce-account table.woocommerce-table--order-downloads tbody td:last-child{border-bottom:0}
  body.woocommerce-account table.woocommerce-table--order-downloads tbody td::before{
    content:attr(data-title);flex:0 0 auto;text-align:left;
    font:800 10px/1.5 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--wdka-mut);
  }
}

/* ============================================================
   11. ADDRESSES — two cards.
   div.woocommerce-Addresses.u-columns.col2-set
     > div.woocommerce-Address(.u-column1/.u-column2)
         > header.woocommerce-Address-title > h2 + a.edit
         > address
   When only ONE address type is enabled Woo prints a single
   .woocommerce-Address with no .col2-set wrapper; the grid below
   is on the wrapper, so that case simply renders one full-width
   card. Nothing is assumed about which column is which.
   ============================================================ */
body.woocommerce-account .woocommerce-Addresses{
  display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0 0;
}
@media (min-width:700px){
  body.woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr 1fr;gap:16px}
}
body.woocommerce-account .woocommerce-Address{
  float:none!important;width:auto!important;margin:0!important;padding:16px 16px 15px!important;
  background:var(--wdka-card);border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);
  box-sizing:border-box;
}
body.woocommerce-account .woocommerce-Address-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid var(--wdka-line);
}
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3{
  margin:0!important;padding:0!important;border:0!important;
  font-family:var(--wdka-display)!important;font-weight:400!important;
  font-size:13px!important;line-height:1.2!important;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wdka-mut)!important;
}
body.woocommerce-account .woocommerce-Address-title a.edit{
  flex:0 0 auto;font:700 12px/1.2 var(--wdka-ui);color:var(--wdka-jadetext)!important;
  text-decoration:underline;text-underline-offset:3px;
}
body.woocommerce-account .woocommerce-Address address{
  margin:0;font:400 14px/1.7 var(--wdka-ui);font-style:normal;color:var(--wdka-ink);
}
/* "You have not set up this type of address yet." */
body.woocommerce-account .woocommerce-Address > p{margin:0;font-size:13.5px;color:var(--wdka-mut)}

/* The edit-address FORM. Woo wraps the fields in
   .woocommerce-address-fields__field-wrapper; two columns on wide screens,
   with the wide rows (address_1, address_2, company) spanning both. */
body.woocommerce-account .woocommerce-address-fields__field-wrapper{
  display:grid;grid-template-columns:1fr;gap:0 16px;
}
@media (min-width:640px){
  body.woocommerce-account .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr 1fr}
  body.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-wide,
  body.woocommerce-account .woocommerce-address-fields__field-wrapper > .woocommerce-form-row--wide{grid-column:1 / -1}
}
body.woocommerce-account .woocommerce-address-fields .form-row{float:none!important;width:auto!important}
body.woocommerce-account .woocommerce-address-fields button[type=submit]{margin-top:4px}

/* ============================================================
   12. ACCOUNT DETAILS
   form.woocommerce-EditAccountForm.edit-account, with a
   <fieldset><legend>Password change</legend> block partway down.
   Same input language as the login card.
   ============================================================ */
body.woocommerce-account .woocommerce-EditAccountForm .form-row{float:none!important;width:auto!important}
@media (min-width:640px){
  body.woocommerce-account .woocommerce-EditAccountForm > p.form-row-first,
  body.woocommerce-account .woocommerce-EditAccountForm > p.form-row-last{
    display:inline-block;width:calc(50% - 8px);vertical-align:top;
  }
  body.woocommerce-account .woocommerce-EditAccountForm > p.form-row-first{margin-right:14px}
}
body.woocommerce-account .woocommerce-EditAccountForm fieldset{
  margin:8px 0 18px;padding:18px 0 0;border:0;border-top:1px solid var(--wdka-line);
}
body.woocommerce-account .woocommerce-EditAccountForm fieldset legend{
  border-bottom:0!important;padding:0!important;margin:0 0 14px!important;
  font-size:13px!important;letter-spacing:.06em;color:var(--wdka-mut)!important;
}

/* ============================================================
   13. VIEW ORDER
   Core prints, inside .woocommerce-MyAccount-content:
     <p>Order #<mark class="order-number"> was placed on
        <mark class="order-date"> and is currently
        <mark class="order-status">.</p>
     [ <h2>Order updates</h2> <ol class="woocommerce-OrderUpdates …"> ]
     do_action( 'woocommerce_view_order' )
       -> section.woocommerce-order-details
            table.woocommerce-table--order-details (tbody = goods, tfoot = money)
          section.woocommerce-customer-details

   EVERY ONE OF THOSE HOOKS IS LEFT ALONE — this is styling only,
   with no template override, so anything a plugin adds to
   woocommerce_view_order still appears in its own place.

   mark.order-status becomes a NEUTRAL chip. It is deliberately not
   colour-coded: the status text there is core's, there is no filter
   to tag it with, and WDK's driver statuses would be the ones most
   likely to get the wrong colour. Neutral and legible beats
   confident and wrong.
   ============================================================ */
body.wdk-acct-ep-view-order .woocommerce-MyAccount-content > p:first-of-type{
  margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--wdka-line);
  font:400 14.5px/1.7 var(--wdka-ui);color:var(--wdka-mut);
}
body.woocommerce-account .woocommerce-MyAccount-content mark.order-number,
body.woocommerce-account .woocommerce-MyAccount-content mark.order-date,
body.woocommerce-account .woocommerce-MyAccount-content mark.order-status{
  background:none;color:var(--wdka-ink);font-weight:700;
}
body.woocommerce-account .woocommerce-MyAccount-content mark.order-number{
  font-family:var(--wdka-display);font-weight:400;font-size:1.15em;letter-spacing:-0.01em;
}
body.woocommerce-account .woocommerce-MyAccount-content mark.order-status{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:999px;border:1px solid var(--wdka-line-2);
  background:var(--wdka-paper);color:#3A423E;
  font:800 10.5px/1.4 var(--wdka-ui);letter-spacing:.07em;text-transform:uppercase;
  vertical-align:baseline;
}

body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details{
  display:block;margin:22px 0 0;
}
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details h2{
  font-family:var(--wdka-display)!important;font-weight:400!important;
  font-size:13px!important;line-height:1.2!important;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wdka-mut)!important;margin:0 0 12px!important;padding:0!important;border:0!important;
}

/* ---- the goods list. Same language as the cart's line items: a bordered
   list, product name in the body face, money in the display face, tabular. */
body.woocommerce-account table.woocommerce-table--order-details{
  width:100%;border-collapse:collapse;border:1.5px solid var(--wdka-line);border-radius:var(--wdka-r);
  overflow:hidden;margin:0;font:400 14px/1.5 var(--wdka-ui);color:var(--wdka-ink);
}
body.woocommerce-account table.woocommerce-table--order-details thead th{
  padding:11px 14px;border:0;border-bottom:1.5px solid var(--wdka-line);
  background:var(--wdka-paper);text-align:left;
  font:800 10px/1.2 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--wdka-mut);
}
body.woocommerce-account table.woocommerce-table--order-details thead th:last-child{text-align:right}
body.woocommerce-account table.woocommerce-table--order-details tbody td{
  padding:13px 14px;border:0;border-bottom:1px solid var(--wdka-line);background:none;vertical-align:top;
}
body.woocommerce-account table.woocommerce-table--order-details tbody tr:last-child td{border-bottom:0}
body.woocommerce-account table.woocommerce-table--order-details td.product-name a{
  color:var(--wdka-ink)!important;font-weight:700;text-decoration:none!important;
}
body.woocommerce-account table.woocommerce-table--order-details td.product-name a:hover{
  color:var(--wdka-jadetext)!important;text-decoration:underline!important;
}
/* The strong.product-quantity that core appends, and any item meta rows. */
body.woocommerce-account table.woocommerce-table--order-details td.product-name strong.product-quantity{
  display:inline-block;margin-left:6px;font-weight:800;font-size:12.5px;color:var(--wdka-mut);
}
body.woocommerce-account table.woocommerce-table--order-details .wc-item-meta,
body.woocommerce-account table.woocommerce-table--order-details .variation{
  margin:6px 0 0;padding:0;list-style:none;font-family:'Figtree',var(--wdka-ui);font-weight:600;font-size:12.5px;line-height:1.5;color:var(--wdka-mut);
}
body.woocommerce-account table.woocommerce-table--order-details .wc-item-meta li{margin:0;padding:0;list-style:none}
body.woocommerce-account table.woocommerce-table--order-details .wc-item-meta li p,
body.woocommerce-account table.woocommerce-table--order-details .wc-item-meta li strong{display:inline;margin:0;font-size:inherit}
body.woocommerce-account table.woocommerce-table--order-details td.product-total{
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
}
body.woocommerce-account table.woocommerce-table--order-details td.product-total .amount,
body.woocommerce-account table.woocommerce-table--order-details td.product-total bdi{
  font-family:var(--cw-money);font-weight:600;font-size:14px;color:var(--wdka-ink);
}

/* ---- the receipt (tfoot). Subtotal, shipping, the money layer's own fee
   rows ("Insurance Fee", "Tip (…)"), tax and total. Those rows are
   RESTYLED ONLY: this sheet cannot add, rename, move or remove one, and no
   :nth-child or row-count assumption is made anywhere in it, so a row
   appearing or disappearing changes nothing but the height. */
body.woocommerce-account table.woocommerce-table--order-details tfoot th{
  padding:9px 14px;border:0;background:var(--wdka-paper);text-align:left;
  font:400 13px/1.5 var(--wdka-ui);letter-spacing:0;text-transform:none;color:var(--wdka-mut);
}
body.woocommerce-account table.woocommerce-table--order-details tfoot td{
  padding:9px 14px;border:0;background:var(--wdka-paper);text-align:right;white-space:nowrap;
  font:600 13px/1.5 'Figtree',var(--wdka-ui);color:var(--wdka-ink);font-variant-numeric:tabular-nums;
}
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:first-child th,
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:first-child td{
  padding-top:13px;border-top:1.5px solid var(--wdka-line);
}
/* The last footer row is the total whatever it is called and however many
   rows precede it — matched by position from the END, never by index. */
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child th{
  font:800 11px/1.4 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--wdka-ink);
  padding-bottom:14px;
}
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td,
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td .amount,
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td bdi{
  font-family:var(--cw-money);font-weight:600;font-size:20px;line-height:1.1;color:var(--wdka-ink);
  padding-bottom:14px;
}
body.woocommerce-account table.woocommerce-table--order-details tfoot td small{
  display:block;font-family:var(--wdka-ui);font-size:11.5px;font-weight:400;color:var(--wdka-mut);
}

/* ---- order updates (customer notes) — the cart list's language. */
body.woocommerce-account ol.woocommerce-OrderUpdates{
  list-style:none;margin:18px 0 0;padding:0;
}
body.woocommerce-account ol.woocommerce-OrderUpdates li.woocommerce-OrderUpdate{
  list-style:none;margin:0 0 10px;padding:14px 16px;
  background:var(--wdka-mint);border:1px solid #CBE7D8;border-radius:var(--wdka-r-sm);
}
body.woocommerce-account ol.woocommerce-OrderUpdates li.woocommerce-OrderUpdate:last-child{margin-bottom:0}
body.woocommerce-account .woocommerce-OrderUpdate-meta{
  margin:0 0 6px;font:800 10px/1.3 var(--wdka-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--wdka-jadetext);
}
body.woocommerce-account .woocommerce-OrderUpdate-description p{
  margin:0 0 8px;font:400 13.5px/1.6 var(--wdka-ui);color:var(--wdka-ink);
}
body.woocommerce-account .woocommerce-OrderUpdate-description p:last-child{margin-bottom:0}

/* ---- customer details block under the order. */
body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses{
  display:grid;grid-template-columns:1fr;gap:14px;margin:0;
}
@media (min-width:700px){
  body.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses{grid-template-columns:1fr 1fr;gap:16px}
}
body.woocommerce-account .woocommerce-customer-details .woocommerce-column{
  float:none!important;width:auto!important;margin:0!important;padding:16px!important;
  background:var(--wdka-paper);border:1px solid var(--wdka-line);border-radius:var(--wdka-r);
  box-sizing:border-box;
}
body.woocommerce-account .woocommerce-customer-details address{
  margin:0;padding:0;border:0;font:400 14px/1.7 var(--wdka-ui);font-style:normal;color:var(--wdka-ink);
}
body.woocommerce-account .woocommerce-customer-details--phone,
body.woocommerce-account .woocommerce-customer-details--email{
  margin:8px 0 0;padding:0;font-size:13px;color:var(--wdka-mut);
}

/* ============================================================
   14. RESPONSIVE — down to 320px.
   ============================================================ */
@media (max-width:600px){
  body.woocommerce-account .woocommerce-MyAccount-content{padding:16px}
  body.woocommerce-account .wdk-ov-panel{padding:14px}
  body.wdk-account-out #customer_login > .u-column1,
  body.wdk-account-out #customer_login > .u-column2,
  body.wdk-account-out #customer_login > .col-1,
  body.wdk-account-out #customer_login > .col-2,
  body.wdk-account-out .woocommerce > form.woocommerce-form-login,
  body.woocommerce-account .woocommerce-ResetPassword{padding:20px 16px 18px!important}
  body.woocommerce-account table.woocommerce-table--order-details thead th,
  body.woocommerce-account table.woocommerce-table--order-details tbody td,
  body.woocommerce-account table.woocommerce-table--order-details tfoot th,
  body.woocommerce-account table.woocommerce-table--order-details tfoot td{padding-left:12px;padding-right:12px}
  body.woocommerce-account .woocommerce-pagination{flex-direction:column;align-items:stretch}
  body.woocommerce-account .woocommerce-pagination .button{width:100%}
}
@media (max-width:400px){
  body.woocommerce-account .woocommerce-MyAccount-content{padding:14px}
  body.woocommerce-account .wdk-ov-stats{grid-template-columns:1fr}
  body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td,
  body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td .amount,
  body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td bdi{font-size:18px}
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions{flex-direction:column;align-items:stretch}
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button{width:100%}
}

/* ============================================================
   15. MOTION.
   Nothing here animates position or size; the transitions are
   colour only. They still stop on request.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  body.woocommerce-account .woocommerce *,
  body.woocommerce-account .wdk-ov *{
    transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;
  }
}


/* ---- page measure + dashboard clean-up (owner, 2026-08-18) ------------
   The account pages ran the full width of the screen; they now sit on the
   same 1610px measure as the header and the shop, so the site keeps one
   column width throughout. */
/* Superseded 2026-08-18: the measure moved up to Porto's .container in
   wdk-chrome.css so EVERY page shares the header's 1610px + 40px, not just
   this one. Keeping a second max-width here would indent the account content
   a second time inside the now-boxed container. */
body.woocommerce-account .woocommerce,
body.woocommerce-account .entry-content > .woocommerce{max-width:none;padding-inline:0}

/* WooCommerce's customer email-verification prompt ("Confirm email address to
   check for past orders") is removed from the account pages at the owner's
   request. It is matched by the link its own controller prints
   (Internal\CustomerEmailVerification\VerificationController), not by its
   wording, so a copy change cannot resurrect it. Other notices — order
   messages, address saved, login errors — are untouched. */
body.woocommerce-account .woocommerce-info:has(a[href*="wc_send_verification"]),
body.woocommerce-account .woocommerce-message:has(a[href*="wc_send_verification"]){display:none}

/* Porto prints a grid of dashboard icon tiles (Orders / Downloads /
   Addresses / Account details / Wishlist / Logout) from its own
   myaccount/dashboard.php. Ours replaces that template, and these rules
   catch the same grid if a Porto update reintroduces it through a hook. */
body.woocommerce-account .porto-my-account-icons,
body.woocommerce-account .my-account-icons,
body.woocommerce-account .woocommerce-MyAccount-content .porto-links-block{display:none}

/* Money figures ride Figtree sitewide (owner, 2026-08-18); the $ mark steps
   down on the figures — stats, order totals, receipt grand total. */
body.woocommerce-account .wdk-ov-stat dd .woocommerce-Price-currencySymbol,
body.woocommerce-account .wdk-ov-sum .woocommerce-Price-currencySymbol,
body.woocommerce-account .woocommerce-orders-table__cell-order-total .woocommerce-Price-currencySymbol,
body.woocommerce-account table.woocommerce-table--order-details td.product-total .woocommerce-Price-currencySymbol,
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td .woocommerce-Price-currencySymbol{
  font-size:.6em}

/* ---- Porto's featured-box wrapper --------------------------------------
   Porto wraps the account forms in .featured-box > .box-content, which draws a
   grey 1px frame and a 4px jade rule across the top. Every form in here already
   IS a card with its own border, so the page rendered as a box inside a box
   (owner, 2026-08-20: "remove the outside border"). Scoped to the account pages
   so .featured-box keeps its styling everywhere else it is used. */
body.woocommerce-account .featured-box,
body.woocommerce-account .featured-box > .box-content{
  border:0!important;box-shadow:none!important;background:none!important;
  border-radius:0!important;padding:0!important;margin:0!important;
}

/* ---- miniOrange social login ---------------------------------------------
   The "Login with Google" block ships its own fixed width and side padding, so
   inside our card it measured 298px against a 280px content box and hung 19px
   PAST THE LEFT EDGE — which is what made the whole island read as off-centre
   (owner, 2026-08-20). Nothing about the button's own styling is touched; it is
   just made to live inside the card and line up with the fields above it. */
body.woocommerce-account .mo-openid-app-icons,
body.woocommerce-account div[class*="mo-openid"]{
  width:100%!important;max-width:100%!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;
  box-sizing:border-box!important;float:none!important;
}
body.woocommerce-account .mo-openid-app-icons > *{max-width:100%;box-sizing:border-box}
/* Its inner list is centred so a narrower button sits mid-card rather than
   pinned left against full-width inputs. */
body.woocommerce-account .mo-openid-app-icons ul{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;
}
/* reCAPTCHA is a fixed 304px iframe — never let it push the card either. */
body.woocommerce-account .g-recaptcha,
body.woocommerce-account div[class*="recaptcha"]{
  max-width:100%!important;overflow:hidden;
}
/* reCAPTCHA is a fixed-width iframe (274px in a ~306px card), so it cannot be
   stretched — but it can sit in the middle instead of hugging the left edge. */
/* The 274px box IS .g-recaptcha itself, so it needs auto side margins — flex
   centring on it only moved its children, which were already flush. */
body.woocommerce-account .g-recaptcha,
body.woocommerce-account div[class*="recaptcha"]{
  width:fit-content!important;max-width:100%!important;
  margin-left:auto!important;margin-right:auto!important;
}
body.woocommerce-account .g-recaptcha > div{margin-left:auto!important;margin-right:auto!important}