/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.1
 Text Domain:  woodmart
*/

/* ------------------------------------------------------------------ *
 * Homepage hero (page 2581) — full-bleed background video.
 *
 * The hero container is e-con-full, but WoodMart wraps page content in
 * <main class="...container">, a boxed max-width column, so "full" only
 * fills that column and leaves white margins left/right. These rules break
 * the hero out to the full viewport width (edge-to-edge video), then pad the
 * inner text back to the site content width (--wd-container-w) so the heading
 * and button stay aligned with the sections below instead of jamming against
 * the screen edge. Scoped to the homepage hero only.
 * ------------------------------------------------------------------ */
.elementor-2581 .elementor-element.elementor-element-71021eb {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left:  max(20px, calc((100vw - var(--wd-container-w, 1222px)) / 2)) !important;
	padding-right: max(20px, calc((100vw - var(--wd-container-w, 1222px)) / 2)) !important;
	/* Vertically centre the text stack, left-align it, give it some breathing room. */
	justify-content: center !important;
	align-items: flex-start !important;
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}

/* ------------------------------------------------------------------ *
 * Homepage hero — overlay text restyle ("balanced refresh").
 *
 * Replaces the off-brand styling (Arial Black subtext in cyan, off-palette
 * green button, hacky manual offset/scale on the heading, flat 50% overlay)
 * with WoodMart's own fonts (--wd-title-font / --wd-text-font) and warm
 * palette (brown #542c15, coral #e66055), plus a left-anchored gradient scrim
 * so the copy reads cleanly while the video stays visible on the right.
 * Scoped to the homepage hero widgets only.
 * ------------------------------------------------------------------ */

/* Readability scrim on the container's ::before (Elementor renders the overlay
   there — there is no overlay div). Explicit z-index keeps it above the video
   background but below the text. */
.elementor-2581 .elementor-element-71021eb::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	pointer-events: none;
	opacity: 1 !important;
	background-color: transparent !important;
	background-image: linear-gradient(
		100deg,
		rgba(28, 40, 31, 0.86) 0%,
		rgba(28, 40, 31, 0.58) 30%,
		rgba(28, 40, 31, 0.15) 58%,
		rgba(28, 40, 31, 0) 78%
	) !important;
}

/* Lift the copy above the scrim. */
.elementor-2581 .elementor-element-71021eb > .elementor-element {
	position: relative;
	z-index: 2;
}

/* Heading: drop the manual offset + 1.1 scale, relax the line-height, add a
   soft shadow for legibility, keep the site title font. */
.elementor-2581 .elementor-element-cd1b4aa {
	transform: none !important;
	margin: 0 0 6px !important;
	max-width: 560px;
	align-self: flex-start !important;
}
.elementor-2581 .elementor-element-cd1b4aa .elementor-heading-title {
	/* Match the rest of the lander's headings (Open Sans), not the hero's
	   baked-in IBM Plex Sans Thai Looped. Responsive size for a bold hero. */
	font-family: "Open Sans", sans-serif !important;
	font-size: clamp(38px, 5vw, 62px) !important;
	line-height: 1.06 !important;
	letter-spacing: -0.5px !important;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.40);
}

/* Eyebrow / kicker line above the headline. */
.elementor-2581 .elementor-element-cd1b4aa .hero-eyebrow {
	display: block;
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: #b7c9aa;
	margin-bottom: 16px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Accent keyword inside the headline (fresh leaf green). */
.elementor-2581 .elementor-element-cd1b4aa .hero-accent {
	color: #a7d18a !important;
}

/* Subtext: replace Arial Black / cyan with the body font in warm off-white,
   readable size, comfortable line spacing. */
.elementor-2581 .elementor-element-98245b4 {
	max-width: 560px;
	margin-top: 4px;
}
.elementor-2581 .elementor-element-98245b4,
.elementor-2581 .elementor-element-98245b4 * {
	font-family: var(--wd-text-font), "Open Sans", sans-serif !important;
	color: #f6efe4 !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1.85 !important;
	letter-spacing: 0.2px !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.40);
}
.elementor-2581 .elementor-element-98245b4 p {
	margin: 0 0 4px !important;
}

/* Button: on-brand WoodMart green CTA, rounded, with a soft shadow and hover. */
.elementor-2581 .elementor-element-35eba53 {
	margin-top: 26px;
}
.elementor-2581 .elementor-element-35eba53 .elementor-button {
	/* Use the site's own primary green (same var the sale badges use) so the
	   CTA matches the rest of WoodMart instead of being a one-off green.
	   Fallback is the resolved theme value rgb(122,179,139) so it matches even
	   if the var isn't inherited at the hero. */
	background-color: var(--wd-primary-color, rgb(122, 179, 139)) !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 15px 36px !important;
	font-family: var(--wd-text-font), "Open Sans", sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	box-shadow: 0 8px 22px rgba(35, 45, 35, 0.38) !important;
	transition: filter 0.2s ease, transform 0.2s ease;
}
.elementor-2581 .elementor-element-35eba53 .elementor-button:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ *
 * FunnelKit slide-cart — keep localized prices on one line.
 *
 * Hungarian (and other locales) format thousands with a SPACE, e.g.
 * "86 400,00 Ft". In the narrow slide-cart price column that space becomes a
 * line-break opportunity, so the amount splits across two lines ("86" / "400,00
 * Ft"). Forcing nowrap on the price amounts keeps each number intact — the
 * struck-through old price and the current price simply stack as two clean
 * lines. Scoped to the FunnelKit cart modal so it can't affect other prices.
 * ------------------------------------------------------------------ */
#fkcart-modal .fkcart-item-price,
#fkcart-modal .fkcart-summary-amount,
#fkcart-modal .fkcart-checkout--price,
/* Catch-all: every WooCommerce price amount inside the cart modal, whatever
   FunnelKit wrapper it lives in. Prices should never wrap in a cart. */
#fkcart-modal .woocommerce-Price-amount,
#fkcart-modal .amount {
	white-space: nowrap;
}

/* FunnelKit cart line item — real markup (templates/cart/item-single.php):
   .fkcart-item-info.fkcart-item-wrap-start > .fkcart-item-meta (title/qty)
                                            + .fkcart-item-misc (price column).
   Long HUF prices ("86 400,00 Ft") overflow FunnelKit's 40% price column, so
   the "Ft" currency gets clipped at the panel edge. Widen the price column,
   let the title column yield, and trim the price font so the whole amount —
   currency included — stays on one line. The .fkcart-item-wrap-start scope
   keeps upsell carousel items (which lack that class) untouched. */
body #fkcart-modal .fkcart-item-wrap-start > .fkcart-item-meta {
	max-width: 54% !important;
	min-width: 0;
}
body #fkcart-modal .fkcart-item-wrap-start > .fkcart-item-misc {
	max-width: 46% !important;
	flex-shrink: 0;
}
/* WoodMart enlarges the inner .amount/ins (~20px) inside the price, overriding
   FunnelKit's 14px and overflowing the column. Force EVERY descendant of the
   price down with a wildcard so it shrinks no matter how WooCommerce nests it
   (ins / del / span / bdi / .amount). The "Save X%" sits outside
   .fkcart-item-price, so it keeps its own size. */
body #fkcart-modal .fkcart-item-misc .fkcart-item-price,
body #fkcart-modal .fkcart-item-misc .fkcart-item-price * {
	font-size: 13px !important;
	line-height: 1.4 !important;
}
body #fkcart-modal .fkcart-item-misc .fkcart-item-price del,
body #fkcart-modal .fkcart-item-misc .fkcart-item-price del * {
	font-size: 11px !important;
}