/**
 * Liebherr Ukraine — custom theme layer.
 * Loaded via Chameleon "custom style" setting (config_custom_style_chameleon = custom_liebherr).
 * Never edit stylesheet.css or other core theme files — all Liebherr-specific
 * overrides live here so theme updates stay safe.
 *
 * Chameleon is driven by CSS custom properties defined in
 * stylesheet/theme_scheme/theme_<N>.css (active scheme: theme_12, blue #1060C1).
 * That file loads BEFORE this one, so redefining its tokens here re-skins the
 * whole theme at once — far more reliable than overriding components one by one.
 * Exception: sticker colours live in dynamic_style.css, which loads AFTER this
 * file, so those are changed in admin settings instead (see .docs/DB_DIFF.md).
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
	/* Liebherr palette */
	--lh-ink: #16181A;
	--lh-ink-soft: #2C3033;
	--lh-text: #41464A;
	--lh-text-muted: #6B7075;
	--lh-text-faint: #9AA0A5;
	--lh-border: #E6E8EA;
	--lh-bg-soft: #F6F7F8;
	--lh-white: #fff;
	--lh-ok: #2E7D32;
	--lh-accent: #2779C4;
	--lh-accent-hover: #1F65A7;
	--lh-accent-soft: #EAF3FB;
	--lh-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	/* --- Chameleon design tokens remapped to the Liebherr palette --- */
	--main-bg: #2779C4;
	--main-text-color: #2779C4;
	--primary-bg: #2779C4;

	--btn-menu-color: #ffffff;
	--btn-menu-color-h: #ffffff;
	--btn-menu-bg: #2779C4;
	--btn-menu-bg-h: #1F65A7;
	--mob-menu-svg-color: #2779C4;
	--mob-menu-gh-bg: #2779C426;

	--cart-total-color: #ffffff;
	--cart-total-bg: #2779C4;
	--wishlist-total-color: #ffffff;
	--wishlist-total-bg: #2779C4;
	--compare-total-color: #ffffff;
	--compare-total-bg: #2779C4;
	--viewed-total-color: #ffffff;
	--viewed-total-bg: #2779C4;

	--btn-add-to-cart-color: #2779C4;
	--btn-add-to-cart-bg: #ffffff;
	--btn-add-to-cart-border-color: #2779C4;
	--btn-add-to-cart-color-h: #ffffff;
	--btn-add-to-cart-bg-h: #2779C4;
	--btn-add-to-cart-color-active: #ffffff;
	--btn-add-to-cart-bg-active: #2779C4;
	--btn-add-to-cart-color-active-h: #ffffff;
	--btn-add-to-cart-bg-active-h: #1F65A7;

	--btn-add-to-cart-pp-color: #ffffff;
	--btn-add-to-cart-pp-bg: #2779C4;
	--btn-add-to-cart-pp-color-h: #ffffff;
	--btn-add-to-cart-pp-bg-h: #1F65A7;
	--btn-add-to-cart-pp-color-active: #ffffff;
	--btn-add-to-cart-pp-bg-active: #1F65A7;
	--btn-add-to-cart-pp-color-active-h: #ffffff;
	--btn-add-to-cart-pp-bg-active-h: #1F65A7;

	--btn-notify-stock-color: #2779C4;
	--btn-notify-stock-bg: #ffffff;
	--btn-notify-stock-color-h: #ffffff;
	--btn-notify-stock-bg-h: #2779C4;

	--btn-primary-color: #ffffff;
	--btn-primary-bg: #2779C4;
	--btn-primary-color-h: #ffffff;
	--btn-primary-bg-h: #1F65A7;

	--btn-newsletter-bg: #2779C4;
	--btn-newsletter-hover: #1F65A7;
	--chm-btn-white-color-h: #2779C4;

	--ribbon-bg: #2779C4;
	--ribbon-bg-after: #1F65A7;
}

/**
 * Sticker colours are defined in dynamic_style.css, which loads AFTER this file.
 * Doubling the pseudo-class raises specificity (0,2,0 vs 0,1,0) so these win
 * regardless of order. The same values are set in admin settings, so a future
 * theme-settings save regenerates dynamic_style.css consistently either way.
 */
:root:root {
	--special-text-color: #ffffff;
	--special-bg-color: #2779C4;
	--special-icon-color: #ffffff;
	--newproduct-text-color: #ffffff;
	--newproduct-bg-color: #2779C4;
	--newproduct-icon-color: #ffffff;
	--bestseller-text-color: #ffffff;
	--bestseller-bg-color: #2779C4;
	--bestseller-icon-color: #ffffff;
	--popular-text-color: #ffffff;
	--popular-bg-color: #2779C4;
	--popular-icon-color: #ffffff;
}

/* Base typography */
body,
.btn,
input,
select,
textarea,
.title-module,
.product-thumb .caption {
	font-family: var(--lh-font);
}
body {
	color: var(--lh-ink);
}
h1, h2, h3, h4, h5, h6,
.modal-title,
.title-module > span,
.product-thumb .caption h4,
.product-thumb .caption h4 a {
	font-family: var(--lh-font);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--lh-ink);
}
a {
	color: var(--lh-ink);
}
a:hover {
	color: var(--lh-text-muted);
}

/* Top bar: brand statement left, delivery/warranty pushed right (2nd item = split point) */
#top {
	background: var(--lh-ink);
}
/* the theme paints .container separately, which left the dark bar showing only
   at the screen edges */
#top,
#top .container {
	background: var(--lh-ink);
}
#top .header-nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	gap: 4px 24px;
}
#top .header-nav-links li:nth-child(2) {
	margin-left: auto;
}
#top .header-nav-links .btn-link,
#top .header-nav-links .btn-link:hover,
#top .header-nav-links .btn-link:focus {
	color: var(--lh-white);
	font-size: 13px;
	text-decoration: none;
}

/* The catalog burger opens the vertical menu, which duplicates the mega-menu —
   its items are switched off in megamenuvh, so hide the trigger too. Desktop
   only (visible-md/lg); the mobile menu has its own button. */
.box-menu-top {
	display: none !important;
}

/* Search: the theme forces `border: 0 !important` on the input itself, so the
   frame goes on the input-group wrapper — one unbroken border, no seam between
   field and button. */
/* No `overflow: hidden` here: the autocomplete panel is an absolutely
   positioned SIBLING of the input inside this wrapper, so clipping the wrapper
   hides the suggestions entirely. Children are transparent, so the wrapper's
   own radius is enough to keep the corners clean. */
.header-search.input-group {
	border: 1.5px solid var(--lh-border);
	border-radius: 8px;
	background: var(--lh-white);
	transition: border-color .15s ease;
}
.header-search.input-group:focus-within {
	border-color: var(--lh-ink);
}
.header-search .form-control.search-autocomplete {
	background-color: transparent;
	box-shadow: none;
	font-family: var(--lh-font);
	font-size: 15px;
	color: var(--lh-ink);
	height: 42px;
}
.header-search .form-control.search-autocomplete::placeholder {
	color: var(--lh-text-faint);
}
.header-search .button_search {
	background: transparent;
	border: 0;
	border-radius: 0 8px 8px 0;
}
.header-search .btn-search {
	height: 42px;
	color: var(--lh-ink);
}

/* Search autocomplete dropdown */
.header-search .search_autocomplete {
	border: 1px solid var(--lh-border);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(22, 24, 26, .10);
	padding: 6px;
	overflow: hidden;
}
.header-search .search_autocomplete a.autosearch_link {
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0;
	font-family: var(--lh-font);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--lh-ink);
}
.header-search .search_autocomplete a.autosearch_link:hover {
	background: var(--lh-bg-soft);
	color: var(--lh-ink);
}
.header-search .search_autocomplete li + li {
	border-top: 1px solid var(--lh-border);
}
.header-search .search_autocomplete .search-view-all-result {
	color: var(--lh-ink);
	font-weight: 700;
}

/**
 * Header phone and working hours.
 */
.contact-header {
	position: relative;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 14px;
	row-gap: 1px;
}
.contact-header .dropdown-toggle {
	display: contents;
}
.contact-header .additional-tel:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}
.contact-header .drop-icon-info {
	grid-column: 2;
	grid-row: 1;
}
.contact-header .text_after_phone {
	grid-column: 1 / span 2;
	grid-row: 2;
	text-align: left;
	white-space: nowrap;
}
.contact-header .additional-tel a {
	font-family: var(--lh-font);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: var(--lh-ink);
	white-space: nowrap;
}
.contact-header .text_after_phone {
	font-size: 12px;
	color: var(--lh-text-muted);
}

/**
 * Logo. The SVG carries only a viewBox (1000x124), no intrinsic width/height,
 * and the theme only emits width/height attributes when logo_iwh_status is on
 * (it isn't). Without this the browser falls back to the default replaced-element
 * size. Constrain it here instead of turning on the theme's pixel attributes.
 */
#logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 200px;
	max-width: 100%;
	isolation: isolate;
}
#logo > img,
#logo > a,
#logo > h1 {
	order: 1;
}
#logo img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
}
.lh-logo-copy {
	order: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 4px;
	white-space: nowrap;
}
.lh-logo-tagline {
	color: var(--lh-ink);
	font-family: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(11.25px, 1.26vw, 14.85px);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: .025em;
}
.lh-logo-shine {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	order: 3;
	width: min(200px, 100%);
	aspect-ratio: 1000 / 124;
	background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .12) 43%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, .12) 57%, transparent 66%);
	background-size: 280% 100%;
	background-position: 190% 0;
	-webkit-mask: url('/image/catalog/logo.svg') left center / contain no-repeat;
	mask: url('/image/catalog/logo.svg') left center / contain no-repeat;
	mix-blend-mode: screen;
	opacity: 0;
	animation: lh-logo-shine 12s ease-in-out infinite;
	pointer-events: none;
}
@keyframes lh-logo-shine {
	0%, 78% { background-position: 190% 0; opacity: 0; }
	80% { opacity: .2; }
	87% { background-position: -90% 0; opacity: .9; }
	90%, 100% { background-position: -90% 0; opacity: 0; }
}
@media (max-width: 767px) {
	#logo {
		width: 150px;
	}
	#logo img {
		max-width: 150px;
	}
	.lh-logo-shine {
		width: min(150px, 100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.lh-logo-shine {
		animation: none;
		display: none;
	}
}

/**
 * Mega-menu panels (theme's own megamenuvh, freelink type).
 * Markup comes from common/dopmenu.twig:
 *   .dropdown-menu.nsmenu-type-category-full-image
 *     .chm-list-menu > .chm-list-menu-item-child (links) + .menu-add-html (promo)
 */
.nav-dopmenu > li.dropdown > .parent-link .item-name {
	font-family: var(--lh-font);
	font-weight: 500;
	font-size: 14.5px;
	color: var(--lh-ink);
}
#additional-menu .nav-dopmenu > li.open > .parent-link .item-name,
#additional-menu .nav-dopmenu > li > .parent-link:hover .item-name {
	font-weight: 500;
	text-decoration: none;
	color: var(--lh-accent);
}
#additional-menu .nav-dopmenu .dropdown-menu.nsmenu-type-category-full-image {
	border: 1px solid var(--lh-border);
	box-shadow: 0 18px 42px rgba(22, 24, 26, .09);
	background: var(--lh-white);
	padding: 22px 28px;
}
.nav-dopmenu .chm-list-menu {
	gap: clamp(28px, 3vw, 44px);
	align-items: stretch;
}
#additional-menu .nav-dopmenu .chm-list-menu-item-child {
	flex: 1 1 auto;
	padding: 0;
}
#additional-menu .nav-dopmenu .chm-list-menu .menu-add-html {
	flex: 0 0 clamp(220px, 22vw, 280px);
	width: clamp(220px, 22vw, 280px);
	margin: 0;
	padding: 0;
}

/* sub-links: label left, count slot right (counts stay empty until import) */
.nav-dopmenu .nsmenu-parent-block {
	padding: 0 18px 0 0;
}
#additional-menu .nsmenu-type-category-full-image .nsmenu-parent-block {
	margin-bottom: 4px;
}
#additional-menu .nav-dopmenu a.nsmenu-parent-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 38px;
	padding: 8px 0;
	border-left: 0;
	font-family: var(--lh-font);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--lh-ink);
	white-space: normal;
	transition: color .15s ease, background-color .15s ease;
}
#additional-menu .nav-dopmenu a.nsmenu-parent-title:hover {
	background: transparent;
	border-left: 0;
	color: var(--lh-accent);
	text-decoration: none;
}
.nav-dopmenu a.nsmenu-parent-title .lh-mm-note {
	font-size: 13px;
	font-weight: 500;
	color: var(--lh-text-faint);
	white-space: nowrap;
}

/* promo card ("Порада фахівця") */
.lh-mm-promo {
	background: var(--lh-bg-soft);
	border-radius: 12px;
	padding: 22px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.lh-mm-promo-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lh-text-muted);
	margin: 0;
}
.lh-mm-promo-title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--lh-ink);
	margin: 0;
}
.lh-mm-promo-text {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--lh-text);
	margin: 0;
}
.lh-mm-promo-btn {
	margin-top: auto;
	background: var(--lh-ink);
	color: var(--lh-white);
	border: 0;
	border-radius: 6px;
	padding: 13px 18px;
	font-family: var(--lh-font);
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
}
.lh-mm-promo-btn:hover {
	background: var(--lh-ink-soft);
}

/* panel heading (added by liebherr_megamenu.ocmod.xml) */
.lh-mm-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 16px;
}
.lh-mm-head-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lh-text);
}
.lh-mm-head-lead {
	font-size: 13.5px;
	color: var(--lh-text-muted);
}

/**
 * Hero slide (chameleon_megasliderpro, slide type 2 = text left / image right).
 * Structure from the theme template:
 *   .item-ms > img.bg-image-slider          <- the product photo
 *            > .ms-caption (absolute overlay)
 *                > .slide-type2.container.dflex
 *                    > .row-slider-info > .msp-title/.sub-title
 * Eyebrow, headline, lead, buttons, checklist and badge are HTML inside the
 * slide's title/sub_title fields, so they stay editable in admin.
 */
.megasliderpro {
	margin-top: 0;
}
.megasliderpro .swiper {
	box-shadow: none;
	border: 1px solid var(--lh-border);
}
/* photo sits in a soft panel on the right half; object-fit:contain from the
   theme keeps it centred inside that box */
.megasliderpro .bg-image-slider {
	width: 52%;
	margin-left: auto;
	background-color: var(--lh-bg-soft);
	border-radius: 14px;
	padding: clamp(12px, 2vw, 28px);
	min-height: clamp(320px, 40vw, 480px);
}
.megasliderpro .slide-type2 .row-slider-info {
	width: min(52%, 620px);
	justify-content: center;
	padding: clamp(16px, 3vw, 56px);
	padding-right: clamp(12px, 2vw, 32px);
}
.megasliderpro .slide-type2 .msp-title {
	margin-top: 0;
}

/* eyebrow */
.lh-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lh-text-muted);
	margin-bottom: 18px;
}
.lh-hero-eyebrow::before {
	content: '';
	width: 26px;
	height: 2px;
	background: var(--lh-ink);
	flex-shrink: 0;
}

/* headline: first line ink, second line muted */
.megasliderpro .msp-title .text-title {
	font-family: var(--lh-font);
	font-weight: 800;
	font-size: clamp(30px, 4.4vw, 56px);
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: var(--lh-ink);
}
.lh-hero-line {
	display: block;
}
.lh-hero-line--soft {
	color: var(--lh-text-muted);
}

.megasliderpro .sub-title .text-sub-title {
	font-family: var(--lh-font);
	font-weight: 500;
}
.lh-hero-lead {
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.6;
	color: var(--lh-text);
	max-width: 52ch;
	margin: 18px 0 26px;
}

/* CTA pair */
.lh-hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}
.lh-hero-btn {
	display: inline-block;
	background: var(--lh-ink);
	color: var(--lh-white);
	border: 1.5px solid var(--lh-ink);
	border-radius: 6px;
	padding: 14px 24px;
	font-family: var(--lh-font);
	font-weight: 700;
	font-size: 15.5px;
	cursor: pointer;
	white-space: nowrap;
}
.lh-hero-btn:hover,
.lh-hero-btn:focus {
	background: var(--lh-ink-soft);
	border-color: var(--lh-ink-soft);
	color: var(--lh-white);
}
.lh-hero-btn--ghost {
	background: var(--lh-white);
	color: var(--lh-ink);
	border-color: var(--lh-ink);
}
.lh-hero-btn--ghost:hover {
	background: var(--lh-bg-soft);
	color: var(--lh-ink);
	border-color: var(--lh-ink);
}

/* checklist */
.lh-hero-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--lh-text);
}
.lh-hero-checks li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.lh-hero-checks li::before {
	content: '✓';
	font-weight: 800;
	color: var(--lh-ink);
}

/* badge over the photo panel */
.lh-hero-badge {
	position: absolute;
	top: clamp(16px, 2.5vw, 32px);
	right: clamp(16px, 2.5vw, 32px);
	background: var(--lh-white);
	border: 1px solid var(--lh-border);
	border-radius: 10px;
	padding: 12px 16px;
	box-shadow: 0 8px 24px rgba(22, 24, 26, .07);
	z-index: 3;
}
.lh-hero-badge-label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lh-text-muted);
}
.lh-hero-badge-value {
	display: block;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--lh-ink);
}

/* single slide: arrows are noise */
.megasliderpro .swiper:not(.has-many) .swiper-ms-arrow {
	display: none;
}
.megasliderpro .swiper-ms-pagination .swiper-pagination-bullet-active {
	background: var(--lh-ink);
}

@media (max-width: 767px) {
	.megasliderpro .bg-image-slider {
		width: 100%;
		margin-left: 0;
	}
	.megasliderpro .slide-type2 .row-slider-info {
		width: 100%;
	}
	.lh-hero-badge {
		display: none;
	}
}

/* Section headings — shared wrapper across most Chameleon widgets */
.title-module > span {
	font-size: clamp(22px, 3vw, 32px);
}

/* Catalog grid (chameleon_wallcategory) — bordered card instead of raw image tile */
.item-category {
	border: 1px solid var(--lh-border);
	border-radius: 12px;
	padding: 18px;
	background: var(--lh-white);
	transition: border-color .2s ease;
}
.item-category:hover {
	border-color: var(--lh-ink);
}
.wall-cat-name a {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
	color: var(--lh-ink);
}
/* No category photos yet — a bare "no image" placeholder looks worse than a
   clean text card. Drop it until real imagery is uploaded. */
.item-category img[src*="placeholder"] {
	display: none;
}
.item-category .wall-cat-image:has(img[src*="placeholder"]) {
	display: none;
}

/* "Hits" tabs (chameleon_product_categorytabs) */
.nav-tabs.my-tabs > li > a,
.nav-tabs.my-tabs > li > button {
	border-radius: 6px;
	font-weight: 600;
	color: var(--lh-text);
	border: 1.5px solid var(--lh-border);
}
.nav-tabs.my-tabs > li.active > a,
.nav-tabs.my-tabs > li.active > button,
.tabs__active_line {
	background: var(--lh-ink);
	border-color: var(--lh-ink);
	color: var(--lh-white);
}

/* Product cards — thin border instead of heavy shadow, per reference design */
.product-thumb {
	border: 1px solid var(--lh-border);
	border-radius: 12px;
	box-shadow: none;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.product-thumb:hover {
	border-color: var(--lh-border);
	box-shadow: 0 12px 32px rgba(22, 24, 26, .08);
}
.price-new,
.product-thumb .price {
	color: var(--lh-ink);
	font-weight: 800;
}
.price-old {
	color: var(--lh-text-faint);
}

/* Reviews (chameleon_reviews_store) — thin border cards, no heavy shadow */
.item-rs {
	border: 1px solid var(--lh-border);
	border-radius: 12px;
	background: var(--lh-white);
}
.chm-btn.chm-btn-grey {
	background: var(--lh-white);
	border: 1.5px solid var(--lh-border);
	color: var(--lh-text);
}
.chm-btn.chm-btn-grey:hover {
	border-color: var(--lh-ink);
	color: var(--lh-ink);
}

/* Service section (chameleon_banner_blocks, repurposed as Delivery/Service/Exchange) */
.banner-blocks-container {
	border: 1px solid var(--lh-border);
	border-radius: 14px;
	background: var(--lh-border);
	gap: 1px;
}
.banner-blocks-container .banner-item {
	background: var(--lh-white);
	padding: 24px;
}
.banner-title {
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--lh-ink);
	margin-bottom: 6px;
}
.banner-description {
	color: var(--lh-text-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* Stat block ("Чому купувати в офіційного представника") — native html module */
.lh-stats {
	border: 1px solid var(--lh-border);
	border-radius: 16px;
	padding: 32px;
	margin: 40px 0;
}
.lh-stats-intro h2 {
	font-size: 28px;
	margin-bottom: 10px;
}
.lh-stats-intro p {
	color: var(--lh-text-muted);
	font-size: 16px;
	line-height: 1.6;
	max-width: 60ch;
	margin: 0 0 24px;
}
.lh-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}
.lh-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.lh-stat-num {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--lh-ink);
}
.lh-stat-num small {
	font-size: 16px;
	font-weight: 700;
	color: var(--lh-text-muted);
}
.lh-stat-title {
	font-weight: 600;
	font-size: 15px;
	color: var(--lh-text);
}

/* Lead-capture section — dark two-column, CTA reuses the existing callback popup */
.lh-lead {
	background: var(--lh-ink);
	color: var(--lh-white);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 48px);
	margin: 40px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}
.lh-lead-text h2 {
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 14px;
	color: var(--lh-white);
}
.lh-lead-text p {
	color: #A9AEB2;
	font-size: 16px;
	line-height: 1.6;
	max-width: 46ch;
	margin: 0;
}
.lh-lead-card {
	background: var(--lh-white);
	color: var(--lh-ink);
	border-radius: 12px;
	padding: 24px;
}
.lh-lead-card-title {
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 16px;
}
.lh-lead-btn {
	width: 100%;
	background: var(--lh-ink);
	color: var(--lh-white);
	border: 0;
	border-radius: 8px;
	padding: 16px;
	font-weight: 800;
	font-size: 16.5px;
	cursor: pointer;
	font-family: var(--lh-font);
}
.lh-lead-btn:hover {
	background: var(--lh-ink-soft);
}
.lh-lead-card-note {
	color: var(--lh-text-faint);
	font-size: 12.5px;
	line-height: 1.5;
	margin: 12px 0 0;
}

/* FAQ accordion — native <details>/<summary>, no JS */
.lh-faq {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	margin: 40px 0;
}
.lh-faq-intro h2 {
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 12px;
}
.lh-faq-intro p {
	color: var(--lh-text-muted);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}
.lh-faq-item {
	border-top: 1px solid var(--lh-border);
}
.lh-faq-item:last-child {
	border-bottom: 1px solid var(--lh-border);
}
.lh-faq-item summary {
	padding: 20px 0;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--lh-ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.lh-faq-item summary::-webkit-details-marker {
	display: none;
}
.lh-faq-item summary::after {
	content: '+';
	color: var(--lh-text);
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}
.lh-faq-item[open] summary::after {
	content: '\2212';
}
.lh-faq-item p {
	color: var(--lh-text);
	font-size: 15.5px;
	line-height: 1.65;
	max-width: 62ch;
	margin: 0 0 20px;
}

/* Mobile sticky bar (Call + CTA) — hidden on desktop/tablet */
.lh-mobile-bar {
	display: none;
}
@media (max-width: 767px) {
	.lh-mobile-bar {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		padding: 10px 14px;
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--lh-border);
	}
}
.lh-mobile-bar-call,
.lh-mobile-bar-cta {
	flex: 1;
	text-align: center;
	border-radius: 8px;
	padding: 14px;
	font-weight: 700;
	font-size: 15.5px;
	font-family: var(--lh-font);
}
.lh-mobile-bar-call {
	border: 1.5px solid var(--lh-ink);
	color: var(--lh-ink);
}
.lh-mobile-bar-cta {
	background: var(--lh-ink);
	color: var(--lh-white);
	border: 0;
	cursor: pointer;
}

/* SEO text block — native html module */
.lh-seo-text {
	max-width: 76ch;
	margin: 40px 0;
}
.lh-seo-text p {
	color: var(--lh-text);
	font-size: 15.5px;
	line-height: 1.7;
	margin: 0 0 14px;
}

/* Footer */
#footer,
#logo-footer {
	font-family: var(--lh-font);
}
#footer a:hover {
	color: var(--lh-accent);
}
.lh-mm-promo-btn,
.lh-hero-btn,
.lh-lead-btn,
.lh-mobile-bar-cta {
	background: var(--lh-accent);
	border-color: var(--lh-accent);
}
.lh-mm-promo-btn:hover,
.lh-hero-btn:hover,
.lh-hero-btn:focus,
.lh-lead-btn:hover,
.lh-mobile-bar-cta:hover {
	background: var(--lh-accent-hover);
	border-color: var(--lh-accent-hover);
}
body * {
	border-radius: 0 !important;
}
body .lh-callout__hotspot,
body .lh-callout__hotspot span {
	border-radius: 50% !important;
}