Custom CSS rules for Woocommerce

woo-cart-page.php

<?php 
// Do Not Copy the <?php tag above.

/* add white-space breaking to buttons */
.btn {
  white-space: normal !important;
}

/* order details text over flow fix */	
.entry-content .woocommerce-order-details > .woocommerce-table{
  word-break: break-word;
}

/* order details price box fix */
.woocommerce-order-details .woocommerce-table__product-table{
  width: 42%;
}

/* move background to middle on small screens */
@media screen and (max-width:500px){
	body.custom-background::before{
		height: 100vh !important;
		width: 150% !important;
		}
}

/* forminator draft box */
.color-neutral-background-color .draft-success {
	background-color: rgba(236, 40, 40, 1) !important;
}

/* forminator consent box background */
.container #consent-1 {
	background-color: rgba(221, 51, 51, 1);
}

/* Expand update cart button */
.actions [name="update_cart"],
.actions > .bgtfw-table-vertical-align > [name="update_cart"] {
  width: 33.4%;
}

/* Expand coupon section */
.actions .coupon,
.actions > .bgtfw-table-vertical-align > .coupon {
  min-width: 66.6%;
}

/* Expand coupon code input field */
.actions .coupon > [name="coupon_code"],
.actions > .bgtfw-table-vertical-align > .coupon > [name="coupon_code"]{
  width: 50%;
  min-width: 45%;
  margin-right: 2.5% !important;
}

/* Apply Coupon button align and expand */
.actions .coupon > [name="apply_coupon"],
.actions > .bgtfw-table-vertical-align > .coupon > [name="apply_coupon"]{
  width: 50%;
  min-width: 45%;
  padding-left: .5em;
  padding-right: .5em;
}

/* product card background colors */
.products > .wow { 
    background-color: rgba( 0% , 0% , 0% , 80% ) !important; 
}

/* Mobile responses for checkout page */
@media only screen and (max-width: 768px) {
  /* resize shopping cart table on smaller screens */
  .actions > .bgtfw-table-vertical-align {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    flex-direction: column;
  }
  
  /* Expand coupon bar to it's own row on smaller screens */
  .actions > .coupon,
  .actions > .bgtfw-table-vertical-align > .coupon {
    width: 100%
  }
  
  /* Apply coupon button squish to fit on screen */
  .actions > .coupon > [name="apply_coupon"],
  .actions > .bgtfw-table-vertical-align > .coupon > [name="apply_coupon"]{  
    width: 100%;
    min-width: 46%
  }
  
  /* Stretch update cart button to use it's own row */
  .actions > [name="update_cart"],
  .actions > .bgtfw-table-vertical-align > [name="update_cart"] {
    width: 100%
  }
}

/* Mobile responses for WooCommerce notifications */
@media (max-width: 576px) {
  /* Snap notification wrapper to page size */
  .woocommerce-notices-wrapper > .alert {
    width: 100% !important;
  }
  
  /* Pull close button up slightly on notifications */
  .woocommerce-notices-wrapper > .alert > .close {
    margin-top: -0.5em;
  }
  
  /* Expand message to fit on smaller screens and let button and text occupy their own rows */
  .woocommerce-notices-wrapper > .alert > .alert-message {
    display: inline-block;
    width: 100% !important;
    margin: 0px !important;
  }
  
  /* Fit notification button on it's own row */
  .woocommerce-notices-wrapper > .alert > .alert-message > .wc-forward {
    width: 100% !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
  }
  
  /* Expand coupon bar to it's own row on smaller screens */
  .actions > .coupon,
  .actions > .bgtfw-table-vertical-align > .coupon {
    display: inline !important;
    width: 100%
  }
  
  /* make coupon code input box it's own row on very small devices */
  .actions > .coupon > #coupon_code,
  .actions > .coupon > [name="apply_coupon"],
  .actions > .bgtfw-table-vertical-align > .coupon > #coupon_code{
    margin-bottom: .5em;
    width: 100% !important;
  }
}