/**
 * Modern UX for WooCommerce — cart & checkout.
 *
 * The cart page is styled, never rebuilt: WooCommerce's own tables keep their
 * structure (third-party plugins add rows to them) and are re-laid-out with
 * CSS. The checkout uses the plugin's layout-only template override.
 *
 * Nothing in this file targets a specific payment gateway. Gateway markup is
 * styled generically through WooCommerce's stable class names only.
 */

/* ==========================================================================
   1. Cart page — two column
   ========================================================================== */

.mw-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	column-gap: clamp(24px, 4vw, 64px);
	row-gap: 24px;
	align-items: start;
}

.mw-cart .woocommerce > .woocommerce-notices-wrapper,
.mw-cart .woocommerce > .mw-empty,
.mw-cart .woocommerce > .cart-empty,
.mw-cart .woocommerce > .return-to-shop {
	grid-column: 1 / -1;
}

.mw-cart .woocommerce > form.woocommerce-cart-form {
	grid-column: 1;
	margin: 0;
}

.mw-cart .woocommerce > .cart-collaterals {
	grid-column: 2;
	width: 100%;
	position: sticky;
	top: 24px;
}

.mw-cart .cart-collaterals .cross-sells {
	grid-column: 1 / -1;
	width: 100%;
}

@media (max-width: 900px) {
	.mw-cart .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.mw-cart .woocommerce > form.woocommerce-cart-form,
	.mw-cart .woocommerce > .cart-collaterals {
		grid-column: 1;
		position: static;
	}
}

/* Cart table becomes a clean list. */
.mw-cart table.shop_table.cart {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	margin: 0;
}

.mw-cart table.shop_table.cart thead {
	display: none;
}

.mw-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb name price"
		"thumb meta  price"
		"thumb qty   remove";
	align-items: center;
	column-gap: 16px;
	row-gap: 6px;
	padding: 20px 0;
	border-bottom: 1px solid var(--mw-border);
}

/* Many themes centre `shop_table` cells; the cart reads far better ranged
   left, with only the money column ranged right. */
.mw-cart table.shop_table.cart tbody tr td {
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	vertical-align: middle;
}

.mw-cart td.product-thumbnail {
	grid-area: thumb;
}

.mw-cart td.product-thumbnail img {
	width: 92px;
	height: auto;
	border-radius: var(--mw-radius-sm);
	background: var(--mw-surface);
}

.mw-cart td.product-name {
	grid-area: name;
	align-self: end;
	font-size: 0.9375rem;
	font-weight: 500;
}

.mw-cart td.product-name a {
	color: var(--mw-text);
	text-decoration: none;
}

.mw-cart td.product-name .variation {
	margin: 4px 0 0;
	color: var(--mw-muted);
	font-size: 0.8125rem;
}

.mw-cart td.product-price {
	display: none; /* Line subtotal carries the meaning; unit price is noise. */
}

.mw-cart td.product-subtotal {
	grid-area: price;
	align-self: start;
	text-align: right;
	font-size: 0.9375rem;
	font-weight: 550;
	font-variant-numeric: tabular-nums;
}

.mw-cart td.product-quantity {
	grid-area: qty;
	align-self: start;
}

.mw-cart td.product-remove {
	grid-area: remove;
	justify-self: end;
	align-self: start;
}

.mw-cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: transparent;
	color: var(--mw-muted) !important; /* WooCommerce sets an inline red. */
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--mw-dur-fast) var(--mw-ease), color var(--mw-dur-fast) var(--mw-ease);
}

.mw-cart td.product-remove a.remove:hover {
	background: var(--mw-surface);
	color: var(--mw-sale) !important; /* Same inline override as above. */
}

.mw-cart tr.woocommerce-cart-form__cart-item.mw-busy {
	opacity: 0.5;
	pointer-events: none;
}

@media (max-width: 560px) {
	.mw-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"thumb name"
			"thumb meta"
			"thumb price"
			"qty   remove";
	}

	.mw-cart td.product-thumbnail img {
		width: 72px;
	}

	.mw-cart td.product-subtotal {
		text-align: left;
	}
}

/* Cart actions row (coupon + update). */
.mw-cart table.shop_table.cart td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 22px 0 0;
	border: 0;
}

.mw-cart .coupon {
	display: flex;
	gap: 8px;
	flex: 1 1 300px;
}

.mw-cart .coupon label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.mw-cart .coupon #coupon_code {
	flex: 1;
	min-width: 0;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-btn-radius);
	background: var(--mw-background);
	font-family: var(--mw-font);
	font-size: 0.9375rem;
}

.mw-cart td.actions .button {
	min-height: 46px;
	padding: 11px 20px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-btn-radius);
	background: transparent;
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--mw-dur-fast) var(--mw-ease);
}

.mw-cart td.actions .button:hover {
	border-color: var(--mw-text);
	background: transparent;
}

.mw-cart td.actions .coupon .button {
	background: var(--mw-primary);
	border-color: var(--mw-primary);
	color: var(--mw-primary-contrast);
}

/* Cart totals card.
   WooCommerce floats this right at 48% so it can sit beside the cross-sells in
   its own full-width collaterals row. Here the collaterals *are* the sidebar
   column, so the float and the 48% have to go — otherwise the card renders at
   roughly half the column width and its contents overflow. */
.mw-cart .cart-collaterals .cart_totals,
.mw-cart .cart-collaterals .cross-sells {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}

.mw-cart .cart_totals {
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius-lg);
	background: var(--mw-background);
}

.mw-cart .cart_totals > h2 {
	margin: 0 0 16px;
	font-family: var(--mw-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
}

.mw-cart .cart_totals table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.mw-cart .cart_totals table.shop_table tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--mw-border);
}

.mw-cart .cart_totals table.shop_table tr:last-child {
	border-bottom: 0;
}

.mw-cart .cart_totals th,
.mw-cart .cart_totals td {
	padding: 0;
	border: 0;
	font-size: 0.9375rem;
	font-weight: 400;
	text-align: right;
}

.mw-cart .cart_totals th {
	color: var(--mw-muted);
	text-align: left;
	white-space: nowrap;
}

.mw-cart .cart_totals tr.order-total th,
.mw-cart .cart_totals tr.order-total td {
	padding-top: 6px;
	color: var(--mw-text);
	font-size: 1.0625rem;
	font-weight: 600;
}

.mw-cart .cart_totals .woocommerce-shipping-destination,
.mw-cart .cart_totals .shipping-calculator-button {
	color: var(--mw-muted);
	font-size: 0.8125rem;
}

.mw-cart .cart_totals ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.mw-cart .cart_totals ul#shipping_method li {
	margin: 0 0 4px;
	padding: 0;
	font-size: 0.875rem;
}

.mw-cart .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

.mw-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 14px 22px;
	border: 0;
	border-radius: var(--mw-btn-radius);
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	font-family: var(--mw-font);
	font-size: 0.9375rem;
	font-weight: 550;
	text-align: center;
	text-decoration: none;
}

.mw-cart .mw-continue {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 14px;
	color: var(--mw-muted);
	font-size: 0.875rem;
	text-decoration: none;
}

.mw-cart .mw-continue:hover {
	color: var(--mw-text);
}

.mw-cart .cross-sells {
	margin-top: var(--mw-section-space);
}

.mw-cart .cross-sells > h2 {
	font-family: var(--mw-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
}

/* ==========================================================================
   2. Checkout — layout
   ========================================================================== */

.mw-checkout .mw-checkout__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.mw-checkout--split .mw-checkout__grid {
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

@media (max-width: 980px) {
	.mw-checkout--split .mw-checkout__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mw-checkout .mw-checkout__main {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 32px);
	min-width: 0;
}

.mw-checkout .mw-checkout__panel {
	min-width: 0;
}

.mw-checkout .mw-checkout__summary.is-sticky {
	position: sticky;
	top: 24px;
}

/* Order summary card. */
.mw-checkout .mw-checkout__review {
	padding: clamp(18px, 2.5vw, 24px);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius-lg);
	background: var(--mw-background);
}

.mw-checkout .mw-summary-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	margin-bottom: 10px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: 0.9375rem;
	cursor: pointer;
}

.mw-checkout .mw-summary-toggle__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mw-checkout .mw-summary-toggle__total {
	font-weight: 600;
}

.mw-checkout .mw-summary-toggle[aria-expanded="true"] .mw-icon--chevrond {
	transform: rotate(180deg);
}

/* Order review table. */
.mw-checkout table.shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
}

.mw-checkout .woocommerce-checkout-review-order-table thead th {
	padding: 0 0 10px;
	border: 0;
	border-bottom: 1px solid var(--mw-border);
	color: var(--mw-muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mw-checkout .woocommerce-checkout-review-order-table td,
.mw-checkout .woocommerce-checkout-review-order-table th {
	padding: 10px 0;
	border: 0;
	background: none;
	font-size: 0.9375rem;
	vertical-align: top;
}

.mw-checkout .woocommerce-checkout-review-order-table tbody tr {
	border-bottom: 1px solid var(--mw-border);
}

.mw-checkout .woocommerce-checkout-review-order-table .product-name {
	color: var(--mw-text);
	font-weight: 500;
	line-height: 1.45;
}

.mw-checkout .woocommerce-checkout-review-order-table .product-quantity {
	color: var(--mw-muted);
	font-weight: 400;
}

.mw-checkout .woocommerce-checkout-review-order-table .product-total,
.mw-checkout .woocommerce-checkout-review-order-table td:last-child,
.mw-checkout .woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mw-checkout .woocommerce-checkout-review-order-table .variation {
	margin: 4px 0 0;
	color: var(--mw-muted);
	font-size: 0.8125rem;
}

.mw-checkout .woocommerce-checkout-review-order-table tfoot th {
	color: var(--mw-muted);
	font-weight: 400;
	text-align: left;
}

.mw-checkout .woocommerce-checkout-review-order-table tfoot tr {
	border-bottom: 1px solid var(--mw-border);
}

.mw-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
	border-bottom: 0;
}

.mw-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th,
.mw-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	padding-top: 14px;
	color: var(--mw-text);
	font-size: 1.125rem;
	font-weight: 600;
}

.mw-checkout .woocommerce-checkout-review-order-table ul#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.mw-checkout .woocommerce-checkout-review-order-table ul#shipping_method li {
	margin: 0 0 4px;
	font-size: 0.875rem;
}

/* ==========================================================================
   3. Checkout — form fields
   ========================================================================== */

.mw-checkout .mw-checkout__panel h3,
.mw-checkout .mw-checkout__heading,
.mw-checkout #customer_details h3 {
	margin: 0 0 16px;
	font-family: var(--mw-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: var(--mw-tracking);
}

.mw-checkout .col2-set {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 3vw, 32px);
	width: 100%;
}

/* WooCommerce's checkout columns are literally `.col-1` / `.col-2`, which
   collide with the Bootstrap grid many themes load — Bootstrap defines
   `.col-1 { flex: 0 0 8.333%; max-width: 8.333% }`, which squeezes the whole
   billing block to about 56px wide. WooCommerce's own stylesheet only sets
   `width`, so it loses to Bootstrap's `max-width` and the stock checkout is
   broken on those themes too. Neutralising all three properties fixes it, and
   the `.col2-set` ancestor keeps genuine Bootstrap grids elsewhere untouched. */
.mw .col2-set > .col-1,
.mw .col2-set > .col-2,
.mw-checkout .col2-set .col-1,
.mw-checkout .col2-set .col-2 {
	width: 100%;
	max-width: 100%;
	flex: 1 1 auto;
	float: none;
	padding: 0;
}

.mw-checkout .col2-set .col-2:empty {
	display: none;
}

.mw-checkout .woocommerce-billing-fields__field-wrapper,
.mw-checkout .woocommerce-shipping-fields__field-wrapper,
.mw-checkout .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.mw-checkout .form-row,
.mw-checkout .mw-field {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
}

/* WooCommerce's float-era widths (`.form-row-first/-last { width: 47% }`) are
   set at specificity 0,2,1 via `.woocommerce form .form-row-first`, so a plain
   `.mw-checkout .form-row` (0,2,0) loses to them and the fields end up ~47% of
   their grid cell. Two classes here take it to 0,3,0 and the grid decides the
   widths instead. */
.mw-checkout .form-row.form-row-first,
.mw-checkout .form-row.form-row-last,
.mw-checkout .form-row.form-row-wide,
.mw-checkout .form-row.mw-field {
	display: block;
	width: 100%;
	float: none;
	margin: 0;
}

/* Themes that set `display: flex` on form rows otherwise let the input wrapper
   shrink to its content width. */
.mw-checkout .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
	flex: 1 1 auto;
}

.mw-checkout .mw-field--half {
	grid-column: span 1;
}

@media (max-width: 560px) {
	.mw-checkout .mw-field--half {
		grid-column: 1 / -1;
	}
}

.mw-checkout .form-row label {
	display: block;
	margin-bottom: 6px;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.mw-checkout .form-row .required {
	color: var(--mw-muted);
	text-decoration: none;
	border: 0;
}

.mw-checkout .form-row input.input-text,
.mw-checkout .form-row textarea,
.mw-checkout .form-row select,
.mw-checkout .select2-container .select2-selection--single {
	width: 100%;
	min-height: 50px;
	height: auto;
	padding: 13px 14px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background-color: var(--mw-background);
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: 1rem;
	line-height: 1.35;
	transition: border-color var(--mw-dur-fast) var(--mw-ease), box-shadow var(--mw-dur-fast) var(--mw-ease);
}

.mw-checkout .form-row textarea {
	min-height: 96px;
	resize: vertical;
}

.mw-checkout .form-row input.input-text:focus,
.mw-checkout .form-row textarea:focus,
.mw-checkout .form-row select:focus {
	outline: none;
	border-color: var(--mw-primary);
	box-shadow: var(--mw-ring);
}

/* select2 (WooCommerce's country/state dropdowns). */
.mw-checkout .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
}

.mw-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--mw-text);
	line-height: 1.35;
}

.mw-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	height: 20px;
}

.mw-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.mw-checkout .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--mw-primary);
	box-shadow: var(--mw-ring);
}

/* Floating labels.
   WooCommerce wraps inputs in `.woocommerce-input-wrapper` and prints the
   label *before* the input, so the open/filled state is driven by the classes
   mw-checkout.js sets rather than by a sibling selector. Without JS the label
   simply stays in place and the field is still perfectly usable. */
.mw-float-labels .mw-field--float {
	position: relative;
}

.mw-float-labels .mw-field--float > label {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 1;
	margin: 0;
	color: var(--mw-muted);
	font-size: 1rem;
	line-height: 1.35;
	pointer-events: none;
	transform-origin: left top;
	transition: transform var(--mw-dur-fast) var(--mw-ease), color var(--mw-dur-fast) var(--mw-ease);
}

.mw-float-labels .mw-field--float .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.mw-float-labels .mw-field--float input.input-text,
.mw-float-labels .mw-field--float textarea {
	padding-top: 23px;
	padding-bottom: 7px;
}

.mw-float-labels .mw-field--float.is-filled > label,
.mw-float-labels .mw-field--float.is-focused > label {
	transform: translateY(-9px) scale(0.78);
}

.mw-float-labels .mw-field--float.is-focused > label {
	color: var(--mw-text);
}

/* Checkboxes & login/coupon toggles. */
.mw-checkout .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mw-text);
	font-size: 0.9375rem;
}

.mw-checkout .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mw-primary);
}

.mw-checkout .woocommerce-form-login-toggle,
.mw-checkout .woocommerce-form-coupon-toggle {
	margin-bottom: 18px;
}

.mw-checkout .woocommerce-form-login,
.mw-checkout .checkout_coupon {
	padding: 18px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
}

/* ==========================================================================
   4. Checkout — payment (generic, gateway-agnostic)
   ========================================================================== */

.mw-checkout #payment,
.mw-checkout .woocommerce-checkout-payment {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

.mw-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* The radio and its label are siblings, and the label is a flex container, so
   without making the row itself a flex line the radio drops onto its own line
   above the gateway name. `payment_box` then takes the full second line. */
.mw-checkout #payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-background);
	overflow: hidden;
	transition: border-color var(--mw-dur-fast) var(--mw-ease);
}

.mw-checkout #payment ul.payment_methods li > label {
	flex: 1 1 auto;
	min-width: 0;
}

.mw-checkout #payment div.payment_box {
	flex: 0 0 100%;
}

.mw-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--mw-primary);
}

.mw-checkout #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 16px 16px 10px;
	color: var(--mw-text);
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
}

.mw-checkout #payment ul.payment_methods li > input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 0 0 16px;
	accent-color: var(--mw-primary);
	flex: none;
}

.mw-checkout #payment ul.payment_methods li img {
	max-height: 24px;
	width: auto;
	margin-left: auto;
}

.mw-checkout #payment div.payment_box {
	margin: 0;
	padding: 0 16px 16px;
	border-radius: 0;
	background: transparent;
	color: var(--mw-muted);
	font-size: 0.875rem;
	line-height: 1.55;
}

.mw-checkout #payment div.payment_box::before {
	content: none; /* WooCommerce's default speech-bubble arrow. */
}

.mw-checkout #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

/* Gateway-injected inputs (hosted fields, iframes, custom forms) inherit the
   plugin's field styling generically — no gateway is targeted by name. */
.mw-checkout #payment div.payment_box input[type="text"],
.mw-checkout #payment div.payment_box input[type="tel"],
.mw-checkout #payment div.payment_box input[type="email"],
.mw-checkout #payment div.payment_box input[type="number"],
.mw-checkout #payment div.payment_box select {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background: var(--mw-background);
	font-family: var(--mw-font);
	font-size: 1rem;
}

.mw-checkout #payment .place-order {
	padding: 18px 0 0;
	margin: 0;
}

.mw-checkout #payment #place_order {
	display: block;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 15px 24px;
	border: 0;
	border-radius: var(--mw-btn-radius);
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	font-family: var(--mw-font);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: var(--mw-tracking);
	cursor: pointer;
	transition: opacity var(--mw-dur-fast) var(--mw-ease);
}

.mw-checkout #payment #place_order:hover {
	opacity: 0.88;
}

.mw-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 14px;
	color: var(--mw-muted);
	font-size: 0.875rem;
}

.mw-checkout .mw-trust {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ==========================================================================
   5. Checkout — progress
   ========================================================================== */

.mw-checkout .mw-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 clamp(24px, 4vw, 40px);
	padding: 0;
	list-style: none;
}

.mw-checkout .mw-progress__step {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mw-muted);
	font-size: 0.875rem;
}

.mw-checkout .mw-progress__step + .mw-progress__step::before {
	content: "";
	width: clamp(16px, 4vw, 48px);
	height: 1px;
	margin-right: 10px;
	background: var(--mw-border);
}

.mw-checkout .mw-progress__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--mw-border);
	border-radius: 50%;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.mw-checkout .mw-progress__step.is-current {
	color: var(--mw-text);
	font-weight: 550;
}

.mw-checkout .mw-progress__step.is-current .mw-progress__num,
.mw-checkout .mw-progress__step.is-done .mw-progress__num {
	border-color: var(--mw-primary);
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
}

.mw-checkout .mw-progress__label {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   6. Notices
   ========================================================================== */

.mw .woocommerce-message,
.mw .woocommerce-info,
.mw .woocommerce-error,
.mw .woocommerce-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--mw-border);
	border-top-width: 1px;
	border-radius: var(--mw-radius);
	background: var(--mw-surface);
	color: var(--mw-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	list-style: none;
}

.mw .woocommerce-message::before,
.mw .woocommerce-info::before,
.mw .woocommerce-error::before {
	position: static;
	margin: 0;
	color: var(--mw-muted);
	font-size: 1em;
}

.mw .woocommerce-error {
	border-color: color-mix(in srgb, var(--mw-sale) 35%, var(--mw-border));
	background: color-mix(in srgb, var(--mw-sale) 5%, var(--mw-background));
}

.mw .woocommerce-message .button,
.mw .woocommerce-info .button {
	margin-left: auto;
	padding: 8px 14px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius-sm);
	background: var(--mw-background);
	color: var(--mw-text);
	font-size: 0.8125rem;
}

/* ==========================================================================
   7. Distraction-free checkout (opt-in)
   ========================================================================== */

.mw-focus.mw-checkout .site-header nav,
.mw-focus.mw-checkout .main-navigation,
.mw-focus.mw-checkout #site-navigation,
.mw-focus.mw-checkout .wp-block-navigation,
.mw-focus.mw-checkout .site-footer .widget-area,
.mw-focus.mw-checkout .wp-block-template-part footer .wp-block-columns {
	display: none;
}

/* ==========================================================================
   8. Block cart & checkout (styling only — never structural)
   ========================================================================== */

.mw-checkout-block .wc-block-components-button,
.mw-cart-block .wc-block-components-button {
	border-radius: var(--mw-btn-radius);
	font-family: var(--mw-font);
	font-weight: 550;
}

.mw-checkout-block .wc-block-components-button:not(.is-link) {
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	min-height: 52px;
}

.mw-checkout-block .wc-block-components-text-input input[type="text"],
.mw-checkout-block .wc-block-components-text-input input[type="email"],
.mw-checkout-block .wc-block-components-text-input input[type="tel"],
.mw-checkout-block .wc-block-components-combobox input,
.mw-cart-block .wc-block-components-text-input input {
	border-radius: var(--mw-radius);
	border-color: var(--mw-border);
	font-family: var(--mw-font);
}

.mw-checkout-block .wc-block-components-text-input.is-active input:focus,
.mw-checkout-block .wc-block-components-combobox.is-active input:focus {
	box-shadow: var(--mw-ring);
	border-color: var(--mw-primary);
}

.mw-checkout-block .wc-block-checkout__form,
.mw-cart-block .wc-block-cart__main {
	--wcb-primary: var(--mw-primary);
}

.mw-checkout-block .wc-block-components-radio-control-accordion-option,
.mw-checkout-block .wc-block-components-radio-control__option {
	border-radius: var(--mw-radius);
}

.mw-checkout-block .wc-block-components-sidebar,
.mw-cart-block .wc-block-cart__sidebar .wc-block-components-sidebar {
	border-radius: var(--mw-radius-lg);
}

.mw-checkout-block .wc-block-components-title,
.mw-cart-block .wc-block-components-title {
	font-family: var(--mw-font-heading);
	letter-spacing: var(--mw-tracking);
}

/* ==========================================================================
   9. Order received / thank-you page
   ========================================================================== */

.mw .woocommerce-order {
	max-width: 760px;
	margin-inline: auto;
}

.mw .woocommerce-order .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 24px 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.mw .woocommerce-order .woocommerce-order-overview li {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	color: var(--mw-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mw .woocommerce-order .woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	color: var(--mw-text);
	font-size: 0.9375rem;
	letter-spacing: 0;
	text-transform: none;
}

/* ==========================================================================
   10. Button-language normalisation
   --------------------------------------------------------------------------
   One store, one button language. Themes routinely give the checkout's Place
   Order button and the cart's Proceed to Checkout button their own radius
   (4px and 50px respectively on brighthub) while every other button follows
   the plugin's token. These selectors are theme rules with five or more
   classes, so `!important` is the only way a plugin can reconcile them.
   ========================================================================== */

.mw-checkout #payment #place_order,
.mw-cart .wc-proceed-to-checkout .checkout-button,
.mw .woocommerce-message .button,
.mw .woocommerce-info .button,
.mw-account .woocommerce-Button,
.mw-account button[type="submit"] {
	border-radius: var(--mw-btn-radius) !important;
}

/* ==========================================================================
   11. My Account, login, register, password reset
   --------------------------------------------------------------------------
   WooCommerce's account templates use raw <input> markup rather than
   `woocommerce_form_field()`, so the plugin's field filter never reaches them.
   Left alone, the account area is the one customer-facing surface that keeps
   the theme's unrelated form styling — 38px inputs with a 4px radius next to
   50px/8px fields on checkout. These rules bring it into the same language.
   ========================================================================== */

/* --- Forms ------------------------------------------------------------- */

.mw-account .woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.mw-account .woocommerce form .form-row label,
.mw-account .woocommerce-EditAccountForm label,
.mw-account .woocommerce-address-fields label {
	display: block;
	margin-bottom: 6px;
	color: var(--mw-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.mw-account .woocommerce form input.input-text,
.mw-account .woocommerce form input[type="text"],
.mw-account .woocommerce form input[type="email"],
.mw-account .woocommerce form input[type="tel"],
.mw-account .woocommerce form input[type="password"],
.mw-account .woocommerce form textarea,
.mw-account .woocommerce form select,
.mw-account .select2-container .select2-selection--single {
	width: 100%;
	min-height: 50px;
	height: auto;
	padding: 13px 14px;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius);
	background-color: var(--mw-background);
	color: var(--mw-text);
	font-family: var(--mw-font);
	font-size: 1rem;
	line-height: 1.35;
	transition: border-color var(--mw-dur-fast) var(--mw-ease), box-shadow var(--mw-dur-fast) var(--mw-ease);
}

.mw-account .woocommerce form input:focus,
.mw-account .woocommerce form textarea:focus,
.mw-account .woocommerce form select:focus {
	outline: none;
	border-color: var(--mw-primary);
	box-shadow: var(--mw-ring);
}

.mw-account .woocommerce form .button,
.mw-account .woocommerce button.button,
.mw-account .woocommerce a.button,
.mw-account .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--mw-btn-radius);
	background: var(--mw-primary);
	color: var(--mw-primary-contrast);
	font-family: var(--mw-font);
	font-size: 0.9375rem;
	font-weight: 550;
	letter-spacing: var(--mw-tracking);
	text-decoration: none;
	cursor: pointer;
	transition: opacity var(--mw-dur-fast) var(--mw-ease);
}

.mw-account .woocommerce form .button:hover,
.mw-account .woocommerce button.button:hover {
	opacity: 0.86;
	color: var(--mw-primary-contrast);
}

.mw-account .woocommerce-form-login__rememberme,
.mw-account .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mw-text);
	font-size: 0.9375rem;
}

.mw-account .woocommerce-form-login__rememberme input,
.mw-account .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mw-primary);
}

.mw-account .woocommerce-LostPassword {
	margin: 12px 0 0;
	font-size: 0.875rem;
}

.mw-account .woocommerce-LostPassword a {
	color: var(--mw-muted);
}

/* --- Login / register side by side ------------------------------------- */

.mw-account .woocommerce .u-column1,
.mw-account .woocommerce .u-column2 {
	width: 100%;
	max-width: 100%;
	float: none;
	padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius-lg);
	background: var(--mw-background);
}

.mw-account .woocommerce .col2-set {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 32px);
}

@media (max-width: 720px) {
	.mw-account .woocommerce .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mw-account .woocommerce h2 {
	margin: 0 0 16px;
	font-family: var(--mw-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: var(--mw-tracking);
}

/* --- Dashboard layout --------------------------------------------------- */

.mw-account .woocommerce-MyAccount-navigation {
	width: 100%;
	max-width: 240px;
	float: left;
	margin: 0 32px 24px 0;
}

.mw-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius-lg);
	overflow: hidden;
}

.mw-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--mw-border);
}

.mw-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.mw-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 16px;
	color: var(--mw-muted);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color var(--mw-dur-fast) var(--mw-ease), color var(--mw-dur-fast) var(--mw-ease);
}

.mw-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--mw-surface);
	color: var(--mw-text);
}

.mw-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--mw-surface);
	color: var(--mw-text);
	font-weight: 600;
}

.mw-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	overflow: hidden;
	min-width: 0;
}

@media (max-width: 782px) {
	.mw-account .woocommerce-MyAccount-navigation {
		max-width: 100%;
		float: none;
		margin: 0 0 24px;
	}
}

/* --- Order tables ------------------------------------------------------- */

.mw-account .woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--mw-border);
	border-radius: var(--mw-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.mw-account .woocommerce table.shop_table th,
.mw-account .woocommerce table.shop_table td {
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--mw-border);
	font-size: 0.9375rem;
	text-align: left;
	vertical-align: middle;
}

.mw-account .woocommerce table.shop_table thead th {
	background: var(--mw-surface);
	color: var(--mw-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mw-account .woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

/* Stack the order table on small screens rather than letting it overflow. */
@media (max-width: 640px) {
	.mw-account .woocommerce table.shop_table thead {
		display: none;
	}

	.mw-account .woocommerce table.shop_table tbody tr {
		display: grid;
		gap: 4px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--mw-border);
	}

	.mw-account .woocommerce table.shop_table tbody td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 2px 0;
		border: 0;
	}

	.mw-account .woocommerce table.shop_table tbody td::before {
		content: attr(data-title);
		color: var(--mw-muted);
		font-size: 0.8125rem;
		font-weight: 500;
	}
}

/* --- Notices, addresses, empty states ----------------------------------- */

.mw-account .woocommerce-info,
.mw-account .woocommerce-message,
.mw-account .woocommerce-error {
	border-radius: var(--mw-radius);
}

.mw-account .woocommerce-Address {
	margin-bottom: 24px;
}

.mw-account .woocommerce-Address-title h3 {
	margin: 0 0 10px;
	font-family: var(--mw-font-heading);
	font-size: 1rem;
	font-weight: 600;
}