/* ============================================================================
   VENTRA - MY ACCOUNT
   Enqueued on is_account_page() with a dependency on `vsv4-dark`, so this file
   ALWAYS prints after vsc-core.css and vsc-dark.css and therefore wins every
   equal-specificity tie on source order. That is load-bearing - see section 1.

   ---------------------------------------------------------------------------
   THE CLASS CONTRACT  (one vocabulary; the templates emit EXACTLY these)
   ---------------------------------------------------------------------------
   SHELL - navigation.php emits the hero (it is the first child of .woocommerce)
     .vsc-acct-pagehero            centred hero, spans both grid tracks
     .vsc-acct-pagehero-eyebrow    "YOUR ACCOUNT"
     .vsc-acct-pagehero h1         "My account"

   NAV - navigation.php (WooCommerce's own <nav>/<li> classes are preserved)
     .vsc-acct-nav                 <ul>
     .vsc-acct-nav-link            <a>
     .vsc-acct-nav-ic              leading icon
     .vsc-acct-nav-label           text
     .vsc-acct-nav-badge           REAL badge markup (live points balance)
     .vsc-acct-nav-sep             divider <li> before Log out
     li.is-active                  WooCommerce-supplied active state

   SHARED
     .vsc-acct-card                panel
     .vsc-acct-card-head           title row
     .vsc-acct-card-title          28px page-level title
     .vsc-acct-card-title--sm      20px section title
     .vsc-acct-card-sub            muted sub-line
     .vsc-acct-card-link           right-side cyan link
     .vsc-acct-icontile            40px cyan-tinted icon tile
     .vsc-acct-btn                 pill base
     .vsc-acct-btn--cyan           filled cyan + glow (the primary action)
     .vsc-acct-btn--ghost          outline
     .vsc-acct-btn--dark           dark / disabled pill
     .is-disabled                  disabled modifier
     .vsc-acct-empty (+ -ic)       empty state

   DASHBOARD - dashboard.php
     .vsc-acct-dash                wrapper
     .vsc-acct-welcome             gradient welcome card (spec 4a)
     .vsc-acct-welcome-row / -name / -email / -sub
     .vsc-acct-avatar
     .vsc-acct-two                 bottom two-up grid (spec 4d)
     .vsc-acct-ship                shipping address lines
     .vsc-acct-ql / -row / -label / -sub    quick links

   REWARDS BALANCE CARD - dashboard 4b AND rewards page 8 (via the --gold modifier)
     .vsc-acct-rw  (+ .vsc-acct-rw--gold)
     .vsc-acct-rw-top / -col / -col--right
     .vsc-acct-rw-k                uppercase kicker
     .vsc-acct-rw-bal / -bal-u     big number + "pts"
     .vsc-acct-rw-worth / -worth-sub
     .vsc-acct-tier                gold "Researcher member" pill
     .vsc-acct-bar > i             progress track + fill
     .vsc-acct-bar-foot
     .vsc-acct-rw-cta              button row

   ORDER ROWS - dashboard.php + orders.php (one row design, both places)
     .vsc-acct-olist / .vsc-acct-orow / .vsc-acct-orow-main
     .vsc-acct-onum / .vsc-acct-ometa / .vsc-acct-opts (GOLD)
     .vsc-acct-oright / .vsc-acct-ototal
     .vsc-acct-ostatus (+ --completed/--failed/--on-hold/...)
     .vsc-acct-track (+ -n)        full-width tracking button
     .vsc-acct-oactions            WooCommerce actions (includes "Pay")
     .vsc-acct-oextra (+ -k)       plugin-added column
     .vsc-acct-pager               WooCommerce pagination

   ADDRESSES - my-address.php
     .vsc-acct-addr-grid / .vsc-acct-addr
     .vsc-acct-addr-head / -k / -body / -empty

   FORMS - form-edit-account.php, form-edit-address.php
     .vsc-acct-form / .vsc-acct-fgrid
     .vsc-acct-fsubmit / .vsc-acct-fnote / .vsc-acct-fieldnote
     .vsc-acct-pwd-extra (+ .is-open)   JS-revealed password fields
     (full-width fields use WooCommerce's own .form-row-wide - no second name for it)

   VIEW ORDER - view-order.php
     .vsc-acct-vo-head / -num / -date / -note
     .vsc-acct-vo-track (+ -ic / -txt / -k / -n)
     .vsc-acct-vo-notes / -note-date / -note-body
     .vsc-acct-vo-details

   REWARDS PAGE - snippet #109
     .vsc-acct-rewards
     .vsc-acct-redeem-grid / .vsc-acct-redeem-tile
     .vsc-acct-redeem-amt / .vsc-acct-redeem-pts
     .vsc-acct-hist / .vsc-acct-hrow / -hl / -hd / -hp (.plus / .minus)
     .vsc-acct-callout

   OWNED BY SNIPPET #108 - THESE NAMES ARE FIXED, DO NOT RENAME:
     .vsc-acct-redeem-ok / .vsc-acct-redeem-err
     (the points engine echoes them itself; we only skin them)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TOKENS  (spec section 1)
   -------------------------------------------------------------------------- */
:root {
  --acct-panel:      rgba(30, 38, 50, 0.60);
  --acct-panel-2:    rgba(255, 255, 255, 0.04);
  --acct-border:     rgba(255, 255, 255, 0.08);
  --acct-ink:        #FFFFFF;
  --acct-ink-soft:   #C7D2DE;
  --acct-ink-mute:   #8FA0B4;

  /* Cyan comes from the sitewide ramp in vsc-core.css. Never re-declare the
     literal here - one cyan, one place. */
  --acct-cyan:       var(--vsc-cyan, #0EA5E9);
  --acct-cyan-ink:   var(--vsc-on-cyan, #FFFFFF);
  --acct-cyan-hover: var(--vsc-cyan-hover, #38BDF8);
  --acct-cyan-rgb:   var(--vsc-cyan-rgb, 14, 165, 233);

  --acct-gold:       #F5C451;
  --acct-gold-bg:    rgba(245, 196, 81, 0.12);
  --acct-green:      #4ADE80;
  --acct-green-bg:   rgba(74, 222, 128, 0.12);
  --acct-red:        #F87171;
  --acct-red-bg:     rgba(248, 113, 113, 0.12);

  --acct-r:          16px;   /* card */
  --acct-r-tile:     12px;   /* tile / input */
  --acct-r-pill:     999px;
  --acct-tap:        44px;   /* WCAG 2.5.5 minimum touch target */
  --acct-display:    'Space Grotesk', Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --acct-glow:       0 8px 24px rgba(14, 165, 233, 0.35);
}


/* ==========================================================================
   1. HOW THIS FILE WINS  (read this before "simplifying" a selector)

   Live Code Snippet #22 prints an INLINE <style> in wp_head. Enqueued sheets
   print at priority 8; a snippet echoing at priority 10 lands AFTER us. So on an
   equal-specificity tie WITH !important, snippet #22 wins on source order.

     #22   body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2
           = (0,3,2)  ->  color:#0A1F3D !important   (navy on dark = INVISIBLE)

     ours  html.vsc-dark body.woocommerce-account.logged-in
           .woocommerce-MyAccount-content h2
           = (0,4,3)  ->  out-SPECIFIES it, so source order stops mattering.

   Against vsc-dark.css / vsc-core.css (which still hold the LEGACY .vsc-acct-*
   rules, at (0,3,2)-(0,4,2)) we win on specificity AND on source order, via the
   vsv4-dark dependency. Both mechanisms point the same way. Do not shorten the
   prefix - the headings go invisible again and the legacy rules come back.
   ========================================================================== */

/* 1a. INVISIBLE HEADINGS. #22 forces navy on every h2/h3/legend in the content.
   WooCommerce emits some of those itself (order-details.php's "Order details",
   the edit-account <legend>) through hooks we must keep firing, so this cannot be
   fixed in a template. COLOUR is forced here; SIZE is left to the classes below,
   so a card title can still be 28px. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content h1,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content h3,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content fieldset legend {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display) !important;
  letter-spacing: -0.01em;
}
/* Default size for a heading WooCommerce injects and we do not control. Our own
   titles carry .vsc-acct-card-title, which is a class and therefore wins. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content fieldset legend {
  border-bottom: 1px solid var(--acct-border) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 0 0 12px !important;
  margin: 0 0 20px !important;
  width: 100% !important;
}

/* 1b. NAV / CONTENT ALIGNMENT.
   `<main class="site-main">` computes `overflow-y:auto`, which makes it a SCROLL
   CONTAINER. `position:sticky` on the nav therefore resolves against main's
   scrollport, not the viewport - so the nav never actually stuck to anything and
   simply sat a permanent 30px (one grid gap) below the content, at every scroll
   position. Static costs nothing and fixes it.
   This also unwinds WooCommerce's core float layout (nav float:left/width:35%,
   content float:right/width:65%), which fights the grid. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
  position: static !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  align-self: start !important;
  background: var(--acct-panel) !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: var(--acct-r) !important;
  box-sizing: border-box;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 1c. KILL THE LEGACY ::after BADGE.
   vsc-dark.css paints the Rewards nav badge with `content: var(--vsc-pts,"")`,
   and snippet #109 USED to fill that var from an inline <style>. The badge is now
   REAL MARKUP emitted by navigation.php (.vsc-acct-nav-badge), so the pseudo has
   to be silenced - otherwise we render two badges, or (worse) an EMPTY gold pill,
   because dark.css gives ::after padding + background even when the content
   string resolves to "".
   This also makes the theme and the snippet ORDER-INDEPENDENT: whichever deploys
   first, we never double-render. */
html.vsc-dark body .woocommerce-MyAccount-navigation-link--rewards a::after {
  content: none !important;
  display: none !important;
}

/* Keyboard users must be able to see where they are. */
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content a:focus-visible,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content button:focus-visible,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
  outline: 2px solid var(--acct-cyan-hover);
  outline-offset: 2px;
  border-radius: 8px;
}

/* 1d. .screen-reader-text - THE THEME NEVER DEFINED IT.
   WordPress and WooCommerce both emit `<span class="screen-reader-text">` as
   visually-hidden context for assistive tech, and this theme has no rule for it
   anywhere - so every such span was rendering as PLAIN VISIBLE TEXT. (It is what
   would have printed "45 points available" right next to the Rewards badge.)
   This is the standard WP visually-hidden pattern. It is unscoped on purpose, but
   harmless: this stylesheet only loads on account pages. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   2. PAGE SHELL  (spec section 2)
   ========================================================================== */

/* The hero is the FIRST child of .woocommerce and spans BOTH tracks, so the nav
   and the content still auto-place side by side on the row beneath it. No extra
   wrapper element is needed - and none is available, because my-account.php is
   WooCommerce core and we do not override it. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce {
  display: grid !important;
  grid-template-columns: 264px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}

html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero {
  grid-column: 1 / -1;
  text-align: center;
  padding: 8px 0 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero-eyebrow {
  display: block;
  margin: 0 0 10px;
  color: var(--acct-ink-mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero h1 {
  margin: 0;
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   2b. LOGGED-OUT SIGN-IN CARD  (spec section 10)  -  THE OFF-CENTRE BUG.

   ROOT CAUSE: `body.woocommerce-account` is present when logged OUT too. An
   UNSCOPED 2-col grid rule on `.woocommerce` therefore gave the logged-out page a
   250px phantom sidebar track. The auth card is the only in-flow child, so it
   auto-placed into COLUMN 2 and sat exactly 280px (250px track + 30px gap) right
   of centre at >=901px - while looking perfectly fine below 901px, where the grid
   collapses. No float and no explicit grid-column was ever involved: it was pure
   grid auto-placement into the wrong track.

   Every logged-in rule in this file is scoped `.logged-in`. This block is its
   mirror - scoped `:not(.logged-in)` - and force-collapses the shell to a single
   centred column, so the card cannot be pushed into a phantom track no matter
   what any other stylesheet says (including a stale cached copy of one).
   -------------------------------------------------------------------------- */
html.vsc-dark body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}
/* The card itself: margin-inline auto is the belt to the shell's braces. */
html.vsc-dark body.woocommerce-account:not(.logged-in) .vsc-account-auth-wrap {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 56px !important;
  float: none !important;
}
html.vsc-dark body.woocommerce-account:not(.logged-in) .vsc-authp-card {
  background: rgba(38, 46, 61, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--acct-r) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important;
}
/* WooCommerce's stock login form is NOT used here (this is the passwordless OTP
   card), but neutralise its float/width defaults anyway: if WC ever renders one,
   or a plugin injects one, it must not be able to re-introduce the offset. */
html.vsc-dark body.woocommerce-account:not(.logged-in) form.woocommerce-form-login,
html.vsc-dark body.woocommerce-account:not(.logged-in) .woocommerce-MyAccount-navigation {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Vertically comfortable: a centred block, not jammed under the page header.
   These ancestor trims are safe because this stylesheet only loads on account
   pages (is_account_page()). */
html.vsc-dark body.woocommerce-account:not(.logged-in) .page-header {
  padding-bottom: 28px !important;
}
html.vsc-dark body.woocommerce-account:not(.logged-in) main.site-main {
  min-height: 60vh;
}
html.vsc-dark body.woocommerce-account:not(.logged-in) main.site-main .container {
  padding-top: 14px !important;
}


/* ==========================================================================
   3. SIDEBAR NAV  (spec section 3)   [card chrome is in 1b]
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  border: 0 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: var(--acct-tap);
  padding: 14px 16px !important;
  border-radius: 10px !important;
  color: var(--acct-ink-soft) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background .16s ease, color .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-link:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--acct-ink) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-ic {
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  opacity: .75;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-ic svg {
  display: block;
  width: 18px;
  height: 18px;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* ACTIVE: 4px rounded CYAN accent bar flush to the item's left edge. */
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li.is-active > .vsc-acct-nav-link {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--acct-ink) !important;
  font-weight: 700 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li.is-active > .vsc-acct-nav-link::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 4px;
  border-radius: var(--acct-r-pill);
  background: var(--acct-cyan);
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li.is-active > .vsc-acct-nav-link .vsc-acct-nav-ic {
  opacity: 1;
  color: var(--acct-cyan);
}

/* REWARDS BADGE - real markup (see 1c: the legacy ::after pseudo is dead). */
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--acct-r-pill);
  background: var(--acct-gold-bg);
  color: var(--acct-gold);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Divider, then a muted Log out. */
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav-sep {
  height: 1px;
  margin: 8px 12px !important;
  padding: 0;
  background: var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-nav li.woocommerce-MyAccount-navigation-link--customer-logout > .vsc-acct-nav-link {
  color: var(--acct-ink-mute) !important;
  font-weight: 500 !important;
}


/* ==========================================================================
   4. SHARED - cards, titles, buttons, empty states
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card {
  background: var(--acct-panel);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r);
  padding: 26px;
  margin: 0 0 24px;
  box-sizing: border-box;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card:last-child {
  margin-bottom: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-head > div {
  min-width: 0;
}
/* A class beats the bare-h2 rule in 1a, so a card title is 28px even as an <h2>. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-title {
  display: block;
  margin: 0 !important;
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-title--sm {
  font-size: 20px !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-sub {
  margin: 6px 0 0 !important;
  color: var(--acct-ink-mute) !important;
  font-size: 14px;
  line-height: 1.5;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-link {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--acct-cyan) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-link:hover {
  color: var(--acct-cyan-hover) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-icontile {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--acct-r-tile);
  background: rgba(var(--acct-cyan-rgb), 0.12);
  color: var(--acct-cyan);
}

/* BUTTONS. vsc-dark.css has a generic `a { color: cyan }` for the content area,
   so ink colour needs !important on every filled control or the label goes cyan
   on cyan. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--acct-tap);
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--acct-r-pill) !important;
  font-family: var(--acct-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--cyan {
  background: var(--acct-cyan) !important;
  border-color: var(--acct-cyan) !important;
  color: var(--acct-cyan-ink) !important;
  box-shadow: var(--acct-glow);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--cyan:hover {
  background: var(--acct-cyan-hover) !important;   /* a hover BRIGHTENS */
  border-color: var(--acct-cyan-hover) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--ghost {
  background: transparent !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink) !important;
  box-shadow: none;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn--dark {
  background: var(--acct-panel-2) !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink-mute) !important;
  box-shadow: none;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn.is-disabled,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-btn[disabled] {
  opacity: .55;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* WooCommerce's own buttons: "Pay" (an unpaid order - real money), "Order again",
   "Save address", "Save changes", pagination. They render as bare .button /
   .woocommerce-Button, so without this they ship as unstyled grey rectangles. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .button,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Button,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--acct-tap);
  padding: 12px 24px !important;
  background: var(--acct-cyan) !important;
  border: 1px solid var(--acct-cyan) !important;
  border-radius: var(--acct-r-pill) !important;
  color: var(--acct-cyan-ink) !important;
  font-family: var(--acct-display);
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: var(--acct-glow);
  cursor: pointer;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .button:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-Button:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button[type="submit"]:hover {
  background: var(--acct-cyan-hover) !important;
  border-color: var(--acct-cyan-hover) !important;
}
/* Secondary actions read as ghost pills, so on an unpaid order "Pay" is the only
   filled control on the row. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.button.cancel,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.woocommerce-button--previous,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.woocommerce-button--next {
  background: transparent !important;
  border-color: var(--acct-border) !important;
  color: var(--acct-ink) !important;
  box-shadow: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.button.cancel:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.woocommerce-button--previous:hover,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content a.woocommerce-button--next:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--acct-ink) !important;
}

/* EMPTY STATES */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 20px;
  color: var(--acct-ink-mute);
  font-size: 15px;
  text-align: center;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-empty-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--acct-r-tile);
  background: var(--acct-panel-2);
  color: var(--acct-ink-mute);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-empty a:not(.button) {
  color: var(--acct-cyan) !important;
  font-weight: 600;
}


/* ==========================================================================
   5. DASHBOARD  (spec section 4)
   ========================================================================== */

/* 4a. WELCOME CARD - gradient, lighter navy top-left -> panel. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome {
  background: linear-gradient(135deg, rgba(56, 70, 92, 0.72) 0%, var(--acct-panel) 62%);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r);
  padding: 30px;
  margin: 0 0 24px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-row > div {
  min-width: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-avatar {
  display: flex;
  flex: 0 0 56px;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0F1620;
  font-family: var(--acct-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-name {
  margin: 0 !important;
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-email {
  margin: 4px 0 0 !important;
  color: var(--acct-cyan) !important;
  font-size: 15px;
  overflow-wrap: anywhere;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-sub {
  margin: 18px 0 0 !important;
  color: var(--acct-ink-mute) !important;
  font-size: 14px;
  line-height: 1.6;
}

/* 4b / 8. REWARDS BALANCE CARD.
   Cyan on the dashboard; the --gold modifier is what the Rewards page uses. ONLY
   the accent changes - the geometry is identical in both places, which is why the
   accent is a variable rather than a second copy of the card. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw {
  --rw-accent: var(--acct-cyan);
  background: var(--acct-panel);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r);
  padding: 26px;
  margin: 0 0 24px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw--gold {
  --rw-accent: var(--acct-gold);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-col {
  min-width: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-col--right {
  text-align: right;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-k {
  margin: 0 0 8px;
  color: var(--acct-ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--rw-accent);
  font-family: var(--acct-display);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal-u {
  color: var(--acct-ink-mute);
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* wc_price() wraps its output in <span class="woocommerce-Price-amount"><bdi>. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth .woocommerce-Price-amount,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth bdi {
  color: inherit !important;
  font: inherit !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth-sub {
  margin: 6px 0 0;
  color: var(--acct-ink-mute);
  font-size: 13px;
  line-height: 1.45;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-tier {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 5px 12px;
  border-radius: var(--acct-r-pill);
  background: var(--acct-gold-bg);
  color: var(--acct-gold);
  font-size: 12px;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-tier svg {
  width: 13px;
  height: 13px;
}

/* Progress bar - identical track geometry in both variants (spec 4b + 8). */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar {
  display: block;
  height: 8px;
  border-radius: var(--acct-r-pill);
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar > i {
  display: block;
  height: 100%;
  border-radius: var(--acct-r-pill);
  background: var(--rw-accent);
  transition: width .4s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 0;
  color: var(--acct-ink-mute);
  font-size: 13px;
  line-height: 1.5;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot b,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot .woocommerce-Price-amount {
  color: var(--acct-ink) !important;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot > span:last-child {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}

/* 4d. BOTTOM TWO-UP */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-two > .vsc-acct-card {
  margin: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ship {
  color: var(--acct-ink-soft);
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql-row {
  display: block;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: var(--acct-r-tile);
  background: var(--acct-panel-2);
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql-label {
  display: block;
  color: var(--acct-ink) !important;
  font-size: 15px;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ql-sub {
  display: block;
  margin-top: 3px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
}


/* ==========================================================================
   6. ORDER ROWS  (dashboard 4c + orders section 5 - one design, both places)
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-olist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow {
  list-style: none;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow:first-child {
  border-top: 0;
  padding-top: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow:last-child {
  padding-bottom: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-onum {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 16px;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ometa {
  margin-top: 4px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
  line-height: 1.5;
}
/* The "+N pts" segment is GOLD (spec 4c). */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-opts {
  color: var(--acct-gold) !important;
  font-weight: 600;
  white-space: nowrap;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-oright {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ototal,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ototal .woocommerce-Price-amount {
  color: var(--acct-ink) !important;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ototal small {
  color: var(--acct-ink-mute) !important;
  font-weight: 500;
}

/* STATUS PILLS (spec 4c): completed=green, failed=red, on-hold=gold, else cyan. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--acct-r-pill);
  background: rgba(var(--acct-cyan-rgb), 0.12);
  color: var(--acct-cyan);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--completed {
  background: var(--acct-green-bg);
  color: var(--acct-green);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--failed,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--cancelled,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--refunded {
  background: var(--acct-red-bg);
  color: var(--acct-red);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--on-hold,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-ostatus--pending {
  background: var(--acct-gold-bg);
  color: var(--acct-gold);
}

/* TRACKING BUTTON - full width of the row (spec section 5). */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--acct-tap);
  margin: 14px 0 0;
  padding: 12px 18px;
  box-sizing: border-box;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: 10px;
  color: var(--acct-ink) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-track:hover {
  background: rgba(255, 255, 255, 0.08);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-track svg {
  flex: 0 0 auto;
  color: var(--acct-cyan);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-track-n {
  color: var(--acct-ink-mute) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* WooCommerce order actions - the "Pay" action for an unpaid order lives here. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-oactions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-oextra {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--acct-ink-soft);
  font-size: 13px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-oextra-k {
  color: var(--acct-ink-mute);
  font-weight: 600;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-pager {
  display: flex;
  gap: 12px;
  margin: 24px 0 0;
}


/* ==========================================================================
   7. ADDRESSES  (spec section 6)
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
/* (the clearfix that was breaking this grid is neutralised in section 13) */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr {
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
  padding: 22px;
  box-sizing: border-box;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-k {
  color: var(--acct-ink-mute);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-body {
  color: var(--acct-ink-soft);
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-empty {
  color: var(--acct-ink-mute);
}


/* ==========================================================================
   8. FORMS  (spec section 7)
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 20px;
}
/* WooCommerce emits .form-row-first / -last for a 2-up pair and .form-row-wide for
   a full-width field. Map those onto the grid instead of core's float math. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid .form-row {
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}
/* `.form-row-wide` is what WooCommerce puts on a full-width field, and what our own
   password-disclosure block carries, so this one rule spans both. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid .form-row-wide {
  grid-column: 1 / -1;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid > .clear {
  display: none !important;   /* core's float clearfix; meaningless inside a grid */
}

/* FLOATING-LABEL UNWIND.
   vsc-core.css styles EVERY `.woocommerce form .form-row label` as
   `position:absolute; top:8px; left:16px; pointer-events:none` - that is the
   CHECKOUT's floating-label design, where the input is padded to leave room for it.
   Inherited here, it printed the label directly on top of the field's value
   ("First name" over "Kaseton"). Setting display:block alone does NOT undo it; the
   absolute positioning has to be explicitly reset. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .form-row label,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-form label {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  pointer-events: auto !important;   /* so tapping the label focuses the field */
  display: block;
  margin: 0 0 8px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .form-row label .required {
  color: var(--acct-cyan) !important;
  text-decoration: none;
  border: 0;
}

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .input-text,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input[type="text"],
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input[type="email"],
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input[type="tel"],
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input[type="password"],
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content select,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .select2-container .select2-selection {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--acct-tap);
  padding: 14px 16px !important;
  background: var(--acct-panel-2) !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: 10px !important;
  color: var(--acct-ink) !important;
  /* 16px, NOT the spec's 15px. Anything under 16px makes iOS Safari zoom the page
     on focus, which is itself a horizontal-overflow bug. Deliberate deviation. */
  font-size: 16px !important;
  line-height: 1.4;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .input-text:focus,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input:focus,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--acct-cyan) !important;
  box-shadow: 0 0 0 3px rgba(var(--acct-cyan-rgb), 0.18);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .input-text::placeholder,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content input::placeholder {
  color: var(--acct-ink-mute) !important;
  opacity: 1;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-password-hint,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fieldnote {
  display: block;
  margin-top: 6px;
  color: var(--acct-ink-mute) !important;
  font-size: 12px;
  font-style: normal;
}

/* PASSWORD DISCLOSURE (spec rule 2).
   WooCommerce REQUIRES password_current AND password_2 for a password change to
   go through, but the design shows only "New password". So both live in the DOM
   and are revealed by the template's JS the moment a new password is typed. At
   rest the page matches the design exactly; the change still works. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-pwd-extra {
  display: none;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-pwd-extra.is-open {
  display: block;
  animation: vsc-acct-fade .18s ease both;
}
@keyframes vsc-acct-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* WooCommerce (10.9.x) already draws its own eye toggle, as a background-image on
   `.show-password-input::before`, swapping to the eye-with-slash via
   `.display-password::before`. So do NOT add a glyph here - an earlier pass did,
   and the field rendered TWO eyes side by side. The only thing WC gets wrong is
   the colour: its SVG is dark (it assumes a light form). Inverting it turns it
   white and keeps both states working for free. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .password-input {
  position: relative;
  display: block;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .password-input .input-text {
  padding-right: 52px !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input {
  position: absolute;
  top: 0;
  right: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 46px;
  min-width: 46px;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: none !important;
  cursor: pointer;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input:hover {
  background: transparent !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input::before {
  filter: invert(1);
  opacity: .55;
  transition: opacity .16s ease;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input:hover::before,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content button.show-password-input.display-password::before {
  opacity: 1;
}

html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fsubmit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 4px 0 0 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fnote {
  color: var(--acct-ink-mute);
  font-size: 13px;
}

/* select2 (the country / state pickers on the address form) */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .select2-container .select2-selection__rendered {
  padding: 0 !important;
  color: var(--acct-ink) !important;
  line-height: 1.4 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .select2-container .select2-selection__arrow {
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%);
}


/* ==========================================================================
   9. VIEW ORDER
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-num {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-date,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-note {
  margin: 8px 0 0 !important;
  color: var(--acct-ink-mute) !important;
  font-size: 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track-ic {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--acct-r-tile);
  background: rgba(var(--acct-cyan-rgb), 0.12);
  color: var(--acct-cyan);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track-txt {
  flex: 1 1 auto;
  min-width: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track-k {
  display: block;
  color: var(--acct-ink) !important;
  font-size: 14px;
  font-weight: 700;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-track-n {
  display: block;
  margin-top: 2px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-notes {
  list-style: none;
  margin: 0;
  padding: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-notes li {
  padding: 14px 0;
  border-top: 1px solid var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-notes li:first-child {
  border-top: 0;
  padding-top: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-note-date {
  margin: 0 0 4px !important;
  color: var(--acct-ink-mute) !important;
  font-size: 12px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-note-body,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-note-body p {
  margin: 0 !important;
  color: var(--acct-ink-soft) !important;
  font-size: 14px;
  line-height: 1.6;
}

/* The line-item table WooCommerce renders into .vsc-acct-vo-details through the
   woocommerce_view_order hook. We do not own that markup - only its skin. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .shop_table {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-collapse: collapse;
  color: var(--acct-ink-soft) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table th {
  padding: 12px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
  color: var(--acct-ink) !important;
  font-size: 13px;
  text-align: left;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table td {
  padding: 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--acct-border) !important;
  color: var(--acct-ink-soft) !important;
  font-size: 14px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content table a {
  color: var(--acct-cyan) !important;
  text-decoration: none;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-customer-details address {
  padding: 18px;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: var(--acct-r-tile);
  color: var(--acct-ink-soft);
  font-style: normal;
  line-height: 1.7;
}


/* ==========================================================================
   10. REWARDS PAGE  (snippet #109 - spec section 8)
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px;
  box-sizing: border-box;
  background: var(--acct-panel-2);
  border: 1px solid var(--acct-border);
  border-radius: 14px;
  text-align: center;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-amt,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-amt .woocommerce-Price-amount,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-amt bdi {
  color: var(--acct-cyan) !important;
  font-family: var(--acct-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-pts {
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-tile .vsc-acct-btn {
  width: 100%;
  margin-top: 12px;
}

/* HISTORY */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hist {
  display: flex;
  flex-direction: column;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--acct-border);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hrow:first-child {
  border-top: 0;
  padding-top: 0;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hl {
  color: var(--acct-ink) !important;
  font-size: 15px;
  font-weight: 600;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hd {
  margin-top: 2px;
  color: var(--acct-ink-mute) !important;
  font-size: 13px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hp {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hp.plus {
  color: var(--acct-green) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-hp.minus {
  color: var(--acct-ink-mute) !important;
}

/* CALLOUT */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  background: rgba(var(--acct-cyan-rgb), 0.07);
  border: 1px solid rgba(var(--acct-cyan-rgb), 0.20);
  border-radius: var(--acct-r-tile);
  color: var(--acct-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-callout svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--acct-cyan);
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-callout b {
  color: var(--acct-ink) !important;
}

/* REDEEM RESULT BANNERS.
   These two class names are emitted by SNIPPET #108 (vsc_points_redeem_notice),
   which this build does NOT own. The names are therefore FIXED - renaming them
   here would silently un-style the one message that tells a customer the coupon
   code they just paid points for. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-ok {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--acct-green-bg);
  border: 1px solid rgba(74, 222, 128, 0.30);
  border-radius: var(--acct-r-tile);
  color: #A7F3D0;
  font-size: 14px;
  line-height: 1.55;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-ok strong {
  color: var(--acct-ink) !important;
  font-family: var(--acct-display);
  letter-spacing: .5px;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-err {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--acct-red-bg);
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: var(--acct-r-tile);
  color: #FCA5A5;
  font-size: 14px;
}

/* WooCommerce notices ("Account details changed successfully.", validation errors) */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-message,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-error,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-info {
  background: var(--acct-panel) !important;
  border: 1px solid var(--acct-border) !important;
  border-radius: var(--acct-r-tile) !important;
  color: var(--acct-ink) !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-message::before,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-error::before,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-info::before {
  content: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-error li,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-message li {
  color: var(--acct-ink) !important;
}


/* ==========================================================================
   11. RESPONSIVE  -  single column < 900px, 0px horizontal overflow.
   ========================================================================== */

/* Nothing in the account area may establish a wider-than-viewport box. The usual
   culprits are a long tracking number, an email address, and WooCommerce's tables. */
html.vsc-dark body.woocommerce-account .woocommerce,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-navigation {
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 900px) {
  /* Single column: the sidebar card first, content below (spec section 2). */
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 0 16px !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-two,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-redeem-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-addr-grid,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-fgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome {
    padding: 20px;
  }
  /* The balance row stacks, so a 54px number and a 40px price never collide. */
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-top {
    flex-direction: column;
    gap: 18px;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-col--right {
    text-align: left;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal {
    font-size: 44px;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth {
    font-size: 32px;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-welcome-name {
    font-size: 26px !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-title {
    font-size: 24px !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-orow-main {
    align-items: flex-start;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-cta .vsc-acct-btn {
    flex: 1 1 100%;
  }
  /* WooCommerce's order-details table is the one box that can still exceed the
     viewport. Let IT scroll rather than the page. */
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-vo-details {
    overflow-x: auto;
  }
}

/* ============================================================================
   12. OWNERSHIP + PLACEMENT FIXES

   The .vsc-acct-* vocabulary is REUSED from an older account design. Its rules used
   to live in vsc-dark.css / vsc-core.css and only lost to this sheet on the exact
   properties this sheet happened to re-declare -- so a legacy `justify-content`, a
   legacy `-webkit-text-fill-color`, or a legacy `display:flex` kept leaking through
   (it laid the Rewards tab out sideways, painted the gold balance cyan, and shoved
   the "Recent orders" title to the right edge). Those 221 legacy rules have now been
   DELETED from both sheets, so this file is the single owner of the vocabulary.
   The rules below are the ones the design needs that the legacy sheet had been
   silently providing, plus two placement fixes.
   ========================================================================= */

/* (a) DOUBLE <h1>. The account page runs through the parent theme's page.php, which
   prints .page-header > h1 and WooCommerce fills it with the ENDPOINT title. Our hero
   adds its own, so every view shipped two: the dashboard read "My account" twice and
   /orders/ read "Orders" then a 96px "My account". The hero IS the title. */
html.vsc-dark body.woocommerce-account.logged-in .page-header { display: none !important; }

/* (b) HERO RENDERED AT THE BOTTOM OF THE PAGE. The hero is the FIRST child of
   .woocommerce, but the account grid explicitly pins the nav and the content to
   grid-row:1 -- so grid auto-placement pushed the (unplaced) hero down into row 2,
   i.e. below everything, even though it comes first in the DOM. Place all three
   explicitly: hero spans row 1, nav + content sit in row 2. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .vsc-acct-pagehero {
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
  grid-row: 2 !important;
}

/* (c) Properties the design needs that the deleted legacy rules had been supplying. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-card-head {
  justify-content: flex-start;   /* icon + title group LEFT; .vsc-acct-card-link is
                                    pushed right by its own margin-left:auto. The legacy
                                    space-between was right-aligning the whole title. */
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-worth {
  text-align: right;             /* "WORTH RIGHT NOW" column */
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-bar {
  position: relative;            /* the fill <i> is absolutely positioned against it */
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-dash {
  display: block;
}
/* Every address in the design is a plain block of text. Both of ours are <address>
   elements, and vsc-dark.css hands EVERY <address> the same panel background it hands
   WooCommerce's tables:

       html.vsc-dark body:not(.home) .woocommerce address { background: ...!important }
       ...  .woocommerce-MyAccount-content .woocommerce-Address address { color: ...!important }

   ...so each address was drawn as a second, narrower panel floating inside its own card.

   Those legacy rules are `!important`, which beats source order -- so the override has to
   be `!important` too. (It is not enough to simply declare the property later: that is the
   exact mistake that left this boxed through 4.39.3.)

   Scoped to the two classes WE emit, so the identical vsc-dark rule keeps styling the
   addresses it is genuinely responsible for -- View Order, checkout, order-received. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content address.vsc-acct-ship,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content address.vsc-acct-addr-body {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content address.vsc-acct-addr-body {
  color: var(--acct-ink-soft) !important;   /* the legacy rule forces its own colour here too */
}

/* (d) Belt-and-braces: the balance number must never inherit a gradient text-fill
   (that is what painted the GOLD rewards balance cyan). currentColor tracks
   --rw-accent in both the cyan (dashboard) and gold (rewards page) variants. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-content .vsc-acct-rw-bal-u {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* ==========================================================================
   13. THE CLEARFIX-IN-A-GRID TRAP

   WooCommerce clears floats the 2011 way, on four of the exact elements this
   design turns into grid/flex containers:

       .woocommerce .col2-set::before,       .col2-set::after,
       .woocommerce-Address-title::before,   ::after,
       .woocommerce .form-row::before,       ::after,
       .woocommerce::before,                 ::after
           { content: " "; display: table; }

   A clearfix is INVISIBLE in a float layout -- that is the whole point of it. In
   a grid or flex container it is not: a pseudo-element with a `content` value is a
   real box, and a real box in a grid is a GRID ITEM. So every one of these
   containers was silently carrying two phantom children:

     - .vsc-acct-addr-grid  ->  ::before took cell 1, so the first address card was
                                pushed into cell 2 and the second wrapped onto row 2.
                                The two cards were never side by side; they were laid
                                out diagonally. This is the bug the design comparison
                                caught, and it was NOT caused by their DOM order --
                                swapping the cards just moved which one sat where.
     - .woocommerce         ->  two phantom items in the top-level nav|content grid.
                                Harmless only because section 12 pins the hero, nav
                                and content to explicit rows; the moment anything is
                                auto-placed again, they bite.
     - .vsc-acct-addr-head  ->  two phantom flex items in each address card header.
     - .form-row            ->  two phantom flex items in every Account-details row.

   Kill `content`, not just `display`: `display:none` alone still leaves a generated
   box in some engines, whereas `content:none` means the pseudo is never generated at
   all, so it cannot be a grid/flex item under any circumstances.

   Scoped to the account area only -- the same clearfix is load-bearing elsewhere on
   the site (cart, checkout), where those elements really are float layouts.

   NOT touched (both are deliberate and both are position:absolute, so they are out
   of flow and were never grid/flex items to begin with):
     - .vsc-acct-nav-link::before   -- our active-item cyan bar
     - .show-password-input::before -- WooCommerce's show/hide-password eye
   ========================================================================== */
html.vsc-dark body.woocommerce-account .woocommerce::before,
html.vsc-dark body.woocommerce-account .woocommerce::after,
html.vsc-dark body.woocommerce-account .vsc-acct-addr-grid::before,
html.vsc-dark body.woocommerce-account .vsc-acct-addr-grid::after,
html.vsc-dark body.woocommerce-account .vsc-acct-addr-head::before,
html.vsc-dark body.woocommerce-account .vsc-acct-addr-head::after,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content .form-row::before,
html.vsc-dark body.woocommerce-account .woocommerce-MyAccount-content .form-row::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   14. MOBILE: RELEASE THE DESKTOP ROW PINNING  (the "chopped" bug)

   Section 12 pins the hero to grid-row 1 and BOTH the nav and the content to
   grid-row 2. That is right for the 2-column desktop shell -- but below 901px the
   shell collapses to a SINGLE column, and then those two row-2 items collide:

     - nav takes   row 2 / column 1
     - content has nowhere left on row 2, so grid auto-placement invents an
       IMPLICIT second column for it
     - that implicit column is `auto`-sized, so it takes ~300px of a 390px screen
     - which starves the single EXPLICIT `minmax(0,1fr)` track down to 0px
     - and the hero + the nav both live in that 0px track

   Result: the <h1> wrapped to one CHARACTER per line and the nav rendered as a
   22px sliver. Nothing overflowed the viewport, so an overflow check sees nothing
   wrong -- the layout was crushed INWARD, not outward.

   Fix: below 901px, release the explicit placement and force every direct child to
   span the one column. Then the three of them simply stack: hero, nav, content.
   ========================================================================== */
@media (max-width: 900px) {
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .vsc-acct-pagehero,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content {
    grid-row: auto !important;
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }
  /* Belt to that braces: even if some other sheet ever manages to place a child
     into a phantom column, an implicit track can no longer starve the real one. */
  html.vsc-dark body.woocommerce-account.logged-in .woocommerce {
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
  }
  /* The hero is the page title on mobile too -- just smaller, and it must never be
     the thing that decides the column width. */
  html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero h1 {
    font-size: clamp(36px, 11vw, 56px) !important;
  }
  html.vsc-dark body.woocommerce-account.logged-in .vsc-acct-pagehero {
    padding: 4px 0 10px !important;
  }
}

/* ==========================================================================
   15. ACCOUNT NAV: OUT-SPECIFY THE TWO LIVE SNIPPETS

   Two ACTIVE snippets still ship a LIGHT-THEME account nav -- white list cards,
   slate borders, and a cyan `box-shadow: 0 0 0 1px #0EA5E9 inset` on the active
   item:

       #17  "Ventra v3 Modern Aminos Style (FINAL)"        (global, 59KB)
       #31  "Ventra Mobile - hamburger nav + responsive"   (global, 77KB)

   #31's copy sits inside a mobile media query, which is why the account nav looked
   right on desktop and wore a cyan OUTLINE box on a phone. Neither snippet can be
   deactivated: #31 is the site's entire mobile hamburger navigation, and #17 is the
   v3 base style. So the theme has to out-specify them.

   Their selectors top out at `body.woocommerce-account .woocommerce-MyAccount-navigation
   ul li.is-active` = (0,3,3). `!important` alone is NOT enough here, because they are
   `!important` too and a snippet prints AFTER the theme stylesheet -- so on a tie the
   snippet wins on source order. The chain below is (0,5,4)+ and therefore decisive.

   This restates the design's own nav (spec section 3): the item is plain, and the
   ACTIVE state is a 4px rounded cyan bar on the left edge -- never a boxed outline.
   ========================================================================== */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li,
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li.is-active {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  list-style: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li > a.vsc-acct-nav-link {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--acct-ink-soft) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li.is-active > a.vsc-acct-nav-link {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--acct-ink) !important;
  font-weight: 700 !important;
}
/* THE active indicator. A snippet was overriding this pseudo's background to
   transparent on mobile, which is why the bar vanished and only their outline box
   was left. */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li.is-active > a.vsc-acct-nav-link::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  bottom: 8px !important;
  left: 0 !important;
  right: auto !important;
  width: 4px !important;
  height: auto !important;
  border-radius: var(--acct-r-pill) !important;
  background: var(--acct-cyan) !important;
  opacity: 1 !important;
}
/* Log out keeps its icon; the navigational items are plain text (spec section 3). */
html.vsc-dark body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul.vsc-acct-nav li.is-active > a.vsc-acct-nav-link .vsc-acct-nav-ic {
  color: var(--acct-cyan) !important;
  opacity: 1 !important;
}