/* Precision Labs — My Account area.

   Every colour is a token from tokens.css and every corner is square; the shared
   kit (.pl-card, .pl-panel, .pl-btn, .pl-chip, .pl-field, .pl-input, .pl-badge,
   the type scale) is reused rather than redefined.

   WHY THIS FILE HAS TO COVER MORE THAN THE SIX OVERRIDDEN TEMPLATES
   ----------------------------------------------------------------
   inc/woocommerce.php dequeues woocommerce-general, woocommerce-layout and
   woocommerce-smallscreen. Nothing in the account area therefore has ANY style
   it is not given here — including the endpoints this theme does NOT override:
   edit-address, edit-account, downloads, payment-methods and every
   .woocommerce-message / .woocommerce-error notice.

   WHY EVERY SELECTOR CARRIES .pl-account
   --------------------------------------
   There is no page-my-account.php and no theme woocommerce.php, so WordPress
   renders the account page through page.php:

       .pl-wrap.pl-section > article.pl-page > div.pl-prose > [account markup]

   .pl-prose is the LONG-FORM READING container, and prose.css styles bare
   elements inside it — ul, ol, li, a, h2, h3, h4, table, th, td — at (0,1,1).
   A component class such as .pl-acctnav__list is (0,1,0) and LOSES to that;
   where the two tie, prose.css still wins because functions.php enqueues it
   after this file ('account', 'pages', 'finder', 'prose', 'mobile').

   Left alone, the sidebar renders as an indented bulleted list with underlined
   links and the orders table renders display:block — which is the very bug this
   work exists to fix, reappearing one container up. Prefixing with .pl-account
   (an ancestor of everything these templates emit) takes each selector to
   (0,2,x) and settles it without a single !important.

   The structural fix is a page-my-account.php, or a theme woocommerce.php, that
   does not wrap commerce UI in a reading container. Until that exists, this is
   what keeps the page correct.

   MOBILE FLOOR
   ------------
   The site passes a strict mobile audit: nothing below 12px, every interactive
   element at least 44px tall below 768px. Both floors are held here rather than
   deferred to mobile.css, so this sheet is correct on its own — mobile.css only
   ever raises, never rescues.

   Every grid track that can hold an order table, a thumbnail or a long product
   name is minmax(0, 1fr): a bare 1fr takes the intrinsic width and the page
   scrolls sideways. */

/* ── account typography ─────────────────────────────────────────────────── */
.pl-account {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pl-ink);
}

/* ── prose containment (now a fallback, not the main path) ──────────────────
   page.php no longer routes cart, checkout or my-account through .pl-page /
   .pl-prose — it detects them with is_account_page() and friends and renders
   them full width with no reading container. That removed the reason every rule
   below exists.

   They are kept, not deleted, for one reason: the account markup is also
   reachable through the [woocommerce_my_account] shortcode dropped into an
   ordinary editor page, which DOES land inside .pl-prose. On that path
   prose.css still styles bare ul/li/a/h2 at (0,1,1) and would turn the sidebar
   into a bulleted list. Each rule out-specifies exactly one prose.css rule,
   inside .pl-account only; nothing outside the account area is touched.

   On the normal path none of these match, and nothing needs them to. */

/* 78ch is right for terms and privacy. It is not right for a two-column app. */
body.woocommerce-account .pl-page { max-width: none; }
body.woocommerce-account .pl-pagehead { margin-bottom: 24px; }
.pl-prose .pl-account ul,
.pl-prose .pl-account ol { padding-left: 0; list-style: none; }
.pl-prose .pl-account li { margin-top: 0; }
.pl-prose .pl-account a { text-decoration: none; }
.pl-prose .pl-account h2,
.pl-prose .pl-account h3,
.pl-prose .pl-account h4 { margin-top: 0; }
.pl-prose .pl-account .pl-info { margin-top: 0; }
.pl-prose .pl-account img { margin-top: 0; }

/* base.css owns these three sizes. They are re-asserted here, not redefined,
   for the single purpose of out-ranking `.pl-prose h2/h3/h4`. If base.css moves
   a value, move it here too — that duplication is the price of rendering an app
   inside a prose container, and it disappears the day the account page gets its
   own page template. */
.pl-prose .pl-account .pl-h2 { font-size: 40px; line-height: 1.0; letter-spacing: -.03em; font-weight: 700; }
.pl-prose .pl-account .pl-h3 { font-size: 32px; line-height: 1.1; letter-spacing: -.025em; font-weight: 700; }
.pl-prose .pl-account .pl-h4 { font-size: 24px; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }

@media (max-width: 1199px) {
  .pl-prose .pl-account .pl-h2 { font-size: 34px; }
  .pl-prose .pl-account .pl-h3 { font-size: 27px; }
}
@media (max-width: 767px) {
  .pl-prose .pl-account .pl-h2 { font-size: 27px; }
  .pl-prose .pl-account .pl-h3 { font-size: 23px; }
}

/* ── page frame ─────────────────────────────────── */
/* page.php's commerce branch supplies .pl-section (vertical rhythm) but NOT
   .pl-wrap: cart-empty.php, form-checkout.php and thankyou.php each bring their
   own, and a wrapper .pl-wrap would have applied the gutter twice across the
   whole checkout flow.
   my-account.php opens with a bare .pl-account, so the measure and gutter are
   supplied here instead — once, for every account screen. */
.pl-account {
  width: 100%;
  max-width: var(--pl-content);
  margin: 0 auto;
  padding: 0 var(--pl-gutter);
}

.pl-account .pl-cols--account {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  align-items: start;
}
/* The sidebar is FIRST in the DOM — core's order, and the right one for keyboard
   and screen-reader users — and second in the grid. */
.pl-account .pl-account__main { grid-column: 1; grid-row: 1; min-width: 0; }
.pl-account .pl-account__side { grid-column: 2; grid-row: 1; min-width: 0; }
.pl-account .woocommerce-MyAccount-content { min-width: 0; }

/* ── sidebar navigation ─────────────────────────── */
.pl-account .pl-acctnav__h { margin-bottom: 10px; }
.pl-account .pl-acctnav__list { list-style: none; padding-left: 0; }

/* Borders collapse into single hairlines rather than doubling between rows. */
.pl-account .pl-acctnav__i { margin-top: 0; }
.pl-account .pl-acctnav__i + .pl-acctnav__i { margin-top: -1px; }

.pl-account .pl-acctnav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 16px;
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd);
  border-radius: 0;
  color: var(--pl-t3);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background .16s, color .16s;
}
.pl-account .pl-acctnav__link:hover {
  background: var(--pl-surface-alt);
  color: var(--pl-ink);
}

/* Active row: navy label, info-bg field, and a navy rule down the left edge.
   The rule is an inset shadow rather than a border so the label does not shift
   by 3px as the selection moves. */
.pl-account .pl-acctnav__i.is-active .pl-acctnav__link,
.pl-account .pl-acctnav__link[aria-current="page"] {
  background: var(--pl-info-bg);
  border-color: var(--pl-info-bd);
  color: var(--pl-navy);
  box-shadow: inset 3px 0 0 0 var(--pl-navy);
}

.pl-account .pl-acctnav__label { min-width: 0; overflow-wrap: anywhere; }

/* ── dashboard ──────────────────────────────────── */
.pl-account .pl-acct__dash { display: flex; flex-direction: column; gap: 28px; }

.pl-account .pl-acct__greet { display: flex; flex-direction: column; gap: 8px; }
.pl-account .pl-acct__greeth { margin: 2px 0 0; }
.pl-account .pl-acct__greetsub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pl-t2);
  max-width: 62ch;
}
.pl-account .pl-acct__greetsub a {
  color: var(--pl-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pl-account .pl-acct__greetsub a:hover { color: var(--pl-ink); }

.pl-account .pl-acct__stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-left: 0;
}
.pl-account .pl-acct__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  min-width: 0;
}
.pl-account .pl-acct__statk { margin: 0; }
.pl-account .pl-acct__statv {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--pl-ink);
  overflow-wrap: anywhere;
}
.pl-account .pl-acct__statnote {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pl-muted);
  margin-top: auto;
  padding-top: 4px;
}

.pl-account .pl-acct__block { display: flex; flex-direction: column; gap: 14px; }
.pl-account .pl-acct__blockh { margin: 0; }
.pl-account .pl-acct__blockhead { display: flex; flex-direction: column; gap: 6px; }
.pl-account .pl-acct__back { font-size: 13.5px; align-self: flex-start; }

.pl-account .pl-acct__links {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-left: 0;
}
.pl-account .pl-acct__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: start;
  column-gap: 12px;
  row-gap: 4px;
  min-height: 44px;
  height: 100%;
  padding: 18px 20px;
  text-decoration: none;
  transition: border-color .16s, background .16s;
}
.pl-account .pl-acct__link:hover {
  border-color: var(--pl-bd-strong);
  background: var(--pl-surface-alt);
}
.pl-account .pl-acct__linkname {
  grid-column: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pl-ink);
}
.pl-account .pl-acct__linkdesc {
  grid-column: 1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pl-muted);
}
.pl-account .pl-acct__linkgo {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--pl-navy);
  font-size: 15px;
}

/* ── orders table ───────────────────────────────── */
.pl-account .pl-acct__orders { display: flex; flex-direction: column; gap: 18px; }

/* A real <table>: WooCommerce fires a per-column do_action() inside these cells
   and plugins echo markup into them. Wide content scrolls inside its own box
   rather than widening the page. */
.pl-account .pl-acct__tablewrap {
  overflow-x: auto;
  max-width: 100%;
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd);
}
.pl-account .pl-acct__table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  overflow-x: visible;
}
.pl-account .pl-acct__table th,
.pl-account .pl-acct__table td {
  padding: 15px 16px;
  text-align: left;
  vertical-align: middle;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--pl-t2);
  border-bottom: 0;
  white-space: normal;
}
.pl-account .pl-acct__table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-muted);
  background: var(--pl-surface-alt);
  border-bottom: 1px solid var(--pl-bd);
  white-space: nowrap;
}
.pl-account .pl-acct__table tbody tr + tr { border-top: 1px solid var(--pl-bd); }
.pl-account .pl-acct__table .nobr { white-space: nowrap; }

.pl-account .pl-acct__ordernum {
  font-size: 14px;
  font-weight: 700;
  color: var(--pl-navy);
  white-space: nowrap;
  text-decoration: none;
}
.pl-account .pl-acct__ordernum:hover { color: var(--pl-ink); }
.pl-account .pl-acct__table time { white-space: nowrap; }

/* Status. The default .pl-badge is navy-on-white, which is right for the states
   still in motion; the resolved states get their own token pair. */
.pl-account .pl-acct__status { white-space: nowrap; }
.pl-account .pl-acct__status--completed { background: var(--pl-ok-bg); color: var(--pl-ok-fg); }
.pl-account .pl-acct__status--on-hold,
.pl-account .pl-acct__status--pending { background: var(--pl-info-bg); color: var(--pl-navy); }
.pl-account .pl-acct__status--cancelled,
.pl-account .pl-acct__status--failed,
.pl-account .pl-acct__status--refunded { background: var(--pl-chip); color: var(--pl-muted); }

/* Lab report buttons. One per distinct product; data-pl-lab is what opens the
   modal, via the document-level delegate in assets/js/theme.js. */
.pl-account .pl-acct__labs { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-account .pl-acct__lab {
  border: 1px solid var(--pl-info-bd);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--pl-font);
  transition: background .16s, color .16s, border-color .16s;
}
.pl-account .pl-acct__lab:hover {
  background: var(--pl-navy);
  color: var(--pl-on-dark);
  border-color: var(--pl-navy);
}
.pl-account .pl-acct__labnone { color: var(--pl-faint); }

.pl-account .pl-acct__table td.woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
.pl-account .pl-acct__action { text-decoration: none; }
.pl-account .pl-acct__action + .pl-acct__action { margin-left: 6px; }

.pl-account .pl-acct__pager { display: flex; gap: 10px; flex-wrap: wrap; }
.pl-account .pl-acct__pager a { text-decoration: none; }

.pl-account .pl-acct__empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.pl-account .pl-acct__empty .pl-btn { text-decoration: none; }

/* ── view order ─────────────────────────────────── */
.pl-account .pl-acct__vieworder { display: flex; flex-direction: column; gap: 20px; }

.pl-account .pl-acct__statusline {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pl-t2);
}
.pl-account .pl-acct__statusline mark {
  background: transparent;
  color: var(--pl-ink);
  font-weight: 700;
}

.pl-account .pl-acct__labpanel { display: flex; flex-direction: column; gap: 10px; }
.pl-account .pl-acct__labpaneltext { font-size: 13.5px; line-height: 1.5; color: var(--pl-t3); }
.pl-account .pl-acct__labgrid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-left: 0;
}
.pl-account .pl-acct__labbtn {
  background: var(--pl-surface);
  border-radius: 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 13px;
  font-weight: 700;
}

.pl-account .pl-acct__notes { display: flex; flex-direction: column; gap: 12px; }
.pl-account .pl-acct__notesh { margin: 0; }
.pl-account .pl-acct__notelist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 0;
}
.pl-account .pl-acct__note { padding-top: 14px; border-top: 1px solid var(--pl-bd); }
.pl-account .pl-acct__notelist > li:first-child { padding-top: 0; border-top: 0; }
.pl-account .pl-acct__notemeta {
  font-size: 12px;
  font-weight: 600;
  color: var(--pl-muted);
  margin-bottom: 4px;
}
.pl-account .pl-acct__note .description { font-size: 14px; line-height: 1.6; color: var(--pl-t2); }
.pl-account .pl-acct__note .description p { margin: 0 0 8px; }
.pl-account .pl-acct__note .description p:last-child { margin-bottom: 0; }

.pl-account .pl-acct__orderbody { display: flex; flex-direction: column; gap: 22px; }

/* ── login / register ───────────────────────────── */
.pl-account .pl-login { display: flex; flex-direction: column; gap: 20px; }

.pl-account .pl-login__guest {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.pl-account .pl-login__guesttext {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pl-t3);
  max-width: 68ch;
}
.pl-account .pl-login__guestlink { font-size: 13.5px; text-decoration: none; }

.pl-account .pl-login__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.pl-account .pl-login__panel { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-account .pl-login__panel--solo { max-width: 520px; }
.pl-account .pl-login__h { margin: 0; }
.pl-account .pl-login__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--pl-muted);
  margin-bottom: 14px;
}
.pl-account .pl-login__form { display: flex; flex-direction: column; }

/* Woo's own .form-row wrappers, given the shared field treatment rather than a
   parallel one. */
.pl-account .pl-login__form .form-row { margin: 0 0 16px; padding: 0; }
.pl-account .pl-login__form .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-muted);
}
.pl-account .pl-login__form .required {
  color: var(--pl-navy);
  text-decoration: none;
  border: 0;
}

.pl-account .pl-login__submitrow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 10px;
}
.pl-account .pl-login__remember {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pl-t3);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.pl-account .pl-login__checkbox {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--pl-navy);
  border-radius: 0;
  cursor: pointer;
}
.pl-account .pl-login__lost { margin: 0; font-size: 13.5px; }
.pl-account .pl-login__lost a {
  color: var(--pl-navy);
  font-weight: 600;
  text-decoration: none;
}
.pl-account .pl-login__lost a:hover { color: var(--pl-ink); }

/* ── endpoints this theme does not override ──────────────────────────────────
   edit-address, edit-account, downloads, payment-methods and the lost-password
   forms all render inside .woocommerce-MyAccount-content with no stylesheet of
   their own, because Woo's is dequeued. These rules are the difference between
   a designed account area and five bare pages behind a designed dashboard. */

.pl-account .woocommerce-MyAccount-content > h2,
.pl-account .woocommerce-MyAccount-content > h3,
.pl-account .woocommerce-MyAccount-content legend {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--pl-ink);
  margin: 0 0 12px;
  padding: 0;
}
.pl-account .woocommerce-MyAccount-content > p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--pl-t2);
  margin: 0 0 14px;
}
.pl-account .woocommerce-MyAccount-content > p a {
  color: var(--pl-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pl-account .woocommerce-MyAccount-content .form-row { margin: 0 0 16px; padding: 0; }
.pl-account .woocommerce-MyAccount-content .form-row label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-muted);
}
.pl-account .woocommerce-MyAccount-content .form-row .required,
.pl-account .woocommerce-MyAccount-content abbr.required {
  color: var(--pl-navy);
  text-decoration: none;
  border: 0;
}
.pl-account .woocommerce-MyAccount-content .woocommerce-input-wrapper { display: block; }
.pl-account .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--pl-bd);
  border-radius: 0;
  padding: 22px;
  margin: 22px 0 0;
  background: var(--pl-surface);
}
.pl-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
  border: 1px solid var(--pl-bd-strong);
  border-radius: 0;
  height: auto;
  padding: 8px 4px;
  background: var(--pl-surface);
}

/* Woo renders these as bare .button anchors and submits. */
.pl-account .woocommerce-MyAccount-content .button,
.pl-account .woocommerce-MyAccount-content button[type="submit"],
.pl-account .woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 15px 28px;
  border: 1px solid var(--pl-navy);
  border-radius: 0;
  background: var(--pl-navy);
  color: var(--pl-on-dark);
  font: 700 12.5px/1 var(--pl-font);
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter .18s;
}
.pl-account .woocommerce-MyAccount-content .button:hover,
.pl-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.pl-account .woocommerce-MyAccount-content input[type="submit"]:hover {
  filter: brightness(.92);
  color: var(--pl-on-dark);
}

/* Addresses. */
.pl-account .woocommerce-MyAccount-content .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pl-account .woocommerce-MyAccount-content .woocommerce-Address {
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd);
  padding: 22px;
  min-width: 0;
}
.pl-account .woocommerce-MyAccount-content .woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pl-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.pl-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.pl-account .woocommerce-MyAccount-content .woocommerce-Address-title .edit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pl-navy);
  text-decoration: none;
}
.pl-account .woocommerce-MyAccount-content .woocommerce-Address address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pl-t2);
}

/* Downloads and payment-method tables, plus the order-details table that the
   woocommerce_view_order action renders. */
.pl-account .woocommerce-MyAccount-content .shop_table,
.pl-account .pl-acct__orderbody .shop_table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  overflow-x: visible;
  background: var(--pl-surface);
  border: 1px solid var(--pl-bd);
  font-size: 13.5px;
}
.pl-account .woocommerce-MyAccount-content .shop_table th,
.pl-account .woocommerce-MyAccount-content .shop_table td,
.pl-account .pl-acct__orderbody .shop_table th,
.pl-account .pl-acct__orderbody .shop_table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--pl-t2);
  border-bottom: 0;
  white-space: normal;
}
.pl-account .woocommerce-MyAccount-content .shop_table thead th,
.pl-account .pl-acct__orderbody .shop_table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-muted);
  background: var(--pl-surface-alt);
  border-bottom: 1px solid var(--pl-bd);
}
.pl-account .woocommerce-MyAccount-content .shop_table tbody tr + tr,
.pl-account .pl-acct__orderbody .shop_table tbody tr + tr { border-top: 1px solid var(--pl-bd); }
.pl-account .pl-acct__orderbody .shop_table tfoot th,
.pl-account .pl-acct__orderbody .shop_table tfoot td { font-weight: 700; color: var(--pl-ink); }
.pl-account .pl-acct__orderbody .shop_table a { color: var(--pl-navy); font-weight: 600; text-decoration: none; }

.pl-account .pl-acct__orderbody h2,
.pl-account .pl-acct__orderbody .woocommerce-column__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.pl-account .pl-acct__orderbody .woocommerce-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.pl-account .pl-acct__orderbody .woocommerce-column address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pl-t2);
}

/* Notices. Scoped to the account page rather than to .pl-account, because
   `woocommerce_before_customer_login_form` fires before this template's wrapper
   opens — a login error lands outside it. body.woocommerce-account catches it
   without leaking into the cart or checkout, which own their own messaging. */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-notice {
  list-style: none;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--pl-info-bd);
  border-radius: 0;
  background: var(--pl-info-bg);
  color: var(--pl-t3);
  font-size: 14px;
  line-height: 1.55;
}
body.woocommerce-account .woocommerce-message {
  background: var(--pl-ok-bg);
  border-color: var(--pl-ok-fg);
  color: var(--pl-ok-fg);
}
body.woocommerce-account .woocommerce-error {
  background: var(--pl-surface);
  border-color: var(--pl-navy);
  color: var(--pl-ink);
}
body.woocommerce-account .woocommerce-error li { margin: 0 0 4px; }
body.woocommerce-account .woocommerce-error li:last-child { margin-bottom: 0; }
body.woocommerce-account .woocommerce-message a,
body.woocommerce-account .woocommerce-info a,
body.woocommerce-account .woocommerce-error a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── responsive ─────────────────────────────────── */
@media (max-width: 1199px) {
  .pl-account .pl-cols--account { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }

  /* Touch, not width, is what makes a 40px target too small. */
  .pl-account .pl-acct__lab,
  .pl-account .pl-acct__labbtn,
  .pl-account .pl-acct__action,
  .pl-account .pl-acct__ordernum,
  .pl-account .pl-acct__back,
  .pl-account .pl-login__lost a,
  .pl-account .pl-login__guestlink,
  .pl-account .pl-acct__statnote .pl-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .pl-account .pl-acct__lab { padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 767px) {
  .pl-account .pl-cols--account { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* Content first on a phone: a returning customer should not have to scroll
     past six navigation rows to reach their orders. */
  .pl-account .pl-account__main { grid-column: 1; grid-row: 1; }
  .pl-account .pl-account__side { grid-column: 1; grid-row: 2; }

  .pl-account .pl-acct__stats { grid-template-columns: minmax(0, 1fr); }
  .pl-account .pl-acct__statv { font-size: 30px; }
  .pl-account .pl-acct__links { grid-template-columns: minmax(0, 1fr); }
  .pl-account .pl-login__cols { grid-template-columns: minmax(0, 1fr); }
  .pl-account .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); }
  .pl-account .pl-acct__orderbody .woocommerce-columns { grid-template-columns: minmax(0, 1fr); }

  /* The orders table stops being a grid and becomes one card per order. The
     column heading each cell belongs to comes from the data-title attribute
     WooCommerce already writes on every cell, so no heading is lost and the
     table stays a real <table> for the plugins that echo <tr> into it. */
  .pl-account .pl-acct__tablewrap { background: transparent; border: 0; overflow-x: visible; }
  .pl-account .pl-acct__table,
  .pl-account .pl-acct__table tbody,
  .pl-account .pl-acct__table tr,
  .pl-account .pl-acct__table th,
  .pl-account .pl-acct__table td { display: block; width: auto; }
  .pl-account .pl-acct__table thead { display: none; }
  .pl-account .pl-acct__table tbody tr + tr { border-top: 0; }

  .pl-account .pl-acct__row {
    background: var(--pl-surface);
    border: 1px solid var(--pl-bd);
    padding: 6px 16px 16px;
    margin-bottom: 12px;
  }
  .pl-account .pl-acct__table th,
  .pl-account .pl-acct__table td { padding: 10px 0 0; }
  .pl-account .pl-acct__table th::before,
  .pl-account .pl-acct__table td::before {
    content: attr(data-title);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pl-muted);
  }
  .pl-account .pl-acct__table td.woocommerce-orders-table__cell-order-actions { white-space: normal; }
  .pl-account .pl-acct__action { display: flex; width: 100%; margin: 6px 0 0; }
  .pl-account .pl-acct__action + .pl-acct__action { margin-left: 0; }

  .pl-account .pl-acct__labs { gap: 8px; }
  .pl-account .pl-acct__labgrid > li { width: 100%; }
  .pl-account .pl-acct__labbtn { width: 100%; justify-content: flex-start; }

  .pl-account .pl-acct__pager > * { flex: 1; }

  .pl-account .woocommerce-MyAccount-content .button,
  .pl-account .woocommerce-MyAccount-content button[type="submit"],
  .pl-account .woocommerce-MyAccount-content input[type="submit"] { width: 100%; }

  /* Downloads, payment-method and order-details tables scroll inside their own
     box rather than widening the page. */
  .pl-account .woocommerce-MyAccount-content .shop_table,
  .pl-account .pl-acct__orderbody .shop_table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}