/* ============================================================ */
/* WOOCOMMERCE MY ACCOUNT — dark skin (Phase 3)                  */
/* ------------------------------------------------------------ */
/* Skins Woo's BASE My Account markup to the dark theme. No      */
/* template overrides exist — every endpoint (Orders,           */
/* Subscriptions, Payment methods, Addresses, Account details)  */
/* is Woo's own HTML, styled here. The branded dashboard landing */
/* (.thl-acc-*) is injected via the woocommerce_account_dashboard*/
/* hook in inc/woocommerce.php.                                  */
/*                                                              */
/* All rules are scoped to body.woocommerce-account so they only */
/* touch the account page (which renders through page.php /      */
/* .thl-content). They override the prose .thl-content styling.  */
/* ============================================================ */

/* ---- Shell: widen the narrow content page into a portal ---- */
body.woocommerce-account .page-shell { padding: 48px 24px 88px; }
body.woocommerce-account .page-shell .page-inner { max-width: 1080px; }
body.woocommerce-account .page-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700; letter-spacing: -0.02em; margin-bottom: 30px;
}

/* Neutralise the prose flow rules inside the Woo app region. */
body.woocommerce-account .thl-content { font-size: 15px; color: var(--t-mid); line-height: 1.6; }
body.woocommerce-account .woocommerce > * + * { margin-top: 0; }

/* ============================================================ */
/* 2-COLUMN LAYOUT (nav sidebar + endpoint content)             */
/* ============================================================ */
body.woocommerce-account .woocommerce {
  display: grid; grid-template-columns: 244px 1fr; gap: 36px; align-items: start;
}
/* WooCommerce ships a base clearfix — .woocommerce::before / ::after { display:table }.
   Once .woocommerce becomes a grid, those two pseudo-elements turn into GRID ITEMS:
   they grab the first and last cells, which pushes the real nav into column 2 and
   drops the content to row 2 (the "menu floating mid-page + narrow stranded content"
   break). Remove them inside the account grid so only nav + content are laid out. */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after { content: none; display: none; }
/* Drop WooCommerce's default float + percentage widths (nav 30% / content 68%) so the
   two real children simply fill their grid tracks instead of resolving against the
   wrong column. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }

/* WC notices sometimes render above the nav/content as a sibling — span both. */
body.woocommerce-account .woocommerce > .woocommerce-message,
body.woocommerce-account .woocommerce > .woocommerce-info,
body.woocommerce-account .woocommerce > .woocommerce-error,
body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

@media (max-width: 880px) {
  body.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================ */
/* NAVIGATION SIDEBAR                                            */
/* ============================================================ */
/* Sticky ONLY as a desktop sidebar. Below 880px the nav stacks above the content, so
   stickiness would pin the menu over the page and hide the dashboard/orders/etc. as you
   scroll — keep it in normal flow there. (Must be min-width, not a later max-width
   override: the base rule below it would otherwise win on source order at equal specificity.) */
@media (min-width: 881px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation {
    position: sticky; top: calc(var(--nav-h) + 16px);
  }
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 8px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
body.woocommerce-account .woocommerce-MyAccount-navigation li + li { margin-top: 2px; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 9px;
  font-size: 14.5px; font-weight: 500; color: var(--t-mid);
  text-decoration: none; transition: background .18s, color .18s;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(255,255,255,0.05); color: var(--t-strong);
}
/* Active state: a subtle NEUTRAL fill (not the old blue tint, which read as an AI
   "thumbnail") + bold strong text, so the current section is clearly marked without a
   coloured pill. A touch stronger than the hover fill so it stays distinct. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: rgba(255,255,255,0.08); color: var(--t-strong); font-weight: 700;
}
/* Log out reads as a quiet, separated action. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--line);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--t-soft); }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: #f0a0a0; background: rgba(240,160,160,0.08); }
/* The injected CPD/CE Log link gets a subtle accent so it stands out. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--cpd-log a { color: var(--blue-bright); }

/* ============================================================ */
/* ENDPOINT CONTENT PANE                                        */
/* ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0; /* lets wide tables scroll instead of blowing out the grid */
  color: var(--t-mid); font-size: 14.5px; line-height: 1.65;
}
body.woocommerce-account .woocommerce-MyAccount-content > * + * { margin-top: 18px; }
body.woocommerce-account .woocommerce-MyAccount-content p { color: var(--t-mid); }
/* Genuine inline content links are blue, underlined on hover/focus only. Exclude buttons
   and the whole branded dashboard subtree (.thl-acc-*) — those are cards/CTAs, not prose
   links, so underlining them (and, via inheritance, the stat numbers inside) looked wrong. */
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not([class*="thl-acc"]) {
  color: var(--blue-bright); text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not([class*="thl-acc"]):hover,
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not([class*="thl-acc"]):focus-visible {
  text-decoration: underline; text-underline-offset: 3px;
}
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 {
  color: var(--t-strong); font-weight: 700; letter-spacing: -0.01em;
  margin: 4px 0 12px;
}
body.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 19px; }
body.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 16px; }

/* ============================================================ */
/* TABLES (orders, subscriptions, downloads)                    */
/* ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account table.woocommerce-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; font-size: 13.5px; margin: 0;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th,
body.woocommerce-account .woocommerce-orders-table thead th {
  background: rgba(255,255,255,0.03); color: var(--t-soft);
  font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line);
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td,
body.woocommerce-account .woocommerce-orders-table tbody td {
  padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line);
  color: var(--t-mid); vertical-align: middle; transition: background .15s;
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td,
body.woocommerce-account .woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td { background: rgba(122,175,201,0.07); }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-actions { text-align: right; }
/* Subscription/order totals foot row */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot td {
  padding: 12px 16px; border-top: 1px solid var(--line); color: var(--t-mid); background: rgba(255,255,255,0.02);
}
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tfoot th { color: var(--t-soft); font-weight: 600; }
/* Order/subscription status — semantic coloured text in a NORMAL table cell.
   The previous rule turned the whole <td> into an inline-flex pill with its own
   background, which (a) stopped the row-hover tint reaching the status cell and
   (b) via the un-scoped bare `.order-status` / `.subscription-status` selectors also
   restyled the <th> HEADER (the header carries those same classes). Scope strictly to
   data cells (`td.`) and colour by the `…__row--status-*` class WC/WCS add to the row,
   so the cell stays a normal hoverable cell and the header falls back to thead styling. */
/* Specificity note: the generic `…content table.shop_table tbody td { color: var(--t-mid) }`
   above is (0,3,4); these must out-rank it, so they carry the full table ancestry. */
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td.woocommerce-orders-table__cell-order-status { font-weight: 700; color: var(--t-strong); }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-active td.woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status { color: #6fce9f; }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-pending td.woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-pending-cancel td.woocommerce-orders-table__cell-order-status { color: #e6b277; }
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-expired td.woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr.woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status { color: #d99a9a; }

/* Responsive table collapse (WC adds data-title on mobile) */
@media (max-width: 600px) {
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead { display: none; }
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr { display: block; padding: 6px 0; }
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
    display: flex; justify-content: space-between; gap: 16px; text-align: right;
    padding: 9px 16px; border-bottom: 1px solid var(--line);
  }
  body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td::before {
    content: attr(data-title); color: var(--t-soft); font-weight: 600; text-align: left;
  }
}

/* ============================================================ */
/* SUBSCRIPTION DETAIL (WCS single-subscription view)           */
/* ============================================================ */
body.woocommerce-account .subscription_details,
body.woocommerce-account .order_details {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 4px; overflow: hidden;
}
body.woocommerce-account .woocommerce-MyAccount-content .subscription_details td,
body.woocommerce-account .woocommerce-MyAccount-content .subscription_details th { padding: 12px 18px; }

/* ============================================================ */
/* ADDRESSES                                                    */
/* ============================================================ */
/* Stack the two addresses full-width: Billing first, Shipping below (DOM order).
   .woocommerce-Addresses is a WC `col2-set` — it floats .col-1/.col-2 at width:48%
   via `.woocommerce .col2-set .col-1` (specificity 0,3,0) and adds a ::before/::after
   clearfix. A simple flex column + a reset SPECIFIC enough to beat 0,3,0 (this is why
   the earlier 0,2,1 reset failed on staging) makes each card full width. */
body.woocommerce-account .woocommerce-Addresses {
  display: flex; flex-direction: column; gap: 18px; margin: 0;
}
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after { content: none; display: none; }
body.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  float: none; width: auto; max-width: none;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px;
}
/* The address title is an <h2> (WC markup) — reset it (h3 too) so it doesn't pick up
   the big content-heading size; let it wrap above the edit link rather than overflow. */
body.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: 16px; }
body.woocommerce-account .woocommerce-Address-title a { font-size: 13px; font-weight: 600; flex-shrink: 0; white-space: nowrap; }
body.woocommerce-account address { font-style: normal; color: var(--t-mid); line-height: 1.7; font-size: 14px; }

/* ============================================================ */
/* ADD PAYMENT METHOD (gateway card form — light card)          */
/* ============================================================ */
/* /my-account/add-payment-method/ renders the Stripe UPE card field, which is locked to
   light mode (white field, dark digits). Dark-skinning the surrounds put light text on
   that white field and left the submit button white-on-white. Render the whole payment
   area as ONE light card with dark-on-light text instead — like the checkout payment
   box — so every contrast pair is correct and the card field sits naturally. */
body.woocommerce-account #add_payment_method { margin: 0; }
body.woocommerce-account #add_payment_method #payment {
  background: #fff; border: 1px solid #e2e7ee; border-radius: 16px; padding: 24px; color: #2d3748;
}
body.woocommerce-account #add_payment_method #payment .woocommerce-PaymentMethods,
body.woocommerce-account #add_payment_method #payment ul.payment_methods {
  list-style: none; margin: 0; padding: 0; background: transparent; border: 0;
}
body.woocommerce-account #add_payment_method #payment ul.payment_methods li { margin: 0; background: transparent; }
body.woocommerce-account #add_payment_method #payment ul.payment_methods li label {
  display: inline-flex; align-items: center; gap: 8px; color: #2d3748; font-weight: 700; font-size: 15px;
}
body.woocommerce-account #add_payment_method #payment .payment_box {
  background: transparent; border: 0; border-radius: 0;
  color: #5a6678; font-size: 13.5px; line-height: 1.6; padding: 14px 0 0; margin: 0;
}
body.woocommerce-account #add_payment_method #payment .payment_box::before,
body.woocommerce-account #add_payment_method #payment .payment_box::after { content: none; display: none; }
body.woocommerce-account #add_payment_method #payment .payment_box label,
body.woocommerce-account #add_payment_method #payment .form-row label { color: #2d3748; font-size: 13px; font-weight: 600; }
/* Kill the UA fieldset groove box (the "ugly square"), same as checkout. */
body.woocommerce-account #add_payment_method #payment fieldset,
body.woocommerce-account #add_payment_method #payment .wc-payment-form { border: 0; margin: 0; padding: 0; min-width: 0; }
/* The card field sits on white with the same soft border as a checkout input. */
body.woocommerce-account #add_payment_method #payment .wc-stripe-elements-field,
body.woocommerce-account #add_payment_method #payment .wc-stripe-iban-element-field,
body.woocommerce-account #add_payment_method #payment .StripeElement {
  background: #fff; border: 1px solid #d8e0ea; border-radius: 10px; padding: 13px 14px;
}
/* "Add payment method" submit — navy, full width, readable (was white-on-white). */
body.woocommerce-account #add_payment_method #payment .form-row,
body.woocommerce-account #add_payment_method .form-row { padding: 0; margin: 18px 0 0; }
body.woocommerce-account #add_payment_method #place_order,
body.woocommerce-account #add_payment_method button[type="submit"],
body.woocommerce-account #add_payment_method .button.alt {
  display: block; width: 100%; background: #2d3748; color: #fff; border: 0;
  border-radius: 10px; padding: 14px 16px; font-size: 15px; font-weight: 700;
  letter-spacing: 0.01em; cursor: pointer; transition: background .15s;
}
body.woocommerce-account #add_payment_method #place_order:hover,
body.woocommerce-account #add_payment_method button[type="submit"]:hover,
body.woocommerce-account #add_payment_method .button.alt:hover { background: #3a4759; }

/* ============================================================ */
/* FORMS (edit account, addresses, payment)                     */
/* ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-content form { margin: 0; }
body.woocommerce-account .woocommerce form .form-row,
body.woocommerce-account .woocommerce-MyAccount-content .form-row { margin: 0 0 16px; padding: 0; }
body.woocommerce-account .woocommerce-MyAccount-content label,
body.woocommerce-account .woocommerce form label {
  display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--t-strong);
}
body.woocommerce-account .woocommerce-MyAccount-content .required { color: var(--blue); border: 0; }
body.woocommerce-account .woocommerce-MyAccount-content input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content textarea,
body.woocommerce-account .woocommerce-MyAccount-content select,
body.woocommerce-account .woocommerce .select2-selection {
  width: 100%; background: var(--bg-deep); color: var(--t-strong);
  border: 1px solid var(--line-2); border-radius: 9px;
  padding: 12px 14px; font-size: 14.5px; font-family: inherit; line-height: 1.4;
  transition: border-color .18s, box-shadow .18s;
}
body.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
body.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
body.woocommerce-account .woocommerce-MyAccount-content select:focus {
  outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(122,175,201,0.18);
}
body.woocommerce-account .woocommerce-MyAccount-content input::placeholder { color: var(--t-soft); }
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-top: 20px;
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset legend { padding: 0 8px; color: var(--t-strong); font-weight: 700; }
body.woocommerce-account .woocommerce-MyAccount-content span.password-input,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-input-wrapper { display: block; width: 100%; }
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength { margin-top: 8px; border-radius: 8px; font-size: 12px; }
body.woocommerce-account .woocommerce-MyAccount-content em,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row .description { color: var(--t-soft); font-size: 12.5px; }

/* select2 (country / state dropdowns) dark */
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--t-strong); line-height: 1.4; padding: 0; }
body.woocommerce-account .select2-dropdown { background: var(--bg-elev); border-color: var(--line-2); color: var(--t-mid); }
body.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(122,175,201,0.2); color: var(--t-strong); }
body.woocommerce-account .select2-search--dropdown .select2-search__field { background: var(--bg-deep); color: var(--t-strong); border-color: var(--line-2); }

/* ============================================================ */
/* BUTTONS                                                      */
/* ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce button.button {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: var(--blue); color: var(--navy-deeper);
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  padding: 12px 22px; border-radius: 9px; border: 0; cursor: pointer;
  text-decoration: none; text-transform: none; line-height: 1.2;
  transition: background .2s, transform .15s, box-shadow .2s;
}
body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-account .woocommerce button.button:hover {
  background: var(--blue-bright); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(122,175,201,0.26);
}
/* Secondary / outline actions (e.g. "View", "Cancel", order-again) */
body.woocommerce-account .woocommerce-MyAccount-content .button.view,
body.woocommerce-account .woocommerce-MyAccount-content a.button.cancel,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
  background: transparent; color: var(--t-strong);
  border: 1px solid var(--line-2); padding: 9px 16px; font-size: 12.5px;
}
body.woocommerce-account .woocommerce-MyAccount-content .button.view:hover,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover {
  background: rgba(255,255,255,0.06); color: var(--t-strong); border-color: var(--blue); box-shadow: none; transform: none;
}

/* ============================================================ */
/* WC NOTICES (messages / info / errors)                        */
/* ============================================================ */
/* WooCommerce absolutely-positions an icon via ::before (info "i", message tick,
   error "!") at left:1.5em, plus an ::after clearfix. With our own padding the icon
   overlaps the text ("Y[icon]ou have no active subscriptions"). We signal the notice
   type with a coloured left border instead, so remove both pseudo-elements. */
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-message::after,
body.woocommerce-account .woocommerce-info::before,
body.woocommerce-account .woocommerce-info::after,
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account .woocommerce-error::after { content: none; display: none; }
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-notice {
  border: 1px solid var(--line-2); border-radius: 11px;
  padding: 14px 18px 14px 16px; font-size: 14px; color: var(--t-strong);
  background: var(--bg-elev); list-style: none; margin: 0 0 20px;
  display: flex; align-items: center; gap: 12px;
}
/* No coloured left-accent on info/message notices (Taylor: the blue left edge read as
   the AI "thumbnail" accent) — a plain bordered box. Errors keep a quiet red edge. */
body.woocommerce-account .woocommerce-error { border-left: 3px solid #e07a7a; }
body.woocommerce-account .woocommerce-message .button,
body.woocommerce-account .woocommerce-info .button { margin-left: auto; }
body.woocommerce-account .woocommerce-error li { margin: 0; }

/* Pagination */
body.woocommerce-account .woocommerce-pagination ul { display: inline-flex; gap: 6px; border: 0; padding: 0; }
body.woocommerce-account .woocommerce-pagination ul li { border: 0; }
body.woocommerce-account .woocommerce-pagination a, body.woocommerce-account .woocommerce-pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 9px; color: var(--t-mid); background: var(--bg-elev);
}
body.woocommerce-account .woocommerce-pagination .current { background: var(--blue); color: var(--navy-deeper); border-color: var(--blue); font-weight: 700; }

/* ============================================================ */
/* BRANDED DASHBOARD LANDING (.thl-acc-*)                        */
/* ============================================================ */
/* WooCommerce's default greeting ("Hello …", "From your account dashboard you
   can view…") is printed by the dashboard template as two bare <p>s BEFORE our
   woocommerce_account_dashboard hook, so a PHP remove_action can't reach it.
   :has() scopes the hide to the dashboard only — where our branded .thl-acc-dash
   is present — so the other endpoints' content is never touched. (LD/other
   hook-injected dashboard content is removed in PHP via remove_all_actions.) */
body.woocommerce-account .woocommerce-MyAccount-content:has(.thl-acc-dash) > p { display: none; }

.thl-acc-dash { display: flex; flex-direction: column; gap: 24px; }
/* The dashboard cards are <a>s inside .thl-content, and the theme's `.thl-content a`
   rule (style.css) underlines every link — which underlined the stat numbers, labels
   and quick-link text. These are cards/CTAs, not prose, so remove it (the
   .thl-acc-reg-edit hover below re-adds an underline just for that one text link). */
body.woocommerce-account .thl-acc-dash a { text-decoration: none; }

.thl-acc-welcome .thl-acc-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue-bright); margin: 0 0 8px;
}
.thl-acc-welcome h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--t-strong); margin: 0 0 8px; }
.thl-acc-welcome .thl-acc-sub { color: var(--t-mid); font-size: 14.5px; line-height: 1.6; max-width: 560px; margin: 0; }

/* Membership status card */
.thl-acc-status {
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(122,175,201,0.10), rgba(122,175,201,0.02));
  border: 1px solid var(--line-2); border-radius: 16px; padding: 22px 24px;
}
.thl-acc-status.is-lapsed, .thl-acc-status.is-none { background: var(--bg-elev); }
.thl-acc-status-main { min-width: 0; }
.thl-acc-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--blue-bright); margin-bottom: 6px;
}
.thl-acc-badge svg { width: 18px; height: 18px; }
.thl-acc-badge--muted { color: var(--t-soft); }
.thl-acc-status-note { font-size: 14px; color: var(--t-mid); line-height: 1.55; margin: 0; }
.thl-acc-status-note strong { color: var(--t-strong); }
.thl-acc-status-link {
  flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--blue-bright);
  border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 16px; transition: background .18s, border-color .18s;
}
.thl-acc-status-link:hover { background: rgba(255,255,255,0.05); border-color: var(--blue); }
.thl-acc-status-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: var(--navy-deeper); font-size: 13px; font-weight: 700;
  border-radius: 9px; padding: 12px 20px; transition: background .2s, transform .15s;
}
.thl-acc-status-cta:hover { background: var(--blue-bright); transform: translateY(-1px); }

/* Stats + registration */
.thl-acc-grid { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 14px; }
@media (max-width: 720px) { .thl-acc-grid { grid-template-columns: 1fr 1fr; } .thl-acc-reg { grid-column: 1 / -1; } }
@media (max-width: 420px) { .thl-acc-grid { grid-template-columns: 1fr; } }
.thl-acc-stat {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  transition: border-color .18s, transform .15s;
}
.thl-acc-stat:hover { border-color: var(--line-2); transform: translateY(-1px); }
.thl-acc-stat-num { font-size: 30px; font-weight: 800; color: var(--t-strong); line-height: 1; letter-spacing: -0.02em; }
.thl-acc-stat-lbl { font-size: 12px; font-weight: 600; color: var(--t-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.thl-acc-reg {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
}
.thl-acc-reg-lbl { font-size: 12px; font-weight: 600; color: var(--t-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.thl-acc-reg-val { font-size: 19px; font-weight: 700; color: var(--t-strong); }
.thl-acc-reg-val.thl-acc-reg-empty { color: var(--t-soft); font-weight: 600; font-size: 16px; }
.thl-acc-reg-edit { align-self: flex-start; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--blue-bright); }
body.woocommerce-account .thl-acc-reg-edit:hover { text-decoration: underline; }
.thl-acc-reg-hint { font-size: 11.5px; color: var(--t-soft); margin-top: 2px; }

/* Quick links */
.thl-acc-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .thl-acc-links { grid-template-columns: 1fr; } }
.thl-acc-link {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  transition: border-color .18s, transform .15s, background .18s;
}
.thl-acc-link:hover { border-color: var(--blue); transform: translateY(-2px); background: rgba(122,175,201,0.05); }
.thl-acc-link.is-primary { border-color: rgba(122,175,201,0.35); background: rgba(122,175,201,0.06); }
.thl-acc-link-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(122,175,201,0.14); color: var(--blue-bright);
}
.thl-acc-link-ic svg { width: 20px; height: 20px; }
.thl-acc-link-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.thl-acc-link-txt strong { font-size: 15px; font-weight: 700; color: var(--t-strong); }
.thl-acc-link-txt span { font-size: 12.5px; color: var(--t-soft); }
.thl-acc-link-arr { margin-left: auto; flex-shrink: 0; color: var(--t-soft); transition: transform .18s, color .18s; }
.thl-acc-link-arr svg { width: 17px; height: 17px; }
.thl-acc-link:hover .thl-acc-link-arr { color: var(--blue-bright); transform: translateX(3px); }

/* ============================================================ */
/* SUBSCRIPTIONS — hide the empty-state "Browse products" button */
/* ============================================================ */
/* When a member has no subscriptions, WooCommerce Subscriptions prints a notice
   with a "Browse products" button linking to the shop page — which isn't a live
   page on this site (membership is direct-to-checkout). Scoped to the subscriptions
   LIST endpoint via the body class set in inc/woocommerce.php, so a member with
   real subscriptions (who sees the table, never this notice) is unaffected. */
body.thl-ep-subscriptions .woocommerce-MyAccount-content .woocommerce-info .button,
body.thl-ep-subscriptions .woocommerce-MyAccount-content .woocommerce-message .button,
body.thl-ep-subscriptions .woocommerce-MyAccount-content .woocommerce-notice .button {
  display: none;
}