/* lubiwood-nl */
/* Lubiwood newsletter popup. Scoped under .lwnl-* to avoid theme collisions.
   .lwnl-card is the shared visual card — used standalone (auto mode, wrapped in
   .lwnl-root/.lwnl-dialog) and embedded (shortcode, wrapped in .lwnl-embed inside
   a WoodMart popup). Deliberately single-look (brand cream). */

/* ---- standalone overlay (auto mode) ---- */
.lwnl-root{
	position:fixed; inset:0; z-index:999999;
	display:flex; align-items:center; justify-content:center; padding:20px;
}
.lwnl-root[hidden]{ display:none; }
.lwnl-overlay{ position:absolute; inset:0; background:rgba(28,24,18,.55); backdrop-filter:blur(1px); }
.lwnl-dialog{
	position:relative; width:100%; max-width:400px; max-height:calc(100vh - 40px); overflow:auto;
	transform:translateY(14px) scale(.98); opacity:0;
	transition:transform .32s cubic-bezier(.2,.8,.25,1),opacity .32s ease;
}
.lwnl-root.lwnl-open .lwnl-dialog{ transform:none; opacity:1; }

/* ---- embedded (shortcode, inside a WoodMart popup) ---- */
.lwnl-embed{ width:100%; display:flex; justify-content:center; }
.lwnl-embed .lwnl-card{ box-shadow:none; max-width:400px; width:100%; }

/* ---- the card (shared) ---- */
.lwnl-card{
	--lwnl-green:#7ab38b; --lwnl-green-deep:#5e9772; --lwnl-green-ink:#3f6b50;
	--lwnl-tint:#E9F4ED; --lwnl-cream:#F7F3EC; --lwnl-line:#e7ded0;
	--lwnl-ink:#141210; --lwnl-text:#4a463f; --lwnl-muted:#8b8478;
	position:relative; background:var(--lwnl-cream); border-radius:16px; overflow:hidden;
	box-shadow:0 30px 70px -20px rgba(20,16,10,.55),0 0 0 1px rgba(20,16,10,.06);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	text-align:center;
}

/* Close button — hardened against theme button styles (WoodMart forces width/display),
   so it stays a small circle in the top-right instead of stretching across the top. */
.lwnl-card .lwnl-x{
	position:absolute !important; top:12px !important; right:12px !important; left:auto !important; bottom:auto !important;
	z-index:6; box-sizing:border-box;
	width:34px !important; height:34px !important; min-width:0 !important; max-width:none !important;
	margin:0 !important; padding:0 !important; float:none !important;
	display:flex !important; align-items:center; justify-content:center;
	border-radius:50% !important; background:rgba(255,255,255,.92); border:1px solid rgba(20,16,10,.08);
	color:#3a352d; font-size:18px; line-height:1; cursor:pointer; box-shadow:0 4px 12px -4px rgba(0,0,0,.35);
	text-transform:none; letter-spacing:normal;
}
.lwnl-card .lwnl-x:hover{ background:#fff; }

.lwnl-card .lwnl-media{ position:relative; aspect-ratio:5/3; overflow:hidden; background:#efe7d8; margin:0; }
.lwnl-media{ position:relative; aspect-ratio:5/3; overflow:hidden; background:#efe7d8; }
.lwnl-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.lwnl-badge{
	position:absolute; top:12px; left:12px; background:var(--lwnl-green); color:#fff;
	font-size:12px; font-weight:800; letter-spacing:.02em; padding:7px 12px; border-radius:999px;
	box-shadow:0 6px 16px -4px rgba(63,107,80,.6);
}

.lwnl-body{ padding:22px 24px 24px; }
.lwnl-logo{ height:20px; width:auto; margin:2px auto 14px; display:block; opacity:.9; }
.lwnl-eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--lwnl-green-ink); font-weight:700; margin:0; }
.lwnl-title{ font-size:25px; line-height:1.12; color:var(--lwnl-ink); margin:9px 0 10px; letter-spacing:-.02em; text-wrap:balance; font-weight:800; }
.lwnl-hl{ color:var(--lwnl-green-deep); }
.lwnl-sub{ font-size:14px; line-height:1.55; color:var(--lwnl-text); margin:0 0 18px; }

.lwnl-form{ display:flex; flex-direction:column; gap:10px; margin:0; }
.lwnl-input{
	height:46px; border-radius:10px; border:1px solid var(--lwnl-line); background:#fff;
	padding:0 14px; font-size:15px; color:var(--lwnl-ink); outline:none; width:100%;
	transition:border-color .15s,box-shadow .15s;
}
.lwnl-input:focus{ border-color:var(--lwnl-green); box-shadow:0 0 0 3px rgba(122,179,139,.25); }
.lwnl-input.lwnl-invalid{ border-color:#c8553d; box-shadow:0 0 0 3px rgba(200,85,61,.18); }
.lwnl-btn{
	height:46px; border-radius:10px; border:0; cursor:pointer; color:#fff;
	background:linear-gradient(180deg,var(--lwnl-green),var(--lwnl-green-deep));
	font-size:15px; font-weight:800; letter-spacing:.01em;
	box-shadow:0 10px 22px -8px rgba(63,107,80,.65); transition:transform .1s,filter .15s;
}
.lwnl-btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.lwnl-btn[disabled]{ opacity:.6; cursor:default; transform:none; }
/* Force white label — WoodMart's theme button styles otherwise override .lwnl-btn's colour
   (same override that needed hardening on .lwnl-x); higher specificity + !important wins. */
.lwnl-card .lwnl-btn,
.lwnl-card .lwnl-btn:hover,
.lwnl-card .lwnl-btn:focus{ color:#fff !important; }
.lwnl-error{ color:#c8553d; font-size:12.5px; margin:2px 0 0; }

.lwnl-fine{ font-size:11.5px; color:var(--lwnl-muted); margin:12px 0 0; }

/* success */
.lwnl-check{ width:52px; height:52px; border-radius:50%; margin:0 auto 12px; background:var(--lwnl-tint);
	color:var(--lwnl-green-deep); display:flex; align-items:center; justify-content:center; font-size:26px;
	box-shadow:inset 0 0 0 1px rgba(122,179,139,.4); }
.lwnl-code{ margin:16px auto 6px; display:flex; align-items:stretch; max-width:280px;
	border:2px dashed var(--lwnl-green); border-radius:12px; overflow:hidden; background:#fff; }
.lwnl-code-value{ flex:1; font-family:"SFMono-Regular",Menlo,Consolas,monospace; font-weight:800;
	font-size:20px; letter-spacing:.12em; color:var(--lwnl-ink); display:flex; align-items:center; justify-content:center; padding:12px 8px; }
.lwnl-copy{ background:var(--lwnl-tint); color:var(--lwnl-green-ink); border:0; border-left:2px dashed var(--lwnl-green);
	font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:0 16px; cursor:pointer; }
.lwnl-copy.lwnl-copied{ background:var(--lwnl-green); color:#fff; }
.lwnl-note{ font-size:13px; color:var(--lwnl-text); margin:12px 0 0; line-height:1.5; }
.lwnl-shop{ display:inline-block; margin-top:16px; color:var(--lwnl-green-deep); font-weight:700; font-size:14px;
	text-decoration:none; border-bottom:2px solid rgba(122,179,139,.4); padding-bottom:1px; }

@media (prefers-reduced-motion:reduce){
	.lwnl-dialog{ transition:opacity .2s ease; transform:none; }
}


/* 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-product-banners */
/* Lubiwood — product banner slot (below the payment buttons). */
.lubiwood-product-banners {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 4px;
}

.lubiwood-product-banners .lubiwood-banner {
	display: block;
	line-height: 0;
	border-radius: 12px;
	overflow: hidden;
}

.lubiwood-product-banners .lubiwood-banner__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

a.lubiwood-banner {
	transition: opacity 0.2s ease;
}

a.lubiwood-banner:hover {
	opacity: 0.94;
}

.lubiwood-promos{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 0}
.lubiwood-promos .lubiwood-promo{flex:0 0 100%;scroll-snap-align:center}
.lubiwood-promos .lubiwood-promo__img{width:100%;height:auto;display:block;border-radius:12px}
@media(min-width:768px){.lubiwood-promos .lubiwood-promo{flex-basis:calc(50% - 8px)}}
.lubiwood-topbar-promo{display:inline-block;font-weight:600;color:inherit;text-decoration:none}
.lubiwood-topbar-promo:hover{text-decoration:underline}


/* lubiwood-product-page */
/**
 * Lubiwood — product page UX (purchase row, reviews, FAQ).
 * Shared design tokens + components scoped to body.lubiwood-product-page.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
body.lubiwood-product-page {
	--lwd-green: var(--wd-primary-color, #3d6b47);
	--lwd-green-dark: color-mix(in srgb, var(--lwd-green) 88%, #000);
	--lwd-green-soft: color-mix(in srgb, var(--lwd-green) 12%, #fff);
	--lwd-green-line: color-mix(in srgb, var(--lwd-green) 38%, #fff);
	--lwd-brd: var(--brdcolor-gray-300, #e3e6e4);
	--lwd-radius: 12px;
	--lwd-radius-sm: 10px;
	--lwd-btn-height: 48px;
	--lwd-text: var(--color-gray-900, #1f2421);
	--lwd-text-muted: var(--color-gray-700, #3a3f3c);
	--lwd-shadow: 0 1px 3px rgba(15, 23, 18, 0.05);
}

/* ── Primary buttons (add to cart, sticky CTA) ─────────────────────────────── */
body.lubiwood-product-page .product-image-summary button.single_add_to_cart_button,
body.lubiwood-product-page .wd-sticky-btn .single_add_to_cart_button,
body.lubiwood-product-page .wd-sticky-btn .wd-sticky-add-to-cart {
	min-height: var(--lwd-btn-height) !important;
	padding: 12px 20px !important;
	border: none !important;
	border-radius: var(--lwd-radius) !important;
	background: var(--lwd-green) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.01em;
	box-shadow: none !important;
	transition: background 0.2s ease, opacity 0.2s ease;
}

body.lubiwood-product-page .product-image-summary button.single_add_to_cart_button:hover:not(:disabled),
body.lubiwood-product-page .wd-sticky-btn .single_add_to_cart_button:hover,
body.lubiwood-product-page .wd-sticky-btn .wd-sticky-add-to-cart:hover {
	background: var(--lwd-green-dark) !important;
	color: #fff !important;
}

body.lubiwood-product-page .product-image-summary button.single_add_to_cart_button.disabled,
body.lubiwood-product-page .product-image-summary button.single_add_to_cart_button.wc-variation-selection-needed,
body.lubiwood-product-page .product-image-summary button.single_add_to_cart_button.wc-variation-is-unavailable {
	background: color-mix(in srgb, var(--lwd-green) 55%, #fff) !important;
	color: #fff !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

/* Sticky bar: match button shape on mobile (WoodMart defaults to square) */
body.lubiwood-product-page.wd-sticky-btn-on-mb .wd-sticky-btn {
	padding: 8px 12px;
	background: #fff;
	box-shadow: 0 -2px 12px rgba(15, 23, 18, 0.08);
}

body.lubiwood-product-page.wd-sticky-btn-on-mb .wd-sticky-btn .wd-sticky-btn-cart {
	margin-inline: 0;
}

body.lubiwood-product-page.wd-sticky-btn-on-mb .wd-sticky-btn .wd-sticky-add-to-cart {
	width: 100%;
	border-radius: var(--lwd-radius) !important;
}

/* ── Delivery box ──────────────────────────────────────────────────────────── */
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-est-del {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 11px 16px;
	border: 1.5px solid var(--lwd-green-line);
	border-radius: var(--lwd-radius);
	background: var(--lwd-green-soft);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--lwd-text-muted);
	box-shadow: none;
}

/* ── Social-proof counters (sold / watching): quiet single line, no box ──────── */
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-sold-count,
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-visits-count {
	display: flex;
	/* flex-start (not center) so when a long-language label wraps to two lines the
	   icon + count sit on the FIRST line with the text — the count reads as part of
	   the sentence ("15 Sold in the last 3 min") instead of floating detached in the
	   vertical middle. Single-line labels look identical. */
	align-items: flex-start;
	text-align: start; /* wrapped 2nd line sits left under the label, not centred */
	gap: 6px;
	margin-bottom: 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--lwd-text-muted);
}

body.lubiwood-product-page .product-image-summary .wd-product-info.wd-visits-count::before,
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-est-del::before {
	display: none;
}

body.lubiwood-product-page .product-image-summary .wd-product-info .wd-info-icon {
	flex-shrink: 0;
	font-size: 1.35rem;
	color: var(--lwd-green);
	line-height: 1;
	margin-inline-end: 0;
	/* Base nudge tuned for the delivery (truck) glyph, which sits a touch low in
	   its box; lift it so it reads centred against the (often 2-line) label. The
	   eye glyph has different metrics and is re-tuned in its own rule below. */
	display: inline-flex;
	align-items: center;
	position: relative;
	top: -0.06em;
}

/* Watching-now eye (\f11a) renders HIGH in its box — the shared lift above makes
   it sit clearly above the count/label. Push it down to optically centre the eye
   with the number and the 2-line "People watching…" text. */
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-visits-count .wd-info-icon {
	top: 0.12em;
}

body.lubiwood-product-page .product-image-summary .wd-product-info .wd-info-number {
	font-weight: 700;
	color: var(--lwd-text);
	margin-inline-end: 0; /* number hugs the message so "15 Sold in…" reads as one unit */
}

body.lubiwood-product-page .product-image-summary .wd-product-info .wd-info-msg,
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-est-del strong {
	font-weight: 600;
	color: var(--lwd-text);
}

/* Long localized delivery dates (e.g. HU "27. június – 12. július") wrap to two
   lines in the narrow summary column. Balance the lines so no single word is
   orphaned on the last line, and keep them tight. */
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-est-del .wd-info-msg {
	text-wrap: balance;
	line-height: 1.3;
}

/* Centre the estimated-delivery box content (icon + label + dates) within its
   full-width box, rather than left-aligned with empty space on the right. */
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-est-del {
	justify-content: center;
	text-align: center;
}

/* Always break after the label so the date/range sits on its own line:
   "Estimated delivery:" ⏎ "7. August – 10. August" (every language). */
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-est-del .wd-info-msg strong {
	display: block;
}

/* ── Urgency lines (sold counter + "people watching") — one line, every lang ──
   The buy-box summary column only affords ~240px for the label, so verbose
   languages (DE/PL/SL/HU translations of "…sold in the last 3 minutes" /
   "People watching…") overflow the base size and wrap to a second line, which
   reads as broken beside the tidy single-line English. product-page.js adds
   `.lubiwood-fit-line` and steps the LABEL font-size down toward a floor ONLY on
   a box that would otherwise wrap (short languages keep full size; the count
   number stays at its base size). The class is added by JS only, so without JS
   the lines just wrap as before — no regression. overflow:hidden is a spill-
   guard below the JS floor; in practice the fit runs before it ever bites. */
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-visits-count.lubiwood-fit-line,
body.lubiwood-product-page .product-image-summary .wd-product-info.wd-sold-count.lubiwood-fit-line {
	white-space: nowrap;
	overflow: hidden;
}
body.lubiwood-product-page .product-image-summary .wd-product-info.lubiwood-fit-line .wd-info-msg {
	white-space: nowrap;
}

/* ── Text action links (compare, size guide) ──────────────────────────────── */
body.lubiwood-product-page .product-image-summary .wd-action-btn.wd-style-text,
body.lubiwood-product-page .product-image-summary a.wd-open-size-guide {
	color: var(--lwd-text-muted) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

body.lubiwood-product-page .product-image-summary .wd-action-btn.wd-style-text:hover,
body.lubiwood-product-page .product-image-summary a.wd-open-size-guide:hover {
	color: var(--lwd-green) !important;
}

/* ── Size guide: relocated into the "Choose your size" header ──────────────────
 * WoodMart renders the size-guide trigger below the add-to-cart form. We hide it
 * there and let the size chooser move it up into the chooser header, re-showing it
 * as a quiet inline link (.lubiwood-sizeguide-inline, styled in swatch-prices.css).
 * Because only a real multi-size chooser relocates it, simple products and
 * single-variant puzzles show no size guide at all. */
body.lubiwood-product-page .wd-sizeguide-btn {
	display: none !important;
}
body.lubiwood-product-page .wd-sizeguide-btn.lubiwood-sizeguide-inline {
	display: inline-flex !important;
}

/* ── Short description: larger, more readable body copy ───────────────────────
 * WoodMart leaves the short description at the inherited base size (~15px),
 * which reads small/cramped under the title. Bump it for readability. The class
 * is shared by the classic summary and the Elementor "Product short description"
 * widget, so Elementor-built product pages are covered too; nested strong/em
 * scale along with it. */
body.lubiwood-product-page .woocommerce-product-details__short-description {
	font-size: 16px;
	line-height: 1.65;
}

/* ── Form controls (quantity stepper) ──────────────────────────────────────── */
body.lubiwood-product-page .product-image-summary div.quantity {
	min-height: var(--lwd-btn-height);
	border: 1px solid var(--lwd-brd) !important;
	border-radius: var(--lwd-radius) !important;
	background: #fff;
	/* Clip the inner cells to the rounded corners so the −/+ cells never poke
	   past the pill (their square corners otherwise show at the four corners). */
	overflow: hidden;
}

/* WoodMart renders the steppers as <button class="minus btn"> / <button class="plus btn">
   (NOT <input type="button">), and its .btn default paints a 2px square-cornered border.
   Target the .minus/.plus classes (element-agnostic) so we strip that border — otherwise
   the thick square border gets sliced by the container's overflow:hidden and reads as
   "cut off" corners. Cell dividers come from the number input's side borders below. */
body.lubiwood-product-page .product-image-summary div.quantity .minus,
body.lubiwood-product-page .product-image-summary div.quantity .plus {
	min-width: 42px;
	width: 42px;
	background: #fff !important;
	color: var(--lwd-text) !important;
	font-weight: 600;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.lubiwood-product-page .product-image-summary div.quantity input[type="number"],
body.lubiwood-product-page .product-image-summary div.quantity input[type="text"] {
	font-size: 15px;
	font-weight: 700;
	color: var(--lwd-text);
	border: none !important;
	border-left: 1px solid var(--lwd-brd) !important;
	border-right: 1px solid var(--lwd-brd) !important;
	border-radius: 0 !important;
}

/* Collapse the oversized gap between the size swatches and the delivery box.
   WoodMart spaces the variations table and .single_variation_wrap with
   --wd-var-table-mb (a large value), leaving a big void above the
   "Várható szállítási" box. Shrink it for the chooser layout only. */
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active {
	--wd-var-table-mb: 8px;
}

/* Only the main product form — never sticky bar, loops, or related products */
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .single_variation_wrap {
	margin-top: 4px;
	padding-top: 0;
	border-top: none;
}

/* Hide per-variation stock count (e.g. "34 in stock") — redundant on chooser pages */
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-availability,
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .single_variation_wrap p.stock {
	display: none !important;
}

/* "You chose …" confirmation — disabled for now */
body.lubiwood-product-page .product-image-summary .lubiwood-chooser-confirm {
	display: none !important;
}

/* Quantity + Add to cart on one row; payment (G Pay) full width below.
   WoodMart puts Stripe wrapper + hidden inputs inside the same container. */
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-add-to-cart {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	width: 100%;
	margin-bottom: 0;
	position: relative;
	align-items: stretch;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-add-to-cart > input[type="hidden"],
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-add-to-cart > input.variation_id {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-add-to-cart div.quantity {
	grid-column: 1;
	grid-row: 1;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
	grid-column: 2;
	grid-row: 1;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-add-to-cart .fkwcs_stripe_smart_button_wrapper,
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button):not(input) {
	grid-column: 1 / -1;
	width: 100%;
	margin: 0;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active div.quantity {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: stretch;
	margin: 0 !important;
	overflow: hidden;
}

/* Narrower stepper than the base rule above — frees horizontal room in the
   qty + Add-to-cart row, which is tight when the price is a long localized
   amount (e.g. HU HUF "19 100,00 Ft"). */
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active div.quantity .minus,
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active div.quantity .plus {
	width: 28px !important;
	min-width: 28px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active div.quantity input[type="number"],
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active div.quantity input[type="text"] {
	width: 30px !important;
	min-width: 30px;
	max-width: 30px;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-left: 1px solid var(--lwd-brd) !important;
	border-right: 1px solid var(--lwd-brd) !important;
	border-radius: 0 !important;
	text-align: center;
	box-shadow: none !important;
	-moz-appearance: textfield;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active div.quantity input[type="number"]::-webkit-outer-spin-button,
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active div.quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active button.single_add_to_cart_button {
	width: 100%;
	min-width: 0;
	margin: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active button.single_add_to_cart_button.wc-variation-selection-needed,
body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active button.single_add_to_cart_button.wc-variation-is-unavailable {
	white-space: normal;
	font-size: 12px;
	line-height: 1.25;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Hide Woodmart “Buy now” on chooser product pages */
body.lubiwood-swatch-chooser-page .wd-buy-now-btn,
body.lubiwood-swatch-chooser-page .wd-sticky-btn .wd-buy-now-btn {
	display: none !important;
}

/* Sticky bar layout */
body.lubiwood-product-page .wd-sticky-btn-container {
	align-items: center;
}

body.lubiwood-product-page .wd-sticky-btn-cart {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
}

/* Hide the price in the sticky bar (WoodMart already hides it on mobile).
   NOTE: do NOT `display: none` the whole .price span. WoodMart's *own* mobile CSS
   sets `.wd-sticky-btn-cart .price { display:none }`, and on translated (e.g. HU)
   pages WoodMart's variation JS relocates the CTA button to be a *child* of .price.
   So on mobile the relocated button gets hidden along with the price and the whole
   sticky bar collapses (≈16px, no visible CTA) — while EN keeps the button as a
   sibling and renders fine. Use `display: contents` so .price generates no box of
   its own: its monetary children stay hidden via the rules below, but a relocated
   button rejoins the .wd-sticky-btn-cart flex row as the full-width CTA, matching
   EN. Language-neutral — fixes every translated variant. */
body.lubiwood-product-page .wd-sticky-btn .wd-sticky-btn-cart .price {
	display: contents !important;
}

body.lubiwood-product-page .wd-sticky-btn .wd-sticky-btn-cart .price > .woocommerce-Price-amount,
body.lubiwood-product-page .wd-sticky-btn .wd-sticky-btn-cart .price > span[aria-hidden="true"],
body.lubiwood-product-page .wd-sticky-btn .wd-sticky-btn-cart .price > .screen-reader-text,
body.lubiwood-product-page .wd-sticky-btn .wd-sticky-btn-cart .price > del,
body.lubiwood-product-page .wd-sticky-btn .wd-sticky-btn-cart .price > ins {
	display: none !important;
}

/* Hide the compare/action icon that hangs off the CTA in the sticky bar. */
body.lubiwood-product-page .wd-sticky-btn .wd-sticky-btn-cart .wd-action-btn {
	display: none !important;
}

body.lubiwood-product-page .wd-sticky-add-to-cart {
	flex-shrink: 0;
	white-space: nowrap;
}

@media (max-width: 767px) {
	body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active .woocommerce-variation-add-to-cart {
		gap: 8px;
	}

	body.lubiwood-product-page .product-image-summary .variations_form.lubiwood-chooser-active button.single_add_to_cart_button {
		font-size: 14px;
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ────────────────────────────────────────────────────────────────────────────
   REVIEWS — Trustpilot-style summary card + modern review cards.
   Scoped to single product pages; only restyles existing markup (no template
   overrides). Works with both WoodMart's built-in summary (.wd-rating-summary)
   and CusRev's optional summary (.cr-summaryBox-wrap), and with CusRev's
   per-review modern template (.cr-comment-text / .crstar-rating-svg).
   ──────────────────────────────────────────────────────────────────────────── */

/* Shared tokens (scoped — same values brand-green elsewhere in the file). */
body.lubiwood-product-page #reviews {
	--lwd-green-strong: var(--lwd-green-dark);
	--lwd-card-bg: #fff;
	--lwd-card-brd: var(--lwd-brd);
	--lwd-card-shadow: var(--lwd-shadow);
	--lwd-text-strong: var(--lwd-text);
	--lwd-text-muted: var(--color-gray-500, #6b726e);
}

/* ── Section layout: stack summary → heading → cards (full width) ────────────
 * WoodMart's `.wd-layout-two-column` puts the summary and #comments side-by-side
 * at ~50% each, which crushes our 3-col card grid into unreadable slivers. */
body.lubiwood-product-page .wd-single-reviews.wd-layout-two-column .woocommerce-Reviews,
body.lubiwood-product-page #reviews.woocommerce-Reviews {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	row-gap: 0;
	margin-inline: 0;
}

body.lubiwood-product-page .wd-single-reviews.wd-layout-two-column .woocommerce-Reviews > :is(div, p),
body.lubiwood-product-page #reviews.woocommerce-Reviews > :is(div, p) {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	padding-inline: 0;
	order: unset;
}

body.lubiwood-product-page #reviews .wd-rating-summary-wrap {
	order: 1;
	margin-bottom: 28px;
}

body.lubiwood-product-page #reviews #comments {
	order: 2;
	width: 100%;
}

body.lubiwood-product-page #reviews #review_form_wrapper {
	order: 3;
	width: 100%;
	margin-top: 32px;
}

body.lubiwood-product-page #reviews .wd-reviews-content {
	width: 100%;
}

/* Re-skin all WoodMart icon-font stars inside the reviews tab to brand green.
   Used by the WoodMart summary block (.wd-rating-summary). */
body.lubiwood-product-page #reviews .star-rating {
	color: var(--lwd-green);
	letter-spacing: 3px;
}

body.lubiwood-product-page #reviews .star-rating:before {
	color: color-mix(in srgb, var(--lwd-green) 18%, #e8ece9);
}

/* ── Heading row ───────────────────────────────────────────────────────────── */
body.lubiwood-product-page #reviews h2.woocommerce-Reviews-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lwd-text-strong);
	margin: 0;
}

body.lubiwood-product-page #reviews h2.woocommerce-Reviews-title span {
	color: inherit;
	font-weight: inherit;
}

body.lubiwood-product-page #reviews .wd-reviews-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--lwd-card-brd);
}

body.lubiwood-product-page #reviews .wd-reviews-tools {
	flex: 1 1 auto;
	min-width: 0;
}

body.lubiwood-product-page #reviews .wd-reviews-filters {
	flex: 0 0 auto;
	margin: 0;
}

body.lubiwood-product-page #reviews .wd-reviews-sorting-select {
	min-height: 40px;
	padding: 6px 36px 6px 16px;
	border: 1px solid var(--lwd-card-brd);
	border-radius: 999px;
	background-color: #fff;
	font-size: 14px;
	font-weight: 500;
	color: var(--lwd-text-strong);
	box-shadow: none;
}

body.lubiwood-product-page #reviews .wd-reviews-sorting-clear {
	font-size: 14px;
	color: var(--lwd-green);
}

/* ── Summary card (WoodMart Rating_Summary block) ──────────────────────────── */
body.lubiwood-product-page #reviews .wd-rating-summary-wrap {
	margin-bottom: 0;
}

body.lubiwood-product-page #reviews .wd-rating-summary {
	display: grid;
	grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 32px;
	row-gap: 20px;
	padding: 28px 32px;
	background: var(--lwd-card-bg);
	border: 1px solid var(--lwd-card-brd);
	border-radius: var(--lwd-radius);
	box-shadow: var(--lwd-card-shadow);
}

body.lubiwood-product-page #reviews .wd-rating-summary-heading {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-inline-end: 24px;
	border-inline-end: 1px solid var(--lwd-card-brd);
}

body.lubiwood-product-page #reviews .wd-rating-summary-main {
	font-size: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--lwd-text-strong);
	margin: 0;
}

body.lubiwood-product-page #reviews .wd-rating-summary-heading .star-rating {
	font-size: 18px;
}

body.lubiwood-product-page #reviews .wd-rating-summary-total {
	font-size: 13px;
	font-weight: 500;
	color: var(--lwd-text-muted);
}

/* Histogram column */
body.lubiwood-product-page #reviews .wd-rating-summary-cont {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	border-spacing: 0;
	max-width: 480px;
	width: 100%;
	justify-self: center;
}

body.lubiwood-product-page #reviews .wd-rating-summary-item {
	display: grid;
	grid-template-columns: minmax(64px, auto) 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 4px 0;
	white-space: nowrap;
	transition: opacity .2s ease;
}

body.lubiwood-product-page #reviews .wd-rating-summary-item > div {
	display: block;
	padding: 0;
}

body.lubiwood-product-page #reviews .wd-rating-summary-item .wd-rating-label .star-rating {
	font-size: 14px;
}

body.lubiwood-product-page #reviews .wd-rating-summary-item .wd-rating-progress-bar,
body.lubiwood-product-page #reviews .wd-rating-summary-item .wd-progress-bar {
	width: 100%;
	margin: 0;
}

body.lubiwood-product-page #reviews .wd-rating-summary-item .progress-area {
	height: 10px;
	background: color-mix(in srgb, var(--lwd-green) 6%, #eef2ef);
	border-radius: 999px;
	overflow: hidden;
}

body.lubiwood-product-page #reviews .wd-rating-summary-item .progress-bar {
	height: 100%;
	background: var(--lwd-green);
	border-radius: 999px;
	transition: width .4s ease;
}

body.lubiwood-product-page #reviews .wd-rating-summary-item .wd-rating-count {
	min-width: 32px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--lwd-text-muted);
	text-align: end;
}

body.lubiwood-product-page #reviews .wd-rating-summary-item.wd-empty {
	opacity: .55;
}

/* Clickable filter rows: hover/active emphasis in brand green. */
body.lubiwood-product-page #reviews .wd-rating-summary.wd-with-filter .wd-rating-summary-item:not(.wd-empty):hover .progress-area,
body.lubiwood-product-page #reviews .wd-rating-summary.wd-with-filter .wd-rating-summary-item:not(.wd-empty).wd-active .progress-area {
	background: color-mix(in srgb, var(--lwd-green) 14%, #eef2ef);
}

body.lubiwood-product-page #reviews .wd-rating-summary.wd-with-filter .wd-rating-summary-item:not(.wd-empty).wd-active .wd-rating-count {
	color: var(--lwd-text-strong);
}

/* "Add a review" CTA injected via woodmart_after_rating_summary_content hook. */
body.lubiwood-product-page #reviews .lubiwood-reviews-add-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	background: var(--lwd-green);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--lwd-green) 30%, transparent);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
	white-space: nowrap;
}

body.lubiwood-product-page #reviews .lubiwood-reviews-add-cta:hover,
body.lubiwood-product-page #reviews .lubiwood-reviews-add-cta:focus-visible {
	background: var(--lwd-green-strong);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--lwd-green) 38%, transparent);
	outline: none;
}

@media (max-width: 900px) {
	body.lubiwood-product-page #reviews .wd-rating-summary {
		grid-template-columns: 1fr;
		row-gap: 16px;
		padding: 24px;
	}

	body.lubiwood-product-page #reviews .wd-rating-summary-heading {
		flex-direction: row;
		align-items: baseline;
		gap: 14px;
		padding-inline-end: 0;
		padding-bottom: 16px;
		border-inline-end: 0;
		border-bottom: 1px solid var(--lwd-card-brd);
	}

	body.lubiwood-product-page #reviews .lubiwood-reviews-add-cta {
		width: 100%;
	}
}

/* ── Fallback: CusRev's own summary block (when ivole_reviews_histogram=yes). */
body.lubiwood-product-page #reviews .cr-summaryBox-wrap {
	margin: 0 0 32px;
	padding: 28px 32px;
	background: var(--lwd-card-bg);
	border: 1px solid var(--lwd-card-brd);
	border-radius: var(--lwd-radius);
	box-shadow: var(--lwd-card-shadow);
	display: flex;
	gap: 32px;
	align-items: center;
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .cr-overall-rating-wrap {
	background: transparent;
	border: 0;
	padding: 0;
	flex: 0 0 auto;
	width: auto;
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .cr-average-rating {
	font-size: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--lwd-text-strong);
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .cr-total-rating-count {
	font-size: 13px;
	color: var(--lwd-text-muted);
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .ivole-summaryBox {
	flex: 1 1 auto;
	background: transparent;
	border: 0;
	padding: 0;
	width: auto;
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .ivole-meter {
	background: color-mix(in srgb, var(--lwd-green) 6%, #eef2ef);
	box-shadow: none;
	height: 10px;
	border-radius: 999px;
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .ivole-meter .ivole-meter-bar {
	background: var(--lwd-green);
	box-shadow: none;
	border-radius: 999px;
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .ivole-meter .ivole-meter-bar:before {
	display: none;
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .cr-ajax-reviews-add-review {
	min-height: 48px;
	padding: 12px 28px;
	background: var(--lwd-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--lwd-green) 30%, transparent);
	cursor: pointer;
}

body.lubiwood-product-page #reviews .cr-summaryBox-wrap .cr-ajax-reviews-add-review:hover,
body.lubiwood-product-page #reviews .cr-summaryBox-wrap .cr-ajax-reviews-add-review:focus-visible {
	background: var(--lwd-green-strong);
	outline: none;
}

/* ── Trustpilot-style green square stars (CusRev SVG stars in review cards) ── */
body.lubiwood-product-page #reviews .crstar-rating-svg {
	display: inline-block;
	line-height: 1;
	margin: 0;
}

body.lubiwood-product-page #reviews .crstar-rating-svg .cr-rating-icon-base,
body.lubiwood-product-page #reviews .crstar-rating-svg .cr-rating-icon-frnt {
	height: 18px;
	column-gap: 2px;
}

body.lubiwood-product-page #reviews .crstar-rating-svg .cr-rating-icon-base .cr-rating-icon-bg,
body.lubiwood-product-page #reviews .crstar-rating-svg .cr-rating-icon-frnt .cr-rating-icon {
	width: 18px;
	height: 18px;
	padding: 2px;
	border-radius: 2px;
}

body.lubiwood-product-page #reviews .crstar-rating-svg .cr-rating-icon-base .cr-rating-icon-bg {
	background: color-mix(in srgb, var(--lwd-green) 8%, #d8ddd9);
	fill: #fff;
	stroke: #fff;
	stroke-width: 0;
}

body.lubiwood-product-page #reviews .crstar-rating-svg .cr-rating-icon-frnt .cr-rating-icon {
	background: var(--lwd-green);
	fill: #fff;
}

/* Numeric "5/5" badge sometimes shown next to the star row — we don't render it
   server-side, but if a child theme adds it we make sure it lines up nicely. */
body.lubiwood-product-page #reviews .crstar-rating-svg + .lubiwood-rating-score {
	margin-inline-start: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lwd-text-muted);
}

/* ── Review cards wall (li.comment) — masonry via CSS columns ────────────────
 * A CSS *grid* row is only as short as its tallest card, so a one-line review
 * next to a long one leaves a big vertical void below it (ragged, gappy look).
 * Flow the cards through CSS multi-columns instead: each card takes its natural
 * height and the next card packs directly beneath it, closing the gaps — the
 * standard "review wall" masonry. `column-width` keeps it responsive (≈3 cols on
 * desktop, 1 on mobile) the same way the old auto-fill grid did. Trade-off:
 * cards read top-to-bottom within a column rather than left-to-right by row. */
body.lubiwood-product-page #reviews .commentlist,
body.lubiwood-product-page #reviews .commentlist.wd-grid-g {
	display: block !important;
	column-width: 320px;
	column-gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	clip-path: none !important;
}

/* Progressive "Load more reviews": product-page.js hides the cards past the first
 * batch (reviewsVisibleCount = 6) by adding this class, and reveals the next batch
 * on each click. Scoped to `> li` so nested review replies (.children > li) are
 * never hidden. All direct li children of .commentlist are review cards, which the
 * JS counts by class (:scope > li.comment, :scope > li.review). */
body.lubiwood-product-page #reviews .commentlist > li.lubiwood-review-hidden {
	display: none !important;
}

/* "Load more reviews" button — flow-positioned below the review wall and
 * visible on every breakpoint (a long review list needs the control on mobile
 * too). Injected by product-page.js;
 * each click reveals the next batch of reviews. */
body.lubiwood-product-page .lubiwood-reviews-load-more {
	display: block;
	margin: 8px auto 0;
	padding: 12px 32px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #fff;
	background: #7ab38b; /* page's primary button green, matches gallery pill */
	border: 0;
	border-radius: 100px;
	box-shadow: 0 6px 18px rgba(48, 107, 58, 0.28);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body.lubiwood-product-page .lubiwood-reviews-load-more:hover {
	background: #6aa67c;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(48, 107, 58, 0.36);
}

body.lubiwood-product-page .lubiwood-reviews-load-more:focus-visible {
	outline: 2px solid #2f6b3a;
	outline-offset: 2px;
}

body.lubiwood-product-page #reviews .commentlist.wd-review-style-1 {
	margin-block: 0 !important;
}

body.lubiwood-product-page #reviews .commentlist > li.comment,
body.lubiwood-product-page #reviews .commentlist > li.review {
	/* Card spacing: column-gap handles the horizontal gutter; margin-bottom is
	   the vertical gutter between stacked cards. Keep both at 20px. */
	margin: 0 0 20px !important;
	padding: 18px 20px !important;
	background: var(--lwd-card-bg);
	border: 1px solid var(--lwd-card-brd) !important;
	border-radius: var(--lwd-radius);
	box-shadow: var(--lwd-card-shadow);
	transition: box-shadow .2s ease, border-color .2s ease;
	overflow: hidden;
	/* Keep a card whole — never let a column break split one across columns. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	/* `block` (not flex) is the most reliable column item; the inner
	   `.comment_container` / `.comment-text` keep their own flex-column +
	   `order` so meta→stars→body→media→votes stay in sequence. With natural
	   card height the footer's margin-top:auto simply collapses to 0. */
	display: block;
	height: auto;
}

body.lubiwood-product-page #reviews .commentlist > li.comment:hover,
body.lubiwood-product-page #reviews .commentlist > li.review:hover {
	box-shadow: 0 2px 4px rgba(15, 23, 18, 0.05), 0 8px 20px rgba(15, 23, 18, 0.07);
	border-color: color-mix(in srgb, var(--lwd-green) 25%, var(--lwd-card-brd));
}

body.lubiwood-product-page #reviews .commentlist > li.woocommerce-noreviews {
	grid-column: 1 / -1;
	column-span: all;
	padding: 24px !important;
	background: var(--bgcolor-gray-100, #fafcfb) !important;
	border-style: dashed !important;
	box-shadow: none;
	text-align: center;
	color: var(--lwd-text-muted);
}

/* Card interior — single column (no side avatar eating width). */
body.lubiwood-product-page #reviews .commentlist .comment_container {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	position: relative;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	flex: 1 1 auto;
	min-height: 0;
}

/* Hide letter avatars in the grid — initials circle is nice but costs ~70px
   of horizontal space we can't spare even at 2 cols. Verified pill covers trust. */
body.lubiwood-product-page #reviews .commentlist .comment_container > .avatar,
body.lubiwood-product-page #reviews .commentlist .comment_container > .cr-std-avatar {
	display: none !important;
}

body.lubiwood-product-page #reviews .commentlist .comment_container .cr-avatar-check {
	display: none;
}

/* The two CusRev review templates have slightly different inner wrappers —
   .cr-comment-text (modern) and .comment-text (compat). Reset both. */
body.lubiwood-product-page #reviews .commentlist .cr-comment-text,
body.lubiwood-product-page #reviews .commentlist .comment-text {
	display: flex;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-width: 0;
	width: 100%;
	flex: 1 1 auto;
	align-items: stretch;
}

/* WoodMart `.wd-review-style-1 .comment-text` switches to row+wrap ≥769px, which
   scrambles card order (votes/meta/text jump around) after interaction. */
body.lubiwood-product-page #reviews .commentlist.wd-review-style-1 .comment-text,
body.lubiwood-product-page #reviews .commentlist.wd-review-style-1 .cr-comment-text {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

/* Consistent block order: name/date → stars → body → media → votes */
body.lubiwood-product-page #reviews .commentlist .comment-text > .meta,
body.lubiwood-product-page #reviews .commentlist .cr-comment-text > .meta,
body.lubiwood-product-page #reviews .commentlist .cr-comment-text > p.meta,
body.lubiwood-product-page #reviews .commentlist .comment-text > p.meta {
	order: 1;
}

body.lubiwood-product-page #reviews .commentlist .comment-text > .star-rating,
body.lubiwood-product-page #reviews .commentlist .cr-comment-text > .crstar-rating-svg,
body.lubiwood-product-page #reviews .commentlist .comment-text > .crstar-rating-svg {
	order: 2;
}

body.lubiwood-product-page #reviews .commentlist .comment-text .description,
body.lubiwood-product-page #reviews .commentlist .cr-comment-text .description {
	order: 3;
	flex: 1 1 auto;
}

body.lubiwood-product-page #reviews .commentlist .cr-comment-images,
body.lubiwood-product-page #reviews .commentlist .cr-comment-videos {
	order: 4;
}

/* CusRev voting row — always pinned to the card footer. */
body.lubiwood-product-page #reviews .commentlist .cr-voting-cont,
body.lubiwood-product-page #reviews .commentlist .cr-voting-cont-uni {
	order: 5;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	width: 100%;
	margin-top: auto !important;
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--lwd-card-brd) 80%, transparent);
}

/* CusRev defaults each child span to display:block — keep thumbs inline. */
body.lubiwood-product-page #reviews .commentlist .cr-voting-cont-uni > span {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	line-height: 1 !important;
	font-size: 13px;
	margin: 0 !important;
}

body.lubiwood-product-page #reviews .commentlist .cr-voting-cont-uni svg {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	flex-shrink: 0;
}

body.lubiwood-product-page #reviews .commentlist .cr-voting-cont-uni .cr-voting-upvote-count {
	color: var(--lwd-green);
	margin-right: 0 !important;
}

body.lubiwood-product-page #reviews .commentlist .cr-voting-cont-uni .cr-voting-downvote-count {
	color: #c44;
}

/* WoodMart like/dislike row — pinned to the card footer. */
body.lubiwood-product-page #reviews .commentlist .comment-text > .wd-review-likes,
body.lubiwood-product-page #reviews .commentlist .cr-comment-text > .wd-review-likes {
	order: 6;
	margin-top: auto;
}

/*
 * WoodMart's vote AJAX runs `$('.wd-like span').text(count)`, which writes the
 * number into BOTH spans of the button — the text label AND the icon span — so a
 * stray digit appears next to the thumb ("1 1"). The icon glyph lives in the
 * ::before pseudo, so zero out the span's own text while keeping the icon sized.
 */
body.lubiwood-product-page #reviews .wd-review-likes .wd-action-icon {
	font-size: 0 !important;
}

body.lubiwood-product-page #reviews .wd-review-likes .wd-action-icon::before {
	font-size: 18px !important;
	line-height: 1 !important;
}

/* Meta row: author + date sit on a baseline; verified label tucks under name. */
body.lubiwood-product-page #reviews .commentlist .cr-comment-text > .meta,
body.lubiwood-product-page #reviews .commentlist .comment-text > .meta,
body.lubiwood-product-page #reviews .commentlist .cr-comment-text > p.meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	color: var(--lwd-text-muted);
	flex-wrap: wrap;
}

body.lubiwood-product-page #reviews .commentlist .cr-meta-author-featured-date {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 12px;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

body.lubiwood-product-page #reviews .commentlist .cr-meta-author-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

body.lubiwood-product-page #reviews .commentlist .cr-meta-author-title > div {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

body.lubiwood-product-page #reviews .commentlist .woocommerce-review__author,
body.lubiwood-product-page #reviews .commentlist .comment-text .meta strong[itemprop="author"] {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--lwd-text-strong);
	display: inline;
}

body.lubiwood-product-page #reviews .commentlist .woocommerce-review__verified {
	display: none;
}

/* Compat template (review-compat.php): hide the trailing colon on meta line. */
body.lubiwood-product-page #reviews .commentlist .comment-text > .meta {
	display: block;
}

body.lubiwood-product-page #reviews .commentlist .comment-text .meta .woocommerce-review__dash,
body.lubiwood-product-page #reviews .commentlist .comment-text .meta .verified {
	display: none;
}

body.lubiwood-product-page #reviews .commentlist .comment-text .meta time {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--lwd-text-muted);
}

/* Reviewer country flag is intentionally hidden site-wide by the
   lubiwood-hide-review-country-tag mu-plugin (noise for our audience). No inline
   flag styling here — see that plugin for the display:none rule. */

/* Date stays on the right of the meta row in the legacy compat template. In
   the modern template, the date is rendered inside its own <time> right of
   .cr-meta-author-featured-date — keep it muted and right-aligned. */
body.lubiwood-product-page #reviews .commentlist .woocommerce-review__published-date,
body.lubiwood-product-page #reviews .commentlist .comment-text .meta time {
	font-size: 13px;
	font-weight: 500;
	color: var(--lwd-text-muted);
	font-style: normal;
	white-space: nowrap;
	flex: 0 0 auto;
}

body.lubiwood-product-page #reviews .commentlist .comment-text > .star-rating {
	font-size: 14px;
	letter-spacing: 2px;
	margin: 0;
}

/* WoodMart style-1 list tweaks — neutralise theme defaults inside our cards. */
body.lubiwood-product-page #reviews .commentlist.wd-review-style-1 .comment_container {
	padding: 0;
	align-items: stretch;
}

body.lubiwood-product-page #reviews .commentlist .meta {
	margin: 0;
	width: 100%;
}

body.lubiwood-product-page #reviews .commentlist .cr-comment-text p,
body.lubiwood-product-page #reviews .commentlist .comment-text p,
body.lubiwood-product-page #reviews .commentlist .description p {
	margin: 0;
	color: var(--color-gray-700, #3a3f3c);
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
	word-break: normal;
	overflow-wrap: anywhere;
	hyphens: auto;
}

body.lubiwood-product-page #reviews .commentlist .cr-comment-text .description {
	margin: 0;
}

/* Review images — prominent customer photos (larger than default CusRev thumbs). */
body.lubiwood-product-page #reviews .commentlist .cr-comment-images,
body.lubiwood-product-page #reviews .commentlist .cr-comment-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin: 10px 0 0;
	width: 100%;
}

body.lubiwood-product-page #reviews .commentlist .iv-comment-image,
body.lubiwood-product-page #reviews .commentlist .cr-comment-video {
	float: none !important;
	margin: 0 !important;
	border-radius: var(--lwd-radius-sm);
	overflow: hidden;
	border: 1px solid var(--lwd-card-brd);
	aspect-ratio: 1;
	position: relative;
	background: color-mix(in srgb, var(--lwd-green) 4%, #f4f6f5);
}

body.lubiwood-product-page #reviews .commentlist .iv-comment-image a,
body.lubiwood-product-page #reviews .commentlist .iv-comment-image .cr-comment-a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

body.lubiwood-product-page #reviews .commentlist .cr-comment-images img,
body.lubiwood-product-page #reviews .commentlist .iv-comment-image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-height: 96px;
	border-radius: 0;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}

body.lubiwood-product-page #reviews .commentlist .iv-comment-image:hover img {
	transform: scale(1.03);
}

/* One photo — span the card width with a taller crop. */
body.lubiwood-product-page #reviews .commentlist .cr-comment-images:has(.iv-comment-image:only-child) {
	grid-template-columns: 1fr;
}

body.lubiwood-product-page #reviews .commentlist .cr-comment-images:has(.iv-comment-image:only-child) .iv-comment-image {
	aspect-ratio: 4 / 3;
	max-height: 240px;
}

body.lubiwood-product-page #reviews .commentlist .cr-comment-images:has(.iv-comment-image:only-child) img {
	min-height: 180px;
}

/* Two photos — equal halves, still roomy. */
body.lubiwood-product-page #reviews .commentlist .cr-comment-images:has(.iv-comment-image:nth-child(2):last-child) {
	grid-template-columns: 1fr 1fr;
}

body.lubiwood-product-page #reviews .commentlist .cr-comment-images:has(.iv-comment-image:nth-child(2):last-child) .iv-comment-image {
	min-height: 120px;
}

/* Review videos — match image tile size. */
body.lubiwood-product-page #reviews .commentlist .cr-comment-video .cr-video-cont,
body.lubiwood-product-page #reviews .commentlist .cr-comment-video video.cr-video-a {
	width: 100% !important;
	height: 100% !important;
	min-height: 96px;
	object-fit: cover;
}

/* Featured review badge (CusRev cr-all-featured-badge) — pill, brand green. */
body.lubiwood-product-page #reviews .commentlist .cr-all-featured-badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 3px 10px;
	background: var(--lwd-green-soft);
	color: var(--lwd-green-strong);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-radius: 999px;
}

body.lubiwood-product-page #reviews .commentlist .cr-all-featured-badge span {
	color: inherit;
}

/* Replies (.children li) — slightly inset, no double card. */
body.lubiwood-product-page #reviews .commentlist .children {
	margin: 12px 0 0;
	padding-inline-start: 16px;
	border-inline-start: 2px solid var(--lwd-green-line);
	list-style: none;
}

body.lubiwood-product-page #reviews .commentlist .children > li.comment {
	margin: 8px 0 0 !important;
	padding: 14px 16px !important;
	background: color-mix(in srgb, var(--lwd-green) 4%, #f8faf9);
	box-shadow: none;
}

/* ── Add-a-review form ─────────────────────────────────────────────────────── */
body.lubiwood-product-page #reviews #review_form_wrapper {
	margin-top: 40px;
	padding: 28px 32px;
	background: var(--lwd-card-bg);
	border: 1px solid var(--lwd-card-brd);
	border-radius: var(--lwd-radius);
	box-shadow: var(--lwd-card-shadow);
	scroll-margin-top: 100px;
}

body.lubiwood-product-page #reviews #review_form_wrapper #reply-title,
body.lubiwood-product-page #reviews #review_form_wrapper .comment-reply-title {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--lwd-text-strong);
	margin: 0 0 16px;
}

body.lubiwood-product-page #reviews .comment-form .comment-form-rating label,
body.lubiwood-product-page #reviews .comment-form .comment-form-comment label,
body.lubiwood-product-page #reviews .comment-form .comment-form-author label,
body.lubiwood-product-page #reviews .comment-form .comment-form-email label {
	font-size: 13px;
	font-weight: 600;
	color: var(--lwd-text-strong);
	margin-bottom: 6px;
}

body.lubiwood-product-page #reviews .comment-form input[type="text"],
body.lubiwood-product-page #reviews .comment-form input[type="email"],
body.lubiwood-product-page #reviews .comment-form textarea {
	border-radius: var(--lwd-radius-sm);
	border: 1px solid var(--lwd-card-brd);
	background: #fff;
	padding: 10px 14px;
	font-size: 15px;
	color: var(--lwd-text-strong);
	box-shadow: none;
}

body.lubiwood-product-page #reviews .comment-form input[type="text"]:focus,
body.lubiwood-product-page #reviews .comment-form input[type="email"]:focus,
body.lubiwood-product-page #reviews .comment-form textarea:focus {
	border-color: var(--lwd-green);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lwd-green) 18%, transparent);
	outline: none;
}

body.lubiwood-product-page #reviews .comment-form .form-submit input[type="submit"],
body.lubiwood-product-page #reviews .comment-form button[type="submit"],
body.lubiwood-product-page #reviews .comment-form .submit {
	min-height: 48px;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 600;
	background: var(--lwd-green);
	border: 0;
	color: #fff;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--lwd-green) 30%, transparent);
}

body.lubiwood-product-page #reviews .comment-form .form-submit input[type="submit"]:hover,
body.lubiwood-product-page #reviews .comment-form button[type="submit"]:hover {
	background: var(--lwd-green-strong);
}

/* ────────────────────────────────────────────────────────────────────────────
   FAQ — light card block matching reviews / product-page tokens.
   Elementor accordion in the product description layout (one per template).
   ──────────────────────────────────────────────────────────────────────────── */

body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) > .elementor-widget-wrap {
	--lwd-faq-green: var(--lwd-green);
	--lwd-faq-green-soft: var(--lwd-green-soft);
	--lwd-faq-brd: var(--lwd-brd);
	--lwd-faq-shadow: var(--lwd-shadow);
	--lwd-faq-title: var(--lwd-text);
	--lwd-faq-body: var(--lwd-text-muted);
	--lwd-faq-muted: var(--color-gray-500, #6b726e);
	margin-top: 16px;
	padding: clamp(22px, 3vw, 32px);
	border: 1px solid var(--lwd-faq-brd);
	border-radius: var(--lwd-radius);
	background: #fff;
	box-shadow: var(--lwd-faq-shadow);
}

body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) > .elementor-widget-wrap > .elementor-widget {
	margin-block-end: 0;
}

/* Stack: eyebrow → title → accordion (natural DOM order) */
body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) .elementor-widget-heading:has(h6) {
	margin-bottom: 8px;
}

body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) .elementor-widget-heading:has(h2) {
	margin-bottom: 20px;
}

body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) .elementor-widget-heading h6 {
	margin: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lwd-faq-green) !important;
}

body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) .elementor-widget-heading h2 {
	margin: 0;
	font-family: inherit;
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--lwd-faq-title) !important;
}

body.lubiwood-product-page .elementor-widget-accordion {
	margin: 0;
}

/* Clean divided list — no stacked box borders from Elementor defaults */
body.lubiwood-product-page .elementor-widget-accordion .elementor-accordion {
	border: 1px solid var(--lwd-faq-brd);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-accordion-item {
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-accordion-item + .elementor-accordion-item {
	border-block-start: 1px solid var(--lwd-faq-brd);
}

/* Elementor writes the template's own per-element CSS as
   `.elementor-38057 .elementor-element.elementor-element-61ed6d3f .elementor-tab-*`
   (four classes), which out-specifies everything below and pins the rows to 15px
   padding with a 0 bottom on the answer panel — the answer text ends up flush against
   the divider. Spacing and size are the whole point of this restyle, so force them. */
body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-title {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--lwd-faq-title) !important;
	background: #fff;
	transition: background 0.15s ease;
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-title:hover {
	background: var(--bgcolor-gray-100, #fafcfb);
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-title.elementor-active {
	color: var(--lwd-faq-title) !important;
	background: var(--lwd-faq-green-soft);
	box-shadow: inset 3px 0 0 var(--lwd-faq-green);
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
	color: var(--lwd-faq-title) !important;
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-accordion-title {
	flex: 1 1 auto;
	min-width: 0;
	order: 1;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
	color: inherit !important;
}

/* Chevron icons — theme green, readable on white */
body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon {
	float: none;
	flex: 0 0 auto;
	order: 2;
	margin-inline-start: auto;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--lwd-faq-muted);
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
	color: var(--lwd-faq-green);
}

/* Answer panel */
body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content {
	border-block-start: 1px solid color-mix(in srgb, var(--lwd-faq-brd) 80%, transparent);
	padding: 12px 18px 16px !important;
	font-size: 16px !important;
	font-weight: 500;
	line-height: 1.6;
	color: var(--lwd-faq-body) !important;
	background: #fff;
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content p,
body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content li {
	margin: 0 0 6px !important;
	font-size: inherit;
	font-weight: 500;
	line-height: inherit;
	color: var(--lwd-faq-body) !important;
}

body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content p:last-child {
	margin-bottom: 0 !important;
}

/* Collapse the empty <p><br></p> Elementor inserts between paragraphs */
body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content p:empty,
body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content p:has(> br:only-child) {
	display: none !important;
	margin: 0 !important;
}

/* ── WoodMart wd_accordion widget (same visual treatment, different markup) ──
   Some product templates use WoodMart's own wd_accordion Elementor widget
   instead of the native Elementor accordion. Classes: .wd-accordion / .wd-active
   ──────────────────────────────────────────────────────────────────────────── */

body.lubiwood-product-page .elementor-widget-wd_accordion {
	--lwd-faq-green: var(--lwd-green);
	--lwd-faq-green-soft: var(--lwd-green-soft);
	--lwd-faq-brd: var(--lwd-brd);
	--lwd-faq-title: var(--lwd-text);
	--lwd-faq-body: var(--lwd-text-muted);
	--lwd-faq-muted: var(--color-gray-500, #6b726e);
}

body.lubiwood-product-page .e-con:has(.elementor-widget-wd_accordion) .elementor-widget-wd_title h4.woodmart-title-container {
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem) !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: var(--lwd-faq-title) !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion {
	border: 1px solid var(--lwd-faq-brd) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: #fff !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-item {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: #fff !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-item + .wd-accordion-item {
	border-top: 1px solid var(--lwd-faq-brd) !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-title {
	padding: 18px 20px !important;
	background: #fff !important;
	transition: background 0.15s ease !important;
	border: 0 !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-title:hover {
	background: var(--bgcolor-gray-100, #f7faf8) !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-title.wd-active {
	background: var(--lwd-faq-green-soft) !important;
	box-shadow: inset 4px 0 0 var(--lwd-faq-green) !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-title-text {
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: var(--lwd-faq-title) !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content {
	padding: 6px 20px 20px !important;
	border-top: 1px solid var(--lwd-faq-brd) !important;
	background: #fff !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content p,
body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content li {
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	color: var(--lwd-faq-body) !important;
	margin: 0 0 6px !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content p:last-child {
	margin-bottom: 0 !important;
}

body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content p:empty,
body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content p:has(> br:only-child) {
	display: none !important;
}

@media (max-width: 767px) {
	body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) > .elementor-widget-wrap {
		padding: 20px 20px;
	}

	body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) .elementor-widget-heading {
		padding-inline: 4px;
	}

	body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) .elementor-widget-heading:has(h2) {
		margin-bottom: 14px;
	}

	body.lubiwood-product-page .elementor-column:has(.elementor-widget-accordion) .elementor-widget-heading h2 {
		font-size: 1.125rem;
		line-height: 1.25;
	}

	/* Breathing room on phones: break the dense divided list into separated,
	   rounded cards with a gap between them instead of hairline-only dividers. */
	body.lubiwood-product-page .elementor-widget-accordion .elementor-accordion {
		border: 0;
		border-radius: 0;
		overflow: visible;
		background: transparent;
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	body.lubiwood-product-page .elementor-widget-accordion .elementor-accordion-item {
		border: 1px solid var(--lwd-faq-brd);
		border-radius: 12px;
		overflow: hidden;
	}

	/* Each item is its own card now — drop the inter-item divider. */
	body.lubiwood-product-page .elementor-widget-accordion .elementor-accordion-item + .elementor-accordion-item {
		border-block-start: 1px solid var(--lwd-faq-brd);
	}

	/* Questions stay bold and title-sized on mobile, with roomier tap targets */
	body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-title {
		padding: 24px 22px !important;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
	}

	body.lubiwood-product-page .elementor-widget-accordion .elementor-accordion-title {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
	}

	/* Answers: comfortable padding on mobile */
	body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content {
		padding: 18px 22px 22px !important;
		font-size: 15px !important;
		font-weight: 500;
		line-height: 1.6;
		color: var(--lwd-faq-body) !important;
	}

	body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content p,
	body.lubiwood-product-page .elementor-widget-accordion .elementor-tab-content li {
		margin-bottom: 6px !important;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.6;
		color: var(--lwd-faq-body) !important;
	}

	/* WoodMart accordion variant: same spaced-card treatment on phones */
	body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion {
		border: 0 !important;
		border-radius: 0 !important;
		overflow: visible !important;
		background: transparent !important;
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-item {
		border: 1px solid var(--lwd-faq-brd) !important;
		border-radius: 12px !important;
		overflow: hidden !important;
	}

	body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-title {
		padding: 24px 22px !important;
	}

	body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-title-text {
		font-size: 16px !important;
		font-weight: 700 !important;
	}

	body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content {
		padding: 14px 22px 22px !important;
	}

	body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content p,
	body.lubiwood-product-page .elementor-widget-wd_accordion .wd-accordion-content li {
		font-size: 15px !important;
		font-weight: 500 !important;
	}
}

/* ─── Single-size / Bundle info card (simple products) ───────────────────── */
/* The buy box on one-size product pages is centered, so center the card box too
   (margin: auto) instead of pinning it to the left edge of the summary. */
.lubiwood-info-card {
	max-width: 360px;
	margin: 0 auto 18px;
	padding: 14px 16px;
	border: 2px solid rgba(122, 179, 139, 0.45);
	border-radius: 12px;
	background: #f4faf6;
}

.lubiwood-info-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

/* Price-only cards (single-size book nooks with no piece-count label) have just
   the price in the head; space-between would shove it to the left edge, so center
   it within the card to match the centered buy box. */
.lubiwood-info-card__head:has(> .lubiwood-info-card__price:only-child) {
	justify-content: center;
}

.lubiwood-info-card__label {
	font-weight: 700;
	font-size: 16px;
	color: #222;
}

/* Single-size products put the piece count in this label (e.g. "159 PIECES"),
   so uppercase it + hold it at 1rem to match the multi-size size swatches.
   Bundle cards reuse __label for the product NAME, so this is scoped to
   --single only (never uppercase a proper name like "Oceanic Bundle"). */
.lubiwood-info-card--single .lubiwood-info-card__label {
	font-size: 1rem;
	text-transform: uppercase;
}

.lubiwood-info-card__price {
	font-weight: 700;
	color: #222;
	white-space: nowrap;
}

.lubiwood-info-card__price .price,
.lubiwood-info-card__price ins,
.lubiwood-info-card__price .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.lubiwood-info-card__price del {
	margin-right: 6px;
	font-weight: 500;
	opacity: 0.5;
}

.lubiwood-info-card__detail {
	margin-top: 6px;
	font-size: 13px;
	color: #5a5a5a;
}

/* Single-size products: center the price + finished-size (these one-card products
   read better centered than the label-left / price-right split). */
.lubiwood-info-card--single .lubiwood-info-card__head {
	justify-content: center;
}

.lubiwood-info-card--single .lubiwood-info-card__meta {
	display: flex;
	justify-content: center;
}

/* One-size products have only this single card (no S/M/L row), so give it more
   presence than a card in the multi-size grid: wider, roomier, larger price —
   on par with the swatch cards' price (swatch-prices.css ~1.3–1.56rem). */
.lubiwood-info-card--single {
	max-width: 400px;
	padding: 16px 20px;
}

.lubiwood-info-card--single .lubiwood-info-card__price {
	font-size: 21px;
}

.lubiwood-info-card--single .lubiwood-info-card__price del {
	font-size: 16px;
}

/* Out of stock: dim the card to match how multi-size size swatches dim when a
   size is sold out (swatch-prices.css "Out of stock", opacity 0.55), so the card
   no longer reads as available next to the "Out of stock" badge / waitlist. */
.lubiwood-info-card--oos {
	opacity: 0.55;
}

/* The card carries the price, so hide WooCommerce's default summary price.
   WoodMart renders it at .summary-inner > .price (not a direct child of
   .summary/.entry-summary), so that selector is required — same as the
   multi-size chooser hides it in swatch-prices.css. */
.lubiwood-one-size-page .entry-summary > .price,
.lubiwood-one-size-page .summary > .price,
.lubiwood-one-size-page .summary-inner > .price,
.lubiwood-one-size-page .wd-single-price {
	display: none;
}

/* Hide the "107 in stock" availability count in the buy box for one-size
   products (book nooks + bundles) to match the multi-size pages, which don't
   surface a stock count. Scoped to .summary-inner so the gallery's
   "Out of stock" corner labels (.out-of-stock.product-label) are untouched. */
.lubiwood-one-size-page .summary-inner p.stock {
	display: none;
}

/* Bundle (woosb) per-item availability — the green "150 in stock" line under each
   bundled item (.woosb-availability). Hide on the product page so the bundle list
   reads as a clean contents list, matching how the buy box hides the stock count. */
body.lubiwood-product-page .woosb-products .woosb-availability {
	display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Disable the PhotoSwipe "enlarge" affordance on tablet/phone (≤1024px).
 * The click that opens the lightbox is blocked in JS (initDisableMobileLightbox);
 * here we remove the visual cues so images don't invite a zoom that won't happen:
 * hide WoodMart's "Click to enlarge" button + WooCommerce's magnifier trigger,
 * and drop the zoom-in cursor from the gallery images. Desktop keeps the
 * lightbox and all of these, untouched.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	body.lubiwood-product-page .woocommerce-product-gallery .wd-show-product-gallery-wrap,
	body.lubiwood-product-page .woocommerce-product-gallery__trigger {
		display: none !important;
	}

	body.lubiwood-product-page .woocommerce-product-gallery__image,
	body.lubiwood-product-page .woocommerce-product-gallery__image a,
	body.lubiwood-product-page .woocommerce-product-gallery__image img {
		cursor: default;
	}
}

/* ──────────────────────────────────────────────────────────────────────────
 * Bigger discount ("-NN%") circle on tablet/phone.
 * WoodMart shrinks the round on-sale label on the product image to a ~40px
 * circle / 10px text at small breakpoints, which is hard to read on mobile.
 * Scale the gallery's on-sale label up so the discount reads at a glance.
 * Scoped to the gallery's round onsale label so other labels (out-of-stock,
 * attribute) are untouched.
 * ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	body.lubiwood-product-page .woocommerce-product-gallery .product-label.onsale.wd-shape-round {
		min-width: 48px;
		min-height: 48px;
		padding: 5px 6px;
		border-radius: 50%;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.1;
	}
}

/* Finished-size chip on one-size / bundle info cards (simple products). */
body.lubiwood-product-page .lubiwood-info-card__meta {
	margin-top: 6px;
}

body.lubiwood-product-page .lubiwood-info-card .lubiwood-swatch-size {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--lwd-text);
}

body.lubiwood-product-page .lubiwood-info-card .lubiwood-swatch-size__icon {
	flex: 0 0 auto;
	color: #7a8a80;
}

body.lubiwood-product-page .lubiwood-info-card .lubiwood-swatch-size__dims {
	font-weight: 700;
}

body.lubiwood-product-page .lubiwood-info-card .lubiwood-swatch-size__cap {
	color: #7a8a80;
}

/* ── Short-description Read More clamp ─────────────────────────────────────── */
/* --lwd-desc-bg = the surface the description sits on (white summary), used for
   the fade behind the inline "Read More" so it sits at the end of the last line
   without colliding with the text underneath. */
body.lubiwood-product-page .product-image-summary .lubiwood-desc-wrap {
	position: relative;
	--lwd-desc-bg: #fff;
}

body.lubiwood-product-page .product-image-summary .lubiwood-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Collapsed: left-aligned. Justifying a 2-line clamp stretches the visible
	   (non-final) line into ugly word gaps, so justify only once expanded. */
	text-align: left;
	/* Drop the theme's bottom margin so Read More sits right under the text. */
	margin-bottom: 0;
}

/* Trim the trailing margin of the clamped paragraph too (it otherwise adds a
   gap below the copy before the Read More link). */
body.lubiwood-product-page .product-image-summary .lubiwood-desc > :last-child {
	margin-bottom: 0;
}

body.lubiwood-product-page .product-image-summary .lubiwood-desc.is-expanded {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	text-align: justify; /* flush left + right across the full copy */
	text-align-last: left; /* natural last line, no stretch */
}

/* Read More / Read Less: a centred block beneath the copy (no overlay/fade). */
body.lubiwood-product-page .product-image-summary .lubiwood-desc-toggle {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin: 2px auto 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--lwd-green-dark, #4c7a5b);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	white-space: nowrap;
}

body.lubiwood-product-page .product-image-summary .lubiwood-desc-toggle:hover {
	color: var(--lwd-green, #7ab38b);
}

/* The JS toggles visibility via the hidden attribute (overflow re-checked on
   fonts-ready/load/resize); it must beat the display:block above. */
body.lubiwood-product-page .product-image-summary .lubiwood-desc-toggle[hidden] {
	display: none;
}

/* ── Product benefits accordion (native <details>, under the short description) ── */
body.lubiwood-product-page .product-image-summary .lubiwood-product-benefits {
	margin: 20px 0 24px;
	text-align: left;
}

body.lubiwood-product-page .lubiwood-benefit {
	border-bottom: 1px solid rgba(31, 36, 33, 0.1);
}

body.lubiwood-product-page .lubiwood-benefit:first-child {
	border-top: 1px solid rgba(31, 36, 33, 0.1);
}

body.lubiwood-product-page .lubiwood-benefit__head {
	display: flex; /* also removes the default disclosure marker */
	align-items: center;
	gap: 10px;
	padding: 13px 2px;
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lwd-text, #1f2421);
}

body.lubiwood-product-page .lubiwood-benefit__head::-webkit-details-marker {
	display: none;
}

body.lubiwood-product-page .lubiwood-benefit__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--lwd-green-dark, #4c7a5b);
}

body.lubiwood-product-page .lubiwood-benefit__title {
	flex: 1 1 auto;
}

body.lubiwood-product-page .lubiwood-benefit__chevron {
	flex: 0 0 auto;
	color: var(--lwd-text-muted, #6a706c);
	transition: transform 0.2s ease;
}

body.lubiwood-product-page .lubiwood-benefit[open] .lubiwood-benefit__chevron {
	transform: rotate(180deg);
}

body.lubiwood-product-page .lubiwood-benefit__body {
	/* Left-align the expanded copy under the icon (was indented to the title). */
	padding: 0 2px 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--lwd-text-muted, #5a5a5a);
}

/* ── Uniform purchase row: simple + woosb bundles match the variable chooser ── */
/* Non-variable add-to-cart forms (simple products, woosb bundles) get the same
   qty + full-width pill on one row, express button full width below. Bundled
   items (.woosb-wrap) and totals span the full width above the row. */
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px;
	width: 100%;
	align-items: stretch;
}

body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > .woosb-wrap,
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > .woosb-total,
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > .woosb-alert,
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > .woocommerce-variation-description,
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > .price,
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > .fkwcs_stripe_smart_button_wrapper {
	grid-column: 1 / -1;
	width: 100%;
	margin: 0;
}

/* Catch-all (mirrors the variable chooser): any OTHER direct child — e.g.
   WoodMart's "Buy now" button, which hooks woocommerce_after_add_to_cart_button
   as a direct child of form.cart — spans full width below the qty+button row
   instead of auto-flowing into an empty grid cell. Keeps the row intact even if
   that theme toggle is later enabled. */
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button):not(input) {
	grid-column: 1 / -1;
	width: 100%;
	margin: 0;
}

body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > div.quantity {
	grid-column: 1;
	grid-row: 1;
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: stretch;
	margin: 0 !important;
	overflow: hidden;
}

body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > div.quantity .minus,
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > div.quantity .plus {
	width: 28px !important;
	min-width: 28px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > div.quantity input[type="number"],
body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > div.quantity input[type="text"] {
	width: 34px !important;
	min-width: 34px;
	max-width: 34px;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-left: 1px solid var(--lwd-brd) !important;
	border-right: 1px solid var(--lwd-brd) !important;
	border-radius: 0 !important;
	text-align: center;
	box-shadow: none !important;
	-moz-appearance: textfield;
}

body.lubiwood-product-page .product-image-summary form.cart:not(.variations_form) > button.single_add_to_cart_button {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	min-width: 0;
	margin: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Description tab: tighten the top gap + drop the timeline's grey "half dot" ──
   The description content is a WoodMart wd_timeline. Its wrapper adds 50px of
   top padding (a big empty gap under the "Description" heading) and the timeline
   line renders a small grey dot at the top (`.line-dot`, greyed via an inset
   box-shadow) that floats in that gap. Neither earns its space in this stacked
   narrative layout, so tighten the gap and hide the dots. */
body.lubiwood-product-page .woocommerce-Tabs-panel--description .wc-tab-inner {
	padding-top: 0;
}
body.lubiwood-product-page .woocommerce-Tabs-panel--description .wd-timeline-wrapper {
	padding-top: 6px;
}
body.lubiwood-product-page .woocommerce-Tabs-panel--description .woodmart-timeline-line .line-dot {
	display: none;
}


/* lubiwood-swatch-prices */
/**
 * Lubiwood — size swatches with per-variation prices + meta + chooser (50+ friendly)
 * Uses --lwd-* tokens from product-page.css on body.lubiwood-product-page.
 */

.variations_form.lubiwood-swatch-prices-active {
	--lw-swatch-radius: var(--lwd-radius, 12px);
	--lw-swatch-brd: var(--lwd-brd, #e3e6e4);
	--lw-swatch-brd-active: var(--lwd-green, #3d6b47);
	--lw-swatch-bg: #fff;
	--lw-swatch-bg-active: var(--lwd-green-soft, #dceee0);
	--lw-swatch-text: var(--lwd-text, #1f2421);
	--lw-swatch-muted: var(--lwd-text-muted, #3a3f3c);
	--lw-swatch-accent: var(--lwd-green-dark, #2f5c38);
	--lw-swatch-gap: 10px;
	max-width: 100%;
}

/* Slim "Choose your size" header — heading on the left, size-guide link on the
   right (relocated up from WoodMart's default spot below the form). Replaces the
   old high-visibility green banner so the chooser breathes, Wentworth-style. The
   green highlight still flashes on the cards if Add to cart is tapped with no
   size chosen (.lubiwood-chooser-highlight). */
.variations_form.lubiwood-chooser-active .lubiwood-chooser-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0 0 12px;
}

.variations_form.lubiwood-chooser-active .lubiwood-chooser-banner--hidden {
	display: none;
}

.variations_form.lubiwood-chooser-active .lubiwood-chooser-banner__title {
	margin: 0;
	font-size: clamp(1.1875rem, 3.6vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--lw-swatch-text);
}

/* Right-hand slot holding the relocated size-guide trigger. */
.variations_form.lubiwood-chooser-active .lubiwood-chooser-banner__guide {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* Size-guide trigger, moved inline into the header: a quiet underlined link with
   WoodMart's icon, turning green on hover — matches the reference "ⓘ Size guide". */
.variations_form.lubiwood-chooser-active .wd-sizeguide-btn.lubiwood-sizeguide-inline {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.variations_form.lubiwood-chooser-active .wd-sizeguide-btn.lubiwood-sizeguide-inline > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	transform: none !important;
	color: var(--lw-swatch-muted);
	font-size: clamp(0.9375rem, 2.8vw, 1rem);
	font-weight: 600;
	line-height: 1.3;
}

.variations_form.lubiwood-chooser-active .wd-sizeguide-btn.lubiwood-sizeguide-inline > a .wd-action-icon::before {
	color: currentColor !important;
	font-size: 1.15em !important;
}

.variations_form.lubiwood-chooser-active .wd-sizeguide-btn.lubiwood-sizeguide-inline > a .wd-action-text {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.variations_form.lubiwood-chooser-active .wd-sizeguide-btn.lubiwood-sizeguide-inline > a:hover,
.variations_form.lubiwood-chooser-active .wd-sizeguide-btn.lubiwood-sizeguide-inline > a:focus-visible {
	color: var(--lw-swatch-accent);
}

/* Phones: the header runs out of room and the size-guide drops below the title,
   which looks lopsided left-aligned (worse when a longer-language title itself
   wraps). Centre it — title on its own centred line, size-guide centred beneath. */
@media (max-width: 479px) {
	.variations_form.lubiwood-chooser-active .lubiwood-chooser-banner {
		justify-content: center;
		text-align: center;
	}
	.variations_form.lubiwood-chooser-active .lubiwood-chooser-banner__title {
		flex-basis: 100%;
	}
	.variations_form.lubiwood-chooser-active .lubiwood-chooser-banner__guide {
		justify-content: center;
	}
}

/* Hide redundant Size rows — swatch cards (+ Step 1 banner) are self-explanatory.
   Applies on page load for every variable puzzle with WoodMart swatches, not only
   after JS adds .lubiwood-swatch-prices-active. Also hides the WoodMart product
   attributes table (Size | A3, A4… or Size | M ?) that sits above the form. */
body.lubiwood-swatch-chooser-page:has(.wd-swatches-product) table.shop_attributes,
body.lubiwood-swatch-chooser-page:has(.wd-swatches-product) .woocommerce-product-attributes-item--attribute_pa_size,
.variations_form:has(.wd-swatches-product) table.variations .label,
.variations_form:has(.wd-swatches-product) table.variations th.label,
.variations_form.lubiwood-swatch-prices-active table.variations .label,
.variations_form.lubiwood-swatch-prices-active table.variations th.label {
	display: none !important;
}

.variations_form:has(.wd-swatches-product) table.variations tr .value,
.variations_form.lubiwood-swatch-prices-active table.variations tr .value {
	padding-top: 0 !important;
}

/* Hide native dropdown — swatches replace it */
.variations_form:has(.wd-swatches-product) table.variations select,
.variations_form.lubiwood-swatch-prices-active table.variations select {
	display: none !important;
}

/* Highlight swatches when user taps disabled Add to cart */
.variations_form.lubiwood-chooser-highlight .wd-swatches-product {
	outline: 3px solid #3d6b47;
	outline-offset: 4px;
	border-radius: 12px;
}

/* Hide confusing “Clear” on chooser pages */
.variations_form.lubiwood-chooser-active .reset_variations,
.variations_form.lubiwood-chooser-active .wd-reset-var {
	display: none !important;
}

/* Hide duplicate price range above the form */
body.lubiwood-swatch-chooser-page:has(.lubiwood-chooser-active) .summary-inner > .price,
body.lubiwood-swatch-chooser-page:has(.lubiwood-chooser-active) .wd-single-price .price,
body.lubiwood-swatch-chooser-page:has(.lubiwood-chooser-active) .product-image-summary > .price {
	display: none !important;
}

.variations_form.lubiwood-swatch-prices-active table.variations td.value {
	width: 100%;
	max-width: 100%;
	padding-top: 0.25em;
}

.variations_form.lubiwood-swatch-prices-active .wd-swatches-single.wd-swatches-product {
	flex-direction: column;
	align-items: stretch;
	gap: var(--lw-swatch-gap);
	width: 100%;
	max-width: 100%;
}

/* Card grid: head (size + price) / meta row */
.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text {
	position: relative; /* anchor for the absolutely-positioned "Most popular" badge */
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 6px;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 20px 16px 12px !important; /* extra top room so the struck price above the sale price is contained */
	border: 1.5px solid var(--lw-swatch-brd) !important;
	border-radius: var(--lw-swatch-radius) !important;
	background: var(--lw-swatch-bg) !important;
	color: var(--lw-swatch-text) !important;
	box-shadow: none !important;
	box-sizing: border-box;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text:hover {
	border-color: #b8c4bb !important;
	background: #f8faf9 !important;
}

/* Selected — very obvious for 50+ */
.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text.wd-active {
	border-color: var(--lw-swatch-brd-active) !important;
	border-width: 2px !important;
	background: var(--lw-swatch-bg-active) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--lwd-green, #3d6b47) 18%, transparent) !important;
	color: var(--lw-swatch-text) !important;
}

/* Card top row: size label (left) | badge + price (top-right) */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-head {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center; /* radio · pieces · price all share one vertical centre-line */
	justify-content: space-between;
	gap: 12px 8px; /* tighter column gap pulls the pieces count closer to the radio */
	min-width: 0;
	/* Push the head down on EVERY card so all cards share the taller "Most
	   popular" height (it needs this nudge to clear its top-left corner ribbon).
	   Applying it uniformly unifies card heights AND gives the struck price above
	   the sale price the same comfortable top margin on every card. */
	margin-top: 6px;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-label {
	flex: 1 1 auto;
	min-width: 0;
	align-self: center; /* pieces sits centred against the radio dot */
	padding-right: 4px;
	text-align: left; /* left-align the piece count + badge (WoodMart centers by default) */
}

/* Radio indicator at the head's leading edge — an empty ring by default, a filled
   green dot once the card is chosen (.wd-active). Purely visual: the real
   selection is the swatch itself. Stays put when the card expands (it lives in the
   head, above the revealed meta row). */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-radio {
	flex: 0 0 auto;
	align-self: center;
	width: 22px;
	height: 22px;
	margin-right: 4px;
	border: 2px solid #c2ccc4;
	border-radius: 50%;
	background: #fff;
	position: relative;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.variations_form.lubiwood-swatch-prices-active .wd-swatch.wd-text.wd-active .lubiwood-swatch-radio {
	border-color: var(--lwd-green, #3d6b47);
}

.variations_form.lubiwood-swatch-prices-active .wd-swatch.wd-text.wd-active .lubiwood-swatch-radio::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--lwd-green, #3d6b47);
}

/* Out-of-stock card: mute the ring so it reads unavailable. */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-swatch-radio {
	border-color: #cfd4d0;
	background: #f1f2f1;
}

.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos.wd-active .lubiwood-swatch-radio::after {
	background: #9aa49d;
}

.variations_form.lubiwood-swatch-prices-active .wd-swatch.wd-text .wd-swatch-text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 0.35em;
	margin: 0 !important;
	padding: 0 !important;
	font-size: clamp(1.0625rem, 3.2vw, 1.25rem) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: inherit !important;
	text-transform: none;
	letter-spacing: 0;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-size-name {
	font-size: clamp(1.125rem, 3.6vw, 1.3125rem);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-size-code {
	font-size: clamp(1rem, 3vw, 1.125rem);
	font-weight: 600;
	color: var(--lw-swatch-muted);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Top-right: badge above price */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-aside {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 6px;
	max-width: 52%;
	text-align: right;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-badge {
	position: absolute; /* overlay in the exact top-left corner — out of flow, no added height */
	top: 0;
	left: 0;
	z-index: 2;
	display: inline-block;
	margin: 0;
	padding: 5px 11px;
	/* Corner tag: top-left nests in the card's rounded corner, bottom-right rounded. */
	border-radius: 11px 0 10px 0;
	background: var(--lwd-green, #3d6b47);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.variations_form.lubiwood-swatch-prices-active .wd-swatch.wd-text.wd-active .lubiwood-swatch-badge {
	background: var(--lwd-green-dark, #2f5c38);
}

/* Card heights are unified: the head's margin-top (above) is applied to every
   card, so a badged card ("Most popular" / "Sold out") and a plain card are the
   same height, and the corner ribbon on badged cards clears the leading radio. */

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	text-align: right;
	line-height: 1.2;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price .price {
	position: relative; /* anchor for the struck price floating above */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0;
	margin: 0 !important;
	font-size: clamp(1.125rem, 3.8vw, 1.3125rem) !important;
	line-height: 1.2 !important;
	color: var(--lw-swatch-text) !important;
}

/* On-sale: float the struck price ABOVE the sale price and out of flow, so the
   sale price is the price box's only in-flow line — it then sits level with the
   pieces count (head is centre-aligned). Non-sale prices are a single line
   already, so the regular price lands on the same centre-line automatically. */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price .price del {
	position: absolute;
	right: 0;
	bottom: 100%;
	margin-bottom: 1px !important;
	font-size: clamp(0.8125rem, 2.2vw, 0.875rem) !important;
	font-weight: 500 !important;
	color: var(--lw-swatch-muted) !important;
	opacity: 1 !important;
	white-space: nowrap;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price .price del .amount {
	color: inherit !important;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price .price ins {
	order: 2;
	font-size: clamp(1rem, 3vw, 1.1875rem) !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	color: var(--lw-swatch-accent) !important;
	background: none !important;
	letter-spacing: -0.02em;
}

/* Simple price (no sale): single amount is prominent */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price .price > .amount,
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price .price > bdi {
	font-size: clamp(1rem, 3vw, 1.1875rem) !important;
	font-weight: 800 !important;
	color: var(--lw-swatch-accent) !important;
}

.variations_form.lubiwood-swatch-prices-active .wd-swatch.wd-text.wd-active .lubiwood-swatch-price .price ins {
	color: #3d5c43 !important;
}

/* Piece count — prominent line inside the label column */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-pieces {
	display: block;
	margin-top: 5px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--lw-swatch-accent);
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none; /* "245 pieces" — lower-case, calmer (Wentworth-style) */
}

.variations_form.lubiwood-swatch-prices-active .wd-swatch.wd-text.wd-active .lubiwood-swatch-pieces {
	color: #1f4428;
}

/* ── Pieces-count headline layout ───────────────────────────────────────────
   When a swatch's variation has a defined puzzle pieces count, the JS adds
   `lubiwood-swatch--has-pieces`. The count becomes the headline; the size name
   (.wd-swatch-text) drops to a small muted eyebrow above it. Dimensions stay in
   the meta row. Placed after the base rules so source order wins (equal
   specificity for .wd-swatch-text). Swatches without the class are unaffected. */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--has-pieces .wd-swatch-text {
	font-size: clamp(0.8125rem, 2.4vw, 0.9375rem) !important;
	font-weight: 600 !important;
	color: var(--lw-swatch-muted) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.25 !important;
}

/* Nested size name/code inherit the eyebrow sizing instead of their own larger sizes. */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--has-pieces .lubiwood-size-name,
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--has-pieces .lubiwood-size-code {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
}

/* In the pieces-headline layout the eyebrow shows only the role name (e.g. "Small");
   the parenthetical size code (e.g. "(A5)") is redundant with the dimensions row. */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--has-pieces .lubiwood-size-code {
	display: none;
}

/* The count is the headline: larger + bolder than the price so the piece count reads first. */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--has-pieces .lubiwood-swatch-pieces {
	margin-top: 0;
	font-size: clamp(1.0625rem, 3.1vw, 1.3125rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap; /* keep "100 pieces" on one line, level with the price */
}

/* Single-size products: nothing to choose, so the size-name eyebrow is hidden
   entirely (no "Single size" label). The piece count (if any), dimensions, and
   price still render. */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--single .wd-swatch-text {
	display: none;
}

/* Meta row: finished size (inside card). Collapsed by default — only the chosen
   card reveals it (see the .wd-active rule below), so cards stay to just the
   pieces + price until tapped. */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-meta {
	display: none;
	grid-column: 1 / -1;
	grid-row: 2;
	min-width: 0;
	font-size: clamp(0.875rem, 2.6vw, 0.9375rem);
	line-height: 1.45;
	color: var(--lw-swatch-muted);
	border-top: 1px solid rgba(31, 36, 33, 0.08);
	padding-top: 8px;
	margin-top: 2px;
}

/* Revealed on the selected card (and on the auto-selected single-size card). */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.wd-text.wd-active .lubiwood-swatch-meta {
	display: block;
	border-top-color: rgba(95, 127, 102, 0.2);
	color: #4a5550;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-meta p {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-meta p:empty {
	display: none;
}

/* Bottom meta row, left-aligned in order: SMALL - [icon] 36 × 25 cm */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-size {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	font-size: clamp(0.875rem, 2.6vw, 0.9375rem);
	line-height: 1.3;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-size__icon {
	flex: 0 0 auto;
	color: #7a8a80;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-size__name {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--lw-swatch-muted);
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-size__sep {
	color: var(--lw-swatch-muted);
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-size__dims {
	font-weight: 700;
	color: #4a5550;
	white-space: nowrap;
}

/* Pieces-headline cards: the size name now lives in the bottom row, so hide the
   top eyebrow — the top holds just the piece count + price. */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--has-pieces .wd-swatch-text {
	display: none;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-desc {
	margin-top: 2px;
}

/* ── Out of stock ────────────────────────────────────────────────────────────
   The "Sold out" pill (below) carries the message, so the card stays legible and
   obviously tappable — it must be tapped to reveal the waitlist form. A grey wash
   + muted price signal unavailability, not a heavy fade.

   IMPORTANT: these selectors mirror the base/active swatch rules' structure
   (`.wd-swatches-single > .wd-swatch.wd-text[.wd-active]`) and add the OOS class,
   so they out-specify them. A plainer `.wd-swatch.lubiwood-swatch--oos` selector
   loses the cascade to the 5-class base rule (background var(--lw-swatch-bg)) and
   the 6-class active rule (green --lw-swatch-bg-active / --lwd-green border), which
   is why the card previously stayed white/green and only its text greyed. */
.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text.lubiwood-swatch--oos {
	opacity: 1 !important;
	background: #f1f2f1 !important;
	border-color: #d4d8d5 !important;
}

/* Selected sold-out card: stay grey (not the green active tint) so a sold-out
   size always reads as unavailable, even when it is the selected card. The extra
   .wd-active makes this beat the active rule above it. */
.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text.wd-active.lubiwood-swatch--oos {
	background: #f1f2f1 !important;
	border-color: #d4d8d5 !important;
}

/* Grey out ALL the card content so the card plainly reads "unavailable" and the
   red badge stands out — but keep it legible/tappable (it opens the waitlist). */
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-swatch-pieces,
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .wd-swatch-text,
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-size-name,
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-size-code,
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-swatch-price .price,
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-swatch-price .price ins,
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-swatch-price .price > .amount,
.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-swatch-price .price > bdi {
	color: #9aa49d !important;
}

.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--oos .lubiwood-swatch-meta {
	opacity: 0.7;
}

/* Sold-out pill: solid near-black so it reads "unavailable" without shouting,
   distinct from the green "Most popular" pill, with a bell hinting you can get
   notified. Kept at the base badge size so prices stay aligned with the other
   cards via the badge-height placeholder. */
.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-badge--oos {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #1a1a1a !important; /* hold the black even when the card is selected */
	color: #fff;
	font-weight: 800;
}

.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-badge--oos .lubiwood-bell {
	flex: 0 0 auto;
	margin-top: -1px;
}

/* Hide duplicate blocks below (shown on each card) */
.variations_form.lubiwood-swatch-prices-active .single_variation_wrap .woocommerce-variation-price,
.variations_form.lubiwood-swatch-prices-active .single_variation_wrap .woocommerce-variation-description {
	display: none !important;
}

/* —— Single size: one option, auto-selected — present it, don't ask to "choose" —— */
.variations_form.lubiwood-swatch-prices-active.lubiwood-single-size .wd-swatches-single > .wd-swatch.wd-text {
	cursor: default;
}

.variations_form.lubiwood-swatch-prices-active.lubiwood-single-size .wd-swatches-single > .wd-swatch.wd-text:hover {
	border-color: var(--lw-swatch-brd-active) !important;
	background: var(--lw-swatch-bg-active) !important;
}

/* —— Tablet —— */
@media (max-width: 1024px) {
	.variations_form.lubiwood-swatch-prices-active {
		--lw-swatch-gap: 8px;
		--lw-swatch-radius: 13px;
	}
}

/* —— Mobile —— */
@media (max-width: 767px) {
	.variations_form.lubiwood-swatch-prices-active {
		--lw-swatch-radius: 12px;
	}

	.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text {
		padding: 20px 14px 12px !important;
		column-gap: 10px;
		row-gap: 6px;
	}

	.variations_form.lubiwood-swatch-prices-active table.variations tr {
		display: block;
	}

	.variations_form.lubiwood-swatch-prices-active table.variations .value {
		display: block;
		width: 100%;
		padding-inline: 0;
	}
}

/* —— Narrow phones: keep size left, price top-right —— */
@media (max-width: 479px) {
	.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 14px 12px !important;
	}

	.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-head {
		grid-column: 1;
		gap: 8px 10px;
	}

	.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-aside {
		max-width: 58%;
	}

	/* Count is the headline on phones too — bigger than the price row. */
	.variations_form.lubiwood-swatch-prices-active .wd-swatch.lubiwood-swatch--has-pieces .lubiwood-swatch-pieces {
		font-size: clamp(1rem, 4.2vw, 1.125rem);
	}

	.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price .price ins {
		font-size: clamp(0.875rem, 3.4vw, 0.9375rem) !important;
	}

	.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-price .price del {
		font-size: clamp(0.6875rem, 2.6vw, 0.75rem) !important;
	}

	.variations_form.lubiwood-swatch-prices-active .lubiwood-swatch-meta {
		grid-column: 1;
	}

	.variations_form.lubiwood-swatch-prices-active .lubiwood-chooser-banner {
		padding: 18px 16px 20px;
	}
}

@media (max-width: 359px) {
	.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text {
		padding: 18px 12px 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.variations_form.lubiwood-swatch-prices-active .wd-swatches-single > .wd-swatch.wd-text {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * "Choose a size" modal — an in-place size picker styled like the product page.
 * Opened when an active "Add to cart" (main button or mobile sticky bar) is
 * tapped before a size is chosen; clones the on-page size cards so tapping one
 * selects it + adds to cart. Message + OK is a fallback when no sizes exist.
 * ------------------------------------------------------------------------- */

.lubiwood-size-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.lubiwood-size-modal--open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.lubiwood-size-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 18, 0.46);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.lubiwood-size-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	max-height: min(88vh, 760px);
	box-sizing: border-box;
	padding: 0;
	overflow: hidden;
	text-align: left;
	background: #fff;
	color: var(--lwd-text, #1f2421);
	border-radius: var(--lwd-radius-lg, 16px);
	box-shadow: 0 22px 60px rgba(15, 23, 18, 0.28);
	transform: translateY(10px) scale(0.985);
	transition: transform 0.18s ease;
}

.lubiwood-size-modal__dialog:focus {
	outline: none;
}

.lubiwood-size-modal--open .lubiwood-size-modal__dialog {
	transform: translateY(0) scale(1);
}

/* Green header band — echoes the on-page "Choose your size" chooser banner. */
.lubiwood-size-modal__head {
	flex: 0 0 auto;
	padding: 20px 52px 18px 22px;
	background: var(--lwd-green-soft, #f0f7f2);
	border-bottom: 1px solid var(--lwd-green-line, #b8d4be);
}

.lubiwood-size-modal__title {
	margin: 0 0 6px;
	font-size: clamp(1.25rem, 4.6vw, 1.5rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--lwd-text, #1f2421);
}

.lubiwood-size-modal__hint {
	margin: 0;
	font-size: clamp(0.95rem, 3.2vw, 1.0625rem);
	font-weight: 500;
	line-height: 1.4;
	color: var(--lwd-green-dark, #2f5c38);
}

/* Cloned size cards live here; the wrapper carries the swatch-prices scope
   classes so the cards inherit the exact on-page look. */
.lubiwood-size-modal__sizes {
	flex: 1 1 auto;
	padding: 16px 18px 18px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.lubiwood-size-modal__sizes .wd-swatches-product {
	margin: 0 !important;
}

.lubiwood-size-modal__sizes .wd-swatch {
	cursor: pointer;
}

/* Modal cards show the finished-size row up front. On the page the row is
   revealed on select, but tapping a modal card adds it straight to cart, so the
   shopper would never see it otherwise — show every card's details here. */
.lubiwood-size-modal__sizes .lubiwood-swatch-meta {
	display: block !important;
}

.lubiwood-size-modal:not(.lubiwood-size-modal--has-sizes) .lubiwood-size-modal__sizes {
	display: none;
}

/* Message + OK fallback (only when there are no sizes to show). */
.lubiwood-size-modal__fallback {
	padding: 18px 22px 22px;
	text-align: center;
}

.lubiwood-size-modal--has-sizes .lubiwood-size-modal__fallback {
	display: none;
}

.lubiwood-size-modal__body {
	margin: 0 0 18px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--lwd-text-muted, #3a3f3c);
}

/* Buttons — force our styling over the theme's generic button rules. */
.lubiwood-size-modal .lubiwood-size-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.7) !important;
	color: var(--lwd-green-dark, #2f5c38) !important;
	font-size: 22px;
	line-height: 1;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.lubiwood-size-modal .lubiwood-size-modal__close:hover,
.lubiwood-size-modal .lubiwood-size-modal__close:focus-visible {
	background: #fff !important;
	color: var(--lwd-green, #3d6b47) !important;
	outline: none;
}

.lubiwood-size-modal .lubiwood-size-modal__ok {
	display: inline-block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 13px 26px;
	border: 0 !important;
	border-radius: var(--lwd-radius, 12px) !important;
	background: var(--lwd-green, #3d6b47) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lubiwood-size-modal .lubiwood-size-modal__ok:hover,
.lubiwood-size-modal .lubiwood-size-modal__ok:focus-visible {
	background: var(--lwd-green-dark, #2f5c38) !important;
	outline: none;
}

body.lubiwood-size-modal-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.lubiwood-size-modal,
	.lubiwood-size-modal__dialog {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * "Adding…" feedback — the fixed bar (and modal cards) spin while adding so the
 * tap clearly registers. Cleared on added_to_cart / FunnelKit open, or a timeout.
 * ------------------------------------------------------------------------- */

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

/* Tactile press on the mobile bottom bar. */
.wd-sticky-btn .wd-sticky-add-to-cart {
	transition: transform 0.12s ease, opacity 0.12s ease;
}

.wd-sticky-btn .wd-sticky-add-to-cart:active {
	transform: scale(0.975);
}

/* Bottom-bar spinner: hide the label, drop in a spinner, block re-taps. */
.wd-sticky-btn .wd-sticky-add-to-cart.lubiwood-adding {
	position: relative;
	pointer-events: none;
}

/* Fully hide the label under the spinner — WoodMart sets -webkit-text-fill-color
   on its buttons, which beats plain `color`, and the text may sit in a child span. */
.wd-sticky-btn .wd-sticky-add-to-cart.lubiwood-adding,
.wd-sticky-btn .wd-sticky-add-to-cart.lubiwood-adding * {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

.wd-sticky-btn .wd-sticky-add-to-cart.lubiwood-adding::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: lubiwood-spin 0.6s linear infinite;
}

/* Modal size card spinner while it selects + adds. */
.lubiwood-size-modal__sizes .wd-swatch.lubiwood-adding {
	pointer-events: none;
}

.lubiwood-size-modal__sizes .wd-swatch.lubiwood-adding::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	background: rgba(255, 255, 255, 0.6);
	border-radius: inherit;
}

.lubiwood-size-modal__sizes .wd-swatch.lubiwood-adding::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 4;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 2.5px solid color-mix(in srgb, var(--lwd-green, #3d6b47) 25%, transparent);
	border-top-color: var(--lwd-green, #3d6b47);
	border-radius: 50%;
	animation: lubiwood-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.wd-sticky-btn .wd-sticky-add-to-cart.lubiwood-adding::after,
	.lubiwood-size-modal__sizes .wd-swatch.lubiwood-adding::after {
		animation-duration: 1.4s;
	}
	.wd-sticky-btn .wd-sticky-add-to-cart:active {
		transform: none;
	}
}


/* 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-geo */
/* Geo language-suggestion bar. Fixed to the top; shown only after JS reveals it.
   WoodMart green palette to match the store. Coexists with the free-shipping bar
   by stacking above it; final z-index / offset vs the sticky header is confirmed
   during manual verification (Task 10). */
.lw-geo-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: #7ab38b;
	color: #ffffff;
	font-size: 15px;
	line-height: 1.3;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
	transform: translateY(-100%);
}
.lw-geo-bar[hidden] { display: none; }
.lw-geo-bar.lw-geo-in { transform: translateY(0); }

.lw-geo-bar__flag { font-size: 18px; line-height: 0; flex: 0 0 auto; display: flex; align-items: center; }
.lw-geo-bar__flagimg {
	display: block;
	height: 16px;
	width: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);  /* subtle outline so light-edged flags read on the green bar */
}

.lw-geo-bar__msg {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lw-geo-bar__go {
	flex: 0 0 auto;
	display: inline-block;
	padding: 7px 14px;
	min-height: 40px;
	box-sizing: border-box;
	background: #ffffff;
	color: #2f5d3f;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	line-height: 26px;
}
.lw-geo-bar__go:hover { background: #eef6f0; }

/* WoodMart themes every <button> (grey #f3f3f3 box, dark 13px text) with rules that
   out-rank a plain class selector, so the reset below uses !important to force the
   dismiss control back to the bar's intended look: a big WHITE × on the green bar,
   no box. Tap target stays 40×40 — only the glyph grows. */
.lw-geo-bar__dismiss,
.lw-geo-bar__dismiss:hover,
.lw-geo-bar__dismiss:focus {
	flex: 0 0 auto;
	display: flex;               /* flex-center so the enlarged glyph sits dead-centre, never clips */
	align-items: center;
	justify-content: center;
	width: 40px;                 /* button/tap target unchanged */
	height: 40px;
	min-height: 0;
	padding: 0;
	margin: 0;
	background: transparent !important;   /* kill WoodMart's grey button box */
	border: 0 !important;
	box-shadow: none !important;
	color: #ffffff !important;            /* white × to match the bar text */
	font-size: 44px !important;           /* bigger × GLYPH only; &times; fills ~half its em box */
	font-weight: 300 !important;
	line-height: 1 !important;
	cursor: pointer;
	opacity: 0.9;
}
.lw-geo-bar__dismiss:hover { opacity: 1; }

/* Page offset while the bar is open is set inline by JS from the bar's measured
   height (document.documentElement.style.paddingTop). The lw-geo-open class on
   <html> is now just a JS state marker — no declarations needed here. */

@media (max-width: 480px) {
	.lw-geo-bar { font-size: 14px; gap: 8px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: no-preference) {
	.lw-geo-bar { transition: transform 0.22s ease-out; }
}


/* lubiwood-sato */
/* Side cart: cart icon before the drawer heading — FunnelKit's own cart_1 icon (the same one the
   drawer's Checkout button uses), applied as a mask so it takes the title's text colour in every
   language and needs no template override. */
.fkcart-title::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-inline-end: 10px;
	vertical-align: -5px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 2.71411C2 2.31972 2.31972 2 2.71411 2H3.34019C4.37842 2 4.97454 2.67566 5.31984 3.34917C5.55645 3.8107 5.72685 4.37375 5.86764 4.86133H20.5709C21.5186 4.86133 22.2035 5.7674 21.945 6.67914L19.809 14.2123C19.4606 15.4413 18.3384 16.2896 17.0609 16.2896H9.80665C8.51866 16.2896 7.39 15.4276 7.05095 14.185L6.13344 10.8225C6.12779 10.8073 6.12262 10.7917 6.11795 10.7758L4.64782 5.78023C4.59738 5.61449 4.55096 5.45386 4.50614 5.29878C4.36354 4.80529 4.23716 4.36794 4.04891 4.00075C3.82131 3.55681 3.61232 3.42822 3.34019 3.42822H2.71411C2.31972 3.42822 2 3.1085 2 2.71411ZM7.49529 10.3874L8.4288 13.8091C8.59832 14.4304 9.16266 14.8613 9.80665 14.8613H17.0609C17.6997 14.8613 18.2608 14.4372 18.435 13.8227L20.5709 6.28955H6.28975L7.49529 10.3874ZM12.0017 19.8577C12.0017 21.0408 11.0426 22 9.85941 22C8.67623 22 7.71708 21.0408 7.71708 19.8577C7.71708 18.6745 8.67623 17.7153 9.85941 17.7153C11.0426 17.7153 12.0017 18.6745 12.0017 19.8577ZM10.5735 19.8577C10.5735 19.4633 10.2538 19.1436 9.85941 19.1436C9.46502 19.1436 9.1453 19.4633 9.1453 19.8577C9.1453 20.2521 9.46502 20.5718 9.85941 20.5718C10.2538 20.5718 10.5735 20.2521 10.5735 19.8577ZM19.1429 19.8577C19.1429 21.0408 18.1837 22 17.0005 22C15.8173 22 14.8582 21.0408 14.8582 19.8577C14.8582 18.6745 15.8173 17.7153 17.0005 17.7153C18.1837 17.7153 19.1429 18.6745 19.1429 19.8577ZM17.7146 19.8577C17.7146 19.4633 17.3949 19.1436 17.0005 19.1436C16.6061 19.1436 16.2864 19.4633 16.2864 19.8577C16.2864 20.2521 16.6061 20.5718 17.0005 20.5718C17.3949 20.5718 17.7146 20.2521 17.7146 19.8577Z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 2.71411C2 2.31972 2.31972 2 2.71411 2H3.34019C4.37842 2 4.97454 2.67566 5.31984 3.34917C5.55645 3.8107 5.72685 4.37375 5.86764 4.86133H20.5709C21.5186 4.86133 22.2035 5.7674 21.945 6.67914L19.809 14.2123C19.4606 15.4413 18.3384 16.2896 17.0609 16.2896H9.80665C8.51866 16.2896 7.39 15.4276 7.05095 14.185L6.13344 10.8225C6.12779 10.8073 6.12262 10.7917 6.11795 10.7758L4.64782 5.78023C4.59738 5.61449 4.55096 5.45386 4.50614 5.29878C4.36354 4.80529 4.23716 4.36794 4.04891 4.00075C3.82131 3.55681 3.61232 3.42822 3.34019 3.42822H2.71411C2.31972 3.42822 2 3.1085 2 2.71411ZM7.49529 10.3874L8.4288 13.8091C8.59832 14.4304 9.16266 14.8613 9.80665 14.8613H17.0609C17.6997 14.8613 18.2608 14.4372 18.435 13.8227L20.5709 6.28955H6.28975L7.49529 10.3874ZM12.0017 19.8577C12.0017 21.0408 11.0426 22 9.85941 22C8.67623 22 7.71708 21.0408 7.71708 19.8577C7.71708 18.6745 8.67623 17.7153 9.85941 17.7153C11.0426 17.7153 12.0017 18.6745 12.0017 19.8577ZM10.5735 19.8577C10.5735 19.4633 10.2538 19.1436 9.85941 19.1436C9.46502 19.1436 9.1453 19.4633 9.1453 19.8577C9.1453 20.2521 9.46502 20.5718 9.85941 20.5718C10.2538 20.5718 10.5735 20.2521 10.5735 19.8577ZM19.1429 19.8577C19.1429 21.0408 18.1837 22 17.0005 22C15.8173 22 14.8582 21.0408 14.8582 19.8577C14.8582 18.6745 15.8173 17.7153 17.0005 17.7153C18.1837 17.7153 19.1429 18.6745 19.1429 19.8577ZM17.7146 19.8577C17.7146 19.4633 17.3949 19.1436 17.0005 19.1436C16.6061 19.1436 16.2864 19.4633 16.2864 19.8577C16.2864 20.2521 16.6061 20.5718 17.0005 20.5718C17.3949 20.5718 17.7146 20.2521 17.7146 19.8577Z'/></svg>") no-repeat center / contain;
}

/* Upsell tile button while the picker form is being fetched. */
.fkcart-select-product.lubiwood-sato-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Off-screen mount for the fetched variation form: it must stay in the DOM (WooCommerce's
   variation script and the picker act on it) but never be seen. */
.lubiwood-sato-mount {
	position: fixed;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}