/**
 * capskip-account: corrections found on the live, logged-in site.
 *
 * Everything here fixes something that could not be seen in the local fixture,
 * because it is caused by a theme rule or by markup WooCommerce only emits for
 * a real customer. Loaded last, after _tables.css and _forms.css, so it wins
 * against them on order as well as on specificity.
 */

/* ==========================================================================
   1. Every account button was 50px, not the 44.25px the design measures.

   global.css sets `.button { min-height: var(--component-height) }` and that
   variable is 50px. Nothing in this plugin declared min-height, so the theme's
   floor quietly won everywhere and the padding stopped deciding the height.
   Zeroing the floor hands the height back to the padding, which is what makes
   these match the site's own footer buttons.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
  min-height: 0;
}

/* The two controls inside the credential readout are sized exactly, so the
   same floor was making them 50px tall inside a 56px row. */
.woocommerce-account .csacc .csacc-ibtn,
.woocommerce-account .csacc .csacc-tbtn,
.woocommerce-account .csacc-auth .csacc-btn {
  min-height: 0;
}

/* ==========================================================================
   2. The notice on /my-account/orders/ read as one run-on sentence.

   WooCommerce prints the action FIRST and the sentence after it:
     <div class="woocommerce-info"><a class="button wc-forward">Confirm email
     address</a> Confirm your email address to check for past orders...</div>
   and keydesign-woocommerce.css strips that anchor back to padding 0 with
   line-height normal, so it rendered as plain text at 23px tall. The result
   was "Confirm email address Confirm your email address to check..." with no
   visible boundary between the button and the message.

   Two fixes, both needed: lay the notice out as a row and push the action to
   the end so the sentence comes first, and give the anchor its button back.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* order:2 rather than reordering the markup: the sentence stays first for a
   screen reader either way, and this needs no template override. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info > .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message > .button {
  order: 2;
  margin-left: auto;
  flex: 0 0 auto;
}

/* (0,5,1), because the theme reaches this anchor at (0,4,1). Doubling up on
   the body classes is what buys the extra weight without an !important. */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content .woocommerce-message a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  padding: 10px 17px;
  border: 1px solid var(--csacc-line);
  border-radius: 10px;
  background: var(--csacc-card);
  color: var(--csacc-ink-2);
  font: 600 12.5px/1.4 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
}
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content .woocommerce-info a.button:hover,
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content .woocommerce-message a.button:hover {
  border-color: #cfd4da;
  color: var(--csacc-ink);
}

/* At phone width the action drops under the sentence rather than squeezing it. */
@media (max-width: 560px) {
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info > .button,
  .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message > .button {
    margin-left: 0;
    width: 100%;
  }
}

/* ==========================================================================
   0. One measure for the whole members area.

   There is no cap here any more. The two columns are laid out in the base
   sheet: the menu takes a 264px track, the content takes the rest, and the
   pair fills the theme's 1200px column. Capping the content on top of that
   would leave a gap on the right of every screen, which is the thing the
   sidebar was meant to remove.

   What survives is this: anything that carried a cap of its OWN fills the
   content column instead, so the edges line up all the way down the page.
   ========================================================================== */
.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 {
  max-width: none;
}

/* ==========================================================================
   3. The saved billing address spanned the full 1200px column.

   _forms.css lays the addresses out on a grid, but that grid is declared on
   `.woocommerce-Addresses`, and WooCommerce only emits that wrapper when there
   is more than one address to show. This store has shipping switched off, so
   the billing card is printed straight into the content column with no wrapper
   and nothing was constraining it.

   Now that the column itself is capped at 780px, the card simply fills it like
   every other section rather than carrying a cap of its own.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-Address {
  max-width: none;
  width: 100%;
}

/* The intro line above it is a lead, not body copy sized by the theme. */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
  font-size: 13px;
  line-height: 1.6;
  color: var(--csacc-ink-3);
  margin: 0 0 16px;
  max-width: 68ch;
}

/* ==========================================================================
   4. The order id sat in a grey box.

   WooCommerce prints that cell as `<th scope="row">`, not `<td>`. All 59 of
   the cell rules in _tables.css are written against `td.…`, so not one of them
   reached it, and the generic `table th` header treatment in capskip-account.css
   applied instead: grey fill, header padding, uppercase mono tracking. It read
   as a chip around the number.

   Rather than restate 59 selectors, the one cell that is a th is put back on
   the same footing as its siblings here.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce_account_subscriptions tbody th.woocommerce-orders-table__cell {
  background: none;
  padding: 0;
  border: 0;
  text-align: left;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  color: inherit;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-subscription-id,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce_account_subscriptions tbody th.woocommerce-orders-table__cell-subscription-id {
  grid-area: id;
  position: relative;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number a,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-subscription-id a,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce_account_subscriptions tbody th.woocommerce-orders-table__cell-subscription-id a {
  font: 700 15px/1.35 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.01em;
  color: var(--csacc-ink);
  text-decoration: none;
  background: none;
  padding: 0;
}

/* The whole card is the link, same as the td version does. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number a::after,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody th.woocommerce-orders-table__cell-subscription-id a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:hover th.woocommerce-orders-table__cell-order-number a,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:hover th.woocommerce-orders-table__cell-subscription-id a {
  color: var(--csacc-green-deep);
}

/* ==========================================================================
   5. 100px of empty space above and below every account screen.

   The theme's page container carries `padding: 100px 0` for landing pages that
   open on a hero. The members area has no hero: it opens on a menu, so that
   band is just a long scroll before anything appears, and the same again after
   the last card. Trimmed here only, on account pages, so nothing else on the
   site changes.

   Elementor containers read their padding from custom properties as well as
   from the shorthand, so both are set.
   ========================================================================== */
.woocommerce-account .keydesign-container.e-con {
  --padding-block-start: 34px;
  --padding-block-end: 56px;
  padding-top: 34px;
  padding-bottom: 56px;
}

@media (max-width: 720px) {
  .woocommerce-account .keydesign-container.e-con {
    --padding-block-start: 22px;
    --padding-block-end: 40px;
    padding-top: 22px;
    padding-bottom: 40px;
  }
}

/* ==========================================================================
   6. A 1px line above the date, the status, the price and the buttons.

   Once a row became a grid card, each cell kept its old table border and the
   lines reappeared as rules between the grid cells: above the price, above the
   actions, and between the order number and the date. Only the id cell escaped,
   because it is a th and the rule below targets td as well as th but the id
   cell is in the first grid row.

   The cause is a specificity TIE that the theme wins on load order:

     keydesign-woocommerce.css
       .woocommerce table.shop_table.shop_table_responsive td   -> (0,3,2)
     _tables.css
       .woocommerce-account .woocommerce-MyAccount-content
       table.woocommerce-orders-table td                        -> (0,3,2)

   Equal weight, and the theme's sheet is enqueued after this plugin's, so its
   border-top won. Adding the second table class here takes it to (0,4,2), which
   settles it on specificity instead of on enqueue order.

   Scoped to shop_table_responsive on purpose: that is the list tables (orders,
   subscriptions, downloads). The order and subscription detail tables are a
   different shape and draw their own separators with inset shadows.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.shop_table_responsive tbody th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.shop_table_responsive tbody td,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.shop_table_responsive tfoot th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table.shop_table_responsive tfoot td {
  border: 0;
}

/* ==========================================================================
   7. Long labels overlapped their neighbours in German.

   "Zahlungsmethoden" and "Rechnungsadresse" are both 16 characters and the
   cards are about 104px wide at the 780px measure, so the words ran outside
   their box and collided.

   Two causes, both needed:
   - A grid item defaults to `min-width: auto`, which refuses to shrink below
     its content. That is what let the text escape the card rather than wrap
     inside it.
   - A single long word has no break opportunity, so even once the box could
     shrink the word still would not fold.

   This is not a German-only problem: Turkish and Indonesian also build long
   compounds, and every label here goes through the translate bridge into six
   languages, so the layout has to survive whatever comes back rather than fit
   the English.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation.csacc-nav .csacc-navcard {
  min-width: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation.csacc-nav .csacc-navcard-l {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* The icon must not be squeezed when the label folds to three lines. */
.woocommerce-account .woocommerce-MyAccount-navigation.csacc-nav .csacc-navcard-ico {
  flex: 0 0 auto;
}

/* ==========================================================================
   8. The show-password eye sat 7px below the middle of the field.

   `top: 50%` only centres the eye if the wrapper's box is the input's box.
   It was not: the input carries a 14px bottom margin, so a 50px input sat in
   a 64px wrapper and half of 64 is 7px below half of 50.

   The first attempt at this moved the margin onto the wrapper with
   `.csacc-inp-wrap .csacc-inp` (0,2,0), which lost to this plugin's OWN auth
   card rule `.woocommerce-account .csacc-auth .csacc-inp` (0,3,0) further up
   the sheet. Losing to your own stylesheet is easy to miss, because the rule
   looks like it should apply and nothing in the theme is to blame.

   (0,4,0) here, so the wrapper is exactly the field and the eye is centred on
   whatever height the field ends up being.
   ========================================================================== */
.woocommerce-account .csacc-auth .csacc-inp-wrap,
.woocommerce-account .csacc .csacc-inp-wrap {
  position: relative;
  margin-bottom: 14px;
}

.woocommerce-account .csacc-auth .csacc-inp-wrap .csacc-inp,
.woocommerce-account .csacc .csacc-inp-wrap .csacc-inp {
  margin-bottom: 0;
}

.woocommerce-account .csacc-auth .csacc-inp-wrap .csacc-eye,
.woocommerce-account .csacc .csacc-inp-wrap .csacc-eye {
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  line-height: 0;
}

/* ==========================================================================
   9. The password reset confirmation, on its own line.

   It used to render inside the actions cell beside the Reset button, which is
   about 90px wide, so "Password Reset & Email Sent" wrapped onto two lines and
   pushed the row open. It sits under the readout now, where a sentence fits as
   a sentence.

   The licence plugin's script shows and hides this element, so it keeps its
   original `password-status` class; `csacc-pwstatus` is only here to style it.
   ========================================================================== */
.woocommerce-account .csacc .csacc-pwstatus {
  margin: 10px 0 0;
  font: 600 12px/1.5 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-green-deep);
}