/* 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-cart-summary */
/* ------------------------------------------------------------------ *
* Side-cart: Advanced Coupons deal breakdown.
*
* ACFW appends its per-item summary INTO FunnelKit's coupon amount cell:
*
*
*
* 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 . */
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
* -
*
* Advanced Coupons appends its own deal blurb into that same value —
* "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: flex;
gap: 8px;
align-items: flex-start;
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;
}
.lubiwood-eos-pdp strong,
.lubiwood-eos-notice strong {
color: #1e3a8a;
font-weight: 600;
}
.lubiwood-eos-pdp-icon,
.lubiwood-eos-notice-icon {
flex: 0 0 auto;
display: inline-flex;
margin-top: 1px;
color: #1e3a8a;
}
.lubiwood-eos-alt {
color: #64748b;
}
.lubiwood-eos-notice-wrap > td {
padding: 0 !important;
border: 0 !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 /
(NOT 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
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 , 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-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 (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; × 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
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; }
}