/**
 * Forest Remedy — checkout, cart, thank-you and upsell offer.
 * Loaded only on those pages, versioned by filemtime.
 *
 * Palette: see fr-tokens.css (Customiser primary #5c6a5d · secondary #3a4932 · links #587548 since
 * 2026-09-19). Type: Lato throughout.
 */

/* -------------------------------------------------------------
 * The agreement notice that replaced the terms tick box
 * ---------------------------------------------------------- */

p.fr-order-agreement {
	margin: 4px 0 14px;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--fr-ink-4);
}

p.fr-order-agreement a {
	color: var(--fr-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

p.fr-order-agreement a:hover {
	color: var(--fr-mid);
}

/* -------------------------------------------------------------
 * Checkout — the money page
 *
 * The Aero checkout ships FunnelKit's stock spacing and borders.
 * These rules quieten it rather than redesign it: the buyer should
 * notice the products and the button, not the chrome.
 * ---------------------------------------------------------- */

.wfacp-form .wfacp_main_form_wrapper h3,
.wfacp-form .wfacp-section-heading,
.woocommerce-checkout h3 {
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fr-deep) !important;
}

/* Inputs: one consistent height and a calm border, instead of three different treatments. */
.wfacp-form input[type="text"],
.wfacp-form input[type="email"],
.wfacp-form input[type="tel"],
.wfacp-form select,
.woocommerce-checkout .input-text,
.woocommerce-checkout select {
	height: 46px;
	border: 1px solid var(--fr-line-4);
	border-radius: 4px;
	background: var(--fr-white);
	box-shadow: none;
}

.wfacp-form input[type="text"]:focus,
.wfacp-form input[type="email"]:focus,
.wfacp-form input[type="tel"]:focus,
.wfacp-form select:focus,
.woocommerce-checkout .input-text:focus {
	border-color: var(--fr-mid);
	box-shadow: 0 0 0 2px var(--fr-mid-tint);
	outline: none;
}

/* The payment box: lose the heavy grey panel, keep a quiet outline. */
.woocommerce-checkout #payment,
.wfacp-form #payment {
	background: transparent;
	border: 1px solid var(--fr-line-2);
	border-radius: 6px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--fr-line-2);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--fr-mist);
	color: var(--fr-ink-2);
	font-size: 0.9em;
	line-height: 1.55;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--fr-mist);
}

/* Place order: the one thing on the page that should feel inevitable. */
.woocommerce-checkout #place_order,
.wfacp-form #place_order {
	height: auto;
	padding: 16px 24px;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 4px;
	background: var(--fr-deep);
	transition: background-color 0.15s ease;
}

.woocommerce-checkout #place_order:hover,
.wfacp-form #place_order:hover {
	background: var(--fr-deep-hover);
}

/* The order summary: align the numbers, quieten the rules between them. */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.wfacp_order_summary td,
.wfacp_order_summary th {
	border-color: var(--fr-line-1);
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
	font-size: 1.1em;
	color: var(--fr-deep);
}

/* -------------------------------------------------------------
 * Thank-you page and the upsell offer
 * ---------------------------------------------------------- */

/* The sage band sits directly under a white header; give it room to breathe. */
.wffn-ty-wrapper .elementor-section,
.wfocu-offer-wrapper .elementor-section {
	--fr-band: var(--fr-soft);
}

.wffn_ty_order_details,
.wfocu_offer_wrap {
	border-radius: 6px;
}

/* Order-detail tables on both pages: same treatment as the checkout summary. */
.wffn_ty_order_details table th,
.wffn_ty_order_details table td {
	border-color: var(--fr-line-1);
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Bank details block — the one thing a bank-transfer customer must be able to read and copy. */
.woocommerce-order .wc-bacs-bank-details,
.wffn_ty_order_details .wc-bacs-bank-details {
	padding: 16px 18px;
	margin: 8px 0 0;
	background: var(--fr-mist);
	border: 1px solid var(--fr-line-3);
	border-left: 3px solid var(--fr-mid);
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
}

.woocommerce-order .wc-bacs-bank-details li,
.wffn_ty_order_details .wc-bacs-bank-details li {
	list-style: none;
	margin: 0 0 4px;
}

/* -------------------------------------------------------------
 * Cart — left mostly alone (the slide cart is what most people use),
 * but the two things that do get seen.
 * ---------------------------------------------------------- */

.woocommerce-cart .checkout-button {
	background: var(--fr-deep);
	font-weight: 700;
}

.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td {
	border-color: var(--fr-line-1);
}

/* The only stock-blue link left on the checkout.
   Aero sets this from `body #wfacp-e-form ...` and its stylesheet loads AFTER the child theme's,
   so equal specificity still loses on source order. !important is the honest fix for one
   declaration against a third-party sheet we do not control; it is used here and nowhere else. */
body #wfacp-e-form .wfacp_woocommerce_form_coupon .wfacp-coupon-section .woocommerce-info a,
body #wfacp-e-form .wfacp_form_cart .wfacp_woocommerce_form_coupon .wfacp-coupon-section .woocommerce-info a,
.wfacp_mini_cart_start_h .wfacp-coupon-page .woocommerce-info a,
.wfacp_showcoupon,
.woocommerce-checkout .showcoupon {
	color: var(--fr-mid) !important;
}

body #wfacp-e-form .wfacp_woocommerce_form_coupon .wfacp-coupon-section .woocommerce-info a:hover,
.wfacp_showcoupon:hover,
.woocommerce-checkout .showcoupon:hover {
	color: var(--fr-deep);
}

/* -------------------------------------------------------------
 * Type on the purchase path — a fix for a font that was never here
 *
 * The Rosetta template emits `font-family:Open Sans;` 227 times on the
 * checkout alone — unquoted, and with no fallback after it. Open Sans has
 * never existed on this server: Kirki self-hosts exactly two families,
 * Lato and Dancing Script, and Elementor's Google Fonts are off for
 * privacy. So all 227 declarations resolve to nothing and the browser
 * falls back to its own default, which is a serif in most of them — on
 * the page where somebody types their card details.
 *
 * Those selectors are generated and element-scoped, so they can be
 * neither enumerated nor reliably outranked on specificity. `!important`
 * on font-family alone is the narrow tool for that; the only other use of
 * it in this file is the coupon link, for the same kind of documented
 * reason. Nothing but the font is forced.
 *
 * The two Roboto declarations are swept up deliberately — Roboto is not
 * on disk either, so it was never rendering.
 *
 * VERIFY BY THE USED FONT, NOT THE DECLARED ONE:
 *   getComputedStyle(document.querySelector('#wfacp-e-form')).fontFamily
 *
 * And do NOT verify with document.fonts.check(). On this very page it
 * answered true for 'Open Sans' while Open Sans was absent: the method
 * reports whether anything still needs loading, so a family with no
 * @font-face at all answers true because there is nothing to fetch.
 * Measure instead — a font that is really present renders at a different
 * width from a name that cannot exist:
 *
 *   const w = s => { const c = document.createElement('canvas').getContext('2d');
 *                    c.font = '48px ' + s; return c.measureText('Handgloves').width; };
 *   w('Lato')       !== w('nonexistentfont123')   // true  => Lato is real
 *   w('"Open Sans"') === w('nonexistentfont123')  // true  => it never was
 * ---------------------------------------------------------- */

/* --fr-font now lives in fr-tokens.css */

body .elementor-element,
body .elementor-element h1,
body .elementor-element h2,
body .elementor-element h3,
body .elementor-element h4,
body .elementor-element h5,
body .elementor-element h6,
body .elementor-element p,
body .elementor-element li,
body .elementor-element span,
body .elementor-element a,
body .elementor-element label,
body .elementor-element input,
body .elementor-element select,
body .elementor-element textarea,
body .elementor-element button,
body .wfacp-form,
body .wfacp-form input,
body .wfacp-form select,
body .wfacp-form textarea,
body .wfacp-form button {
	font-family: var( --fr-font ) !important;
}

/* ----------------------------------------------------------
 * 1c. Local pickup note — added 2026-09-15.
 * Under each pickup rate at checkout, and as a callout on the thank-you page.
 * ---------------------------------------------------------- */
.fr-pickup-note {
	display: block;
	margin: 4px 0 8px 26px;
	font-size: 0.85em;
	line-height: 1.4;
	color: var(--fr-moss-ink);
}

.fr-pickup-note--order {
	margin: 16px 0;
	padding: 12px 14px;
	background: var(--fr-mist);
	border-left: 3px solid var(--fr-mid);
	color: var(--fr-ink);
	font-size: 0.95em;
}

/* -------------------------------------------------------------
 * 2026-09-19 (polish pass 2)
 * ---------------------------------------------------------- */

/* Every link on the checkout was FunnelKit's stock salmon (#dd7575, 3.05:1 on white), including the
   Terms / Privacy / Refunds links in the agreement notice above, whose own rule never won. FunnelKit's
   rule is `body:not(.wfacpef_page) #wfacp-e-form a:not(.button-social-login):not(.wfob_read_more_link)`
   (specificity 1,3,2) and its sheet loads after this one, so the selector below repeats it with one
   more type and one more class (1,4,3): it wins on specificity rather than with !important. */
html body:not(.wfacpef_page) #wfacp-e-form a:not(.button-social-login):not(.wfob_read_more_link):not(.button) {
	color: var(--fr-mid);
}

html body:not(.wfacpef_page) #wfacp-e-form a:not(.button-social-login):not(.wfob_read_more_link):not(.button):hover {
	color: var(--fr-deep);
}

/* Links inside sentences are underlined, so they read as links without relying on colour alone. */
html body:not(.wfacpef_page) #wfacp-e-form p a:not(.button-social-login):not(.wfob_read_more_link):not(.button),
html body:not(.wfacpef_page) #wfacp-e-form .woocommerce-privacy-policy-text a:not(.button) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* "We accept Visa, Mastercard and American Express" (attachment 629) only while a card gateway is
   switched on — inc/site.php §4 adds .fr-cards-live. Until Square is connected, bank transfer is the
   only way to pay, and card logos would promise otherwise at the moment of paying. */
body:not(.fr-cards-live) .elementor-widget-image:has(img.wp-image-629) {
	display: none;
}

/* The order-summary label was the one line on the page in Roboto (never loaded, so Arial). */
body #wfacp-e-form .wfacp-order-summary-label,
.wfacp-order-summary-label {
	font-family: var(--fr-font);
	color: var(--fr-deep);
}

/* "We Respect Your Privacy" under the payment box: #888 measured 3.54:1. FunnelKit's rule is
   `body #wfacp-e-form .wfacp_main_form .wfacp-payment-dec` (1,2,1); this one is a step higher.
   (The privacy-policy line above it is set in the checkout widget itself: Elementor, post 350,
   Privacy policy colour #6A6A6A.) */
html body #wfacp-e-form .wfacp_main_form .wfacp-payment-dec {
	color: var(--fr-ink-4);
}

/* Cart page: the checkout steps not yet reached were #ccc (1.61:1). Still quieter than the current one. */
.checkout-breadcrumbs a:not(.current),
.checkout-breadcrumbs .no-click {
	color: var(--fr-ink-4);
}