/**
 * capskip-account, the account screens: forms, notices, addresses
 *
 * Account details, the saved billing address, the address edit form and the
 * three WooCommerce notice types. capskip-account.css already gives these
 * screens the house colours; this file gives them structure, which is what the
 * owner was actually looking at when he called them poor.
 *
 * SPECIFICITY
 * Every selector starts at `.woocommerce-account .woocommerce-MyAccount-content`
 * and adds at least one more class, so the cheapest rule in the file is (0,3,0).
 * keydesign-woocommerce.css tops out at (0,2,1) on these elements and has beaten
 * this plugin once already, so these rules win on specificity, not on enqueue
 * order. Where a rule restates something capskip-account.css also sets, the
 * selector is deliberately one step higher again (a `form.woocommerce-...`
 * qualifier) so the outcome does not depend on which file is registered first.
 * Nothing in here is !important.
 *
 * COLOURS
 * The tokens already declared on .woocommerce-MyAccount-content, plus three
 * literals that capskip-account.css already uses inside this same scope:
 * #f7f8fa (the recessed grey on table headers), #fbfcfd (the input fill) and
 * the rgba(255,122,102,..) / #b8412c error pair. Nothing new is introduced.
 *
 * ONE DELIBERATE DEVIATION
 * --csacc-green-ink resolves to #06230f inside .woocommerce-MyAccount-content
 * but to #04120b everywhere else, and #04120b is the ink measured off the
 * site's own green buttons. The primary action below uses the literal #04120b
 * so the Save button matches the buttons on the login card and the homepage.
 * Fixing the token itself belongs in capskip-account.css, not here.
 *
 * NO INJECTED COPY
 * There is no `content: "..."` text anywhere in this file. capskip.com serves
 * six languages and a CSS string never reaches TranslatePress or the bridge
 * dictionary, so any heading invented here would stay English on /ru/, /de/,
 * /tr/, /hi/ and /id/ forever. Structure is built from the elements Woo already
 * prints (the fieldset legend is the password heading) and the only generated
 * content is decorative marks with no words in them.
 */

/* ==========================================================================
   Page lede
   The Addresses screen opens with a real sentence from Woo, and today it
   renders as unstyled body text above the cards. :not([class]) is doing two
   jobs: it skips Woo's own classed paragraphs (form rows, the button row) and
   it lifts the selector to (0,3,1) so the theme's (0,2,1) cannot take it back.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content > p:not([class]) {
  max-width: 780px;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--csacc-ink-3);
}

/* ==========================================================================
   Notices

   Same shape as .csacc-banner on the dashboard: 12px radius, a 1px tinted
   border over a 9 to 10 percent wash of the same hue, and the banner title's
   13.5px as the type size, because a notice is one statement and not body copy.

   The tint ladder follows the banners: green for something that went right,
   the neutral slate for something that is merely true (the owner's real case,
   "No saved methods found." on Payment methods), and the red already used for
   destructive actions in this scope. There is no orange rung, because Woo has
   no warning notice class to put on it.

   The mark is a background image rather than a ::before glyph so the same rules
   work on `div.woocommerce-info` and on `ul.woocommerce-error` without the
   list items fighting a pseudo element for the first box. It also means the
   three types differ by shape as well as by hue, so the state never rests on
   colour alone. Left padding is 46px: an 18px gutter, the 18px mark, a 10px
   gap, so a wrapped second line stays clear of the mark instead of running
   under it.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 18px 14px 46px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 600 13.5px/1.55 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  list-style: none;
  background-repeat: no-repeat;
  background-position: 18px 15px;
  background-size: 18px 18px;
  overflow-wrap: break-word;
}

/* WooCommerce core puts its own glyph and a 3px coloured top rule on these. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before {
  content: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info li,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message li,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error li + li,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message li + li,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info li + li {
  margin-top: 7px;
}

/* Something that is merely true. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  background-color: #f4f6f8;
  border-color: var(--csacc-line);
  color: var(--csacc-ink-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232456c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0M12 11v5.5M11.72 7.9a.27.27 0 1 0 .55 0 .27.27 0 1 0-.55 0'/%3E%3C/svg%3E");
}

/* Something that went right. Exactly the .csacc-banner-empty wash. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  background-color: rgba(48, 232, 122, .09);
  border-color: rgba(48, 232, 122, .3);
  color: var(--csacc-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230a7d4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0M8 12.3l2.8 2.8 5.2-5.3'/%3E%3C/svg%3E");
}

/* Something the member has to fix. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
  background-color: rgba(255, 122, 102, .08);
  border-color: rgba(255, 122, 102, .34);
  color: #8a3322;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9302c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0M12 7.5v5.25M11.72 16.1a.27.27 0 1 0 .55 0 .27.27 0 1 0-.55 0'/%3E%3C/svg%3E");
}

/* A link inside a notice inherits the notice's ink, so a red error does not
   sprout a green word in the middle of it. The exception is a real button. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a:not(.button),
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a:not(.button),
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error a:not(.button) {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button {
  float: none;
  margin-left: 12px;
  vertical-align: middle;
}

/* ==========================================================================
   The form card

   Account details and the address edit form are the same object: one card per
   page holding one set of fields and one action. 16px radius, the radius the
   auth card uses, because this is the page's card rather than one tile in a
   set. overflow:hidden does three things at once: it clips the footer bar to
   the rounded corners, it contains Woo's float pair without depending on the
   .clear divs alone, and it keeps the tinted zones from bleeding past the edge.

   The measure is capped at 780px. Unclamped, the members area column runs to
   about 1180px at a 1240px viewport, which makes a first-name field 580px wide
   and unreadable to scan. 780 leaves the two-column pair at about 360px each,
   the same rhythm as the dashboard's .csacc-fields minmax(270px).
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content form.edit-account,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 780px;
  margin: 0 0 18px;
  padding: 26px 28px 0;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 20, 30, .04);
  overflow: hidden;
}

/* Woo wraps the address rows in this and then puts the button row outside it,
   so the wrapper has to contain its own floats or the button lands beside the
   last field. flow-root does that without a clearfix pseudo element. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
  display: flow-root;
}

/* ---- field rows ----
   The gutter is a fixed 16px rather than the 3 percent it used to be. A
   percentage gutter grows to 35px on a wide column and squeezes to 12px on a
   tablet, so the pair never sat on the same rhythm as anything around it. */
.woocommerce-account .woocommerce-MyAccount-content .form-row {
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
  width: calc(50% - 8px);
  float: left;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
  float: right;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row-wide {
  width: 100%;
  clear: both;
}

/* Woo's own clearing divs. Restated here with display:block because a theme
   that hides them (some do) turns clear:both into a no-op and the float pair
   collapses onto whatever follows it. */
.woocommerce-account .woocommerce-MyAccount-content .clear {
  display: block;
  clear: both;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- labels ----
   .csacc-lab, character for character. The one change is a real line-height:
   Woo's password labels carry a parenthetical, so at 390px they wrap, and mono
   caps on a 1 line-height collided with the line below and clipped descenders. */
.woocommerce-account .woocommerce-MyAccount-content .form-row label,
.woocommerce-account .woocommerce-MyAccount-content .form-row > label {
  display: block;
  margin: 0 0 8px;
  font: 700 10.5px/1.45 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
}
.woocommerce-account .woocommerce-MyAccount-content .form-row .required {
  color: #b8412c;
  border: 0;
  text-decoration: none;
}

/* A checkbox row is a sentence, not a field name, so it opts out of the caps.
   It has to be qualified with .form-row to reach (0,4,1), because the label
   rule above is (0,3,1) and a bare class selector loses to it on element
   count. Unqualified, the checkbox label came out in mono caps. */
.woocommerce-account .woocommerce-MyAccount-content .form-row label.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 12.5px/1.5 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: var(--csacc-ink-2);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form__input-checkbox {
  width: auto;
  margin: 0;
  accent-color: #30e87a;
}

/* ---- inputs ----
   .csacc-inp geometry: 12px 13px, 10px radius, #fbfcfd on --csacc-line, and
   the green ring on focus. box-sizing is declared rather than inherited
   because width:100% plus 13px of side padding overflows the card the moment
   anything resets the box model back to content-box. */
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content .form-row input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content .form-row select,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  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-color: #fbfcfd;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .14s var(--csacc-ease), box-shadow .14s var(--csacc-ease);
}
.woocommerce-account .woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row select:focus,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea:focus {
  outline: 0;
  border-color: var(--csacc-green);
  box-shadow: 0 0 0 3px rgba(48, 232, 122, .16);
  background-color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content .form-row input::placeholder,
.woocommerce-account .woocommerce-MyAccount-content .form-row textarea::placeholder {
  color: var(--csacc-ink-3);
}

/* appearance:none above takes the native arrow with it, so the country and
   state selects get one back. Decorative mark, no words, safe in six locales. */
.woocommerce-account .woocommerce-MyAccount-content .form-row select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6675' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px 12px;
}

/* ==========================================================================
   Account details: identity, then password change

   The two things on this page are not the same thing. Changing your name is
   housekeeping; changing your password is a security action with its own
   confirmation rules. They used to be one flat stack of five inputs in a box,
   which is why nothing on the page had a shape.

   Identity stays on the card's white, at the top, where the eye starts. The
   password fieldset becomes a recessed panel on #f7f8fa, the same grey the
   table headers use, with the legend promoted to a real heading. That is the
   separation, and it costs no new markup.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields fieldset {
  box-sizing: border-box;
  margin: 8px 0 4px;
  padding: 19px 20px 20px;
  background: #f7f8fa;
  border: 1px solid var(--csacc-line);
  border-radius: 12px;
}

/* A legend renders inside the border gap, and display:block is not enough to
   get it out on every engine. float plus a full width makes it behave as the
   panel's first block, and the rows below it clear normally. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset legend,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields fieldset legend {
  float: left;
  width: 100%;
  margin: 0 0 3px;
  padding: 0 0 0 21px;
  font: 800 14px/1.3 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.012em;
  color: var(--csacc-ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a0e14' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5a4 4 0 1 0 8 0 4 4 0 1 0-8 0M10.4 13.6 20 4M17 7l2.5 2.5M14.5 9.5l2 2'/%3E%3C/svg%3E") no-repeat 0 50% / 14px 14px;
}

/* The fields sit below the legend, not beside it. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset .form-row,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields fieldset .form-row {
  clear: both;
  margin-top: 15px;
  margin-bottom: 0;
}
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset .form-row:first-of-type,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields fieldset .form-row:first-of-type {
  margin-top: 13px;
}

/* #fbfcfd on #f7f8fa is a two step difference and the fields vanished into the
   panel. Inside the panel they go white, which is also the focus state, so the
   field reads as a field before you touch it.
   The .form-row in the middle of the selector is not decoration: the field rule
   above is (0,4,1) because of its [type=...], so without it this lands at
   (0,3,3), loses, and the inputs measure #fbfcfd again. Measured. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset .form-row input,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset .form-row select,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields fieldset .form-row input,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields fieldset .form-row select {
  background-color: #fff;
}

/* Woo's hint text under a field. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm em,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields em,
.woocommerce-account .woocommerce-MyAccount-content .form-row .description {
  display: block;
  margin-top: 7px;
  font: 500 12px/1.55 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  font-style: normal;
  color: var(--csacc-ink-3);
}

/* ==========================================================================
   The action bar

   Woo puts the submit in the form's last paragraph, along with the nonce and
   the hidden action field, both of which are display:none and so never become
   flex items. Turning that paragraph into a bar on the recessed grey, bled out
   to the card edges by the card's own side padding, is what makes Save read as
   the single primary action rather than one more control in the stack.

   inset 0 1px 0 rather than a border-top: a real border is counted by
   border-box and would make this bar one pixel taller than the same bar on the
   address form, which is the sub-pixel drift this project has already chased
   twice.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > p:last-child,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields > p:last-child {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  clear: both;
  margin: 24px -28px 0;
  padding: 17px 28px;
  background: #f7f8fa;
  box-shadow: inset 0 1px 0 var(--csacc-line-2);
}

/* ---- the primary action ----
   The site's small button: 600 weight (never 700), 13.5px, 11px 19px, radius
   10px, no uppercase, #30e87a on #04120b with the soft green glow. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields input[type="submit"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  /* The bar spaces its children with gap, and capskip-account.css adds
     `.button + .button { margin-left: 8px }` for table cells. Left alone that
     margin stacked on top of the gap here, and at 390px it pushed the 100%
     wide button past the line and shrank it to 292.67 against Cancel's 300.67.
     Measured. */
  margin: 0;
  padding: 11px 19px;
  border: 1px solid #30e87a;
  border-radius: 10px;
  font: 600 13.5px/1.55 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  background: #30e87a;
  color: #04120b;
  box-shadow: 0 2px 10px -4px rgba(48, 232, 122, .45);
  cursor: pointer;
  transition: .16s var(--csacc-ease);
}
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm input[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields input[type="submit"]:hover {
  background: #2ad06e;
  border-color: #2ad06e;
  color: #04120b;
  box-shadow: 0 4px 14px -4px rgba(48, 232, 122, .55);
}
/* Green on green is invisible, so the keyboard ring is the green glow widened
   and a dark hairline, which reads on the grey bar and on the card. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"]:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields button[type="submit"]:focus-visible {
  outline: 0;
  border-color: var(--csacc-green-deep);
  box-shadow: 0 0 0 3px rgba(15, 122, 65, .28), 0 2px 10px -4px rgba(48, 232, 122, .45);
}

/* Anything else in the bar is secondary and stays quiet, to the left of Save.
   It carries the full geometry rather than just the colours: two controls in
   one bar have to agree on height, and leaving the size to whatever .button
   happens to be set to elsewhere put a 33.8px Cancel next to a 44.3px Save. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > p:last-child a.button,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields > p:last-child a.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0 0;
  padding: 11px 19px;
  border: 1px solid var(--csacc-line);
  border-radius: 10px;
  font: 600 13.5px/1.55 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  background: var(--csacc-card);
  color: var(--csacc-ink-2);
  box-shadow: none;
}
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > p:last-child a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields > p:last-child a.button:hover {
  border-color: #cfd4da;
  color: var(--csacc-ink);
}

/* ==========================================================================
   Saved addresses

   The saved state was a bare <address> under a heading. It is a record, so it
   gets a record's shape: a titled header zone on the recessed grey with the
   Edit affordance as a real chip, and the address set below it on white with
   enough leading to read as lines rather than as a paragraph that lost its
   commas.

   The grid caps a track at 340px instead of letting one card stretch. capskip
   only stores a billing address, so on a 1180px column the old auto-fit
   minmax(260px, 1fr) produced a single 1180px card holding five short lines.
   auto-fill plus a track maximum keeps a lone card the size of a card, and
   still puts two side by side the day a shipping address appears.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 340px));
  justify-content: start;
  gap: 14px;
  margin: 0 0 18px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
  box-sizing: border-box;
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 20, 30, .04);
  overflow: hidden;
}

/* min-height with box-sizing on the same element, so the two header zones
   measure the same whether or not a card carries an Edit chip. Without the
   box-sizing the padding is added on top of the min-height and the header
   comes out 82px, which is the trap this project keeps stepping in. The
   separator is an inset shadow for the same reason: a real border-bottom is
   counted by border-box and would make one header a pixel taller. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin: 0;
  padding: 12px 16px;
  background: #f7f8fa;
  box-shadow: inset 0 -1px 0 var(--csacc-line-2);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  min-width: 0;
  margin: 0;
  font: 800 14px/1.3 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.012em;
  color: var(--csacc-ink);
}

/* Edit is the only thing you can do to a saved address, so it is a control
   with an edge, not a word in the corner. Same 30px chip as .csacc-tbtn. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 30px;
  margin-left: auto;
  padding: 0 12px;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 8px;
  font: 600 11.5px/1 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: var(--csacc-ink-2);
  transition: .14s var(--csacc-ease);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover {
  border-color: rgba(48, 232, 122, .55);
  color: var(--csacc-green-deep);
}

/* The set itself. 1.75 leading because these are five short lines stacked on
   <br>, not a paragraph, and they need to read as a block of separate facts.
   break-word because a long street line in a 258px track has nowhere to go. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
  display: block;
  margin: 0;
  padding: 16px 16px 18px;
  font: 500 13.5px/1.75 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  font-style: normal;
  color: var(--csacc-ink-2);
  overflow-wrap: break-word;
}

/* The nothing-saved-yet state Woo prints in place of the address. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address > p {
  margin: 0;
  padding: 16px 16px 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--csacc-ink-3);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* The pair stacks below 560px. Above it, first and last stay side by side. */
@media (max-width: 560px) {
  .woocommerce-account .woocommerce-MyAccount-content .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content .form-row-last {
    width: 100%;
    float: none;
  }

  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
  .woocommerce-account .woocommerce-MyAccount-content form.edit-account,
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields {
    padding: 20px 18px 0;
    border-radius: 14px;
  }

  /* Two things at once. The bleed has to track the card's new side padding or
     the bar stops reaching the edges. And the bar goes column with stretch
     rather than width:100% on each control: two 100% wide items in a wrapping
     row still have to negotiate the gap between them, and the one that wraps
     comes out 8px narrower than the one that did not. Stacking settles it. */
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > p:last-child,
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields > p:last-child {
    flex-direction: column;
    align-items: stretch;
    margin: 20px -18px 0;
    padding: 16px 18px;
  }
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm > p:last-child a.button,
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields > p:last-child a.button {
    margin: 0;
  }

  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset,
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields fieldset {
    padding: 17px 16px 18px;
  }

  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
    padding: 13px 15px 13px 42px;
    background-position: 15px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-account .woocommerce-MyAccount-content .form-row input,
  .woocommerce-account .woocommerce-MyAccount-content .form-row select,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit,
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm button[type="submit"],
  .woocommerce-account .woocommerce-MyAccount-content form.woocommerce-address-fields button[type="submit"] {
    transition: none;
  }
}

/* ==========================================================================
   The address form's own heading.

   form-edit-address.php prints `<h2>Billing address</h2>` inside the form, and
   the menu beside it already says Billing address and is the only entry lit,
   so the screen opened with the same three words twice. The plugin filters the
   text away; this drops the empty element's box, which the theme would
   otherwise still give 40px of margin.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content form > h2:empty {
  display: none;
}