/*
 * My Account — the design, applied to WooCommerce's own markup.
 *
 * Source: design/my-account.css, delivered against docs/my-account-redesign-brief.md.
 * Four changes were made when installing it, all of them because the design was
 * authored as a standalone page and this is a section of a live site:
 *
 *  1. Every selector is scoped to `body.woocommerce-account`. The design styles
 *     `.woocommerce` as the account shell, and on this site that class is also on
 *     the cart, the checkout, the shop and the pay pages — unscoped, its
 *     `display:grid` would have re-laid out all of them.
 *  2. `:root` became `body.woocommerce-account`, for the same reason: the tokens
 *     are the design's, not the site's, and must not reach anything else.
 *  3. `body`, `a`, `*` and `img` rules dropped. The theme already sets those, and a
 *     page-level reset applied to a section fights its own header and footer.
 *  4. `--serif` and `--sans` point at the theme's `--font-display` / `--font-body`.
 *     The design named Instrument Serif and Jost; this site self-hosts Cormorant
 *     Garamond and Outfit, and does not load the other two. Keeping the literal
 *     names would have silently fallen back to Georgia and Helvetica.
 *
 * `.x-container` still supplies the measure and the gutter, so the shell rule keeps
 * only its grid.
 */

/* Xyvira Luxe — My Account, styled against WooCommerce's own markup.

   WooCommerce owns every template here and keeps owning them. Two kinds of rule:

     .woocommerce-*  the plugin's markup, restyled in place. Never reordered, never
                     wrapped. Class names are used exactly as the plugin prints them.
     .xl-*           ours, injected at a documented hook.

   No JavaScript. Everything that varies is decided server-side and arrives in the
   first byte: order status is already a class on the row, the active nav item already
   carries .is-active, and notices are already present or absent in the markup.

   SPECIFICITY BEING FOUGHT — three places, all called out at the rule itself:
     1. .woocommerce table.shop_table          (0,2,1) — Woo + this theme's cart rules
     2. .woocommerce-MyAccount-navigation ul li (0,2,2) — Woo's nav list
     3. .woocommerce form .form-row             (0,2,1) — Woo's float form rows
   Where a plain class cannot win, the same shape is matched or better. Nothing here
   uses !important except the two float resets, which are noted.
   ------------------------------------------------------------------------------- */

body.woocommerce-account{
  --green:#123023; --green-mid:#1C4632; --green-dark:#0E2A1E;
  --cream:#F7F4EE; --cream-2:#EFE9DD; --cream-ink:#F4EDDF;
  --accent:#B98F42; --accent-hi:#DCBB74; --accent-soft:#E2C68A; --accent-ink:#7E5320;
  --accent-wash:#FDF3EA;
  --ok:#2F8055; --info:#2E6E9E; --err:#A8563C;
  --line:rgba(18,48,35,.1);
  --serif:var(--font-display); --sans:var(--font-body);
  --pad:clamp(16px,2.6vw,24px);
  --gutter:clamp(12px,4vw,40px);
}


body.woocommerce-account .xl-eyebrow{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-ink)}
body.woocommerce-account .xl-eyebrow--light{color:var(--accent-soft)}


/* ============================ THE SHELL ============================
   .woocommerce-MyAccount-navigation and .woocommerce-MyAccount-content are
   SIBLINGS inside .woocommerce. That is what makes a two-column shell possible
   without wrapping either of them — the grid goes on the parent the plugin
   already prints. No hook needed, no wrapper opened across two hooks. */
body.woocommerce-account .woocommerce{padding-block:clamp(20px,3vw,36px);display:grid;gap:clamp(16px,2.6vw,32px)}
@media (min-width:900px){
  body.woocommerce-account .woocommerce{grid-template-columns:238px minmax(0,1fr);align-items:start}
  body.woocommerce-account .woocommerce-MyAccount-navigation{position:sticky;top:24px}
}

/* ---------- navigation ----------
   The item list is filtered by every plugin that adds an account tab, so nothing
   below counts, positions or nth-childs the items. Sign out is reached by its own
   stable modifier class, not by "the last one". */
body.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:6px}
/* Mobile: a scrolling chip rail. Bleeds to the screen edge, and its inline padding
   keeps the first chip on the page gutter. */
@media (max-width:899px){
  body.woocommerce-account .woocommerce-MyAccount-navigation{overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  body.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar{height:0}
  body.woocommerce-account .woocommerce-MyAccount-navigation-link{flex:0 0 auto}
}
@media (min-width:900px){
  body.woocommerce-account .woocommerce-MyAccount-navigation ul{flex-direction:column;gap:2px}
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a{display:block;padding:12px 16px;min-height:44px;
  border-radius:999px;font-size:14px;letter-spacing:.02em;white-space:nowrap;
  background:#fff;border:1px solid var(--line);color:var(--green);
  transition:background .2s ease,border-color .2s ease,color .2s ease}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover{border-color:var(--green);color:var(--green)}
@media (min-width:900px){
  body.woocommerce-account .woocommerce-MyAccount-navigation-link a{border-radius:12px;padding:13px 15px}
}
/* Active state: the plugin sets .is-active on the li and aria-current on the link.
   Both are matched, so it survives either one being dropped. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation-link a[aria-current]{background:var(--green);
  border-color:var(--green);color:var(--cream-ink);font-weight:500}
/* Sign out is destructive and belongs apart from the four navigational items. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a{background:transparent;
  border-color:transparent;color:rgba(18,48,35,.7)}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover{background:var(--cream-2);
  color:var(--green)}
@media (min-width:900px){
  body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout{margin-top:10px;
    padding-top:10px;border-top:1px solid var(--line)}
}

/* ---------- content column ---------- */
body.woocommerce-account .woocommerce-MyAccount-content{display:flex;flex-direction:column;gap:clamp(12px,2vw,18px)}

/* ---------- notices ----------
   The wrapper is printed on every screen and is empty most of the time, so :empty
   removes it from the flex flow entirely — otherwise it contributes a gap. When it
   has content it is the first thing in the column and reads as such. */
body.woocommerce-account .woocommerce-notices-wrapper:empty{display:none}
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info{margin:0;border-radius:14px;
  padding:15px 17px;font-size:14.5px;line-height:1.55;list-style:none}
body.woocommerce-account .woocommerce-message{background:rgba(47,128,85,.1);border:1px solid rgba(47,128,85,.34);
  color:#1C5B3A}
body.woocommerce-account .woocommerce-message::before{content:"\2713\00a0\00a0"}
body.woocommerce-account .woocommerce-error{background:rgba(168,86,60,.09);border:1px solid rgba(168,86,60,.34);
  color:#8A4630;padding-left:17px}
body.woocommerce-account .woocommerce-error li + li{margin-top:6px}
body.woocommerce-account .woocommerce-info{background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:rgba(18,48,35,.8)}

/* ---------- Woo's two dashboard paragraphs ----------
   Bare <p> with no class. wp_kses() strips any markup returned from the translation
   filter, so a <span> cannot be injected — the text is ours, the tag is not. They are
   reached by nth-of-type, which is stable because the notices wrapper is a <div>.
   Design intent: nobody opens their account to be told their own name, so the
   greeting is an eyebrow and the count a quiet line. The order card leads. */
body.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(1){margin:0;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
body.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2){margin:-6px 0 4px;
  font-family:var(--serif);font-size:clamp(26px,6.5vw,36px);line-height:1.08;
  color:var(--green)}

/* ============================ SCREEN 1 — dashboard ============================ */

/* Latest order — the answer to the only question most visits are asking. Dark, so it
   leads the column outright rather than competing with three equal tiles. */
body.woocommerce-account .xl-latest{border-radius:20px;padding:var(--pad);color:var(--cream-ink);
  background:linear-gradient(155deg,var(--green),var(--green-mid) 66%,#2C5C42);
  display:flex;flex-direction:column;gap:11px}
body.woocommerce-account .xl-latest .xl-eyebrow{color:var(--accent-soft)}
body.woocommerce-account .xl-latest__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.woocommerce-account .xl-latest__no{font-family:var(--serif);font-weight:400;font-size:clamp(26px,6vw,34px);
  line-height:1;margin:0}
body.woocommerce-account .xl-latest__meta{margin:0;font-size:14px;color:rgba(244,237,223,.82);font-weight:300}
body.woocommerce-account .xl-latest__names{margin:0;font-size:13px;line-height:1.55;color:rgba(244,237,223,.76);
  font-weight:300}
body.woocommerce-account .xl-latest__acts{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}

/* Status pills. The order row also carries its status as a class (see screen 2), so
   these modifiers stay in sync with what the server already told us. */
body.woocommerce-account .xl-pill{flex:0 0 auto;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;white-space:nowrap}
body.woocommerce-account .xl-pill--completed{background:rgba(47,128,85,.22);color:#BFE6CE;
  border:1px solid rgba(47,128,85,.5)}
body.woocommerce-account .xl-pill--processing{background:rgba(46,110,158,.22);color:#C3DEF2;
  border:1px solid rgba(46,110,158,.55)}

body.woocommerce-account .xl-thumbs{list-style:none;margin:0;padding:0;display:flex;gap:8px}
body.woocommerce-account .xl-thumb{position:relative;flex:0 0 58px;height:68px;border-radius:11px;overflow:hidden;
  background:repeating-linear-gradient(135deg,rgba(244,237,223,.16) 0 10px,rgba(244,237,223,.1) 10px 20px)}
body.woocommerce-account .xl-thumb img{width:100%;height:100%;object-fit:cover}
body.woocommerce-account .xl-thumb__q{position:absolute;bottom:4px;right:4px;min-width:18px;height:18px;
  border-radius:999px;background:var(--green);color:var(--cream-ink);font-size:10.5px;
  display:flex;align-items:center;justify-content:center;padding:0 5px}
body.woocommerce-account .xl-thumbs--sm .xl-thumb{flex-basis:46px;height:54px;
  background:repeating-linear-gradient(135deg,#E7E0D1 0 10px,#DFD7C5 10px 20px)}

/* Buttons. Gold takes dark text — a white label on this fill drops below 4.5:1. */
body.woocommerce-account .xl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:12px 20px;border-radius:999px;border:0;font-family:inherit;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,filter .2s ease,border-color .2s ease}
body.woocommerce-account .xl-btn--dark{background:var(--green);color:var(--cream-ink)}
body.woocommerce-account .xl-btn--dark:hover{background:var(--green-mid);color:var(--cream-ink)}
body.woocommerce-account .xl-btn--gold{background:linear-gradient(135deg,var(--accent-hi),var(--accent));color:var(--green)}
body.woocommerce-account .xl-btn--gold:hover{filter:brightness(1.08);color:var(--green)}
body.woocommerce-account .xl-btn--ghost{background:transparent;border:1px solid rgba(18,48,35,.25);color:var(--green)}
body.woocommerce-account .xl-btn--ghost:hover{background:var(--cream-2);color:var(--green)}
body.woocommerce-account .xl-btn--ghostLight{background:transparent;border:1px solid rgba(244,237,223,.34);
  color:var(--cream-ink)}
body.woocommerce-account .xl-btn--ghostLight:hover{background:rgba(244,237,223,.12);color:var(--cream-ink)}

/* Tiles — housekeeping, deliberately quieter than the order above them. */
body.woocommerce-account .xl-tiles{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:620px){ body.woocommerce-account .xl-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
body.woocommerce-account .xl-tile{background:#fff;border:1px solid var(--line);border-radius:18px;padding:var(--pad);
  display:flex;flex-direction:column;gap:7px;min-height:156px;
  transition:border-color .2s ease,transform .2s ease}
body.woocommerce-account .xl-tile:hover{border-color:var(--green);transform:translateY(-2px);color:var(--green)}
body.woocommerce-account .xl-tile__name{font-family:var(--serif);font-size:clamp(21px,5vw,25px);line-height:1.12}
body.woocommerce-account .xl-tile__note{font-size:13.5px;line-height:1.5;color:rgba(18,48,35,.74);font-weight:300}
body.woocommerce-account .xl-tile__cta{margin-top:auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink)}
body.woocommerce-account .xl-tile--gold{background:linear-gradient(150deg,var(--accent-hi),var(--accent));
  border-color:transparent}
body.woocommerce-account .xl-tile--gold:hover{filter:brightness(1.06);border-color:transparent}
/* Full-opacity ink on gold — a reduced alpha fails 4.5:1 against this fill. */
body.woocommerce-account .xl-tile--gold .xl-eyebrow,
body.woocommerce-account .xl-tile--gold .xl-tile__note,
body.woocommerce-account .xl-tile--gold .xl-tile__cta{color:var(--green)}

body.woocommerce-account .xl-empty{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
body.woocommerce-account .xl-empty h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,6vw,32px);
  line-height:1.08;margin:0}
body.woocommerce-account .xl-empty p{margin:0;font-size:15px;line-height:1.6;color:rgba(18,48,35,.76);
  font-weight:300;max-width:44ch}

body.woocommerce-account .xl-screenhead h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,7vw,40px);
  line-height:1.04;margin:8px 0 0}

/* ============================ SCREEN 2 — orders ============================
   Still a <table>, on purpose: overriding the template would freeze a copy of Woo's
   markup in the theme. The columns are filtered to one and our card renders into that
   single cell, so the table only has to stop behaving like a table.

   SPECIFICITY: .shop_table is in the class list, which means this theme's cart rules
   (.woocommerce table.shop_table — 0,2,1) reach these elements. The reset below
   matches that same shape rather than relying on a single class, which is what failed
   the first time. Keep the .woocommerce prefix on these six selectors. */
body.woocommerce-account .woocommerce table.woocommerce-orders-table,
body.woocommerce-account .woocommerce table.woocommerce-orders-table tbody,
body.woocommerce-account .woocommerce table.woocommerce-orders-table tr,
body.woocommerce-account .woocommerce table.woocommerce-orders-table td{display:block;width:auto;
  background:transparent;border:0;padding:0;margin:0}
/* One column, so the header carries nothing a customer needs. */
body.woocommerce-account .woocommerce table.woocommerce-orders-table thead{display:none}
body.woocommerce-account .woocommerce table.woocommerce-orders-table tr + tr{margin-top:10px}

body.woocommerce-account .xl-ocard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:var(--pad);
  display:flex;flex-direction:column;gap:10px}
body.woocommerce-account .xl-ocard__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
body.woocommerce-account .xl-ocard__no{font-family:var(--serif);font-size:clamp(22px,5vw,27px);line-height:1}
body.woocommerce-account .xl-ocard__meta{margin:0;font-size:13px;color:rgba(18,48,35,.72);font-weight:300}
body.woocommerce-account .xl-ocard__names{margin:0;font-size:13px;line-height:1.5;color:rgba(18,48,35,.74);
  font-weight:300}
body.woocommerce-account .xl-ocard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-top:11px;border-top:1px solid var(--line)}
body.woocommerce-account .xl-ocard__total{font-size:18px;font-weight:500;white-space:nowrap}
body.woocommerce-account .xl-ocard__acts{display:flex;gap:8px;flex-wrap:wrap}
body.woocommerce-account .xl-ocard .xl-btn{min-height:44px;padding:11px 17px}

/* Ink-on-white variants of the pills used inside the light card. */
body.woocommerce-account .xl-ocard .xl-pill--completed{background:rgba(47,128,85,.1);color:#1C5B3A;
  border-color:rgba(47,128,85,.4)}
body.woocommerce-account .xl-ocard .xl-pill--processing{background:rgba(46,110,158,.1);color:#245A82;
  border-color:rgba(46,110,158,.4)}

/* The row carries its own status class — a free hook for status-driven styling
   without touching the card markup. A left edge is enough; the pill says the rest. */
body.woocommerce-account .woocommerce-orders-table__row--status-completed .xl-ocard{border-left:3px solid var(--ok)}
body.woocommerce-account .woocommerce-orders-table__row--status-processing .xl-ocard{border-left:3px solid var(--info)}
body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .xl-ocard,
body.woocommerce-account .woocommerce-orders-table__row--status-pending .xl-ocard{border-left:3px solid var(--accent)}
body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .xl-ocard,
body.woocommerce-account .woocommerce-orders-table__row--status-failed .xl-ocard{border-left:3px solid var(--err)}

/* Woo's own empty notice, and its Browse products button. */
body.woocommerce-account .woocommerce-info .woocommerce-Button{flex:0 0 auto}
body.woocommerce-account .woocommerce-info .button,
body.woocommerce-account .woocommerce-pagination .button{display:inline-flex;
  align-items:center;justify-content:center;min-height:46px;padding:12px 20px;
  border-radius:999px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--green);color:var(--cream-ink);border:0}
body.woocommerce-account .woocommerce-info .button:hover,
body.woocommerce-account .woocommerce-pagination .button:hover{background:var(--green-mid);
  color:var(--cream-ink)}
body.woocommerce-account .woocommerce-pagination{display:flex;gap:8px;justify-content:space-between;padding-top:4px}
body.woocommerce-account .woocommerce-pagination .woocommerce-Button--previous,
body.woocommerce-account .woocommerce-pagination .woocommerce-Button--next{background:transparent;
  border:1px solid rgba(18,48,35,.25);color:var(--green)}
body.woocommerce-account .woocommerce-pagination .woocommerce-Button--previous:hover,
body.woocommerce-account .woocommerce-pagination .woocommerce-Button--next:hover{background:var(--cream-2);
  color:var(--green)}
/* Pager with only one direction available should not leave a lone right-aligned link. */
body.woocommerce-account .woocommerce-pagination .woocommerce-Button--next:only-child{margin-left:auto}

/* ============================ SCREEN 3 — address ============================
   .col2-set is float-based. Re-gridded, and the floats neutralised below. */
/* ⚠️ SCOPED TO THE ADDRESS SCREEN WHEN INSTALLED.
   As delivered this read `.woocommerce-MyAccount-content > p:not([class])`,
   which is also true of the dashboard's two opening paragraphs — same element,
   same position, different screen. It loaded after the greeting rules and at
   equal specificity, so it silently reset them: "Hello, Deepanshu" rendered at
   14.5px instead of as the eyebrow, and the order count lost its display size.
   WooCommerce puts `woocommerce-edit-address` on the body of the screen this
   paragraph actually belongs to. */
body.woocommerce-edit-address .woocommerce-MyAccount-content > p:not([class]){margin:0 0 2px;font-size:14.5px;
  line-height:1.6;color:rgba(18,48,35,.76);font-weight:300;max-width:56ch}
body.woocommerce-account .woocommerce-Addresses{display:grid;gap:10px;grid-template-columns:1fr}
/* This store really only uses one address, so billing leads at a wider ratio and
   shipping sits beside it as the secondary card. */
@media (min-width:760px){ body.woocommerce-account .woocommerce-Addresses{grid-template-columns:1.15fr .85fr} }
body.woocommerce-account .woocommerce-Address{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:var(--pad);display:flex;flex-direction:column;gap:10px;float:none;width:auto}
/* Shipping de-emphasised — it is a duplicate for almost every customer here. */
body.woocommerce-account .woocommerce-Address:nth-of-type(2){background:var(--cream-2);border-color:transparent}
body.woocommerce-account .woocommerce-Address-title{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px}
body.woocommerce-account .woocommerce-Address-title h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,4.6vw,24px);line-height:1.1;margin:0}
body.woocommerce-account .woocommerce-Address-title .edit{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-ink);border-bottom:1px solid rgba(126,83,32,.4);padding-bottom:1px}
body.woocommerce-account .woocommerce-Address address{font-style:normal;font-size:15px;line-height:1.6;
  color:rgba(18,48,35,.86);font-weight:300;border:0;padding:0;margin:0}
body.woocommerce-account .xl-addrnote{margin:2px 0 0;font-size:13px;line-height:1.6;color:rgba(18,48,35,.72);
  font-weight:300;max-width:60ch}
body.woocommerce-account .xl-addrnote a{border-bottom:1px solid rgba(18,48,35,.28)}

/* ============================ SCREEN 4 — your details ============================
   SPECIFICITY: .form-row-first / .form-row-last are float classes and Woo styles them
   at .woocommerce form .form-row (0,2,1). The two !important below are the only ones
   in this file — a float has to be cancelled outright before a grid can take over, and
   matching Woo's shape here would still lose to its own !important-free-but-later
   stylesheet under the default enqueue order. If our CSS is enqueued after Woo's,
   these can drop to plain declarations. */
body.woocommerce-account .woocommerce-EditAccountForm{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:var(--pad);display:grid;gap:14px}
@media (min-width:620px){
  body.woocommerce-account .woocommerce-EditAccountForm{grid-template-columns:1fr 1fr}
  body.woocommerce-account .woocommerce-EditAccountForm > .form-row-wide,
body.woocommerce-account .woocommerce-EditAccountForm > fieldset,
body.woocommerce-account .woocommerce-EditAccountForm > .xl-screenhead,
body.woocommerce-account .woocommerce-EditAccountForm > .xl-formnote,
body.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type{grid-column:1/-1}
}
body.woocommerce-account .woocommerce-EditAccountForm .form-row{float:none !important;width:auto !important;
  margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
/* The .clear divs exist only to stop the floats. With floats gone they are noise. */
body.woocommerce-account .woocommerce-EditAccountForm .clear{display:none}

body.woocommerce-account .woocommerce-EditAccountForm label{font-size:12px;letter-spacing:.04em;
  color:rgba(18,48,35,.78)}
body.woocommerce-account .woocommerce-EditAccountForm .required{color:var(--err);text-decoration:none}
body.woocommerce-account .woocommerce-EditAccountForm .input-text{width:100%;min-height:52px;background:#FCFBF8;
  border:1px solid rgba(18,48,35,.18);border-radius:12px;padding:14px 16px;
  font-family:inherit;font-size:15.5px;color:var(--green);outline:none}
body.woocommerce-account .woocommerce-EditAccountForm .input-text:focus{border-color:var(--green);background:#fff;
  box-shadow:0 0 0 3px rgba(18,48,35,.07)}
body.woocommerce-account .woocommerce-EditAccountForm .form-row span em{font-style:normal;font-size:12.5px;
  line-height:1.5;color:rgba(18,48,35,.7)}

/* Password change is a <fieldset> with a <legend>. Legends cannot be positioned
   reliably across browsers, so the fieldset is reset to a plain block and the legend
   is styled in place as a section label rather than fought into a border gap. */
body.woocommerce-account .woocommerce-EditAccountForm fieldset{border:0;margin:0;padding:16px 0 0;
  border-top:1px solid var(--line);display:grid;gap:14px}
body.woocommerce-account .woocommerce-EditAccountForm legend{padding:0;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-ink);float:left;width:100%}
/* float on the legend makes the following grid items start on a new row in every
   engine — without it Chrome and Safari disagree about where the first field sits. */
body.woocommerce-account .woocommerce-EditAccountForm legend + .form-row{clear:both}

/* Woo's eye toggle. It works — style it, do not replace it. */
body.woocommerce-account .password-input{position:relative;display:flex;flex-direction:column}
body.woocommerce-account .password-input .input-text{padding-right:52px}
body.woocommerce-account .show-password-input{position:absolute;top:50%;right:16px;transform:translateY(-50%);
  width:22px;height:22px;cursor:pointer;border:0;background:none;padding:0}
body.woocommerce-account .show-password-input::after{content:"";position:absolute;inset:0;
  background:currentColor;color:rgba(18,48,35,.55);
  -webkit-mask:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  mask:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
body.woocommerce-account .show-password-input.display-password::after{color:var(--green)}

body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button{display:inline-flex;align-items:center;
  justify-content:center;min-height:54px;padding:15px 28px;border-radius:999px;border:0;
  background:var(--green);color:var(--cream-ink);font-family:inherit;font-size:14px;
  letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button:hover{background:var(--green-mid)}
body.woocommerce-account .woocommerce-EditAccountForm > p:last-of-type{margin:0}

body.woocommerce-account .xl-formnote{margin:0;background:var(--accent-wash);border:1px solid rgba(185,143,66,.3);
  border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.6;
  color:rgba(18,48,35,.8);font-weight:300}
body.woocommerce-account .xl-formnote--quiet{background:transparent;border:0;padding:0;font-size:12.5px;
  color:rgba(18,48,35,.72)}

/* ============================ SCREEN 5 — sign in ============================
   The one screen still overridden by the theme, and not as a styling choice: accounts
   are created by OTP at checkout, registration is off, and password reset mails
   @phone.invalid addresses. Phone-first is the requirement.

   This screen has no account nav, so it spans the shell's single column. */
body.woocommerce-account .xl-signin{grid-column:1/-1;display:grid;gap:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--line)}
@media (min-width:900px){ body.woocommerce-account .xl-signin{grid-template-columns:1fr 1fr} }
body.woocommerce-account .xl-signin__panel{background:linear-gradient(165deg,var(--green),var(--green-mid) 62%,#2C5C42);
  color:var(--cream-ink);padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;
  gap:clamp(18px,2.6vw,26px)}
body.woocommerce-account .xl-signin__panel h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,8vw,50px);
  line-height:1;margin:12px 0 0;max-width:15ch}
body.woocommerce-account .xl-signin__lede{margin:0;font-size:16px;line-height:1.65;color:rgba(244,237,223,.86);
  font-weight:300;max-width:40ch}
body.woocommerce-account .xl-perks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
body.woocommerce-account .xl-perks li{display:flex;align-items:flex-start;gap:13px;padding:15px 2px;
  border-top:1px solid rgba(244,237,223,.18)}
body.woocommerce-account .xl-perks__i{flex:0 0 auto;width:34px;height:34px;border-radius:999px;
  border:1px solid rgba(244,237,223,.3);display:flex;align-items:center;
  justify-content:center;font-size:13px;color:var(--accent-soft)}
body.woocommerce-account .xl-perks li > span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
body.woocommerce-account .xl-perks b{font-size:15.5px;font-weight:400;line-height:1.3}
body.woocommerce-account .xl-perks li > span:last-child{font-size:13px;line-height:1.5;
  color:rgba(244,237,223,.76);font-weight:300}
body.woocommerce-account .xl-signin__alt{margin:auto 0 0;font-size:14.5px;line-height:1.6;
  color:rgba(244,237,223,.86);font-weight:300;padding-top:18px;
  border-top:1px solid rgba(244,237,223,.18)}
body.woocommerce-account .xl-signin__alt a{color:var(--accent-soft);border-bottom:1px solid rgba(226,198,138,.4);
  padding-bottom:1px}
body.woocommerce-account .xl-signin__alt a:hover{color:#fff}

body.woocommerce-account .xl-signin__form{background:#fff;padding:clamp(24px,4vw,44px)}
body.woocommerce-account .woocommerce-form-login{display:grid;gap:14px;max-width:420px}
body.woocommerce-account .woocommerce-form-login h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,6vw,34px);line-height:1.06;margin:0}
body.woocommerce-account .xl-signin__sub{margin:-8px 0 0;font-size:14.5px;line-height:1.6;
  color:rgba(18,48,35,.74);font-weight:300}
body.woocommerce-account .woocommerce-form-login .form-row{float:none !important;width:auto !important;margin:0;
  padding:0;display:flex;flex-direction:column;gap:6px}
body.woocommerce-account .woocommerce-form-login label{font-size:12px;letter-spacing:.04em;color:rgba(18,48,35,.78)}
body.woocommerce-account .woocommerce-form-login .required{color:var(--err);text-decoration:none}
body.woocommerce-account .woocommerce-form-login .input-text{width:100%;min-height:54px;background:#FCFBF8;
  border:1px solid rgba(18,48,35,.18);border-radius:12px;padding:15px 17px;
  font-family:inherit;font-size:16px;color:var(--green);outline:none}
body.woocommerce-account .woocommerce-form-login .input-text:focus{border-color:var(--green);background:#fff;
  box-shadow:0 0 0 3px rgba(18,48,35,.07)}
/* +91 at full opacity: it is content, not a disabled affordance. */
body.woocommerce-account .xl-phone{display:flex;align-items:center;background:#FCFBF8;
  border:1px solid rgba(18,48,35,.18);border-radius:12px;padding-left:15px;min-height:54px}
body.woocommerce-account .xl-phone:focus-within{border-color:var(--green);background:#fff;
  box-shadow:0 0 0 3px rgba(18,48,35,.07)}
body.woocommerce-account .xl-phone__cc{flex:0 0 auto;font-size:16px;color:rgba(18,48,35,.88)}
body.woocommerce-account .woocommerce-form-login .xl-phone .input-text{border:0;background:transparent;
  box-shadow:none;padding-left:10px}
body.woocommerce-account .woocommerce-form-login__submit{display:inline-flex;align-items:center;
  justify-content:center;width:100%;min-height:56px;padding:15px 28px;border-radius:999px;
  border:0;background:var(--green);color:var(--cream-ink);font-family:inherit;
  font-size:14px;letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
body.woocommerce-account .woocommerce-form-login__submit:hover{background:var(--green-mid)}
/* Password sign-in is the exception here, so it is disclosed rather than presented.
   <details> needs no script. */
body.woocommerce-account .xl-pwd{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:12px}
body.woocommerce-account .xl-pwd summary{list-style:none;cursor:pointer;font-size:13.5px;color:rgba(18,48,35,.74)}
body.woocommerce-account .xl-pwd summary::-webkit-details-marker{display:none}
body.woocommerce-account .xl-pwd .button{display:inline-flex;align-items:center;justify-content:center;width:100%;
  min-height:52px;padding:14px 24px;border-radius:999px;background:transparent;
  border:1px solid rgba(18,48,35,.25);color:var(--green);font-family:inherit;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
body.woocommerce-account .xl-pwd .button:hover{background:var(--cream-2)}
body.woocommerce-account .xl-tiles--login{grid-column:1/-1}

/* Image placeholders — replace each slot's contents with your <img>. */
body.woocommerce-account [data-image-slot]{position:relative}

@media (prefers-reduced-motion: reduce){
  body.woocommerce-account *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* ⚠️ ADDED WHEN INSTALLING — INHERITANCE IS NOT ENOUGH HERE.
   `.xl-latest` sets `color:var(--cream-ink)` and the design lets its children
   inherit that. On a standalone page they do. On this site the theme sets a
   colour on `h2` directly, and a direct rule always beats an inherited value
   however specific the ancestor is — so the order number rendered in the
   theme's near-black on the card's dark green and could not be read at all.
   Every descendant that relies on inheritance is named here. */
body.woocommerce-account .xl-latest__no,
body.woocommerce-account .xl-latest h2,
body.woocommerce-account .xl-empty h2 { color: inherit; }