/* ==========================================================================
   My Account and the order-received page.

   WooCommerce's account pages carry no design of their own on a block
   theme: the navigation is a bare list, the forms and tables are browser
   defaults. This file gives them the site's own grammar - paper cards,
   ink type, the green signal for state, mono eyebrows - using tokens.css
   only. Covers: the account shell (inc/class-account.php), the dashboard
   (woocommerce/myaccount/dashboard.php), orders, address, details, the
   sign-in form, notices, the Caching Out Subscriptions plugin's sections
   (its template's classes; it ships no front-end CSS) and the theme's
   "Your licence" panel (inc/class-account-panel.php).
   Loaded on is_account_page() and the checkout endpoints only.

   Geometry follows the admin design kit (docs/repo-docs/admin-design-kit-
   2026-10-23.md, section 4 item 2), so a buyer who opens the plugin after
   My Account meets the same control: buttons 40 px, radius 8, Signal 700
   primary with Signal 800 on hover, outline buttons on an Ink 450 border;
   chips as pills at 12 px / 600; fields 40 px on an Ink 450 border with a
   2 px Signal 600 ring; table headers uppercase 12 px Ink 500. The names
   stay co-*; the measurements do not differ (2026-10-23, theme 1.0.4).
   Section 14 (theme 1.0.5) adds the kit's visible components on the
   operator's word: the rail, the panel, card header rows, stat cards,
   alerts, bordered tables, label / control rows.
   ========================================================================== */

/* --- 1. Shell -------------------------------------------------------------
   WooCommerce prints the content before the navigation on a block theme,
   so the parts are placed by named areas, not by source order. */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-areas: "notices" "band" "nav" "content";
  gap: var(--space-6);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-20);
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-areas: "notices notices" "band band" "nav content";
    column-gap: var(--space-12);
    row-gap: var(--space-8);
    align-items: start;
    padding-top: var(--space-12);
  }
}

.woocommerce-account .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce > .woocommerce-error,
.woocommerce-account .woocommerce > .woocommerce-info,
.woocommerce-account .woocommerce > .wc-block-components-notice-banner {
  grid-area: notices;
}

.woocommerce-account .woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-account .co-account__band {
  grid-area: band;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  grid-area: nav;
}

.woocommerce-account .woocommerce-MyAccount-content {
  grid-area: content;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
}

/* --- 2. Band: eyebrow, name, sign out ------------------------------------ */

.co-account__band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.co-account__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

.co-account__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--text-primary);
}

.co-account__signout {
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.co-account__signout:hover {
  color: var(--text-primary);
}

.co-account__lede {
  max-width: 60ch;
  margin: 0 0 var(--space-8);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* --- 3. Navigation --------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.woocommerce-MyAccount-navigation li a:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--surface-accent-subtle);
  color: var(--text-accent);
  box-shadow: inset 3px 0 0 var(--signal-500);
}

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
}

@media (max-width: 899px) {
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .woocommerce-MyAccount-navigation li a {
    padding: 8px var(--space-4);
    border: var(--border-width) solid var(--border-subtle);
    border-radius: var(--radius-pill);
    font-size: var(--text-body-sm);
  }
  .woocommerce-MyAccount-navigation li.is-active a {
    border-color: var(--signal-500);
    box-shadow: none;
  }
  .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin: 0;
    padding: 0;
    border: 0;
  }
}

/* --- 4. Content: headings, cards, tables, buttons ------------------------- */

.woocommerce-MyAccount-content h2:not([class]),
.woocommerce-MyAccount-content h3:not([class]),
.co-subs-subscription > h3,
.co-licence__title,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h4);
  color: var(--text-primary);
}

.co-subs-subscription,
.co-licence,
.woocommerce-Address,
.co-account__card,
.co-account__help {
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* Tables: no outer chrome, one rule per row, muted labels. */

.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-table {
  width: 100%;
  margin: 0 0 var(--space-4);
  border: 0;
  border-collapse: collapse;
  font-size: var(--text-body);
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td,
.woocommerce-account table.woocommerce-table th,
.woocommerce-account table.woocommerce-table td {
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.woocommerce-account table.shop_table th:first-child,
.woocommerce-account table.shop_table td:first-child,
.woocommerce-account table.woocommerce-table th:first-child,
.woocommerce-account table.woocommerce-table td:first-child {
  padding-left: 0;
}

.woocommerce-account table.shop_table thead th,
.woocommerce-account table.woocommerce-table thead th {
  padding-top: 0;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: var(--border-default);
}

.woocommerce-account table.shop_table tbody th,
.co-subs-subscription__details th {
  width: 38%;
  padding-right: var(--space-4);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.woocommerce-account table.shop_table tbody tr:last-child th,
.woocommerce-account table.shop_table tbody tr:last-child td,
.woocommerce-account table.woocommerce-table tbody tr:last-child th,
.woocommerce-account table.woocommerce-table tbody tr:last-child td {
  border-bottom: 0;
}

.woocommerce-account table.shop_table td a,
.woocommerce-account table.woocommerce-table td a {
  color: var(--text-link);
  font-weight: var(--weight-medium);
}

/* Orders list: the number as a link, the status in mono, actions as small
   secondary buttons. Phone: WooCommerce's responsive table stacks cells
   with their data-title. */

.woocommerce-orders-table__cell-order-number a {
  font-family: var(--font-mono);
  text-decoration: none;
}

.woocommerce-orders-table__cell-order-status {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.woocommerce-orders-table__cell-order-actions {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .woocommerce-account table.shop_table_responsive thead {
    display: none;
  }
  .woocommerce-account table.shop_table_responsive tr {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--border-subtle);
  }
  .woocommerce-account table.shop_table_responsive td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    border: 0;
    text-align: right;
  }
  .woocommerce-account table.shop_table_responsive td::before {
    content: attr(data-title);
    flex: 0 0 auto;
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    text-align: left;
  }
  .woocommerce-account table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before,
  .woocommerce-account table.shop_table_responsive td.woocommerce-table__product-name::before {
    content: none;
  }

  /* The subscription's details table (the plugin's label / value pairs; it
     is not shop_table_responsive): label above value, so the Licence key
     cell, which holds the "Show my key" steps, gets the whole width instead
     of 62% of it (plugin team's note of 2026-10-23: the key box pushed the
     page wider than a phone). */
  .woocommerce-account table.co-subs-subscription__details,
  .woocommerce-account table.co-subs-subscription__details tbody,
  .woocommerce-account table.co-subs-subscription__details tr,
  .woocommerce-account table.co-subs-subscription__details tbody th,
  .woocommerce-account table.co-subs-subscription__details tbody td {
    display: block;
    width: auto;
    min-width: 0;
  }
  .woocommerce-account table.co-subs-subscription__details tr {
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--border-subtle);
  }
  .woocommerce-account table.co-subs-subscription__details tr:last-child {
    border-bottom: 0;
  }
  .woocommerce-account table.co-subs-subscription__details tbody th,
  .woocommerce-account table.co-subs-subscription__details tbody td {
    padding: 0;
    border: 0;
  }
  .woocommerce-account table.co-subs-subscription__details tbody th {
    margin: 0 0 var(--space-1);
  }
}

/* Buttons: every WooCommerce button on these pages takes the kit's outline
   button (40 px, Ink 450 border, Ink 50 fill and Ink 600 border on hover);
   the one primary per panel is .woocommerce-Button. */

.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-account .co-subs-subscription__actions .button,
.woocommerce-account .woocommerce-form-login .button,
.woocommerce-account .woocommerce-form-register .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 8px var(--space-4);
  background: var(--action-secondary-bg);
  border: var(--border-width) solid var(--action-secondary-border);
  border-radius: var(--radius-md);
  color: var(--action-secondary-text);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover,
.woocommerce-account .co-subs-subscription__actions .button:hover {
  background: var(--action-secondary-bg-hover);
  border-color: var(--action-secondary-border-hover);
  color: var(--action-secondary-text);
}

/* The one primary per panel (Save changes, Save address): the kit's
   rs-button--primary at 40 px, Signal 700, Signal 800 on hover. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-account .woocommerce-MyAccount-content button.button:not(.woocommerce-button),
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:not(.woocommerce-button):hover {
  background: var(--action-primary-bg);
  border-color: transparent;
  color: var(--action-primary-text);
  box-shadow: var(--shadow-sm);
}

/* The full-width submit of the sign-in and register cards: the kit's
   rs-button--lg (48 px), the size of every page-level call on the site. */
.woocommerce-account .woocommerce-form-login .woocommerce-button,
.woocommerce-account .woocommerce-form-register .woocommerce-button,
.woocommerce-account .woocommerce-form-login .woocommerce-button:hover,
.woocommerce-account .woocommerce-form-register .woocommerce-button:hover {
  min-height: 48px;
  padding: 8px var(--space-6);
  background: var(--action-primary-bg);
  border-color: transparent;
  color: var(--action-primary-text);
  font-size: var(--text-body);
  box-shadow: var(--shadow-sm);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:not(.woocommerce-button):hover,
.woocommerce-account .woocommerce-form-login .woocommerce-button:hover,
.woocommerce-account .woocommerce-form-register .woocommerce-button:hover {
  background: var(--action-primary-bg-hover);
}

.co-btn--sm {
  min-height: 32px;
  padding: 4px var(--space-3);
  font-size: var(--text-caption);
}

/* The licence panel's own buttons (inc/class-account-panel.php, co-btn):
   the kit's 40 px control, not the marketing pages' 48 px call. */
.woocommerce-account .co-licence .co-btn {
  min-height: 40px;
  padding: 8px var(--space-4);
  font-size: var(--text-body-sm);
}

.woocommerce-account .co-licence .co-btn--sm {
  min-height: 32px;
  padding: 4px var(--space-3);
  font-size: var(--text-caption);
}

/* --- 5. Dashboard ----------------------------------------------------------- */

.co-account__cards {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .co-account__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.co-account__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.co-account__card-icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-2);
  fill: none;
  stroke: var(--text-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.co-account__card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

.co-account__card-metric {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--text-accent);
  overflow-wrap: anywhere;
}

.co-account__card-body {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.co-account__card-cta {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.co-account__help {
  background: var(--surface-alt);
  border-color: transparent;
}

.co-account__help-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  color: var(--text-primary);
}

.co-account__help-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}

.co-account__help-list a {
  color: var(--text-link);
  font-weight: var(--weight-medium);
}

.co-account__help-note {
  color: var(--text-muted);
}

/* --- 6. Forms: sign in, account details, address --------------------------- */

.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.woocommerce-account .form-row label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.woocommerce-account .form-row label .required {
  color: var(--text-error);
  text-decoration: none;
}

/* Element-qualified with `form` and `body`: WooCommerce's block-theme
   sheet sizes `.woocommerce-page form .form-row input.input-text` at
   0.9rem padding and 14 px (about 50 px tall), and outranked the theme's
   rule until 1.0.4. The 16 px body size stays: a 14 px field zooms on
   iOS. */
body.woocommerce-account form .form-row input.input-text,
body.woocommerce-account form .form-row input[type="text"],
body.woocommerce-account form .form-row input[type="email"],
body.woocommerce-account form .form-row input[type="tel"],
body.woocommerce-account form .form-row input[type="password"],
body.woocommerce-account form .form-row select,
body.woocommerce-account form .form-row textarea,
.woocommerce-account .form-row .input-text,
.woocommerce-account .form-row select,
.woocommerce-account .form-row textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 8px var(--space-3);
  background: var(--field-bg);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-md);
  color: var(--field-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}

.woocommerce-account .form-row .input-text:hover,
.woocommerce-account .form-row select:hover {
  border-color: var(--field-border-hover);
}

/* The kit's ring: 2 px Signal 600, 1 px off the border. (Until 1.0.4 this
   rule put an outline value in box-shadow, which browsers drop, so a focused
   field showed only its border turning green.) */
.woocommerce-account .form-row .input-text:focus,
.woocommerce-account .form-row select:focus,
.woocommerce-account .form-row textarea:focus {
  border-color: var(--field-border-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.woocommerce-account .form-row ::placeholder {
  color: var(--field-placeholder);
}

.woocommerce-account .form-row .description,
.woocommerce-account .form-row em,
.woocommerce-account .woocommerce-password-strength,
.woocommerce-account .woocommerce-password-hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-body-sm);
  font-style: normal;
  color: var(--text-muted);
}

.woocommerce-account fieldset {
  margin: var(--space-8) 0 var(--space-4);
  padding: 0;
  border: 0;
}

.woocommerce-account fieldset legend {
  margin-bottom: var(--space-4);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
  max-width: 560px;
}

/* Two inputs side by side where WooCommerce marks them first/last. */

@media (min-width: 600px) {
  .woocommerce-account .form-row-first,
  .woocommerce-account .form-row-last {
    display: inline-block;
    width: calc(50% - var(--space-2));
    vertical-align: top;
  }
  .woocommerce-account .form-row-first {
    margin-right: var(--space-4);
  }
}

/* Addresses: a card each, the edit link inside the title row. */

.woocommerce-account .woocommerce-Addresses {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .woocommerce-account .woocommerce-Addresses.col2-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 {
  float: none;
  width: auto;
}

.woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.woocommerce-Address-title .edit {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-link);
}

.woocommerce-Address address {
  font-style: normal;
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* Sign in: a single card in the middle of the page. Logged out there is no
   navigation, so the grid gives way to flow, and WooCommerce's own "Login"
   heading is replaced by the band above the card. */

.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: var(--container);
}

.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account:not(.logged-in) .u-column1 > h2,
.woocommerce-account:not(.logged-in) .u-column2 > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.woocommerce-account .co-account__login-head {
  max-width: 440px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.woocommerce-account .co-account__login-head .co-account__lede {
  margin: var(--space-3) auto 0;
  font-size: var(--text-body);
}

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  float: none;
  width: auto;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-8);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.woocommerce-account .woocommerce-form-login .woocommerce-button {
  width: 100%;
}

.woocommerce-account .woocommerce-LostPassword {
  margin: var(--space-4) 0 0;
  font-size: var(--text-body-sm);
  text-align: center;
}

.woocommerce-account .woocommerce-LostPassword a {
  color: var(--text-link);
}

.woocommerce-account .u-columns.col2-set {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .woocommerce-account .u-columns.col2-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 {
  float: none;
  width: auto;
}

/* --- 7. Notices ------------------------------------------------------------ */

.woocommerce-account .wc-block-components-notice-banner,
.woocommerce-checkout .wc-block-components-notice-banner {
  border-radius: var(--radius-md);
  border-width: var(--border-width);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}

.woocommerce-account .wc-block-components-notice-banner.is-success {
  background: var(--surface-accent-subtle);
  border-color: var(--border-accent);
  color: var(--text-primary);
}

.woocommerce-account .wc-block-components-notice-banner.is-info {
  background: var(--surface-alt);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.woocommerce-account .wc-block-components-notice-banner .wc-forward,
.woocommerce-account .wc-block-components-notice-banner .button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 4px var(--space-3);
  background: var(--action-secondary-bg);
  border: var(--border-width) solid var(--action-secondary-border);
  border-radius: var(--radius-md);
  color: var(--action-secondary-text);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: none;
}

.woocommerce-account .wc-block-components-notice-banner .wc-forward:hover,
.woocommerce-account .wc-block-components-notice-banner .button:hover {
  background: var(--action-secondary-bg-hover);
  border-color: var(--action-secondary-border-hover);
  color: var(--action-secondary-text);
}

/* --- 8. The subscriptions plugin's section --------------------------------- */

.co-subs-subscription > h4 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}

.co-subs-subscription__actions,
.co-licence__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.co-subs-subscription__action,
.co-licence__action {
  margin: 0;
}

/* rc.3 fires the theme's hook inside the actions row, after the plugin's
   buttons and its 14-day refund form: both of those take the whole row. */
.co-subs-subscription__actions > .co-subs-subscription__refund,
.co-subs-subscription__actions > .co-licence {
  flex-basis: 100%;
}

.co-subs-subscription__actions > .co-licence {
  margin: var(--space-2) 0 0;
}

/* The plugin's "Cancel and refund" form (it ships no front-end CSS). */
.co-subs-subscription__refund {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-alt);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.co-subs-subscription__refund-note {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.co-subs-subscription__refund-confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.co-subs-subscription__refund-confirm input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.2em 0 0;
}

/* --- 9. The licence panel -------------------------------------------------- */

.co-licence {
  border-color: var(--border-accent);
}

/* A licence registered to another address than the account's: the
   approved sentence under the buttons (no re-issue, since 2026-10-22). */
.co-licence__mismatch {
  margin: var(--space-4) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.co-licence__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.co-licence__head .co-licence__title {
  margin-bottom: 0;
}

/* The state chip: the kit's rs-chip geometry (a pill, 12 px, 600, 3 x 10 px
   padding) in the site's mono uppercase. */
.woocommerce-account .co-licence .co-licence__state {
  padding: 3px 10px;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
}

.co-licence__state {
  background: var(--chip-neutral-bg);
  color: var(--chip-neutral-text);
}

.co-licence--active .co-licence__state {
  background: var(--chip-brand-bg);
  color: var(--chip-brand-text);
}

.co-licence--ending .co-licence__state {
  background: var(--chip-copper-bg);
  color: var(--chip-copper-text);
}

.co-licence--revoked .co-licence__state {
  background: var(--chip-error-bg);
  color: var(--chip-error-text);
}

.co-licence--suspended .co-licence__state {
  background: var(--chip-warning-bg);
  color: var(--chip-warning-text);
}

.co-licence__summary {
  margin: var(--space-4) 0 0;
  font-size: var(--text-body-lg);
  color: var(--text-primary);
}

.co-licence__sites-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}

.co-licence__count {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.co-licence__sites {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width) solid var(--border-subtle);
}

.co-licence__site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.co-licence__site-url {
  grid-column: 1;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.co-licence__site-meta {
  grid-column: 1;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.co-licence__site .co-licence__action {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 599px) {
  .co-licence__site {
    grid-template-columns: minmax(0, 1fr);
  }
  .co-licence__site .co-licence__action {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--space-2);
  }
}

.co-licence__note,
.co-licence__empty,
.co-licence__key,
.co-licence__refund {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.co-licence__refund {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
}

.co-licence__actions:empty {
  display: none;
}

/* --- 10. Order received (checkout endpoint) -------------------------------- */

.woocommerce-order .woocommerce-order-overview {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8);
  padding: var(--space-5) var(--space-6);
  list-style: none;
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

@media (min-width: 700px) {
  .woocommerce-order .woocommerce-order-overview {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

.woocommerce-order .woocommerce-order-overview li {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
}

/* --- 11. Signing in for the first time, and the password pages -------------
   The account is created at checkout with a generated password (operator,
   2026-10-22, after the first real purchase): the sign-in card says so, and
   the lost-password, reset-password and reset-sent pages take the same
   card as sign-in instead of WooCommerce's floated defaults. The bands are
   printed by inc/class-account.php on WooCommerce's own hooks. */

.woocommerce-account .co-account__login-head .co-account__first {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.woocommerce-account .woocommerce form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce-ResetPassword {
  float: none;
  width: auto;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-8);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* The instruction WooCommerce prints as the card's first paragraph
   (reworded by the theme through its filter). */
.woocommerce-account .woocommerce-ResetPassword > p:first-child {
  margin: 0 0 var(--space-5);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row,
.woocommerce-account .woocommerce-ResetPassword .form-row-first,
.woocommerce-account .woocommerce-ResetPassword .form-row-last {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 var(--space-4);
}

.woocommerce-account .woocommerce-ResetPassword .woocommerce-form-row:last-of-type {
  margin-bottom: 0;
}

.woocommerce-account .woocommerce-ResetPassword .button,
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button,
.woocommerce-account .woocommerce-ResetPassword .button:hover,
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-2);
  padding: 14px var(--space-6);
  background: var(--action-primary-bg);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  color: var(--action-primary-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.woocommerce-account .woocommerce-ResetPassword .button:hover,
.woocommerce-account .woocommerce-ResetPassword .woocommerce-Button:hover {
  background: var(--action-primary-bg-hover);
}

/* "Reset email sent": WooCommerce's notice and its paragraph, centred under
   the band at the card's width. Logged out, nothing else sits directly
   under .woocommerce as a paragraph. */
.woocommerce-account:not(.logged-in) .woocommerce > .woocommerce-message,
.woocommerce-account:not(.logged-in) .woocommerce > .wc-block-components-notice-banner {
  max-width: 440px;
  margin: 0 auto var(--space-4);
}

.woocommerce-account:not(.logged-in) .woocommerce > p {
  max-width: 440px;
  margin: 0 auto;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  text-align: center;
  color: var(--text-secondary);
}

/* --- 12. The subscriptions plugin's "Show my key" (1.2.0, CR-10) -----------
   Sits in the plugin's Licence key cell above the theme's panel. Its own
   stylesheet is single-class and currentColor by design; the buttons already
   take section 4's secondary look through .woocommerce-button. Each step
   is a quiet inset panel; the code input is mono and wide-spaced; the key
   box is read-only mono with Copy beside it. .co-subs-key__hidden is the
   plugin's own switch and is restated last so it wins over the layouts. */

.woocommerce-account .co-subs-key {
  min-width: 0;
  max-width: 100%;
  margin: var(--space-3) 0 0;
}

.woocommerce-account .co-subs-key__intro {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.woocommerce-account .co-subs-key__code-step,
.woocommerce-account .co-subs-key__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  overflow: hidden;
  background: var(--surface-alt);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.woocommerce-account .co-subs-key__sent,
.woocommerce-account .co-subs-key__label {
  flex-basis: 100%;
  margin: 0;
}

.woocommerce-account .co-subs-key__sent {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-primary);
}

.woocommerce-account .co-subs-key__label {
  margin-bottom: calc(-1 * var(--space-1));
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.woocommerce-account .co-subs-key__code,
.woocommerce-account .co-subs-key__value {
  box-sizing: border-box;
  min-height: 40px;
  margin: 0;
  padding: 8px var(--space-3);
  background: var(--field-bg);
  border: var(--border-width) solid var(--field-border);
  border-radius: var(--radius-md);
  color: var(--field-text);
  font-family: var(--font-mono);
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}

.woocommerce-account .co-subs-key__code {
  width: 100%;
  max-width: 12em;
  min-width: 0;
  padding-top: 6px; /* 18 px type at 1.4 inside the 40 px field */
  padding-bottom: 6px;
  font-size: var(--text-body-lg); /* 18px: no iOS zoom on focus */
  letter-spacing: 0.15em;
}

.woocommerce-account .co-subs-key__value {
  flex: 1 1 16rem;
  width: auto;
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-body);
  letter-spacing: 0.04em;
  text-overflow: clip;
}

.woocommerce-account .co-subs-key__code:focus,
.woocommerce-account .co-subs-key__value:focus {
  border-color: var(--field-border-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  box-shadow: none;
}

.woocommerce-account .co-subs-key__new {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.woocommerce-account .co-subs-key__new:disabled,
.woocommerce-account .co-subs-key__show:disabled,
.woocommerce-account .co-subs-key__confirm:disabled {
  opacity: 0.6;
  cursor: default;
}

.woocommerce-account .co-subs-key__copied {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--text-accent);
}

.woocommerce-account .co-subs-key__copied:empty {
  display: none;
}

.woocommerce-account .co-subs-key__message {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-error);
}

/* Phones (plugin team's note, 2026-10-23: checked at 320, 375 and 412 CSS
   px; the page must never scroll sideways with the key shown). The key is
   five groups, about 27 monospace characters: it fits the box from 375 px
   up; at 320 px the box scrolls inside itself and Copy carries the key. */

@media (max-width: 899px) {
  /* The navigation sits above the content here and the label column still
     takes 38%: the key box takes the whole inset row, Copy beneath it. */
  .woocommerce-account .co-subs-key__value {
    flex-basis: 100%;
    width: 100%;
  }
}

@media (max-width: 599px) {
  .woocommerce-account .co-subs-key__code-step,
  .woocommerce-account .co-subs-key__result {
    padding: var(--space-4);
  }
  .woocommerce-account .co-subs-key__value {
    padding-right: var(--space-3);
    padding-left: var(--space-3);
    font-size: var(--text-body-sm);
    letter-spacing: 0;
  }
}

@media (max-width: 479px) {
  .woocommerce-account .co-subs-key__code-step {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-account .co-subs-key__code {
    max-width: none;
  }
  .woocommerce-account .co-subs-key__new {
    align-self: flex-start;
  }
}

.woocommerce-account .co-subs-key__message:empty,
.woocommerce-account .co-subs-key__hidden {
  display: none;
}

/* --- 13. The post-purchase guidance (subscriptions 1.1.3, CR-PG-1) ---------
   The sentence under "Pay by card (Stripe)" on the checkout and the box
   above the order table on the order-received page. The plugin's own rules
   are two-class on the box, so these carry the page's body class. */

.woocommerce-checkout .co-subs-guidance.co-subs-guidance--checkout {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-accent-subtle);
  border: 0;
  border-left: 3px solid var(--signal-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.woocommerce-checkout .co-subs-guidance--checkout strong,
.co-subs-guidance__text strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.woocommerce-order-received .co-subs-guidance.co-subs-guidance--received {
  max-width: var(--container);
  margin: var(--space-6) auto var(--space-8);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-accent);
  border-radius: var(--radius-lg);
}

.co-subs-guidance__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h4);
  color: var(--text-primary);
}

.co-subs-guidance__text {
  max-width: 70ch;
  margin: 0 0 var(--space-5);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.co-subs-guidance__actions {
  margin: 0;
}

.woocommerce-order-received .co-subs-guidance__button.button,
.woocommerce-order-received .co-subs-guidance__button.button:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px var(--space-6);
  background: var(--action-primary-bg);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  color: var(--action-primary-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.woocommerce-order-received .co-subs-guidance__button.button:hover {
  background: var(--action-primary-bg-hover);
}

.woocommerce-order-received .co-subs-guidance__button.button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: var(--shadow-sm);
}

/* --- 14. The kit's look (theme 1.0.5, operator's word 2026-10-23) ---------
   After the measurements of 1.0.4 the operator asked for the kit's visible
   components on the logged-in pages too (docs/repo-docs/admin-design-kit-
   2026-10-23.md, sections 2 and 7): the navigation as the kit's rail, the
   content column as its panel, cards with a header row, the dashboard
   figures as stat cards, WooCommerce notices as kit alerts, the account
   forms as label / control rows, tables in a bordered wrap with a tinted
   header row, the state chip in the kit's sentence case. The site's fonts
   stay. Every colour is a semantic token; the three border tints the
   tokens lack are aliased below for both themes. These rules come last and
   outrank sections 1 to 13 where they overlap. */

.woocommerce-account,
.woocommerce-checkout,
.woocommerce-order-received {
  --co-kit-accent-border: var(--signal-200);
  --co-kit-success-border: var(--signal-300);
  --co-kit-warning-border: var(--warning-300);
  --co-kit-error-border: var(--error-300);
}

[data-theme="dark"] .woocommerce-account,
[data-theme="dark"] .woocommerce-checkout,
[data-theme="dark"] .woocommerce-order-received {
  --co-kit-accent-border: var(--signal-800);
  --co-kit-success-border: var(--signal-700);
  --co-kit-warning-border: var(--warning-700);
  --co-kit-error-border: var(--error-700);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .woocommerce-account,
  :root:not([data-theme="light"]) .woocommerce-checkout,
  :root:not([data-theme="light"]) .woocommerce-order-received {
    --co-kit-accent-border: var(--signal-800);
    --co-kit-success-border: var(--signal-700);
    --co-kit-warning-border: var(--warning-700);
    --co-kit-error-border: var(--error-700);
  }
}

/* 14.1 The shell: a 240 px rail and the content panel (kit sections 5). */

@media (min-width: 900px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: var(--space-6);
  }
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  padding: var(--space-2);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-raised);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--surface-alt);
  color: var(--text-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--surface-accent-subtle);
  color: var(--chip-brand-text);
  font-weight: var(--weight-semibold);
  text-decoration: none; /* WooCommerce's block-theme sheet underlines it */
  box-shadow: none;
}

/* The kit's active bar: 3 px of Signal on the rail's edge. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(-1 * var(--space-2));
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--text-accent);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border-subtle);
}

@media (max-width: 899px) {
  /* Phones keep the row of pills; the active one takes the kit's tint. */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a {
    min-height: 36px;
    padding: 6px var(--space-4);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-pill);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    border-color: var(--co-kit-accent-border);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
    content: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin: 0;
    padding: 0;
    border: 0;
  }
}

.woocommerce-account .woocommerce-MyAccount-content {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-raised);
}

@media (min-width: 900px) {
  .woocommerce-account .woocommerce-MyAccount-content {
    padding: var(--space-8);
  }
}

/* 14.2 The band: the kit header's eyebrow weight, Sign out as a small
   outline button (kit section 4, rs-header__actions). */

.woocommerce-account .co-account__eyebrow {
  font-weight: var(--weight-semibold);
}

.woocommerce-account .co-account__signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px var(--space-3);
  background: var(--action-secondary-bg);
  border: var(--border-width) solid var(--action-secondary-border);
  border-radius: var(--radius-md);
  color: var(--action-secondary-text);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.woocommerce-account .co-account__signout:hover {
  background: var(--action-secondary-bg-hover);
  border-color: var(--action-secondary-border-hover);
  color: var(--action-secondary-text);
}

/* 14.3 Cards with a header row (kit section 6: rs-card__header). */

.woocommerce-account .co-subs-subscription,
.woocommerce-account .co-licence,
.woocommerce-account .woocommerce-Address,
.woocommerce-account .co-account__help {
  padding: var(--space-5);
}

.woocommerce-account .co-subs-subscription > h3,
.woocommerce-account .co-licence__head,
.woocommerce-account .woocommerce-Address-title {
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.woocommerce-account .co-subs-subscription > h3,
.woocommerce-account .co-licence__head .co-licence__title,
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  margin-bottom: 0;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.woocommerce-account .co-licence {
  border-color: var(--co-kit-accent-border);
  box-shadow: var(--elevation-raised);
}

.woocommerce-account .co-subs-subscription__actions > .co-licence {
  margin-top: var(--space-3);
}

/* Sub-headings inside a card ("Sites", "Invoices"): the kit's section
   heading. */
.woocommerce-account .co-subs-subscription > h4,
.woocommerce-account .co-licence__sites-title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
}

/* Section titles in the panel (kit: rs-title-section). */
.woocommerce-MyAccount-content h2:not([class]),
.woocommerce-MyAccount-content h3:not([class]) {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
}

/* 14.4 The dashboard figures as stat cards (kit section 7: rs-stat). */

.woocommerce-account .co-account__card {
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-alt);
  border-color: var(--border-subtle);
}

.woocommerce-account .co-account__card--good {
  background: var(--surface-accent-subtle);
  border-color: var(--co-kit-accent-border);
}

.woocommerce-account .co-account__card-icon {
  width: 20px;
  height: 20px;
  margin-bottom: var(--space-1);
}

.woocommerce-account .co-account__card-title {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.woocommerce-account .co-account__card-metric {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.woocommerce-account .co-account__card--good .co-account__card-metric {
  color: var(--text-accent);
}

/* A figure that is text (the email address): body size, no wrap inside a word. */
.woocommerce-account .co-account__card--text .co-account__card-metric {
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.woocommerce-account .co-account__card-body {
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.woocommerce-account .co-account__card-cta {
  margin-top: var(--space-3);
}

.woocommerce-account .co-account__help {
  background: var(--surface-alt);
  border-color: var(--border-subtle);
}

/* 14.5 Notices as kit alerts (kit section 10: rs-alert). WooCommerce's
   legacy notices carry an icon-font pseudo-element and a 3.5em inset;
   the block banner carries an SVG in a coloured disc. */

.woocommerce-account .woocommerce > .woocommerce-message,
.woocommerce-account .woocommerce > .woocommerce-info,
.woocommerce-account .woocommerce > .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account .wc-block-components-notice-banner,
.woocommerce-checkout .wc-block-components-notice-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-alt);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  list-style: none;
}

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before {
  content: none;
}

.woocommerce-account .woocommerce-message,
.woocommerce-account .wc-block-components-notice-banner.is-success {
  background: var(--chip-brand-bg);
  border-color: var(--co-kit-success-border);
}

.woocommerce-account .woocommerce-info,
.woocommerce-account .wc-block-components-notice-banner.is-info {
  background: var(--surface-accent-subtle);
  border-color: var(--co-kit-accent-border);
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .wc-block-components-notice-banner.is-error {
  background: var(--chip-error-bg);
  border-color: var(--co-kit-error-border);
  color: var(--chip-error-text);
}

.woocommerce-account .wc-block-components-notice-banner > svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  padding: 2px;
  fill: var(--text-inverse);
  background: var(--text-muted);
  border-radius: 50%;
}

.woocommerce-account .wc-block-components-notice-banner.is-success > svg,
.woocommerce-account .wc-block-components-notice-banner.is-info > svg {
  background: var(--text-accent);
}

.woocommerce-account .wc-block-components-notice-banner.is-error > svg {
  background: var(--text-error);
}

.woocommerce-account .wc-block-components-notice-banner__content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

/* The mismatch sentence is a warning (kit: rs-alert--warning, as a note). */
.woocommerce-account .co-licence__mismatch {
  padding: var(--space-3) var(--space-4);
  background: var(--chip-warning-bg);
  border: var(--border-width) solid var(--co-kit-warning-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  color: var(--chip-warning-text);
}

/* 14.6 The state chip in the kit's sentence case (kit section 11). */

.woocommerce-account .co-licence .co-licence__state {
  gap: 6px;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* 14.7 Tables in the kit's bordered wrap with a tinted header row (kit
   section 12: rs-table-wrap, rs-table). */

.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-table {
  border: var(--border-width) solid var(--border-subtle);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--text-body-sm);
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td,
.woocommerce-account table.woocommerce-table th,
.woocommerce-account table.woocommerce-table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}

.woocommerce-account table.shop_table th:first-child,
.woocommerce-account table.shop_table td:first-child,
.woocommerce-account table.woocommerce-table th:first-child,
.woocommerce-account table.woocommerce-table td:first-child {
  padding-left: var(--space-4);
}

.woocommerce-account table.shop_table thead th,
.woocommerce-account table.woocommerce-table thead th {
  padding-top: var(--space-3);
  background: var(--surface-alt);
  border-bottom-color: var(--border-subtle);
  font-family: var(--font-body);
  letter-spacing: 0.08em;
}

.woocommerce-account table.shop_table tbody tr:hover > td,
.woocommerce-account table.shop_table tbody tr:hover > th,
.woocommerce-account table.woocommerce-table tbody tr:hover > td,
.woocommerce-account table.woocommerce-table tbody tr:hover > th {
  background: var(--surface-alt);
}

/* The subscription's label / value rows (kit: rs-dl): labels 600 in the
   heading colour, a 200 px column, the tall Licence key cell top-aligned. */
.woocommerce-account table.shop_table tbody th,
.co-subs-subscription__details th {
  width: 200px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.woocommerce-account table.co-subs-subscription__details th,
.woocommerce-account table.co-subs-subscription__details td {
  vertical-align: top;
}

.woocommerce-account table.shop_table td a,
.woocommerce-account table.woocommerce-table td a {
  font-weight: var(--weight-semibold);
}

@media (max-width: 767px) {
  .woocommerce-account table.shop_table_responsive tr,
  .woocommerce-account table.co-subs-subscription__details tr {
    padding: var(--space-3) var(--space-4);
  }
  .woocommerce-account table.shop_table tbody th,
  .co-subs-subscription__details th {
    width: auto;
  }
  .woocommerce-account table.shop_table tbody tr:hover > td,
  .woocommerce-account table.shop_table tbody tr:hover > th {
    background: none;
  }
}

/* 14.8 Account details and address as label / control rows (kit section
   8: rs-field), stacking under 782 px; the sign-in card keeps its stacked
   fields (rs-field--stacked). */

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
  max-width: 760px;
}

.woocommerce-account fieldset legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

@media (min-width: 782px) {
  .woocommerce-account .woocommerce-EditAccountForm .form-row,
  .woocommerce-account .woocommerce-address-fields .form-row,
  .woocommerce-account .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-account .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-account .woocommerce-address-fields .form-row-first,
  .woocommerce-account .woocommerce-address-fields .form-row-last {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
    float: none; /* WooCommerce floats -first / -last; a floated grid shrinks */
    width: 100%;
    margin: 0;
    padding: var(--space-4) 0;
    border-bottom: var(--border-width) solid var(--border-subtle);
  }
  .woocommerce-account .woocommerce-EditAccountForm .form-row:last-of-type,
  .woocommerce-account .woocommerce-address-fields .form-row:last-of-type {
    border-bottom: 0;
  }
  /* Placed explicitly: WooCommerce's sheet reorders the label after the
     control under auto placement. */
  .woocommerce-account .woocommerce-EditAccountForm .form-row label,
  .woocommerce-account .woocommerce-address-fields .form-row label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-top: 9px;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
  }
  .woocommerce-account .woocommerce-EditAccountForm .form-row .input-text,
  .woocommerce-account .woocommerce-EditAccountForm .form-row select,
  .woocommerce-account .woocommerce-EditAccountForm .form-row .password-input,
  .woocommerce-account .woocommerce-EditAccountForm .form-row .woocommerce-input-wrapper,
  .woocommerce-account .woocommerce-address-fields .form-row .input-text,
  .woocommerce-account .woocommerce-address-fields .form-row select,
  .woocommerce-account .woocommerce-address-fields .form-row .woocommerce-input-wrapper {
    grid-column: 2;
    grid-row: 1;
  }
  .woocommerce-account .woocommerce-EditAccountForm .form-row .password-input .input-text {
    grid-column: auto;
    grid-row: auto;
  }
  .woocommerce-account .woocommerce-EditAccountForm .form-row .description,
  .woocommerce-account .woocommerce-EditAccountForm .form-row em,
  .woocommerce-account .woocommerce-EditAccountForm .form-row .woocommerce-password-strength,
  .woocommerce-account .woocommerce-EditAccountForm .form-row .woocommerce-password-hint,
  .woocommerce-account .woocommerce-address-fields .form-row .description {
    grid-column: 2;
    grid-row: 2;
    max-width: 56ch;
  }
}

/* 14.9 The sign-in card and the order-received overview. */

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce-ResetPassword {
  box-shadow: var(--elevation-raised);
}

/* The order's figures as a stat strip (kit section 7). */
.woocommerce-order .woocommerce-order-overview {
  gap: var(--space-3);
  padding: 0;
  background: none;
  border: 0;
}

.woocommerce-order .woocommerce-order-overview li {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-alt);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
}

.woocommerce-order .woocommerce-order-overview li strong {
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

/* --- 15. The warm look and the dashboard fit (operator, 2026-10-24) -------
   The operator approved the homepage's warm layer (home-warm.css) and found
   the account area "too bland", with the dashboard figures not fitting
   their cards: three columns in a 655px panel left each card 197px, so the
   mono figures crowded it, "SUBSCRIPTIONS AND LICENCES" wrapped, "Manage
   subscriptions" broke onto two lines and the email address split
   mid-word. Same tokens as the homepage (tokens.css, warm group), no new
   hex; both themes through the tokens' dark values. */

/* The ground: the homepage hero's pastel gradient behind the whole area. */
body.woocommerce-account main {
  background: var(--gradient-hero);
}

/* The panels float on it, on the homepage's soft shadow. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  border-color: transparent;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.woocommerce-account .co-account__band {
  border-bottom-color: transparent;
}

/* The section label as the homepage's pill: body face, sentence case. */
.woocommerce-account .co-account__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--tint-mint);
  color: var(--text-on-tint);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
}

/* Two cards side by side, the third (Account details, the email address)
   across the full width below: every figure and button fits on one line. */
@media (min-width: 700px) {
  .woocommerce-account .co-account__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woocommerce-account .co-account__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.woocommerce-account .co-account__card {
  border-color: transparent;
  border-radius: var(--radius-xl);
  background: var(--gradient-sand);
}

.woocommerce-account .co-account__card:nth-child(3n + 1) {
  background: var(--gradient-mint);
}

.woocommerce-account .co-account__card:nth-child(3n + 2) {
  background: var(--gradient-peach);
}

/* The icon in a coloured disc, as on the homepage's steps and audiences. */
.woocommerce-account .co-account__card-icon {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  margin-bottom: var(--space-2);
  padding: 10px;
  border-radius: 50%;
  background: var(--surface-raised);
}

/* Labels in the body face and sentence case, not letterspaced capitals. */
.woocommerce-account .co-account__card-title {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
}

/* Figures in the heading face; an address breaks only if it must. */
.woocommerce-account .co-account__card-metric {
  font-family: var(--font-heading);
  overflow-wrap: break-word;
}

.woocommerce-account .co-account__card--text .co-account__card-metric {
  font-family: var(--font-body);
}

.woocommerce-account .co-account__card-cta {
  white-space: nowrap;
}

.woocommerce-account .co-account__help {
  border-color: transparent;
  border-radius: var(--radius-xl);
  background: var(--gradient-sand);
}