/**
 * Cart and checkout base layer — ENG1WED-255.
 *
 * WooCommerce keeps ownership of layout and behaviour. This file supplies the
 * typography, colour, focus, and control contrast that stock WooCommerce does
 * not provide after Divi's base CSS is removed from the dark SBF ground.
 */

html:has(body.sbf-commerce) {
	background: var(--sbf-deep);
}

body.sbf-commerce {
	margin: 0;
	background: var(--sbf-deep);
	color: var(--sbf-ink);
	font-family: var(--sbf-font-body);
	font-size: var(--sbf-size-body);
	line-height: var(--sbf-leading-body);
	color-scheme: dark;
}

body.sbf-commerce *,
body.sbf-commerce *::before,
body.sbf-commerce *::after {
	box-sizing: border-box;
}

body.sbf-commerce #main {
	width: min(100%, calc(var(--sbf-shell) + (2 * var(--sbf-gutter))));
	min-height: 60vh;
	margin: 0 auto;
	padding: 190px var(--sbf-gutter) 104px;
}

body.sbf-commerce #main > .woocommerce {
	width: 100%;
}

body.sbf-commerce #main h1,
body.sbf-commerce #main h2,
body.sbf-commerce #main h3,
body.sbf-commerce #main h4,
body.sbf-commerce #main h5,
body.sbf-commerce #main h6 {
	margin-top: 0;
	color: var(--sbf-ink);
	font-family: var(--sbf-font-display);
	font-weight: 400;
	letter-spacing: var(--sbf-tracking-h3);
}

body.sbf-commerce #main h1 {
	margin-bottom: 48px;
	font-size: var(--sbf-size-h2);
	line-height: var(--sbf-leading-h2);
}

body.sbf-commerce #main h2 {
	margin-bottom: 26px;
	font-size: var(--sbf-size-h3);
	line-height: var(--sbf-leading-h3);
}

body.sbf-commerce #main h3,
body.sbf-commerce #main h4,
body.sbf-commerce #main h5,
body.sbf-commerce #main h6 {
	font-size: var(--sbf-size-lead);
	line-height: 1.3;
}

body.sbf-commerce #main p,
body.sbf-commerce #main li,
body.sbf-commerce #main address,
body.sbf-commerce #main label,
body.sbf-commerce #main th,
body.sbf-commerce #main td,
body.sbf-commerce #main strong,
body.sbf-commerce #main small {
	color: var(--sbf-quiet);
}

body.sbf-commerce #main a:not(.button) {
	color: var(--sbf-ember);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

body.sbf-commerce #main a:not(.button):hover,
body.sbf-commerce #main a:not(.button):focus-visible {
	color: var(--sbf-ink);
}

body.sbf-commerce #main img {
	max-width: 100%;
	height: auto;
}

body.sbf-commerce #main :is(a, button, input, select, textarea):focus-visible,
body.sbf-commerce .select2-container--open .select2-selection {
	outline: 3px solid var(--sbf-ember);
	outline-offset: 3px;
}

body.sbf-commerce .woocommerce table.shop_table,
body.sbf-commerce .woocommerce table.shop_table th,
body.sbf-commerce .woocommerce table.shop_table td,
body.sbf-commerce .woocommerce-checkout-review-order-table,
body.sbf-commerce .woocommerce-checkout-review-order-table th,
body.sbf-commerce .woocommerce-checkout-review-order-table td {
	border-color: var(--sbf-rule-strong);
}

body.sbf-commerce .woocommerce table.shop_table {
	border-collapse: separate;
	background: var(--sbf-elev);
	color: var(--sbf-ink);
}

body.sbf-commerce .woocommerce table.shop_table th,
body.sbf-commerce .woocommerce table.shop_table td {
	padding: 16px;
	vertical-align: middle;
}

body.sbf-commerce .woocommerce table.shop_table th,
body.sbf-commerce .woocommerce table.shop_table td,
body.sbf-commerce .woocommerce table.shop_table td .amount,
body.sbf-commerce .woocommerce table.shop_table td strong,
body.sbf-commerce .woocommerce table.shop_table td label {
	color: var(--sbf-ink);
}

body.sbf-commerce .woocommerce-cart-form .product-name a,
body.sbf-commerce .woocommerce-checkout-review-order-table .product-name,
body.sbf-commerce .woocommerce-checkout-review-order-table .product-total {
	overflow-wrap: anywhere;
}

body.sbf-commerce .woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--sbf-ember);
	line-height: 1;
}

body.sbf-commerce .woocommerce a.remove:hover,
body.sbf-commerce .woocommerce a.remove:focus-visible {
	background: var(--sbf-ember);
	color: var(--sbf-deep);
}

/*
 * This floor intentionally carries an ID plus the WooCommerce scope. Stock
 * WooCommerce form and quantity rules reach 0,3,1 specificity; a :where()
 * target here would contribute zero and leave the floor inert.
 */
body.sbf-commerce #main .woocommerce :is(input.input-text, input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea),
body.sbf-commerce #main .select2-container--default .select2-selection--single,
body.sbf-commerce #main .select2-container--default .select2-selection--multiple {
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--sbf-rule-strong);
	border-radius: 0;
	background: var(--sbf-elev);
	color: var(--sbf-ink);
	font: inherit;
	line-height: 1.35;
	box-shadow: none;
}

body.sbf-commerce #main .woocommerce textarea {
	min-height: 128px;
	resize: vertical;
}

body.sbf-commerce #main .woocommerce input::placeholder,
body.sbf-commerce #main .woocommerce textarea::placeholder {
	color: var(--sbf-soft);
	opacity: 1;
}

body.sbf-commerce #main .woocommerce input[type="checkbox"],
body.sbf-commerce #main .woocommerce input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--sbf-ember);
}

body.sbf-commerce .woocommerce form .form-row {
	margin-bottom: 18px;
}

body.sbf-commerce .woocommerce form .form-row label,
body.sbf-commerce .woocommerce form .form-row .required {
	color: var(--sbf-ink);
}

body.sbf-commerce #main .woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select, .select2-selection) {
	border-color: var(--sbf-ember);
}

body.sbf-commerce #main .woocommerce :is(a.button, button.button, input.button),
body.sbf-commerce #main .woocommerce :is(a.button.alt, button.button.alt, input.button.alt) {
	/*
	 * Centred by flex, not by padding. A native <button> centres its own label,
	 * an <a> does not, so with only min-height the anchors sat 8px from the top
	 * and 20px from the bottom of a 48px box — visibly high. Stephan reported it
	 * on the live clone 2026-08-04 for "Proceed to checkout" and "Return to
	 * shop", which are both anchors. Flex also makes the centring immune to
	 * whatever padding Divi or WooCommerce override onto these elements, which
	 * is what actually varied here.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 20px;
	border: 1px solid var(--sbf-ember);
	border-radius: 0;
	background: var(--sbf-ember);
	/*
	 * !important, reluctantly and traceably. Divi ships
	 *   .woocommerce .button { color:#d6d6d6 !important }
	 * and !important beats specificity outright, so the label rendered light
	 * grey on ember = 2.04:1, well under the 4.5:1 floor. This declaration is a
	 * CONSEQUENCE OF CRITERION 5 STILL FAILING (Divi's inline CSS is not yet
	 * removed). It is not the intended end state: when criterion 5 is closed,
	 * delete the !important here and re-measure. Spec v2 section 6 says not to
	 * fight Divi with specificity — that assumed Divi's CSS would be gone.
	 */
	color: var(--sbf-deep) !important;
	font-family: var(--sbf-font-body);
	font-size: var(--sbf-size-small);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: none;
}

/* Full width is WooCommerce's intent for this one; keep it, and centre in flex. */
body.sbf-commerce #main .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
}

body.sbf-commerce #main .woocommerce :is(a.button, button.button, input.button):hover,
body.sbf-commerce #main .woocommerce :is(a.button, button.button, input.button):focus-visible,
body.sbf-commerce #main .woocommerce :is(a.button.alt, button.button.alt, input.button.alt):hover,
body.sbf-commerce #main .woocommerce :is(a.button.alt, button.button.alt, input.button.alt):focus-visible {
	border-color: var(--sbf-ink);
	background: var(--sbf-ember-deep);
	color: var(--sbf-deep) !important;
}

body.sbf-commerce #main .woocommerce :is(button.button, input.button):disabled,
body.sbf-commerce #main .woocommerce :is(button.button, input.button).disabled {
	border-color: var(--sbf-rule-strong);
	background: var(--sbf-shade);
	color: var(--sbf-ink);
	opacity: 1;
}

body.sbf-commerce .woocommerce .quantity .qty {
	width: 5.5em;
	min-height: 48px;
	padding: 8px;
}

body.sbf-commerce .woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body.sbf-commerce .woocommerce .coupon .input-text {
	width: min(240px, 100%);
	margin: 0;
}

body.sbf-commerce .woocommerce-message,
body.sbf-commerce .woocommerce-info,
body.sbf-commerce .woocommerce-error {
	margin-bottom: 28px;
	border-top: 3px solid var(--sbf-ember);
	background: var(--sbf-elev);
	color: var(--sbf-ink);
	box-shadow: none;
}

body.sbf-commerce .woocommerce-message::before,
body.sbf-commerce .woocommerce-info::before,
body.sbf-commerce .woocommerce-error::before,
body.sbf-commerce .woocommerce-error li,
body.sbf-commerce .woocommerce-message a,
body.sbf-commerce .woocommerce-info a,
body.sbf-commerce .woocommerce-error a {
	color: var(--sbf-ink);
}

body.sbf-commerce .cart-collaterals,
body.sbf-commerce .woocommerce-billing-fields,
body.sbf-commerce .woocommerce-shipping-fields,
body.sbf-commerce .woocommerce-additional-fields,
body.sbf-commerce #order_review_heading,
body.sbf-commerce #order_review {
	margin-top: 42px;
}

body.sbf-commerce .woocommerce .cart_totals,
body.sbf-commerce .woocommerce-checkout-review-order {
	color: var(--sbf-ink);
}

body.sbf-commerce .woocommerce-checkout #payment {
	background: var(--sbf-elev);
	color: var(--sbf-ink);
}

body.sbf-commerce .woocommerce-checkout #payment ul.payment_methods,
body.sbf-commerce .woocommerce-checkout #payment div.form-row {
	border-color: var(--sbf-rule-strong);
}

body.sbf-commerce .woocommerce-checkout #payment div.payment_box {
	background: var(--sbf-shade-hover);
	color: var(--sbf-ink);
}

body.sbf-commerce .woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--sbf-shade-hover);
}

body.sbf-commerce .woocommerce-checkout #payment div.payment_box p,
body.sbf-commerce .woocommerce-checkout #payment label,
body.sbf-commerce .woocommerce-privacy-policy-text,
body.sbf-commerce .woocommerce-terms-and-conditions-wrapper {
	color: var(--sbf-quiet);
}

body.sbf-commerce .select2-container {
	max-width: 100%;
}

body.sbf-commerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 28px 0 0;
	color: var(--sbf-ink);
	line-height: 26px;
}

body.sbf-commerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 10px;
	right: 8px;
}

body.sbf-commerce .select2-dropdown,
body.sbf-commerce .select2-search--dropdown .select2-search__field {
	border-color: var(--sbf-rule-strong);
	background: var(--sbf-elev);
	color: var(--sbf-ink);
}

body.sbf-commerce .select2-results__option {
	color: var(--sbf-ink);
}

body.sbf-commerce .select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--sbf-shade-hover);
	color: var(--sbf-ink);
}

body.sbf-commerce .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--sbf-ember);
	color: var(--sbf-deep);
}

body.sbf-commerce .woocommerce .blockUI.blockOverlay {
	background: var(--sbf-deep) !important;
	opacity: 0.72 !important;
}

body.sbf-commerce .woocommerce .woocommerce-form-coupon,
body.sbf-commerce .woocommerce .woocommerce-form-login {
	border-color: var(--sbf-rule-strong);
	background: var(--sbf-elev);
}

body.sbf-commerce .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info {
	margin-bottom: 0;
}

body.sbf-commerce .woocommerce .woocommerce-form-coupon p,
body.sbf-commerce .woocommerce .woocommerce-form-login p,
body.sbf-commerce .woocommerce .woocommerce-order-overview li {
	color: var(--sbf-quiet);
}

@media (max-width: 768px) {
	body.sbf-commerce #main {
		padding-top: 142px;
		padding-bottom: 76px;
	}

	body.sbf-commerce #main h1 {
		margin-bottom: 32px;
	}

	body.sbf-commerce .woocommerce table.shop_table_responsive tr td::before,
	body.sbf-commerce .woocommerce-page table.shop_table_responsive tr td::before {
		color: var(--sbf-ink);
	}

	body.sbf-commerce .woocommerce table.shop_table_responsive tr,
	body.sbf-commerce .woocommerce-page table.shop_table_responsive tr {
		border-bottom: 1px solid var(--sbf-rule-strong);
	}
}

@media (max-width: 480px) {
	body.sbf-commerce #main {
		padding-top: 126px;
	}

	body.sbf-commerce .woocommerce .coupon,
	body.sbf-commerce .woocommerce .coupon .input-text,
	body.sbf-commerce .woocommerce .coupon .button,
	body.sbf-commerce .woocommerce .actions > .button,
	body.sbf-commerce .woocommerce .wc-proceed-to-checkout .button,
	body.sbf-commerce .woocommerce #place_order {
		width: 100%;
	}

	body.sbf-commerce .woocommerce .coupon .input-text {
		float: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.sbf-commerce *,
	body.sbf-commerce *::before,
	body.sbf-commerce *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}