/**
 * capskip-account, the account tables
 *
 * Orders, Subscriptions, Downloads, and the two detail readouts (view-order
 * and view-subscription). capskip-account.css painted these: a grey header
 * strip, hairline row rules, house colours on the type. They were still a
 * spreadsheet, which is why the owner called them not nice. Five columns of
 * equal weight, and the two things a member opens this page to find (did it go
 * through, what did it cost) carried no more emphasis than the date.
 *
 * So the table metaphor goes, at every width rather than only on phones. A
 * member reads a short list of past payments and one live subscription, not a
 * dataset: nothing here is sorted, filtered or compared down a column, so the
 * columns were buying nothing and costing scannability.
 *
 * WHAT A ROW IS NOW
 * A card. The order id is the primary value in mono, the date sits under it
 * carrying its own label, the status is a real pill with the word still in it,
 * the amount is mono and the largest thing on the right, and the actions are
 * quiet white chips unless the action is the one that matters (Pay, Download),
 * which keeps the green. The detail pages go the other way and stay a single
 * card, because a receipt is one object whose lines are not separately
 * actionable.
 *
 * SPECIFICITY
 * Every selector starts at `.woocommerce-account .woocommerce-MyAccount-content`
 * plus a table class, so the cheapest rule here is (0,3,1). That clears
 * keydesign-woocommerce.css at (0,2,1) and the table block in
 * capskip-account.css at (0,2,2), which this file supersedes. Rules that have
 * to beat the per-table reset below carry the table class AND the cell class,
 * landing at (0,4,2), so the outcome never depends on which file is enqueued
 * first or on the order of the rules inside this one. Nothing here is
 * !important.
 *
 * WHICH TABLES
 * The card layout is keyed to `table.woocommerce-orders-table` (modern
 * WooCommerce Subscriptions puts that class and the
 * woocommerce-orders-table__cell-order-* classes on its own table and on the
 * related orders table) and to `table.woocommerce-table--order-downloads`.
 * A table carrying neither keeps the plain look from capskip-account.css: this
 * layout places cells by their class, so it must not claim a table whose cells
 * it cannot read and then drop them all in one column.
 *
 * COLOURS
 * The tokens already declared on .woocommerce-MyAccount-content, plus the
 * literals capskip-account.css already uses in this same scope: #f7f8fa (the
 * recessed grey), the amber pair (#b26400 on rgba(255,159,67,..)) and the red
 * pair (#b8412c on rgba(255,122,102,..)). No new hues.
 *
 * INJECTED COPY
 * Same rule as _forms.css: no `content: "..."` string anywhere, because a CSS
 * string never reaches TranslatePress or the bridge dictionary and would stay
 * English on /ru/, /de/, /tr/, /hi/ and /id/ forever. `attr(data-title)` is
 * not a string: it echoes the column name WooCommerce already printed and
 * already translated through its own textdomain, so it is safe in all six
 * languages. The only other generated content is a dot with no words in it.
 *
 * 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. Primary actions here use the literal, so Pay and
 * Download match the buttons on the homepage. Fixing the token belongs in
 * capskip-account.css, not here.
 */

/* ==========================================================================
   The list: the table itself

   capskip-account.css made the table the card (border, 14px radius,
   overflow:hidden). The rows are the cards now, so the table stops drawing
   anything and stops clipping: overflow has to be visible or a row's hover
   shadow is cut off at the table edge.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  font-size: 13.5px;
}

/* The header strip is the spreadsheet tell, and every cell that needs a name
   now prints its own from data-title, so the strip has nothing left to say.
   display:none rather than a visually hidden class on purpose: display:block
   on the table has already taken the table role out of the accessibility tree,
   so a kept thead would read as five orphan words above the list rather than
   as column headers. The labels inside the cards are real visible text, and
   they are what carries the meaning instead. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table thead,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads thead {
  display: none;
}

/* A flex column rather than margins on the rows: the gap is then the only
   spacing rule, so there is no trailing margin to strip off the last card and
   no collapsing to reason about. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   The row card

   box-sizing is declared on the same element as min-height, not inherited:
   min-height on a content box measures the content, so the 30px of padding
   would be added on top and an 86px row would render at 116px. That is the
   trap this project has already stepped in twice, so it is restated wherever
   a min-height appears in this file.

   min-height plus align-content:center is also what keeps siblings equal. The
   row with two actions (Pay, Cancel) and the row with one (View) have
   different content heights; pinning the box and centring the tracks inside it
   means every card in the list measures the same, and no card is separated
   from the next by a border-top that border-box would count on one row and not
   on the one above it.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody tr {
  box-sizing: border-box;
  position: relative;
  display: grid;
  align-content: center;
  align-items: center;
  min-height: 86px;
  margin: 0;
  padding: 15px 18px;
  background: var(--csacc-card);
  border: 1px solid var(--csacc-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 20, 30, .04);
  transition: border-color .16s var(--csacc-ease), box-shadow .16s var(--csacc-ease);
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:hover,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody tr:hover {
  border-color: rgba(48, 232, 122, .5);
  box-shadow: 0 10px 22px -16px rgba(16, 20, 30, .5);
}

/* The cells stop being cells. Everything they used to carry (the padding, the
   hairline, the vertical-align) belongs to the card now. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  vertical-align: baseline;
  line-height: 1.4;
  color: var(--csacc-ink-2);
}

/* ---- orders and subscriptions ----
   Five columns, one of them an empty spacer. The id and the status sit
   together on the left because a status is an adjective and belongs next to
   the thing it describes; the money and the action sit together on the right.
   The 1fr between them is empty on purpose: putting the 1fr on the id instead
   pushes the pill 700px away from its number on a 1180px column, and the row
   then reads as four unrelated things.

   Each row is its own grid, so the amount in a row carrying two actions (Pay
   and Cancel) sits about 80px left of the amount in a row carrying one. That
   is the price of cards over a table, and it is paid on purpose: the
   alternatives are a fixed action gutter, which breaks the moment a German or
   Turkish label is longer than an English one, or subgrid, which would hand
   this list a layout that collapses outright on a browser that lacks it. The
   amounts are still right aligned, and always the last thing before the
   action. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr {
  grid-template-columns: minmax(0, max-content) max-content 1fr max-content max-content;
  grid-template-areas:
    "id   status . total actions"
    "when when   . total actions";
  gap: 3px 18px;
}

/* The primary value. Mono, because an order id is a code you check against an
   email, not a word you read. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-subscription-id {
  grid-area: id;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.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;
}

/* The whole card is the link. A list row whose only target is a 60px id is a
   poor thing to hit, and there is exactly one destination per row, so the id's
   ::after is stretched over the card. The cost is that the amount can no
   longer be swiped with the mouse, which is worth it on a list you scan. The
   actions cell is lifted above the overlay so Pay and Cancel keep their own
   clicks. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
  position: relative;
  z-index: 1;
}
/* Hovering anywhere on the card is hovering the link, so the id answers. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:hover td.woocommerce-orders-table__cell-order-number a {
  color: var(--csacc-green-deep);
}
/* The overlay is the focus target too, so the ring is drawn on the overlay.
   On the link itself it would land on a 60px box in the corner of the card. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a:focus-visible {
  outline: 0;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a:focus-visible::after {
  box-shadow: 0 0 0 3px rgba(48, 232, 122, .3), inset 0 0 0 1px var(--csacc-green);
}

/* The date line. It carries the column name it lost with the header strip,
   which is what makes the subscriptions table readable: "14 October 2026" on
   its own is ambiguous, and the label Woo prints there says whether it is the
   order date or the next payment. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-subscription-next-payment {
  grid-area: when;
  font-size: 12.5px;
  color: var(--csacc-ink-2);
  white-space: nowrap;
  /* Air under the id line. The row gap is 3px, which is right for the columns
     that sit side by side but too tight between the id and the date directly
     beneath it: the 15px mono number and the 10px label ran together as one
     block. Padding here rather than a larger row gap, because Total and
     Actions span both rows and a bigger gap would stretch them too. */
  padding-top: 5px;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date::before,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-subscription-next-payment::before {
  content: attr(data-title);
  margin-right: 8px;
  font: 700 10px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date time {
  font-weight: 600;
}

/* ---- the amount ----
   The largest thing on the right and the only other mono value in the row.
   Woo prints "$49.00 for 1 item" and "$49.00 / month" as an amount span
   followed by a loose text node; making the span a block drops that tail onto
   a line of its own, so the figure is read first and the qualifier waits
   underneath instead of competing with it. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
  grid-area: total;
  align-self: center;
  text-align: right;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--csacc-ink-3);
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
  display: block;
  font: 700 16px/1.3 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.02em;
  color: var(--csacc-ink);
  white-space: nowrap;
}

/* ==========================================================================
   Status

   A pill, not coloured text. The word WooCommerce printed is always inside it
   (nothing here replaces or hides that text), the dot repeats the state as a
   second signal, and the tints are the ones already used in this scope. An
   unrecognised status still renders as a neutral pill rather than as bare
   text, which is what keeps this safe the day Subscriptions adds a status this
   stylesheet has not met.

   box-sizing sits with the min-height again. The ring is an inset shadow and
   not a border, so a pill is exactly 28px in every state: a real border is
   counted by border-box on the states that have one, and the pills would then
   sit a pixel out of line with each other down the list.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
  box-sizing: border-box;
  grid-area: status;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font: 700 12px/1.25 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  background: #f1f3f6;
  color: var(--csacc-ink-2);
  box-shadow: inset 0 0 0 1px var(--csacc-line);
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Live, or done. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-active td.woocommerce-orders-table__cell-order-status {
  background: rgba(48, 232, 122, .12);
  color: var(--csacc-green-deep);
  box-shadow: inset 0 0 0 1px rgba(48, 232, 122, .36);
}

/* Waiting on the member. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-pending td.woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-pending-cancel td.woocommerce-orders-table__cell-order-status {
  background: rgba(255, 159, 67, .13);
  color: #b26400;
  box-shadow: inset 0 0 0 1px rgba(255, 159, 67, .4);
}

/* Over, one way or another. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-expired td.woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status {
  background: rgba(255, 122, 102, .1);
  color: #b8412c;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 102, .34);
}

/* A cancelled or expired row is history. Every value stays legible, it just
   stops competing with the live rows above it. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-number a,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-expired td.woocommerce-orders-table__cell-order-number a,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tr.woocommerce-orders-table__row--status-expired td.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
  color: var(--csacc-ink-2);
}

/* ==========================================================================
   Actions

   Quiet by default. The site's small button geometry, 600 weight, 11px 19px,
   10px radius, on white, so a control reads as a control without shouting
   across a list of three near identical rows. The one action that matters in
   a row keeps the green and the glow.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file {
  grid-area: actions;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file {
  grid-area: file;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .button,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .woocommerce-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Woo's margin between two buttons in a cell, handed over to the flex gap so
     the pair wraps cleanly instead of carrying a stray left margin. */
  margin: 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;
  cursor: pointer;
  transition: .16s var(--csacc-ease);
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .button:hover {
  border-color: #cfd4da;
  color: var(--csacc-ink);
  background: var(--csacc-card);
}

/* The one that matters: an unpaid order's Pay, and a download's file. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button.pay,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .button {
  background: var(--csacc-green);
  border-color: var(--csacc-green);
  color: #04120b;
  box-shadow: 0 2px 10px -4px rgba(48, 232, 122, .45);
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button.pay:hover,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .button:hover {
  background: #2ad06e;
  border-color: #2ad06e;
  color: #04120b;
  box-shadow: 0 4px 14px -4px rgba(48, 232, 122, .55);
}

/* Destructive actions read as destructive, and only on purpose. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button.cancel,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button.subscription_cancel {
  background: var(--csacc-card);
  color: #b8412c;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button.cancel:hover,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button.subscription_cancel:hover {
  border-color: #e8a99d;
  color: #b8412c;
}

/* Green on green is invisible, so the keyboard ring is the deep green, which
   reads on the white chip and on the green one. Same pair as _forms.css. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .button:focus-visible {
  outline: 0;
  border-color: var(--csacc-green-deep);
  box-shadow: 0 0 0 3px rgba(15, 122, 65, .28);
}

/* ==========================================================================
   Downloads

   The same card, on one line: what it is on the left, the two facts that
   qualify it in the middle, the file on the right. Those two keep their labels
   above them, because "Never" and an infinity glyph mean nothing alone.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody tr {
  grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
  grid-template-areas: "product remaining expires file";
  gap: 3px 22px;
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-product {
  grid-area: product;
  font: 700 14.5px/1.4 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.012em;
  color: var(--csacc-ink);
  overflow-wrap: break-word;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-product a {
  font: inherit;
  color: inherit;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-product a:hover {
  color: var(--csacc-green-deep);
}

.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-remaining,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-expires {
  text-align: right;
  font: 600 13px/1.4 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink-2);
  white-space: nowrap;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-remaining {
  grid-area: remaining;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-expires {
  grid-area: expires;
}
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-remaining::before,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-expires::before {
  content: attr(data-title);
  display: block;
  margin-bottom: 5px;
  font: 700 10px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
}

/* A file name is not a label and will not be short. It wraps inside the button
   rather than pushing the card wider than the column it sits in. */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .button {
  max-width: 260px;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ==========================================================================
   The detail readouts: view-order and view-subscription

   These stay one card. An order detail table is a receipt, its lines are not
   separately actionable, and three floating cards for Subtotal, Payment method
   and Total would be noise. What changes is the weight: the line items sit on
   white, the totals block sits on the recessed grey, and the last row of it
   (the total) is promoted, so the eye lands on the figure that matters.

   :not(.shop_table_responsive) is load bearing: the downloads table also
   carries .order_details, and it is a list, not a receipt.
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive),
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid var(--csacc-line);
  border-radius: 14px;
  background: var(--csacc-card);
  box-shadow: 0 1px 2px rgba(16, 20, 30, .04);
  overflow: hidden;
  font-size: 13.5px;
}

.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) thead,
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details thead {
  display: none;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tbody,
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tfoot,
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody,
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details tfoot {
  display: block;
}

/* Two columns, label left and value right, at a pinned height so the lines of
   a receipt sit on an even rhythm. box-sizing with the min-height, again. */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tr,
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details tr {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 4px 18px;
  min-height: 54px;
  margin: 0;
  padding: 12px 18px;
}

/* Separators are inset shadows for the reason given at the top of this file: a
   real border-top is counted by border-box, and the first line of the receipt
   would come out a pixel shorter than every line under it. */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tbody tr + tr,
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tfoot tr + tr,
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details tbody tr + tr {
  box-shadow: inset 0 1px 0 var(--csacc-line-2);
}

/* The totals block. One zone, one line above it, nothing between it and the
   card edge. */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tfoot {
  background: #f7f8fa;
  box-shadow: inset 0 1px 0 var(--csacc-line);
}

.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td,
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) th,
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details td,
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details th {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  vertical-align: baseline;
  line-height: 1.45;
  font-weight: 500;
  color: var(--csacc-ink-2);
}

/* Line items: the product is the sentence, the quantity is an aside. */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td.product-name {
  font: 700 14px/1.45 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -.012em;
  color: var(--csacc-ink);
  overflow-wrap: break-word;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td.product-name a {
  color: inherit;
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td.product-name a:hover {
  color: var(--csacc-green-deep);
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td.product-name .product-quantity {
  margin-left: 8px;
  font: 600 11.5px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--csacc-ink-3);
  white-space: nowrap;
}

/* The value column. Mono is for the figures only: the totals block also holds
   the payment method, and "Credit card (Stripe)" set in a code face reads as a
   machine string rather than as the answer to a question. */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td.product-total,
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tfoot td {
  text-align: right;
  font: 600 13.5px/1.4 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink);
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td.product-total .woocommerce-Price-amount,
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tfoot td .woocommerce-Price-amount {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* The totals labels, and the key column of a subscription readout, are the
   same thing: a field name. Same mono caps as every label in this plugin. */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tfoot th,
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details td:first-child {
  font: 700 10.5px/1.45 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--csacc-ink-3);
}

/* The figure the page exists to state. */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tfoot tr:last-child th {
  color: var(--csacc-ink-2);
}
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tfoot tr:last-child td {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--csacc-ink);
}

/* A subscription readout is key and value, not money, so the value stays in
   the UI face and only the amounts inside it go mono. */
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details td + td {
  text-align: right;
  font: 600 13.5px/1.45 "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--csacc-ink);
}
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details td + td .woocommerce-Price-amount {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--csacc-ink);
}

/* Subscriptions prints its action row as a single spanning cell. */
.woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td[colspan],
.woocommerce-account .woocommerce-MyAccount-content table.subscription_details td[colspan] {
  grid-column: 1 / -1;
  text-align: left;
}

/* ==========================================================================
   Phones

   Below 720px the card re-templates rather than falling back to a stack of
   table cells: the id and its pill stay together on the first line, and the
   rest become labelled rows underneath, each label printed from the data-title
   WooCommerce already puts on every cell in these tables. No horizontal scroll
   at 390px.
   ========================================================================== */
@media (max-width: 720px) {
  /* capskip-account.css turns every cell of a .shop_table into a flex row with
     a data-title label and a border-bottom at this width. This file takes that
     job over for its own tables, so the inherited labels are cleared first and
     the wanted ones are put back below. */
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td::before,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody td::before,
  .woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td::before,
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details td::before {
    content: none;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody td {
    border: 0;
    background: none;
  }

  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "id      status"
      "when    when"
      "total   total"
      "actions actions";
    align-content: start;
    align-items: start;
    min-height: 0;
    padding: 15px 16px 16px;
    /* No row gap, the rows carry their own spacing. A COLUMN gap though: the
       id track is minmax(0, 1fr) and the pill is max-content beside it, so
       with no gap the two boxes are flush and a long id or a long status
       (German "Wartet auf Zahlung") meets the pill with nothing between them. */
    gap: 0 14px;
  }

  /* The id takes its own label here, because at this width it is the first
     line of a card rather than the first column of a list. The alignment is
     restated: capskip-account.css right aligns every cell at this width, which
     would push the number away from the label above it and into the pill.

     th AS WELL AS td, and this is the whole bug: WooCommerce prints the Order
     cell of the ORDERS table as `<th scope="row">` while the subscriptions
     table uses a plain td, so a td-only selector labelled one table and left
     the other with a bare number sharing its line with the status pill, which
     read as the number being part of the status. Same th/td split that put
     the order id in a grey box on desktop. */
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-subscription-id,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th.woocommerce-orders-table__cell-subscription-id {
    display: block;
    text-align: left;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number::before,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th.woocommerce-orders-table__cell-order-number::before,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-subscription-id::before,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table th.woocommerce-orders-table__cell-subscription-id::before {
    content: attr(data-title);
    display: block;
    margin-bottom: 4px;
    font: 700 10px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--csacc-ink-3);
  }

  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
    align-self: center;
    justify-self: end;
  }

  /* Label left, value right, on one line. The label floats rather than being a
     flex item, because the total cell holds a block amount followed by a loose
     text node and a flex container would make that tail a third item on the
     same line instead of letting it wrap under the figure. */
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-subscription-next-payment,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
    display: block;
    text-align: right;
    white-space: normal;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date::before,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-subscription-next-payment::before,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total::before {
    content: attr(data-title);
    float: left;
    max-width: 45%;
    margin: 3px 12px 0 0;
    font: 700 10px/1.4 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    color: var(--csacc-ink-3);
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-subscription-next-payment {
    margin-top: 13px;
    padding-top: 12px;
    box-shadow: inset 0 1px 0 var(--csacc-line-2);
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
    padding-top: 9px;
  }

  /* Full width and shared evenly, because a phone has no room for a 60px
     button sitting next to 200px of nothing. */
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
    justify-content: stretch;
    margin-top: 14px;
    padding-top: 14px;
    box-shadow: inset 0 1px 0 var(--csacc-line-2);
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button {
    flex: 1 1 auto;
  }

  /* Downloads: the name, then the two facts side by side, then the file. */
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody tr {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "product   product"
      "remaining expires"
      "file      file";
    align-content: start;
    align-items: start;
    min-height: 0;
    padding: 15px 16px 16px;
    /* No row gap, the rows carry their own spacing. A COLUMN gap though: the
       id track is minmax(0, 1fr) and the pill is max-content beside it, so
       with no gap the two boxes are flush and a long id or a long status
       (German "Wartet auf Zahlung") meets the pill with nothing between them. */
    gap: 0 14px;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-remaining,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-expires {
    margin-top: 14px;
    padding-top: 13px;
    box-shadow: inset 0 1px 0 var(--csacc-line-2);
  }
  /* Left again, against the right alignment capskip-account.css gives every
     cell at this width. A product name is the first line of the card. */
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-product,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-remaining {
    text-align: left;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file {
    margin-top: 14px;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .button {
    flex: 1 1 auto;
    max-width: none;
  }

  /* The receipts keep their shape, on tighter padding. capskip-account.css
     would otherwise break each line out into its own bordered card with an
     empty label in front of it, because these tables print no data-title. */
  .woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) tr,
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details tr {
    display: grid;
    margin: 0;
    padding: 12px 15px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) td,
  .woocommerce-account .woocommerce-MyAccount-content table.order_details:not(.shop_table_responsive) th,
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details td,
  .woocommerce-account .woocommerce-MyAccount-content table.subscription_details th {
    display: block;
    padding: 0;
    border: 0;
  }
}

/* The two download facts drop to one column where even two will not fit. */
@media (max-width: 400px) {
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody tr {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "product"
      "remaining"
      "expires"
      "file";
  }
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-expires {
    margin-top: 12px;
    padding-top: 0;
    text-align: left;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads tbody tr,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button,
  .woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table--order-downloads td.download-file .button {
    transition: none;
  }
}