/**
 * 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-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

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

	--btn-menu-color: #ffffff;
	--btn-menu-color-h: #ffffff;
	--btn-menu-bg: #16181A;
	--btn-menu-bg-h: #2C3033;
	--mob-menu-svg-color: #16181A;
	--mob-menu-gh-bg: #16181A26;

	--cart-total-color: #ffffff;
	--cart-total-bg: #16181A;
	--wishlist-total-color: #ffffff;
	--wishlist-total-bg: #16181A;
	--compare-total-color: #ffffff;
	--compare-total-bg: #16181A;
	--viewed-total-color: #ffffff;
	--viewed-total-bg: #16181A;

	--btn-add-to-cart-color: #16181A;
	--btn-add-to-cart-bg: #ffffff;
	--btn-add-to-cart-border-color: #16181A;
	--btn-add-to-cart-color-h: #ffffff;
	--btn-add-to-cart-bg-h: #16181A;
	--btn-add-to-cart-color-active: #ffffff;
	--btn-add-to-cart-bg-active: #16181A;
	--btn-add-to-cart-color-active-h: #ffffff;
	--btn-add-to-cart-bg-active-h: #2C3033;

	--btn-add-to-cart-pp-color: #ffffff;
	--btn-add-to-cart-pp-bg: #16181A;
	--btn-add-to-cart-pp-color-h: #ffffff;
	--btn-add-to-cart-pp-bg-h: #2C3033;
	--btn-add-to-cart-pp-color-active: #ffffff;
	--btn-add-to-cart-pp-bg-active: #2C3033;
	--btn-add-to-cart-pp-color-active-h: #ffffff;
	--btn-add-to-cart-pp-bg-active-h: #2C3033;

	--btn-notify-stock-color: #16181A;
	--btn-notify-stock-bg: #ffffff;
	--btn-notify-stock-color-h: #ffffff;
	--btn-notify-stock-bg-h: #16181A;

	--btn-primary-color: #ffffff;
	--btn-primary-bg: #16181A;
	--btn-primary-color-h: #ffffff;
	--btn-primary-bg-h: #2C3033;

	--btn-newsletter-bg: #16181A;
	--btn-newsletter-hover: #2C3033;
	--chm-btn-white-color-h: #16181A;

	--ribbon-bg: #16181A;
	--ribbon-bg-after: #2C3033;
}

/**
 * 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: #16181A;
	--special-icon-color: #ffffff;
	--newproduct-text-color: #ffffff;
	--newproduct-bg-color: #16181A;
	--newproduct-icon-color: #ffffff;
	--bestseller-text-color: #ffffff;
	--bestseller-bg-color: #16181A;
	--bestseller-icon-color: #ffffff;
	--popular-text-color: #ffffff;
	--popular-bg-color: #16181A;
	--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);
}
#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;
}

/* Header CTA button ("Підібрати модель") — accent it like the primary button */
.contact-header .additional-tel a[onclick*="get_modal_callbacking"] {
	background: var(--lh-ink);
	color: var(--lh-white);
	border-radius: 6px;
	padding: 10px 18px;
	font-weight: 700;
}
.contact-header .additional-tel a[onclick*="get_modal_callbacking"]:hover {
	background: var(--lh-ink-soft);
	color: var(--lh-white);
}

/**
 * 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);
}
.nav-dopmenu > li.dropdown:hover > .parent-link .item-name {
	font-weight: 700;
}
.nav-dopmenu .dropdown-menu.nsmenu-type-category-full-image {
	border: 1px solid var(--lh-border);
	border-radius: 0 0 12px 12px;
	box-shadow: 0 24px 48px rgba(22, 24, 26, .10);
	background: var(--lh-white);
	padding: clamp(18px, 2vw, 28px);
}
.nav-dopmenu .chm-list-menu {
	gap: clamp(20px, 2.5vw, 40px);
	align-items: stretch;
}
.nav-dopmenu .chm-list-menu-item-child {
	flex: 1 1 auto;
}
.nav-dopmenu .chm-list-menu .menu-add-html {
	flex: 0 0 clamp(220px, 22vw, 280px);
	width: clamp(220px, 22vw, 280px);
	padding: 0;
}

/* sub-links: label left, count slot right (counts stay empty until import) */
.nav-dopmenu .nsmenu-parent-block {
	padding: 0;
}
.nav-dopmenu a.nsmenu-parent-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 12px 12px 14px;
	border-radius: 8px;
	border-left: 2px solid transparent;
	font-family: var(--lh-font);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--lh-ink);
	white-space: normal;
}
.nav-dopmenu a.nsmenu-parent-title:hover {
	background: var(--lh-bg-soft);
	border-left-color: var(--lh-ink);
	color: var(--lh-ink);
}
.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 slider: soft-gray backdrop, bold editorial headline */
.megasliderpro {
	margin-top: 0;
}
.megasliderpro .bg-image-slider {
	background-color: var(--lh-bg-soft) !important;
}
.megasliderpro [class*="slide-type"] .msp-title .text-title {
	font-family: var(--lh-font);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--lh-ink);
}
.megasliderpro [class*="slide-type"] .sub-title .text-sub-title {
	font-family: var(--lh-font);
	color: var(--lh-text);
	font-weight: 500;
}
.megasliderpro .swiper-ms-pagination .swiper-pagination-bullet-active {
	background: var(--lh-ink);
}

/* 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-ink);
}