/* lubiwood-cod-fees */
/**
 * Compact the COD fee note inside the gateway description box. The stock COD
 * description is blanked (DB plane), so the note is the box's only content —
 * kill the paragraph margins that made the selected-gateway box tall.
 */
.payment_box p.lubiwood-codfee-note {
	margin: 0;
}

.payment_box p:empty {
	display: none;
	margin: 0;
}

/**
 * One consistent icon alignment for ALL payment methods: title (with its
 * "( +x,xx € )" suffix) on the left, every gateway's icon/badge group pushed
 * to the right edge. Icons render inside the <label> as either a bare <img>
 * (PayPal, COD) or a <span class="*_icons"> group (Stripe wallets, card
 * brands) — the first icon-ish element gets margin-left:auto, siblings stay
 * adjacent. !important + li-qualified selectors: FunnelKit/WoodMart style
 * these labels with higher specificity (their own floats/inline-block put
 * some icons left and some right, which is the mess this fixes).
 */
li.wc_payment_method > label {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 6px;
	width: 100% !important;
}

li.wc_payment_method > label > img,
li.wc_payment_method > label > span[class*="icon"] {
	margin-left: auto !important;
	margin-right: 0 !important;
	float: none !important;
}

li.wc_payment_method > label > img ~ img,
li.wc_payment_method > label > img ~ span[class*="icon"],
li.wc_payment_method > label > span[class*="icon"] ~ img,
li.wc_payment_method > label > span[class*="icon"] ~ span[class*="icon"] {
	margin-left: 0 !important;
}

/* Icon groups themselves keep their imgs in a row. */
li.wc_payment_method > label > span[class*="icon"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.lubiwood-cod-icon {
	height: 26px;
	width: auto;
	display: block;
}


/* lubiwood-cui */
/**
 * Checkout — Unavailable Items.
 *
 * The message + Remove link live inside a standard WooCommerce error notice; this
 * only lays them out (text and a compact inline Remove button on one row) and keeps
 * the button from inheriting the theme's full-width block-button sizing.
 */
.woocommerce-error li:has(.lubiwood-cui-remove),
.wfacp-error li:has(.lubiwood-cui-remove) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.lubiwood-cui-text {
	flex: 1 1 auto;
}

/* Compact, inline Remove button — override the theme's block-button width/margins. */
a.button.lubiwood-cui-remove,
.woocommerce a.button.lubiwood-cui-remove {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	padding: 7px 16px;
	font-size: 0.85em;
	line-height: 1.3;
	white-space: nowrap;
}

@media (max-width: 480px) {
	a.button.lubiwood-cui-remove,
	.woocommerce a.button.lubiwood-cui-remove {
		width: 100%;
		text-align: center;
	}
}


/* lubiwood-bogo-coupon-line */
/* ------------------------------------------------------------------ *
 * BOGO coupon row: "Cosmic Owl Puzzle - S × 1          -19,99 €"
 *
 * bootstrap.php replaces the coupon cell's value with
 *
 *   <span class="lubiwood-bogo-line">
 *     <span class="lubiwood-bogo-line__deal">
 *       <span class="lubiwood-bogo-line__item">Cosmic Owl Puzzle - S × 1</span>
 *       <span class="lubiwood-bogo-line__amount">-19,99 €</span>
 *     </span>
 *   </span> [Remove]
 *
 * Two surfaces, two layouts.
 * ------------------------------------------------------------------ */

/* ---- Side cart (fkcart drawer) ------------------------------------
 * The row is `display:flex` with the "Coupon lch1 ×" chip on the left and
 * `.fkcart-summary-amount` on the right. With a product name in it the cell no
 * longer fits beside the chip, so it drops onto its own full-width line, laid
 * out name-left / amount-right, the name free to wrap.
 *
 * fkcart's template prints a hardcoded "-" text node in front of the value
 * (templates/cart/order-summary.php: `-<?php echo $coupon['value'] ?>`). It
 * has no element to target, so `font-size: 0` on the cell swallows it and the
 * children get their size back — the same trick bogo-cart-summary used for
 * ACFW's blurb. `:has()` keeps all of this off ordinary coupon rows, which
 * keep their minus sign; where :has() is unsupported the row simply renders as
 * today (name + amount inline after the "-"), so no regression. */
#fkcart-modal .fkcart-coupon-applied:has(.lubiwood-bogo-line) {
	flex-wrap: wrap;
}

#fkcart-modal .fkcart-coupon-applied .fkcart-summary-amount:has(.lubiwood-bogo-line) {
	flex: 1 0 100%;
	display: block;
	min-width: 0;
	margin-top: 4px;
	/* Beat the child theme's `#fkcart-modal .fkcart-summary-amount { white-space: nowrap }`. */
	white-space: normal;
	/* Swallows fkcart's hardcoded "-" text node. */
	font-size: 0;
}

#fkcart-modal .lubiwood-bogo-line {
	display: block;
	width: 100%;
	font-size: 13px;
	line-height: 1.35;
}

#fkcart-modal .lubiwood-bogo-line__deal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}

#fkcart-modal .lubiwood-bogo-line__deal + .lubiwood-bogo-line__deal {
	margin-top: 2px;
}

#fkcart-modal .lubiwood-bogo-line__item {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	font-weight: 400;
	color: var(--fkcart-primary-text-color, #222);
}

#fkcart-modal .lubiwood-bogo-line__amount {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: 500;
	color: var(--fkcart-coupon-text-price-color, #5ba238);
}

/* ---- Checkout summary + cart page (WooCommerce totals table) --------
 * The totals table splits the row 50/50 (th "Coupon Lch1" / td value) and
 * FunnelKit's summary column is ~360px wide, so the value cell is ~180px:
 * "Cosmic Owl Puzzle - S × 1  -19,99 €  [Remove]" cannot sit on one line
 * there. Everything stays INSIDE the value cell (a flex `tr` inside a tbody
 * gets wrapped in an anonymous single cell and collapses into column 1 —
 * measured, not guessed), laid out as two right-aligned lines:
 *
 *     Coupon  Lch1        Cosmic Owl Puzzle - S × 1
 *                              -19,99 €  [Remove]
 *
 * The wrappers give up their boxes (`display: contents`) so the cell's flex
 * items are: name (own full line), amount, [Remove] — in DOM order, which
 * keeps "name / amount" pairs together when a repeating BOGO frees several
 * items. `:has()` scopes the cell rules to rows carrying our markup; without
 * it the cell still renders the same text, merely stacked. Scope note: the
 * summary lives in .wfacp_order_summary_container / .wfacp_mini_cart_reviews,
 * not #wfacp-e-form (learned the hard way in funnelkit-checkout-style). */
body .wfacp_order_summary_container tr.cart-discount > td:has(.lubiwood-bogo-line),
body .wfacp_mini_cart_reviews tr.cart-discount > td:has(.lubiwood-bogo-line),
body .cart_totals tr.cart-discount > td:has(.lubiwood-bogo-line),
body .shop_table tr.cart-discount > td:has(.lubiwood-bogo-line) {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: baseline;
	column-gap: .45em;
	row-gap: 2px;
	text-align: right;
	vertical-align: middle;
}

body .wfacp_order_summary_container tr.cart-discount .lubiwood-bogo-line,
body .wfacp_mini_cart_reviews tr.cart-discount .lubiwood-bogo-line,
body .cart_totals tr.cart-discount .lubiwood-bogo-line,
body .shop_table tr.cart-discount .lubiwood-bogo-line,
body .wfacp_order_summary_container tr.cart-discount .lubiwood-bogo-line__deal,
body .wfacp_mini_cart_reviews tr.cart-discount .lubiwood-bogo-line__deal,
body .cart_totals tr.cart-discount .lubiwood-bogo-line__deal,
body .shop_table tr.cart-discount .lubiwood-bogo-line__deal {
	/* FunnelKit: `.wfacp_mini_cart_start_h .wfacp_order_summary_container
	   .wfacp_mini_cart_reviews tbody td span { display: inline-block }` (0,4,3)
	   outranks any sane selector here — verified against the matched rules. */
	display: contents !important;
}

/* The name: a full line of its own, right-aligned, wrapping if it must.
   FunnelKit paints every span in this cell coupon-green (via an #id-scoped
   rule, hence !important); a product name is not a saving, so it takes the
   label colour — funnelkit-checkout-style's ink token where it resolves, else
   the summary's own label grey — and only the amount stays green. */
body .wfacp_order_summary_container tr.cart-discount .lubiwood-bogo-line__item,
body .wfacp_mini_cart_reviews tr.cart-discount .lubiwood-bogo-line__item,
body .cart_totals tr.cart-discount .lubiwood-bogo-line__item,
body .shop_table tr.cart-discount .lubiwood-bogo-line__item {
	flex: 1 0 100%;
	min-width: 0;
	text-align: right;
	white-space: normal;
	overflow-wrap: anywhere;
	color: var(--lw-ink, #353030) !important;
}

body .wfacp_order_summary_container tr.cart-discount .lubiwood-bogo-line__amount,
body .wfacp_mini_cart_reviews tr.cart-discount .lubiwood-bogo-line__amount,
body .cart_totals tr.cart-discount .lubiwood-bogo-line__amount,
body .shop_table tr.cart-discount .lubiwood-bogo-line__amount {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* [Remove]: after the amount, quiet, never on a line of its own. The theme
   positions/floats it (that is what stranded it before) — reset first. */
body .wfacp_order_summary_container tr.cart-discount > td:has(.lubiwood-bogo-line) .woocommerce-remove-coupon,
body .wfacp_mini_cart_reviews tr.cart-discount > td:has(.lubiwood-bogo-line) .woocommerce-remove-coupon,
body .cart_totals tr.cart-discount > td:has(.lubiwood-bogo-line) .woocommerce-remove-coupon,
body .shop_table tr.cart-discount > td:has(.lubiwood-bogo-line) .woocommerce-remove-coupon {
	flex: 0 0 auto;
	position: static !important;
	float: none !important;
	inset: auto !important;
	margin: 0 !important;
	display: inline-block;
	font-size: .82em;
	white-space: nowrap;
	opacity: .75;
}


/* lubiwood-bogo-cart-summary */
/* ------------------------------------------------------------------ *
 * Side-cart: Advanced Coupons deal breakdown.
 *
 * ACFW appends its per-item summary INTO FunnelKit's coupon amount cell:
 *
 *   <div class="fkcart-summary-amount">-<ul class="acfw-bogo-summary">…</ul></div>
 *
 * That cell is `display:flex; align-items:center` and (via the child theme's
 * price rule) `white-space: nowrap`, so the list sits on the same line as the
 * amount and the product name runs off the right edge of the panel.
 *
 * Fix: drop the cell onto its own full-width line and lay each deal out as a
 * name/price pair — name free to wrap, price never.
 *
 * The `-` in the markup above is hardcoded by FunnelKit's own template
 * (templates/cart/order-summary.php) and is meaningless once bootstrap.php has
 * removed the always-zero BOGO amount. It is a bare text node with no element
 * to target, so `font-size: 0` on the cell swallows it and the element children
 * get their size back. Normal (non-BOGO) coupon rows keep their minus sign —
 * they never carry one of these lists, so `:has()` leaves them alone.
 *
 * `:has()` is the load-bearing selector here. Where it is unsupported the row
 * simply renders as it does today: no regression, just no fix.
 * ------------------------------------------------------------------ */

#fkcart-modal .fkcart-coupon-applied:has(.acfw-bogo-summary),
#fkcart-modal .fkcart-coupon-applied:has(.acfw-add-products-summary),
#fkcart-modal .fkcart-coupon-applied:has(.acfw-shipping-overrides-summary) {
	flex-wrap: wrap;
}

#fkcart-modal .fkcart-coupon-applied .fkcart-summary-amount:has(.acfw-bogo-summary),
#fkcart-modal .fkcart-coupon-applied .fkcart-summary-amount:has(.acfw-add-products-summary),
#fkcart-modal .fkcart-coupon-applied .fkcart-summary-amount:has(.acfw-shipping-overrides-summary) {
	flex: 1 0 100%;
	display: block;
	min-width: 0;
	/* Beat the child theme's `#fkcart-modal .fkcart-summary-amount { white-space: nowrap }`. */
	white-space: normal;
	/* Swallows FunnelKit's hardcoded "-" text node. */
	font-size: 0;
}

#fkcart-modal .fkcart-coupon-applied .fkcart-summary-amount:has(.acfw-bogo-summary) > *,
#fkcart-modal .fkcart-coupon-applied .fkcart-summary-amount:has(.acfw-add-products-summary) > *,
#fkcart-modal .fkcart-coupon-applied .fkcart-summary-amount:has(.acfw-shipping-overrides-summary) > * {
	font-size: 14px;
}

#fkcart-modal .acfw-bogo-summary,
#fkcart-modal .acfw-add-products-summary,
#fkcart-modal .acfw-shipping-overrides-summary {
	/* ACFW hardcodes style="margin: 10px" on the <ul>. */
	margin: 6px 0 0 !important;
	padding: 0;
	width: 100%;
	list-style: none;
}

#fkcart-modal .acfw-bogo-summary li,
#fkcart-modal .acfw-add-products-summary li,
#fkcart-modal .acfw-shipping-overrides-summary li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.35;
	color: var(--fkcart-secondary-text-color, #6b6b6b);
}

#fkcart-modal .acfw-bogo-summary li + li,
#fkcart-modal .acfw-add-products-summary li + li,
#fkcart-modal .acfw-shipping-overrides-summary li + li {
	margin-top: 2px;
}

/* Product names are long and localized — let them wrap instead of overflowing. */
#fkcart-modal .acfw-bogo-summary .label,
#fkcart-modal .acfw-add-products-summary .label,
#fkcart-modal .acfw-shipping-overrides-summary .label {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
}

#fkcart-modal .acfw-bogo-summary .discount,
#fkcart-modal .acfw-add-products-summary .discount,
#fkcart-modal .acfw-shipping-overrides-summary .discount {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: 500;
	color: var(--fkcart-coupon-text-price-color, #5ba238);
}


/* lubiwood-sidecart-total */
/* Side-cart totals: say the discount once, on one line.
 *
 * fkcart's drawer already prints the coupon's amount itself:
 *     templates/cart/order-summary.php
 *     <div class="fkcart-summary-amount">-<?php echo $coupon['value'] ?></div>
 *
 * Advanced Coupons appends its own deal blurb into that same value —
 * <ul class="acfw-bogo-summary"> "Cosmic Owl Puzzle - S x 1: -19,99 €" — so the
 * row wrapped and the saving was stated twice:
 *
 *     Coupon  lch1
 *     19,99 €
 *     Cosmic Owl Puzzle - S x 1:        -19,99 €
 *     Total                              37,99 €
 *
 * The blurb is the redundant half: the coupon row states the amount, and the
 * line item it refers to is listed above with its own price. Hidden here so the
 * row collapses to "Coupon lch1   -19,99 €".
 *
 * NOTE: the checkout stylesheet carries the same rule, but it is enqueued ONLY on
 * the Aero checkout — the drawer lives on product and cart pages, so it never
 * received it. This file loads wherever the drawer can appear.
 */
.acfw-bogo-summary {
	display: none !important;
}

/* Keep fkcart's coupon row on one line once the blurb is gone. */
.fkcart-summary-line-item.fkcart-coupon-applied .fkcart-summary-amount {
	white-space: nowrap;
}

/* The Total row this feature adds: same weight as Subtotal, clearly the bottom line. */
.fkcart-summary-line-item.lubiwood-sidecart-total {
	margin-top: 2px;
}


/* lubiwood-eos */
/* EU-origin shipping — PDP callout + checkout notice */
.lubiwood-eos-pdp,
.lubiwood-eos-notice {
	display: block;
	text-align: left !important;
	font-size: 13px;
	line-height: 1.45;
	color: #334155;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 10px 0;
}
.lubiwood-eos-pdp .lubiwood-eos-pdp-text,
.lubiwood-eos-notice .lubiwood-eos-notice-text {
	text-align: left !important;
}
/* The order-summary cell sets text-transform: capitalize, which Title-Cases the
   whole sentence ("Some Items Are Out Of Stock In The US"). Verified in-browser. */
.lubiwood-eos-pdp,
.lubiwood-eos-notice,
.lubiwood-eos-pdp *,
.lubiwood-eos-notice * {
	text-transform: none !important;
}
.lubiwood-eos-pdp strong,
.lubiwood-eos-notice strong {
	color: #1e3a8a;
	font-weight: 600;
}
.lubiwood-eos-alt {
	color: #64748b;
}
.lubiwood-eos-notice-wrap > td {
	padding: 0 !important;
	border: 0 !important;
}

/* Per-line "Ships from EU" mark in the checkout order summary.
   The class is doubled to lift specificity to (0,2,0): the order summary renders
   OUTSIDE #wfacp-e-form, so an ID-scoped rule never matches there, and a single
   class (0,1,0) loses to FunnelKit's `.wfacp_mini_cart_start_h span` (0,1,1) —
   verified in the browser, the mark rendered at 14px. font-size carries
   !important as insurance because LiteSpeed combines stylesheets on prod, so
   source order is not guaranteed. */
.lubiwood-eos-line.lubiwood-eos-line {
	display: block;
	margin-top: 3px;
	font-size: 11px !important;
	line-height: 1.3;
	font-weight: 500;
	color: #64748b;
	/* the summary cell inherits text-transform: capitalize from the theme */
	text-transform: none !important;
}

/* Quiet one-liner directly under the shipping address — deliberately NOT the
   boxed treatment the order-summary notice uses. */
.lubiwood-eos-inline,
#wfacp-e-form .lubiwood-eos-inline {
	display: block;
	margin: 6px 0 14px;
	font-size: 12px;
	line-height: 1.45;
	text-align: left;
	text-transform: none !important;
	color: #64748b;
}
.lubiwood-eos-inline[hidden],
#wfacp-e-form .lubiwood-eos-inline[hidden] {
	display: none !important;
}


/* lubiwood-order-recap */
/* Checkout order recap — the compact order-summary card rendered just above the
   Place Order button on the FunnelKit checkout (feature: checkout-order-recap).
   Matches the checkout's white cards; text-compact like the reference.

   Every rule is scoped under #wfacp-e-form (FunnelKit's checkout form) on purpose:
   FunnelKit ships an ID-scoped Meyer reset — `#wfacp-e-form td, …tr, …table, …h3 {
   margin:0; padding:0; border:0; font-size:100% }` (specificity 1,0,1) — which
   otherwise wipes this card's row borders, cell padding and type. Scoping our rules
   under the same #wfacp-e-form ID lifts them to (1,1,x) so they win. The card always
   renders inside #wfacp-e-form (hook woocommerce_review_order_before_submit) and this
   stylesheet loads only on that checkout, so the scope always matches. The row-border
   rules also carry !important as belt-and-braces (the reset has none). */

#wfacp-e-form .lubiwood-order-recap {
	background: #fff;
	border: 1px solid #e2e8dd;
	border-radius: 12px;
	padding: 16px 18px;
	margin: 6px 0 18px;
	box-shadow: 0 1px 3px rgba(60, 110, 40, 0.06);
	text-align: left;
}

#wfacp-e-form .lubiwood-order-recap__title {
	margin: 0 0 12px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: #23301c;
}

#wfacp-e-form .lubiwood-order-recap__body {
	display: block;
}

#wfacp-e-form .lubiwood-order-recap__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15.5px;
	line-height: 1.4;
	color: #3a4a30;
}
#wfacp-e-form .lubiwood-order-recap__table tbody,
#wfacp-e-form .lubiwood-order-recap__table tr {
	border: 0;
	background: none;
}

#wfacp-e-form .lubiwood-order-recap__table td {
	padding: 9px 0;
	border: 0;
	vertical-align: top;
	background: none;
}

#wfacp-e-form .lubiwood-order-recap__amt {
	text-align: right;
	white-space: nowrap;
	padding-left: 14px;
	font-variant-numeric: tabular-nums;
}

/* Line items: qty accent + muted variation sub-line. */
#wfacp-e-form .lubiwood-order-recap__qty {
	color: #7a8a6e;
	font-weight: 700;
}
#wfacp-e-form .lubiwood-order-recap__meta {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #8a9780;
}

/* Ruled ledger, like the reference: a light hairline between every row. `tr + tr`
   skips the first row, so lines fall *between* rows, full table width. The Total's
   own (stronger) top rule below wins on specificity for logical weight hierarchy. */
#wfacp-e-form .lubiwood-order-recap__table tr + tr td {
	border-top: 1px solid #ecefe8 !important;
}

/* Shipping / fee rows — slightly muted labels. */
#wfacp-e-form .lubiwood-order-recap__line .lubiwood-order-recap__label {
	color: #5c6b52;
}

/* Discounts render green + negative. */
#wfacp-e-form .lubiwood-order-recap__discount .lubiwood-order-recap__amt {
	color: #2e7d32;
}
#wfacp-e-form .lubiwood-order-recap__minus {
	margin-right: 1px;
}

/* Total: strong, ruled off from the rows above with a heavier line. */
#wfacp-e-form .lubiwood-order-recap__table tr.lubiwood-order-recap__total td {
	padding-top: 13px;
	border-top: 2px solid #d3ddc9 !important;
	font-weight: 800;
	font-size: 17px;
	color: #23301c;
}
#wfacp-e-form .lubiwood-order-recap__total .lubiwood-order-recap__amt {
	font-size: 18px;
}

/* Amount markup emitted by wc_price() — keep it inline and un-recoloured so it
   inherits each row's colour (incl. the green discount rows). */
#wfacp-e-form .lubiwood-order-recap__amt .woocommerce-Price-amount {
	color: inherit !important;
	font-weight: inherit;
	white-space: nowrap;
}

@media (max-width: 560px) {
	#wfacp-e-form .lubiwood-order-recap {
		padding: 14px 15px;
		margin: 4px 0 16px;
	}
	#wfacp-e-form .lubiwood-order-recap__title {
		font-size: 17px;
	}
	#wfacp-e-form .lubiwood-order-recap__table {
		font-size: 15px;
	}
}


/* lubiwood-surprise */
/* Surprise Puzzle order-bump box on the FunnelKit checkout. The pill IS the
   control: it flips "Add to order" (green) ↔ "Remove" (muted red). The image
   fills the full height flush to the right edge. */
.lubiwood-surprise {
	position: relative;
	margin: 34px 0 24px;
	padding: 0; /* the image goes edge-to-edge; text padding lives on __content */
	min-height: 150px; /* give the square image room so it shows in full and fills the height */
	border: 1px solid #cfe6c4;
	border-radius: 12px;
	background: #eef8e9;
	box-shadow: 0 1px 3px rgba(60, 110, 40, 0.08);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.lubiwood-surprise.is-checked {
	border-color: #9fce8a;
	background: #e4f4da;
	box-shadow: 0 2px 10px rgba(60, 110, 40, 0.16);
}

.lubiwood-surprise.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

/* The toggle button, overlapping the top edge like a tab. Styled like the final
   purchase button (solid green, white text, rounded). !important + a compound
   selector beat the checkout theme's <button> styling. */
.lubiwood-surprise .lubiwood-surprise__toggle {
	position: absolute;
	top: -18px;
	left: 22px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-width: 120px;
	justify-content: center;
	padding: 11px 24px;
	border: 0 !important;
	border-radius: 10px !important;
	background: #7cb342 !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	box-shadow: 0 2px 6px rgba(60, 110, 40, 0.28);
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
}

.lubiwood-surprise .lubiwood-surprise__toggle .lubiwood-surprise__toggle-label,
.lubiwood-surprise .lubiwood-surprise__toggle .lubiwood-surprise__check,
.lubiwood-surprise .lubiwood-surprise__toggle .lubiwood-surprise__remove {
	color: #fff !important;
}

.lubiwood-surprise .lubiwood-surprise__toggle:hover {
	background: #6ba336 !important;
}

.lubiwood-surprise .lubiwood-surprise__toggle:focus-visible {
	outline: 2px solid #33691e;
	outline-offset: 2px;
}

/* Checkmark + smaller "remove" affordance, shown only in the added state. */
.lubiwood-surprise__check {
	display: none;
	align-items: center;
	margin-right: 6px;
}
.lubiwood-surprise.is-checked .lubiwood-surprise__check {
	display: inline-flex;
}
.lubiwood-surprise__remove {
	display: none;
	margin-left: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	opacity: 0.9;
}
.lubiwood-surprise.is-checked .lubiwood-surprise__remove {
	display: inline;
}

/* Added → stays green (success) with the checkmark; no alarming red. */
.lubiwood-surprise.is-checked .lubiwood-surprise__toggle {
	background: #5f9e34 !important;
	box-shadow: 0 2px 6px rgba(60, 110, 40, 0.24);
}
.lubiwood-surprise.is-checked .lubiwood-surprise__toggle:hover {
	background: #55912e !important;
}

.lubiwood-surprise__inner {
	display: block;
}

.lubiwood-surprise__content {
	/* extra top padding = clear gap below the CTA button; right padding reserves the
	   image column so the box height stays text-driven */
	padding: 46px 172px 22px 22px;
}

.lubiwood-surprise__row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.lubiwood-surprise__title {
	font-weight: 700;
	font-size: 21px;
	color: #23301c;
}

/* Price: solid green pill + white text so it's clearly legible (not green-on-green). */
.lubiwood-surprise__price {
	flex: 0 0 auto;
	padding: 5px 13px;
	border-radius: 7px;
	background: #689f38;
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	white-space: nowrap;
}
.lubiwood-surprise__price .woocommerce-Price-amount,
.lubiwood-surprise__price .woocommerce-Price-currencySymbol {
	color: #fff !important;
}

/* "incl. VAT" note beside the price. */
.lubiwood-surprise__vat {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 500;
	color: #6f8a5f;
}

.lubiwood-surprise__desc {
	margin: 12px 0 0;
	color: #6f8a5f;
	font-size: 18px;
	line-height: 1.5;
}

/* Image column: absolutely pinned to the right so it fills the full box height
   (flush top/right/bottom) WITHOUT growing the box — the box height stays driven
   by the text. */
.lubiwood-surprise__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 152px;
	overflow: hidden;
	border-radius: 0 11px 11px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lubiwood-surprise__media .lubiwood-surprise__img {
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	object-fit: contain; /* show the whole (square) GIF — full width, not cropped */
}

.lubiwood-surprise__emoji {
	font-size: 60px;
	line-height: 1;
}

@media (max-width: 560px) {
	.lubiwood-surprise__media {
		width: 116px;
	}
	.lubiwood-surprise__content {
		/* top padding must clear the CTA tab (top:-18px, ~41px tall → reaches ~+23px
		   into the box) so it never overlaps the title on mobile — matches the desktop
		   clearance; right padding reserves the narrower mobile image column. */
		padding: 44px 132px 16px 16px;
	}
	/* Nudge the tab in a touch so it lines up with the mobile text inset and never
	   kisses the box's left edge/border. */
	.lubiwood-surprise .lubiwood-surprise__toggle {
		left: 16px;
	}
}


/* lubiwood-funnelkit-cart-colors */
/**
 * Lubiwood — FunnelKit slide-cart free-shipping bar color.
 *
 * FunnelKit (Cart Pro) emits its cart colors as CSS custom properties on :root
 * (mirrored on #fkcart-modal). The free-shipping reward bar ships a vivid kelly
 * green (#2DA815) that clashes with the site's sage palette. Redefine the bar
 * variables to the brand sage so the fill (partial + full) and the active
 * truck-icon circle match the Checkout button. !important wins over FunnelKit's
 * own (non-important) var declarations regardless of load order.
 *
 * NOTE: FunnelKit Cart v1.9.1.2 paints the fill (.fkcart-progress-bar) from
 * `--fkcart-progressbar-active-color` (one word) — NOT the older hyphenated
 * `--fkcart-progress-bar-active-color`. Set BOTH so the recolor survives the
 * rename and any version skew between environments.
 *
 * Lives in the product-page mu-plugin so all product/cart-page tweaks stay
 * together, but is enqueued site-wide because the slide cart opens from any page.
 */
:root,
#fkcart-modal {
	--fkcart-progressbar-active-color: #7AB38A !important;          /* v1.9.x: the bar fill */
	--fkcart-progress-bar-active-color: #7AB38A !important;         /* older spelling / other elements */
	--fkcart-progress-bar-bg-color-active-icon: #7AB38A !important; /* active truck-icon circle */
}

/**
 * Free-shipping reward-bar message ("Spend €X more…" / "Congrats! You have
 * unlocked all the rewards"). FunnelKit ships it at 12px / weight 400 in the
 * faint secondary text colour, which is hard to read against the light cart
 * panel. Make it larger, bold, and use the primary (darker) text colour for
 * contrast. Targets BOTH reward-bar designs: design-1 `.fkcart-reward-message`
 * and design-2 `.fkcart-progress-title`. The `#fkcart-modal` scope already wins
 * on specificity; `!important` guards against the plugin's inline styles.
 */
#fkcart-modal .fkcart-reward-message,
#fkcart-modal .fkcart-progress-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--fkcart-primary-text-color) !important;
	margin-bottom: 12px !important; /* breathing room above the bar (default 2-6px) */
}

/**
 * The whole reward block sits cramped between the cart header and the first
 * product. FunnelKit's modern panel only pads 8px top/bottom — give it more
 * vertical room so the "Add items worth … to unlock FREE Shipping" message and
 * the bar/labels don't feel jammed.
 */
#fkcart-modal .fkcart-reward-panel.fkcart-progress-container,
#fkcart-modal .fkcart-progress-container {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}

/* Keep the inline milestone label (e.g. "free shipping") bold to match. */
#fkcart-modal .fkcart-reward-milestone {
	font-weight: 700 !important;
}

/**
 * Modern reward-bar milestone label under each icon — the "Free shipping" text
 * by the truck. FunnelKit ships it at 10px / weight 400, which is tiny and hard
 * to read (and cramped to two lines). Enlarge, bold, and widen so it reads
 * cleanly. `.active` state keeps the plugin's #000 colour for contrast.
 */
#fkcart-modal .fkcart-milestone .fkcart-label {
	font-size: 13px !important;
	line-height: 15px !important;
	font-weight: 700 !important;
	max-width: 96px !important;
}


/* lubiwood-wd-est-del */
/**
 * Estimated delivery on FunnelKit checkout — on each shipping method.
 */

#wfacp-e-form .lubiwood-wd-est-del--in-label {
	display: block;
	margin-top: 4px;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 400;
	color: #5c5c5c;
}

#wfacp-e-form .wfacp_single_shipping_method label .lubiwood-wd-est-del--in-label {
	margin-left: 0;
}

#wfacp-e-form .wfacp_single_shipping_method:has(.shipping_method:checked) .lubiwood-wd-est-del--in-label {
	color: #333;
}

#wfacp-e-form .wfacp_single_shipping_method:has(.shipping_method:checked) .lubiwood-wd-est-del__dates {
	font-weight: 600;
	color: #111;
}

#wfacp-e-form .lubiwood-wd-est-del {
	margin: 6px 0 0 28px;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #5c5c5c;
}

#wfacp-e-form .lubiwood-wd-est-del__label {
	font-weight: 500;
	color: #333;
}

#wfacp-e-form .lubiwood-wd-est-del__dates {
	color: #111;
}

#wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del {
	display: block;
}

#wfacp-e-form .wfacp_single_shipping_method:not(:has(.shipping_method:checked)) .lubiwood-wd-est-del {
	opacity: 0.72;
}

#wfacp-e-form .wfacp_single_shipping_method:has(.shipping_method:checked) .lubiwood-wd-est-del {
	opacity: 1;
}

#wfacp-e-form .wfacp_single_shipping_method:has(.shipping_method:checked) .lubiwood-wd-est-del__dates {
	font-weight: 600;
}

#wfacp-e-form .lubiwood-wd-est-del.wd-loading {
	opacity: 0.45;
}

/* Legacy order-summary row (only if placement = order_summary or both). */
#wfacp-e-form .wd-del-overall td {
	padding: 12px 0 !important;
	border-top: 1px solid #e8e8e8;
}

#wfacp-e-form .wd-del-overall .wd-product-info.wd-est-del {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 13px;
	line-height: 1.45;
}

#wfacp-e-form .wd-del-overall .wd-info-icon {
	display: none;
}


/* lubiwood-cav */
/**
 * Inline address hints. Two severities: an error the shopper must fix, and an
 * advisory hint they may ignore. Both sit directly under the street field.
 */
.lw-cav-msg {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.4;
	display: flex;
	gap: 6px;
	align-items: flex-start;
}

.lw-cav-msg::before {
	font-weight: 700;
	line-height: 1.35;
}

.lw-cav-error {
	color: #b3261e;
}

.lw-cav-error::before {
	content: "!";
}

.lw-cav-hint {
	color: #8a5a00;
}

.lw-cav-hint::before {
	content: "?";
}

/* Only the blocking state recolours the field. The hint stays quiet — it is
   advice, and a numberless address is often perfectly correct. */
input.lw-cav-invalid {
	border-color: #b3261e !important;
}


/* lubiwood-duties */
/* Quiet one-liner under the shipping address.
   Also scoped under #wfacp-e-form: FunnelKit ships an ID-scoped Meyer reset
   (specificity 1,0,1) that silently wipes class-only rules on these elements. */
.lubiwood-duties,
#wfacp-e-form .lubiwood-duties {
	margin: 6px 0 14px;
	text-align: left;
}
.lubiwood-duties[hidden],
#wfacp-e-form .lubiwood-duties[hidden],
.lubiwood-duties__row[hidden],
#wfacp-e-form .lubiwood-duties__row[hidden] {
	display: none !important;
}
/* Class doubled to (0,2,0): this can render outside #wfacp-e-form depending on the
   builder layout, and a single class loses to FunnelKit's element-qualified rules. */
.lubiwood-duties__row.lubiwood-duties__row {
	display: block;
	font-size: 12px !important;
	line-height: 1.45;
	/* some checkout containers inherit text-transform: capitalize from the theme */
	text-transform: none !important;
	color: #64748b;
}


/* lubiwood-crf-ro */
/* Romania apartment fields — hidden until the JS reveals them for a RO delivery. */
[data-lubiwood-ro-fields][hidden] {
	display: none !important;
}

.lubiwood-ro-addr {
	margin-top: 4px;
}

.lubiwood-ro-addr__hint {
	margin: 2px 0 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--lw-muted, #5c5c5c);
}

/* Four compact fields, two per row on any width (they're short values). */
.lubiwood-ro-addr__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 12px;
}

.lubiwood-ro-addr__grid .form-row,
.lubiwood-ro-addr__grid .wfacp-form-control-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	float: none !important;
}


/* lubiwood-reverse-charge */
/**
 * Verdict line under the Tax / VAT ID field.
 *
 * Deliberately quiet: this sits inside a checkout, so it reads as help text rather than as a
 * validation error — only a genuinely unverifiable number gets the red treatment, and even then
 * nothing is blocked. Colours are close to WooCommerce's own notice palette so it does not look
 * bolted on.
 */

.lubiwood-rc-feedback {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	margin: .5em 0 0;
	font-size: .875em;
	line-height: 1.45;
}

.lubiwood-rc-feedback:empty {
	display: none;
}

.lubiwood-rc-text {
	display: block;
}

.lubiwood-rc-company {
	display: block;
	font-weight: 600;
	letter-spacing: .01em;
}

/* Icon slot — a glyph per state, or a spinner while we wait. */
.lubiwood-rc-icon {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	margin-top: .12em;
	text-align: center;
	font-weight: 700;
	line-height: 1.05em;
}

.is-checking    { color: #555; }
.is-ok          { color: #1c7c3f; }
.is-rejected    { color: #b32d2e; }
.is-unavailable { color: #8a6d3b; }

.is-domestic_vat,
.is-domestic_delivery,
.is-non_eu { color: #555; }

.is-ok .lubiwood-rc-icon::before          { content: "\2713"; }  /* ✓ */
.is-rejected .lubiwood-rc-icon::before    { content: "\2715"; }  /* ✕ */
.is-unavailable .lubiwood-rc-icon::before { content: "\26A0"; }  /* ⚠ */

.is-domestic_vat .lubiwood-rc-icon::before,
.is-domestic_delivery .lubiwood-rc-icon::before,
.is-non_eu .lubiwood-rc-icon::before      { content: "\2139"; }  /* ℹ */

/* Spinner: same box as the glyphs so the line does not jump when the verdict lands. */
.is-checking .lubiwood-rc-icon {
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	box-sizing: border-box;
	animation: lubiwood-rc-spin .6s linear infinite;
}

@keyframes lubiwood-rc-spin {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.is-checking .lubiwood-rc-icon {
		animation-duration: 2.4s;
	}
}


/* lubiwood-fk-checkout-style */
/**
 * Lubiwood — FunnelKit (Aero) checkout restyle. CSS only, no JS.
 *
 * Scope: everything is nested under #wfacp-e-form (the Aero checkout form) so it
 * cannot leak to other pages. Some rules are prefixed with `body` to out-specify
 * FunnelKit's own inline <style> block (which uses `body #wfacp-e-form ...`).
 *
 * Target: the compact card design — soft card sections, tidy inputs, green
 * selected states on shipping + payment, a gift-style order bump, and a
 * full-width Place Order button.
 *
 * Selected states use :has(:checked) — pure CSS, no JavaScript.
 */

#wfacp-e-form {
	/* Palette — reuse the green the template already ships (#66B56A). */
	--lw-green: #66b56a;
	--lw-green-dark: #4f9e54;
	--lw-green-tint: #eef7ef;     /* selected-card background wash */
	--lw-green-border: #9cd0a0;   /* selected-card border         */
	--lw-ink: #1f2a24;
	--lw-muted: #6b7770;
	--lw-border: #e3e6e8;
	--lw-field-border: #d7dbde;
	--lw-radius: 12px;
	--lw-radius-sm: 9px;
	--lw-card-shadow: 0 1px 2px rgba(16, 24, 20, 0.04), 0 2px 8px rgba(16, 24, 20, 0.05);

	color: var(--lw-ink);
}

/* ------------------------------------------------------------------ *
 * 1. Section cards
 * ------------------------------------------------------------------ */
#wfacp-e-form .wfacp-section {
	background: #fff;
	border: 1px solid var(--lw-border);
	border-radius: var(--lw-radius);
	box-shadow: var(--lw-card-shadow);
	padding: 15px 18px;
	margin-bottom: 11px;
}

/* Section heading — tighter, bolder, less default top margin. Bumped up for
   readability: clamp() grows the title on both mobile and desktop over the
   theme/Elementor default without a fixed size that would fight responsive. */
#wfacp-e-form .wfacp-section > .wfacp-section-heading,
#wfacp-e-form .wfacp-section .elementor-widget-heading:first-child h2,
#wfacp-e-form .wfacp-section .elementor-widget-heading:first-child h3 {
	margin: 0 0 10px;
	font-size: clamp(22px, 4.6vw, 29px) !important;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ *
 * 2. Fields & inputs
 * ------------------------------------------------------------------ */
#wfacp-e-form .form-row {
	margin-bottom: 9px;
}

body #wfacp-e-form .wfacp_main_form .input-text,
body #wfacp-e-form .wfacp_main_form select,
body #wfacp-e-form .wfacp_main_form .select2-selection {
	min-height: 46px;
	border: 1px solid var(--lw-field-border);
	border-radius: var(--lw-radius-sm);
	padding: 11px 12px;
	/* !important: FunnelKit sets checkout input font-size with !important, so a
	   plain rule is overridden (this is why the size never visibly changed). */
	font-size: 17px !important;
	background-color: #fff;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Placeholder / greyed hint text — sized explicitly (FunnelKit otherwise shrinks
   it) so the field prompts read at the same comfortable size as typed input. */
body #wfacp-e-form .wfacp_main_form .input-text::placeholder,
body #wfacp-e-form .wfacp_main_form textarea::placeholder {
	font-size: 17px !important;
	opacity: 1;
}

body #wfacp-e-form .wfacp_main_form .input-text:focus,
body #wfacp-e-form .wfacp_main_form select:focus,
body #wfacp-e-form .wfacp_main_form .input-text:focus-visible {
	border-color: var(--lw-green);
	box-shadow: 0 0 0 3px rgba(102, 181, 106, 0.18);
	outline: none;
}

/* Field placeholder / label. FunnelKit Aero uses a FLOATING label
   (.wfacp-form-control-label) as the placeholder — it sits inside the empty field
   (FunnelKit sizes it 14px, 13px on mobile) then shrinks + floats up when filled.
   That resting label is the "field text" the shopper reads, so bump it here (the
   .form-row label class we targeted before does NOT match FunnelKit's label).
   Needs !important: FunnelKit's checkout CSS is !important-heavy. */
#wfacp-e-form .wfacp_main_form label.wfacp-form-control-label:not(.radio):not(.checkbox),
#wfacp-e-form .wfacp_main_form .form-row label {
	font-size: 17px !important;
	color: var(--lw-muted);
}

/* Checkbox row text (terms, ship-to-different, company, marketing consent) —
   bumped so the small print is comfortably readable. Shipping-method labels are
   NOT `.woocommerce-form__label-for-checkbox`, so they keep their own size. */
#wfacp-e-form .wfacp_main_form .woocommerce-form__label-for-checkbox,
#wfacp-e-form .wfacp_main_form .wfacp-checkbox-field label,
#wfacp-e-form .wfacp_main_form p.form-row.wfacp-terms-and-condition label,
#wfacp-e-form .wfacp_main_form .wfacp_checkout_terms_conditions label,
#wfacp-e-form .wfacp_main_form label.checkbox {
	font-size: 16.5px !important;
	line-height: 1.45 !important;
}

/* ------------------------------------------------------------------ *
 * 3. Shipping method rows  ->  big, clean, selectable cards
 *
 * Real markup (verified on dev):
 *   li.wfacp_single_shipping_method
 *     > div.wfacp_single_shipping        (flex row: option | price)
 *         > div.wfacp_shipping_radio     (radio + <label>)
 *             > input.shipping_method[radio]
 *             > label > .lubiwood-ship-badge-wrap (badge img + title)
 *                     + .lubiwood-wd-est-del--in-label (delivery subtitle)
 *         > div.wfacp_shipping_price      (.amount)
 *
 * FunnelKit ships its own `body #wfacp-e-form …` inline rules, so the layout
 * props here are `!important` to guarantee they win.
 * ------------------------------------------------------------------ */

/* Hide the redundant "Shipping method" field sub-label — the section already
   has a "Shipping Method" heading right above it (the "same text twice"). */
#wfacp-e-form .wfacp_shipping_options > .wfacp_border > label.label_shiping {
	display: none !important;
}

/* Shopify-style: ONE bordered container, methods stacked with thin dividers
   (not separate cards). Reset the FunnelKit shipping <table> wrapper first. */
body #wfacp-e-form .wfacp_shipping_table,
body #wfacp-e-form .wfacp_shipping_table tbody,
body #wfacp-e-form .wfacp_shipping_table tr,
body #wfacp-e-form .wfacp_shipping_table td {
	display: block !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}
body #wfacp-e-form ul.woocommerce-shipping-methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--lw-field-border);
	border-radius: var(--lw-radius);
	overflow: hidden;
	background: #fff;
}

/* Each method = a row with a divider under it (last row has none). */
body #wfacp-e-form .wfacp_single_shipping_method {
	border: 0;
	border-bottom: 1px solid var(--lw-border);
	border-radius: 0;
	padding: 0;
	margin: 0;
	background: #fff;
	position: relative;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
body #wfacp-e-form .wfacp_single_shipping_method:last-child {
	border-bottom: 0;
}

/* Selected row: green wash + a green ring drawn on top of the dividers. */
body #wfacp-e-form .wfacp_single_shipping_method:has(.shipping_method:checked) {
	background: var(--lw-green-tint);
	box-shadow: 0 0 0 2px var(--lw-green-border) inset;
	z-index: 1;
}

/* The WHOLE row is one grid: [ radio | badge | text | price ]. We promote the
   radio, badge, title, date and price into this grid with display:contents so the
   text column (minmax(0,1fr)) always takes the leftover width — FunnelKit's nested
   flex refuses to grow, which was squeezing the text and wrapping the title. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_single_shipping {
	display: grid !important;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 16px;
	row-gap: 1px;
	padding: 16px 18px 16px 8px;
	width: 100%;
}

/* Unwrap the nested containers so their children land directly in the row grid. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_radio,
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_radio > label {
	display: contents !important;
}

/* BIG, obvious, green radio — vertically centred on the left.
   FunnelKit pins the radio with `position:absolute; top:2px`, which sticks it to
   the top of the (now two-line) row; force it back into normal flow so the flex
   `align-items:center` can centre it vertically. */
body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: static !important;
	top: auto !important;
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
	justify-self: start;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #bcc5bf !important;
	border-radius: 50% !important;
	background: #fff !important;
	cursor: pointer;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Filled green centre dot. Painted with a radial-gradient background rather than
   ::after — Chromium does not reliably render pseudo-elements on an <input>. */
body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method:checked {
	border-color: var(--lw-green) !important;
	background-color: #fff !important;
	background-image: radial-gradient(circle at center, var(--lw-green) 0 6px, transparent 7px) !important;
	box-shadow: 0 0 0 4px rgba(102, 181, 106, 0.20);
}

/* Unwrap the badge+title span so the <img> and title land in the row grid. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-wrap {
	display: contents !important;
}

/* BIG badge — column 2, spanning both text rows, vertically centred. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: center;
	width: 105px !important;
	height: 105px !important;
}

/* Title — column 3, top row (just above the date). */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-title {
	grid-column: 3;
	grid-row: 1;
	align-self: end;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1.2;
	color: var(--lw-ink);
	white-space: normal !important;
	cursor: pointer;
}

/* Date — column 3, bottom row (under the title). The "Estimated delivery:" wording
   is hidden for a clean look — just the date. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del--in-label {
	grid-column: 3;
	grid-row: 2;
	align-self: start;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.4;
	font-weight: 500;
	color: var(--lw-muted) !important;   /* quiet subtitle under the black name */
	cursor: pointer;
}
/* Show the "Estimated:" prefix (PHP renders it as the __label span). */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del__label {
	display: inline !important;
	font-weight: 600;
	color: var(--lw-muted) !important;
}
/* Keep the date range on one piece so it never breaks as "26. / July". */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del__dates {
	white-space: nowrap;
	color: var(--lw-muted) !important;
}

/* Price — column 4, right side, spanning both rows, vertically centred. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price {
	grid-column: 4;
	grid-row: 1 / 3;
	align-self: center;
	justify-self: end;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right;
}
/* Shopify-style: plain price, no pill — black, bold, right-aligned. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .amount,
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .woocommerce-Price-amount {
	display: inline-block;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--lw-ink) !important;
}
/* Currency symbol matches the price exactly — same size, weight and colour. */
body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .woocommerce-Price-currencySymbol {
	font-size: 1em !important;
	font-weight: inherit;
	color: inherit;
	vertical-align: baseline;
}

/* --- Carrier mode (shipping-carriers feature) ---------------------------------
   When that feature owns the row it emits .lubiwood-carrier-line (method name +
   "Popular" pill) in the label, plus a carrier logo <img> (or a text tag when
   the logo asset is missing).

   Layout, ALL viewports — a clean Shopify-style row:

       (POPULAR)  ← badge straddling the row's top border
       ( ) Method name                 price
           Estimated delivery line

   The radio and the price sit ON the title line. Carrier logos are hidden for
   now (still rendered in the DOM — delete the display:none rule to bring them
   back). Typography needs !important to beat FunnelKit's label rules. */
body #wfacp-e-form .wfacp_single_shipping_method {
	position: relative;
}
/* Carrier logos (and the no-asset text fallback) — hidden for now. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-logo,
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-tag {
	display: none !important;
}
/* The straddling pill must poke above the container's edge, so corner clipping
   moves from the UL (overflow:hidden) to the first/last rows — the selected
   row's green wash + inset ring follow the row's own radius, corners stay
   clean. The UL also gets a little headroom so the badge never kisses the
   section heading above. */
body #wfacp-e-form ul.woocommerce-shipping-methods:has(.lubiwood-carrier-pill) {
	overflow: visible;
	margin-top: 10px !important;
}
body #wfacp-e-form ul.woocommerce-shipping-methods:has(.lubiwood-carrier-pill) .wfacp_single_shipping_method:first-child {
	border-top-left-radius: var(--lw-radius);
	border-top-right-radius: var(--lw-radius);
}
body #wfacp-e-form ul.woocommerce-shipping-methods:has(.lubiwood-carrier-pill) .wfacp_single_shipping_method:last-child {
	border-bottom-left-radius: var(--lw-radius);
	border-bottom-right-radius: var(--lw-radius);
}
/* Row grid: [ radio | text | price ], est-delivery on its own second row. */
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .wfacp_single_shipping {
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	grid-template-rows: auto auto !important;
	align-items: center !important;
}
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .wfacp_shipping_radio,
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .wfacp_shipping_radio > label {
	display: contents !important;
}
/* Radio ON the title line — level with the method name, not floating above it. */
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) input[type="radio"].shipping_method {
	grid-column: 1 !important;
	grid-row: 1 !important;
	align-self: center !important;
	justify-self: start;
	margin: 0 !important;
}
/* Method name — the pill is lifted out of the flow, so this is just the title.
   position:relative makes this the pill's anchor: left:0 on the pill = exactly
   the title's left edge, whatever the row's padding/radio/gap add up to. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-line {
	display: block !important;
	position: relative !important;
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: start;
	text-align: left !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.25;
	color: var(--lw-ink) !important;
	white-space: normal !important;
	cursor: pointer;
}
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-name {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--lw-ink) !important;
}
/* Estimated delivery — quiet second line under the name. */
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .lubiwood-wd-est-del--in-label {
	grid-column: 2 !important;
	grid-row: 2 !important;
	align-self: start;
	justify-self: start;
	text-align: left !important;
}
/* Price — right-aligned, level with the title/radio. */
html body #wfacp-e-form .wfacp_single_shipping_method:has(.lubiwood-carrier-line) .wfacp_shipping_price {
	grid-column: 3 !important;
	grid-row: 1 !important;
	align-self: center !important;
	justify-self: end !important;
}
/* "Popular" — a solid green badge straddling the row's top border, starting at
   the title's left edge. Anchored to .lubiwood-carrier-line (position:relative
   above): left:0 = the title's x at any viewport; the negative top is the
   measured distance from the title line up to the row's border (FunnelKit row
   inset 11px + row padding-top 10px desktop / 13px mobile), and translateY
   centres the badge ON that border. z-index lifts it over the selected row's
   green ring and the neighbouring row's background. */
body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-pill {
	position: absolute !important;
	top: -21px;
	left: 0;
	transform: translateY(-50%);
	z-index: 3;
	display: inline-block !important;
	margin: 0 !important;
	padding: 3px 10px !important;
	border-radius: 999px;
	background: var(--lw-green) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5 !important;
	white-space: nowrap;
}
@media (max-width: 600px) {
	/* Same layout as desktop, scaled: the row's padding-top grows to 13px on
	   phones (deeper border offset) and the type sizes down a touch. */
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-pill {
		top: -24px;
		font-size: 9px !important;
		padding: 2px 8px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-carrier-line {
		font-size: 15px !important;
		padding-right: 6px;
	}
}

/* Phones — tighten the grid gaps/padding and scale the badge, title and price
   down a touch for the narrow row. Radio sits at the far-left edge; the price
   pill stays on the right. Layout (grid columns) is inherited from above. */
@media (max-width: 600px) {
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_single_shipping {
		column-gap: 11px;
		padding: 13px 12px 13px 5px;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method:checked {
		background-image: radial-gradient(circle at center, var(--lw-green) 0 5px, transparent 6px) !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge {
		width: 68px !important;
		height: 68px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-title {
		font-size: 16px !important;
		line-height: 1.15;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del--in-label {
		font-size: 12px !important;
	}
	/* Price — plain, sized down a touch for the narrow row. */
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .amount,
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price .woocommerce-Price-amount {
		font-size: 16px !important;
		padding: 0 !important;
	}
}

/* Very small phones (iPhone SE, 375px and below) — there isn't room for the icon
   AND a one-line title next to the price, so drop the icon and keep the row clean:
   the grid collapses to [ radio | title+date | price ] and the title gets the full
   width. Normal phones (376px+) keep the icon. */
@media (max-width: 375px) {
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_single_shipping {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 12px;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge {
		display: none !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-title,
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del--in-label {
		grid-column: 2;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_shipping_price {
		grid-column: 3;
	}
}

/* ------------------------------------------------------------------ *
 * 4. Payment methods  ->  selectable cards
 * ------------------------------------------------------------------ */
/* Shopify-style: ONE bordered container holding the gateways, split by dividers. */
#wfacp-e-form #payment ul.payment_methods,
#wfacp-e-form #payment .wc_payment_methods {
	border: 1px solid var(--lw-field-border) !important;
	border-radius: var(--lw-radius) !important;
	overflow: hidden;
	padding: 0 !important;
	margin: 0;
	display: block;
	background: #fff;
}

/* Each gateway = a row with a divider under it (last row has none). */
/* Deterministic grid: [radio] [label / description]. The radio is column 1; the label AND
   the description both sit in column 2, so the label never shifts when the description shows
   on the selected row (the old flex-wrap layout indented the selected label). */
body #wfacp-e-form #payment li.wc_payment_method {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	row-gap: 4px;
	/* min-height gives the short (unselected) rows more presence; the selected row is
	   already taller from its description so it's unaffected. */
	min-height: 74px;
	box-sizing: border-box;
	border: 0 !important;
	border-bottom: 1px solid var(--lw-border) !important;
	border-radius: 0 !important;
	background: #fff !important;
	padding: 18px !important;
	margin: 0 !important;
	list-style: none !important;
	position: relative;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Radio pinned to column 1, first row. */
body #wfacp-e-form #payment li.wc_payment_method > input[type="radio"],
body #wfacp-e-form #payment li.wc_payment_method > input.input-radio {
	grid-column: 1;
	grid-row: 1;
	margin: 0 !important;
	align-self: center;
}
body #wfacp-e-form #payment li.wc_payment_method:last-child {
	border-bottom: 0 !important;
}

body #wfacp-e-form #payment li.wc_payment_method:has(input.input-radio:checked),
body #wfacp-e-form #payment li.wc_payment_method:has(input[type="radio"]:checked),
/* When only one gateway is available it is the chosen one — show it selected
   even though WooCommerce hides the lone radio. */
body #wfacp-e-form #payment li.wc_payment_method:only-child {
	background: var(--lw-green-tint) !important;
	box-shadow: 0 0 0 2px var(--lw-green-border) inset !important;
	z-index: 1;
}

body #wfacp-e-form #payment li.wc_payment_method > label {
	grid-column: 2;
	grid-row: 1;
	display: flex !important;
	min-width: 0;
	align-items: center;
	gap: 10px;
	/* !important: FunnelKit's wfacp-form.min.css sets a more-specific 14px/400 on payment
	   labels, so these need !important to win. */
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--lw-ink);
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
}

/* Gateway icons (Stripe/PayPal/etc.) sit to the right. */
#wfacp-e-form #payment li.wc_payment_method > label img {
	margin-left: auto;
	max-height: 22px;
	width: auto;
}

/* The gateway description — calm helper text under the label, no extra box. */
#wfacp-e-form #payment li.wc_payment_method .payment_box {
	grid-column: 2; /* under the label (col 2), aligned with it */
	background: transparent;
	border: 0;
	margin: 2px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lw-muted);
}
#wfacp-e-form #payment li.wc_payment_method .payment_box p {
	margin: 0;
}
#wfacp-e-form #payment li.wc_payment_method .payment_box::before {
	display: none; /* kill WooCommerce's little triangle */
}

/* ------------------------------------------------------------------ *
 * 5. Order bump  ->  green "gift" card
 * ------------------------------------------------------------------ */
#wfob_wrap .wfob_bump,
#wfacp-e-form #wfob_wrap .wfob_bump {
	border: 2px dashed var(--lw-green-border);
	border-radius: var(--lw-radius);
	background: var(--lw-green-tint);
	padding: 14px 16px;
}

#wfob_wrap .wfob_bump:has(input:checked) {
	border-style: solid;
	box-shadow: 0 0 0 1px var(--lw-green-border) inset;
}

/* ------------------------------------------------------------------ *
 * 6. Place Order button  ->  full-width, brand green
 * ------------------------------------------------------------------ */
body #wfacp-e-form #place_order,
body #wfacp-e-form button[type="submit"]:not(.white):not(.black):not(.wfacp-coupon-btn) {
	width: 100%;
	min-height: 56px;
	border: 0;
	border-radius: var(--lw-radius);
	background-color: var(--lw-green);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 16px rgba(102, 181, 106, 0.28);
	transition: background-color 0.15s ease, transform 0.05s ease;
}

body #wfacp-e-form #place_order:hover,
body #wfacp-e-form button[type="submit"]:not(.white):not(.black):not(.wfacp-coupon-btn):hover {
	background-color: var(--lw-green-dark);
}

body #wfacp-e-form #place_order:active {
	transform: translateY(1px);
}

/* Coupon "Apply" button stays secondary, not full width. */
body #wfacp-e-form .wfacp-coupon-btn {
	width: auto;
	min-height: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * 7. Order summary (right column) — light polish
 * ------------------------------------------------------------------ */
#wfacp-e-form .wfacp-order-summary,
#wfacp-e-form .wfacp_order_summary {
	border-radius: var(--lw-radius);
}

/* ------------------------------------------------------------------ *
 * 8. Image-1 polish — green radios, payment "Free" badge + logos
 * ------------------------------------------------------------------ */

/* Custom green radio dots on payment rows (shipping radios are handled in §3).
   Same armor as the §3 shipping radios: FunnelKit/WoodMart rules resize checked
   radios (they stretched into a green oval), so every box property is clamped
   with !important, and the centre dot is painted with a radial-gradient — the
   old ::after dot is unreliable on <input> in Chromium and inherited the
   stretch. */
body #wfacp-e-form #payment li.wc_payment_method input[type="radio"].input-radio {
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	min-height: 20px !important;
	max-height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #c5ccc7 !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: none;
	position: static !important;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
body #wfacp-e-form #payment li.wc_payment_method input[type="radio"].input-radio:checked {
	border-color: var(--lw-green) !important;
	background-color: #fff !important;
	background-image: radial-gradient(circle at center, var(--lw-green) 0 5px, transparent 6px) !important;
}
body #wfacp-e-form #payment li.wc_payment_method input[type="radio"].input-radio::before,
body #wfacp-e-form #payment li.wc_payment_method input[type="radio"].input-radio::after {
	display: none !important;
}

/* Shopify style: no "Free" badge on payment rows — just method name + logo. */
#wfacp-e-form #payment li.wc_payment_method > label::after {
	content: none !important;
	display: none !important;
}

/* Push the gateway logo/icons to the far right of the row. */
#wfacp-e-form #payment li.wc_payment_method > label > span,
#wfacp-e-form #payment li.wc_payment_method > label > img {
	margin-left: auto;
}
#wfacp-e-form #payment li.wc_payment_method > label img {
	max-height: 26px;
	width: auto;
}

/* NOTE: a previous version painted a COD "card" icon as a left background here with
   padding-left:32px. That made the COD label text start 32px further right than the other
   rows (read as a "shift"), so it was removed to keep all payment labels aligned. To bring a
   COD icon back, add it as an inline element on the RIGHT (like the card-network logos) rather
   than as left padding on the label. */

/* ------------------------------------------------------------------ *
 * 9. Remove the gold "trust coin" badges from the checkout sidebar
 *    (Secure Payments / Fast Shipping / Premium Quality / Customer
 *    Support). They are Elementor image widgets (ids cbwid01–cbwid04);
 *    the image-src selectors are a fallback in case a translated page
 *    uses different element ids. This stylesheet only loads on the
 *    FunnelKit checkout, so leaving these unscoped is safe.
 * ------------------------------------------------------------------ */
.elementor-element-cbwid01,
.elementor-element-cbwid02,
.elementor-element-cbwid03,
.elementor-element-cbwid04,
/* also collapse the now-empty columns that held them, so no gap is left */
.elementor-element-cbcol01,
.elementor-element-cbcol02,
.elementor-element-cbcol03,
.elementor-element-cbcol04,
.elementor-widget-image:has(img[src*="secure-payments"]),
.elementor-widget-image:has(img[src*="fast-shipping"]),
.elementor-widget-image:has(img[src*="premium-quality"]),
.elementor-widget-image:has(img[src*="customer-support"]),
/* "Shop with Confidence" trust checklist column (heading + icon list). */
.elementor-element-6522513d {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 10. Payment section: single container (§4), tame expanded gateway panels
 * ------------------------------------------------------------------ */

/* Kill only the OUTER wrapper box (the section is already a card); the payment
   LIST keeps its border — it's the Shopify-style container (§4). */
body #wfacp-e-form #payment.woocommerce-checkout-payment {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Expanded gateway panel (e.g. "Pay with Apple Pay") kept white by a theme
   rule — force it to blend into its (possibly green-tinted) row. */
body #wfacp-e-form #payment li.wc_payment_method {
	overflow: hidden;
}
body #wfacp-e-form #payment li.wc_payment_method .payment_box {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------ *
 * 11. Desktop compaction — the §3 shipping rows (105px badge) are
 *     oversized on large screens; shrink badge/radio/padding there.
 *     Mobile keeps the §3 sizes.
 * ------------------------------------------------------------------ */
@media (min-width: 769px) {
	body #wfacp-e-form .wfacp_single_shipping_method .wfacp_single_shipping {
		padding: 10px 16px 10px 8px;
		column-gap: 12px;
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge {
		width: 80px !important;
		height: 80px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method:checked {
		background-image: radial-gradient(circle at center, var(--lw-green) 0 5px, transparent 6px) !important;
		box-shadow: 0 0 0 3px rgba(102, 181, 106, 0.20);
	}
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-ship-badge-title {
		font-size: 15px !important;
	}
}

/* "Add Apartment, suite, unit…" collapsible toggle: FunnelKit ships it in a
   soft red (rgb(221,117,117)) that reads like an error at checkout. Use the
   site's primary green instead (WoodMart --wd-primary-color; hex fallback =
   the same rgb(122,179,139) for non-WoodMart contexts). Scoped under
   #wfacp-e-form per the FK-reset rule. */
body #wfacp-e-form a.wfacp_collapsible,
body .wfacp_main_form a.wfacp_collapsible {
	/* !important: the color is baked into the checkout templates' Elementor
	   settings (#DD7575) and compiles at .elementor-<id> specificity. */
	color: var(--wd-primary-color, #7ab38b) !important;
}

/* ------------------------------------------------------------------ *
 * Mobile shipping-method rows — LEGACY BADGE MODE ONLY
 * ------------------------------------------------------------------ *
 * The old `.lubiwood-ship-badge*` markup (used when the shipping-carriers
 * feature is off) auto-flows badly on phones: parts land behind the radio and
 * the price/date collide. Drop those rows to a forgiving
 * [ radio | stacked text | price ] layout. Carrier-mode rows
 * (:has(.lubiwood-carrier-line)) are EXCLUDED — their phone layout is owned by
 * the "Carrier mode" section above, and these late rules must not fight it. */
@media (max-width: 575px) {
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .wfacp_single_shipping {
		grid-template-columns: 28px minmax(0, 1fr) auto !important;
		grid-template-rows: auto !important;
		column-gap: 10px !important;
		row-gap: 2px !important;
		align-items: start !important;
		padding: 14px 14px 14px 6px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) input[type="radio"].shipping_method {
		grid-column: 1 !important;
		grid-row: 1 !important;
		align-self: start !important;
		margin-top: 2px !important;
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
	}
	body #wfacp-e-form .wfacp_single_shipping_method input[type="radio"].shipping_method:checked {
		background-image: radial-gradient(circle at center, var(--lw-green) 0 5px, transparent 6px) !important;
	}
	/* Every textual part stacks in column 2 (auto rows), so nothing lands behind
	   the radio. */
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .lubiwood-ship-badge-title,
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .lubiwood-wd-est-del--in-label {
		grid-column: 2 !important;
		grid-row: auto !important;
		align-self: start !important;
		margin-left: 0 !important;
		min-width: 0 !important;
	}
	/* Price: column 3, top row, right-aligned — never over the date. */
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .wfacp_shipping_price,
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .wfacp_shipping_price .amount {
		grid-column: 3 !important;
		grid-row: 1 !important;
		align-self: start !important;
		white-space: nowrap !important;
		text-align: right !important;
	}
	/* Let the delivery date wrap rather than overrun into the price (all rows). */
	body #wfacp-e-form .wfacp_single_shipping_method .lubiwood-wd-est-del__dates {
		white-space: normal !important;
	}
	/* Shrink the legacy badge so it doesn't dominate the row. */
	body #wfacp-e-form .wfacp_single_shipping_method:not(:has(.lubiwood-carrier-line)) .lubiwood-ship-badge {
		grid-column: 2 !important;
		grid-row: auto !important;
		width: auto !important;
		max-width: 46px !important;
		height: auto !important;
		max-height: 30px !important;
		align-self: start !important;
	}
}

/* ------------------------------------------------------------------ *
 * 5. Place-order loader — viewport-centered
 *
 * WooCommerce blocks the checkout FORM while the order is placed and centres its
 * spinner on that (tall) form, so a shopper scrolled to the Place Order button
 * at the bottom sees a dimmed page but no spinner. This overlay is position:fixed
 * and always centres in the current viewport, so the feedback is visible however
 * far down the page the click happens. Shown/hidden by checkout-click.js when the
 * form enters/leaves its processing (blockUI) state.
 * ------------------------------------------------------------------ */
.lubiwood-checkout-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
}
.lubiwood-checkout-loader.is-active {
	display: flex;
}
.lubiwood-checkout-loader__spinner {
	width: 56px;
	height: 56px;
	border: 4px solid rgba(102, 181, 106, 0.25);
	border-top-color: var(--lw-green, #66b56a);
	border-radius: 50%;
	animation: lubiwood-checkout-spin 0.7s linear infinite;
}
@keyframes lubiwood-checkout-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.lubiwood-checkout-loader__spinner { animation-duration: 1.6s; }
}

/* ------------------------------------------------------------------ *
 * 6. Trust badges — replace the bottom payment-logo strip
 * The checkout footer's static "Payment methods" logo image is hidden by
 * checkout-click.js, which injects this row in its place (brand green).
 * ------------------------------------------------------------------ */
.lubiwood-checkout-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 30px;
	padding: 4px 8px;
	line-height: 1.3;
}
.lubiwood-checkout-trust .lubiwood-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 700;
	color: var(--lw-ink, #1f2421);
}
.lubiwood-checkout-trust .lubiwood-trust-ico {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--lw-green, #66b56a);
}
.lubiwood-checkout-trust .lubiwood-trust-ico svg {
	width: 22px;
	height: 22px;
	display: block;
}
@media (max-width: 480px) {
	.lubiwood-checkout-trust { gap: 8px 18px; }
	.lubiwood-checkout-trust .lubiwood-trust-item { font-size: 14.5px; }
	.lubiwood-checkout-trust .lubiwood-trust-ico svg { width: 20px; height: 20px; }
}

/* ------------------------------------------------------------------ *
 * Font resilience — a failed webfont must NEVER fall back to serif
 *
 * FunnelKit's compiled settings CSS declares bare `font-family: Karla` on its
 * containers and `Karla, Lato` on section headings — no generic fallback.
 * Neither Karla nor Lato is a system font, so whenever the Karla woff2 fails
 * to load client-side (flaky network, privacy extension, a cached bad
 * response) those elements render in the browser's DEFAULT SERIF (Times):
 * random serif headings/prices/bump text on an otherwise-sans checkout.
 * Re-declare the full stack on every text element of the canvas — same first
 * font, so nothing changes when Karla loads; the failure mode becomes clean
 * system sans. Icon-font elements are excluded so their glyphs keep working
 * (pseudo-element icons are unaffected either way: they declare their own
 * font-family on the pseudo itself).
 * ------------------------------------------------------------------ */
body .wfacp-template-container :where(div, section, form, h1, h2, h3, h4, h5, h6,
	p, span, label, a, li, ul, ol, dd, dt, td, th, table, bdi, small, strong, b,
	em, legend, blockquote, figcaption, address, button, input, select,
	textarea):not(i):not([class*="icon"]):not([class*="fa-"]) {
	font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif !important;
}

/* Section HEADINGS + order-summary totals: the `:where()` rule above has zero
 * specificity, so FunnelKit's compiled `.elementor-element-xxx h2/h3 { font-family:
 * Karla, Lato !important }` (two classes + element) outweighs it and these elements
 * stayed on `Karla, Lato` — i.e. SERIF when the Karla woff2 fails to load (Lato is
 * not a system font either). Re-declare the stack rooted at the `#wfacp-e-form` ID:
 * an ID (1,0,x) beats FunnelKit's class chain (0,2,x), so it wins and the fallback
 * is clean system-sans. Same first font (Karla) → no visual change when Karla loads.
 * (QA 2026-08-10: Croatian checkout headings — Način dostave / Plaćanje / Ukupno —
 * rendered serif; language-independent, all markets.) */
body #wfacp-e-form h1, body #wfacp-e-form h2, body #wfacp-e-form h3,
body #wfacp-e-form h4, body #wfacp-e-form h5, body #wfacp-e-form h6,
body #wfacp-e-form .wfacp-section-heading,
body #wfacp-e-form .wfacp-order-summary-toggle,
body #wfacp-e-form .wfacp_order_summary,
body #wfacp-e-form .wfacp_order_summary *:not(i):not([class*="icon"]):not([class*="fa-"]) {
	font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif !important;
}

/* ------------------------------------------------------------------
   Coupon row: one line, and the discount stated ONCE.

   Advanced Coupons now runs in "coupon amount" mode
   (acfw_bogo_discount_application_mode = coupon), so WooCommerce itself
   prints the real discount on the coupon row. ACFW ALSO renders its own
   deal blurb - <ul class="acfw-bogo-summary"> - which repeats the same
   figure, so the row read as if twice the money came off:

       Subtotal                        57,98 EUR
                       -19,99 EUR [Remove]        <- WooCommerce, the real one
       Coupon  lch1  - Cosmic Owl Puzzle - S X 1:
                            -19,99 EUR            <- ACFW, the duplicate
       Total                           42,39 EUR

   The blurb is hidden: it is a bulleted list carrying an inline
   style="margin:10px" (hence !important), it wrapped over three lines, and
   in this mode it says nothing the coupon row does not already say. What is
   left matches the rows around it:

       Coupon  lch1            -19,99 EUR  [Remove]

   Applies to all three surfaces that render cart totals: FunnelKit's
   checkout widget, the cart page, and the fkcart side-cart. Scope note: the
   checkout summary lives in .wfacp_order_summary_container /
   .wfacp_mini_cart_reviews, NOT #wfacp-e-form - verified against the
   rendered ancestor chain, because the obvious guess matches nothing.
   ------------------------------------------------------------------ */

/* ACFW's duplicate deal blurb - redundant in coupon-amount mode. */
body .acfw-bogo-summary {
	display: none !important;
}

/* Keep the coupon row on one line, amount aligned with the other totals. */
body .wfacp_order_summary_container tr.cart-discount > td,
body .wfacp_mini_cart_reviews tr.cart-discount > td,
body .cart_totals tr.cart-discount > td,
body .shop_table tr.cart-discount > td {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: .45em;
	text-align: right;
}

/* Remove link: after the amount, quieter, never on its own line.
   It is absolutely positioned / floated by the theme, which is why it sat on a
   line of its own - and why it OVERLAPPED the amount when flex order was
   applied without resetting that first. position:static does the real work. */
body .wfacp_order_summary_container tr.cart-discount .woocommerce-remove-coupon,
body .wfacp_mini_cart_reviews tr.cart-discount .woocommerce-remove-coupon,
body .cart_totals tr.cart-discount .woocommerce-remove-coupon,
body .shop_table tr.cart-discount .woocommerce-remove-coupon {
	order: 2;
	position: static !important;
	float: none !important;
	inset: auto !important;
	margin: 0 !important;
	display: inline-block;
	font-size: .82em;
	white-space: nowrap;
	opacity: .75;
}


/* lubiwood-shipping-carriers */
/* Carrier pill + logo base styles.
 * Grid placement inside the FunnelKit rows is owned by the checkout-restyle
 * stylesheet (funnelkit-checkout-style), which lays each row out as a grid and
 * has a dedicated "Carrier mode" section for .lubiwood-carrier-line/-logo.
 * These rules only cover typography and a safety cap for non-restyled contexts.
 */

.lubiwood-carrier-name {
	font-weight: 600;
}

.lubiwood-carrier-pill {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--lw-green, #66b56a);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 2px;
	line-height: 1.5;
	white-space: nowrap;
}

img.lubiwood-carrier-logo {
	max-height: 22px;
	width: auto;
	pointer-events: none;
}

@media (max-width: 576px) {
	.lubiwood-carrier-pill {
		font-size: 9.5px;
		padding: 2px 7px;
	}
}