/*
 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 (ALL languages) — full-bleed breakout ONLY.
 *
 * NOTE: scoped to `.home` (WordPress adds it to every language's front page),
 * NOT `.page-id-2581`/`.elementor-2581` — a numeric page ID only matches the
 * English homepage. The Elementor element IDs (71021eb…) are shared across
 * the WPML translation copies, so `.home .elementor-element-…` matches all.
 *
 * The EN fold was rebuilt 2026-08 with native Elementor widgets (headings
 * d371a74/1b9efc5, button 16ba79d, slideshow background) — its alignment,
 * padding, gaps, fonts and colors are managed IN ELEMENTOR. Do not add
 * !important layout/typography rules for the fold here; they silently
 * override the Elementor UI controls (that mistake cost a debugging round).
 *
 * The container is e-con-full, but WoodMart wraps page content in a boxed
 * <main class="...container">, so "full" only fills that column. These
 * rules break the hero out to the true viewport width; everything else
 * about the fold belongs to Elementor (new fold) or the LEGACY section
 * below (not-yet-retranslated language homepages).
 * ------------------------------------------------------------------ */
.home .elementor-element.elementor-element-71021eb {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Paint the ACTUAL first slide instantly, from CSS, so the hero opens on a
	   real photo instead of a brown flash. Elementor's container background
	   slideshow is 100% JS-driven — no slide <img>/background exists in the
	   initial HTML — so before elementor-pro/frontend.min.js + swiper run (both
	   deferred) the container would show only its background-color. This URL is
	   slide 1 of that gallery, so when the slideshow mounts it fades the same
	   frame in on top → seamless, no pop. Kept in exact sync with the parse-time
	   preload in functions.php (same URL = one fetch, reused).
	   Fallback color is sampled from the photo (avg ~#9aaeac), NOT the old warm
	   brown: for the split-second before the 110 KB webp decodes it now reads as
	   "photo loading", never a dark-brown flash under a light, teal image.
	   (Legacy /xx/ homepages set their own background-image at higher specificity
	   via the :has(cd1b4aa) rule below, so they are unaffected.) */
	background-color: #9aaeac;
	background-image: url("/wp-content/uploads/2026/08/Orca-Puzzle-Image.png.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	position: relative;
}

/* Default space below the hero. Set as the Elementor container variable at
   LOW specificity on purpose: the container's own Advanced → Margin in the
   Elementor UI writes the same variable at higher specificity and wins. */
.elementor-element-71021eb {
	--margin-bottom: 48px;
}

/* Pull the hero flush under the header. WoodMart's base.css gives the content
   column (.wd-content-layout) padding-block:40px, i.e. a 40px white gap between
   the header and the hero. Zero the TOP padding on the homepage only; the
   bottom padding is kept (it spaces the last section off the footer). */
.home .wd-content-layout {
	padding-top: 0 !important;
}

/* ------------------------------------------------------------------ *
 * LEGACY fold — language homepages still on the pre-2026-08 markup
 * (custom-coded heading cd1b4aa / subtext 98245b4 / button 35eba53 over
 * the CSS mosaic still image). Container-level rules are gated on
 * :has(.elementor-element-cd1b4aa) and the rest target the old widget
 * IDs, so ALL of this is inert on the new Elementor-native fold and
 * dies by itself as each language homepage is re-translated.
 *
 * 🧹 DELETE this whole section once no /xx/ homepage renders
 * .elementor-element-cd1b4aa anymore.
 * ------------------------------------------------------------------ */
.home .elementor-element.elementor-element-71021eb:has(.elementor-element-cd1b4aa) {
	/* pad the copy back to the site content column, bottom-centre the stack */
	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;
	flex-wrap: nowrap !important;
	justify-content: flex-end !important;
	align-items: center !important;
	align-content: center !important;
	padding-top: 56px !important;
	padding-bottom: 64px !important;
	/* Legacy mosaic still image (~2MB PNG — kept OFF the new fold, which
	   uses an Elementor slideshow background instead). */
	background-image: url("/wp-content/uploads/2026/08/Colorful-Puzzle-Art-1.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* 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. */
.home .elementor-element-71021eb:has(.elementor-element-cd1b4aa)::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(
		to top,
		rgba(28, 40, 31, 0.88) 0%,
		rgba(28, 40, 31, 0.55) 26%,
		rgba(28, 40, 31, 0.18) 50%,
		rgba(28, 40, 31, 0) 75%
	) !important;
}

/* Lift the copy above the scrim. */
.home .elementor-element-71021eb:has(.elementor-element-cd1b4aa) > .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. */
.home .elementor-element-cd1b4aa {
	transform: none !important;
	margin: 0 auto 6px !important;
	max-width: 640px;
	align-self: center !important;
	text-align: center !important;
}
.home .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. */
.home .elementor-element-cd1b4aa .hero-eyebrow {
	display: block;
	margin-top: 26px;  /* breathing room above the eyebrow */
	font-family: "Open Sans", sans-serif;
	font-size: clamp(17px, 1.7vw, 22px); /* eyebrow size — was 14px; edit this value to resize */
	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). */
.home .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. */
.home .elementor-element-98245b4 {
	max-width: 560px;
	margin-top: 4px;
}
.home .elementor-element-98245b4,
.home .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);
}
.home .elementor-element-98245b4 p {
	margin: 0 0 4px !important;
}

/* Button: on-brand WoodMart green CTA, rounded, with a soft shadow and hover. */
.home .elementor-element-35eba53 {
	margin-top: 26px;
	align-self: center !important;
	text-align: center !important;
}
/* Centre the button itself within its (now centred) widget box. */
.home .elementor-element-35eba53 .elementor-widget-container,
.home .elementor-element-35eba53 .elementor-button-wrapper {
	text-align: center !important;
}
.home .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;
}
.home .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;
}

/* --- Product description timeline: clean separated sections -----------------
 * The product description uses a WoodMart wd_timeline with 3 fixed items whose
 * repeater ids are stable across every puzzle (1110001/2/3 — see the rollout).
 * No colour fills: WoodMart's columns carry a white background that looked like
 * floating cards, so make them transparent and just separate each section with a
 * thin divider + spacing. Scoped to the puzzle ids so book-nook timelines are
 * untouched. */
.wd-timeline-item.elementor-repeater-item-1110001,
.wd-timeline-item.elementor-repeater-item-1110002,
.wd-timeline-item.elementor-repeater-item-1110003 {
	padding: 46px 8px !important;
	margin: 0 !important;
	background: none !important;
	border-bottom: 1px solid #ececec !important;
}
.elementor-repeater-item-1110001 .timeline-col, .elementor-repeater-item-1110001 .wd-timeline-content,
.elementor-repeater-item-1110002 .timeline-col, .elementor-repeater-item-1110002 .wd-timeline-content,
.elementor-repeater-item-1110003 .timeline-col, .elementor-repeater-item-1110003 .wd-timeline-content {
	background: transparent !important;
	box-shadow: none !important;
}
.elementor-repeater-item-1110001 .wd-timeline-image img,
.elementor-repeater-item-1110002 .wd-timeline-image img,
.elementor-repeater-item-1110003 .wd-timeline-image img {
	border-radius: 16px !important;
}

/* Shared sections embedded via [elementor-template] shortcode (feature callouts /
 * reviews / best-selling / FAQ): Elementor's container CSS zeroes --kit-widget-spacing
 * on the front-end, collapsing the headings' `calc(var(--kit-widget-spacing) - 5px)`
 * margins (the editor still uses 20px). Restore it INSIDE the embedded sections only,
 * so spacing matches the editor without affecting the rest of the site. */
.single-product .elementor-widget-shortcode .elementor-widget:not(:last-child) {
	--kit-widget-spacing: 20px;
}

/* ------------------------------------------------------------------ *
 * Cart page — WoodMart "Cart Totals" shipping methods: clean rows with
 * brand-green custom radios, to match the FunnelKit checkout styling.
 * WoodMart leaves these as the default (blue) browser radio floated to
 * the right; reset to a tidy left-aligned row.  Scoped to .woocommerce-cart.
 * ------------------------------------------------------------------ */
/* Drop the "Shipment" row label — the method rows speak for themselves. */
.woocommerce-cart .woocommerce-shipping-totals.shipping > th {
	display: none !important;
}
.woocommerce-cart .woocommerce-shipping-totals.shipping > td {
	width: 100% !important;
	text-align: left !important;
}

/* No inner box — the methods sit inline and full-width like the Subtotal /
   Total rows. The selected row's green wash bleeds to the Cart-Totals box
   edges (negative margin + matching padding keeps the text aligned). */
.woocommerce-cart .woocommerce-shipping-methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce-cart .woocommerce-shipping-methods li {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	margin: 0 -20px;
	position: static !important;
	transition: background-color 0.15s ease;
}
.woocommerce-cart .woocommerce-shipping-methods li + li {
	border-top: 1px solid #ececec;
}
/* Selected row: full-width green wash, side to side. */
.woocommerce-cart .woocommerce-shipping-methods li:has(input.shipping_method:checked) {
	background: #eef7ef;
}
/* Brand-green custom radio on the left (undo WoodMart's floated blue default). */
.woocommerce-cart .woocommerce-shipping-methods li input[type="radio"].shipping_method {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: static !important;
	float: none !important;
	order: -1;
	flex: 0 0 auto;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid #c5ccc7 !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.woocommerce-cart .woocommerce-shipping-methods li input[type="radio"].shipping_method:checked {
	border-color: #66b56a !important;
	background-color: #fff !important;
	background-image: radial-gradient(circle at center, #66b56a 0 5px, transparent 6px) !important;
}
/* Label = badge + method name + price, aligned in a row, taking the leftover width. */
.woocommerce-cart .woocommerce-shipping-methods li label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Page-title band — tighter top & bottom spacing (all page types).
 *
 * WoodMart's page-title reserves `--wd-title-sp` of padding top AND bottom
 * (`padding-block: var(--wd-title-sp)`). On desktop the "large" size defaults to
 * a huge 100px (and "default" 60px), leaving a tall empty band above content
 * pages (Customer FAQ, policies, contact) as well as shop/category archives.
 * Tighten that variable per size so the band is compact everywhere. Mobile keeps
 * WoodMart's own small value (15px). Also cap the title font: WoodMart's desktop
 * "large"/"default" sizes are 78px/68px — too big — so cap them at 45px (small is
 * already 44px). `--wd-title-font-s` feeds `.wd-page-title .title` font-size.
 * Tune to taste.
 * ------------------------------------------------------------------ */
@media (min-width: 1025px) {
	/* "large" is the shop/product-category archive band (holds the title + the
	   category nav row); give it a bit more vertical breathing room than the
	   other sizes. */
	.wd-page-title.title-size-large { --wd-title-sp: 50px; --wd-title-font-s: 45px; }
	/* A bit more space between the title and the category nav row below it. */
	.wd-page-title .wd-nav-product-cat { margin-top: 22px; }
	.wd-page-title.title-size-default { --wd-title-sp: 26px; --wd-title-font-s: 45px; }
	.wd-page-title.title-size-small { --wd-title-sp: 18px; }
}

/* ------------------------------------------------------------------ *
 * Page-title heading — full caps.
 *
 * The main page-title (`.wd-page-title .entry-title` — e.g. "Shop", "Book
 * Nooks") renders in its stored case by default; force it UPPERCASE. The
 * category nav below it (.category-nav-link) keeps WoodMart's own uppercase,
 * so the whole band reads in caps.
 * ------------------------------------------------------------------ */
.wd-page-title .entry-title {
	text-transform: uppercase !important;
}

/* ------------------------------------------------------------------ *
 * Mobile side menu — language switcher flag.
 *
 * WoodMart clones the header language switcher (WPML) into the mobile side
 * menu at runtime; there the flag renders large and block-level, so the
 * language label ("ENGLISH") wraps onto its own line under the flag. Force the
 * flag small and inline with the label so it reads as one row. Scoped to the
 * mobile nav + the wpml language item so nothing else is affected.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.mobile-nav a.wpml-ls-link,
	.mobile-nav [class*="wpml-ls-item"] > a,
	.wd-nav-mobile [class*="wpml-ls-item"] > a {
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		flex-wrap: nowrap !important;
	}

	.mobile-nav a.wpml-ls-link img,
	.mobile-nav [class*="wpml-ls-item"] img.wd-nav-img,
	.mobile-nav [class*="wpml-ls-item"] img,
	.wd-nav-mobile [class*="wpml-ls-item"] img.wd-nav-img {
		width: 22px !important;
		height: auto !important;
		max-height: 16px !important;
		margin: 0 !important;
		display: inline-block !important;
		vertical-align: middle !important;
		flex: 0 0 auto !important;
	}
}