/*
 * Locked In Fightwear: WooCommerce pages (basket, checkout, account, order received) in the
 * old site's look. Loaded on WooCommerce pages only (includes/shop-pages.php).
 */

/* Page frame: WooCommerce pages use Hello's page template. */
body.woocommerce-cart:not([class*="elementor-page-"]) .site-main,
body.woocommerce-checkout:not([class*="elementor-page-"]) .site-main,
body.woocommerce-account:not([class*="elementor-page-"]) .site-main {
	max-width: 1328px;
	margin: 0 auto;
	padding: 56px 24px 96px;
}
.woocommerce-cart .page-header,
.woocommerce-checkout .page-header,
.woocommerce-account .page-header {
	padding: 0;
	margin: 0 0 32px;
}
.woocommerce-cart .page-header .entry-title,
.woocommerce-checkout .page-header .entry-title,
.woocommerce-account .page-header .entry-title {
	max-width: none;
	padding-inline: 0;
	font-family: var(--lfw-font-heading);
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--lfw-text);
}
.woocommerce-cart .page-header .entry-title::after,
.woocommerce-checkout .page-header .entry-title::after,
.woocommerce-account .page-header .entry-title::after {
	content: "";
	display: block;
	width: 96px;
	height: 4px;
	margin-top: 16px;
	background: var(--lfw-gold);
}
@media (max-width: 767px) {
	body.woocommerce-cart:not([class*="elementor-page-"]) .site-main,
	body.woocommerce-checkout:not([class*="elementor-page-"]) .site-main,
	body.woocommerce-account:not([class*="elementor-page-"]) .site-main {
		padding: 40px 16px 56px;
	}
}

/* Headings inside WooCommerce forms. */
.woocommerce h2,
.woocommerce h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--lfw-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lfw-text);
	margin: 0 0 20px;
}

/* Form fields. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection,
.woocommerce form.checkout_coupon input.input-text,
.woocommerce-cart #content table.cart td.actions .coupon .input-text {
	min-height: 50px;
	padding: 12px 14px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 0;
	color: var(--lfw-text);
	font-family: var(--lfw-font-body);
	font-size: 0.9375rem;
	box-shadow: none;
}
.woocommerce form .form-row textarea {
	min-height: 120px;
}
/* Room for the gold dropdown arrow (site.css). */
.woocommerce form .form-row select {
	padding-right: 44px;
}
/*
 * WooCommerce's searchable country box (bag calculator, and checkout if more countries are
 * added): the field's look, the gold chevron instead of its arrow, a dark list.
 */
.woocommerce .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
	padding: 0 44px 0 14px;
	background-image: var(--lfw-select-arrow);
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px 18px;
}
.woocommerce .select2-container--focus .select2-selection--single,
.woocommerce .select2-container--open .select2-selection--single {
	border-color: var(--lfw-gold);
}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--lfw-text);
	line-height: 1.4;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	display: none;
}
body .select2-dropdown {
	background: var(--lfw-surface);
	border-color: rgba(255, 255, 255, 0.15);
	border-radius: 0;
	color: var(--lfw-text);
	font-family: var(--lfw-font-body);
}
body .select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--lfw-text);
}
body .select2-container--default .select2-results__option[aria-selected="true"],
body .select2-container--default .select2-results__option[data-selected="true"] {
	background: rgba(255, 255, 255, 0.08);
	color: var(--lfw-text);
}
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--lfw-gold);
	color: #000;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--lfw-gold);
	outline: none;
}
.woocommerce form .form-row label {
	color: var(--lfw-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.woocommerce form .form-row .required {
	color: var(--lfw-gold);
	text-decoration: none;
}
.woocommerce form .form-row {
	margin: 0 0 18px;
	padding: 0;
}
/*
 * Field errors: a red edge on the field, its label and message in a red that reads on the dark
 * background, and the message clear of the field above it. A filled-in field keeps the normal
 * edge instead of WooCommerce's green.
 */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection {
	border-color: #c62828;
}
.woocommerce form .form-row.woocommerce-invalid label {
	color: #e57373;
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
	border-color: rgba(255, 255, 255, 0.15);
}
.woocommerce form .form-row.woocommerce-validated input.input-text:focus,
.woocommerce form .form-row.woocommerce-validated select:focus {
	border-color: var(--lfw-gold);
}
.woocommerce-checkout .checkout .checkout-inline-error-message {
	margin: 8px 0 0;
	color: #e57373;
	font-size: 0.8125rem;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}
.woocommerce-checkout .woocommerce-billing-fields strong,
#billing_country_field strong {
	color: var(--lfw-text);
}

/* Buttons: gold, square, Cinzel (Place order, Update basket, Apply, Save). */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order {
	/* Flex so the label sits in the middle of the 50px height, whatever the font's metrics. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	text-align: center;
	min-height: 50px;
	padding: 14px 28px;
	background: var(--lfw-gold);
	border: 0;
	border-radius: 0;
	color: #000;
	font-family: var(--lfw-font-heading);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 1.4;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover {
	background: #fff;
	color: #000;
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: rgba(255, 255, 255, 0.12);
	color: var(--lfw-text-muted);
	padding: 14px 28px;
}
/* Add to bag (wishlist page) while adding: unchanged, only its icon turns (site.css). */
.woocommerce button.button.cc-loop-cart__button.loading,
.woocommerce button.button.cc-loop-cart__button.loading:disabled[disabled] {
	background: var(--lfw-gold);
	color: #000;
	padding: 14px 28px;
}

/* Tables (order review, basket, order details). */
.woocommerce table.shop_table {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0;
	border-collapse: collapse;
	background: var(--lfw-surface);
	color: var(--lfw-text);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 16px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: none;
	color: var(--lfw-text);
}
.woocommerce table.shop_table thead th {
	border-top: 0;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--lfw-text-muted);
}
.woocommerce table.shop_table .order-total .amount,
.woocommerce table.shop_table .cart-subtotal .amount,
.woocommerce table.shop_table .product-subtotal .amount,
.woocommerce table.shop_table .product-total .amount {
	color: var(--lfw-gold);
}
.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
	font-size: 1.125rem;
}
.woocommerce table.shop_table td.product-name .variation,
.woocommerce table.shop_table td.product-name dl {
	color: var(--lfw-text-muted);
	font-size: 0.8125rem;
}
.woocommerce ul#shipping_method li label {
	color: var(--lfw-text);
}
/* Bag: "Shipping to …" a little clear of the options. */
.woocommerce .cart_totals .woocommerce-shipping-destination {
	padding-top: 5px;
}
/* Bag: one delivery option per line, right-aligned, each radio centred on its label. */
.woocommerce .cart_totals ul#shipping_method li {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
}
/* 5px between options; the last keeps WooCommerce's 0.5em before "Shipping to …". */
.woocommerce .cart_totals ul#shipping_method li:not(:last-child) {
	margin-bottom: 0;
}
.woocommerce .cart_totals ul#shipping_method li + li {
	margin-top: 5px;
}
.woocommerce .cart_totals ul#shipping_method li input.shipping_method {
	flex: none;
	margin: 0;
}
.woocommerce .cart_totals ul#shipping_method li label {
	line-height: 1.5;
}
.woocommerce ul#shipping_method li label .amount {
	color: var(--lfw-gold);
}
/* Bag totals: labels take only their own width, so the shipping note and address use the rest. */
.woocommerce .cart_totals table.shop_table th {
	width: 1%;
	white-space: nowrap;
}

/* CC Storefront's processing overlay (Loading > Processing overlay) in the brand's type. */
body.cc-checkout-processing:has(form.checkout.processing)::before {
	color: var(--lfw-text);
	font-family: var(--lfw-font-heading);
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
body.cc-checkout-processing form.checkout.processing::after {
	color: var(--lfw-text-muted);
	font-family: var(--lfw-font-body);
	letter-spacing: 0;
	opacity: 1;
}

/* Checkout: details left, order summary and payment right (sticky); stacked on tablets. */
@media (min-width: 1025px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		/* Row 1 holds the error list (empty until Place order finds a problem), across both columns. */
		grid-template-rows: auto auto 1fr;
		column-gap: 48px;
		align-items: start;
	}
	.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.woocommerce-checkout form.checkout #customer_details {
		grid-column: 1;
		grid-row: 2 / span 2;
	}
	.woocommerce-checkout form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 2;
	}
	.woocommerce-checkout form.checkout #order_review {
		grid-column: 2;
		grid-row: 3;
		position: sticky;
		top: 120px;
	}
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: 100%;
}
.woocommerce-checkout #customer_details .col-2 {
	margin-top: 16px;
}
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	margin-top: 32px;
}
/* A tickbox, not a heading: the same text as the other tickbox labels. */
.woocommerce-checkout #ship-to-different-address {
	margin: 0 0 16px;
	font-family: var(--lfw-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.woocommerce-checkout #ship-to-different-address label {
	cursor: pointer;
}
.woocommerce-checkout #order_review {
	padding: 24px;
	background: var(--lfw-surface);
	border: 1px solid rgba(212, 175, 55, 0.25);
}
.woocommerce-checkout #order_review table.shop_table {
	background: none;
	border: 0;
	margin: 0 0 16px;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 12px 0;
}
/* No line above the column headings: the box's own border is the top edge. */
.woocommerce-checkout #order_review table.shop_table thead th {
	border-top: 0;
	padding-top: 0;
}
/* "× 2" in gold so the quantity stands out (checkout, order received, account). */
.woocommerce table.shop_table strong.product-quantity {
	color: var(--lfw-gold);
	font-weight: 700;
}
.woocommerce-checkout #order_review table.shop_table td:last-child,
.woocommerce-checkout #order_review table.shop_table th:last-child {
	text-align: right;
}
.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 0 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.woocommerce-checkout #payment ul.payment_methods li {
	color: var(--lfw-text);
}
.woocommerce-checkout #payment div.payment_box {
	background: rgba(255, 255, 255, 0.05);
	color: #c9c9c9;
	border-radius: 0;
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: rgba(255, 255, 255, 0.05);
}
.woocommerce-checkout #payment div.form-row {
	padding: 16px 0 0;
}
/*
 * Stripe: its fields come in the brand's colours from includes/payments.php. Here: no browser
 * box round them, the save-card line as normal text, method logos that read on black (no
 * generic white card, Clearpay's black wordmark in white).
 */
.woocommerce-checkout #payment .payment_box fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew {
	margin: 12px 0 0;
}
/*
 * Payment method radios and the save-card tick: the same 10px from their text as the terms
 * tick (WooCommerce gives them about 1em, plus the space before the label).
 */
.woocommerce-checkout #payment ul.payment_methods li > input.input-radio,
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"] {
	margin: 0 6px 0 0;
}
.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew label {
	color: #c9c9c9;
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.woocommerce-checkout #payment .wc_payment_method > label img.stripe-icon {
	max-height: 20px;
	margin-left: 8px;
	vertical-align: middle;
}
.woocommerce-checkout #payment .wc_payment_method > label img.stripe-cards-icon {
	display: none;
}
.woocommerce-checkout #payment .wc_payment_method > label img.stripe-afterpay_clearpay-icon {
	filter: invert(1);
}
/* Klarna's logo file has about 10px of empty space on its left: pulled in so it sits as
   close to its label as Clearpay's. */
.woocommerce-checkout #payment .wc_payment_method > label img.stripe-klarna-icon {
	margin-left: -2px;
}
/* Apple Pay / Google Pay above Billing details: room before the heading; Stripe's
   "— OR —" divider is dropped (the checkout layout pushed it under Additional information). */
.woocommerce-checkout #wc-stripe-express-checkout-element {
	margin-bottom: 32px !important;
}
.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
	display: none !important;
}
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	color: var(--lfw-text-muted);
	font-size: 0.8125rem;
	line-height: 1.6;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
	color: var(--lfw-text);
	font-size: 0.9375rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}
.woocommerce-checkout #place_order {
	width: 100%;
	float: none;
	margin-top: 8px;
	font-size: 0.9375rem;
}
.woocommerce-checkout .lfw-dispatch {
	margin: 0 0 16px;
}
.cc-account-note {
	margin: 8px 0 0;
	color: var(--lfw-text-muted);
	opacity: 1;
	font-size: 0.8125rem;
	line-height: 1.6;
}
.woocommerce-checkout .woocommerce-billing-fields .cc-account-note strong {
	color: var(--lfw-gold);
	font-weight: 600;
}

.woocommerce-checkout #order_comments,
.woocommerce form .form-row textarea.input-text {
	background: rgba(255, 255, 255, 0.06);
	color: var(--lfw-text);
	border: 1px solid rgba(255, 255, 255, 0.15);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label {
	color: var(--lfw-text);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
/* Coupon and login toggles at the top of checkout. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding-left: 20px;
}
/* They are links, not messages: no notice icon. */
.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-form-login-toggle .woocommerce-info::before {
	display: none;
}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	margin: 0 0 24px;
	padding: 20px;
	background: var(--lfw-surface);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0;
}
.woocommerce form.checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	/* Field and button line up at the top, so an error under the field doesn't move the button. */
	align-items: flex-start;
	gap: 12px;
}
.woocommerce .coupon-error-notice {
	margin: 8px 0 0;
	font-size: 0.8125rem;
}
/* Phones: field and button full width, one under the other, as on the bag page. */
@media (max-width: 767px) {
	.woocommerce form.checkout_coupon .form-row {
		flex: 1 1 100%;
	}
	.woocommerce form.checkout_coupon .form-row .button {
		width: 100%;
	}
}
.woocommerce form.checkout_coupon p:not(.form-row) {
	flex: 1 1 100%;
	margin: 0;
	color: var(--lfw-text-muted);
}
.woocommerce form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
}
.woocommerce form.checkout_coupon .form-row-first {
	flex: 1;
}

/* Basket page. */
.woocommerce-cart table.cart img {
	width: 72px;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--lfw-black);
}
.woocommerce-cart table.cart td.product-name a {
	color: var(--lfw-text);
	font-family: var(--lfw-font-heading);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}
.woocommerce-cart table.cart td.product-name a:hover {
	color: var(--lfw-gold);
}
/* Remove (×) at the right-hand end of each row instead of the first column. */
.woocommerce-cart table.cart tr.cart_item {
	position: relative;
}
.woocommerce-cart table.cart th.product-remove,
.woocommerce-cart table.cart td.product-remove {
	width: 0;
	padding: 0;
}
.woocommerce-cart table.cart td.product-remove a.remove {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
}
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal {
	padding-right: 56px;
}
.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-cart table.cart td.product-thumbnail {
	padding-left: 16px;
}
@media (max-width: 767px) {
	.woocommerce-cart table.cart td.product-remove {
		position: static;
		display: block;
		height: 0;
		border: 0;
	}
	.woocommerce-cart table.cart td.product-remove::before {
		display: none;
	}
	.woocommerce-cart table.cart td.product-remove a.remove {
		top: 14px;
		right: 16px;
		transform: none;
		z-index: 1;
	}
	.woocommerce-cart table.cart td.product-name {
		padding-right: 56px;
	}
	.woocommerce-cart table.cart td.product-subtotal {
		padding-right: 16px;
	}
}
.woocommerce-cart table.cart a.remove {
	color: var(--lfw-text-muted) !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
}
.woocommerce-cart table.cart a.remove:hover {
	background: #c62828;
	color: #fff !important;
}
.woocommerce-cart table.cart td.actions {
	padding: 16px;
}
.woocommerce-cart #content table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
/* An error ("Please enter a coupon code.") goes on its own line under the field. */
.woocommerce-cart #content table.cart td.actions .coupon .coupon-error-notice {
	flex: 1 1 100%;
	width: auto;
	margin: -4px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
}
/* Phones (stacked): the error under the field, above the button, as at checkout. */
@media (max-width: 767px) {
	.woocommerce-cart #content table.cart td.actions .coupon .coupon-error-notice {
		order: 1;
	}
	.woocommerce-cart #content table.cart td.actions .coupon .button {
		order: 2;
	}
}
.woocommerce-cart #content table.cart td.actions .coupon #coupon_code {
	width: 280px;
	min-height: 50px;
	margin: 0;
	padding: 12px 16px;
}
.woocommerce-cart #content table.cart td.actions .coupon .button,
.woocommerce-cart #content table.cart td.actions > .button {
	min-height: 50px;
	margin: 0;
}
/* Update basket: an outline button, quiet until a quantity changes. */
.woocommerce-cart #content table.cart td.actions > .button {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--lfw-text);
}
.woocommerce-cart #content table.cart td.actions > .button:disabled,
.woocommerce-cart #content table.cart td.actions > .button[disabled] {
	opacity: 0.4;
	padding: 12px 24px;
}
.woocommerce-cart #content table.cart td.actions > .button:not(:disabled):hover {
	border-color: var(--lfw-gold);
	color: var(--lfw-gold);
	background: none;
}
/* Continue shopping: the same outline button, at the right. */
.woocommerce-cart #content table.cart td.actions > a.cc-continue-shopping {
	display: inline-flex;
	float: right;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	text-decoration: none;
}
@media (max-width: 767px) {
	.woocommerce-cart #content table.cart td.actions .coupon {
		flex-direction: column;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.woocommerce-cart #content table.cart td.actions .coupon #coupon_code,
	.woocommerce-cart #content table.cart td.actions .coupon .button,
	.woocommerce-cart #content table.cart td.actions > .button {
		width: 100%;
	}
	/* Update bag and Continue shopping: full width on their own lines, 12px apart. */
	.woocommerce-cart #content table.cart td.actions > .button,
	.woocommerce-cart #content table.cart td.actions > a.cc-continue-shopping {
		display: flex;
		float: none;
		width: 100%;
		margin-top: 12px;
	}
}
.woocommerce-cart .cart-collaterals .cart_totals {
	padding: 24px;
	background: var(--lfw-surface);
	border: 1px solid rgba(212, 175, 55, 0.25);
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table {
	background: none;
	border: 0;
}
/* Totals rows: the same quiet dividers and left edge as the checkout's order box. */
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr:first-child td {
	border-top: 0;
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
	text-align: right;
}
.woocommerce-cart .woocommerce-shipping-calculator .shipping-calculator-button::after {
	display: none;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	font-size: 0.9375rem;
	letter-spacing: 0.15em;
	white-space: nowrap;
}
/* Small phones: tighter so "Proceed to checkout" fits the button. */
@media (max-width: 380px) {
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		padding-right: 12px;
		padding-left: 12px;
		font-size: 0.875rem;
		letter-spacing: 0.08em;
	}
}
/* Empty bag: centred, with the icon on the text's line (it sat in the top corner). */
.woocommerce-cart .cart-empty.woocommerce-info {
	text-align: center;
	padding: 24px 20px;
}
.woocommerce-cart .cart-empty.woocommerce-info::before {
	position: static;
	display: inline-block;
	margin-right: 10px;
	vertical-align: -2px;
}
.woocommerce-cart .return-to-shop {
	text-align: center;
}

/* Order received (thank-you) page. */
.woocommerce-order .woocommerce-thankyou-order-received {
	margin: 0 0 24px;
	color: #c9c9c9;
	font-size: 1.0625rem;
	line-height: 1.6;
}
.woocommerce-order ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
}
.woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce-order ul.woocommerce-order-overview::after {
	display: none;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
	overflow-wrap: anywhere;
}
/* Phone and tablet: two per row, email across both. Desktop: one row, each box as wide as its
   value, so the email stays on one line. */
.woocommerce-order ul.woocommerce-order-overview li.email {
	grid-column: span 2;
}
@media (min-width: 1025px) {
	.woocommerce-order ul.woocommerce-order-overview {
		display: flex;
	}
	.woocommerce-order ul.woocommerce-order-overview li {
		flex: 1 1 auto;
	}
}
.woocommerce-order .woocommerce-table--order-details td.product-name a {
	color: var(--lfw-text);
	text-decoration: none;
}
.woocommerce-order .woocommerce-table--order-details td.product-name a:hover {
	color: var(--lfw-gold);
}
.woocommerce-order .cc-rank {
	margin: 0 0 32px;
	padding: 24px;
	background: var(--lfw-surface);
	border: 1px solid rgba(212, 175, 55, 0.3);
}
.lfw-next {
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.lfw-next__steps {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	counter-reset: lfw-step;
	display: grid;
	gap: 12px;
}
.lfw-next__steps li {
	position: relative;
	padding-left: 44px;
	color: #c9c9c9;
	line-height: 1.6;
	counter-increment: lfw-step;
}
.lfw-next__steps li::before {
	content: counter(lfw-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -2px;
	color: var(--lfw-gold);
	font-family: var(--lfw-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
}
.lfw-next__help {
	color: var(--lfw-text-muted);
}
.lfw-next__help a {
	color: var(--lfw-gold);
}
.lfw-next__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}
.woocommerce a.button.lfw-button--outline {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--lfw-text);
}
.woocommerce a.button.lfw-button--outline:hover {
	border-color: var(--lfw-gold);
	color: var(--lfw-gold);
	background: none;
}
.woocommerce-order ul.woocommerce-order-overview li,
.woocommerce-order ul.woocommerce-order-overview li:last-of-type {
	margin: 0;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--lfw-surface);
	color: var(--lfw-text-muted);
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	color: var(--lfw-text);
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
}
/* Billing and shipping boxes side by side at the same height. */
.woocommerce-order .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.woocommerce-order .woocommerce-columns--addresses::before,
.woocommerce-order .woocommerce-columns--addresses::after {
	display: none;
}
.woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
	display: flex;
	flex-direction: column;
	width: auto;
	float: none;
	margin: 0;
}
.woocommerce-order .woocommerce-columns--addresses address {
	flex: 1;
}
@media (max-width: 767px) {
	.woocommerce-order .woocommerce-columns--addresses {
		grid-template-columns: 1fr;
	}
}
.woocommerce-order .woocommerce-customer-details address {
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0;
	background: var(--lfw-surface);
	color: #c9c9c9;
}
/* Order addresses: CC Storefront's contact lines (Basket and checkout), with gold icons. */
body {
	--cc-contact-icon-color: var(--lfw-gold);
}

/*
 * CC Saved Addresses: the brand's fonts and colours for its address book and checkout picker
 * (the plugin reads these variables), then its picker and "Save this address" tickbox as the
 * other fields and tickboxes here.
 */
:root {
	--cc-address-font: var(--lfw-font-body);
	--cc-address-detail-font: var(--lfw-font-body);
	--cc-address-heading-font: var(--lfw-font-heading);
	--cc-address-text: #c9c9c9;
	--cc-address-heading: var(--lfw-text);
	--cc-address-background: var(--lfw-surface);
	--cc-address-border: rgba(255, 255, 255, 0.1);
	--cc-address-accent: var(--lfw-gold);
	--cc-address-accent-hover: var(--lfw-text);
}
body.woocommerce-checkout .cchsa-checkout-selector label {
	margin-bottom: 8px !important;
	color: var(--lfw-text) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
/* The plugin's own arrow (also on focus) is replaced by the site's gold one in every state. */
body.woocommerce-checkout select.cchsa-saved-address-select,
body.woocommerce-checkout select.cchsa-saved-address-select:focus,
body.woocommerce-checkout select.cchsa-saved-address-select:focus-visible {
	min-height: 50px !important;
	padding: 0 44px 0 14px !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
	background-image: var(--lfw-select-arrow) !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 18px 18px !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 0 !important;
	color: var(--lfw-text) !important;
	font-size: 0.9375rem !important;
	cursor: pointer;
}
body.woocommerce-checkout select.cchsa-saved-address-select:focus,
body.woocommerce-checkout select.cchsa-saved-address-select:focus-visible {
	border-color: var(--lfw-gold) !important;
}
body.woocommerce-checkout select.cchsa-saved-address-select option {
	background: var(--lfw-surface);
}
body.woocommerce-checkout .cchsa-checkout-selector {
	margin: 0 0 24px !important;
}
body.woocommerce-checkout .cchsa-save-address-row {
	margin: 4px 0 18px !important;
}
.woocommerce form .form-row.cchsa-save-address-row label {
	display: inline-block !important;
	gap: 0 !important;
	color: var(--lfw-text) !important;
	font-size: 0.9375rem !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
}
.woocommerce form .form-row.cchsa-save-address-row input[type="checkbox"] {
	width: 14px !important;
	height: 14px !important;
	margin: calc((1lh - 14px) / 2) 0 0 !important;
}

/* CC Storefront's steps (Basket and checkout > Steps): the brand's colours and type. */
.cc-steps {
	--cc-steps-accent: var(--lfw-gold);
	--cc-steps-on-accent: #000;
	--cc-steps-text: var(--lfw-text);
	--cc-steps-muted: var(--lfw-text-muted);
	--cc-steps-line: rgba(255, 255, 255, 0.25);
}
.cc-steps .cc-steps__item,
.cc-steps a.cc-steps__item {
	font-family: var(--lfw-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
@media (max-width: 767px) {
	.cc-steps .cc-steps__item,
	.cc-steps a.cc-steps__item {
		font-size: 0.75rem;
		letter-spacing: 0.08em;
	}
}

/* Delivery estimate row in the bag and checkout totals (CC Shipping): the date, with the cut-off beside it when it fits (it wraps whole). */
:is(.jb-cart-delivery-estimate, .jb-checkout-delivery-estimate) :is(.jb-cart-delivery-date, .jb-checkout-delivery-date) {
	color: var(--lfw-text);
	font-weight: 600;
}
:is(.jb-cart-delivery-inline, .jb-checkout-delivery-inline) {
	display: inline-block !important;
	margin-left: 0;
	color: var(--lfw-text-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	white-space: nowrap;
}
:is(.jb-cart-delivery-inline, .jb-checkout-delivery-inline) .jb-inline-time {
	color: inherit;
	font-weight: 400;
}

/*
 * Sign in forms (My Account and the checkout's "Returning customer?"): the Log in button, then
 * "Remember me" beside it, centred with it (WooCommerce floats the button and leaves the
 * label at the top); the password eye in gold, with no button box on hover (the kit's button
 * hover turned it white).
 */
.woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}
/* WooCommerce's hidden fields in the row would each add a gap. */
.woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) input[type="hidden"] {
	display: none;
}
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit {
	order: -1;
	float: none;
	margin: 0;
}
.woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme {
	margin: 0;
}
.woocommerce form .show-password-input,
.woocommerce form .show-password-input:hover,
.woocommerce form .show-password-input:focus {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}
.woocommerce form .show-password-input::before {
	background: var(--lfw-gold);
	-webkit-mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z"/></svg>') no-repeat center / contain;
}
.woocommerce form .show-password-input.display-password::before {
	-webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z"/></svg>');
	mask-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z"/></svg>');
}

/*
 * Checkout order box: the delivery options and the delivery line (date, then "(Order by …)")
 * run left into the free space beside their labels instead of wrapping in the narrow price
 * column; still right-aligned, with the same space between options as the bag. Each line is a
 * zero-width flex box (so the column keeps its width and the product names theirs) as wide
 * as the cell, its content overflowing to the left. CC Shipping 0.4.4 wraps the date and the
 * order-by in .jb-delivery-line.
 */
.woocommerce-checkout-review-order-table ul#shipping_method {
	width: 0;
	min-width: 100%;
}
.woocommerce-checkout-review-order-table ul#shipping_method li {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	white-space: nowrap;
}
.woocommerce-checkout-review-order-table tr.jb-checkout-delivery-estimate .jb-delivery-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 2px 0.3em;
	width: 0;
	min-width: 100%;
	white-space: nowrap;
}
/* Room for both on one line from 400px; narrower, the order-by goes underneath. */
@media (min-width: 400px) {
	.woocommerce-checkout-review-order-table tr.jb-checkout-delivery-estimate .jb-delivery-line {
		flex-wrap: nowrap;
	}
}
.woocommerce-checkout-review-order-table ul#shipping_method li:not(:last-child) {
	margin-bottom: 0;
}
.woocommerce-checkout-review-order-table ul#shipping_method li + li {
	margin-top: 5px;
}
.woocommerce-checkout-review-order-table ul#shipping_method li input.shipping_method {
	flex: none;
	margin: 0;
}
/* The bag's line height, so the options are as far apart as in the bag. */
.woocommerce-checkout-review-order-table ul#shipping_method li label {
	line-height: 1.5;
}