/* =====================================================================
   BOOM shop UI  (wp-content/themes/pro-child/css/boom-shop-ui.css)
   Enqueued per document via Cornerstone "Custom Assets" on:
     - page 32 (checkout, incl. order-received and order-pay endpoints)
     - layout 587349 (My Account)
   Tokens (--bg-color, --stroke-color, fonts, --cko-*) come from a small
   block in the Cornerstone Global CSS, so Global Colors stay linked.
   Sections: form fields, notices, buttons, SelectWoo, payment cards,
   order components (thank-you + My Account), My Account specifics.
   ===================================================================== */

/* ---- Form fields (checkout, My Account forms, login) ---- */
@scope (body.woocommerce-page div.woocommerce) {
  input[type=checkbox] {
    width: 24px !important;
    height: 24px !important;
    border-radius: 2px;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  select, textarea {
    width: 100%;
    background-color: var(--dark-bg-color) !important;
    border: 1px solid var(--stroke-color) !important;
    border-radius: 4px !important;
    padding: 12px !important;
  }
  input::placeholder, textarea::placeholder {
    color: var(--stroke-color) !important;
    opacity: 1;   /* Firefox dims placeholders by default */
  }
  .input-text:focus, textarea:focus, select:focus, .input-text:focus-visible {
    outline: none;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 0.5px var(--light-text-color);
  }
  /* field labels only (p.form-row); payment-method labels and checkbox
     labels (terms, remember me, create account) keep their own look */
  .form-row label {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: uppercase;
  }
  .form-row label.woocommerce-form__label-for-checkbox { text-transform: none; }
  span.required, abbr.required { color: var(--red-color); }

  /* password field with the show/hide toggle inside it (login/register in My Account, create-account
     password in the checkout; WooCommerce adds the button by JS) */
  .password-input {
    position: relative;
    display: block;
  }
  .password-input input { padding-right: 48px !important; }
  .password-input .show-password-input {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 2px;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: var(--dark-text-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat;
  }
  .password-input .show-password-input::after { content: none; }
  .password-input .show-password-input:hover,
  .password-input .show-password-input.display-password {
    background-color: var(--light-text-color);
  }
  .password-input .show-password-input.display-password {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
  }
  .password-input .show-password-input:focus-visible {
    outline: 2px solid var(--light-text-color);
    outline-offset: 2px;
  }

  .form-row { margin: 0; float: none; width: auto; }
  .checkout-inline-error-message, .woocommerce-error * {
    color: var(--red-color);
  }
  .checkout-inline-error-message a:hover, .woocommerce-error a:hover {
    color: var(--dark-red-color);
  }

  /* Checkbox rows (label.checkbox wraps input + loose text + <strong>):
     no flex/grid here, that would split the text into separate items.
     The label stays a normal block with a left inset; the box sits
     absolutely at the left, vertically centred on the label. */
  .form-row label.checkbox,
  .form-row label.woocommerce-form__label-for-checkbox {
    display: block;
    position: relative;
    padding-left: 36px;          /* 24px box + 12px gap */
    /* single-line text sits centred on the 24px box; on two lines the
       small top padding stays and the box centres on the block */
    padding-top: max(0px, calc((24px - 1.4em) / 2));
    min-height: 24px;
    box-sizing: border-box;
    text-transform: none;
    line-height: 1.4;
    cursor: pointer;
  }
  .form-row label.checkbox input[type=checkbox],
  .form-row label.woocommerce-form__label-for-checkbox input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
  }

  /* ---- Notices and toggles as cards ---- */
  .woocommerce-notices-wrapper:empty,
  .wdr-gifts-notice-container:empty { display: none; }
  .woocommerce-notices-wrapper:not(:empty),
  .wdr-gifts-notice-container:not(:empty),
  .woocommerce-form-coupon-toggle,
  .woocommerce-form-login-toggle,
  .woocommerce-info,
  .woocommerce-message,
  .woocommerce-error {
    border: 1px solid var(--stroke-color) !important;
    border-radius: 4px;
    padding: 12px 20px !important;
    margin: 0 0 12px;
    background-color: var(--bg-color);
    list-style: none;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }
  /* a notice inside a wrapper card: no second frame */
  .woocommerce-notices-wrapper .woocommerce-info,
  .woocommerce-notices-wrapper .woocommerce-message,
  .woocommerce-notices-wrapper .woocommerce-error,
  .woocommerce-form-coupon-toggle .woocommerce-info,
  .woocommerce-form-login-toggle .woocommerce-info {
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
    background: transparent;
  }
  .woocommerce-error, .woocommerce-error li { color: var(--red-color); }
  .woocommerce-info a:not(.button), .woocommerce-message a:not(.button),
  .woocommerce-form-coupon-toggle a, .woocommerce-form-login-toggle a {
    font-weight: 700;
    color: var(--red-color);
    text-decoration: none;
  }
  .woocommerce-info a:not(.button):hover,
  .woocommerce-message a:not(.button):hover,
  
  .woocommerce-form-coupon-toggle a:hover, .woocommerce-form-login-toggle a:hover {
    color: var(--dark-red-color);
  }
  /* notice with a button ("Browse products", "Add payment method") */
  .woocommerce-info .button, .woocommerce-message .button { margin-left: 12px; }

  /* ---- Buttons ---- */
  .button, a.button, button.button {
    display: inline-block;
    padding: 8px 14px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 2px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
  }
  .button:hover, a.button:hover, button.button:hover {
    background: #ffffff20;
    color: #fff;
  }
  /* primary (red): place order, change payment, add payment, save, login */
  button#place_order, input#place_order,
  .woocommerce-form-login__submit,
  .woocommerce-EditAccountForm button.button,
  .woocommerce-address-fields ~ p button.button,
  form.edit-account button.button,
  form.woocommerce-verify-email button.button {
    background-color: var(--red-color);
    color: #FFF;
    border: 0;
    border-radius: 2px;
    padding: 14px 24px;
    font-family: var(--font-heading);
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
  }
  button#place_order, input#place_order { width: 100%; }
  .woocommerce-form-login__submit,
  .woocommerce-EditAccountForm button.button,
  form.edit-account button.button,
  form.woocommerce-verify-email button.button {
    font-size: 16px;
    padding: 12px 24px;
  }
  button#place_order:hover, input#place_order:hover,
  .woocommerce-form-login__submit:hover,
  .woocommerce-EditAccountForm button.button:hover,
  form.edit-account button.button:hover,
  form.woocommerce-verify-email button.button:hover {
    background-color: var(--dark-red-color);
  }
}

/* ===== Checkout: SelectWoo/Select2 widgets styled like the text inputs =====
   WooCommerce replaces <select> (country, state) with SelectWoo after load.
   Source of the white look: woocommerce/assets/css/select2.css.
   The dropdown panel is appended to <body>, so these rules must stay global
   (not inside @scope (#customer_details)). Adjust the tokens to your inputs. */


/* Container: full width of the .form-row */
.woocommerce-page .select2-container {
  width: 100% !important;
  font: var(--cko-field-font);
}

/* The closed control */
.woocommerce-page .select2-container--default .select2-selection--single {
  height: var(--cko-field-height);
  background: var(--dark-bg-color);
  border: 1px solid var(--stroke-color);
  border-radius: var(--cko-field-radius);
  outline: none;
}
.woocommerce-page .select2-container--default
  .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--cko-field-height) - 4px);
  padding-left: var(--cko-field-pad-x);
  padding-right: 32px;
  color: var(--cko-field-color);
}
.woocommerce-page .select2-container--default
  .select2-selection--single .select2-selection__arrow {
  height: calc(var(--cko-field-height) - 4px);
  right: 6px;
}
.woocommerce-page .select2-container--default
  .select2-selection--single .select2-selection__arrow b {
  border-color: var(--cko-field-color) transparent transparent transparent;
}
.woocommerce-page .select2-container--default.select2-container--open
  .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--cko-field-color) transparent;
}
.woocommerce-page .select2-container--default.select2-container--focus
  .select2-selection--single,
.woocommerce-page .select2-container--default.select2-container--open
  .select2-selection--single {
  border-color: var(--cko-field-color-active);
}

/* Open dropdown (lives directly under <body>) */
.select2-container--default .select2-dropdown {
  background: var(--cko-dropdown-bg);
  border: 1px solid var(--stroke-color);
  border-radius: var(--cko-field-radius);
  color: var(--cko-field-color-active);
  font: var(--cko-field-font);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--dark-bg-color);
  border: 1px solid var(--stroke-color);
  color: var(--cko-field-color-active);
  padding: 6px var(--cko-field-pad-x);
  outline: none;
}
.select2-container--default .select2-results__option {
  padding: 8px var(--cko-field-pad-x);
  color: var(--cko-field-color-active);
}
.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default
  .select2-results__option--highlighted[data-selected] {
  background: var(--cko-dropdown-hover);
  color: var(--cko-field-color-active);
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--dark-bg-color);
}

/* ===== Payment methods: cards with custom radio =====
   Shared by checkout, order-pay, subscription-payment-method and
   my-account/add-payment-method: div#payment > ul.payment_methods > li
   > input + label + .payment_box in all four. */
@scope (div#payment) {
  li.payment_method_braintree_paypal { display: none !important; }

  ul.payment_methods {
    --pm-gap: 12px;
    --pm-radius: 4px;
    --pm-pad-x: 20px;
    --pm-pad-y: 18px;
    --pm-radio-size: 22px;
    --pm-radio-gap: 14px;
    --pm-label-inset: calc(var(--pm-pad-x) + var(--pm-radio-size) + var(--pm-radio-gap));
    --pm-bg: #e5e5e5;          /* selected */
    --pm-bg-active: #ffffff;   /* not selected */
    --pm-text: #111111;
    --pm-muted: #8a8a8a;
    --pm-radio: #111111;
    --pm-radio-active: #ff2d2d;

    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pm-gap);
  }

  /* Card: row 1 = label over full width (radio on top). Everything else
     follows in DOM order, one row each (grid auto-placement). Gateways inject
     more than the payment box: the Checkout.com toggle mu-plugin adds the
     "Saved card / New card" buttons, the saved-cards accordion and the
     save-card box at li level. Pinning them to fixed rows stacked them in
     one cell. */
  ul.payment_methods > li {
    display: grid;
    grid-template-columns: var(--pm-radio-size) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--pm-radio-gap);
    align-items: center;
    margin: 0;
    /* !important: braintree.min.css sets padding 10px 0 on
       ul.payment_methods li[class*="payment_method"] (higher specificity) */
    padding: 0 !important;
    background: var(--pm-bg);
    border-radius: var(--pm-radius);
    color: var(--pm-text);
    list-style: none;
  }
  ul.payment_methods > li:has(input:checked) {
    background: var(--pm-bg-active);
  }

  /* Radio: own circle, same grid area as the label, on top of it */
  ul.payment_methods > li > input.input-radio {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    justify-self: start;
    align-self: center;
    appearance: none;
    -webkit-appearance: none;
    width: var(--pm-radio-size);
    height: var(--pm-radio-size);
    margin: 0 0 0 var(--pm-pad-x) !important;
    border: 2px solid var(--pm-radio);
    border-radius: 50% !important;
    background: var(--pm-radio);
    cursor: pointer;
  }
  ul.payment_methods > li > input.input-radio:checked {
    border-color: var(--pm-radio-active);
    background: radial-gradient(circle, var(--pm-radio-active) 55%, #fff 58%);
  }
  ul.payment_methods > li > input.input-radio:focus-visible {
    outline: 2px solid var(--pm-radio-active);
    outline-offset: 3px;
  }

  /* Label: spans the whole header row, name left, logos right */
  ul.payment_methods > li > label {
    grid-column: 1 / -1;
    grid-row: 1;
    font-family: inherit;
    font-size: inherit;
    text-transform: none;
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0;
    /* !important: braintree.min.css sets padding 0 on "input + label" with higher specificity */
    padding-top: var(--pm-pad-y) !important;
    padding-right: var(--pm-pad-x) !important;
    padding-bottom: var(--pm-pad-y) !important;
    padding-left: var(--pm-label-inset) !important;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
  }
  ul.payment_methods label > img,
  ul.payment_methods label > .cko-flow-method-icons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  ul.payment_methods label img {
    height: 24px;
    width: auto;
    max-width: 120px;
    display: block;
  }

  /* Expanded content: own row below the label, inputs stay usable */
  ul.payment_methods > li > .payment_box {
    grid-column: 1 / -1;
    /* !important: flow.css sets width:100% and margin:0 on the CKO container */
    width: auto !important;
    max-width: 100%;
    margin: 0 var(--pm-pad-x) var(--pm-pad-y) !important;
    padding: 0 !important;
    background: transparent;
    color: var(--pm-muted);
    font-weight: 400;
  }
  ul.payment_methods .payment_box p {
    margin: 0;
    color: var(--pm-muted);
  }
  /* Braintree and Flow containers without extra gap */
  ul.payment_methods .payment_box .wc-braintree-payment-gateway,
  ul.payment_methods #flow-container > div {
    margin: 0;
  }

  /* Anything else a gateway injects into the li: full width, same side
     inset as the payment box, in DOM order */
  ul.payment_methods > li > :not(input.input-radio):not(label):not(.payment_box) {
    grid-column: 1 / -1;
    margin: 0 var(--pm-pad-x) var(--pm-pad-y);
  }

  /* Checkout.com: "Saved card / New card" toggle. The id in the selector is
     needed to beat the mu-plugin's own #cko-pmtoggle margin. */
  ul.payment_methods > li > #cko-pmtoggle {
    margin: 0 var(--pm-pad-x) 16px;
  }

  /* Checkout.com: "Save card for future purchases". The plugin sets its
     margin inline (12px 0) and the toggle mu-plugin adds
     #payment .cko-save-card-checkbox { margin-left: 0 !important }, so this
     needs !important and an id for specificity. Same inset as the form above. */
  ul.payment_methods > li > #flow-container ~ .cko-save-card-checkbox,
  ul.payment_methods > li > .cko-save-card-checkbox {
    width: auto !important;
    margin: 0 var(--pm-pad-x) var(--pm-pad-y) !important;
    box-sizing: border-box;
  }
  .cko-save-card-checkbox .woocommerce-SavedPaymentMethods-saveNew input,
  .cko-save-card-checkbox .woocommerce-SavedPaymentMethods-saveNew label {
    vertical-align: middle;
  }
  .cko-save-card-checkbox .woocommerce-SavedPaymentMethods-saveNew label {
    margin: 0 !important;
    cursor: pointer;
  }
}

/* ===== Heading above the payment methods (boom-cart-checkout-ui.php, E) ===== */
.boom-payment-heading {
  margin: 32px 0 16px;
  font-size: 24px;
  line-height: 1.2;
}

/* ===== Shipping options (checkout review table, cart totals) =====
   ul.woocommerce-shipping-methods > li > input.shipping_method + label.
   Left-aligned in the value cell, no bullets, own radio in --red-color.
   The recurring-totals rows of WooCommerce Subscriptions use the same list. */
/* only the cell that holds the option list; the recurring "Shipping via …"
   row is a plain amount cell and stays right-aligned like the other totals */
tr.shipping > td:has(> ul.woocommerce-shipping-methods) {
  text-align: left !important;
}
/* Recurring totals: no "Shipping via Download: Free" row, as on live
   (Nitro child hid tr.shipping.recurring-total.yearly; here for every cycle) */
/* !important: the page CSS sets display: flex on the totals rows */
tr.shipping.recurring-total { display: none !important; }

ul.woocommerce-shipping-methods {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
ul.woocommerce-shipping-methods > li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  list-style: none !important;
}
ul.woocommerce-shipping-methods > li::before,
ul.woocommerce-shipping-methods > li::marker { content: none; }
ul.woocommerce-shipping-methods > li > input.shipping_method[type=radio] {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0 !important;
  border: 2px solid var(--stroke-color, #333);
  border-radius: 50% !important;
  background: var(--dark-bg-color, #111);
  cursor: pointer;
}
ul.woocommerce-shipping-methods > li > input.shipping_method[type=radio]:checked {
  border-color: var(--red-color, #ff2d2d);
  background: radial-gradient(circle, var(--red-color, #ff2d2d) 55%, transparent 58%);
}
ul.woocommerce-shipping-methods > li > input.shipping_method[type=radio]:focus-visible {
  outline: 2px solid var(--red-color, #ff2d2d);
  outline-offset: 3px;
}
ul.woocommerce-shipping-methods > li > label {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: inherit;
  text-transform: none;
  line-height: 1.3;
  cursor: pointer;
}

/* ===== Order bump (Iconic Sales Booster, div.iconic-wsb-checkout-bump) =====
   Sits in #payment .place-order. The plugin writes its colours as inline
   styles (border #e2e2e2, title/price #333), hence the !important. */
div.iconic-wsb-checkout-bump {
  margin: 16px 0;
  background: transparent !important;
  border: 1px solid var(--red-color) !important;
  border-radius: 4px;
  overflow: hidden;
}
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: transparent !important;
  border-bottom: 1px solid var(--red-color) !important;
}
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__header-checkbox {
  flex: 0 0 auto;
  margin: 0 !important;
  cursor: pointer;
}
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__header-bump-title {
  margin: 0;
  padding: 0 !important;
  color: var(--light-text-color) !important;
  line-height: 1.3;
  cursor: pointer;
}
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__body {
  padding: 20px;
  background: transparent !important;
  color: var(--dark-text-color);
}
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__price {
  border-top: 1px solid var(--light-text-color) !important;
}
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__price_span,
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__price_span .amount,
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__price ins {
  color: var(--red-color) !important;
  font-weight: 700;
  text-decoration: none;
}
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__price del,
div.iconic-wsb-checkout-bump .iconic-wsb-checkout-bump__price del .amount {
  color: var(--dark-text-color) !important;
  font-weight: 400;
}

/* ===== ORDER COMPONENTS (thank-you page AND My Account content) =====
   Same document as the checkout (page 32); body carries
   .woocommerce-order-received. Tokens come from
   .woocommerce-checkout div.woocommerce (bg, stroke, fonts). */

@scope (body.woocommerce-order-received .woocommerce-order,
        .woocommerce-MyAccount-content) {

  /* Page layout: stacked cards, two columns from 1000px */
  :scope {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }
  :scope > * { grid-column: 1 / -1; min-width: 0; margin: 0; }

  @media (min-width: 1000px) {
    :scope.woocommerce-order {
      grid-template-columns: minmax(0, 1fr) 480px;
    }
    :scope.woocommerce-order > .woocommerce-thankyou-order-received,
    :scope.woocommerce-order > .woocommerce-order-overview {
      grid-column: 1 / -1;
    }
    :scope.woocommerce-order > .woocommerce-order-details {
      grid-column: 1;
    }
    :scope.woocommerce-order > .woocommerce-customer-details {
      grid-column: 2;
    }
  }

  /* Card look shared by the blocks (same as #order_review / col-1) */
  .woocommerce-thankyou-order-received,
  .woocommerce-order-overview,
  .woocommerce-order-details,
  .woocommerce-customer-details {
    border: 1px solid var(--stroke-color);
    background-color: var(--bg-color);
    border-radius: 4px;
    padding: 32px;
  }
  @media (max-width: 550px) {
    .woocommerce-thankyou-order-received,
    .woocommerce-order-overview,
    .woocommerce-order-details,
    .woocommerce-customer-details { padding: 20px; }
  }

  /* Success line */
  .woocommerce-thankyou-order-received {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
    line-height: 1.2;
  }

  /* Overview: label above value, tiles side by side */
  .woocommerce-order-overview {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px 24px;
  }
  .woocommerce-order-overview > li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  .woocommerce-order-overview > li strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    font-weight: 400;
    text-transform: none;
    color: var(--light-text-color);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .woocommerce-order-overview > li.total strong { font-weight: 700; }

  /* Section titles */
  .woocommerce-order-details__title,
  .woocommerce-column__title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
    line-height: 1.2;
  }

  /* Order table: same flex rows as the checkout review table */
  table.woocommerce-table--order-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin: 0;
    border: 0;
  }
  table.woocommerce-table--order-details > thead,
  table.woocommerce-table--order-details > tbody,
  table.woocommerce-table--order-details > tfoot {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  table.woocommerce-table--order-details tr {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  table.woocommerce-table--order-details th,
  table.woocommerce-table--order-details td {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--light-text-color);
  }
  table.woocommerce-table--order-details thead th {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 12px;
  }

  /* Line items */
  table.woocommerce-table--order-details tr.order_item {
    border-top: 1px solid var(--stroke-color);
    padding: 12px 0;
  }
  table.woocommerce-table--order-details tr.order_item:last-of-type {
    border-bottom: 1px solid var(--stroke-color);
  }
  table.woocommerce-table--order-details .product-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  table.woocommerce-table--order-details .product-name a {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    font-weight: 400;
    color: var(--red-color);
    text-decoration: none;
    text-transform: uppercase;
  }
  table.woocommerce-table--order-details .product-name a:hover {
    text-decoration: underline;
  }
  table.woocommerce-table--order-details .product-quantity {
    font-family: var(--font-meta);
    font-size: 10px;
    font-weight: 400;
    color: var(--light-text-color);
  }
  /* Item meta: <ul.wc-item-meta><li><strong>Edition:</strong><p>Surround</p> */
  table.woocommerce-table--order-details .wc-item-meta {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  table.woocommerce-table--order-details .wc-item-meta li {
    display: flex;
    gap: 3px;
    margin: 0;
    font-family: var(--font-meta);
    font-size: 8px;
    color: var(--dark-text-color);
  }
  table.woocommerce-table--order-details .wc-item-meta li p,
  table.woocommerce-table--order-details .wc-item-meta li strong {
    display: inline;
    margin: 0;
    font-size: inherit;
  }
  table.woocommerce-table--order-details .wc-item-meta li strong {
    font-weight: 700;
    color: var(--light-text-color);
  }
  table.woocommerce-table--order-details .product-total {
    text-align: right;
    white-space: nowrap;
  }
  table.woocommerce-table--order-details .product-total .amount {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 400;
    color: var(--light-text-color);
    line-height: 1;
  }

  /* Footer rows: subtotal, shipping, VAT, payment method, total */
  table.woocommerce-table--order-details tfoot tr {
    border-top: 1px solid var(--stroke-color);
    padding: 12px 0;
  }
  table.woocommerce-table--order-details tfoot th {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dark-text-color);
    text-align: left;
  }
  table.woocommerce-table--order-details tfoot td {
    text-align: right;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    color: var(--dark-text-color);
  }
  table.woocommerce-table--order-details tfoot td .amount {
    color: inherit;
    line-height: 1;
  }
  table.woocommerce-table--order-details tfoot:last-of-type tr:last-child {
    border-bottom: 1px solid var(--stroke-color);
  }
  table.woocommerce-table--order-details tfoot:last-of-type tr:last-child th,
  table.woocommerce-table--order-details tfoot:last-of-type tr:last-child td {
    color: var(--light-text-color);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
  }

  /* Customer details */
  .woocommerce-customer-details address {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    line-height: 1.5;
    color: var(--light-text-color);
  }
  .woocommerce-customer-details--email,
  .woocommerce-customer-details--phone {
    margin: 12px 0 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }
}

/* ===== Additions: subscription notices, bundles, related subscriptions ===== */
@scope (body.woocommerce-order-received .woocommerce-order,
        .woocommerce-MyAccount-content) {

  /* WooCommerce Subscriptions drops two plain <p> between overview and
     details: "will be activated ..." / "View the status ... account". */
  :scope > p:not(.woocommerce-notice) {
    grid-column: 1 / -1;
    margin: 0;
    padding: 12px 20px;
    border: 1px solid var(--stroke-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }
  :scope > p:not(.woocommerce-notice) a {
    color: var(--red-color);
    font-weight: 700;
    text-decoration: none;
  }
  :scope > p:not(.woocommerce-notice) a:hover { color: var(--dark-red-color); }

  /* Bundle parent row keeps the line, bundled children hang below it
     without lines, indented, smaller, no price cell. */
  table.woocommerce-table--order-details tr.bundled_table_item {
    border-top: 0;
    padding: 0 0 8px 20px;
  }
  table.woocommerce-table--order-details tr.bundled_table_item:last-of-type {
    border-bottom: 0;
  }
  table.woocommerce-table--order-details tr.bundle_table_item {
    padding-bottom: 8px;
  }
  table.woocommerce-table--order-details tr.bundled_table_item .product-name {
    display: block;
  }
  table.woocommerce-table--order-details .bundled-product-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  table.woocommerce-table--order-details .bundled-product-name a {
    font-family: var(--font-heading);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    color: var(--red-color);
    text-decoration: none;
    text-transform: uppercase;
  }
  table.woocommerce-table--order-details .bundled-product-name a:hover {
    text-decoration: underline;
  }
  table.woocommerce-table--order-details
    tr.bundled_table_item .product-total:empty { display: none; }
  /* the last bundled child before a normal item: restore the separator */
  table.woocommerce-table--order-details
    tr.bundled_table_item + tr.order_item:not(.bundled_table_item) {
    border-top: 1px solid var(--stroke-color);
  }

  /* Related subscriptions (WooCommerce Subscriptions, inside order details) */
  .woocommerce-order-details > header {
    margin: 32px 0 16px;
  }
  .woocommerce-order-details > header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
    line-height: 1.2;
  }
  table.woocommerce-orders-table--subscriptions {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
  }
  table.woocommerce-orders-table--subscriptions th,
  table.woocommerce-orders-table--subscriptions td {
    padding: 12px 8px;
    border: 0;
    border-top: 1px solid var(--stroke-color);
    background: transparent;
    text-align: left;
    vertical-align: middle;
    color: var(--light-text-color);
  }
  table.woocommerce-orders-table--subscriptions th:first-child,
  table.woocommerce-orders-table--subscriptions td:first-child {
    padding-left: 0;
  }
  table.woocommerce-orders-table--subscriptions th:last-child,
  table.woocommerce-orders-table--subscriptions td:last-child {
    padding-right: 0;
    text-align: right;
  }
  table.woocommerce-orders-table--subscriptions thead th {
    border-top: 0;
    padding-top: 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--light-text-color);
  }
  table.woocommerce-orders-table--subscriptions tbody tr:last-child td {
    border-bottom: 1px solid var(--stroke-color);
  }
  table.woocommerce-orders-table--subscriptions td {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
  }
  table.woocommerce-orders-table--subscriptions td a:not(.button) {
    color: var(--red-color);
    text-decoration: none;
  }
  table.woocommerce-orders-table--subscriptions td a:not(.button):hover {
    text-decoration: underline;
  }
  table.woocommerce-orders-table--subscriptions .subscription-total .amount {
    color: var(--light-text-color);
  }
  table.woocommerce-orders-table--subscriptions td .button {
    display: inline-block;
    padding: 8px 14px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 2px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    text-decoration: none;
  }
  table.woocommerce-orders-table--subscriptions td .button:hover {
    background: #ffffff20;
  }

  /* Mobile: WooCommerce's responsive table turns rows into stacked cells
     with data-title labels; give them the meta-label look. */
  @media (max-width: 768px) {
    table.woocommerce-orders-table--subscriptions thead { display: none; }
    table.woocommerce-orders-table--subscriptions tbody,
    table.woocommerce-orders-table--subscriptions tr,
    table.woocommerce-orders-table--subscriptions td { display: block; }
    table.woocommerce-orders-table--subscriptions tr {
      border-top: 1px solid var(--stroke-color);
      padding: 12px 0;
    }
    table.woocommerce-orders-table--subscriptions td {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 4px 0;
      border: 0 !important;
      text-align: right;
    }
    table.woocommerce-orders-table--subscriptions td[data-title]::before {
      content: attr(data-title);
      font-family: var(--font-meta);
      font-size: var(--font-size-meta-m);
      text-transform: uppercase;
      color: var(--dark-text-color);
      text-align: left;
    }
    table.woocommerce-orders-table--subscriptions td.subscription-actions {
      justify-content: flex-end;
      padding-top: 8px;
    }
  }
}

/* ===== Additions: links, downloads, invoice action, license keys ===== */
@scope (body.woocommerce-order-received .woocommerce-order,
        .woocommerce-MyAccount-content) {

  /* Links: red, no underline, darker on hover (buttons excluded) */
  a:not(.button) {
    color: var(--red-color);
    text-decoration: none;
  }
  a:not(.button):hover {
    color: var(--dark-red-color);
    text-decoration: underline;
  }

  /* Shared outline button (invoice, license CSV/TXT, subscription "View") */
  .button,
  a.button {
    display: inline-block;
    padding: 8px 14px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 2px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
  }
  .button:hover,
  a.button:hover { background: #ffffff20; color: #fff; }

  /* ---- Downloads: full-width card above the order details ---- */
  .woocommerce-order-downloads {
    grid-column: 1 / -1;
    border: 1px solid var(--stroke-color);
    background-color: var(--bg-color);
    border-radius: 4px;
    padding: 32px;
  }
  @media (max-width: 550px) {
    .woocommerce-order-downloads { padding: 20px; }
  }
  .woocommerce-order-downloads__title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
    line-height: 1.2;
  }
  table.woocommerce-table--order-downloads {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
  }
  table.woocommerce-table--order-downloads th,
  table.woocommerce-table--order-downloads td {
    padding: 10px 8px;
    border: 0;
    border-top: 1px solid var(--stroke-color);
    background: transparent;
    text-align: left;
    vertical-align: middle;
    color: var(--light-text-color);
    overflow-wrap: anywhere;
  }
  table.woocommerce-table--order-downloads th:first-child,
  table.woocommerce-table--order-downloads td:first-child { padding-left: 0; }
  table.woocommerce-table--order-downloads th:last-child,
  table.woocommerce-table--order-downloads td:last-child { padding-right: 0; }
  table.woocommerce-table--order-downloads thead th {
    border-top: 0;
    padding-top: 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: uppercase;
  }
  /* column widths: product | remaining | expires | file */
  table.woocommerce-table--order-downloads .download-product   { width: 26%; }
  table.woocommerce-table--order-downloads .download-remaining { width: 12%; }
  table.woocommerce-table--order-downloads .download-expires   { width: 12%; }
  table.woocommerce-table--order-downloads .download-file      { width: 50%; }
  table.woocommerce-table--order-downloads tbody tr:last-child td {
    border-bottom: 1px solid var(--stroke-color);
  }
  table.woocommerce-table--order-downloads td.download-product a {
    font-family: var(--font-heading);
    font-size: var(--font-size-meta-m);
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  table.woocommerce-table--order-downloads td.download-product a:hover {
    color: var(--red-color);
  }
  table.woocommerce-table--order-downloads td.download-remaining,
  table.woocommerce-table--order-downloads td.download-expires {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }
  /* The file link is rendered as .button by WooCommerce: make it a plain
     red link, the list is long and 140 buttons are noise. */
  table.woocommerce-table--order-downloads td.download-file a.button {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    font-weight: 400;
    text-transform: none;
    color: var(--red-color);
    line-height: 1.3;
  }
  table.woocommerce-table--order-downloads td.download-file a.button:hover {
    color: var(--dark-red-color);
    text-decoration: underline;
    background: transparent;
  }
  @media (max-width: 768px) {
    table.woocommerce-table--order-downloads { table-layout: auto; }
    table.woocommerce-table--order-downloads thead { display: none; }
    table.woocommerce-table--order-downloads tbody,
    table.woocommerce-table--order-downloads tr,
    table.woocommerce-table--order-downloads td { display: block; width: auto; }
    table.woocommerce-table--order-downloads tr {
      border-top: 1px solid var(--stroke-color);
      padding: 12px 0;
    }
    table.woocommerce-table--order-downloads td {
      padding: 2px 0;
      border: 0 !important;
    }
    /* remaining/expires carry no information here (∞ / Never) */
    table.woocommerce-table--order-downloads td.download-remaining,
    table.woocommerce-table--order-downloads td.download-expires {
      display: none;
    }
  }

  /* ---- Invoice action row (WooCommerce PDF Invoices, own tfoot) ---- */
  table.woocommerce-table--order-details tfoot:first-of-type tr {
    border-top: 1px solid var(--stroke-color);
    padding: 12px 0;
    align-items: center;
  }
  table.woocommerce-table--order-details th.order-actions--heading {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  table.woocommerce-table--order-details a.button.invoice:empty::before {
    content: "Invoice (PDF)";
  }

  /* ---- License keys (FS License Manager, inside order details) ---- */
  .woocommerce-order-details h4 {
    margin: 32px 0 16px;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
    line-height: 1.2;
  }
  .fslm-download-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px !important;
  }
  table.fslm-license-keys-table {
    width: 100% !important;
    margin: 0;
    border: 0;
    border-collapse: collapse;
  }
  table.fslm-license-keys-table th,
  table.fslm-license-keys-table td {
    padding: 12px 8px !important;
    border: 0;
    border-top: 1px solid var(--stroke-color);
    background: transparent;
    text-align: left !important;
    vertical-align: middle;
    color: var(--light-text-color);
    overflow-wrap: anywhere;
  }
  table.fslm-license-keys-table th:first-child,
  table.fslm-license-keys-table td:first-child { padding-left: 0 !important; }
  table.fslm-license-keys-table th:last-child,
  table.fslm-license-keys-table td:last-child { padding-right: 0 !important; }
  table.fslm-license-keys-table thead th {
    border-top: 0;
    padding-top: 0 !important;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: uppercase;
  }
  table.fslm-license-keys-table thead th strong { font-weight: 400; }
  table.fslm-license-keys-table tbody tr:last-child td {
    border-bottom: 1px solid var(--stroke-color);
  }
  table.fslm-license-keys-table td:first-child {
    font-family: var(--font-heading);
    font-size: var(--font-size-meta-m);
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  table.fslm-license-keys-table td:last-child {
    font-family: var(--font-meta);
    font-size: var(--font-size-heading-xxs);
    letter-spacing: 0.04em;
    user-select: all;
  }
}

/* =====================================================================
   MY ACCOUNT  ->  CSS of layout 587349 (or Global CSS)
   Only what the [woocommerce_my_account] content needs on top of the
   shared components (tokens, fields, notices, buttons, order
   components, payment cards live in Global CSS). Menu untouched.
   ===================================================================== */

/* The shortcode wrapper sits in a Cornerstone column that is a flex column
   with align-items: flex-start, which shrink-wraps it to its content. Tables
   with width: 100% then only get the content width. Always fill the column. */
div.woocommerce:has(> .woocommerce-MyAccount-content) {
  width: 100%;
  align-self: stretch;
}

@scope (.woocommerce-MyAccount-content) {

  /* Content column: stacked blocks with the usual 12px rhythm.
     (the shared order-components block already makes :scope a grid) */
  :scope > * { min-width: 0; }
  :scope > .clear { display: none; }

  /* Intro / status paragraphs ("Hello …", "Order #… was placed …") */
  :scope > p {
    margin: 0;
    padding: 12px 20px;
    border: 1px solid var(--stroke-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }
  :scope > p mark {
    background: transparent;
    color: var(--light-text-color);
    font-weight: 700;
  }
  :scope > p a {
    color: var(--red-color);
    text-decoration: none;
    font-weight: 700;
  }
  :scope > p a:hover { color: var(--dark-red-color); }

  /* Headings between blocks (Subscription totals, License Keys,
     Related orders <header>) */
  :scope > h2, :scope > header > h2, :scope > h4 {
    margin: 20px 0 4px;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
    line-height: 1.2;
  }
  :scope > header { margin: 0; }

  /* ---- Tables directly in the content: orders, subscriptions,
          license keys, subscription details/totals. Card + lines. ---- */
  :scope > table.shop_table,
  :scope > .woocommerce_account_subscriptions > table.shop_table {
    width: 100%;
    margin: 0;
    border: 1px solid var(--stroke-color);
    border-radius: 4px;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--bg-color);
    padding: 20px 32px 24px;
  }
  @media (max-width: 550px) {
    :scope > table.shop_table,
    :scope > .woocommerce_account_subscriptions > table.shop_table {
      padding: 16px 20px;
    }
  }
  :scope table.shop_table th,
  :scope table.shop_table td {
    padding: 12px 8px;
    border: 0;
    border-top: 1px solid var(--stroke-color);
    background: transparent;
    text-align: left;
    vertical-align: middle;
    color: var(--light-text-color);
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
  }
  :scope table.shop_table th:first-child,
  :scope table.shop_table td:first-child { padding-left: 0; }
  :scope table.shop_table th:last-child,
  :scope table.shop_table td:last-child { padding-right: 0; }
  :scope table.shop_table thead th {
    border-top: 0;
    padding-top: 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: uppercase;
  }
  :scope table.shop_table thead th strong { font-weight: 400; }
  :scope table.shop_table tbody tr:last-child th,
  :scope table.shop_table tbody tr:last-child td {
    border-bottom: 1px solid var(--stroke-color);
  }
  :scope table.shop_table a:not(.button) {
    color: var(--red-color);
    text-decoration: none;
  }
  :scope table.shop_table a:not(.button):hover {
    color: var(--dark-red-color);
    text-decoration: underline;
  }
  :scope table.shop_table .amount { color: var(--light-text-color); }

  /* actions column: right aligned, buttons in a row */
  :scope table.shop_table .woocommerce-orders-table__cell-order-actions,
  :scope table.shop_table .woocommerce-orders-table__header-order-actions,
  :scope table.shop_table .subscription-actions {
    text-align: right;
    white-space: nowrap;
  }
  :scope table.shop_table .woocommerce-orders-table__cell-order-actions .button,
  :scope table.shop_table .subscription-actions .button {
    margin-left: 6px;
  }
  /* PDF invoice button ships without text */
  :scope a.button.invoice:empty::before { content: "PDF"; }
  :scope a.button.invoice[href=""] { display: none; }

  /* Cornerstone's generated element CSS (layout 587349, _cs_generated_tss)
     paints the cell dividers #dedede with !important; overrule with a more
     specific selector so every divider uses the stroke token. */
  .woocommerce-MyAccount-content table.shop_table th,
  .woocommerce-MyAccount-content table.shop_table td,
  .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__cell,
  .woocommerce-MyAccount-content table.woocommerce-orders-table .woocommerce-orders-table__header {
    border-color: var(--stroke-color) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom-width: 0;
  }
  .woocommerce-MyAccount-content table.shop_table tbody tr:last-child th,
  .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
    border-bottom: 1px solid var(--stroke-color) !important;
  }
  .woocommerce-MyAccount-content table.shop_table thead th { border-top: 0 !important; }

  /* dates and order numbers on one line */
  :scope table.shop_table .woocommerce-orders-table__cell-order-date,
  :scope table.shop_table .woocommerce-orders-table__cell-order-number,
  :scope table.shop_table .subscription-next-payment { white-space: nowrap; }

  /* order / subscription status */
  :scope .woocommerce-orders-table__cell-order-status,
  :scope .subscription-status {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  :scope tr[class*="--status-completed"] .woocommerce-orders-table__cell-order-status,
  
  :scope tr[class*="--status-active"] .subscription-status {
    color: var(--light-text-color);
  }
  :scope tr[class*="--status-pending"] .woocommerce-orders-table__cell-order-status,
  
  :scope tr[class*="--status-failed"] .woocommerce-orders-table__cell-order-status,
  
  :scope tr[class*="--status-on-hold"] .subscription-status,
  :scope tr[class*="--status-cancelled"] .subscription-status {
    color: var(--red-color);
  }

  /* "for 2 items" / "/ year" suffixes */
  :scope .woocommerce-orders-table__cell-order-total,
  :scope .subscription-total {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }

  /* subscription details (label / value, no thead) */
  :scope > table.subscription_details td:first-child {
    width: 40%;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  :scope > table.subscription_details tbody tr:first-child td {
    border-top: 0;
    padding-top: 0;
  }
  :scope > table.subscription_details td .button { margin: 0 6px 6px 0; }

  /* subscription totals / view-order style tables that use tfoot */
  :scope table.shop_table tfoot th {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  :scope table.shop_table tfoot td {
    text-align: right;
    color: var(--dark-text-color);
  }
  :scope table.shop_table tfoot tr:last-child th,
  :scope table.shop_table tfoot tr:last-child td {
    border-bottom: 1px solid var(--stroke-color);
    color: var(--light-text-color);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
  }
  :scope table.shop_table td.product-name .product-quantity {
    font-family: var(--font-meta);
    font-size: 10px;
    font-weight: 400;
  }

  /* item meta in plain shop_table tables (subscription totals):
     <ul.wc-item-meta><li><strong>Edition:</strong><p>…</p> */
  :scope table.shop_table .wc-item-meta {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
  }
  :scope table.shop_table .wc-item-meta li {
    display: flex;
    gap: 3px;
    margin: 0;
    font-family: var(--font-meta);
    font-size: 8px;
    color: var(--dark-text-color);
  }
  :scope table.shop_table .wc-item-meta li p,
  :scope table.shop_table .wc-item-meta li strong {
    display: inline;
    margin: 0;
    font-size: inherit;
  }
  :scope table.shop_table .wc-item-meta li strong {
    font-weight: 700;
    color: var(--light-text-color);
  }
  /* amounts right aligned in plain shop_table tables */
  :scope table.shop_table th.product-total,
  :scope table.shop_table td.product-total,
  :scope table.shop_table td.product-subtotal {
    text-align: right;
    white-space: nowrap;
  }

  /* license keys list */
  :scope table.license-keys-table .license-keys-table-product-variation {
    display: block;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }
  :scope table.license-keys-table .license-keys-table-key {
    font-family: var(--font-meta);
    letter-spacing: 0.04em;
    user-select: all;
  }

  /* ---- Responsive tables: WooCommerce stacks cells, we label them ---- */
  @media (max-width: 768px) {
    :scope table.shop_table_responsive thead { display: none; }
    :scope table.shop_table_responsive tbody,
    :scope table.shop_table_responsive tr,
    :scope table.shop_table_responsive th,
    :scope table.shop_table_responsive td { display: block; width: auto; }
    :scope table.shop_table_responsive tr {
      border-top: 1px solid var(--stroke-color);
      padding: 12px 0;
    }
    :scope table.shop_table_responsive tbody tr:last-child {
      border-bottom: 1px solid var(--stroke-color);
    }
    :scope table.shop_table_responsive th,
    :scope table.shop_table_responsive td {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 4px 0 !important;
      border: 0 !important;
      text-align: right;
    }
    :scope table.shop_table_responsive [data-title]::before {
      content: attr(data-title);
      font-family: var(--font-meta);
      font-size: var(--font-size-meta-m);
      text-transform: uppercase;
      color: var(--dark-text-color);
      text-align: left;
    }
    :scope table.shop_table_responsive .woocommerce-orders-table__cell-order-actions,
    
    :scope table.shop_table_responsive .subscription-actions {
      justify-content: flex-end;
      padding-top: 8px !important;
    }
  }

  /* ---- Addresses (edit-address overview) ---- */
  .woocommerce-Address {
    border: 1px solid var(--stroke-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    padding: 24px 32px;
    margin: 0;
    float: none;
    width: auto;
  }
  .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
  }
  .woocommerce-Address-title h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
  }
  /* "Edit billing address": an outline button like every other button
     (Roboto Condensed 700), not a meta link */
  .woocommerce-Address-title a.edit {
    display: inline-block;
    padding: 8px 14px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 2px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    text-decoration: none;
  }
  .woocommerce-Address-title a.edit:hover { background: #ffffff20; color: #fff; }
  .woocommerce-Address address {
    margin: 0;
    font-style: normal;
    line-height: 1.5;
    color: var(--light-text-color);
  }

  /* ---- Forms: edit address, edit account ---- */
  :scope > form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 24px 32px 32px;
    border: 1px solid var(--stroke-color);
    border-radius: 4px;
    background-color: var(--bg-color);
  }
  @media (max-width: 550px) { :scope > form { padding: 16px 20px 20px; } }
  :scope > form > h2 {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
  }
  .woocommerce-address-fields__field-wrapper,
  form.edit-account {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 12px;
  }
  .woocommerce-address-fields__field-wrapper > .form-row,
  form.edit-account > .form-row,
  form.edit-account > fieldset,
  form.edit-account > p { grid-column: 1 / -1; align-self: end; }
  .woocommerce-address-fields__field-wrapper > .form-row-first,
  form.edit-account > .form-row-first { grid-column: 1; }
  .woocommerce-address-fields__field-wrapper > .form-row-last,
  form.edit-account > .form-row-last { grid-column: 2; }
  @media (max-width: 600px) {
    .woocommerce-address-fields__field-wrapper > .form-row,
    form.edit-account > .form-row { grid-column: 1 / -1; }
  }
  form.edit-account > h2 { grid-column: 1 / -1; }
  form.edit-account fieldset {
    display: grid;
    gap: 12px;
    margin: 12px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--stroke-color);
  }
  form.edit-account legend {
    float: left;
    width: 100%;
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--light-text-color);
  }
  form.edit-account #account_display_name_description {
    display: block;
    margin-top: 6px;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }
  form.edit-account #account_display_name_description em { font-style: normal; }
  :scope > form .clear { display: none; }

  /* ---- Payment methods list (saved cards) ---- */
  :scope > table.woocommerce-MyAccount-paymentMethods .payment-method-actions {
    text-align: right;
    white-space: nowrap;
  }
  :scope > table.woocommerce-MyAccount-paymentMethods .payment-method-actions .button {
    margin-left: 6px;
  }
  :scope > a.button { align-self: flex-start; }   /* "Add payment method" */
  #wcs_delete_token_warning:has(li:empty) { display: none; }

  /* ---- Add payment method (form#add_payment_method) ---- */
  form#add_payment_method {
    padding: 24px 32px 32px;
    border: 1px solid var(--stroke-color);
    border-radius: 4px;
    background-color: var(--bg-color);
  }
  form#add_payment_method #payment > .form-row { margin: 24px 0 0; }

  /* "Order again" */
  p.order-again { margin: 12px 0 0; }

  /* ---- Pagination (orders, downloads): previous left, next right ---- */
  .woocommerce-pagination {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 0;
  }
  .woocommerce-pagination .woocommerce-button--next { margin-left: auto; }
  /* downloads: fixed three columns, so "2 / 10" stays centred on the
     first and last page where one button is missing */
  .boom-downloads-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .boom-downloads-pagination .woocommerce-button--previous {
    grid-column: 1;
    justify-self: start;
  }
  .boom-downloads-pagination__status {
    grid-column: 2;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--light-text-color);
  }
  .boom-downloads-pagination .woocommerce-button--next {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }
}

/* ===== ORDER-PAY: "Pay for order" AND "Change payment method" =====
   Checkout endpoint /checkout/order-pay/ (page 32) and the WCS endpoint
   /my-account/subscription-payment-method/ (My Account layout). Both set
   body.woocommerce-order-pay, so this lives in the shared file. Markup is
   form#order_review > table.shop_table + div#payment + terms + button.
   Payment cards, terms and #place_order inherit the checkout styles;
   this adds the card frame and the order table. */

@scope (body.woocommerce-order-pay div.woocommerce) {

  /* One centered card, like #order_review on the checkout.
     Higher specificity on purpose: the checkout page CSS styles the same
     id (#order_review, right column: border-top 0, radius only below)
     and would otherwise win here. */
  :scope form#order_review {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--stroke-color);
    border-top: 1px solid var(--stroke-color);
    background-color: var(--bg-color);
    border-radius: 4px;
  }
  @media (max-width: 550px) {
    :scope form#order_review { padding: 20px; }
  }

  /* Order table: flex rows like the checkout review table */
  form#order_review > table.shop_table {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    margin: 0 0 32px;
    border: 0;
  }
  form#order_review > table.shop_table > thead,
  form#order_review > table.shop_table > tbody,
  form#order_review > table.shop_table > tfoot {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  form#order_review > table.shop_table tr {
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  form#order_review > table.shop_table th,
  form#order_review > table.shop_table td {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--light-text-color);
    text-align: left;
  }
  /* columns: name grows, qty and total fixed on the right */
  form#order_review > table.shop_table .product-name { flex: 1 1 auto; }
  form#order_review > table.shop_table .product-quantity,
  form#order_review > table.shop_table .product-total,
  form#order_review > table.shop_table .product-subtotal {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
  }
  form#order_review > table.shop_table th.product-quantity,
  form#order_review > table.shop_table td.product-quantity { min-width: 48px; }
  form#order_review > table.shop_table th.product-total,
  form#order_review > table.shop_table td.product-subtotal,
  form#order_review > table.shop_table td.product-total { min-width: 110px; }

  form#order_review > table.shop_table thead th {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: uppercase;
    padding-bottom: 12px;
  }

  /* line items */
  form#order_review > table.shop_table tr.order_item {
    border-top: 1px solid var(--stroke-color);
    padding: 12px 0;
  }
  form#order_review > table.shop_table tr.order_item:last-child {
    border-bottom: 1px solid var(--stroke-color);
  }
  form#order_review > table.shop_table td.product-name {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    text-transform: uppercase;
  }
  form#order_review > table.shop_table td.product-quantity strong {
    font-family: var(--font-meta);
    font-size: 10px;
    font-weight: 400;
  }
  form#order_review > table.shop_table td.product-subtotal .amount {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    line-height: 1;
  }

  /* totals: subtotal, VAT, total; last row highlighted */
  form#order_review > table.shop_table tfoot tr {
    border-top: 1px solid var(--stroke-color);
    padding: 12px 0;
  }
  form#order_review > table.shop_table tfoot th {
    flex: 1 1 auto;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  form#order_review > table.shop_table tfoot td {
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xxs);
    color: var(--dark-text-color);
  }
  form#order_review > table.shop_table tfoot td .amount { line-height: 1; }
  form#order_review > table.shop_table tfoot tr:last-child {
    border-bottom: 1px solid var(--stroke-color);
  }
  form#order_review > table.shop_table tfoot tr:last-child th,
  form#order_review > table.shop_table tfoot tr:last-child td {
    color: var(--light-text-color);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
  }

  /* CKO label carries a subtitle here ("Secure payment powered by …") */
  #payment .cko-flow__payment-method-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  #payment .cko-flow__payment-method-subtitle {
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    font-weight: 400;
    text-transform: none;
    color: var(--pm-muted);
  }

  /* terms block and pay button keep the checkout look; add spacing */
  #payment > .form-row { margin: 24px 0 0; }
  #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; }
}

/* =====================================================================
   LOGGED OUT: login + register (#customer_login), lost/reset password.
   Lives directly in div.woocommerce, NOT in .woocommerce-MyAccount-content,
   so the My Account scopes above do not reach it. The primary-button rule
   at the top loses to `button.button` here (same scope, lower
   specificity), hence the `button.button.x` selectors below.
   ===================================================================== */

@scope (body.woocommerce-account div.woocommerce) {

  /* the Cornerstone column shrinks div.woocommerce to its content */
  :scope:has(> #customer_login, > form.woocommerce-ResetPassword) {
    width: 100%;
    align-self: stretch;
  }

  /* two cards side by side, stacked on narrow screens */
  #customer_login {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }
  #customer_login::before, #customer_login::after { display: none; }
  @media (max-width: 900px) {
    #customer_login { grid-template-columns: minmax(0, 1fr); }
  }
  #customer_login > .u-column1,
  #customer_login > .u-column2 {
    float: none;
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 32px 32px;
    border: 1px solid var(--stroke-color);
    border-radius: 4px;
    background-color: var(--bg-color);
  }
  @media (max-width: 550px) {
    #customer_login > .u-column1,
    #customer_login > .u-column2 { padding: 16px 20px 20px; }
  }
  #customer_login h2,
  form.woocommerce-ResetPassword > h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-heading-xs);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--light-text-color);
  }

  /* the forms: 12px rhythm like the other account forms */
  form.woocommerce-form-login,
  form.woocommerce-form-register,
  form.woocommerce-ResetPassword {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  form.woocommerce-ResetPassword {
    padding: 24px 32px 32px;
    border: 1px solid var(--stroke-color);
    border-radius: 4px;
    background-color: var(--bg-color);
  }
  form.woocommerce-ResetPassword > p:first-child {
    margin: 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }
  :is(form.login, form.register, form.woocommerce-ResetPassword) .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
  }
  :is(form.login, form.register, form.woocommerce-ResetPassword) label {
    color: var(--dark-text-color);
  }
  :is(form.login, form.register, form.woocommerce-ResetPassword) .clear,
  form.register .woocommerce-privacy-policy-text:empty { display: none; }
  form.register .woocommerce-privacy-policy-text,
  form.register > p:not(.form-row) {
    margin: 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    color: var(--dark-text-color);
  }

  /* "Remember me" row + submit: checkbox left, button right */
  form.login > .form-row:has(.woocommerce-form-login__submit) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
  }
  .woocommerce-form-login__rememberme {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
    color: var(--dark-text-color);
  }
  .woocommerce-form-login__rememberme span { line-height: 1; }
  .woocommerce-form-login__rememberme input[type=checkbox] {
    appearance: none;
    flex: none;
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    border: 1px solid var(--stroke-color);
    border-radius: 2px;
    background: var(--dark-bg-color) center / 14px no-repeat;
    cursor: pointer;
  }
  .woocommerce-form-login__rememberme input[type=checkbox]:checked {
    border-color: var(--red-color);
    background-color: var(--red-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
  .woocommerce-form-login__rememberme input[type=checkbox]:focus-visible {
    outline: 2px solid var(--light-text-color);
    outline-offset: 2px;
  }

  /* primary buttons: login, register, reset password
     (button.button.x beats the outline button.button of Global CSS) */
  button.button.woocommerce-form-login__submit,
  button.button.woocommerce-form-register__submit,
  form.woocommerce-ResetPassword button.button {
    margin: 0;
    padding: 12px 24px;
    border: 0;
    border-radius: 2px;
    background-color: var(--red-color);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
  }
  button.button.woocommerce-form-login__submit:hover,
  button.button.woocommerce-form-register__submit:hover,
  form.woocommerce-ResetPassword button.button:hover {
    background-color: var(--dark-red-color);
    color: #fff;
  }
  form.register > .form-row:has(.woocommerce-form-register__submit) {
    margin-top: 8px;
    align-items: flex-start;
  }
  form.woocommerce-ResetPassword > .form-row:has(button) { align-items: flex-start; }

  /* "Lost your password?" */
  p.woocommerce-LostPassword {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--stroke-color);
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    text-transform: uppercase;
  }
  p.woocommerce-LostPassword a {
    color: var(--red-color);
    text-decoration: none;
  }
  p.woocommerce-LostPassword a:hover { color: var(--dark-red-color); }

  /* ---- Login/register switch (mu-plugin boom-account-login-switch.php
          prints the links and sets .boom-auth + data-view via inline JS).
          One card at a time; without JS both cards stay visible. ---- */
  #customer_login.boom-auth {
    grid-template-columns: minmax(0, 1fr);
  }
  #customer_login.boom-auth:not([data-view="register"]) > .u-column2,
  #customer_login.boom-auth[data-view="register"] > .u-column1 { display: none; }
  #customer_login:not(.boom-auth) p.boom-auth-switch { display: none; }
  #customer_login > .boom-auth-in { animation: boom-auth-in 0.28s ease-out both; }
  p.boom-auth-switch {
    margin: 0;
    font-family: var(--font-meta);
    font-size: var(--font-size-meta-m);
    text-transform: uppercase;
    color: var(--dark-text-color);
  }
  p.boom-auth-switch a {
    margin-left: 4px;
    font-weight: 700;
    color: var(--red-color);
    text-decoration: none;
  }
  p.boom-auth-switch a:hover { color: var(--dark-red-color); }
  /* register card: the switch sits under the button like on the login card */
  form.register p.boom-auth-switch {
    padding-top: 12px;
    border-top: 1px solid var(--stroke-color);
  }
}

@keyframes boom-auth-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #customer_login > .boom-auth-in { animation: none; }
}