/*
 * Demo20-to-Demo19 transaction cascade conflict bridge.
 *
 * The accepted Demo19 v8.42 styles are byte-identical donor files. Demo20's
 * global theme rules carry a class selector and can therefore outrank a few
 * of the donor's element/class rules even when the donor is loaded later.
 * Keep these corrections after the immutable cascade and require every
 * transaction alias so they cannot leak to products, My Account, order-pay,
 * order-received, or other Demo20 surfaces.
 */

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface{
  /* Keep the transaction body slightly more legible inside Demo20's 16.4px
     shell without changing the Demo20 header, menu, footer or controls. */
  --clb-text-font-size: 1em;
  --clb-font-size-small: 1em;
  --clb-font-size-caption: 0.95rem;
  --clb-h6-font-size: 1em;
  color: var(--clb-text-color);
  font-family: var(--clb-text-font-family);
  font-size: var(--clb-text-font-size);
  font-style: var(--clb-text-style);
  font-weight: var(--clb-text-font-weight);
  letter-spacing: var(--clb-text-letter-spacing);
  line-height: var(--clb-text-line-height);
  text-decoration: var(--clb-text-decoration);
  text-transform: var(--clb-text-transform);
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content{
  /* transaction-base supplied this before the full Ohio body rule existed;
     inherit here so the donor's 0.98em is applied once, exactly as Demo19. */
  font-size: inherit;
  line-height: inherit;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content{
  /* Contain the intro's top margin so the grey checkout canvas begins directly
     below Demo20's header cap; the intended spacing stays inside the canvas. */
  display: flow-root;
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  :where(.page-content, .site-main, .entry-content, .entry-content > .woocommerce){
  width: 100%;
  max-width: none;
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  :where(button, input[type="submit"]){
  line-height: normal;
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  :where(input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="date"], input[type="url"], select){
  line-height: normal;
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  .quantity
  :where(input[type="number"], input[type="text"]){
  text-align: center;
  padding: 0 !important;
  margin: 0;
  min-height: var(--clb-button-height-small);
  background-color: var(--clb-color-fill);
  font-size: var(--clb-font-size-caption);
  line-height: normal;
  -moz-appearance: textfield;
  border-radius: var(--clb-button-border-radius);
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  .quantity
  .quantity-button.button{
  height: var(--clb-button-height-small);
  min-height: unset;
  padding: 0;
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  .quantity
  .quantity-button.button
  svg{
  width: 14px;
  flex: 0 0 auto;
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  .woo-sidebar
  tr
  th{
  font-weight: var(--clb-text-font-weight);
  font-size: 1em;
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  .woo-sidebar
  tr
  :where(th, td):first-child{
  width: 55%;
  padding-right: var(--clb-spacer-5);
}

:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  .woo-sidebar
  tr:first-child
  :where(th, td),
:where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
  .site-content
  .woo-sidebar
  tr:last-child
  :where(th, td){
  border: none;
}

body.woocommerce-cart.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .woocommerce-cart-form__contents
  > .cart_item:has(~ .woo-actions):not(:has(~ .cart_item)){
  /* .woo-actions is another div, so Ohio's :last-of-type rule cannot identify
     the final product row. Remove only that stale divider and retain the
     single deliberate divider owned by .woo-actions. */
  padding-bottom: 0 !important;
  border-bottom: 0;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-main
  .form-row
  > label{
  font-size: 14px;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  #order_review
  > table.woocommerce-checkout-review-order-table{
  font-size: 15px;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  #order_review
  > table.woocommerce-checkout-review-order-table
  thead
  th{
  font-size: 13px;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  #payment
  .wc_payment_method
  > :where(label, .payment_box){
  font-size: 15px;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  #payment
  > .form-row.place-order
  :where(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper){
  font-size: 14px;
}

/* The native after-checkout coupon notice is the same centered Demo19 lane as
   the form itself. Demo20's generic VC-column rule otherwise restores a float
   and 14px column padding, which pins this lane to the left edge and defeats
   its auto margins. Keep this correction narrower than the transaction route. */
body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-form-shell
  > .jay-demo19-checkout-after-form{
  box-sizing: border-box;
  float: none;
  width: calc(100% - (var(--jay-d19-checkout-page-gutter) * 2));
  max-width: var(--jay-d19-checkout-max-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

/* The coupon prompt is a sibling after the native Checkout form. Keep the
   ordinary form page-tail when that lane is empty, but use Demo19's normal
   section rhythm when the coupon toggle is actually present. */
body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-form-shell:has(> .jay-demo19-checkout-after-form .woocommerce-form-coupon-toggle)
  > form.woocommerce-checkout.checkout{
  padding-bottom: var(--jay-d19-checkout-section-gap);
}

/* Reapply the complete Ohio/Demo19 alert-close primitive after Demo20's
   global icon-button rules. This preserves the official 40px target, 14px
   glyph, inherited dark-mode color and all native hover/focus/active states. */
body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info:not(.-hidden){
  align-items: center;
}

/* The scoped alert-link rest color is intentionally stronger than the global
   Ohio anchor rule. Restore the official red interaction with an equally
   bounded final winner; resting color and link geometry remain untouched. */
body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .woocommerce-form-coupon-toggle
  .alert.woocommerce-info
  a.showcoupon:where(:hover, :focus-visible){
  color: #d91842;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]{
  min-width: var(--clb-circle-extra-small);
  width: var(--clb-circle-extra-small);
  height: var(--clb-circle-extra-small);
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  background-color: transparent;
  color: inherit;
  box-shadow: none;
  outline: none;
  transition: background-color var(--clb-transition-function) var(--clb-transition-duration);
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]
  > .icon{
  width: initial;
  height: initial;
  margin: 0;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  line-height: var(--clb-h1-line-height);
  opacity: 1;
  transform: none;
  transition: all var(--clb-transition-function) var(--clb-transition-duration);
  transition-property: transform, opacity;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]
  > .icon
  svg{
  width: 14px;
  height: 14px;
  overflow: hidden;
  transform: scale(0.9);
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]
  > .icon
  svg
  path{
  fill: currentColor;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]:hover{
  background-color: var(--clb-color-fill);
  color: inherit;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]:hover
  > .icon{
  opacity: 0.75;
  transform: var(--clb-transform-scale, scale3d(1.06, 1.06, 1.06));
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]:focus,
body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]:active{
  background-color: var(--clb-color-fill);
  color: inherit;
  outline: none;
  box-shadow: inset 0 0 0 0.3125rem color-mix(in srgb, var(--clb-color-neutral) 15%, transparent);
}

body.woocommerce-checkout.demo33-demo20-commerce.icon-buttons-animation .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]::before{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: #d91842;
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  transition: all var(--clb-transition-function) var(--clb-transition-duration);
}

body.woocommerce-checkout.demo33-demo20-commerce.icon-buttons-animation .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-after-form
  .alert.woocommerce-info
  > .icon-button.-extra-small[data-js="close-alert"]:focus::before{
  animation: var(--clb-transition-duration) jay-demo19-checkout-alert-click var(--clb-transition-function) 1;
}

@keyframes jay-demo19-checkout-alert-click{
  from {
    opacity: 0.15;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(4);
  }
}

/*
 * WooCommerce places the privacy copy inside `.form-row.place-order`. Demo19's
 * two donor styles give both nodes a top divider, which produces a redundant
 * pair of horizontal rules. Keep the established 26px section gap on the
 * outer row, but remove only those two nested dividers and their internal
 * padding/margin. Payment, privacy-link and submit ownership stays native.
 */
body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-payment
  #payment
  > .form-row.place-order{
  padding-top: 0;
  border-top: 0;
}

body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
  .jay-demo19-checkout-payment
  #payment
  > .form-row.place-order
  .woocommerce-privacy-policy-text{
  margin-top: 0;
  border-top: 0;
}

/* Cart uses WooCommerce's native input/label shipping rows. The shared field
 * label primitive is block-level; give these rows their own horizontal layout
 * without changing the radio, rate value or label click ownership. */
body.woocommerce-cart.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content .cart_totals ul.woocommerce-shipping-methods{
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

body.woocommerce-cart.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content .cart_totals ul.woocommerce-shipping-methods > li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
}

body.woocommerce-cart.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content .cart_totals ul.woocommerce-shipping-methods > li + li{
  margin-top: 9px;
}

body.woocommerce-cart.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content .cart_totals ul.woocommerce-shipping-methods > li > input[type="radio"]{
  flex: 0 0 var(--clb-spacer-3);
  margin: calc((1.5em - var(--clb-spacer-3)) / 2) 0 0;
  font: inherit;
}

body.woocommerce-cart.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content .cart_totals ul.woocommerce-shipping-methods > li > label{
  flex: 1;
  min-width: 0;
  margin: 0;
  font: inherit;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 768px){
  body.woocommerce-checkout.demo33-demo20-commerce .jay-demo19-transaction-surface .site-content
    #order_review
    > table.woocommerce-checkout-review-order-table{
    font-size: 14px;
  }
}

@media screen and (min-width: 1181px) and (max-width: 1440px){
  :where(body.woocommerce-cart, body.woocommerce-checkout).demo33-demo20-commerce .jay-demo19-transaction-surface
    .page-headline
    .title{
    /* Match the captured Ohio desktop breakpoint, which wins at 4rem. */
    font-size: 4rem;
  }
}