/**
 * capskip-account
 *
 * Prefix is `csacc-` throughout. Not `cskh-` (hero plugin) and not `cshdr-`
 * (header plugin): either collision restyles that plugin's elements as soon as
 * this file loads.
 *
 * Tokens match the rest of the site: green #30e87a, 11px button radius, Plus
 * Jakarta Sans and JetBrains Mono, both already loaded site-wide.
 */

.csacc,
.csacc-auth,
.csacc-nav {
  --csacc-green: #30e87a;
  --csacc-green-deep: #0a7d4b;  /* palette A signal ink */
  /* The exact ink the site's own green buttons use, measured off .cskh-btn--go. */
  --csacc-green-ink: #04120b;
  --csacc-bg: #f6f7f9;
  --csacc-card: #ffffff;
  --csacc-line: #e6e9ee;
  --csacc-line-2: #eef0f3;
  --csacc-ink: #111318;
  --csacc-ink-2: #3b4250;
  --csacc-ink-3: #7c8795;
  --csacc-warn: #ff9f43;
  --csacc-r: 11px;
  --csacc-ease: cubic-bezier(.455, .03, .515, .955);
}

/* ==========================================================================
   WP Armour honeypot
   Off screen rather than display:none. Some bot scripts skip fields that are
   explicitly hidden, which would defeat the trap the plugin is setting. This
   is the one rule in here that is a bug fix rather than a redesign.
   ========================================================================== */
#altEmail_container {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   Shared
   ========================================================================== */
.csacc-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Buttons match the site's own, measured off .cskh-btn on the homepage and
   .cskf-btn in the footer on 2026-09-21:
     weight 600 (not 700), 14.5px, padding 13px 22px, radius 11px,
     no uppercase, no letter-spacing,
     primary #30e87a on #04120b with a soft green glow.
   The small variant is the footer button: 13.5px, 11px 19px, radius 10px. */
.csacc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 14.5px/1.55 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  padding: 13px 22px;
  border-radius: var(--csacc-r);
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: .16s var(--csacc-ease);
}
.csacc-btn-primary {
  background: var(--csacc-green);
  color: var(--csacc-green-ink);
  box-shadow: 0 2px 10px -4px rgba(48, 232, 122, .45);
}
.csacc-btn-primary:hover {
  background: #2ad06e;
  color: var(--csacc-green-ink);
  box-shadow: 0 4px 14px -4px rgba(48, 232, 122, .55);
}
.csacc-btn-ghost { background: #fff; border-color: var(--csacc-line); color: var(--csacc-ink-2); }
.csacc-btn-ghost:hover { border-color: #cfd4da; color: var(--csacc-ink); }
.csacc-btn-sm { padding: 11px 19px; font-size: 13.5px; border-radius: 10px; }
/* Sits inside a credential field, so it has to clear the field height without
   dominating it. Still the house shape, just one step down again. */
.csacc-btn-xs {
  padding: 8px 14px;
  font-size: 12.5px;
  border-radius: 9px;
  flex: 0 0 auto;
  margin-left: auto;
}
.csacc-btn-block { width: 100%; margin-top: 4px; }
.csacc-btn[disabled] { opacity: .45; cursor: not-allowed; }

.csacc-lab {
  display: block;
  font: 700 10.5px/1 "JetBrains Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
  margin: 0 0 8px;
}

.csacc-inp {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--csacc-line);
  border-radius: 10px;
  font: 500 14px/1.3 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink);
  background: #fbfcfd;
  margin-bottom: 14px;
}
.csacc-inp:focus {
  outline: 0;
  border-color: var(--csacc-green);
  box-shadow: 0 0 0 3px rgba(48, 232, 122, .16);
  background: #fff;
}
/* The wrapper carries the field's bottom margin, not the input, so the
   wrapper's box is exactly the input's box. That is what lets the eye sit at
   top:50% and actually be centred. It used to be pinned at a fixed 19px, which
   only lined up at one input height and drifted everywhere else. */
.csacc-inp-wrap { position: relative; margin-bottom: 14px; }
.csacc-inp-wrap .csacc-inp { margin-bottom: 0; }
.csacc-eye {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--csacc-ink-3);
  cursor: pointer;
  background: 0;
  border: 0;
  padding: 4px;
  line-height: 0;
}
/* aria-pressed is the password's state, set by capskip-account.js: the eye
   while it is hidden, the struck-through eye while it shows. */
.csacc-eye[aria-pressed="true"] .csacc-eye-show,
.csacc-eye:not([aria-pressed="true"]) .csacc-eye-hide { display: none; }

/* ==========================================================================
   Navigation, three zones
   ========================================================================== */
/* Two columns: the menu down the left, the screen to its right, and together
   they fill the theme's own 1200px column. The menu used to be a full width
   card row ABOVE the content, which meant the content underneath had to be
   capped and centred in a narrower measure of its own, so the page had two
   different widths on it and a band of empty space either side of everything
   below the menu.

   The grid goes on the theme's `.woocommerce` wrapper, which is the direct
   parent of both halves and already the full page width. :has() keeps it off
   the logged out screens, where that same wrapper holds a login card and no
   nav at all. Every browser this site is used in has supported it since 2023;
   without it, the account pages simply keep the older stacked layout, because
   a selector a browser cannot parse is dropped whole.

   264 + 28 + the rest = 1200. The right hand track is minmax(0, 1fr) rather
   than 1fr: a plain 1fr track refuses to go below the width of its widest
   content, and the orders table is wide enough to push the grid past its
   container and give the page a horizontal scrollbar. */
.woocommerce-account .woocommerce:has(> .csacc-nav) {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* The clearfix pseudo-elements are grid items, and they take the first cell.
   WooCommerce gives `.woocommerce` a `::before` and `::after` of
   `content: " "; display: table` to clear old floats. A pseudo-element with
   content participates in grid layout exactly like a child does, so ::before
   took row 1 column 1, which pushed the menu into column 2 and wrapped the
   content onto a second row in column 1: the menu came out on the RIGHT at
   908px and the content on the left at 264px, the layout inside out, with
   nothing in the stylesheet that looked responsible. Nothing here floats, so
   the clearfix has no work to do. */
.woocommerce-account .woocommerce:has(> .csacc-nav)::before,
.woocommerce-account .woocommerce:has(> .csacc-nav)::after {
  display: none;
}

/* WooCommerce prints notices as a sibling before the two halves. Anything that
   is not one of the two columns spans the pair rather than landing in the menu
   track. */
.woocommerce-account .woocommerce:has(> .csacc-nav) > *:not(.csacc-nav):not(.woocommerce-MyAccount-content) {
  grid-column: 1 / -1;
}

/* WooCommerce and most themes float these into a 25/75 split, which fights the
   grid, so both halves are unset here. Specificity is (0,3,0) to clear the
   theme, the same lesson the auth card taught: `.woocommerce-account
   .woocommerce-MyAccount-navigation` on its own loses to the theme's own
   two-class-plus-element rules. */
.woocommerce-account .woocommerce-MyAccount-navigation.csacc-nav,
.woocommerce-account .woocommerce-MyAccount-content {
  width: 100%;
  max-width: none;
  float: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* The menu follows the page down.
   86px = the site header's own 70px plus 16px of air. That header is
   `position: sticky; top: 0`, so anything pinned at a smaller offset slides
   underneath it.

   This only works because the grid sets `align-items: start`: a stretched grid
   item is exactly as tall as its row, and an element that already fills its
   containing block has nowhere to travel, so sticky silently does nothing. The
   travel it does get is the content column's height minus the menu's, which is
   the right limit: the menu follows the screen it belongs to and leaves with
   it rather than hanging over the footer.

   The cap is for the case where the menu is taller than the window, on a short
   laptop or if the account ever grows another entry. Without it the last item
   would be unreachable, since a pinned element does not scroll. */
.woocommerce-account .woocommerce-MyAccount-navigation.csacc-nav {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 102px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Padding out and margin back in, so the box is 8px wider than the column but
     sits exactly where the column does.
     Setting overflow on one axis forces the other to auto, so this element
     clips horizontally whether or not it ever scrolls that way, and a hovered
     row moves 2px right and casts a shadow. Without the padding the last row's
     shadow is cut off flat against the bottom edge. */
  padding: 4px;
  margin: -4px;
}

.csacc-navrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

/* A row, not a tile: icon, then label, reading left to right down the column.
   The centred tile shape only worked when seven of them sat side by side. */
.csacc-navcard {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 9px 12px;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 11px;
  text-decoration: none;
  text-align: left;
  color: var(--csacc-ink-2);
  transition: .16s var(--csacc-ease);
}
/* Lifting a row in a vertical list reads as the row coming loose. It moves
   toward the content it is about to open instead. */
.csacc-navcard:hover {
  border-color: rgba(48, 232, 122, .5);
  color: var(--csacc-ink);
  transform: translateX(2px);
  box-shadow: 0 8px 18px -14px rgba(16, 20, 30, .45);
}

.csacc-navcard-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #f1f3f6;
  color: var(--csacc-ink-2);
  transition: .16s var(--csacc-ease);
}
.csacc-navcard:hover .csacc-navcard-ico { background: #e8ebef; }

.csacc-navcard-l {
  font: 600 13px/1.3 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.005em;
  min-width: 0;
}

/* The page you are on. Colour plus a heavier label, never colour alone. */
.csacc-navcard.is-now {
  border-color: rgba(48, 232, 122, .55);
  background: rgba(48, 232, 122, .07);
  box-shadow: inset 0 0 0 1px rgba(48, 232, 122, .22);
  color: var(--csacc-green-deep);
}
.csacc-navcard.is-now .csacc-navcard-ico { background: rgba(48, 232, 122, .16); color: var(--csacc-green-deep); }
/* Signal icons (capskip-icons): one colour at rest, and on the row you are on the
   line work in ink with the accent in signal ink, like every other icon tile. */
.csacc-navcard-ico .csi { --csi-accent: currentColor; }
.csacc-navcard.is-now .csacc-navcard-ico .csi { color: var(--csacc-ink); --csi-accent: var(--csacc-green-deep); }
.csacc-navcard.is-now .csacc-navcard-l { font-weight: 800; }
.csacc-navcard.is-now:hover { transform: none; }

/* Log out is a way out, not a destination. */
.csacc-navcard-out { color: var(--csacc-ink-3); }
.csacc-navcard-out:hover { border-color: #e8a99d; color: #b8412c; }
.csacc-navcard-out:hover .csacc-navcard-ico { background: rgba(255, 122, 102, .12); color: #b8412c; }

@media (prefers-reduced-motion: reduce) {
  .csacc-navcard { transition: none; }
  .csacc-navcard:hover { transform: none; }
}

/* ==========================================================================
   Below 1024px there is no room for a column beside the content, so the menu
   goes back over the top of it as the card row it used to be everywhere. The
   breakpoint is where 264 + 28 + a usable content column stops fitting.
   ========================================================================== */
@media (max-width: 1023px) {
  .woocommerce-account .woocommerce:has(> .csacc-nav) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  /* Nothing to pin against once the menu is a row over the top of the content:
     a sticky element here would sit on the content as you scrolled past it. */
  .woocommerce-account .woocommerce-MyAccount-navigation.csacc-nav {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 0;
    margin: 0 0 22px;
  }

  .csacc-navrow {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
  }
  .csacc-navcard {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px 13px;
    min-height: 86px;
    border-radius: 13px;
    text-align: center;
  }
  .csacc-navcard:hover { transform: translateY(-2px); }
  .csacc-navcard-ico { width: 38px; height: 38px; border-radius: 11px; }
  .csacc-navcard-l { font-size: 12.5px; }
}

/* ==========================================================================
   Dashboard
   ========================================================================== */
.csacc-head { margin-bottom: 18px; }
.csacc-h {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--csacc-ink);
}
.csacc-sub { font-size: 13px; color: var(--csacc-ink-3); margin: 4px 0 0; }

.csacc-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.csacc-banner-empty { background: rgba(48, 232, 122, .09); border: 1px solid rgba(48, 232, 122, .3); }
.csacc-banner-warn { background: rgba(255, 159, 67, .1); border: 1px solid rgba(255, 159, 67, .36); }
.csacc-banner-t { min-width: 0; flex: 1 1 260px; }
.csacc-banner-t b { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 3px; color: var(--csacc-ink); }
.csacc-banner-t span { font-size: 12.5px; line-height: 1.55; color: var(--csacc-ink-2); }
.csacc-banner .csacc-btn { flex: 0 0 auto; }

.csacc-key {
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 20, 30, .04);
  margin-bottom: 14px;
}
.csacc-key-top { display: grid; grid-template-columns: 1fr 300px; }
.csacc-key-main { padding: 24px 26px 22px; border-right: 1px solid var(--csacc-line-2); min-width: 0; }
.csacc-key-side { padding: 24px 22px; background: #fafbfc; }
.csacc-is-inert { opacity: .55; }
.csacc-is-inert .csacc-cred { pointer-events: none; }
.csacc-key-solo { grid-template-columns: 1fr; }
.csacc-key-solo .csacc-key-main { border-right: 0; }

.csacc-stack .csacc-key-main { border-right: 0; }
.csacc-stack .csacc-key-top { grid-template-columns: 1fr; }
.csacc-side-solo .csacc-key-side {
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 16px;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}
.csacc-side-solo .csacc-side-h { grid-column: 1 / -1; }

.csacc-tier-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
/* The badge carries the same padlock mark the product pages use, in the tier
   colour, so a member recognises their licence from the page they bought it on.
   Colours are sampled to match capskip-product-page and capskip-pricing. */
.csacc-tier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 800 11px/1 "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px 6px 6px;
  border-radius: 9px;
  border: 1px solid transparent;
}
/* No border-radius: the tile draws its own corners, and clipping it would round
   off the square bottom-left corner that makes it the CapSkip logo. */
.csacc-mark { display: block; flex: 0 0 auto; }
/* Both children get an explicit line box, so flex centring has something exact
   to centre. The mark is 18px and the label's own line box was taller than its
   glyphs, which pushed the word off the mark's centre line. */
.csacc-tier-l { display: block; line-height: 1; padding-top: 1px; }
.csacc-tier-gold { background: #fffbe6; color: #6b5500; border-color: rgba(255, 215, 3, .55); }
.csacc-tier-silver { background: #f6f7f8; color: #3c4147; border-color: rgba(192, 192, 192, .7); }
.csacc-tier-bronze { background: #fdf3ea; color: #6d4520; border-color: rgba(208, 136, 72, .5); }
.csacc-tier-trial { background: rgba(48, 232, 122, .1); color: #0c6636; border-color: rgba(48, 232, 122, .45); }
.csacc-tier-ir_individual,
.csacc-tier-ir_developer { background: #f3f5f7; color: #4a5158; border-color: #dfe3e8; }

/* ---- the credential pair ----
   Username and password are one thing used together, so they sit side by side
   rather than stacked with a paragraph of hint copy wedged between them. */
/* auto-fit rather than a viewport media query: the account content column is
   much narrower than the window (the nav sits beside it), so a viewport
   breakpoint decides on the wrong number. This wraps when the container runs
   out of room, wherever that happens to be. */
.csacc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.csacc-field { min-width: 0; }

.csacc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 12px/1 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
}
.csacc-status i { width: 7px; height: 7px; border-radius: 50%; }
.csacc-is-live { color: var(--csacc-green-deep); }
.csacc-is-live i { background: var(--csacc-green); box-shadow: 0 0 0 3px rgba(48, 232, 122, .2); }
.csacc-is-paused { color: #b26400; }
.csacc-is-paused i { background: var(--csacc-warn); box-shadow: 0 0 0 3px rgba(255, 159, 67, .2); }

.csacc-renew { margin-left: auto; font-size: 12.5px; color: var(--csacc-ink-3); }
.csacc-renew b { color: var(--csacc-ink-2); font-weight: 700; }

/* ---- the credential readout ----
   One block, one row per value. Not two "fields": neither value is editable,
   and the password one is twelve dots, so as a field it carried no information
   and existed only to hold the Reset button. Rows cannot disagree in height
   with each other, which is what kept going wrong. */
.csacc-rows {
  border: 1px solid var(--csacc-line);
  border-radius: 12px;
  overflow: hidden;
}
.csacc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 12px 13px 16px;
  background: #fbfcfd;
  /* Pinned, and both cells share a line-height. Without this the two rows came
     out 56px and 57px, because the bullet glyph has a different intrinsic
     height to latin characters in JetBrains Mono.
     box-sizing is declared here rather than inherited: min-height without it
     measures the CONTENT box, so the padding is added on top and the row
     becomes 82px. The theme happens to set border-box globally, which would
     have hidden this until some other context did not. */
  box-sizing: border-box;
  min-height: 56px;
}
.csacc-rk, .csacc-rv { line-height: 1.3; }
/* An inset shadow, not a border. A real border-top is counted by border-box, so
   only the second row carried it and the two rows measured 56 and 56.67. A
   shadow draws the same line and costs no layout. */
.csacc-row + .csacc-row { box-shadow: inset 0 1px 0 var(--csacc-line); }

.csacc-rk {
  flex: 0 0 auto;
  /* 100px, not 84, and it never wraps.
     84 fitted USERNAME and nothing else. Measured at this font and tracking the
     longest label the six languages produce is KULLANICI ADI and NAMA PENGGUNA
     at 93px, with BENUTZERNAME at 86 and the Hindi pair at 88, so German,
     Turkish, Hindi and Indonesian all stacked onto two lines and pushed the row
     from 56px to 69. Sizing the column to the widest translation rather than to
     the English is the whole fix. */
  width: 100px;
  white-space: nowrap;
  font: 700 10.5px/1 "JetBrains Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
}
.csacc-rv {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--csacc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csacc-rv.csacc-dim { color: var(--csacc-ink-3); letter-spacing: .1em; }
.csacc-ra { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* Copy is icon only at 30 square. Reset is a text button of the same height,
   which is what makes it small without making it hard to hit. */
/* box-sizing and a zero line-height are both load bearing: the theme's button
   reset leaves a line box behind, which pushed the icon below centre, and
   without border-box the 1px border made the box 32px against a 30px grid. */
.csacc-ibtn {
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;
  font-size: 0;
  background: #fff;
  border: 1px solid var(--csacc-line);
  border-radius: 8px;
  color: var(--csacc-ink-3);
  cursor: pointer;
  transition: .14s var(--csacc-ease);
}
.csacc-ibtn svg { display: block; }
.csacc-tbtn {
  height: 30px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--csacc-line);
  border-radius: 8px;
  font: 600 11.5px/1 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: .14s var(--csacc-ease);
}
.csacc-ibtn:hover:not([disabled]),
.csacc-tbtn:hover:not([disabled]) { border-color: #cfd4da; color: var(--csacc-ink); }
.csacc-ibtn[disabled],
.csacc-tbtn[disabled] { opacity: .45; cursor: not-allowed; }
.csacc-ibtn.is-done,
.csacc-tbtn.is-done { border-color: var(--csacc-green); color: var(--csacc-green-deep); }
.csacc-ibtn svg, .csacc-tbtn svg { flex: 0 0 auto; }

@media (max-width: 560px) {
  /* 84 rather than 66 for the same reason: the label still must not wrap, and
     the value beside it is a short username either way. */
  .csacc-rk { width: 84px; }
  .csacc-row { padding-left: 12px; gap: 10px; }
}

/* ---- the signed-in member, above the menu ---- */
.csacc-me {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}
.csacc-me-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #eceff3;
  border: 1px solid var(--csacc-line);
}
.csacc-me-ini {
  display: grid;
  place-items: center;
  font: 800 18px/1 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink-2);
}
.csacc-me-t { min-width: 0; }
.csacc-me-t b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--csacc-ink);
  line-height: 1.25;
  /* Ellipsis, like the email under it. In a 264px column a long display name
     used to wrap under the avatar and drag the card open. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csacc-me-t span {
  display: block;
  font-size: 12.5px;
  color: var(--csacc-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csacc-hint { font-size: 12px; color: var(--csacc-ink-3); line-height: 1.55; margin: 0 0 18px; }
.csacc-hint-last { margin-bottom: 0; }

/* The outstanding order on a paused card. Same amber as the paused status dot
   and the paused banner, so the card, its pill and this line all read as one
   state rather than three separate warnings. */
.csacc-due {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 159, 67, .36);
  border-radius: 10px;
  background: rgba(255, 159, 67, .1);
}
.csacc-due-t {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--csacc-ink-2);
}
.csacc-due-b {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(255, 159, 67, .55);
  border-radius: 8px;
  background: #fff;
  font: 700 11.5px/1 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: #8a4b00;
  text-decoration: none;
  white-space: nowrap;
  transition: .14s var(--csacc-ease);
}
.csacc-due-b:hover { background: var(--csacc-warn); border-color: var(--csacc-warn); color: #fff; }

.csacc-side-h { font: 800 12px/1 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif; color: var(--csacc-ink); margin: 0 0 13px; }
.csacc-dl {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--csacc-line);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  margin-bottom: 8px;
}
.csacc-dl:hover { border-color: #cfd4da; }
.csacc-dl-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f0f2f5;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--csacc-ink-2);
}
.csacc-dl-txt b { display: block; font-size: 12.5px; color: var(--csacc-ink); font-weight: 700; line-height: 1.2; }
.csacc-dl-txt span { font-size: 11px; color: var(--csacc-ink-3); }

/* The tiles are links and have to look like it. As flat bordered cards they
   read as information panels, so they get a chevron, a hover lift and a green
   edge on hover. auto-fit rather than a fixed 4, because the payment methods
   tile appears only when a gateway can save a card. */
.csacc-quiet { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.csacc-quiet-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 16px;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: .16s var(--csacc-ease);
}
.csacc-quiet-tile:hover {
  border-color: rgba(48, 232, 122, .55);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px rgba(16, 20, 30, .45);
}
.csacc-quiet-t { min-width: 0; }
.csacc-quiet-tile b { display: block; font-size: 13px; color: var(--csacc-ink); font-weight: 700; margin-bottom: 3px; }
.csacc-quiet-tile span span,
.csacc-quiet-t > span { display: block; font-size: 11.5px; color: var(--csacc-ink-3); line-height: 1.45; }
.csacc-quiet-go {
  margin-left: auto;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--csacc-ink-3);
  transition: .16s var(--csacc-ease);
}
.csacc-quiet-tile:hover .csacc-quiet-go { color: var(--csacc-green-deep); transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .csacc-quiet-tile, .csacc-quiet-go { transition: none; }
  .csacc-quiet-tile:hover { transform: none; }
  .csacc-quiet-tile:hover .csacc-quiet-go { transform: none; }
}

/* ==========================================================================
   Auth screens
   ========================================================================== */
.csacc-auth { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 8px 0 20px; }
.csacc-card {
  flex: 1 1 400px;
  max-width: 470px;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 10px 40px -22px rgba(16, 20, 30, .25);
}
.csacc-card-center { text-align: center; }
.csacc-card-ico {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #f0f2f5;
  display: grid;
  place-items: center;
  margin: 0 0 15px;
  color: var(--csacc-ink-2);
}
.csacc-card-center .csacc-card-ico { margin: 0 auto 15px; border-radius: 50%; }
.csacc-card-ico-ok { background: rgba(48, 232, 122, .14); color: var(--csacc-green-deep); }
.csacc-card-h { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.022em; color: var(--csacc-ink); }
.csacc-lede { margin: 0 0 20px; font-size: 13.5px; line-height: 1.62; color: var(--csacc-ink-3); }
.csacc-card-foot {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--csacc-line-2);
  font-size: 12.5px;
  color: var(--csacc-ink-3);
  text-align: center;
}
.csacc-card-foot a, .csacc-link { color: var(--csacc-green-deep); font-weight: 700; text-decoration: none; }
.csacc-link { font-size: 12.5px; }

.csacc-note {
  background: rgba(48, 232, 122, .09);
  border: 1px solid rgba(48, 232, 122, .28);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--csacc-ink-2);
  margin-bottom: 18px;
}

.csacc-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 16px; flex-wrap: wrap; }
.csacc-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--csacc-ink-2); cursor: pointer; margin: 0; }
.csacc-check input { accent-color: #30e87a; width: 15px; height: 15px; margin: 0; }

/* ---- the two doors ---- */
.csacc-doors { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.csacc-doors-legend { padding: 0; margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.022em; color: var(--csacc-ink); }

/* The radio is a sibling of its label, kept reachable by keyboard rather than
   display:none, which would drop it out of the tab order entirely. */
.csacc-door-in {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.csacc-door {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid var(--csacc-line);
  border-radius: 12px;
  padding: 15px 16px;
  margin-bottom: 10px;
  background: #fff;
  cursor: pointer;
  transition: .16s var(--csacc-ease);
}
.csacc-door:hover { border-color: #cfd4da; background: #fbfcfd; }
.csacc-door-in:focus-visible + .csacc-door { border-color: var(--csacc-green); box-shadow: 0 0 0 3px rgba(48, 232, 122, .22); }
.csacc-door-in:checked + .csacc-door { border-color: var(--csacc-green); box-shadow: 0 0 0 3px rgba(48, 232, 122, .16); }
.csacc-door-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: #f0f2f5;
  color: var(--csacc-ink-2);
}
.csacc-door-in:checked + .csacc-door .csacc-door-ico { background: rgba(48, 232, 122, .14); color: var(--csacc-green-deep); }
.csacc-door-t { min-width: 0; }
.csacc-door-t b { display: block; font-size: 13.5px; font-weight: 700; color: var(--csacc-ink); margin-bottom: 4px; }
.csacc-door-t span { display: block; font-size: 12px; line-height: 1.55; color: var(--csacc-ink-3); }
.csacc-door-rad {
  margin-left: auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid #cfd4da;
  flex: 0 0 auto;
  margin-top: 2px;
  position: relative;
}
.csacc-door-in:checked + .csacc-door .csacc-door-rad { border-color: var(--csacc-green); background: var(--csacc-green); }
.csacc-door-in:checked + .csacc-door .csacc-door-rad::after {
  content: "";
  position: absolute;
  inset: 4.5px;
  border-radius: 50%;
  background: var(--csacc-green-ink);
}

/* Closed by default. Neither door is preselected, which is the point. */
.csacc-reveal { display: none; border-left: 2px solid var(--csacc-green); padding: 4px 0 4px 16px; margin: 12px 0 14px; }
#csacc-door-site:checked ~ .csacc-reveal-site { display: block; }
#csacc-door-app:checked ~ .csacc-reveal-app { display: block; }
.csacc-door-p { margin: 0 0 13px; font-size: 13px; line-height: 1.65; color: var(--csacc-ink-2); }
.csacc-reveal .csacc-btn-block + .csacc-btn-block { margin-top: 8px; }

/* ---- confirmation ---- */
.csacc-sent-mail {
  display: inline-flex;
  align-items: center;
  background: #f4f6f8;
  border: 1px solid var(--csacc-line);
  border-radius: 9px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--csacc-ink);
  margin: 0 0 16px;
  word-break: break-all;
}
.csacc-sent-list { text-align: left; margin: 0 0 16px; padding: 0; list-style: none; }
.csacc-sent-list li {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--csacc-ink-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--csacc-line-2);
}
.csacc-sent-list li:last-child { border-bottom: 0; }

/* ---- strength meter ---- */
.csacc-meter { display: flex; gap: 4px; margin: -6px 0 7px; }
.csacc-meter i { height: 4px; flex: 1; border-radius: 99px; background: #e6e9ee; transition: background .18s var(--csacc-ease); }
.csacc-meter.is-weak i:nth-child(1) { background: #ff7a66; }
.csacc-meter.is-fair i:nth-child(-n+2) { background: var(--csacc-warn); }
.csacc-meter.is-strong i { background: var(--csacc-green); }
.csacc-meter-txt { font-size: 11.5px; color: var(--csacc-ink-3); margin: 0 0 14px; min-height: 15px; }
.csacc-meter-txt b { color: var(--csacc-ink-2); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .csacc-key-top { grid-template-columns: 1fr; }
  .csacc-key-main { border-right: 0; border-bottom: 1px solid var(--csacc-line-2); }
  .csacc-side-solo .csacc-key-side { grid-template-columns: 1fr; }
  .csacc-quiet { grid-template-columns: 1fr 1fr; }
  .csacc-nav { padding-right: 0; }
}

@media (max-width: 520px) {
  .csacc-quiet { grid-template-columns: 1fr; }
  .csacc-key-main, .csacc-key-side { padding-left: 18px; padding-right: 18px; }
  .csacc-card { padding: 22px 18px 20px; }
  .csacc-renew { margin-left: 0; width: 100%; }
  .csacc-copy { margin-left: 0; }
}

/* ==========================================================================
   The other account pages: orders, subscriptions, downloads, account details,
   addresses, payment methods, view-order and view-subscription.

   These are styled rather than overridden. WooCommerce and WooCommerce
   Subscriptions between them own about a dozen templates here, and those
   templates change between releases, so overriding them all would mean
   re-testing this plugin on every WooCommerce update for no structural gain:
   the markup is already the right shape and only looks wrong.

   Subscriptions reuses the woocommerce-orders-table__* cell classes, so one
   set of rules covers both tables.
   ========================================================================== */

.woocommerce-MyAccount-content {
  --csacc-green: #30e87a;
  --csacc-green-deep: #0a7d4b;  /* palette A signal ink */
  /* Was #06230f here while the .csacc block declared #04120b, so a green button
     rendered with different ink depending on which side of the page it sat on.
     #04120b is the value measured off the site's own .cskh-btn--go. */
  --csacc-green-ink: #04120b;
  --csacc-card: #ffffff;
  --csacc-line: #e6e9ee;
  --csacc-line-2: #eef0f3;
  --csacc-ink: #111318;
  --csacc-ink-2: #3b4250;
  --csacc-ink-3: #7c8795;
  --csacc-r: 11px;
  --csacc-ease: cubic-bezier(.455, .03, .515, .955);
  color: var(--csacc-ink-2);
}

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3,
.woocommerce-MyAccount-content header h2,
.woocommerce-MyAccount-content header h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--csacc-ink);
  margin: 0 0 14px;
}

/* ---- tables: orders, subscriptions, downloads, order details ---- */
.woocommerce-MyAccount-content table.shop_table,
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.woocommerce_account_subscriptions {
  width: 100%;
  border: 1px solid var(--csacc-line);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--csacc-card);
  margin: 0 0 18px;
  font-size: 13.5px;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.woocommerce-orders-table th {
  background: #f7f8fa;
  border-bottom: 1px solid var(--csacc-line);
  padding: 12px 16px;
  text-align: left;
  font: 700 10.5px/1 "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
  white-space: nowrap;
}

.woocommerce-MyAccount-content table.shop_table td,
.woocommerce-MyAccount-content table.woocommerce-orders-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--csacc-line-2);
  vertical-align: middle;
  color: var(--csacc-ink-2);
}

.woocommerce-MyAccount-content table.shop_table tr:last-child td,
.woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:hover td { background: #fbfcfd; }

.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a,
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-subscription-id a {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--csacc-ink);
  text-decoration: none;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a:hover,
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-subscription-id a:hover { color: var(--csacc-green-deep); }

/* Status as a pill. The word is always present, so this never depends on
   colour alone to say what state something is in. */
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-status,
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-subscription-status {
  font-weight: 700;
  font-size: 12px;
}
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-active .woocommerce-orders-table__cell-order-status,
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--csacc-green-deep); }
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { color: #b26400; }
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-expired .woocommerce-orders-table__cell-order-status,
.woocommerce-MyAccount-content .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: #b8412c; }

/* ---- buttons across every account page ---- */
/* Selectors are deliberately (0,3,0), one step above the theme's
   `.woocommerce a.button` family (0,2,1). The auth card was lost to exactly
   that fight once already, so these win on specificity rather than on load
   order, and still need no !important.

   Geometry matches the site's own footer button: 600 13.5px, 11px 19px,
   radius 10px, no uppercase. The table context wants the small variant, not
   the 14.5px hero one. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 600 13.5px/1.55 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  padding: 11px 19px;
  border-radius: 10px;
  border: 1px solid var(--csacc-line);
  background: #fff;
  color: var(--csacc-ink-2);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: none;
  transition: .16s var(--csacc-ease);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover {
  border-color: #cfd4da;
  color: var(--csacc-ink);
  background: #fff;
}

/* Two actions in one table cell need air between them. */
.woocommerce-account .woocommerce-MyAccount-content .button + .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button + .woocommerce-button { margin-left: 8px; }

/* The one primary action per page, with the site's green glow. */
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button--next,
.woocommerce-account .woocommerce-MyAccount-content .button.pay {
  background: var(--csacc-green);
  border-color: var(--csacc-green);
  color: var(--csacc-green-ink);
  box-shadow: 0 2px 10px -4px rgba(48, 232, 122, .45);
}
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.pay:hover {
  background: #2ad06e;
  border-color: #2ad06e;
  color: var(--csacc-green-ink);
  box-shadow: 0 4px 14px -4px rgba(48, 232, 122, .55);
}

/* Destructive actions read as destructive. */
.woocommerce-account .woocommerce-MyAccount-content .button.cancel,
.woocommerce-account .woocommerce-MyAccount-content .button.subscription_cancel { color: #b8412c; background: #fff; }
.woocommerce-account .woocommerce-MyAccount-content .button.cancel:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.subscription_cancel:hover { border-color: #e8a99d; color: #b8412c; }

/* ---- forms: account details, address, payment methods ---- */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-MyAccount-content form.edit-account,
.woocommerce-MyAccount-content form.woocommerce-address-fields,
.woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods {
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 14px;
  padding: 24px 26px;
}

.woocommerce-MyAccount-content .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce-MyAccount-content .form-row label {
  display: block;
  font: 700 10.5px/1 "JetBrains Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
  margin: 0 0 8px;
}
.woocommerce-MyAccount-content .form-row .required { color: #b8412c; border: 0; }

.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--csacc-line);
  border-radius: 10px;
  font: 500 14px/1.3 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink);
  background: #fbfcfd;
  height: auto;
}
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus {
  outline: 0;
  border-color: var(--csacc-green);
  box-shadow: 0 0 0 3px rgba(48, 232, 122, .16);
  background: #fff;
}

.woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--csacc-line-2);
  border-radius: 12px;
  padding: 18px 20px 4px;
  margin: 8px 0 20px;
}
.woocommerce-MyAccount-content fieldset legend {
  font: 800 13px/1 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink);
  padding: 0 8px;
}
.woocommerce-MyAccount-content .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; }
.woocommerce-MyAccount-content em,
.woocommerce-MyAccount-content .description { font-size: 12px; color: var(--csacc-ink-3); font-style: normal; }

/* ---- addresses ---- */
.woocommerce-MyAccount-content .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.woocommerce-MyAccount-content .woocommerce-Address {
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 14px;
  padding: 20px 22px;
  width: auto;
  float: none;
}
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0; font-size: 15px; }
.woocommerce-MyAccount-content .woocommerce-Address-title .edit { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--csacc-green-deep); text-decoration: none; }
.woocommerce-MyAccount-content .woocommerce-Address address { font-style: normal; font-size: 13.5px; line-height: 1.7; color: var(--csacc-ink-2); }

/* ---- notices ---- */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.55;
  border-width: 1px;
  border-style: solid;
  list-style: none;
  margin: 0 0 16px;
}
.woocommerce-MyAccount-content .woocommerce-info { background: #f4f6f8; border-color: var(--csacc-line); color: var(--csacc-ink-2); }
.woocommerce-MyAccount-content .woocommerce-message { background: rgba(48, 232, 122, .09); border-color: rgba(48, 232, 122, .3); color: var(--csacc-ink-2); }
.woocommerce-MyAccount-content .woocommerce-error { background: rgba(255, 122, 102, .08); border-color: rgba(255, 122, 102, .34); color: #8a3322; }

/* ---- pagination ---- */
.woocommerce-MyAccount-content .woocommerce-pagination { display: flex; gap: 8px; margin-top: 4px; }


/* ---- restore Woo's two-column form rows ----
   Resetting .form-row above dropped the float pair WooCommerce uses for
   first name / last name, leaving every field full width in a column that has
   room for two. The .clear divs Woo already prints make the floats safe. */
.woocommerce-MyAccount-content .form-row-first,
.woocommerce-MyAccount-content .form-row-last { width: 48.5%; float: left; }
.woocommerce-MyAccount-content .form-row-last { float: right; }
.woocommerce-MyAccount-content .form-row-wide { width: 100%; clear: both; }
.woocommerce-MyAccount-content .clear { clear: both; }

@media (max-width: 560px) {
  .woocommerce-MyAccount-content .form-row-first,
  .woocommerce-MyAccount-content .form-row-last { width: 100%; float: none; }
}

/* ---- stacked tables on phones ----
   Woo prints data-title on every cell, so each row becomes a small card with
   real labels instead of a table squeezed into 390px. */
@media (max-width: 720px) {
  .woocommerce-MyAccount-content table.shop_table thead,
  .woocommerce-MyAccount-content table.woocommerce-orders-table thead { display: none; }

  .woocommerce-MyAccount-content table.shop_table,
  .woocommerce-MyAccount-content table.woocommerce-orders-table { border: 0; background: none; }

  .woocommerce-MyAccount-content table.shop_table tbody tr,
  .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr {
    display: block;
    background: var(--csacc-card);
    border: 1px solid var(--csacc-line);
    border-radius: 14px;
    padding: 6px 4px;
    margin-bottom: 10px;
  }

  .woocommerce-MyAccount-content table.shop_table tbody td,
  .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--csacc-line-2);
    text-align: right;
  }
  .woocommerce-MyAccount-content table.shop_table tbody tr td:last-child,
  .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr td:last-child { border-bottom: 0; }

  .woocommerce-MyAccount-content table.shop_table tbody td::before,
  .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td::before {
    content: attr(data-title);
    margin-right: auto;
    font: 700 10.5px/1 "JetBrains Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--csacc-ink-3);
    text-align: left;
  }

  .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
  .woocommerce-MyAccount-content form.edit-account,
  .woocommerce-MyAccount-content form.woocommerce-address-fields,
  .woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods { padding: 18px; }
}

/* ==========================================================================
   Beating the theme on the auth cards.

   keydesign-woocommerce.css ships:
     .woocommerce-account form.login, .woocommerce-account form.register
   which is specificity (0,2,1) and therefore beats a bare .csacc-card (0,1,0).
   Measured live on 2026-09-21: it forced max-width 850px instead of 470,
   background #f6f6f6 instead of white, padding 30px, and stripped the border
   to 0. woocommerce.css and the theme reset pile on more.

   .woocommerce-account .csacc-auth .csacc-card is (0,3,0), which wins on
   specificity rather than on load order, so it does not matter whether the
   theme stylesheet is enqueued before or after this one. No !important.
   ========================================================================== */
.woocommerce-account .csacc-auth .csacc-card {
  display: block;
  max-width: 470px;
  width: 100%;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin: 0;
  text-align: left;
  box-shadow: 0 10px 40px -22px rgba(16, 20, 30, .25);
}

.woocommerce-account .csacc-auth .csacc-card-center { text-align: center; }

/* The theme also restyles inputs and buttons inside these forms. */
.woocommerce-account .csacc-auth .csacc-inp {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--csacc-line);
  border-radius: 10px;
  background: #fbfcfd;
  font: 500 14px/1.3 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink);
  margin-bottom: 14px;
  box-shadow: none;
}
.woocommerce-account .csacc-auth .csacc-inp:focus {
  border-color: var(--csacc-green);
  box-shadow: 0 0 0 3px rgba(48, 232, 122, .16);
  background: #fff;
}

.woocommerce-account .csacc-auth .csacc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--csacc-r);
  font: 700 13.5px/1 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  padding: 13px 18px;
  text-transform: none;
  letter-spacing: 0;
  width: auto;
}
.woocommerce-account .csacc-auth .csacc-btn-block { width: 100%; }
.woocommerce-account .csacc-auth .csacc-btn-primary { background: var(--csacc-green); color: var(--csacc-green-ink); border: 1px solid var(--csacc-green); }
.woocommerce-account .csacc-auth .csacc-btn-primary:hover { background: #2ad06e; color: var(--csacc-green-ink); }
.woocommerce-account .csacc-auth .csacc-btn-ghost { background: #fff; border: 1px solid var(--csacc-line); color: var(--csacc-ink-2); }

/* Doors: the theme resets fieldset and legend to nothing. */
.woocommerce-account .csacc-auth .csacc-doors { border: 0; padding: 0; margin: 0 0 4px; }
.woocommerce-account .csacc-auth .csacc-doors-legend {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--csacc-ink);
  padding: 0;
  margin: 0 0 8px;
  float: none;
  width: auto;
}
.woocommerce-account .csacc-auth .csacc-door {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid var(--csacc-line);
  border-radius: 12px;
  padding: 15px 16px;
  margin-bottom: 10px;
  background: #fff;
}
.woocommerce-account .csacc-auth .csacc-door-in:checked + .csacc-door {
  border-color: var(--csacc-green);
  box-shadow: 0 0 0 3px rgba(48, 232, 122, .16);
}

/* The pay link is an anchor inside WooCommerce content, which the theme styles
   generously. (0,3,1) so its own look survives that. */
.woocommerce-account .csacc .csacc-due a.csacc-due-b {
  color: #8a4b00;
  text-decoration: none;
  min-height: 0;
  height: 30px;
  line-height: 1;
}
.woocommerce-account .csacc .csacc-due a.csacc-due-b:hover { color: #fff; }

/* The card holds the doors, so the auth wrapper must not be capped either. */
.woocommerce-account .csacc-auth { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }

@media (max-width: 520px) {
  .woocommerce-account .csacc-auth .csacc-card { padding: 22px 18px 20px; }
}

/* ==========================================================================
   Theme-proofing the dashboard panel.

   Same fight the auth card lost once already. A bare `.csacc-hint` is (0,1,0)
   and the theme reaches these elements with two classes plus an element, so
   its paragraph sizing won and the caption under the credentials rendered at
   body size. Everything here is (0,3,0) and wins on specificity, not on load
   order, so no !important and no dependence on enqueue order.
   ========================================================================== */
.woocommerce-account .csacc .csacc-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--csacc-ink-3);
  margin: 10px 0 0;
  padding: 0;
  max-width: 62ch;
}
.woocommerce-account .csacc .csacc-hint-last { margin-bottom: 0; }

.woocommerce-account .csacc .csacc-rk {
  font: 700 10.5px/1.3 "JetBrains Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
  margin: 0;
}
.woocommerce-account .csacc .csacc-rv {
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--csacc-ink);
  margin: 0;
}
.woocommerce-account .csacc .csacc-rv.csacc-dim { color: var(--csacc-ink-3); }

/* The two controls share a height, which is what keeps the rows aligned. Both
   need border-box or the 1px border makes them 32px on a 30px grid. */
.woocommerce-account .csacc .csacc-ibtn,
.woocommerce-account .csacc .csacc-tbtn {
  box-sizing: border-box;
  height: 30px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  background: #fff;
  box-shadow: none;
}
.woocommerce-account .csacc .csacc-ibtn {
  width: 30px;
  padding: 0;
  line-height: 0;
  font-size: 0;
}
.woocommerce-account .csacc .csacc-tbtn {
  padding: 0 11px;
  font-size: 11.5px;
  line-height: 1;
}

.woocommerce-account .csacc .csacc-tier { margin: 0; }
.woocommerce-account .csacc .csacc-tier-l {
  display: block;
  line-height: 1;
  padding-top: 1px;
  font: 800 11px/1 "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ==========================================================================
   Avatar, clickable
   YITH let a member change the photo by clicking it, so the whole portrait is
   the control here too. It is a real <label> bound to a real file input, which
   keeps it keyboard reachable and means the picker still opens if the upload
   script never loads.
   ========================================================================== */
.csacc-me-shot {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  cursor: pointer;
  margin: 0;
}
.csacc-me-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The camera badge is always visible, not hover only: on a touch screen there
   is no hover, and an affordance nobody can see is not an affordance. */
.csacc-me-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  color: var(--csacc-ink-3);
  box-shadow: 0 2px 6px -3px rgba(16, 20, 30, .5);
  transition: .16s var(--csacc-ease);
}
.csacc-me-shot:hover .csacc-me-cam {
  color: var(--csacc-green-deep);
  border-color: rgba(48, 232, 122, .55);
}
.csacc-me-shot:hover .csacc-me-img { filter: brightness(.94); }
.csacc-me-file:focus-visible + .csacc-me-shot .csacc-me-cam,
.csacc-me-shot:focus-within .csacc-me-cam {
  color: var(--csacc-green-deep);
  border-color: var(--csacc-green);
  box-shadow: 0 0 0 3px rgba(48, 232, 122, .22);
}

.csacc-me-shot.is-busy { opacity: .6; pointer-events: none; }

.csacc-me-msg {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--csacc-green-deep);
  margin-top: 3px;
  min-height: 16px;
}
.csacc-me-msg.is-bad { color: #b8412c; }

/* WordPress ships this class but a theme does not always define it, and the
   label's accessible name depends on it being off screen rather than absent. */
.csacc-me .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csacc-me-cam { transition: none; }
}

/* The download beside the credential hint. Green like the site's own links, and
   it has to be told so explicitly: the hint sets a grey on the paragraph and an
   anchor inherits colour. */
.woocommerce-account .csacc .csacc-hint-a,
.csacc-hint-a {
  color: var(--csacc-green-deep);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.woocommerce-account .csacc .csacc-hint-a:hover,
.csacc-hint-a:hover { text-decoration: underline; }