/* ==========================================================================
   3DOptix redesign — WooCommerce customer surfaces.
   Cart banner, checkout, my account, order details.

   SCOPE — READ BEFORE EDITING
   These are LEGACY surfaces. dxr-components.css (which carries the redesign
   reset) is NOT loaded here and must not be: legacy Elementor, blog, Academy
   and WooCommerce markup keeps its own list bullets, paragraph spacing and
   link underlines. Everything in this file is therefore self-contained. It
   reads --dxr-* custom properties from dxr-tokens.css (global, declarations
   only, safe everywhere) and writes nothing but typography, colour, border,
   spacing and button rules.

   Every selector is prefixed with the .dxr-woo body class added by
   inc/dxr-woo.php. That does two jobs: it keeps these rules off every
   non-WooCommerce page, and it buys the one extra class of specificity needed
   to beat the legacy checkout block in style.css (lines 1974-2565) and the
   global `a{color:#23A7DE}` at style.css:3850 without reaching for
   !important. The single !important below mirrors one that already exists.

   WHAT THIS FILE DELIBERATELY DOES NOT DO
   - No display/visibility rule touches the coupon block. The coupon-visibility
     pair at style.css:1984-1994 is a production fix and is left untouched;
     only the Apply-coupon button and the notice colours are restyled, neither
     of which can affect the slideToggle.
   - No rule changes float, width, order, grid or flex on checkout. The
     .orderDetails summary is float-based and style.css:2322 keys on a
     positional :nth-child(2n) — its geometry is load-bearing.
   - #place_order keeps its declared width. It is display:flex/column, so
     width:auto would make it fill the row.
   - shop_table_responsive stacking below 768px is left exactly as WooCommerce
     ships it. The design rule "data tables scroll, never stack" would require
     neutralising plugin CSS and re-plumbing every data-title label — a layout
     change, out of scope for a restyle. Raised for a separate ticket.

   TWO FONTS ONLY. Plus Jakarta Sans for prose and UI; JetBrains Mono strictly
   for measured content — money, dates, order numbers, quantities, percentages
   and column labels. Sentences stay sans, including the trial-period notes,
   so mono never leaks into prose.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Base — family and ink for everything inside the WooCommerce wrappers.
   Inherited, so it reaches markup this file never names. The explicit
   overrides further down exist only where style.css declares a family of its
   own and inheritance therefore cannot win.
   -------------------------------------------------------------------------- */
.dxr-woo .woocommerce,
.dxr-woo .checkoutHeader,
.dxr-woo .orderDetails,
.dxr-woo .woocommerce-MyAccount-content,
.dxr-woo .woocommerce-order-details,
.dxr-woo .woocommerce-order-received {
  font-family: var(--dxr-font-sans);
  color: var(--dxr-body);
}

/* Links inside WooCommerce content only. The nav, drawer and footer live
   outside .woocommerce and keep the chrome's own link rules. */
.dxr-woo .woocommerce a:not(.button):not(.woocommerce-button),
.dxr-woo .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) {
  color: var(--dxr-primary);
}

.dxr-woo .woocommerce a:not(.button):not(.woocommerce-button):hover,
.dxr-woo .woocommerce a:not(.button):not(.woocommerce-button):active,
.dxr-woo .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):hover {
  color: var(--dxr-primary-hover);
}

/* Headings across all four surfaces. */
.dxr-woo .woocommerce h2,
.dxr-woo .woocommerce h3,
.dxr-woo .woocommerce-MyAccount-content h2,
.dxr-woo .orderDetails h3 {
  font-family: var(--dxr-font-sans);
  color: var(--dxr-ink);
  letter-spacing: -0.01em;
}

/* Money is measured content, everywhere it appears. */
.dxr-woo .woocommerce .woocommerce-Price-amount,
.dxr-woo .woocommerce-MyAccount-content .woocommerce-Price-amount,
.dxr-woo .orderDetails .woocommerce-Price-amount {
  font-family: var(--dxr-font-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--dxr-ink);
}

/* Keyboard focus. Legacy Woo/Elementor CSS ships none on these surfaces. */
.dxr-woo .woocommerce a:focus-visible,
.dxr-woo .woocommerce button:focus-visible,
.dxr-woo .woocommerce input:focus-visible,
.dxr-woo .woocommerce select:focus-visible,
.dxr-woo .woocommerce textarea:focus-visible,
.dxr-woo .woocommerce-MyAccount-content a:focus-visible {
  outline: 2px solid var(--dxr-primary);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   2. Buttons.
   One shared treatment so cart, checkout and my account read as one system.
   Class names are untouched — WooCommerce core CSS and the BlueSnap gateway
   both key on .button / .woocommerce-button.
   -------------------------------------------------------------------------- */
.dxr-woo .woocommerce a.button,
.dxr-woo .woocommerce button.button,
.dxr-woo .woocommerce input.button,
.dxr-woo .woocommerce a.woocommerce-button,
.dxr-woo .woocommerce-MyAccount-content a.woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dxr-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: var(--dxr-radius-md);
  border: 1px solid var(--dxr-border-strong);
  background: var(--dxr-surface);
  color: var(--dxr-ink);
  padding: 11px 18px;
  /* 11 + 14 + 11 = 36px from the padding alone, 8px short of a comfortable
     touch target on "Proceed to checkout", "Update cart" and "Apply coupon".
     min-height rather than more padding: these are already inline-flex with both
     axes centred, so only the vertical metric moves — no horizontal growth, and
     nothing that could widen a cart row. */
  min-height: 44px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dxr-woo .woocommerce a.button:hover,
.dxr-woo .woocommerce button.button:hover,
.dxr-woo .woocommerce input.button:hover,
.dxr-woo .woocommerce a.woocommerce-button:hover,
.dxr-woo .woocommerce-MyAccount-content a.woocommerce-button:hover {
  background: var(--dxr-surface-raised);
  border-color: var(--dxr-ink);
  color: var(--dxr-ink);
}

/* Table-row actions on the my-account subscription views sit inline in a
   narrow cell, so they get the compact size. min-height:0 releases the 44px
   floor above only while that "narrow cell" premise actually holds. */
.dxr-woo .woocommerce-orders-table a.woocommerce-button,
.dxr-woo .woocommerce-MyAccount-content .woocommerce-orders-table a.woocommerce-button {
  padding: 8px 14px;
  font-size: 13px;
  margin: 2px 4px 2px 0;
  min-height: 0;
}

/* Below 768px WooCommerce's own shop_table_responsive stacks the table and the
   actions cell becomes full width, so the narrow-cell justification for the
   compact size stops applying — while the targets stay 29px tall and 4px apart.
   These are View / Pay / Cancel on a live subscription: "Pay" is ~49.5px wide
   and "Cancel" ~71px at 13px, two 29px-tall targets separated by 4px against a
   ~44px contact patch. 768px is the plugin's own breakpoint, so this changes
   nothing above the width at which the table is still a table. */
@media (max-width: 768px) {
  .dxr-woo .woocommerce-orders-table a.woocommerce-button,
  .dxr-woo .woocommerce-MyAccount-content .woocommerce-orders-table a.woocommerce-button {
    min-height: 44px;
    margin: 4px 8px 4px 0;
  }
}

/* Pay is the one affirmative action in that set. */
.dxr-woo .woocommerce-orders-table a.woocommerce-button.pay {
  background: var(--dxr-primary);
  border-color: var(--dxr-primary);
  color: var(--dxr-on-dark);
}

.dxr-woo .woocommerce-orders-table a.woocommerce-button.pay:hover {
  background: var(--dxr-primary-hover);
  border-color: var(--dxr-primary-hover);
  color: var(--dxr-on-dark);
}

.dxr-woo .woocommerce-orders-table a.woocommerce-button.cancel:hover {
  border-color: var(--dxr-red);
  color: var(--dxr-red);
}


/* --------------------------------------------------------------------------
   3. Cart banner (woocommerce/cart/cart.php).
   Rendered above #customer_details on checkout, not on /cart/.
   -------------------------------------------------------------------------- */
.dxr-woo .checkoutHeader img {
  max-width: 100%;
  height: auto;
}

.dxr-woo .checkoutHeader h3 {
  font-family: var(--dxr-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dxr-body-muted);
}


/* --------------------------------------------------------------------------
   4. Order summary (woocommerce/checkout/form-checkout.php, .orderDetails).
   Colour, rules and type only. The float geometry and the 210px label columns
   are untouched — style.css:2322 alternates rows positionally.
   -------------------------------------------------------------------------- */
.dxr-woo .orderDetails {
  border-top: 1px solid var(--dxr-border);
  border-bottom: 1px solid var(--dxr-border);
}

.dxr-woo .orderDetails h3 {
  font-family: var(--dxr-font-sans);
  font-weight: 700;
  color: var(--dxr-ink);
}

.dxr-woo .orderDetails div {
  font-family: var(--dxr-font-sans);
  font-size: 15px;
  color: var(--dxr-body);
}

/* Label column — sans, these are prose labels and a product name. */
.dxr-woo .orderDetails .productName,
.dxr-woo .orderDetails .taxName,
.dxr-woo .orderDetails .totalName {
  font-weight: 600;
  color: var(--dxr-ink);
}

/* Value column — measured. */
.dxr-woo .orderDetails .productPrice,
.dxr-woo .orderDetails .taxValue,
.dxr-woo .orderDetails .totalValue {
  font-family: var(--dxr-font-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--dxr-ink);
}

/* "First automatic renewal: <date>" is a sentence, so it stays sans. */
.dxr-woo .orderDetails .totalValue small {
  font-family: var(--dxr-font-sans);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--dxr-text-muted);
}

/* Quantity control inside the embedded cart form. 16px, again for iOS auto-zoom
   — a number input under 16px zooms the checkout on focus exactly like a text
   one. Its box metrics come from style.css and are left alone. */
.dxr-woo .orderDetails .quantity input.qty {
  font-family: var(--dxr-font-mono);
  font-size: 16px;
  color: var(--dxr-ink);
  border: 1px solid var(--dxr-border-strong);
  border-radius: var(--dxr-radius-md);
  background: var(--dxr-surface);
}

.dxr-woo .orderDetails .woocommerce-cart-form__contents td {
  color: var(--dxr-body);
}


/* --------------------------------------------------------------------------
   5. Billing details (do_action woocommerce_checkout_billing output).
   Field names, ids and source order are untouched; the flex `order` values in
   style.css:2372-2449 still decide the sequence.
   -------------------------------------------------------------------------- */
.dxr-woo #customer_details > div.col-1 > h3,
.dxr-woo #order_review_heading {
  font-family: var(--dxr-font-sans);
  font-weight: 700;
  color: var(--dxr-ink);
  letter-spacing: -0.01em;
}

.dxr-woo #customer_details > div.col-1 > div.woocommerce-billing-fields {
  background: var(--dxr-surface-sunken);
  border: 1px solid var(--dxr-border);
  border-radius: var(--dxr-radius-panel);
}

.dxr-woo #customer_details label,
.dxr-woo #customer_details label:first-child {
  font-family: var(--dxr-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--dxr-body);
}

/* 16px, NOT 15px, and the reason is behavioural rather than typographic: iOS
   Safari zooms the viewport whenever a focused text field computes below 16px.
   At 15px, tapping any billing field on an iPhone zooms the checkout and leaves
   the customer horizontally scrolled on the form they have to complete to pay.
   Set unconditionally rather than inside a max-width media query — an iPhone in
   landscape reports a viewport well past any phone breakpoint and still zooms. */
.dxr-woo .woocommerce-billing-fields__field-wrapper input,
.dxr-woo .woocommerce-billing-fields__field-wrapper select,
.dxr-woo .select2-container .select2-selection--single,
.dxr-woo #customer_details .woocommerce-additional-fields__field-wrapper textarea {
  font-family: var(--dxr-font-sans);
  font-size: 16px;
  color: var(--dxr-ink);
  background: var(--dxr-surface);
  border: 1px solid var(--dxr-border-strong);
  border-radius: var(--dxr-radius-md);
}

.dxr-woo .woocommerce-billing-fields__field-wrapper input::placeholder,
.dxr-woo #customer_details .woocommerce-additional-fields__field-wrapper textarea::placeholder {
  color: var(--dxr-text-disabled);
}

.dxr-woo .woocommerce-billing-fields__field-wrapper input:focus,
.dxr-woo .woocommerce-billing-fields__field-wrapper select:focus,
.dxr-woo #customer_details .woocommerce-additional-fields__field-wrapper textarea:focus {
  border-color: var(--dxr-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--dxr-primary-tint);
}

.dxr-woo .checkout.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--dxr-ink);
  font-family: var(--dxr-font-sans);
}

/* style.css:2047 sets this colour with !important, so this one has to match. */
.dxr-woo .checkout.woocommerce-checkout .required {
  color: var(--dxr-primary) !important;
}

/* "* - Mandatory field" note under the billing panel. */
.dxr-woo #customer_details > div.col-1 > p {
  font-family: var(--dxr-font-sans);
  font-size: 13px;
  color: var(--dxr-text-muted);
}

/* Read-only email is dimmed by style.css:3969. */
.dxr-woo form.checkout.woocommerce-checkout input#billing_email {
  color: var(--dxr-text-muted);
}


/* --------------------------------------------------------------------------
   6. Order review + recurring totals
   (#order_review, woocommerce/checkout/recurring-totals.php).
   recurring-totals.php emits a bare <tr> fragment — nothing here wraps it or
   changes its display, which would hoist it out of the table.
   -------------------------------------------------------------------------- */
.dxr-woo #order_review table th,
.dxr-woo #order_review table td {
  font-family: var(--dxr-font-sans);
  font-size: 15px;
  color: var(--dxr-body);
}

.dxr-woo #order_review table th {
  font-family: var(--dxr-font-sans);
  font-weight: 600;
  color: var(--dxr-ink);
}

.dxr-woo .checkout.woocommerce-checkout #order_review table th,
.dxr-woo .checkout.woocommerce-checkout #order_review table td {
  border-top-color: var(--dxr-border-inner);
  border-bottom-color: var(--dxr-border-inner);
}

.dxr-woo .checkout.woocommerce-checkout #order_review table .cart-subtotal th,
.dxr-woo .checkout.woocommerce-checkout #order_review table .cart-subtotal td {
  font-family: var(--dxr-font-sans);
  color: var(--dxr-body);
}

.dxr-woo #order_review table .order-total th,
.dxr-woo #order_review table .order-total td {
  color: var(--dxr-ink);
  font-weight: 700;
}

/* "Recurring totals" heading row. "End of the trial period" is a sentence,
   so it is sans, not mono. */
.dxr-woo #order_review table tr.recurring-totals th {
  color: var(--dxr-ink);
  font-weight: 700;
}

.dxr-woo strong.recuu-text,
.dxr-woo strong.recuu-text.check-out {
  font-family: var(--dxr-font-sans);
  font-weight: 500;
  color: var(--dxr-text-muted);
}

.dxr-woo #order_review_heading a {
  color: var(--dxr-primary);
}


/* --------------------------------------------------------------------------
   7. Payment methods and place order (woocommerce/checkout/payment.php).
   No display rule here. The gateway list, the terms checkbox and #place_order
   keep their ids and classes — the enable-on-terms handler and the gateway JS
   both key on them.
   -------------------------------------------------------------------------- */
.dxr-woo #payment > ul > li > label {
  font-family: var(--dxr-font-sans);
  font-weight: 700;
  color: var(--dxr-ink);
  letter-spacing: -0.01em;
}

/* The subtitle is an absolutely positioned ::after at a fixed offset; its
   size and position are left alone so the two lines stay clear of each other. */
.dxr-woo #payment > ul > li > label:after {
  font-family: var(--dxr-font-sans);
  color: var(--dxr-body);
}

.dxr-woo.woocommerce-checkout #payment div.payment_box {
  background-color: var(--dxr-primary-tint);
  color: var(--dxr-body);
  font-family: var(--dxr-font-sans);
  font-size: 14px;
  line-height: 1.6;
  border-radius: var(--dxr-radius-md);
}

.dxr-woo.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--dxr-primary-tint);
}

.dxr-woo #order_review #payment .place-order .woocommerce-terms-and-conditions-wrapper {
  font-family: var(--dxr-font-sans);
  font-size: 15px;
  color: var(--dxr-body);
}

.dxr-woo #order_review #payment .place-order .woocommerce-terms-and-conditions-wrapper a {
  color: var(--dxr-primary);
}

/* width stays as declared: the button is display:flex/column, so width:auto
   would stretch it across the row. */
.dxr-woo #order_review #payment .form-row.place-order #place_order {
  font-family: var(--dxr-font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.005em;
  border: 1px solid var(--dxr-primary);
  border-radius: var(--dxr-radius-md);
  background: var(--dxr-primary);
  color: var(--dxr-on-dark);
  /* Its height comes from style.css and is unverified. min-height can only ever
     grow it, never shrink it, so this is a floor and not a geometry change. */
  min-height: 44px;
  transition: background-color .15s ease, border-color .15s ease;
}

.dxr-woo #order_review #payment .form-row.place-order #place_order:hover {
  background: var(--dxr-primary-hover);
  border-color: var(--dxr-primary-hover);
  color: var(--dxr-on-dark);
}

/* payment.php ships #place_order disabled until #terms is ticked. Legacy CSS
   gave that state no affordance at all. */
.dxr-woo #order_review #payment .form-row.place-order #place_order[disabled],
.dxr-woo #order_review #payment .form-row.place-order #place_order:disabled {
  background: var(--dxr-border-strong);
  border-color: var(--dxr-border-strong);
  color: var(--dxr-surface);
  cursor: not-allowed;
}

/* Coupon: BUTTON AND NOTICE COLOUR ONLY. Nothing here sets display,
   visibility, height or position — the production visibility fix at
   style.css:1984-1994 and the core slideToggle stay in charge. */
.dxr-woo .woocommerce-checkout-coupon-section button[name="apply_coupon"] {
  font-family: var(--dxr-font-sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--dxr-radius-md);
  border: 1px solid var(--dxr-border-strong);
  background: var(--dxr-surface);
  color: var(--dxr-ink);
}

.dxr-woo .woocommerce-checkout-coupon-section button[name="apply_coupon"]:hover {
  background: var(--dxr-surface-raised);
  border-color: var(--dxr-ink);
  color: var(--dxr-ink);
}

/* 16px for the same iOS auto-zoom reason as the billing fields above. */
.dxr-woo .woocommerce-checkout-coupon-section input#coupon_code {
  font-family: var(--dxr-font-sans);
  font-size: 16px;
  color: var(--dxr-ink);
  border: 1px solid var(--dxr-border-strong);
  border-radius: var(--dxr-radius-md);
  background: var(--dxr-surface);
}

/* Notices — colour only, again no display rules. */
.dxr-woo .woocommerce .woocommerce-info,
.dxr-woo .woocommerce .woocommerce-error,
.dxr-woo .woocommerce .woocommerce-message {
  font-family: var(--dxr-font-sans);
  font-size: 14px;
  color: var(--dxr-body);
  background: var(--dxr-surface-raised);
  border-top-color: var(--dxr-primary);
}

.dxr-woo .woocommerce .woocommerce-error {
  border-top-color: var(--dxr-red);
}

/* The checkout spinner, defined inline in form-checkout.php. */
.dxr-woo .paymentLoader {
  background: var(--dxr-primary);
}


/* --------------------------------------------------------------------------
   8. Order details (woocommerce/order/order-details.php) — thank-you page and
   view-order. Column headers are labels, so mono; the trial note is a
   sentence, so sans.
   -------------------------------------------------------------------------- */
.dxr-woo .woocommerce-order-details__title,
.dxr-woo .woocommerce-order-details h2 {
  font-family: var(--dxr-font-sans);
  font-weight: 700;
  color: var(--dxr-ink);
  letter-spacing: -0.01em;
}

.dxr-woo h2.woocommerce-order-details__title strong,
.dxr-woo h2 strong.trial-text,
.dxr-woo strong.trial-text.no-l-line {
  font-family: var(--dxr-font-sans);
  font-weight: 500;
  color: var(--dxr-text-muted);
}

.dxr-woo .woocommerce-table--order-details thead th {
  font-family: var(--dxr-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dxr-text-subtle);
  background: var(--dxr-surface-raised);
  border-bottom: 1px solid var(--dxr-border);
}

.dxr-woo .woocommerce-table--order-details tbody td,
.dxr-woo .woocommerce-table--order-details tbody th {
  font-family: var(--dxr-font-sans);
  font-size: 15px;
  color: var(--dxr-body);
  border-top-color: var(--dxr-border-inner);
}

.dxr-woo .woocommerce-table--order-details tfoot th {
  font-family: var(--dxr-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--dxr-body);
  border-top-color: var(--dxr-border-inner);
}

.dxr-woo .woocommerce-table--order-details tfoot td {
  font-family: var(--dxr-font-sans);
  font-size: 14px;
  color: var(--dxr-ink);
  border-top-color: var(--dxr-border-inner);
}

/* style.css:3963 makes the product link inert and black; keep it inert, take
   the new ink. */
.dxr-woo table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details .product-name a {
  color: var(--dxr-ink) !important;
}

.dxr-woo .woocommerce-table--order-details .product-quantity {
  font-family: var(--dxr-font-mono);
  color: var(--dxr-text-muted);
}


/* --------------------------------------------------------------------------
   9. My account — related orders and related subscriptions.
   (woocommerce/myaccount/related-orders.php, related-subscriptions.php)
   data-title attributes are what shop_table_responsive uses to label stacked
   cells on mobile; nothing here removes or reproduces them, and the stacking
   behaviour is left as the plugin ships it.
   -------------------------------------------------------------------------- */
.dxr-woo .woocommerce-MyAccount-content header h2,
.dxr-woo .woocommerce-MyAccount-content > h2 {
  font-family: var(--dxr-font-sans);
  font-weight: 700;
  color: var(--dxr-ink);
  letter-spacing: -0.01em;
}

.dxr-woo .woocommerce-orders-table thead th {
  font-family: var(--dxr-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dxr-text-subtle);
  background: var(--dxr-surface-raised);
  border-bottom: 1px solid var(--dxr-border);
}

.dxr-woo .woocommerce-orders-table tbody td {
  font-family: var(--dxr-font-sans);
  font-size: 15px;
  color: var(--dxr-body);
  border-top-color: var(--dxr-border-inner);
  vertical-align: middle;
}

/* Measured cells: order number, dates, next payment, totals. */
.dxr-woo .woocommerce-orders-table td.order-number,
.dxr-woo .woocommerce-orders-table td.subscription-id,
.dxr-woo .woocommerce-orders-table td.order-date,
.dxr-woo .woocommerce-orders-table td.subscription-next-payment,
.dxr-woo .woocommerce-orders-table td.order-total,
.dxr-woo .woocommerce-orders-table td.subscription-total {
  font-family: var(--dxr-font-mono);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--dxr-ink);
}

.dxr-woo .woocommerce-orders-table td.order-number a,
.dxr-woo .woocommerce-orders-table td.subscription-id a {
  font-family: var(--dxr-font-mono);
  font-weight: 500;
  color: var(--dxr-primary);
}

/* Status is a short label rather than a measurement, but it sits in a data
   column, so it takes the same label treatment as the header. */
.dxr-woo .woocommerce-orders-table td.order-status,
.dxr-woo .woocommerce-orders-table td.subscription-status {
  font-family: var(--dxr-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dxr-text-muted);
}

.dxr-woo .woocommerce-orders-table tr.woocommerce-orders-table__row--status-active td.subscription-status,
.dxr-woo .woocommerce-orders-table tr.woocommerce-orders-table__row--status-completed td.order-status {
  color: var(--dxr-green-status);
}

.dxr-woo .woocommerce-orders-table tr.woocommerce-orders-table__row--status-on-hold td.subscription-status,
.dxr-woo .woocommerce-orders-table tr.woocommerce-orders-table__row--status-pending td.order-status {
  color: var(--dxr-amber-deep);
}

.dxr-woo .woocommerce-orders-table tr.woocommerce-orders-table__row--status-cancelled td.subscription-status,
.dxr-woo .woocommerce-orders-table tr.woocommerce-orders-table__row--status-expired td.subscription-status,
.dxr-woo .woocommerce-orders-table tr.woocommerce-orders-table__row--status-failed td.order-status {
  color: var(--dxr-red);
}


/* --------------------------------------------------------------------------
   10. Stacked-table column labels — the mobile counterpart of the thead rules
   in sections 8 and 9.

   Below 768px shop_table_responsive hides <thead> and reprints each label
   through `td::before{content:attr(data-title)}`. That pseudo-element inherits
   the <td> rule, not the <th> one, so the mono/uppercase/subtle treatment this
   file establishes for column labels simply disappears: on a phone the label
   and the value are both sans 15px and typographically identical. This restores
   the distinction. Type and colour only — `float:left` and the ": " separator
   from the plugin are untouched, so nothing about the stacking changes.

   768px is WooCommerce's own responsive breakpoint, not a new one.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .dxr-woo .woocommerce table.shop_table_responsive tr td::before {
    font-family: var(--dxr-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dxr-text-subtle);
  }
}