/*
 * ULH — WooCommerce chrome.
 *
 * A stylesheet layered on WooCommerce's OWN DOM. No Woo template is overridden
 * and no markup is reimplemented; this file only dresses the cart, checkout,
 * and order-received screens in the ULH design tokens so the commerce funnel
 * matches the rest of the site.
 *
 * Enqueued only when ULH_Learning_Redesign::is_commerce_request() is true, and
 * hand-written rather than compiled: these are WooCommerce classnames, not
 * Tailwind utilities, so the build's `content` globs would never see them.
 *
 * Selectors are prefixed with body.ulh-commerce both to scope the file and to
 * outrank woocommerce-general.css regardless of enqueue order.
 *
 * HANDS OFF — do not add overflow / transform / contain / filter to
 * #wc-stripe-upe-form or .wc-stripe-upe-element: any of those creates a
 * containing block or clipping context that breaks the Stripe Payment Element
 * iframe. And never display:none #wc-stripe-hidden-style-input — the gateway
 * reads its computed styles to theme the iframe to match our inputs.
 *
 * Tokens (mirrors assets/build/tailwind.config.js):
 *   primary #a03f28 · secondary #516447 · tertiary-fixed-dim #f8bb73
 *   surface #fcf9f4 · surface-container-lowest #ffffff
 *   on-surface #1c1c19 · on-surface-variant #56423d · outline-variant #ddc0ba
 *   error #ba1a1a · error-container #ffdad6 · secondary-container #d0e6c2
 */

body.ulh-commerce {
  --ulh-primary: #a03f28;
  --ulh-on-primary: #ffffff;
  --ulh-secondary: #516447;
  --ulh-ochre: #f8bb73;
  --ulh-surface: #fcf9f4;
  --ulh-card: #ffffff;
  --ulh-card-low: #f6f3ee;
  --ulh-on-surface: #1c1c19;
  --ulh-on-surface-variant: #56423d;
  --ulh-outline: #ddc0ba;
  /* The house form/secondary-button stroke. `outline` (#8a726c) in the Tailwind
     config; --ulh-outline above is `outline-variant` (#ddc0ba) and stays where
     it is used, on table hairlines. */
  --ulh-outline-strong: #8a726c;
  /* `surface-variant` — the filled-field background every other ULH form uses
     (auth-student-registration.php, the contact and means-test forms). */
  --ulh-field-bg: #e5e2dd;
  --ulh-error: #ba1a1a;
  --ulh-error-bg: #ffdad6;
  --ulh-ok-bg: #d0e6c2;
  --ulh-shadow: 0 1px 2px rgba(86, 66, 61, 0.04), 0 12px 32px -4px rgba(86, 66, 61, 0.08);
  --ulh-radius: 0.75rem;

  /* WooCommerce theming hooks. woocommerce.css drives its own colours, form
     borders and radii off these custom properties (its stock --wc-primary is a
     purple, #720eec). Re-pointing them at the ULH palette recolours everything
     Woo paints from them without fighting a single selector. WooCommerce's own
     "--wc-highligh-text" typo is reproduced deliberately. */
  --wc-primary: #a03f28;
  --wc-primary-text: #ffffff;
  --wc-secondary: #f6f3ee;
  --wc-secondary-text: #56423d;
  --wc-highlight: #516447;
  --wc-highligh-text: #ffffff;
  --wc-content-bg: #ffffff;
  --wc-subtext: #56423d;
  --wc-green: #516447;
  --wc-red: #ba1a1a;
  --wc-destructive: #ba1a1a;
  --wc-form-border-color: #ddc0ba;
  --wc-form-border-width: 1px;
  --wc-form-border-radius: 0.625rem;
  --wc-card-border-radius: 0.75rem;
}

/* --------------------------- shell rules to restore ------------------------ */

/* woocommerce-layout.css ships a blanket `.woocommerce img, .woocommerce-page
   img { height: auto; max-width: 100% }`. Being class+element it outranks the
   single-class Tailwind utilities the ULH shell puts on its header logo, so on
   commerce pages the 1080px logo renders at full size and pushes the whole nav
   off screen. Re-assert the shell's own sizing at a specificity Woo can't beat.
   Same values as includes/class-ulh-renderer.php::marketing_shell (h-9 w-auto
   max-w-[10rem]) — keep them in sync. */
body.ulh-commerce nav a img {
  height: 2.25rem;
  width: auto;
  max-width: 10rem;
}

/* Woo's `img { height: auto }` is right for everything else; just make sure
   nothing in the shell footer overflows. */
body.ulh-commerce footer img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------- page frame ------------------------------- */

body.ulh-commerce .ulh-woo {
  padding: 2rem 1rem 4rem;
}

body.ulh-commerce .ulh-woo__inner {
  max-width: 68rem;
  margin: 0 auto;
}

body.ulh-commerce .ulh-woo__title {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ulh-on-surface);
  margin: 0 0 0.75rem;
}

/* Trust cues. /become-a-member/ carries the benefit cards, the fee explainer
   and the "Pay securely by card" line; dropping all of it one click later
   makes checkout read as riskier than the page that sent the buyer here. */
body.ulh-commerce .ulh-woo__lede {
  max-width: 44rem;
  margin: 0 0 1.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ulh-on-surface-variant);
}

body.ulh-commerce .ulh-woo__lede strong {
  color: var(--ulh-on-surface);
}

body.ulh-commerce .ulh-woo__assure {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--ulh-radius);
  background: var(--ulh-card-low);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ulh-on-surface-variant);
}

body.ulh-commerce .ulh-woo__assure p {
  margin: 0;
}

body.ulh-commerce .ulh-woo__assure p + p {
  margin-top: 0.5rem;
}

body.ulh-commerce .ulh-woo__assure-head {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-weight: 700;
  color: var(--ulh-on-surface);
}

body.ulh-commerce .ulh-woo__assure .material-symbols-outlined {
  font-size: 1.125rem;
}

body.ulh-commerce .ulh-woo h2,
body.ulh-commerce .ulh-woo h3,
body.ulh-commerce .ulh-woo #order_review_heading {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ulh-on-surface);
  font-size: 1.125rem;
  margin: 0 0 1rem;
}

/* Notices (.woocommerce-error / -message / -info) are NOT here: they were
   extracted to assets/css/ulh-notices.css so /donate/ — a redesign page, not a
   commerce page — can dress its rejected-amount errors in the house style too.
   See ULH_Learning_Redesign::enqueue_notice_styles(). */

/* --------------------------------- cards ---------------------------------- */

body.ulh-commerce .woocommerce-billing-fields,
body.ulh-commerce .woocommerce-shipping-fields,
body.ulh-commerce .woocommerce-additional-fields,
body.ulh-commerce #order_review,
body.ulh-commerce .cart_totals,
body.ulh-commerce .woocommerce-order-details,
body.ulh-commerce .woocommerce-customer-details,
body.ulh-commerce form.checkout_coupon,
body.ulh-commerce form.woocommerce-cart-form {
  background: var(--ulh-card);
  border-radius: var(--ulh-radius);
  box-shadow: var(--ulh-shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

body.ulh-commerce .woocommerce-billing-fields h3,
body.ulh-commerce .woocommerce-shipping-fields h3,
body.ulh-commerce .woocommerce-additional-fields h3 {
  margin-top: 0;
}

/* ------------------------------ checkout grid ------------------------------ */

/* woocommerce-layout.css ships a float clearfix on .col2-set —
   `.woocommerce .col2-set::after, ::before { content: " "; display: table }`.
   The moment #customer_details becomes a grid those pseudo-elements become
   GRID ITEMS: ::before takes cell 1, .col-1 (Billing details) is pushed into
   cell 2, .col-2 wraps to row 2, ::after takes cell 4. Kill them outright.
   form.checkout gets the same treatment because it becomes a grid below. */
body.ulh-commerce .woocommerce-checkout #customer_details::before,
body.ulh-commerce .woocommerce-checkout #customer_details::after,
body.ulh-commerce form.checkout::before,
body.ulh-commerce form.checkout::after {
  content: none;
  display: none;
}

/* Single column deliberately: the two-column split that used to live here has
   been replaced by the form/summary split below, which leaves the billing
   fields ~640px of the 68rem container — too narrow to halve again. */
body.ulh-commerce .woocommerce-checkout #customer_details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.5rem;
}

body.ulh-commerce .woocommerce-checkout #customer_details .col-1,
body.ulh-commerce .woocommerce-checkout #customer_details .col-2 {
  float: none;
  width: auto;
  min-width: 0;
}

/* Desktop checkout: form on the left, order summary in a narrow sticky rail on
   the right, so the buyer keeps sight of what they are paying for while they
   fill the form — and #place_order stays a button rather than a 968px bar.
   #customer_details spans both rows, which is what gives the sticky rail the
   scroll room it needs. Below 1000px everything stays in one column. */
@media (min-width: 1000px) {
  body.ulh-commerce form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    gap: 0 2rem;
    align-items: start;
  }
  /* Anything an extension injects as a direct child spans the full width
     rather than landing in an arbitrary cell. */
  body.ulh-commerce form.checkout > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  /* Row 1 holds the "Your order" heading alone; row 2 holds both cards. Rows
     are assigned explicitly rather than letting #customer_details span them:
     a spanning item's surplus height is split evenly across the tracks it
     crosses, which pushed the summary card ~280px down the page. Row 2 is
     sized by the (much taller) billing column, which is exactly the scroll
     room the sticky summary needs. */
  body.ulh-commerce form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 1;
  }
  body.ulh-commerce form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 2;
  }
  body.ulh-commerce form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 6rem;
  }
}

/* -------------------------------- form fields ------------------------------ */

body.ulh-commerce .woocommerce form .form-row {
  padding: 0;
  margin: 0 0 1rem;
}

body.ulh-commerce .form-row label,
body.ulh-commerce .woocommerce-billing-fields label,
body.ulh-commerce .woocommerce-shipping-fields label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ulh-on-surface-variant);
  margin-bottom: 0.375rem;
}

body.ulh-commerce .form-row label.checkbox,
body.ulh-commerce .form-row .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--ulh-on-surface);
}

body.ulh-commerce .required {
  color: var(--ulh-primary);
  text-decoration: none;
}

/* The Material "filled" field every other ULH form wears — surface-variant
   fill, 2px outline UNDER the field only, top-rounded, rust on focus. Copied
   from auth-student-registration.php's utility stack (bg-surface-variant
   border-b-2 border-outline rounded-t-md px-4 py-3 focus:border-primary
   focus:ring-0) so /checkout/ and /login/ read as the same product.
   #wc-stripe-hidden-style-input is an <input type="text" class="input-text">,
   so it is styled by these same rules — which is how the Stripe Payment
   Element iframe picks the treatment up automatically.

   The long selectors are not decoration: woocommerce.css styles fields as
   `.woocommerce form .form-row .input-text` (0,4,1), which outranks a plain
   `body.ulh-commerce .input-text` (0,2,0) and would keep Woo's 4px radius and
   near-black border. Each selector in a list carries its own specificity, so
   listing the deep form-row variants alongside the short ones lets the same
   declarations win wherever Woo's rule reaches. */
body.ulh-commerce .input-text,
body.ulh-commerce input[type="text"],
body.ulh-commerce input[type="email"],
body.ulh-commerce input[type="tel"],
body.ulh-commerce input[type="password"],
body.ulh-commerce input[type="number"],
body.ulh-commerce textarea,
body.ulh-commerce select,
body.ulh-commerce .woocommerce form .form-row .input-text,
body.ulh-commerce .woocommerce form .form-row select,
body.ulh-commerce .woocommerce form .form-row textarea,
body.ulh-commerce .select2-container .select2-selection--single {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ulh-on-surface);
  background: var(--ulh-field-bg);
  border: 0;
  border-bottom: 2px solid var(--ulh-outline-strong);
  border-radius: 0.375rem 0.375rem 0 0;
  padding: 0.75rem 1rem;
  height: auto;
  transition: border-color 0.15s ease;
}

body.ulh-commerce textarea {
  min-height: 6rem;
}

body.ulh-commerce .input-text:focus,
body.ulh-commerce input[type="text"]:focus,
body.ulh-commerce input[type="email"]:focus,
body.ulh-commerce input[type="tel"]:focus,
body.ulh-commerce textarea:focus,
body.ulh-commerce select:focus,
body.ulh-commerce .woocommerce form .form-row .input-text:focus,
body.ulh-commerce .woocommerce form .form-row select:focus,
body.ulh-commerce .woocommerce form .form-row textarea:focus {
  outline: none;
  border-bottom-color: var(--ulh-primary);
  box-shadow: none;
}

body.ulh-commerce .woocommerce form .form-row.woocommerce-invalid .input-text,
body.ulh-commerce .woocommerce form .form-row.woocommerce-invalid select {
  border-bottom-color: var(--ulh-error);
}

body.ulh-commerce .woocommerce form .form-row.woocommerce-validated .input-text {
  border-bottom-color: var(--ulh-secondary);
}

/* Select2 (country / state) — match the plain inputs. */
body.ulh-commerce .select2-container--default .select2-selection--single {
  border: 0;
  border-bottom: 2px solid var(--ulh-outline-strong);
  border-radius: 0.375rem 0.375rem 0 0;
  height: auto;
  padding: 0.625rem 0.5rem;
  background: var(--ulh-field-bg);
}

body.ulh-commerce .select2-container--default.select2-container--open .select2-selection--single,
body.ulh-commerce .select2-container--default.select2-container--focus .select2-selection--single {
  border-bottom-color: var(--ulh-primary);
}

body.ulh-commerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ulh-on-surface);
  line-height: 1.5;
  padding-left: 0.375rem;
}

/* --------------------------------- coupon ---------------------------------- */

body.ulh-commerce .woocommerce-form-coupon-toggle .woocommerce-info {
  border-left-color: var(--ulh-secondary);
}

body.ulh-commerce form.checkout_coupon .form-row,
body.ulh-commerce .cart .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  width: auto;
  float: none;
}

body.ulh-commerce form.checkout_coupon #coupon_code,
body.ulh-commerce .cart #coupon_code {
  flex: 1 1 12rem;
  width: auto;
}

/* --------------------------------- tables ---------------------------------- */

body.ulh-commerce table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
}

body.ulh-commerce table.shop_table th,
body.ulh-commerce table.shop_table td {
  border: 0;
  border-bottom: 1px solid rgba(221, 192, 186, 0.55);
  padding: 0.875rem 0.5rem;
  text-align: left;
  vertical-align: middle;
  color: var(--ulh-on-surface);
}

body.ulh-commerce table.shop_table thead th {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ulh-on-surface-variant);
}

/* Right-align the MONEY CELLS, not `.amount` — that is an inline <span>, so
   text-align on it moves nothing. The tfoot cells (Subtotal / Total) carry no
   class at all, hence the tfoot th/td and .cart_totals entries; without them
   the line-item price and the Total sit ~300px apart on desktop. */
body.ulh-commerce table.shop_table td.product-total,
body.ulh-commerce table.shop_table th.product-total,
body.ulh-commerce table.shop_table td.product-subtotal,
body.ulh-commerce table.shop_table th.product-subtotal,
body.ulh-commerce table.shop_table td.product-price,
body.ulh-commerce table.shop_table th.product-price,
body.ulh-commerce table.shop_table tfoot th,
body.ulh-commerce table.shop_table tfoot td,
body.ulh-commerce .cart_totals table th,
body.ulh-commerce .cart_totals table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* …but the tfoot / totals LABEL column stays left, so each row reads
   label-left, money-right. */
body.ulh-commerce table.shop_table tfoot th,
body.ulh-commerce .cart_totals table th {
  text-align: left;
}

body.ulh-commerce table.shop_table tfoot th,
body.ulh-commerce table.shop_table tfoot td {
  font-weight: 700;
}

body.ulh-commerce table.shop_table tfoot tr.order-total th,
body.ulh-commerce table.shop_table tfoot tr.order-total td {
  border-bottom: 0;
  font-size: 1.0625rem;
  color: var(--ulh-primary);
}

body.ulh-commerce table.shop_table tr:last-child td,
body.ulh-commerce table.shop_table tr:last-child th {
  border-bottom: 0;
}

body.ulh-commerce .product-thumbnail img {
  width: 3rem;
  height: auto;
  border-radius: 0.5rem;
}

body.ulh-commerce a.remove {
  color: var(--ulh-primary) !important;
  font-size: 1.25rem;
  line-height: 1;
}

body.ulh-commerce a.remove:hover {
  background: var(--ulh-primary);
  color: #fff !important;
}

/* ------------------------------ payment block ------------------------------ */

body.ulh-commerce #payment,
body.ulh-commerce #payment.woocommerce-checkout-payment {
  background: var(--ulh-card-low);
  border-radius: var(--ulh-radius);
  padding: 1.25rem;
  margin-top: 1.25rem;
}

body.ulh-commerce #payment ul.wc_payment_methods,
body.ulh-commerce ul.wc_payment_methods.payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

/* The row is the tap target. Padding lives on the LABEL (which fills the row)
   rather than on the li, so the whole card selects the method — a label that
   only wraps its own text gives a ~47x30px hit area on the single most
   important choice on the page, well under the 44x44 minimum. */
body.ulh-commerce ul.wc_payment_methods li.wc_payment_method {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--ulh-card);
  border-radius: 0.625rem;
  padding: 0 1rem;
  margin: 0 0 0.625rem;
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

/* Same story as .col2-set: woocommerce.css clearfixes each payment-method li
   with `::before/::after { content: " "; display: table }`, and those become
   FLEX ITEMS once the li is a flex row, eating a couple of px off the label. */
body.ulh-commerce ul.wc_payment_methods li.wc_payment_method::before,
body.ulh-commerce ul.wc_payment_methods li.wc_payment_method::after {
  content: none;
  display: none;
}

body.ulh-commerce ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--ulh-primary);
}

body.ulh-commerce ul.wc_payment_methods li.wc_payment_method > label {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 3rem;
  padding: 0.875rem 0 0.875rem 0.625rem;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ulh-on-surface);
  margin: 0;
  cursor: pointer;
}

body.ulh-commerce ul.wc_payment_methods li.wc_payment_method input[type="radio"] {
  flex: none;
  accent-color: var(--ulh-primary);
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
}

body.ulh-commerce ul.wc_payment_methods li.wc_payment_method .payment_box {
  flex: 1 0 100%;
  background: transparent;
  color: var(--ulh-on-surface-variant);
  font-size: 0.875rem;
  margin: 0;
  padding: 0 0 0.875rem;
}

/* @tailwindcss/forms (assets/build/tailwind.config.js plugins) sets
   appearance:none on radios/checkboxes and paints the checked state with
   `background-color: currentColor` off its own `color: #2563eb` — so
   accent-color alone leaves Tailwind blue on the payment selector and the
   required terms checkbox. Drive `color` instead; the plugin's checked fill
   and its focus ring both derive from it. accent-color stays as the fallback
   for any control the UA still renders itself. */
body.ulh-commerce input[type="radio"],
body.ulh-commerce input[type="checkbox"] {
  color: var(--ulh-primary);
  border-color: var(--ulh-outline-strong);
  accent-color: var(--ulh-primary);
  --tw-ring-color: var(--ulh-primary);
}

body.ulh-commerce ul.wc_payment_methods li.wc_payment_method .payment_box::before {
  content: none;
}

/* Terms & conditions — Woo inlines our /terms-and-conditions/ page here.
   ULH_Renderer renders it "bare" (no nested nav/footer); keep the panel plain
   and scrollable so it can never look like a second page. */
body.ulh-commerce .woocommerce-terms-and-conditions {
  background: var(--ulh-surface);
  border-radius: 0.625rem;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--ulh-on-surface-variant);
}

body.ulh-commerce .woocommerce-terms-and-conditions .fixed,
body.ulh-commerce .woocommerce-terms-and-conditions nav {
  position: static !important;
}

/* --------------------------------- buttons --------------------------------- */

/* DEFAULT = the house SECONDARY pill (border-outline / on-surface text, no
   fill, no shadow — membership-become.php:174,185). Rust is reserved for the
   one primary action on the screen; painting every Woo button rust put a
   solid-rust "View basket" inside the added-to-basket notice and a rust
   "Login" in the returning-customer form, both indistinguishable from
   #place_order. Update cart / Apply coupon inherit this too.
   #place_order is targeted BY ID: TutorStarter filters
   woocommerce_order_button_html into an <input type="submit">, and WooCommerce
   core ships custom-place-order-button.js which lets a gateway swap the element
   entirely — so never rely on the tag name or on .button.alt alone. */
body.ulh-commerce #place_order,
body.ulh-commerce .woocommerce #place_order,
body.ulh-commerce .woocommerce a.button,
body.ulh-commerce .woocommerce button.button,
body.ulh-commerce .woocommerce input.button,
body.ulh-commerce .woocommerce a.button.alt,
body.ulh-commerce .woocommerce button.button.alt,
body.ulh-commerce .woocommerce input.button.alt,
body.ulh-commerce .wc-proceed-to-checkout a.checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ulh-on-surface);
  background: transparent;
  border: 1px solid var(--ulh-outline-strong);
  border-radius: 9999px;
  padding: 0.875rem 1.75rem;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

body.ulh-commerce #place_order:hover,
body.ulh-commerce .woocommerce a.button:hover,
body.ulh-commerce .woocommerce button.button:hover,
body.ulh-commerce .woocommerce input.button:hover,
body.ulh-commerce .woocommerce a.button.alt:hover,
body.ulh-commerce .woocommerce button.button.alt:hover,
body.ulh-commerce .woocommerce input.button.alt:hover,
body.ulh-commerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--ulh-card-low);
  color: var(--ulh-on-surface);
}

/* PRIMARY — the one rust pill per screen: Place order, and Proceed to
   checkout on the cart. Both selectors are written a class deeper than their
   counterparts in the group above so the fill, the shadow and the 56px height
   actually land (a bare `body.ulh-commerce #place_order` at (1,1,1) loses
   everything but `width` to `body.ulh-commerce .woocommerce #place_order`). */
body.ulh-commerce .woocommerce #place_order,
body.ulh-commerce .woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  min-height: 3.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  color: var(--ulh-on-primary);
  background: var(--ulh-primary);
  border: 0;
  box-shadow: var(--ulh-shadow);
}

body.ulh-commerce .woocommerce #place_order:hover,
body.ulh-commerce .woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--ulh-primary);
  color: var(--ulh-on-primary);
  opacity: 0.9;
}

body.ulh-commerce .form-row.place-order {
  padding: 0;
  margin: 1rem 0 0;
}

/* Woo ships `.woocommerce-checkout #payment div.form-row { padding: 1em }`
   (0,2,1) — enough to reinstate a gutter around the CTA. Match its depth. */
body.ulh-commerce .woocommerce-checkout #payment div.form-row.place-order {
  padding: 0;
}

body.ulh-commerce .woocommerce button.button:disabled,
body.ulh-commerce .woocommerce button.button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ----------------------------------- cart ---------------------------------- */

body.ulh-commerce .woocommerce .cart-collaterals,
body.ulh-commerce .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}

@media (min-width: 900px) {
  body.ulh-commerce .cart-collaterals {
    display: flex;
    justify-content: flex-end;
  }
  body.ulh-commerce .cart-collaterals .cart_totals {
    max-width: 26rem;
  }
}

body.ulh-commerce .cart_totals h2 {
  margin-top: 0;
}

body.ulh-commerce .wc-proceed-to-checkout {
  padding: 0.5rem 0 0;
}

body.ulh-commerce .cart-empty,
body.ulh-commerce .return-to-shop {
  text-align: left;
}

/* ------------------------------ order received ----------------------------- */

body.ulh-commerce .woocommerce-order p,
body.ulh-commerce .woocommerce-thankyou-order-received {
  font-size: 1.0625rem;
  color: var(--ulh-on-surface);
}

body.ulh-commerce ul.woocommerce-order-overview,
body.ulh-commerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--ulh-card);
  border-radius: var(--ulh-radius);
  box-shadow: var(--ulh-shadow);
}

body.ulh-commerce ul.woocommerce-order-overview li,
body.ulh-commerce ul.order_details li {
  flex: 1 1 9rem;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ulh-on-surface-variant);
}

body.ulh-commerce ul.woocommerce-order-overview li strong,
body.ulh-commerce ul.order_details li strong {
  display: block;
  margin-top: 0.375rem;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ulh-on-surface);
}

/* The plugin's own woocommerce_thankyou notices (ULH_Membership and
   ULH_Lesson_Payments). They render as .woocommerce-message so they inherit the
   notice treatment above; only the CTA needs its own pill — it is the primary
   next step on the page, so it keeps the rust. */
body.ulh-commerce .ulh-thankyou {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

body.ulh-commerce .woocommerce-message a.ulh-thankyou__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ulh-on-primary);
  background: var(--ulh-primary);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  box-shadow: var(--ulh-shadow);
}

body.ulh-commerce .woocommerce-message a.ulh-thankyou__cta:hover {
  opacity: 0.9;
}

body.ulh-commerce .woocommerce-customer-details address {
  border: 0;
  padding: 0;
  font-style: normal;
  color: var(--ulh-on-surface-variant);
}

/* --------------------------------- Stripe ---------------------------------- */

/* Give the Payment Element room to breathe. Layout only — no overflow,
   transform, contain or filter, which would break the mounted iframe. */
body.ulh-commerce #wc-stripe-upe-form,
body.ulh-commerce fieldset.wc-payment-form {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body.ulh-commerce .wc-stripe-upe-element {
  margin: 0.5rem 0 0;
}

/* #wc-stripe-upe-errors is role="alert" and carries every card-entry failure
   ("Your card number is incomplete", declines) — the one error state a buyer
   will actually hit. Unstyled it reads as body copy. :not(:empty) so the
   empty container adds no spacing on load. Safe here: this is a SIBLING of
   .wc-stripe-upe-element, not an ancestor, so no containing block is created
   around the mounted iframe (no overflow / transform / contain below). */
body.ulh-commerce #wc-stripe-upe-errors:not(:empty) {
  margin-top: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  background: var(--ulh-error-bg);
  color: #93000a;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ------------------------------- small screens ----------------------------- */

@media (max-width: 640px) {
  body.ulh-commerce .ulh-woo {
    padding: 1.5rem 0.875rem 3rem;
  }
  body.ulh-commerce .woocommerce-billing-fields,
  body.ulh-commerce .woocommerce-shipping-fields,
  body.ulh-commerce .woocommerce-additional-fields,
  body.ulh-commerce #order_review,
  body.ulh-commerce .cart_totals,
  body.ulh-commerce .woocommerce-order-details,
  body.ulh-commerce .woocommerce-customer-details,
  body.ulh-commerce form.woocommerce-cart-form {
    padding: 1.125rem;
  }
  /* Reclaim the horizontal chrome around the CTA. .ulh-woo + #order_review +
     #payment + Woo's own `#payment div.form-row { padding: 1em }` stacked up
     to 136px of a 375px screen, leaving #place_order a 239px centred pill
     instead of the full-bleed button. Dropping #payment's own side padding
     takes the CTA out to the card's inner edge — the only chrome left is the
     page gutter and #order_review's card padding, which every other card on
     the site keeps too. */
  body.ulh-commerce #payment,
  body.ulh-commerce #payment.woocommerce-checkout-payment {
    padding: 1rem 0;
  }
}

/* Woo's responsive cart table swaps to a stacked layout via data-title. */
@media (max-width: 768px) {
  body.ulh-commerce table.shop_table_responsive tr td {
    text-align: right;
  }
  body.ulh-commerce table.shop_table_responsive tr td::before {
    color: var(--ulh-on-surface-variant);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}