@import url( 'https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Mulish:wght@400;500;600;700;800&display=swap' );

/* Bearded Kernel — Checkout redesign.
   Targets STANDARD WooCommerce checkout classes only (no WooPack selectors), so it
   works with the raw [woocommerce_checkout] shortcode and degrades gracefully if a
   builder module is wrapping it. No template overrides.

   Layout: customer details on the left, a sticky order/payment summary on the right. */

/* page shell green so short checkouts show no white band */
body.woocommerce-checkout,
body.woocommerce-checkout .fl-page-content,
body.woocommerce-checkout .fl-page {
	background-color: var( --bk-green-850 ) !important;
}

body.woocommerce-checkout .woocommerce {
	font-family: var( --bk-font-body );
	color: var( --bk-text-bright );
	line-height: 1.6;
	margin-bottom: 64px;
}
body.woocommerce-checkout .woocommerce a { color: var( --bk-accent-link ); }
body.woocommerce-checkout .woocommerce a:hover { color: #fff; }

/* ---- Width containment ----
   WooCommerce renders the login prompt, coupon toggle and notices as SIBLINGS of
   the checkout form, so the form's own max-width never reached them. On a
   full-width builder row they'd otherwise stretch edge to edge. */
body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login,
body.woocommerce-checkout .woocommerce > form.checkout {
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---- Two-column shell ----
   NB: clearfix ::before/::after become grid items and hijack cells (same trap as
   the account page and the cart), so they're removed inside the grid. */
body.woocommerce-checkout form.checkout::before,
body.woocommerce-checkout form.checkout::after,
body.woocommerce-checkout #customer_details::before,
body.woocommerce-checkout #customer_details::after,
body.woocommerce-checkout .col2-set::before,
body.woocommerce-checkout .col2-set::after { content: none !important; }

@media ( min-width: 981px ) {
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr );
		/* row 1 = summary heading, row 2 = summary panel; details spans both */
		grid-template-rows: auto 1fr;
		gap: 0 30px;
		align-items: start;
		max-width: 1280px;
		margin: 0 auto;
	}
	body.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	body.woocommerce-checkout form.checkout h3#order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}
	body.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
	}
	/* keep the summary in view while filling in a long form */
	body.woocommerce-checkout form.checkout #order_review {
		position: sticky;
		top: 24px;
	}
}

/* billing + shipping stack full width inside the left column */
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	float: none !important;
	width: 100% !important;
	margin: 0 0 22px;
}

/* ---- Panels ---- */
/* Form panels use the same glass block as the order summary so the whole
   checkout reads as one system (and sits more prominently than a flat panel).
   NB: a FLAT fill, not the diagonal --bk-callout gradient — a gradient restarts
   inside every element it's applied to, which shows as a seam between blocks. */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
	padding: 26px 28px;
	border-radius: var( --bk-radius );
	background: var( --bk-block ) !important;
	border: 1px solid var( --bk-callout-border );
	box-shadow: var( --bk-callout-shadow );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields { margin-top: 22px; }

/* WooCommerce always prints <div class="woocommerce-additional-fields"></div>,
   even with order notes disabled — which rendered as an empty panel. Hide it
   unless it actually contains fields. */
body.woocommerce-checkout .woocommerce-additional-fields:not( :has( .form-row ) ) {
	display: none !important;
}

/* "Deliver to a different address?" — the shipping_address block below the
   checkbox is collapsed until ticked, so don't reserve space for it. */
body.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address {
	margin: 0 !important;
}
body.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address label { margin: 0; }
body.woocommerce-checkout .woocommerce-shipping-fields .shipping_address { padding-top: 20px; }

body.woocommerce-checkout h3,
body.woocommerce-checkout h3#order_review_heading {
	font-family: var( --bk-font-head ) !important;
	font-size: 1.2em !important;
	font-weight: 700 !important;
	color: #fff !important;
	letter-spacing: -0.01em;
	margin: 0 0 18px !important;
}
body.woocommerce-checkout .woocommerce-shipping-fields h3 label,
body.woocommerce-checkout h3 label { font-family: var( --bk-font-head ); color: #fff; }

/* ---- Form fields ---- */
body.woocommerce-checkout .form-row {
	margin: 0 0 16px !important;
	padding: 0 !important;
}
body.woocommerce-checkout .form-row label {
	display: block;
	margin: 0 0 7px;
	color: var( --bk-text ) !important;
	font-size: inherit;
	font-weight: 500;
}
body.woocommerce-checkout .form-row .required { color: var( --bk-accent-link ); border: 0; }
body.woocommerce-checkout .form-row.form-row-first,
body.woocommerce-checkout .form-row.form-row-last { width: 48.5% !important; }

body.woocommerce-checkout .woocommerce input.input-text,
body.woocommerce-checkout .woocommerce textarea,
body.woocommerce-checkout .woocommerce select,
body.woocommerce-checkout .woocommerce .select2-selection--single {
	width: 100% !important;
	box-sizing: border-box;
	height: auto !important;
	min-height: 0;
	padding: 13px 14px !important;
	font: inherit !important;
	font-size: inherit !important;
	color: var( --bk-text-bright ) !important;
	-webkit-text-fill-color: var( --bk-text-bright );
	background: rgba( 0, 0, 0, 0.28 ) !important;
	background-color: rgba( 0, 0, 0, 0.28 ) !important;
	background-image: none !important;
	border: 1px solid var( --bk-glass-border ) !important;
	border-radius: var( --bk-radius-sm ) !important;
	box-shadow: none !important;
	outline: none;
	color-scheme: dark;
	transition: border-color 0.2s ease;
}
body.woocommerce-checkout .woocommerce input.input-text:focus,
body.woocommerce-checkout .woocommerce textarea:focus,
body.woocommerce-checkout .woocommerce select:focus { border-color: var( --bk-accent ) !important; }
body.woocommerce-checkout .woocommerce ::placeholder { color: var( --bk-muted ) !important; opacity: 1; }
body.woocommerce-checkout .woocommerce textarea { min-height: 96px; }

/* select2 (country / state pickers) */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var( --bk-text-bright ) !important;
	line-height: 1.4 !important;
	padding: 0 !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY( -50% ); right: 10px; }
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var( --bk-text ) !important; }
/* the dropdown panel is appended to <body>, so it can't be scoped to the page class */
.select2-container .select2-dropdown,
.select2-container--default .select2-dropdown {
	background: var( --bk-green-850, #062310 ) !important;
	border: 1px solid rgba( 36, 174, 78, 0.22 ) !important;
	color: #e8ebe4 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	color: #e8ebe4 !important;
	background: rgba( 0, 0, 0, 0.28 ) !important;
	border: 1px solid rgba( 36, 174, 78, 0.22 ) !important;
	border-radius: 8px;
	padding: 9px 10px;
}
.select2-container--default .select2-results__option { background: transparent !important; color: #b8c0b4 !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected='true'] {
	background: rgba( 36, 174, 78, 0.18 ) !important;
	color: #fff !important;
}

/* checkboxes (create account, ship to different address, terms) */
body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	color: var( --bk-text ) !important;
	font-weight: 400;
}
body.woocommerce-checkout input[type='checkbox'] {
	width: 17px;
	height: 17px;
	margin: 3px 0 0 !important;
	accent-color: var( --bk-accent );
	flex: none;
}

/* ---- Order review / summary panel ---- */
/* The heading is a SIBLING of #order_review in WooCommerce's markup, so the two
   are styled as the top and bottom halves of a single panel — the title then
   reads as part of the summary block rather than floating above it. */
body.woocommerce-checkout h3#order_review_heading {
	position: relative;
	overflow: hidden;
	margin: 0 !important;
	padding: 22px 26px 0 !important;
	background: var( --bk-block ) !important;
	border: 1px solid var( --bk-callout-border );
	border-bottom: 0 !important;
	border-radius: var( --bk-radius ) var( --bk-radius ) 0 0;
	box-shadow: var( --bk-callout-shadow );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}
body.woocommerce-checkout h3#order_review_heading::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var( --bk-edge );
}
body.woocommerce-checkout #order_review {
	position: relative;
	padding: 18px 26px 26px;
	background: var( --bk-block ) !important;
	border: 1px solid var( --bk-callout-border );
	border-top: 0 !important;
	border-radius: 0 0 var( --bk-radius ) var( --bk-radius );
	/* deliberately NOT --bk-callout-shadow: that token carries an
	   `inset 0 1px 0` top highlight, which would draw a second bright line
	   directly under the heading. The heading owns the panel's top edge. */
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.25 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0 0 20px;
	border: 0 !important;
	border-collapse: collapse !important;
	background: transparent !important;
}
/* NB: the site's Customizer CSS sets `tfoot { background-color:#062310 !important }`,
   which turned every totals row into its own dark box inside the summary panel.
   These selectors are deliberately more specific so the rows stay transparent. */
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot tr,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tfoot td,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table thead th,
body.woocommerce-checkout #order_review table.woocommerce-checkout-review-order-table tbody td {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 12px 0 !important;
	font-size: inherit;
	color: var( --bk-text-bright ) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba( 180, 200, 170, 0.15 ) !important;
	text-align: left;
	vertical-align: top;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	font-size: 0.7em !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bk-muted ) !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td:last-child,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th:last-child { text-align: right; }
body.woocommerce-checkout .cart_item .product-name { color: var( --bk-text-bright ) !important; }
body.woocommerce-checkout .cart_item .product-name strong.product-quantity { color: var( --bk-muted ); font-weight: 500; }
body.woocommerce-checkout tr.cart-subtotal th,
body.woocommerce-checkout tr.cart-discount th,
body.woocommerce-checkout tr.woocommerce-shipping-totals th { color: var( --bk-text ) !important; font-weight: 500; }
body.woocommerce-checkout tr.order-total th,
body.woocommerce-checkout tr.order-total td {
	border-bottom: 0 !important;
	font-weight: 700;
	font-size: 1.06em;
	color: #fff !important;
}
body.woocommerce-checkout tr.order-total .amount { color: var( --bk-accent-link ) !important; }
body.woocommerce-checkout .woocommerce-remove-coupon { color: #f0857f !important; }
body.woocommerce-checkout ul#shipping_method { list-style: none; margin: 0; padding: 0; }
body.woocommerce-checkout ul#shipping_method li { margin: 0 0 6px; }
body.woocommerce-checkout ul#shipping_method label { color: var( --bk-text-bright ); font-weight: 500; }

/* ---- Coupon ---- */
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 16px !important; }
body.woocommerce-checkout form.checkout_coupon {
	margin: 0 0 20px !important;
	padding: 18px 20px !important;
	border-radius: var( --bk-radius-sm ) !important;
	background: rgba( 0, 0, 0, 0.18 ) !important;
	border: 1px solid var( --bk-glass-border ) !important;
}
body.woocommerce-checkout form.checkout_coupon .form-row { margin-bottom: 0 !important; }

/* ---- Payment ---- */
/* WooCommerce gives #payment a light background + the methods list a bottom
   border, which showed as a white/grey box on the dark panel. */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-top: 18px;
}
body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout #payment ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
}
/* the little pointer triangle WooCommerce draws under the selected method */
body.woocommerce-checkout #payment ul.payment_methods li > .payment_box::before { display: none !important; }
body.woocommerce-checkout #payment ul.payment_methods > li {
	margin: 0 0 10px;
	padding: 14px 16px;
	list-style: none;
	background: rgba( 0, 0, 0, 0.22 );
	border: 1px solid var( --bk-glass-border );
	border-radius: var( --bk-radius-sm );
}
body.woocommerce-checkout #payment ul.payment_methods > li label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var( --bk-text-bright ) !important;
	font-weight: 600;
}
body.woocommerce-checkout #payment ul.payment_methods input[type='radio'] { accent-color: var( --bk-accent ); width: 17px; height: 17px; }
body.woocommerce-checkout #payment ul.payment_methods > li img { max-height: 26px; width: auto; }
/* Gateway description / hosted-field container. The gateway renders its OWN
   panel inside here (PayPal/Braintree card fields), so giving this a box too
   produced three nested frames. The method <li> is the only container we draw. */
body.woocommerce-checkout #payment div.payment_box {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var( --bk-text ) !important;
	font-size: inherit;
}
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-checkout #payment div.payment_box::after { display: none !important; }
body.woocommerce-checkout #payment div.payment_box p { color: var( --bk-text ) !important; }
/* Don't wrap the gateway's hosted-field iframes in another shell — they carry
   their own panel, and the inputs inside are cross-origin so they can only be
   restyled through the gateway's own field-styling options. */
body.woocommerce-checkout #payment .payment_box > div,
body.woocommerce-checkout #payment .payment_box iframe {
	max-width: 100%;
}

/* ---- Terms + place order ---- */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 0 0 18px; }
body.woocommerce-checkout .woocommerce-privacy-policy-text p,
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
	color: var( --bk-muted ) !important;
	font-size: 0.85em;
	line-height: 1.55;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions {
	background: rgba( 0, 0, 0, 0.28 ) !important;
	border: 1px solid var( --bk-glass-border );
	border-radius: var( --bk-radius-sm );
	padding: 14px 16px;
	color: var( --bk-text );
}
/* The terms label holds three children: [checkbox][text][span.required "*"].
   As flex items the "*" becomes its own column and drifts away from the end of
   the wrapped text — so this label goes back to normal inline flow with the
   checkbox positioned out of it, letting the asterisk sit right after the text. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: block !important;
	position: relative;
	padding-left: 28px;
	margin: 0;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox input[type='checkbox'] {
	position: absolute;
	left: 0;
	top: 4px;
	margin: 0 !important;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox .required {
	margin-left: 3px;
	text-decoration: none;
	border: 0;
}

body.woocommerce-checkout .form-row.place-order { margin: 0 !important; padding: 0 !important; }

body.woocommerce-checkout #place_order,
body.woocommerce-checkout .woocommerce #payment #place_order {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin: 6px 0 0 !important;
	padding: 16px 24px !important;
	font-size: 1.05em !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
	line-height: 1.2 !important;
	text-align: center;
	cursor: pointer;
	background: var( --bk-accent ) !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid var( --bk-accent-strong ) !important;
	border-radius: 8px !important;
	text-shadow: none !important;
	transition: filter 0.2s ease;
}
body.woocommerce-checkout #place_order:hover { filter: brightness( 1.08 ); }

/* other buttons (apply coupon, login) in DS ghost/primary */
body.woocommerce-checkout .woocommerce .button:not( #place_order ) {
	padding: 12px 22px !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	background: var( --bk-accent ) !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid var( --bk-accent-strong ) !important;
	text-shadow: none !important;
}
body.woocommerce-checkout form.checkout_coupon .button { background: transparent !important; border-color: rgba( 180, 200, 170, 0.35 ) !important; color: var( --bk-text-bright ) !important; }

/* defeat autofill white boxes */
body.woocommerce-checkout input:-webkit-autofill,
body.woocommerce-checkout input:-webkit-autofill:hover,
body.woocommerce-checkout input:-webkit-autofill:focus,
body.woocommerce-checkout select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var( --bk-green-750 ) inset !important;
	-webkit-text-fill-color: var( --bk-text-bright ) !important;
	caret-color: var( --bk-text-bright );
}

/* ---- Responsive ---- */
@media ( max-width: 980px ) {
	body.woocommerce-checkout #order_review { margin-top: 22px; }
	body.woocommerce-checkout .form-row.form-row-first,
	body.woocommerce-checkout .form-row.form-row-last { width: 100% !important; }
}