/**
 * Pixelated Orange - Custom Checkout
 * Structural + colour-variable styling. Colour values are set inline from
 * ACF settings by PO_Checkout_Public::oc_colors(); the values below are
 * fallbacks used before that inline block loads.
 *
 * Note: a handful of rules further down (search "stripe_cc" / "ppcp-") are
 * gateway-specific selectors for Stripe and PayPal Commerce Platform. They
 * simply won't match anything if those gateways aren't installed, so
 * they're harmless to ship generically, but worth knowing about if you're
 * using a different payment gateway and the payment step styling looks off.
 * The original theme's oc-override.css (fixed pixel offsets tied to one
 * theme's header height, plus more gateway-specific rules) was NOT ported -
 * that was 100% specific to the original site and would misalign or target
 * nonexistent elements anywhere else.
 *
 * Sections below (in order):
 *   1. Root colour/style variables
 *   2. Base resets & globally hidden elements
 *   3. Checkout wrapper layout (flex scaffolding, two-column grid)
 *   4. Step navigation & step content panels
 *   5. Login popup
 *   6. Headings & content boxes
 *   7. Form fields & labels
 *   8. Buttons
 *   9. Order review table / cart items
 *  10. Information review box (Information/Shipping/Payment summary)
 *  11. Shipping methods, billing address choice & radio/checkbox reset
 *  12. Gifting & billing extras
 *  13. Payment methods
 *  14. Coupon field
 *  15. Terms, privacy & newsletter
 *  16. Thank-you / order-received page
 *  17. Order summary panel (mobile toggle + sidecart edit link)
 *  18. Footer & logged-in saved info
 *  19. Alternate radio/checkbox style ("ufa-1" opt-in class)
 *  20. WooCommerce Blocks notices
 *  21. Misc toggles
 *  22. WooCommerce cart page (not checkout)
 *  23. Mobile responsive overrides
 */

/* ==========================================================================
   1. Root colour/style variables
   ========================================================================== */
:root{

	--oc-body-text-color: 			#2b2b2b;

	/* Page Background */
	--oc-left-side-bg: 				#e7e5e4;
	--oc-right-side-bg: 			#fff;

	/* Checkout Steps */
	--oc-steps-font-family: 		inherit;
	--oc-steps-font-size: 			1em;
	--oc-steps-text-transform: 		uppercase;
	--oc-steps-color: 				#2b2b2b;
	--oc-steps-active-color: 		#2b2b2b;
	--oc-steps-active-font-weight: 	500;

	/* For text: Your Order, Information, Shipping Address, Shipping Methods, Payment */
	--oc-heading-font-family: 		inherit;
	--oc-heading-font-size: 		18px;
	--oc-heading-font-weight: 		700;
	--oc-heading-text-transform: 	uppercase;
	--oc-heading-color: 			#000000;

	/* Fields */
	--oc-field-background: 					#fff;

	--oc-field-label-color-when-empty: 		#737373;
	--oc-field-label-color--when-filled: 	#737373;
	--oc-field-label-font-weight: 			400;
	--oc-field-label-text-transform: 		none;
	--oc-field-label-font-size: 			12px;

	--oc-field-border-color: 				#ffffff;
	--oc-field-focus-border-color: 			#000000;
	--oc-field-error-border-color: 			#a00;

	--oc-field-text-color: 					#333333;
	--oc-field-text-font-size: 				16px;
	--oc-field-text-font-weight: 			300;
	--oc-field-text-text-transform: 		none;
	--oc-field-border-radius: 				6px;

	/* Back to shop link */
	--oc-back-to-shop-font-family: 			inherit;
	--oc-back-to-shop-font-size: 			1em;
	--oc-back-to-shop-font-weight: 			300;
	--oc-back-to-shop-text-transform: 		none;
	--oc-back-to-shop-color: 				#2b2b2b;
	--oc-back-to-shop-hover-color: 			#000;

	/* bottom navigation buttons */
	--oc-btn-padding:						13px 30px;
	--oc-btn-font-family: 					inherit;
	--oc-btn-font-size: 					14px;
	--oc-btn-font-weight: 					300;
	--oc-btn-text-transform: 				none;
	--oc-btn-border-radius: 				5px;
	--oc-btn-background-color: 				#2b2b2b;
	--oc-btn-hover-background-color: 		#000000;
	--oc-btn-text-color: 					#fff;
	--oc-btn-hover-text-color: 				#fff;
	--oc-btn-coupon-background-color:		#e7e5e4;
	--oc-btn-coupon-text-color:				#2b2b2b;
	--oc-have-coupon-text-color:			#2b2b2b;

	/* Order Items */
	--oc-product-name-font-family: 			inherit;
	/* 1em = the surrounding (body) font size, set by the theme or any stylesheet. */
	--oc-product-name-font-size: 			1em;
	--oc-product-name-font-weight: 			300;
	--oc-product-name-text-transform: 		none;
	--oc-product-name-color:				#2b2b2b;

	--oc-product-qty-bg-color:				#2b2b2b;
	--oc-product-qty-text-color:			#fff;

	/* Information summary box */
	--oc-info-summary-box-font-size:		1em; /* body font size */
	--oc-change-text-color:					#2b2b2b;
	--oc-change-text-hovercolor:			#000000;

	/* radio and checkbox */
	--oc-radio-checked-color:				#2b2b2b;

	/* Thank you page */
	--oc-thank-you-check-color:				#77b255;
	--oc-secondary-heading-color:			#2b2b2b;
	--oc-secondary-heading-font-size:		16px;
	--oc-secondary-heading-font-weight:		500;

	/* Content box surface (.owc-box, used on the thank-you page) - a
	   documented surface other plugins can target/reuse if they want
	   content they drop into this checkout (via its do_action hooks) to
	   look native rather than carrying their own plugin's own styling. */
	--oc-box-bg:							#fff;
	--oc-box-text:							inherit;
}

/* ==========================================================================
   2. Base resets & globally hidden elements
   ========================================================================== */
/* Stops a top margin on the page content (a fixed-header offset from this
   plugin or the theme) collapsing up through <body> and pushing the body
   box down. select2 places its country/state dropdowns inside <body>, so
   when that happened they opened that many pixels away from their field. */
body.woocommerce-checkout::before{
	content: "";
	display: table;
}

input:-webkit-autofill {
	-webkit-box-shadow:0 0 0 50px white inset;
	-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 50px white inset;
	-webkit-text-fill-color: #333;
}
input {
  filter: none;
}
.input-text::placeholder,
.input-text::-webkit-input-placeholder {
  color: var(--oc-field-label-color-when-empty);
}
.show-step-0 .hide-for-login-checkout,
.woo-hide-header.woocommerce-checkout #masthead,
/* "Hide Menu" - every theme names its primary nav differently, so the
   actual selector to hide is entered via the "Menu CSS selector" option
   field and injected inline in class-po-checkout-public.php (oc_colors()).
   No selector is hardcoded here. */
.woocommerce-checkout .xoo-wsc-footer,
.woocommerce-form-login-toggle,
.woocommerce-checkout form.woocommerce-form.woocommerce-form-login p.lost_password,
.woocommerce .clear, .woocommerce-cart .entry-header,
#is_it_gift_order_name_field,
#is_it_gift_order_message_field,
label .optional {
	display: none;
}

/* ==========================================================================
   3. Checkout wrapper layout (flex scaffolding, two-column grid)
   ========================================================================== */
#owc-checkout-wrapper {
	background-color: var(--oc-left-side-bg);
	/* Was hardcoded to 100vh - 135px, which only happened to work for
	   whatever header height the original theme had. Now driven by the
	   same --oc-fixed-header-height JS measures for the "Fixed header"
	   option (see oc-checkout.js) - the 135px stays only as the fallback
	   for sites that don't use that option. */
	/* One screen tall, minus the header + admin bar above it (measured by
	   oc-checkout.js), so the footer starts right at the bottom of the
	   screen instead of a scroll further down. */
	min-height: calc(100vh - var(--oc-above-content, 0px));
	/* Turns this wrapper into a flex column so that height cascades down
	   to .owc-row's columns below (see .owc-container / form.checkout /
	   .owc-row rules) - this is what lets .left-container/.right-container
	   actually stretch to the wrapper's full height themselves, instead of
	   only reaching their own content height. */
	display: flex;
	flex-direction: column;
	/* No overflow clipping here: it cut off .right-container::before's
	   bleed whenever the checkout sat inside a narrower centred theme
	   wrapper. The bleed is now sized exactly to the browser edge instead
	   (see .right-container::before), so there's nothing to clip. */
}
/* "Cart height" set to auto (the class carries the setting's value). */
#owc-checkout-wrapper.owc-checkout-wrapper-height-1,
.woocommerce-order.owc-checkout-wrapper-height-1{min-height: auto!important}
#owc-checkout-wrapper > .owc-container{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}
#owc-checkout-wrapper form.checkout.woocommerce-checkout{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}
#owc-checkout-wrapper .owc-row{
	flex: 1 1 auto;
	width: 100%;
}

.owc-order-summary .checkout-left-holder{width: 100%}

.woocommerce-checkout .woocommerce, .woocommerce-cart .woocommerce{
	background-color: var(--oc-left-side-bg);
	color: var(--oc-body-text-color);
}
.woocommerce-checkout .woocommerce .woocommerce-notices-wrapper {
	width: 50%;
}
.woocommerce-checkout .woocommerce .woocommerce-notices-wrapper ul{
	padding: var(--oc-global-spacing, 20px);
}
.owc-container{
	margin: 0 auto;
	padding-left: 0; padding-right: 0
}
.owc-container-1{
	max-width: 100%;
}
.owc-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: 0;
	margin-left: 0;
}
.owc-col {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	-ms-flex-preferred-size: 0;
	flex-basis: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}
.left-container{
	padding: var(--oc-global-spacing, 20px);
	-webkit-box-flex: 0;
	-ms-flex: 0 0 65%;
		flex: 0 0 65%;
			max-width: 65%;
}
.right-container{
	padding: 0;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 35%;
		flex: 0 0 35%;
			max-width: 35%;
	background-color: var(--oc-right-side-bg);
	border-left: 1px solid var(--oc-right-side-bg);
	/* Anchors the bleed pseudo-element below, so it sizes itself against
	   this column's own box instead of the viewport. */
	position: relative;
}

.ratio-half .left-container, .ratio-half .right-container{
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}
/* When the checkout page itself sits inside a theme wrapper narrower than
   the full browser width (common on "Narrow" cart-width setups, or any
   theme with a centered max-width content area), .right-container's own
   background only covers its own column box, leaving a gap of the page's
   normal background between the column and the true right edge of the
   browser. This pseudo-element bleeds the right-side colour out to (at
   least) a full viewport width without touching layout, and - unlike the
   old position:fixed version - it's positioned against .right-container
   itself (which is now position:relative), so top/bottom automatically
   match this column's real height. No dependency on the fixed-header
   variable needed here at all. */
.right-container::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	/* Exactly from this column's left edge to the browser's right edge -
	   measured by oc-checkout.js (--oc-right-bleed) so it never overflows
	   the page and needs no overflow clipping (which would break sticky). */
	width: var(--oc-right-bleed, 100%);
	background-color: var(--oc-right-side-bg);
	z-index: 0;
}
.right-container .content-wrapper{
	position: relative;
	z-index: 1;
	/* .content-wrapper is also .owc-order-summary. */
	padding: var(--oc-global-spacing, 20px);
}
.owc-container-1 .right-container .content-wrapper{
	padding-right: var(--oc-global-spacing, 20px);
}

/* ==========================================================================
   4. Step navigation & step content panels
   ========================================================================== */
.show-step-0 .step-1.step-content,
.show-step-0 .step-2.step-content,
.step-2.step-content,
.step-3.step-content{
	display: none;
}
.show-step-0 .step-3.step-content{
	display: block;
}
.step-content{
	background-color: var(--oc-step-content-bg, transparent);
	color: var(--oc-step-content-text-color, inherit);
	border-radius: var(--oc-step-content-border-radius, 0);
	padding: var(--oc-step-content-padding, 0);
	font-size: var(--oc-step-content-font-size, 16px);
}
.step-content label{
	font-weight: var(--oc-step-content-label-font-weight, 400);
	text-transform: var(--oc-step-content-label-text-transform, none);
}
.owc-only-virtual-products-checkout .step-1.step-content,
.owc-only-virtual-products-checkout .step-2.step-content,
.owc-only-virtual-products-checkout .step-3.step-content{
	display: block;
}
.owc-only-virtual-products-checkout .step-1 .inofmation-box {
  margin-bottom: 0;
}
.owc-checkout-steps-wrapper{
	padding: 0;
	list-style: none;
	margin: 0 0 var(--oc-global-spacing, 20px);
}
.owc-checkout-steps-wrapper li{
	display: inline-block;
}
.owc-checkout-steps-wrapper li:after{
	content: ">";
	display: inline-block;
	vertical-align: top;
	margin: 0 6px 0 4px;
}
.owc-checkout-steps-wrapper li:last-child:after{
	display: none;
}
body .owc-checkout-steps-wrapper li a,
body .owc-checkout-steps-wrapper li span{
	font-family: var(--oc-steps-font-family);
	font-size: var(--oc-steps-font-size);
	text-transform: var(--oc-steps-text-transform);
	color: var(--oc-steps-color);
	margin-right: 0 !important;
}
body .owc-checkout-steps-wrapper li a.active {
	color: var(--oc-steps-active-color);
	font-weight: 700;
}

/* ==========================================================================
   5. Login popup
   ========================================================================== */
.woocommerce-checkout form.woocommerce-form.woocommerce-form-login.login {
	display: block !important;
	background-color: #fff;
	position: fixed;
	z-index: 9999;
	width: 100%;
	padding: 40px 20% 60px;
	box-shadow: 0px 50px 1000px;
	top: -100%;
	transition: 0.3s;
}
.woocommerce-checkout form.woocommerce-form.woocommerce-form-login p{
	padding: 6px;
}
.woocommerce-checkout form.woocommerce-form.woocommerce-form-login.login .form-row{
	max-width: 100%;
}
.woocommerce-checkout form.woocommerce-form.woocommerce-form-login.login.active{
	top: 0;
}

.woocommerce-checkout form.woocommerce-form.woocommerce-form-login #close-login-popup {
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	display: inline;
	width: fit-content;
}

/* ==========================================================================
   6. Headings & content boxes
   ========================================================================== */
body.woocommerce-order-received .woocommerce-order h2,
body.woocommerce-order-received .woocommerce-order h3,
#owc-checkout-wrapper .shipping_address h3,
#owc-checkout-wrapper h3{
	font-family: var(--oc-heading-font-family);
	font-size: var(--oc-heading-font-size);
	font-weight: var(--oc-heading-font-weight);
	text-transform: var(--oc-heading-text-transform);
	color: var(--oc-heading-color);
	margin-bottom: var(--oc-global-small-spacing, 10px);
	margin-top: 0;
}
.owc-box{
	background-color: var(--oc-box-bg);
	color: var(--oc-box-text);
	padding: var(--oc-global-small-spacing, 10px);
	border: none;
	border-radius: 6px;
	margin-bottom: var(--oc-global-spacing, 20px);
}
.owc-box p{
	margin-bottom: 0;
}
.owc-box h3 {
	margin-bottom: var(--oc-global-small-spacing, 10px) !important;
}
.owc-box h4 {
	color: var(--oc-secondary-heading-color);
	font-size: var(--oc-secondary-heading-font-size);
	margin-bottom: var(--oc-global-small-spacing, 10px) !important;
	font-weight: var(--oc-secondary-heading-font-weight);
}
.inofmation-box {
	margin-bottom: var(--oc-global-spacing, 20px);
}
.owc-box .order-info-value {
	margin-bottom: var(--oc-global-spacing, 20px);
}
.owc-logo{
	text-align: left;
	margin: 0 0 var(--oc-global-spacing, 20px);
}
.custom-logo-link {
	display: block;
	max-width: 150px;
}
.owc-logo img{
	max-height: 50px;
	max-width: 150px !important;
}

/* ==========================================================================
   7. Form fields & labels
   ========================================================================== */
#ship-to-different-address{
	display: none;
}
.woocommerce-checkout .form-row{
	position: relative;
}
.woocommerce-checkout .form-row label{
	position: absolute;
	color: var(--oc-field-label-color--when-filled);
	font-weight: var(--oc-field-label-font-weight);
	text-transform: var(--oc-field-label-text-transform);
	-webkit-transition: all .2s ease-out;
	transition: all .2s ease-out;
	font-size: var(--oc-field-label-font-size);
	margin-top: .25em;
	padding: 0 1.16em;
	line-height: 2;
	opacity: 0;
	z-index: 1;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select{
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background: var(--oc-field-background);
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	color: var(--oc-field-text-color);
	padding: 15px 12px;
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: var(--oc-field-text-font-size);
	font-weight: var(--oc-field-text-font-weight);
	text-transform: var(--oc-field-text-text-transform);
	line-height: 16px !important;
	border-radius: 6px !important;
	border: 1px solid #ffffff;
	-webkit-transition-delay: 0s,0s;
	transition-delay: 0s,0s;
	-webkit-transition-duration: .2s,0s;
	transition-duration: .2s,0s;
	-webkit-transition-property: all,width;
	transition-property: all,width;
	-webkit-transition-timing-function: ease-out,ease;
	transition-timing-function: ease-out,ease;
}

.woocommerce-checkout .form-row textarea{margin-top: var(--oc-global-small-spacing, 10px) !important}

.woocommerce-checkout .form-field--is-filled input.input-text {
	padding: 24px 12px 6px;
}
.woocommerce-checkout .form-field--is-filled label {
	opacity: 1;
}
/* The floating-label pattern above (label absolutely positioned over the
   input, hidden until .form-field--is-filled toggles it visible via JS) is
   only meant for the address/contact fields it was designed for. Payment
   gateways wrap their own extra fields (card details, "save this card"
   checkboxes, etc.) in plain .form-row/<label> markup inside #payment too,
   but nothing ever adds .form-field--is-filled there, so those labels were
   left permanently invisible/overlapping other payment content. This is a
   separate, additive rule (not a rewrite of .form-row label above) so it
   can't affect that rule's specificity or its interaction with the
   .form-field--is-filled override on the actual address fields - it only
   resets the payment area back to static, always-visible labels. */
#payment .form-row label{
	position: static;
	opacity: 1;
}
.form-row input.input-text:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--oc-field-focus-border-color);
  box-shadow: none;
}
.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--oc-field-error-border-color);
}
#owc-checkout-wrapper .select2-container--default .select2-selection--single,
.woocommerce-address-fields__field-wrapper .select2-container--default .select2-selection--single,
#owc-checkout-wrapper select {
	border: 1px solid #ffffff;
	border-radius: 6px !important;
	padding: 12px;
	height: auto;
	background-color: var(--oc-field-background);
	width: 100%;
	margin-bottom: 0;
	background-size: 12px; background-position: center right; background-repeat: no-repeat}

#owc-checkout-wrapper select{
	-webkit-appearance: none;
	color: var(--oc-field-text-color);
	background-color: var(--oc-field-background);
}
.woocommerce-checkout .select2-dropdown{
	background-color: var(--oc-field-background)!important;
}

.woocommerce-checkout .select2-selection__rendered{
	background-color: var(--oc-field-background)!important;
	color: var(--oc-field-text-color)!important;
	font-size: var(--oc-field-text-font-size);
	font-weight: var(--oc-field-text-font-weight);
	padding: 0px!important; height: auto
}

.select2-selection{height: auto!important}

.woocommerce-address-fields__field-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered,
#owc-checkout-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 19px;
	padding: 0;
}
.woocommerce-address-fields__field-wrapper .select2-container--default .select2-selection--single  .select2-selection__arrow,
#owc-checkout-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow{
	top: 13px;
	right: 12px;
}
.woocommerce-EditAccountForm.edit-account em {
	font-size: 1em;
	line-height: 16px;
	display: block;
	margin-top: var(--oc-global-small-spacing, 10px);
}
.woocommerce-address-fields__field-wrapper,
.woocommerce-shipping-fields {
	margin-bottom: var(--oc-global-spacing, 20px);
}
.woocommerce-address-fields__field-wrapper,
.woocommerce-account .woocommerce-EditAccountForm.edit-account,
.woocommerce-account form.woocommerce-form.woocommerce-form-login.login,
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper{
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--oc-global-small-spacing, 10px);
}
form.woocommerce-form.woocommerce-form-login.login p,
.woocommerce-EditAccountForm.edit-account p,
p.form-row{
	grid-column: 1 / -1;
	margin-bottom: 0;
}
.woocommerce-EditAccountForm.edit-account fieldset {
  padding: 0;
  border: none;
  grid-column: 1 / -1;
  gap: var(--oc-global-small-spacing, 10px);
  display: grid;
}
.woocommerce-EditAccountForm.edit-account fieldset legend {
	margin-left: 0;
	margin-top: var(--oc-global-small-spacing, 10px);
}
.woocommerce form .form-row-first, .woocommerce-page form .form-row-first,
.woocommerce form .form-row-last, .woocommerce-page form .form-row-last{
	float: none;
	grid-column: span 3 / span 3;
}
#shipping_city_field,
#shipping_state_field,
#shipping_postcode_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field{
	float: none;
	grid-column: span 2 / span 2;
}
#billing_address_2_field,
#shipping_address_2_field{
	float: none;
	grid-column: 1 / -1;
}
.inofmation-box #billing_email_field{
	padding: 0 !important;
}
#shipping_address_2_field .screen-reader-text {
  height: auto;
  clip: unset;
  clip-path: none;
  width: 100%;
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */
.go-back-btn{
	font-family: var(--oc-back-to-shop-font-family);
	font-size: var(--oc-back-to-shop-font-size);
	font-weight: var(--oc-back-to-shop-font-weight);
	text-transform: var(--oc-back-to-shop-text-transform);
	color: var(--oc-back-to-shop-color);
}
.go-back-btn:hover{
	color: var(--oc-back-to-shop-hover-color);
}
/*
 * Primary checkout buttons. Previously hardcoded to #000/#fff regardless of
 * the "Navigation buttons" colour fields in Checkout Options - changing
 * those fields silently did nothing for Place Order/Apply Coupon/Continue
 * Shopping, only the step-navigation buttons actually read the vars. Now
 * wired to the same --oc-btn-* vars everything else uses, with the
 * original #000/#fff as fallback so nothing changes for sites that haven't
 * touched those fields.
 *
 * The gift-card balance-check button selector previously targeted
 * #pwgc-redeem-button / #pwgc-balance-button - IDs belonging to a
 * different, third-party "PW WooCommerce Gift Cards" plugin, not
 * Pixelated Orange - Gift Cards. That never matched anything on a site
 * running the PO plugin; retargeted to .po-gc-balance-check's own submit
 * button (see pixelated-orange-gift-cards/includes/shortcode.php) so its
 * "Check Balance" button actually picks up this checkout's button style.
 */
.woocommerce-checkout form.woocommerce-form.woocommerce-form-login .woocommerce-form-login__submit,
.bottom-navigation button,
.woocommerce-checkout #place_order,
.owc-contimue-shopping,
button.apply_coupon_code, td.actions button, .po-gc-balance-check button[type="submit"] {
	padding: 10px 30px!important;
	background-color: var(--oc-btn-background-color, #000000);
	color: var(--oc-btn-text-color, #ffffff);
	font-family: var(--oc-btn-font-family);
	font-size: var(--oc-btn-font-size);
	font-weight: var(--oc-btn-font-weight);
	text-transform: var(--oc-btn-text-transform);
	border-radius: 6px;
	border: 1px solid var(--oc-btn-background-color, #000000)
}

.woocommerce-checkout form.woocommerce-form.woocommerce-form-login .woocommerce-form-login__submit:hover,
.bottom-navigation button:hover,
.woocommerce-checkout #place_order:hover,
.owc-contimue-shopping:hover,
button.apply_coupon_code:hover, td.actions button:hover, .po-gc-balance-check button[type="submit"]:hover{
	background-color: var(--oc-btn-hover-background-color, #ffffff);
	color: var(--oc-btn-hover-text-color, #000000);
}
.woocommerce-checkout form.woocommerce-form.woocommerce-form-login .woocommerce-form-login__submit{
	margin-top: 0;
}

/* ==========================================================================
   9. Order review table / cart items
   ========================================================================== */
#order_review,
#order_details{
	font-family: var(--oc-product-name-font-family);
	font-size: var(--oc-product-name-font-size);
	line-height: 1.35;
	color: var(--oc-product-name-color);
}
.bottom-navigation,
.shop_table.woocommerce-checkout-review-order-table .order-review-footer > div,
.shop_table.woocommerce-table--order-details .order-review-footer > div,
.inofmation-box-header{
	margin-top: var(--oc-global-spacing, 20px);
	display: -webkit-box;
		display: -ms-flexbox;
			display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
}
.inofmation-box-header{
	margin-top: 0;
}
.shop_table.woocommerce-checkout-review-order-table .order-review-footer > div,
.shop_table.woocommerce-table--order-details .order-review-footer > div{
	width: 100%;
	margin-top: 0;
	padding: var(--oc-global-small-spacing, 10px) 0;
}
.shop_table.woocommerce-checkout-review-order-table .order-review-footer .order-total,
.shop_table.woocommerce-table--order-details .order-review-footer .order_total {
	border-top: var(--oc-divider-border, 2px dashed #000000)!important;
	margin-top: var(--oc-global-small-spacing, 10px) !important;
	padding-top: var(--oc-global-small-spacing, 10px) !important;
	text-transform: var(--oc-heading-text-transform, uppercase);
	font-weight: bold;
}
.shop_table.woocommerce-checkout-review-order-table .order-review-footer,
.shop_table.woocommerce-table--order-details .order-review-footer {
	border-top: 1px solid #d5d5d5;
	padding-top: var(--oc-global-small-spacing, 10px);
	margin-top: var(--oc-global-spacing, 20px);
}
.shop_table.woocommerce-checkout-review-order-table > div,
.shop_table.woocommerce-table--order-details > div{
	display: -webkit-box;
		display: -ms-flexbox;
			display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: top;
}
.shop_table.woocommerce-checkout-review-order-table > div.cart_item {
	-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
}
.shop_table.woocommerce-checkout-review-order-table .product-image,
.shop_table.woocommerce-table--order-details .order_item .product-image,
.order-image-thumb {
	max-width: 70px;
	position: relative;
	width: 100%;

}
.shop_table.woocommerce-checkout-review-order-table .product-name,
.shop_table.woocommerce-table--order-details .order_item .product-name{
	padding: 0 var(--oc-global-small-spacing, 10px);
}
/* Product Review styling - the variation/meta lines (size, colour, any
   FPF field, etc.) WooCommerce prints under each item's name via
   wc_get_formatted_cart_item_data(), always output as a <dl class="variation">
   of <dt>label</dt><dd>value</dd> pairs regardless of what plugin supplied
   the data. "show variation label" (see PO_Checkout_Public::oc_colors())
   hides just the <dt> when off, leaving the value on its own. Each dt/dd
   pair is also wrapped in a <div class="po-variation-row"> (see
   po_checkout_wrap_variation_pairs() in the main plugin file), so a single
   pair can be laid out inline instead of the dl's default block stacking. */
.shop_table.woocommerce-checkout-review-order-table dl.variation{
	font-size: var(--oc-variation-font-size, 13px);
	color: var(--oc-variation-color, #2b2b2b);
}

.shop_table.woocommerce-checkout-review-order-table dl.variation{margin: 0px}
.shop_table.woocommerce-checkout-review-order-table dl.variation dd{
	text-transform: var(--oc-variation-text-transform, none); margin-left:0px
}
.shop_table.woocommerce-checkout-review-order-table dl.variation dt{
	font-weight: var(--oc-variation-label-font-weight, 400);
	text-transform: var(--oc-variation-label-text-transform, none);
}
.po-variation-row dt, .po-variation-row dd{display: inline-block; width: auto}

.po-variation-row dt{margin-right:5px}

.po-variation-row dd p{margin-bottom:2px}

.shop_table.woocommerce-checkout-review-order-table .product-total,
.shop_table.woocommerce-table--order-details .order_item .product-total{
	margin-left: auto;
	text-align: right;
}
.shop_table.woocommerce-checkout-review-order-table .product-total .subscription-details,
.shop_table.woocommerce-table--order-details .order_item  .subscription-details {
	display: block;
	font-size: 1em;
	line-height: 12px;
}
.shop_table.woocommerce-checkout-review-order-table .product-image .product-quantity,
.shop_table.woocommerce-table--order-details .order_item .product-image .product-quantity {
	position: absolute;
	top: -8px;
	right: -8px;
	font-size: 12px;
	background-color: var(--oc-product-qty-bg-color);
	width: 20px;
	height: 20px;
	color: var(--oc-product-qty-text-color);
	text-align: center;
	line-height: 1.55;
	border-radius: 50%;
}
.shop_table.woocommerce-checkout-review-order-table .cart_item{
	padding: var(--oc-global-small-spacing, 10px) 0;
}
/* .order_item is a table row, which can't take padding - pad its cells. */
.shop_table.woocommerce-table--order-details .order_item > td,
.shop_table.woocommerce-table--order-details .order_item > th{
	padding-top: var(--oc-global-small-spacing, 10px);
	padding-bottom: var(--oc-global-small-spacing, 10px);
}
.shop_table.woocommerce-table--order-details .order_item {
}

/* ==========================================================================
   10. Information review box (Information/Shipping/Payment summary)
   ========================================================================== */
.information-review-box{
	font-size: var(--oc-info-summary-box-font-size);
	background-color: var(--oc-field-background);
	/* Top/bottom come from the table cells' own padding. */
	padding: 0 var(--oc-global-small-spacing, 10px);
	border: 1px solid var(--oc-field-background);
	border-radius: 6px;
	margin-bottom: var(--oc-global-spacing, 20px);
	color: var(--oc-field-text-color);
}
.information-review-box table{
	margin: 0;
}

.information-review-box a.owc-information, .information-review-box a.owc-shipping, .information-review-box a.owc-payment {color: var(--oc-field-text-color)}

.information-review-box a.owc-information:hover, .information-review-box a.owc-shipping:hover, .information-review-box a.owc-payment:hover {color: var(--oc-btn-hover-background-color);}

.information-review-box tr td:first-child{
	font-weight: 700;
}

.information-review-box table th,
.information-review-box table td{
	border: none;
	background-color: transparent !important;
	padding: var(--oc-global-small-spacing, 10px) 0;
}
.information-review-box tr:last-child{border-bottom: none!important}

.information-review-box table tr{
	border-bottom: var(--oc-divider-border, 1px solid #000000)!important;
}

.information-review-box table tr:last-child{border-bottom: none!important}

.information-review-box table tr td:nth-child(2){
	padding-left: var(--oc-global-small-spacing, 10px);
	padding-right: var(--oc-global-small-spacing, 10px);
}
.information-review-box a{
	color: var(--oc-change-text-color);
}
.information-review-box a:hover{
	color: var(--oc-change-text-hover-color);
}

/* ==========================================================================
   11. Shipping methods, billing address choice & radio/checkbox reset
   ========================================================================== */
.owc-special-shipping-options-box  h3{margin-bottom:0px}

.owc-special-shipping-options-box ul{
	border: 1px solid var(--oc-field-border-color);
	border-radius: 6px;
	margin: -25px 0 var(--oc-global-spacing, 20px) !important;
	background-color: var(--oc-field-background);
	position: relative;
	list-style: none;
	padding: 0;
}


.owc-shipping-methods-box #shipping_method{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--oc-global-small-spacing, 10px)
}

.owc-shipping-methods-box #shipping_method li{
	flex: 1
}

.owc-shipping-methods-box #shipping_method li label, .owc-shipping-methods-box.one-method-only li label{
	background-color: var(--oc-field-background);
	border-radius: 6px;
	border: 1px solid var(--oc-field-border-color);
	padding-left: var(--oc-global-small-spacing, 10px)!important
}

.owc-special-shipping-options-box ul{
	margin-top: 0 !important;
}
.owc-shipping-methods-box.one-method-only li label::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #2b2b2b;
	position: absolute;
	left: 10px;
	top: 16px;
	box-shadow: 0 0 0 2px #2B2B2B;
	border: 2px solid #fff !important;
}
#billing_address_choice{
	margin-top: 0 !important;
	margin-bottom: var(--oc-global-spacing, 20px) !important;
	overflow: hidden;
}
#billing_address_choice h3{
	margin-bottom: var(--oc-global-spacing, 20px) !important;
}
.woocommerce .owc-shipping-methods-box #shipping_method li,
#billing_address_choice li,
.owc-special-shipping-options-box ul li{
	margin-bottom: 0;
	position: relative;
	margin-bottom: var(--oc-global-small-spacing, 10px);
}

.woocommerce .owc-shipping-methods-box #shipping_method li:last-child,
#billing_address_choice li:last-child,
.owc-special-shipping-options-box ul li:last-child{
	margin-bottom: 0px;
}

#billing_address_choice li > label{
	border: 1px solid var(--oc-field-border-color);
	border-radius: 6px;
	background-color: var(--oc-field-background);
}

.woocommerce .owc-shipping-methods-box #shipping_method li label,
#billing_address_choice li > label,
.owc-special-shipping-options-box ul li > label {
	width: 100%;
	display: block;
	padding: var(--oc-global-small-spacing, 10px);
	cursor: pointer;
	margin: 0;
	font-weight: 400;
	color: var(--oc-field-text-color);
}
.woocommerce .owc-shipping-methods-box #shipping_method li label .woocommerce-Price-amount.amount {
	font-weight: 400;
}
.owc-shipping-methods-box #shipping_method li:last-child,
#billing_address_choice li:last-child,
.owc-special-shipping-options-box ul li:last-child{
	border-bottom: none;
}
.owc-shipping-methods-box #shipping_method li input,
#billing_address_choice li > input,
.owc-special-shipping-options-box ul li > input,
.woocommerce-checkout #payment ul.payment_methods li > input{
	-webkit-appearance: none !important;
	width: 16px !important;
	height: 16px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #d5d5d5 !important;
	border: 2px solid #fff !important;
	display: inline-block;
	vertical-align: middle !important;
	margin: 3px 10px 0 0 !important;
	position: absolute;
	left: 10px;
	top: 13px;

}
.owc-shipping-methods-box #shipping_method li input:checked,
#billing_address_choice li > input:checked,
.owc-special-shipping-options-box ul li > input:checked,
.woocommerce-checkout #payment ul.payment_methods li > input:checked{
	background-color: var(--oc-radio-checked-color);
	box-shadow: 0 0 0 2px var(--oc-radio-checked-color) !important;
}

/* ==========================================================================
   12. Gifting & billing extras
   ========================================================================== */
.owc-gifting-option-box,
.owc-billing-address-box{
	margin-bottom: var(--oc-global-spacing, 20px);
}
.owc-gifting-option-box ul{
	margin-bottom: 0 !important;
}
#is_it_gift_order_name_field,
#is_it_gift_order_message_field {
  margin-top: var(--oc-global-small-spacing, 10px);
}
.billing-fields {
	padding: var(--oc-global-spacing, 20px) 0 0;
	background-color: transparent;
	display: none;
}

/* ==========================================================================
   13. Payment methods
   ========================================================================== */
.woocommerce-checkout #payment ul.payment_methods li > input{
	top: 15px;
}
body .woocommerce-checkout #payment {

}
body .woocommerce-checkout #payment ul.payment_methods{
	padding: 0;
	list-style: none;
}
body .woocommerce-checkout #payment ul.payment_methods li{
	position: relative;
	padding: 0;
	margin-bottom: var(--oc-global-small-spacing, 10px);
	border-radius: 6px;
	border: none
	overflow: hidden;
	color: var(--oc-field-text-color);
}
body .woocommerce-checkout #payment ul.payment_methods li:last-child{
	margin-bottom: 0px
}
body .woocommerce-checkout #payment ul.payment_methods li label {
	padding: 15px 10px 15px 36px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin: 0;
	background-color: var(--oc-field-background);
	color: var(--oc-field-text-color);
	border-radius: 6px
}

/* Gateway title is wrapped in .payment-method-label (see
   includes/po-checkout-payment-methods.php). The radio icon sits on the
   span, and margin-right:auto keeps several gateway icons grouped on the
   right rather than spread out by space-between. */
body .woocommerce-checkout #payment ul.payment_methods li label .payment-method-label{margin-right: auto}

body .woocommerce-checkout #payment ul.payment_methods li label .payment-method-label:before{content: '\f111'; font-family: "Font Awesome 6 Free"; font-weight: 400; padding-right:10px}

body .woocommerce-checkout #payment ul.payment_methods li label img{margin: 0}

body .woocommerce-checkout #payment ul.payment_methods li input.input-radio:checked + label{border: none}

body .woocommerce-checkout #payment ul.payment_methods li input.input-radio:checked + label .payment-method-label:before{content: '\f058'; font-weight: 900}

body .woocommerce-checkout #payment ul.payment_methods li.payment_method_stripe_cc input.input-radio:checked + label, body .woocommerce-checkout #payment ul.payment_methods li.payment_method_ppcp-credit-card-gateway input.input-radio:checked + label{border-radius: 6px 6px 0px 0px;}

body .woocommerce-checkout #payment div.payment_box{
	margin: 0;
	background-color: var(--oc-field-background);
	padding-left: var(--oc-global-small-spacing, 10px);
	padding-right: var(--oc-global-small-spacing, 10px);
	font-size: 1em;
}

body .woocommerce-checkout #payment div.payment_box p{
	margin-bottom:0px;
	padding: 0 0 var(--oc-global-small-spacing, 10px) 26px
}
body .woocommerce-checkout #payment div.payment_box::before{
	display: none;
}
.wc-stripe_cc-container.wc-stripe-gateway-container {
  padding: 0 var(--oc-global-small-spacing, 10px) var(--oc-global-small-spacing, 10px); border-radius: 0px 0px 6px 6px;
}
.wc-stripe_cc-new-method-container {
  margin-bottom: 0 !important;
}

.payment_method_stripe_cc{background-color: #ffffff!important}

.wc-stripe_cc-container .StripeElement:not(.payment-type){background-color: #f2f2f2!important}

.woocommerce-checkout #payment ul.payment_methods li > input{
	display: block !important;
}
body .woocommerce .form-row.place-order {
	padding: var(--oc-global-spacing, 20px) 0 !important;
}

/* ==========================================================================
   14. Coupon field
   ========================================================================== */
#coupon_field, .order-review-footer{border: none!important}

#coupon_field {
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-top: 1px solid #d5d5d5;
	padding-top: 13px !important;
	margin-top: var(--oc-global-spacing, 20px) !important;
}
#coupon_field .woocommerce-input-wrapper{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: var(--oc-global-small-spacing, 10px);
}
.apply_coupon_code {
	margin-left: var(--oc-global-small-spacing, 10px);
}

.coupon_applied_msg ul{list-style: none!important}

/* Coupon field border/radius/error-colour ACF fields style only the
   coupon code input itself - the applied/error message boxes underneath
   are left as native WooCommerce notices. The error colour applies to
   the input's text colour when a coupon fails, toggled via the
   "po-coupon-error" class added/removed by oc-checkout.js after the
   apply_coupon AJAX response comes back. */
#coupon_field input.input-text{
	border-width: var(--oc-coupon-field-border-width, 1px);
	border-style: solid;
	border-color: var(--oc-coupon-field-border-color, #000000);
	border-radius: var(--oc-coupon-field-border-radius, 0);
}
#coupon_field input.input-text.po-coupon-error{
	color: var(--oc-coupon-field-error-color, #a00);
}

/* ==========================================================================
   15. Terms, privacy & newsletter
   ========================================================================== */
.woocommerce-privacy-policy-text {
  margin-bottom: var(--oc-global-small-spacing, 10px);
}
.woocommerce-privacy-policy-text {
	font-size: 1em;
	line-height: 21px;
}
.woocommerce form .form-row.mc4wp-checkbox.mc4wp-checkbox-woocommerce,
.woocommerce form .woocommerce-terms-and-conditions-wrapper .form-row,
.woocommerce form.woocommerce-checkout .mailchimp-newsletter.form-row{
	padding-left: 0 !important;
	padding-right: 0 !important
}
.woocommerce form.woocommerce-checkout .mailchimp-newsletter.form-row {
	margin-top: var(--oc-global-small-spacing, 10px) !important;
}
.woocommerce-checkout .mailchimp-newsletter input[type="checkbox"]{
	display: none;
}
.mc4wp-checkbox.mc4wp-checkbox-woocommerce label,
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label,
.woocommerce-checkout .mailchimp-newsletter  label {
	opacity: 1;
	position: relative;
	padding-left: 0;
	padding-right: 0;
	margin-top: 0;
	font-size: 1em;
	color: #2b2b2b;
}
.woocommerce-terms-and-conditions-wrapper .required{
	display: none;
}

/* ==========================================================================
   16. Thank-you / order-received page
   ========================================================================== */
.woocommerce .woocommerce-customer-details .woocommerce-customer-details--email {
	display: none;
}
body .woocommerce .woocommerce-customer-details address {
	border: none;
	padding: 0;
}
.woocommerce-order {
	padding-top: 0px;
	/* No bottom padding - it left a strip under the full-height columns;
	   .left-container has its own padding. */
	padding-bottom: 0;
	min-height: calc(100vh - var(--oc-above-content, 0px));
	box-sizing: border-box;
}
.woocommerce-notice--error,
.woocommerce-notice--success{
	font-size: 1em;
	position: relative;
	margin: 0 0 var(--oc-global-spacing, 20px);
}
.woocommerce-notice--error span,
.woocommerce-notice--success span{
	display: block;
}
.woocommerce-notice--error span:first-child,
.woocommerce-notice--success span:first-child{
	font-size: 1em;
	line-height: 18px;
}
/* "Thank you {name}!" - styled like the other headings. */
.woocommerce-thankyou-order-received .order-info span:nth-child(2){
	font-family: var(--oc-heading-font-family);
	font-size: var(--oc-heading-font-size);
	font-weight: var(--oc-heading-font-weight);
	text-transform: var(--oc-heading-text-transform);
	color: var(--oc-heading-color);
}
.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ==========================================================================
   17. Order summary panel (mobile toggle + sidecart edit link)
   ========================================================================== */
.summary-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: var(--oc-global-small-spacing, 10px);
}
.open-summary-box{
	color: var(--oc-have-coupon-text-color);
	display: block;
	margin-bottom: var(--oc-global-small-spacing, 10px);
}
.owc-mobile-order-summary{
	background-color: var(--oc-right-side-bg);
	border-radius: 6px;
	border: 1px solid var(--oc-right-side-bg);
	margin-bottom: var(--oc-global-spacing, 20px);
	color: var(--oc-heading-color);
}
.owc-mobile-order-summary .owc-order-summary{
	padding: 0 var(--oc-global-spacing, 20px);
	display: none;
}
.owc-mobile-order-summary #order_review_heading {
	display: none;
}
#order_review_heading a{text-decoration: none!important}
/* A separate, older sidecart plugin's own Edit trigger (.xoo-wsc-cart-trigger)
   can still be injected here independently of this plugin's own settings if
   that plugin is still active on the site - hide it so it can't duplicate
   our own .po-open-sidecart Edit link above. That other plugin should really
   be deactivated since pixelated-orange-sidecart replaces it, but this stops
   the duplicate button in the meantime. */
#order_review_heading a.xoo-wsc-cart-trigger{
	display: none !important;
}
#order_review_heading .box-toggle{
	font-size: 1em;
	font-weight: 400;
	text-decoration: underline;
	cursor: pointer;
	float: right;
	margin-right: 0 !important;
}

/* ==========================================================================
   18. Footer & logged-in saved info
   ========================================================================== */
.left-col-footer {
	margin-top: calc(var(--oc-global-spacing, 20px) * 2);
	border-top: 1px solid #d5d5d5;
	padding: var(--oc-global-small-spacing, 10px) 0;
	font-size: 1em;
}
.left-col-footer ul{
	margin: 0;
	padding: 0;
}
.left-col-footer ul li{
	list-style: none;
	display: inline-block;
	margin-right: var(--oc-global-small-spacing, 10px);
	vertical-align: middle;
}
.logged-in-user .saved-info{
	background-color: #fff;
	padding: var(--oc-global-small-spacing, 10px) 100px var(--oc-global-small-spacing, 10px) var(--oc-global-small-spacing, 10px);
	border: 1px solid #d5d5d5;
	border-radius: 6px;
	position: relative;
	margin-bottom: var(--oc-global-spacing, 20px);
}
.logged-in-user .saved-info p{
	margin-bottom: 0;
}
.logged-in-user .saved-info a{
	position: absolute;
	right: var(--oc-global-small-spacing, 10px);
	top: var(--oc-global-small-spacing, 10px);
	background-color: transparent;
	padding-left: var(--oc-global-small-spacing, 10px);
}
.logged-in-user .information-review-box{
	overflow: hidden;
}
.logged-in-user .information-review-box th {
	text-align: left;
	font-weight: 700;
	background-color: transparent !important;
	padding-left: 0px;
	padding-right: var(--oc-global-small-spacing, 10px);
}
.logged-in-user .information-review-box a {
	padding-right: 8px;
}

/* ==========================================================================
   19. Alternate radio/checkbox style ("ufa-1" opt-in class)
   ========================================================================== */
.ufa-1 .owc-shipping-methods-box #shipping_method li input, .ufa-1 #billing_address_choice li > input, .ufa-1 .owc-special-shipping-options-box ul li > input, .ufa-1 .woocommerce-checkout #payment ul.payment_methods li > input, .ufa-1 .owc-shipping-methods-box.one-method-only li label::before{display: none!important}

.ufa-1 .woocommerce .owc-shipping-methods-box #shipping_method li label, .ufa-1 #billing_address_choice li > label, .ufa-1 .owc-special-shipping-options-box ul li > label, .ufa-1 .owc-shipping-methods-box.one-method-only li label, .ufa-1 #payment ul.payment_methods li label{padding-left:var(--oc-global-small-spacing, 10px)!important; position: relative}

.ufa-1 .woocommerce .owc-shipping-methods-box #shipping_method li label:after, .ufa-1 #billing_address_choice li > label:after, .ufa-1 .owc-special-shipping-options-box ul li > label:after, .ufa-1 .owc-shipping-methods-box.one-method-only li label:after,
.owc-shipping-methods-box #shipping_method li label:after{font-family: 'Font Awesome 6 Free'; font-weight: 900; content: '\f00c'; opacity: 0; float: right}


.ufa-1 .woocommerce .owc-shipping-methods-box #shipping_method li input:checked + label:after, .ufa-1 #billing_address_choice li > input:checked + label:after, .ufa-1 .owc-special-shipping-options-box ul li > input:checked + label:after, .ufa-1 .owc-shipping-methods-box.one-method-only li label:after,
.owc-shipping-methods-box #shipping_method li input:checked + label:after{opacity: 1}

.ufa-1 .owc-shipping-methods-box.one-method-only li label:after{opacity: 1!important}

.ufa-1 #payment div.payment_box p{padding-left:0px!important}

/* ==========================================================================
   20. WooCommerce Blocks notices
   ========================================================================== */
.wc-block-components-notice-banner.is-error{width: 100%; text-align: center}

.wc-block-components-notice-banner__content{padding-right:24px!important}

.wc-block-components-notice-banner.is-error{
	border-color: var(--oc-field-error-border-color)!important;
	background-color: transparent!important;
}

.wc-block-components-notice-banner.is-error>svg{
	background-color: var(--oc-field-error-border-color)!important;
}

/* ==========================================================================
   21. Misc toggles
   ========================================================================== */
.woo-show-header .owc-logo{display: none!important}

/* ==========================================================================
   22. WooCommerce cart page (not checkout)
   ========================================================================== */
.woocommerce-cart .site-content .wrap{padding-left:0px!important; padding-right:0px!important}

.cart_totals{width: 100%!important}

.cart-container table thead{display: none}

.cart-table, .cart-table tbody, .cart-table tbody tr{display: flex; flex-wrap: wrap; width: 100%}

.cart-table tbody tr td:first-child{flex: 1}

.cart-product{display: flex; flex-wrap: wrap; align-items: flex-start}

.cart-product-image img{box-shadow: none!important; max-width: 100px}

.cart-product-content{flex:1; padding-left:var(--oc-global-small-spacing, 10px)}

.cart-product-content a{text-decoration: none!important; box-shadow: none!important}

/* ==========================================================================
   23. Mobile responsive overrides
   ========================================================================== */
@media only screen and (max-width: 767px){
	/* On mobile .left-container/.right-container both go to flex:0 0 100%
	   below, so they stack as full-width rows anyway - the extra
	   flex-direction:column on the form (needed on desktop to let .owc-row
	   stretch to the wrapper's full height) isn't needed here, and was
	   pushing .owc-row's cross-axis sizing to shrink-to-content instead of
	   stretching to 100% width, leaving a gap to the right and horizontal
	   overflow. Dropping it back to the flex default (row) for a single
	   flex child (.owc-row) is a no-op for layout order but restores full
	   width. */
	#owc-checkout-wrapper form.checkout.woocommerce-checkout{
		flex-direction: row;
		flex-wrap: wrap;
	}
	.left-container,
	.right-container{
		padding: 0 var(--oc-global-spacing, 20px) var(--oc-global-spacing, 20px);
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.right-container{
		padding: 0;
		overflow: hidden;
		margin-top: var(--oc-global-spacing, 20px);
	}
	.right-container .content-wrapper{
		padding: var(--oc-global-spacing, 20px);
	}
	.summary-header{
		cursor: pointer;
	}
	.bottom-navigation{
		-webkit-box-pack: center;
			-ms-flex-pack: center;
				justify-content: center;
	}
	.bottom-navigation button{
		width: 100%;
	}
	.bottom-navigation .go-bact-btn{
		margin-bottom: var(--oc-global-small-spacing, 10px);
	}
	.owc-checkout-steps-wrapper{
		margin-top: var(--oc-global-spacing, 20px);
	}

	.woocommerce-page form .form-row-wide,
	form.woocommerce-ResetPassword.lost_reset_password p.woocommerce-form-row,
	.woocommerce-EditAccountForm.edit-account fieldset,
	.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li {
		float: none;
		grid-column: 1 / -1 !important;
	}
	#owc-checkout-wrapper .woocommerce-message {
		margin: 0 -15px;
	}
	.inofmation-box {
		margin-bottom: var(--oc-global-spacing, 20px);
	}
	.woocommerce-order h2, #owc-checkout-wrapper h3{
		margin-bottom: var(--oc-global-small-spacing, 10px);
	}
	.information-review-box{
		font-size: 1em;
	}
	.woocommerce-privacy-policy-text {
		font-size: 1em;
		line-height: 1.5;
	}
	.woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses{
		display: block;
	}
	.woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses .col-1{
		margin-bottom: var(--oc-global-spacing, 20px);
	}
	.woocommerce-checkout form.woocommerce-form.woocommerce-form-login.login{
		padding: 20px 20px 60px;
	}
	.woocommerce-checkout .woocommerce .woocommerce-notices-wrapper {
		width: 100%;
	}

	.bottom-navigation a{margin-bottom: var(--oc-global-small-spacing, 10px)}

	.information-review-box tr{display: flex; flex-wrap: wrap}

	.information-review-box tr td:first-child, .information-review-box tr td:last-child{width: 50%}

	.information-review-box tr td{order: 3; padding-left:0px!important; padding-right:0px!important}

	.information-review-box tr td:first-child{order: 1}

	.information-review-box tr td:last-child{order: 2; text-align: right}

	.information-review-box tr td:nth-child(2){padding-top:0px!important}

	#coupon_field .woocommerce-input-wrapper{flex-wrap: wrap}

	#coupon_field .woocommerce-input-wrapper input{margin-bottom: var(--oc-global-small-spacing, 10px)}

	#coupon_field .woocommerce-input-wrapper button{margin-left:0px; width: 100%}

	.mobile-order-summary-button:before{content: 'Show '}

	.owc-mobile-order-summary.active .mobile-order-summary-button:before{content: 'Hide '}
}


/* ==========================================================================
   21. Additions
   ========================================================================== */
.inofmation-box-header .full{width: 100%}

.owc-special-shipping-options-box{margin-top: var(--oc-global-spacing, 20px)}

/* Dropdown arrow on the delivery preference select - #owc-checkout-wrapper
   for specificity, as the general field rule's background shorthand
   (.woocommerce-checkout .form-row select) would otherwise clear the arrow. */
#owc-checkout-wrapper .owc-special-shipping-options-box select,
.woocommerce-checkout .owc-special-shipping-options-box .form-row select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
}

/* Gift option: + when not selected, - when selected (replaces the radio dot) */
.owc-gifting-option-box ul li > input{opacity: 0 !important; box-shadow: none !important}
.owc-gifting-option-box ul li > label{position: relative; padding-left: var(--oc-global-small-spacing, 10px) !important; padding-right: 40px !important}
.owc-gifting-option-box ul li > label::before{
	content: '+';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}
.owc-gifting-option-box ul li > input:checked + label::before{content: '\2212'}
.owc-gifting-option-box ul li > label::after{display: none !important}

/* Country / state dropdowns: same floating-label layout as the text fields
   (label shows above the value once a value is selected), so a dropdown
   sits level with the fields next to it. */
#owc-checkout-wrapper .form-row .select2-container--default .select2-selection--single{
	padding: 15px 12px;
}
#owc-checkout-wrapper .form-row.form-field--is-filled .select2-container--default .select2-selection--single{
	padding: 24px 12px 6px;
}
#owc-checkout-wrapper .form-row .select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height: 19px;
	font-weight: var(--oc-field-text-font-weight);
}
#owc-checkout-wrapper .form-row .select2-container--default .select2-selection--single .select2-selection__arrow{
	top: 50%;
	transform: translateY(-50%);
}

/* Postcode is typed in capitals, but its placeholder shouldn't be. */
#billing_postcode::placeholder,
#shipping_postcode::placeholder{
	text-transform: none;
}

/* Bottom navigation sits twice the large gap below the content above it
   (split out of the shared .bottom-navigation / order-review rule). */
.bottom-navigation{
	margin-top: calc(var(--oc-global-spacing, 20px) * 2);
}

/* Thanks page order summary: a single full-width column (no side padding). */
.owc-order-summary .owc-col{
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	/* .owc-col's own flex-basis: 0 would otherwise override the width. */
	flex: 0 0 100%;
}

/* Thanks page: same full-height scaffolding as #owc-checkout-wrapper, so
   with "Cart height" on full the two columns stretch to the bottom. */
.woocommerce-order{
	display: flex;
	flex-direction: column;
}
.woocommerce-order > .owc-container{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box;
}
.woocommerce-order > .owc-container > .owc-row{
	flex: 1 1 auto;
	width: 100%;
}

/* Thanks page summary headings. */
.owc-col h4{
	margin-bottom: var(--oc-global-small-spacing, 10px);
}

/* Thanks page forms (create account + feedback) sit in white .owc-box
   panels, so fields need a border to show against them. */
.woocommerce-order .owc-box .form-row input.input-text{
	border: 1px solid var(--oc-field-border-color);
}
.woocommerce-order .owc-box .form-row input.input-text:focus{
	border-color: var(--oc-field-focus-border-color);
}
.create-account-after-checkout .po-cac-submit{
	margin-top: var(--oc-global-spacing, 20px);
	margin-bottom: 0;
}
.create-account-after-checkout .po-cac-submit .button{
	padding: 10px 30px;
	background-color: var(--oc-btn-background-color, #000000);
	color: var(--oc-btn-text-color, #ffffff);
	font-family: var(--oc-btn-font-family);
	font-size: var(--oc-btn-font-size);
	font-weight: var(--oc-btn-font-weight);
	text-transform: var(--oc-btn-text-transform);
	border-radius: 6px;
	border: 1px solid var(--oc-btn-background-color, #000000);
	cursor: pointer;
}
.create-account-after-checkout .po-cac-submit .button:hover{
	background-color: var(--oc-btn-hover-background-color, #ffffff);
	border-color: var(--oc-btn-hover-background-color, #ffffff);
	color: var(--oc-btn-hover-text-color, #000000);
}

/* Feedback form (Gravity Forms, Orbital theme): drive its own CSS
   variables from the checkout Styling settings. !important because
   Gravity Forms prints its variables inline against the form's ID. */
.woocommerce-order .gform_wrapper.gform-theme{
	--gf-color-primary: var(--oc-btn-background-color) !important;
	--gf-color-primary-contrast: var(--oc-btn-text-color) !important;
	--gf-color-primary-darker: var(--oc-btn-hover-background-color) !important;
	--gf-ctrl-bg-color: var(--oc-field-background) !important;
	--gf-ctrl-bg-color-hover: var(--oc-field-background) !important;
	--gf-ctrl-bg-color-focus: var(--oc-field-background) !important;
	--gf-ctrl-border-color: var(--oc-field-border-color) !important;
	--gf-ctrl-border-color-hover: var(--oc-field-border-color) !important;
	--gf-ctrl-border-color-focus: var(--oc-field-focus-border-color) !important;
	--gf-ctrl-border-color-error: var(--oc-field-error-border-color) !important;
	--gf-ctrl-color: var(--oc-field-text-color) !important;
	--gf-ctrl-font-size: var(--oc-field-text-font-size) !important;
	--gf-ctrl-font-weight: var(--oc-field-text-font-weight) !important;
	--gf-ctrl-radius: 6px !important;
	--gf-radius: 6px !important;
	--gf-ctrl-label-color-primary: var(--oc-field-label-color--when-filled) !important;
	--gf-ctrl-label-color-secondary: var(--oc-field-label-color--when-filled) !important;
	--gf-ctrl-label-font-size-primary: var(--oc-field-label-font-size) !important;
	--gf-ctrl-label-font-size-secondary: var(--oc-field-label-font-size) !important;
	--gf-ctrl-label-font-size-tertiary: var(--oc-field-label-font-size) !important;
	--gf-ctrl-label-font-weight-primary: var(--oc-field-label-font-weight) !important;
	--gf-ctrl-btn-bg-color-primary: var(--oc-btn-background-color) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--oc-btn-hover-background-color) !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--oc-btn-hover-background-color) !important;
	--gf-ctrl-btn-border-color-primary: var(--oc-btn-background-color) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--oc-btn-hover-background-color) !important;
	--gf-ctrl-btn-color-primary: var(--oc-btn-text-color) !important;
	--gf-ctrl-btn-color-hover-primary: var(--oc-btn-hover-text-color) !important;
	--gf-ctrl-btn-font-size: var(--oc-btn-font-size) !important;
	--gf-ctrl-btn-font-weight: var(--oc-btn-font-weight) !important;
	--gf-ctrl-btn-text-transform: var(--oc-btn-text-transform) !important;
	--gf-ctrl-btn-radius: 6px !important;
	--gf-ctrl-btn-padding-x: 30px !important;
	--gf-field-gap-x: var(--oc-global-small-spacing, 10px) !important;
	--gf-field-gap-y: var(--oc-global-small-spacing, 10px) !important;
	--gf-form-gap-y: var(--oc-global-small-spacing, 10px) !important;
	--gf-form-gap-x: var(--oc-global-small-spacing, 10px) !important;
	--gf-label-space-primary: 4px !important;
}
.woocommerce-order .gform_wrapper .gform_footer{
	margin-top: var(--oc-global-spacing, 20px);
	padding: 0;
}

/* Show-password toggle: WooCommerce only styles it on My Account, so give
   it an eye icon inside the field here. */
.create-account-after-checkout .password-input{
	position: relative;
	display: block;
}
.create-account-after-checkout .password-input input.input-text{
	padding-right: 44px;
}
.create-account-after-checkout .show-password-input{
	position: absolute;
	top: 50%;
	right: 12px;
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat;
	box-shadow: none;
	cursor: pointer;
	font-size: 0;
}
.create-account-after-checkout .show-password-input::before,
.create-account-after-checkout .show-password-input::after{
	display: none;
}
.create-account-after-checkout .show-password-input.display-password{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* Intro text under the feedback / create account headings. */
.owc-box .owc-box-intro{
	margin-bottom: var(--oc-global-spacing, 20px);
}
.owc-box .owc-box-intro > :last-child{
	margin-bottom: 0;
}

/* Plain (non-select2) dropdowns, e.g. Delivery Preference: same floating
   label layout as the text fields, so the label doesn't sit over the value. */
#owc-checkout-wrapper .form-row select{
	padding-top: 15px;
	padding-bottom: 15px;
}
#owc-checkout-wrapper .form-row.form-field--is-filled select{
	padding-top: 24px;
	padding-bottom: 6px;
}

/* Order review footer rows: no top padding (the order total keeps its own). */
.shop_table.woocommerce-checkout-review-order-table .order-review-footer > div:not(.order-total),
.shop_table.woocommerce-table--order-details .order-review-footer > div:not(.order_total){
	padding-top: 0;
}

body:not(.po-oc-notices) #owc-checkout-wrapper .woocommerce-error,
body:not(.po-oc-notices) #owc-checkout-wrapper .woocommerce-info,
body:not(.po-oc-notices) #owc-checkout-wrapper .woocommerce-message,
body:not(.po-oc-notices) .woocommerce-order .woocommerce-error,
body:not(.po-oc-notices) .woocommerce-order .woocommerce-info,
body:not(.po-oc-notices) .woocommerce-order .woocommerce-message{
	border-top: none !important;
}

/* Order review footer rows (subtotal, shipping, total...): label normal,
   value bold, both in the heading text transform. */
.order-review-footer > div > div:first-child{
	text-transform: var(--oc-heading-text-transform, uppercase);
	font-weight: 400;
}
.order-review-footer > div > div:last-child{
	text-transform: var(--oc-heading-text-transform, uppercase);
	font-weight: 700;
}

/* Global body font size (Styling > General): the base size for the whole
   checkout and thanks page. Text without its own size setting follows it. */
#owc-checkout-wrapper,
.woocommerce-order{
	font-size: var(--oc-type-body-size, 14px);
	font-weight: var(--oc-type-body-weight, 400);
	text-transform: var(--oc-type-body-transform, none);
}
/* Small text: help / privacy text. */
.woocommerce-privacy-policy-text,
.woocommerce-EditAccountForm.edit-account em{
	font-size: var(--oc-type-small-size, 12px);
	font-weight: var(--oc-type-small-weight, 400);
	text-transform: var(--oc-type-small-transform, none);
}

/* Product titles (Styling > Product): size, weight and style. */
.shop_table.woocommerce-checkout-review-order-table .product-name-inner,
.po-oc-product-title,
.po-oc-product-title a{
	font-size: var(--oc-product-title-font-size, 1em);
	font-weight: var(--oc-product-title-font-weight, 400);
	text-transform: var(--oc-product-title-text-transform, none);
}