/*
Theme Name:   Varlanch Hello Elementor Child
Theme URI:    https://varlanch.com
Description:  HiDROMEK-style industrial B2B layout system for Varlanch.
              Built on Hello Elementor so every block stays editable in Elementor.
Author:       Varlanch
Template:     hello-elementor
Version:      1.0.0
Text Domain:  luanqi-hello
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--lq-red: #ef1d1c;
	--lq-red-dark: #b21010;
	/* the hero highlight block uses the deeper red, not the button red */
	--lq-red-deep: #b21010;
	--lq-ink: #1a1a1a;
	--lq-body: #4a4a4a;
	--lq-muted: #999998;
	--lq-line: #e5e5e5;
	--lq-line-strong: #cacaca;
	--lq-soft: #f5f7f8;
	--lq-gray: #f2f2f2;
	--lq-dark: #0c0c0c;
	--lq-dark-2: #1e1e1e;
	--lq-container: 1200px;
	--lq-header-h: 72px;
	--lq-topbar-h: 44px;
	--lq-bar: #454448;
	--lq-drawer-h: 60px;
	--lq-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. Base typography
   ========================================================================== */

body,
.elementor-widget-text-editor,
.elementor-widget-heading {
	font-family: "Poppins", "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
}

body {
	color: var(--lq-body);
	font-size: 15px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
	color: var(--lq-ink);
	font-weight: 700;
	line-height: 1.2;
}

a {
	color: var(--lq-red);
}

a:hover {
	color: var(--lq-red-dark);
}

.lq-container,
.elementor-section.lq-container > .elementor-container {
	max-width: var(--lq-container);
}

/* Section shell ---------------------------------------------------------- */

.lq-section {
	position: relative;
}

/* Elementor containers ship with a 10px default padding. The reference layout
   is full-bleed, so neutralise it here — any container that sets its own
   padding still wins because Elementor's per-element rule loads later. */
.e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

.lq-pad {
	padding: 84px 0;
}

.lq-pad-sm {
	padding: 56px 0;
}

/* Section headings ------------------------------------------------------- */

.lq-sec-title .elementor-heading-title {
	font-size: 34px;
	letter-spacing: 0.01em;
}

.lq-sec-sub .elementor-heading-title {
	font-size: 19px;
	font-weight: 400;
	color: var(--lq-body);
	letter-spacing: 0;
}

.lq-eyebrow .elementor-heading-title {
	color: var(--lq-red);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ==========================================================================
   3. Header (Header Footer Elementor)
   ========================================================================== */

.lq-header .elementor-section,
.lq-header .e-con {
	transition: background-color 0.3s var(--lq-ease);
}

/* utility strip ---------------------------------------------------------- */

.lq-topbar {
	background: var(--lq-bar);
	color: #fff;
	min-height: var(--lq-topbar-h);
}

.lq-topbar a {
	color: #fff;
}

.lq-topbar .elementor-widget-text-editor {
	font-size: 12px;
	letter-spacing: 0.08em;
}

.lq-topbar .elementor-social-icon {
	font-size: 13px;
}

.lq-topbar .elementor-social-icons-wrapper {
	gap: 0;
}

.lq-topbar .elementor-social-icon {
	background: transparent !important;
	color: #fff;
	font-size: 14px;
	padding: 0 6px;
}

/* Elementor's social widget defaults to ~50px tall, which props the whole
   top strip open. Pin the strip to the reference's 38px. */

.lq-topbar .elementor-widget-text-editor .elementor-widget-container,
.lq-topbar .elementor-widget-text-editor .lq-lang {
	/* the reference's language chip is 16/500/25.6 — the surrounding
	   `.lq-topbar .elementor-widget-text-editor` rule would shrink it */
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 25.6px;
	margin: 0;
}

.lq-topbar .lq-topbar-social,
.lq-topbar .lq-topbar-social .elementor-widget-container,
.lq-topbar .lq-topbar-social .elementor-social-icons-wrapper {
	align-items: center;
	display: flex;
	height: 30px;
}

.lq-topbar .elementor-social-icon:hover {
	color: var(--lq-red);
}

.lq-topbar .elementor-search-form__container,
.lq-topbar .hfe-search-form__container {
	border: 0;
	height: 28px;
	min-height: 28px;
}

.lq-topbar .elementor-search-form__input,
.lq-topbar .hfe-search-form__input,
/* HFE ships `.hfe-search-button-wrapper input[type="search"]{border-radius:0}`
   which outranks a plain class selector — match its specificity to win. */
.lq-topbar .hfe-search-button-wrapper input[type="search"] {
	background: transparent;
	border: 1px solid #e2e2e2;
	border-radius: 3px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	height: 28px;
	letter-spacing: 0;
	padding: 0 10px 0 30px;
}

.lq-topbar .hfe-search-icon-toggle,
.lq-topbar .hfe-search-button-wrapper {
	height: 28px;
}

.lq-topbar .elementor-search-form__submit {
	background: transparent;
	color: var(--lq-ink);
	min-width: 28px;
}

/* main navigation -------------------------------------------------------- */

.lq-header {
	position: relative;
	z-index: 999;
}

.lq-header .lq-navrow {
	min-height: var(--lq-header-h);
}

.lq-header .lq-navrow .elementor-widget-nav-menu,
.lq-header .lq-navrow .elementor-widget-hfe-menu-widget {
	width: 100%;
}

/* HFE renders its own markup (.hfe-nav-menu), Elementor Pro would use
   .elementor-nav-menu — style both so the header survives either stack. */

.lq-nav-left .hfe-nav-menu__layout-horizontal,
.lq-nav-right .hfe-nav-menu__layout-horizontal,
.lq-header .elementor-nav-menu--main {
	display: flex;
	justify-content: inherit;
}

/* The nav columns are 33/20/33 in the template; let the two nav rails take
   the slack and keep every item on a single line, like the reference.
   Elementor drops the .e-con-inner wrapper when the container is set to
   "full", so every rule below covers both shapes. */

.lq-header .lq-navrow,
.lq-header .lq-navrow > .e-con-inner {
	flex-wrap: nowrap;
}

.lq-header .lq-navrow > .e-con-inner > .e-con:first-child,
.lq-header .lq-navrow > .e-con:first-child,
.lq-header .lq-navrow > .e-con-inner > .e-con:last-child,
.lq-header .lq-navrow > .e-con:last-child {
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
}

.lq-header .lq-navrow > .e-con-inner > .lq-logo,
.lq-header .lq-navrow > .lq-logo {
	flex: 0 0 auto;
	width: auto !important;
}

/* --- site logo (WordPress custom logo, editable in the Customizer) -------
   The header/footer use the Site Logo widget, so whatever the client uploads
   under Appearance → Customize → Site Identity shows up here. */
.lq-logo img,
.lq-logo .hfe-site-logo-img {
	display: block;
	height: auto;
	width: 168px;
}

.lq-footer-logo img,
.lq-footer-logo .hfe-site-logo-img {
	display: block;
	height: auto;
	width: 190px;
}

.lq-nav-left .hfe-nav-menu,
.lq-nav-right .hfe-nav-menu {
	flex-wrap: nowrap;
}

.lq-nav-left .hfe-nav-menu a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu a.hfe-menu-item {
	white-space: nowrap;
}

.lq-nav-left .hfe-nav-menu a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu a.hfe-menu-item,
.lq-header .elementor-nav-menu--main .elementor-item {
	color: var(--lq-ink);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	padding: 14px 18px;
	transition: color 0.22s var(--lq-ease);
}

.lq-nav-left .hfe-nav-menu a.hfe-menu-item:hover,
.lq-nav-right .hfe-nav-menu a.hfe-menu-item:hover,
.lq-nav-left .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
.lq-header .elementor-nav-menu--main .elementor-item:hover,
.lq-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--lq-red);
}

.lq-nav-left .hfe-nav-menu__submenu-arrow > a::after,
.lq-nav-right .hfe-nav-menu__submenu-arrow > a::after,
.lq-header .menu-item-has-children > a::after {
	border-bottom-color: currentColor;
	border-top-color: currentColor;
}

/* mega dropdown ---------------------------------------------------------- */

.lq-nav-left .hfe-nav-menu .sub-menu,
.lq-nav-right .hfe-nav-menu .sub-menu,
.lq-header .elementor-nav-menu--dropdown {
	background: #fff;
	border-top: 3px solid var(--lq-red);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
	min-width: 260px;
	padding: 10px 0;
}

.lq-nav-left .hfe-nav-menu .sub-menu a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu .sub-menu a.hfe-menu-item,
.lq-header .elementor-nav-menu--dropdown .elementor-item {
	color: var(--lq-ink);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	padding: 11px 24px;
	text-transform: uppercase;
}

.lq-nav-left .hfe-nav-menu .sub-menu a.hfe-menu-item:hover,
.lq-nav-right .hfe-nav-menu .sub-menu a.hfe-menu-item:hover,
.lq-header .elementor-nav-menu--dropdown .elementor-item:hover {
	background: var(--lq-soft);
	color: var(--lq-red);
}

.lq-header .hfe-nav-menu-icon,
.lq-header .hfe-nav-menu__toggle {
	color: var(--lq-ink);
}

/* Elementor's svg icons ship a fixed fill, so the toggle colour never reached
   the glyph and the hamburger stayed dark on the dark hero. */
.lq-header .hfe-nav-menu-icon svg,
.lq-header .hfe-nav-menu__toggle svg {
	fill: currentColor !important;
	height: 22px;
	width: 22px;
}

/* HFE only shows the flyout panel once its own state class lands; make the
   panel follow the toggle's expanded state so it always opens. */
.lq-nav-mobile .hfe-nav-menu__toggle.hfe-active-menu + .hfe-flyout-wrapper .hfe-side,
.lq-nav-mobile .hfe-nav-menu__toggle[aria-expanded="true"] + .hfe-flyout-wrapper .hfe-side {
	display: block;
}

/* the mobile drawer is a white panel: keep its labels dark on every page */
.lq-nav-mobile .hfe-nav-menu a.hfe-menu-item {
	color: var(--lq-ink);
	font-size: 15px;
	letter-spacing: normal;
	padding: 12px 24px;
	text-transform: none;
}

.lq-nav-mobile .hfe-nav-menu a.hfe-menu-item:hover {
	color: var(--lq-red);
}

/* transparent header over hero ------------------------------------------ */

.lq-header-overlay .lq-header {
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.lq-header-overlay .lq-topbar {
	background: var(--lq-bar);
}

.lq-header-overlay .lq-header .elementor-item,
.lq-header-overlay .lq-header .elementor-widget-image img {
	filter: none;
}

.lq-header-overlay .lq-header .lq-navrow .elementor-item {
	color: #fff;
}

/* the rails sit on the hero, so their labels go white — the mobile flyout is a
   white panel and must keep dark labels */
.lq-header-overlay .lq-header .lq-navrow .lq-nav-left .hfe-nav-menu a.hfe-menu-item,
.lq-header-overlay .lq-header .lq-navrow .lq-nav-right .hfe-nav-menu a.hfe-menu-item {
	color: #fff;
}

/* HFE nests the glyph inside .hfe-nav-menu__toggle > .hfe-nav-menu-icon, so
   both nodes need the colour or the svg (fill:currentColor) stays dark. The
   :not(.is-stuck) guard hands the colour back once the header goes solid. */
.lq-header-overlay .lq-header:not(.is-stuck) .lq-navrow .lq-nav-left .hfe-nav-menu-icon,
.lq-header-overlay .lq-header:not(.is-stuck) .lq-navrow .lq-nav-right .hfe-nav-menu-icon,
.lq-header-overlay .lq-header:not(.is-stuck) .lq-navrow .lq-nav-mobile .hfe-nav-menu__toggle,
.lq-header-overlay .lq-header:not(.is-stuck) .lq-navrow .lq-nav-mobile .hfe-nav-menu__toggle .hfe-nav-menu-icon {
	color: #fff;
}

.lq-header-overlay .lq-header .lq-navrow .elementor-item:hover {
	color: var(--lq-red);
}

.lq-header-overlay .lq-header .lq-navrow .lq-nav-left .hfe-nav-menu a.hfe-menu-item:hover,
.lq-header-overlay .lq-header .lq-navrow .lq-nav-right .hfe-nav-menu a.hfe-menu-item:hover {
	color: var(--lq-red);
}

.lq-header-overlay .lq-logo-light {
	display: block;
}

.lq-header-overlay .lq-logo-dark {
	display: none;
}

body:not(.lq-header-overlay) .lq-logo-light {
	display: none;
}

body:not(.lq-header-overlay) .lq-logo-dark {
	display: block;
}

/* The home header starts transparent over the hero and, once it sticks, keeps
   the reference's dark bar (#373637) rather than turning white — the white
   LUANQI mark and the white nav labels stay legible either way. */
.lq-header.is-stuck {
	background: #373637;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
	position: fixed;
	top: 0;
}

/* the rails keep their light labels while the header is stuck on the home page */
body.lq-header-overlay .lq-header.is-stuck .lq-navrow .elementor-item,
body.lq-header-overlay .lq-header.is-stuck .lq-navrow .lq-nav-left .hfe-nav-menu a.hfe-menu-item,
body.lq-header-overlay .lq-header.is-stuck .lq-navrow .lq-nav-right .hfe-nav-menu a.hfe-menu-item,
body.lq-header-overlay .lq-header.is-stuck .lq-nav-mobile .hfe-nav-menu__toggle,
body.lq-header-overlay .lq-header.is-stuck .lq-nav-mobile .hfe-nav-menu__toggle .hfe-nav-menu-icon {
	color: #fff;
}

/* ==========================================================================
   4. Hero
   ========================================================================== */

.lq-hero {
	align-items: center;
	display: flex;
	/* Elementor writes --min-height from the container's Min Height control;
	   fall back to 660px so the block still looks right without it. */
	min-height: var(--min-height, 660px);
	overflow: hidden;
	position: relative;
}

.lq-hero::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.55) 100%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
	/* purely decorative scrim: it must not swallow clicks, otherwise the
	   hero carousel underneath cannot be selected inside Elementor */
	pointer-events: none;
}

.lq-hero > .elementor-container {
	position: relative;
	z-index: 2;
}

/* --- hero background carousel -------------------------------------------
   Elementor's free Image Carousel fills the hero, the headline + scroll cue
   sit above it, and the dark scrim keeps the copy readable on every slide. */

.lq-hero {
	background: var(--lq-dark);
}

.lq-hero > .lq-hero-bg {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.lq-hero-bg .elementor-widget-image-carousel,
.lq-hero-bg .elementor-widget-container,
.lq-hero-bg .elementor-image-carousel-wrapper,
.lq-hero-bg .swiper-container,
.lq-hero-bg .swiper,
.lq-hero-bg .swiper-wrapper,
.lq-hero-bg .swiper-slide {
	height: 100%;
}

.lq-hero-bg .elementor-image-carousel-wrapper {
	position: relative;
}

.lq-hero-bg .swiper-slide-image {
	/* Elementor ships the slide image at its natural ratio; stretch it so every
	   slide covers the full 900px hero instead of leaving a strip at the bottom */
	display: block;
	height: 100% !important;
	object-fit: cover;
	width: 100% !important;
}

/* the scrim sits between the slides and the copy */
.lq-hero::after {
	z-index: 1;
}

.lq-hero > .lq-hero-title,
.lq-hero > .lq-scroll-wrap {
	position: relative;
	z-index: 3;
}

/* carousel pagination: small dots, bottom-left, clear of the scroll cue */
.lq-hero-bg .swiper-pagination {
	bottom: 26px;
	left: 34px;
	right: auto;
	text-align: left;
	width: auto;
}

.lq-hero-bg .swiper-pagination-bullet {
	background: #fff;
	height: 8px;
	margin-right: 8px;
	opacity: 0.45;
	width: 8px;
}

.lq-hero-bg .swiper-pagination-bullet-active {
	background: var(--lq-red);
	opacity: 1;
}

@media (max-width: 767px) {
	.lq-hero-bg .swiper-pagination {
		bottom: 18px;
		left: 20px;
	}
}

.lq-hero-title .elementor-heading-title {
	color: #fff;
	font-size: 90px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.33;
	text-transform: uppercase;
}

.lq-hero-title .lq-hl {
	background: var(--lq-red-deep);
	box-decoration-break: clone;
	display: inline-block;
	line-height: 1.32;
	padding: 0 26px 6px;
}

.lq-scroll-down {
	align-items: center;
	background: #fff;
	border-radius: 50%;
	bottom: 42px;
	color: var(--lq-ink);
	display: flex;
	height: 46px;
	justify-content: center;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	transition: all 0.3s var(--lq-ease);
	width: 46px;
	z-index: 3;
}

/* Elementor's wrapper carries position:relative, which would trap the
   absolutely-positioned scroll cue inside the text column. */

.lq-scroll-wrap,
.lq-scroll-wrap .elementor-widget-html,
.lq-scroll-wrap .elementor-widget-container {
	position: static !important;
}

.lq-scroll-down:hover {
	background: var(--lq-red);
	color: #fff;
}

.lq-scroll-down svg {
	height: 16px;
	width: 16px;
}

/* ==========================================================================
   5. Product category grid
   ========================================================================== */

.lq-cat-grid {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.lq-cat-grid .elementor-container {
	max-width: 100%;
}

.lq-cat-cell {
	align-items: center;
	background: #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 268px;
	outline: 1px solid #f0f0f0;
	outline-offset: -1px;
	padding: 34px 18px 26px;
	position: relative;
	text-align: center;
	transition: background 0.3s var(--lq-ease), box-shadow 0.3s var(--lq-ease), transform 0.3s var(--lq-ease);
	z-index: 1;
}

.lq-cat-cell:hover {
	background: var(--lq-soft);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.1);
	outline-color: var(--lq-line-strong);
	transform: translateY(-2px);
	z-index: 5;
}

.lq-cat-cell .elementor-heading-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lq-cat-cell .elementor-widget-image {
	margin: 22px 0 20px;
	width: 100%;
}

.lq-cat-cell .elementor-widget-image img {
	height: 108px;
	margin: 0 auto;
	object-fit: contain;
	transition: transform 0.4s var(--lq-ease);
	width: auto;
}

.lq-cat-cell:hover .elementor-widget-image img {
	transform: scale(1.06);
}

.lq-cat-cell .lq-cat-sub .elementor-heading-title {
	color: var(--lq-body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* ==========================================================================
   6. Dark feature band
   ========================================================================== */

.lq-band {
	overflow: hidden;
	position: relative;
}

.lq-band::after {
	background: rgba(0, 0, 0, 0.58);
	content: "";
	inset: 0;
	position: absolute;
	/* keep the overlay click-through so the band's widgets stay editable */
	pointer-events: none;
}

.lq-band > .elementor-container {
	position: relative;
	z-index: 2;
}

/* Elementor 4 renders boxed containers with an .e-con-inner wrapper, so the
   rule above never matched and the scrim painted over the copy (the text read
   as grey instead of white). Lift the content above the scrim instead. */
.lq-band > .e-con-inner {
	position: relative;
	z-index: 2;
}

.lq-band .elementor-heading-title {
	color: #fff;
}

.lq-band .elementor-text-editor {
	color: #fff;
}

.lq-band .lq-band-title .elementor-heading-title {
	/* the reference's DESIGN STUDIO band title is 40/500/46, no tracking */
	font-size: 40px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 46px;
	text-transform: uppercase;
}

.lq-band .lq-band-lead .elementor-text-editor,
.lq-band .lq-band-lead .elementor-widget-text-editor {
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
}

.lq-band .lq-band-lead .elementor-widget-text-editor p,
.lq-band .lq-band-lead .elementor-text-editor p {
	line-height: 24px;
	margin: 0;
}

/* outlined button used on photos ---------------------------------------- */

.lq-btn-ghost .elementor-button {
	background: rgba(255, 255, 255, 0.06);
	/* the reference's outline variant: `.button.ng{border:1px solid #FFF;
	   background:transparent}` — same 16/500/32 metrics as the solid one */
	border: 1px solid #fff;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: normal;
	line-height: 32px;
	min-width: 169px;
	padding: 3px 20px;
}

.lq-btn-ghost .elementor-button:hover {
	background: var(--lq-red);
	border-color: var(--lq-red);
	color: #fff;
}

.lq-btn-solid .elementor-button {
	background: var(--lq-red);
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 32px;
	min-width: 169px;
	padding: 3px 20px;
}

.lq-btn-solid .elementor-button:hover {
	background: var(--lq-red-dark);
	color: #fff;
}

/* ==========================================================================
   7. Half-and-half promo cards
   ========================================================================== */

.lq-cards .elementor-container {
	max-width: 100%;
}

.lq-card {
	background-position: center;
	background-size: cover;
	display: flex;
	min-height: 400px;
	overflow: hidden;
	position: relative;
}

/* the reference centres the copy inside these two photo cards */

.lq-card {
	align-items: center;
	text-align: center;
}

.lq-card > .e-con-inner {
	align-items: center;
}

.lq-card .elementor-widget-text-editor,
.lq-card .elementor-widget-heading {
	text-align: center;
	width: 100%;
}

.lq-card .elementor-widget-button {
	width: auto;
}

.lq-card::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 62%, rgba(0, 0, 0, 0.2) 100%);
	content: "";
	inset: 0;
	position: absolute;
	/* keep the overlay click-through so the card's widgets stay editable */
	pointer-events: none;
}

.lq-card > .elementor-container {
	align-items: center;
	position: relative;
	z-index: 2;
}

/* same fix as the dark band: the promo cards' widgets have to sit above the
   gradient scrim, otherwise the white copy renders grey */
.lq-card > .elementor-element {
	position: relative;
	z-index: 2;
}

.lq-card .elementor-heading-title {
	color: #fff;
}

.lq-card .lq-card-title .elementor-heading-title {
	/* reference promo-card titles: 40/500/46 */
	font-size: 40px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 46px;
}

.lq-card .elementor-text-editor {
	color: #fff;
	font-size: 14px;
}

/* --- newsroom ------------------------------------------------------------
   The cards link through to one article page each; the article uses the same
   900px measure as the other text pages. */

.lq-news-card .lq-news-thumb img {
	aspect-ratio: 400 / 310;
	border-radius: 10px 10px 0 0;
	display: block;
	object-fit: cover;
	width: 100%;
}

.lq-news-title a,
.lq-news-title {
	transition: color 0.2s ease;
}

.lq-news-title a:hover {
	color: var(--lq-red);
}

.lq-news-meta-wrap p,
.lq-article-meta {
	color: var(--lq-muted, #999998);
	font-size: 14px;
	letter-spacing: 0.02em;
}

.lq-news-article .lq-article-figure img {
	border-radius: 10px;
	display: block;
	height: auto;
	width: 100%;
}

.lq-news-article .lq-article-lead p {
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
}

.lq-news-article .lq-article-copy p {
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
}

.lq-news-article .lq-article-copy p + p {
	margin-top: 18px;
}

/* ==========================================================================
   7b. Product library (WordPress product post type)
   The detail pages are rendered by single-lq_product.php, the family pages
   list their products through the [lq_products] shortcode.
   ========================================================================== */

.lq-product-head {
	max-width: 900px;
	margin: 0 auto;
	padding: 48px 15px 0;
	text-align: center;
}

.lq-product-head .lq-pd-cat {
	color: var(--lq-body);
	font-size: 15px;
	font-weight: 400;
	margin: 0 0 8px;
}

.lq-product-head .lq-pd-model {
	color: var(--lq-ink);
	font-size: 34px;
	letter-spacing: 0.02em;
	margin: 0;
}

.lq-product-head .lq-pd-badge {
	margin-top: 12px;
}

.lq-pd-hero {
	padding: 28px 15px 54px;
	text-align: center;
}

.lq-pd-hero-img img {
	border-radius: 10px;
	display: block;
	height: auto;
	margin: 0 auto;
	max-height: 440px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.lq-pd-rule {
	margin: 0 auto;
	max-width: 1448px;
	padding: 0 15px;
}

.lq-pd-rule hr {
	border: 0;
	border-top: 2px solid var(--lq-ink);
	margin: 0;
}

.lq-pd-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1448px;
	padding: 44px 15px 0;
}

.lq-pd-wrap > .lq-pd-aside {
	width: 31.8%;
}

.lq-pd-wrap > .lq-pd-blocks {
	display: flex;
	flex-direction: column;
	width: 65.8%;
}

.lq-pd-aside-media {
	border-bottom: 1px solid var(--lq-line);
	padding: 18px;
	text-align: center;
}

.lq-pd-aside-media img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100%;
}

.lq-pd-aside-intro {
	color: var(--lq-body);
	font-size: 13px;
	line-height: 1.8;
}

.lq-pd-aside-intro p {
	margin: 0 0 10px;
}

.lq-pd-quote .elementor-button {
	background: var(--lq-red);
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 14px;
	letter-spacing: 0.06em;
	padding: 12px 18px;
	text-align: center;
}

.lq-pd-quote .elementor-button:hover {
	background: var(--lq-red-dark);
	color: #fff;
}

.lq-product .lq-pd-block {
	margin-bottom: 40px;
}

.lq-product .lq-pd-block-head h2 {
	color: var(--lq-ink);
	font-size: 24px;
	margin: 0;
}

.lq-product .lq-pd-block-body {
	padding-top: 18px;
}

.lq-product .lq-pd-block.is-collapsed .lq-pd-block-body {
	display: none;
}

.lq-pd-gallery .gallery {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, 1fr);
}

.lq-pd-gallery .gallery-item {
	margin: 0;
}

.lq-pd-gallery .gallery-item img {
	border: 1px solid var(--lq-line);
	border-radius: 4px;
	display: block;
	height: auto;
	width: 100%;
}

.lq-model-thumb-img {
	display: block;
	height: 171px;
	margin: 0 auto;
	object-fit: contain;
	width: 100%;
}

.lq-product .lq-contact {
	text-align: center;
}

@media (max-width: 1024px) {
	.lq-pd-wrap > .lq-pd-aside,
	.lq-pd-wrap > .lq-pd-blocks {
		width: 100%;
	}

	.lq-pd-wrap > .lq-pd-aside {
		margin-bottom: 34px;
	}

	.lq-pd-gallery .gallery {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   8. Awards strip
   ========================================================================== */

.lq-awards .elementor-image-carousel-wrapper {
	padding: 0 10px;
}

.lq-awards .elementor-image-carousel .swiper-slide-image {
	height: 54px;
	margin: 0 auto 12px;
	object-fit: contain;
	width: auto;
}

.lq-award-item {
	text-align: center;
}

.lq-award-item .elementor-heading-title {
	color: var(--lq-body);
	font-size: 12px;
	font-weight: 400;
}

/* static award row: logo + caption under it, six across like the reference */

.lq-award-item {
	text-align: center;
}

.lq-award-item .elementor-widget-image img {
	height: 62px;
	margin: 0 auto 14px;
	object-fit: contain;
	width: auto;
}

.lq-award-item .lq-award-caption .elementor-heading-title {
	color: var(--lq-ink);
	/* the reference's award captions are 16/500/24 */
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 24px;
}

/* The reference paints the caption red while the entry is hovered
   (`#awards .swiper-slide.award a:hover{color:red}`).
   Elementor writes the heading colour into `.elementor-<id>
   .elementor-element-<id> .elementor-heading-title` — four classes of weight,
   inlined after this file — so the hover has to outrank that and be forced. */
.lq-awards-wrap .lq-award-item .lq-award-caption .elementor-heading-title,
.lq-awards-wrap .lq-award-item .lq-award-caption .elementor-heading-title a {
	color: var(--lq-ink);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.lq-awards-wrap .lq-award-item:hover .lq-award-caption .elementor-heading-title,
	.lq-awards-wrap .lq-award-item:hover .lq-award-caption .elementor-heading-title a,
	.lq-awards-wrap .lq-award-item .lq-award-caption .elementor-heading-title a:hover,
	.lq-awards-wrap .lq-award-item .lq-award-caption .elementor-heading-title a:focus {
		color: var(--lq-red) !important;
	}
}

/* ==========================================================================
   8b. Sticky side CTA (CONTACT US / FIND DEALER)
   ========================================================================== */

.lq-side-cta {
	/* the reference keeps this rail parked 70px off-screen and slides it out
	   on hover, so only a 22px red sliver shows by default */
	border-radius: 6px 0 0 6px;
	gap: 0;
	position: fixed !important;
	right: -70px;
	top: 220px;
	transition: right 0.28s var(--lq-ease);
	width: 92px !important;
	z-index: 900;
}

.lq-side-cta:hover,
.lq-side-cta:focus-within {
	right: 0;
}

.lq-side-cta .elementor-widget-button {
	width: 100%;
}

.lq-side-cta .elementor-widget,
.lq-side-cta .elementor-widget-container,
.lq-side-cta .elementor-button-wrapper {
	display: block;
	padding: 0;
	width: 100%;
}

.lq-side-cta .elementor-button {
	align-items: center;
	/* the reference paints BOTH tabs with pure #FF0000 — not the brand red,
	   and with no hover colour change. Elementor stores the widget colours as
	   inline per-element CSS that loads after this file, so they need !important. */
	background: #ff0000 !important;
	box-sizing: border-box;
	/* the reference rail is rounded on its inner edge only */
	border-radius: 6px 0 0 6px;
	color: #fff;
	display: flex;
	flex-direction: column;
	font-size: 10px;
	font-weight: 500;
	gap: 4px;
	height: 81px;
	justify-content: center;
	letter-spacing: normal;
	line-height: 15px;
	/* the rail is only 92px wide — the global 169px button min-width must not
	   apply here */
	min-width: 0 !important;
	padding: 16px 14px 20px;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

.lq-side-cta .elementor-button .elementor-button-icon {
	font-size: 20px;
	line-height: 1;
	order: -1;
}

.lq-side-cta .elementor-button .elementor-button-text {
	display: block;
}

.lq-side-cta .elementor-widget-button + .elementor-widget-button .elementor-button {
	background: #ff0000 !important;
}

.lq-side-cta .elementor-button:hover,
.lq-side-cta .elementor-button:focus {
	background: #ff0000 !important;
	color: #fff;
}

/* ==========================================================================
   9. Inquiry form
   ========================================================================== */

.lq-form-wrap {
	background: #fff;
	border: 1px solid var(--lq-line);
	border-radius: 10px;
	padding: 42px 42px 34px;
}

.lq-form-wrap .wpcf7,
.lq-form-wrap .wpforms-container,
.lq-form-wrap .elementor-form {
	margin: 0;
}

.lq-form-wrap input[type="text"],
.lq-form-wrap input[type="email"],
.lq-form-wrap input[type="tel"],
.lq-form-wrap input[type="url"],
.lq-form-wrap input[type="number"],
.lq-form-wrap select,
.lq-form-wrap textarea,
.lq-form-wrap .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not(.wpcf7-acceptance) {
	background: #fff;
	border: 1px solid var(--lq-line-strong);
	border-radius: 6px;
	box-shadow: none;
	color: var(--lq-ink);
	font-size: 14px;
	height: 46px;
	padding: 0 14px;
	transition: border-color 0.2s var(--lq-ease);
	width: 100%;
}

.lq-form-wrap textarea,
.lq-form-wrap .wpcf7 textarea {
	height: 148px;
	padding: 12px 14px;
	resize: vertical;
}

.lq-form-wrap input:focus,
.lq-form-wrap select:focus,
.lq-form-wrap textarea:focus {
	border-color: var(--lq-red);
	outline: none;
}

.lq-form-wrap input::placeholder,
.lq-form-wrap textarea::placeholder {
	color: #9a9a9a;
}

.lq-form-wrap .wpcf7 p,
.lq-form-wrap .wpforms-field {
	margin: 0 0 14px;
}

.lq-form-wrap input[type="submit"],
.lq-form-wrap button[type="submit"],
.lq-form-wrap .wpcf7-submit {
	background: var(--lq-red);
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	float: right;
	/* the reference's SEND control is 16/500 in a 169×38 box */
	font-size: 16px;
	font-weight: 500;
	height: 38px;
	letter-spacing: normal;
	line-height: 32px;
	min-width: 169px;
	padding: 3px 20px;
	text-transform: uppercase;
	transition: background 0.2s var(--lq-ease);
	width: auto;
}

.lq-form-wrap input[type="submit"]:hover,
.lq-form-wrap .wpcf7-submit:hover {
	background: var(--lq-red-dark);
}

.lq-form-wrap .wpcf7-response-output {
	border: 0;
	clear: both;
	font-size: 13px;
	margin: 14px 0 0;
	padding: 0;
}

.lq-form-wrap .wpcf7-not-valid-tip {
	color: var(--lq-red);
	font-size: 12px;
}

.lq-form-row {
	display: flex;
	gap: 14px;
}

.lq-form-row > * {
	flex: 1;
}

.lq-form-consent {
	align-items: flex-start;
	color: var(--lq-body);
	display: flex;
	font-size: 13px;
	gap: 9px;
	margin-top: 4px;
}

.lq-form-consent input[type="checkbox"] {
	height: 15px;
	margin: 5px 0 0;
	width: 15px;
}

/* two-column inquiry layout (matches the reference form exactly) ---------- */

.lq-form-grid {
	display: grid;
	gap: 0 16px;
	grid-template-columns: 1fr 1fr;
}

.lq-form-col > p {
	margin: 0 0 14px;
}

.lq-form-col > p:last-child {
	margin-bottom: 0;
}

.lq-form-grid + .lq-form-consent,
.lq-form-wrap .lq-form-consent {
	clear: both;
}

.lq-form-col .lq-form-row {
	display: grid;
	gap: 0 16px;
	grid-template-columns: 1fr 1fr;
}

.lq-form-col .lq-form-row p {
	margin: 0 0 14px;
}

/* CF7 wraps fields in <p>; keep the grid rhythm tight */

.lq-form-wrap .wpcf7-form .lq-form-grid > .lq-form-col > p {
	margin: 0 0 14px;
}

/* honeypot + inline errors ---------------------------------------------- */

.lq-hp {
	left: -9999px;
	position: absolute;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.lq-footer {
	background: #fff;
	border-top: 1px solid var(--lq-line);
	color: var(--lq-body);
	padding-top: 62px;
}

.lq-footer .elementor-heading-title {
	color: var(--lq-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.lq-footer .lq-footer-list .elementor-icon-list-item,
.lq-footer .elementor-icon-list-item {
	font-size: 13px;
	line-height: 1.9;
}

.lq-footer a {
	color: var(--lq-body);
}

.lq-footer a:hover {
	color: var(--lq-red);
}

.lq-footer .lq-footer-contact .elementor-icon-list-text {
	color: var(--lq-body);
}

.lq-footer .lq-footer-contact .elementor-icon-list-icon i {
	color: var(--lq-ink);
}

.lq-footer-bottom {
	border-top: 1px solid var(--lq-line);
	color: var(--lq-muted);
	font-size: 11px;
	font-weight: 300;
	line-height: 16.5px;
	margin-top: 34px;
	padding: 20px 0;
}

.lq-footer .elementor-widget-image img {
	max-width: 168px;
}

/* ==========================================================================
   11. Breadcrumb + page hero
   ========================================================================== */

.lq-breadcrumb {
	color: var(--lq-muted);
	font-size: 12px;
	letter-spacing: 0.03em;
}

.lq-breadcrumb a {
	color: var(--lq-muted);
}

.lq-page-head {
	padding: 54px 0 26px;
	text-align: center;
}

.lq-page-head .lq-page-kicker .elementor-heading-title {
	color: var(--lq-body);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.lq-page-head .lq-page-title .elementor-heading-title {
	font-size: 36px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: uppercase;
}

.lq-rule {
	border-top: 1px solid var(--lq-line);
}

/* ==========================================================================
   12. Product category page
   ========================================================================== */

.lq-cat-aside {
	position: sticky;
	top: 110px;
}

.lq-cat-aside .elementor-widget-image img {
	width: 100%;
}

.lq-cat-aside .lq-cat-photo img {
	border-radius: 8px;
	width: 100%;
}

/* the reference groups photo + title + copy into one bordered 8px card,
   with the family switcher sitting below it */

.lq-cat-card {
	background: #fff;
	border: 1px solid var(--lq-line);
	border-radius: 8px;
	overflow: hidden;
}

.lq-cat-card .elementor-widget-image img {
	width: 100%;
}

.lq-cat-card .lq-cat-card-body {
	padding: 18px 20px 22px;
}

.lq-cat-aside .lq-cat-aside-name .elementor-heading-title {
	font-size: 24px;
	letter-spacing: 0.01em;
	margin-top: 4px;
}

.lq-cat-aside .elementor-heading-title {
	font-size: 22px;
}

.lq-cat-aside .elementor-text-editor {
	font-size: 13.5px;
	line-height: 1.8;
}

.lq-cat-list .elementor-icon-list-item {
	/* the reference lists the other families as plain 18/600 rows with 6px of
	   vertical padding — no boxes */
	border: 0;
	margin-bottom: 0;
}

.lq-cat-list .elementor-icon-list-item a {
	align-items: center;
	color: #0a1d32;
	display: flex;
	font-size: 18px;
	font-weight: 600;
	justify-content: flex-start;
	letter-spacing: normal;
	line-height: normal;
	padding: 6px 0;
	transition: color 0.25s var(--lq-ease);
}

.lq-cat-list .elementor-icon-list-item:hover,
.lq-cat-list .elementor-icon-list-item.lq-active {
	background: transparent;
}

.lq-cat-list .elementor-icon-list-item.lq-active a {
	color: var(--lq-red);
}

.lq-model-list {
	max-height: 1080px;
	overflow-y: auto;
	padding-right: 8px;
	scrollbar-color: var(--lq-line-strong) transparent;
	scrollbar-width: thin;
}

.lq-model-list::-webkit-scrollbar {
	width: 6px;
}

.lq-model-list::-webkit-scrollbar-thumb {
	background: var(--lq-line-strong);
	border-radius: 3px;
}

.lq-model-row {
	border: 1px solid var(--lq-line);
	border-radius: 10px;
	display: flex;
	/* 223px row + 14px gap = the reference's 237px pitch */
	min-height: 223px;
	margin-bottom: 14px;
	transition: box-shadow 0.3s var(--lq-ease);
}

.lq-model-row:hover {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}

.lq-model-row .lq-model-thumb {
	align-items: center;
	background: #fff;
	border-right: 1px solid var(--lq-line);
	display: flex;
	flex: 0 0 20%;
	justify-content: center;
	min-width: 110px;
	padding: 12px;
}

.lq-model-row .lq-model-thumb img {
	max-height: 104px;
	object-fit: contain;
	width: auto;
}

.lq-model-row .lq-model-body {
	display: flex;
	flex: 0 0 32%;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-start;
	padding: 18px 20px;
}

/* the spec sheet fills the third rail, like the reference */

.lq-model-row .lq-model-specs {
	flex: 1 1 auto;
	min-width: 0;
}

.lq-model-row .lq-model-specs .elementor-widget-container,
.lq-model-row .lq-model-specs table {
	width: 100%;
}

.lq-model-name {
	align-items: center;
	display: flex;
	font-size: 18px;
	font-weight: 600;
	gap: 10px;
	margin-bottom: 10px;
}

.lq-model-name .elementor-heading-title {
	font-size: 18px;
	line-height: 1.3;
}

.lq-model-tag {
	background: var(--lq-red);
	border-radius: 4px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 3px 6px;
}

.lq-spec-mini-wrap {
	width: 100%;
}

table.lq-spec-table.lq-spec-mini {
	margin: 0;
}

table.lq-spec-table.lq-spec-mini th,
table.lq-spec-table.lq-spec-mini td {
	border: 0;
	border-bottom: 1px solid var(--lq-line);
	/* the reference's model-row sheet is 14/22.4 with 4px of row padding,
	   which lands each 45px row on a 237px pitch */
	font-size: 14px;
	line-height: 22.4px;
	padding: 4px 10px;
}

table.lq-spec-table.lq-spec-mini tr:first-child th,
table.lq-spec-table.lq-spec-mini tr:first-child td {
	border-top: 1px solid var(--lq-line);
}

table.lq-spec-table.lq-spec-mini.lq-spec-mini tbody > tr > th {
	background: #fff;
	color: #000;
	font-size: 14px;
	font-weight: 300;
	line-height: 22.4px;
	width: 31%;
}

table.lq-spec-table.lq-spec-mini.lq-spec-mini tbody > tr > td {
	background: var(--lq-soft);
	color: #000;
	font-size: 14px;
	font-weight: 600;
	line-height: 22.4px;
	width: 69%;
}

.lq-model-body .lq-model-cta {
	align-self: flex-end;
	margin-top: 4px;
}

.lq-model-cta {
	margin-left: auto;
	margin-top: 12px;
}

.lq-model-cta .elementor-button {
	background: transparent;
	border: 1px solid var(--lq-line-strong);
	color: var(--lq-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 32px;
	min-width: 102px;
	padding: 4px 12px 5px;
}

/* hover / focus / press: red fill with white type. Elementor's own hover rule
   is more specific than this stylesheet, so the colours are pinned. */
.lq-model-cta .elementor-button:hover,
.lq-model-cta .elementor-button:focus,
.lq-model-cta .elementor-button:focus-visible,
.lq-model-cta .elementor-button:active {
	background: var(--lq-red) !important;
	border-color: var(--lq-red) !important;
	color: #fff !important;
}

/* ==========================================================================
   13. Product detail page
   ========================================================================== */

.lq-pd-head {
	padding: 48px 0 0;
	text-align: center;
}

.lq-pd-head .lq-pd-cat .elementor-heading-title {
	font-size: 15px;
	font-weight: 400;
}

.lq-pd-head .lq-pd-model .elementor-heading-title {
	font-size: 34px;
	letter-spacing: 0.02em;
}

.lq-pd-badge {
	background: var(--lq-red);
	border-radius: 6px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 3px 10px;
}

.lq-pd-hero {
	padding: 28px 0 54px;
	text-align: center;
}

.lq-pd-hero img {
	margin: 0 auto;
	max-height: 420px;
	object-fit: contain;
	width: auto;
}

.lq-pd-aside {
	border: 1px solid var(--lq-line);
	border-radius: 8px;
	position: sticky;
	top: 110px;
}

.lq-pd-aside .elementor-widget-image {
	border-bottom: 1px solid var(--lq-line);
	padding: 18px;
}

.lq-pd-aside .lq-pd-aside-body {
	padding: 20px;
}

.lq-pd-aside .lq-pd-aside-name {
	align-items: center;
	color: var(--lq-ink);
	display: flex;
	font-size: 19px;
	font-weight: 600;
	gap: 9px;
	margin-bottom: 12px;
}

.lq-pd-aside .elementor-text-editor {
	font-size: 13px;
	line-height: 1.8;
}

.lq-pd-docs {
	background: #fff;
	border: 1px solid var(--lq-line);
	border-radius: 8px;
	margin-top: 18px;
	overflow: hidden;
}

.lq-pd-docs-head {
	align-items: center;
	background: var(--lq-red);
	color: #fff;
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	letter-spacing: 0.04em;
	padding: 11px 14px;
	text-transform: uppercase;
}

.lq-pd-docs-item {
	border-top: 1px solid var(--lq-line);
	color: var(--lq-ink) !important;
	display: block;
	font-size: 12.5px;
	padding: 10px 14px;
	text-decoration: none;
}

.lq-pd-docs-item:hover {
	background: var(--lq-soft);
	color: var(--lq-red) !important;
}

.lq-pd-quote {
	margin-top: 18px;
}

.lq-pd-quote .elementor-button {
	background: var(--lq-red);
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 14px;
	letter-spacing: 0.06em;
	padding: 14px;
	text-align: center;
	width: 100%;
}

/* spec blocks ------------------------------------------------------------ */

.lq-pd-block {
	margin-bottom: 40px;
}

.lq-pd-block-head {
	border-bottom: 1px solid var(--lq-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
}

.lq-pd-block-head .elementor-heading-title {
	font-size: 24px;
}

.lq-pd-toggle {
	align-items: center;
	background: var(--lq-soft);
	border-radius: 50%;
	color: var(--lq-ink);
	cursor: pointer;
	display: inline-flex;
	height: 28px;
	justify-content: center;
	transition: all 0.25s var(--lq-ease);
	width: 28px;
}

.lq-pd-toggle:hover {
	background: var(--lq-red);
	color: #fff;
}

.lq-pd-block.is-collapsed .lq-pd-block-body {
	display: none;
}

.lq-pd-block.is-collapsed .lq-pd-toggle svg {
	transform: rotate(180deg);
}

table.lq-spec-table {
	border-collapse: collapse;
	font-size: 13px;
	margin: 0 0 6px;
	width: 100%;
}

table.lq-spec-table caption {
	background: var(--lq-gray);
	border-radius: 8px;
	color: var(--lq-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 9px 14px;
	text-align: left;
}

table.lq-spec-table th,
table.lq-spec-table td {
	border: 1px solid var(--lq-line);
	padding: 9px 14px;
	text-align: left;
	vertical-align: top;
}

/* The class is doubled on purpose: hello-elementor's reset.css ships
   `table tbody > tr:nth-child(2n+1) > th { background: rgba(128,128,128,.07) }`
   which outranks a single-class selector and would grey out every other row. */

table.lq-spec-table.lq-spec-table tbody > tr > th {
	background: #fff;
	color: var(--lq-body);
	font-weight: 400;
	width: 22%;
}

table.lq-spec-table.lq-spec-table tbody > tr > td {
	background: var(--lq-soft);
	color: var(--lq-ink);
	font-weight: 500;
	width: 28%;
}

.lq-pd-text p {
	margin-bottom: 16px;
}

.lq-pd-gallery .elementor-widget-image img {
	width: 100%;
}

.lq-pd-gallery .gallery-item {
	position: relative;
}

.lq-pd-gallery .gallery-item::after {
	background: rgba(0, 0, 0, 0.35);
	border-radius: 50%;
	color: #fff;
	content: "+";
	font-size: 18px;
	height: 30px;
	left: 16px;
	line-height: 30px;
	position: absolute;
	text-align: center;
	top: 16px;
	width: 30px;
}

.lq-pd-aside .lq-pd-aside-body {
	display: block;
}

.lq-pd-specs .lq-spec-table {
	margin-bottom: 8px;
}

.lq-pd-specs .lq-spec-table th {
	width: 20%;
}

.lq-pd-specs .lq-spec-table td {
	width: 30%;
}

.lq-pd-hero .elementor-widget-image img,
.lq-pd-hero-img img {
	border-radius: 10px;
	margin: 0 auto;
	max-height: 440px;
	object-fit: contain;
	width: auto;
}

/* the reference rules off the hero image with a full-width 2px rule */

.lq-pd-rule {
	padding: 0;
}

.lq-pd-rule .elementor-divider-separator {
	border-top: 2px solid var(--lq-ink);
}

.lq-pd-gallery .elementor-widget-container,
.lq-pd-gallery .gallery {
	width: 100%;
}

.lq-pd-gallery .gallery-item img {
	border: 1px solid var(--lq-line);
	height: auto;
	width: 100%;
}

/* ==========================================================================
   14. About page
   ========================================================================== */

.lq-about-intro .elementor-text-editor {
	/* reference lead paragraph on this page: 24/300/30 */
	font-size: 24px;
	font-weight: 300;
	line-height: 30px;
	text-align: center;
}

.lq-about-wide img {
	border-radius: 10px;
	height: 380px;
	object-fit: cover;
	width: 100%;
}

.lq-about-body .elementor-text-editor p {
	margin-bottom: 16px;
}

.lq-value-block .elementor-heading-title {
	font-size: 24px;
}

.lq-value-block .elementor-text-editor {
	font-size: 14px;
}

.lq-history {
	position: relative;
}

.lq-history .elementor-image-carousel .swiper-slide {
	background: transparent;
}

.lq-history-card {
	border: 1px solid var(--lq-line);
	padding: 26px 22px;
	text-align: left;
}

.lq-history-year {
	color: var(--lq-ink);
	/* the reference's milestone year is 40/600/60 */
	font-size: 40px;
	font-weight: 600;
	line-height: 60px;
	margin-bottom: 8px;
}

.lq-history .elementor-swiper-button {
	color: var(--lq-red);
}

.lq-history .elementor-swiper-button svg {
	fill: var(--lq-red);
	height: 26px;
	width: 26px;
}

/* ==========================================================================
   15. News page
   ========================================================================== */

.lq-news-grid .elementor-posts-container {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(3, 1fr);
}

.lq-news-card {
	border: 1px solid var(--lq-line);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.3s var(--lq-ease), transform 0.3s var(--lq-ease);
}

.lq-news-card:hover {
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

.lq-news-card .elementor-widget-image img {
	/* one ratio for every thumbnail so the copy and buttons line up across a
	   row even when the source art differs */
	aspect-ratio: 400 / 310;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.lq-news-card .lq-news-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px;
}

.lq-news-card .lq-news-title .elementor-heading-title {
	/* the reference's news card headline is 18/600/28.8 */
	font-size: 18px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 28.8px;
}

.lq-news-card .lq-news-excerpt .elementor-text-editor {
	font-size: 13.5px;
	margin-top: 10px;
}

.lq-news-card .lq-news-more {
	margin-top: auto;
	padding-top: 18px;
}

.lq-news-card .lq-news-more .elementor-button {
	background: var(--lq-red);
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 32px;
	min-width: 169px;
	padding: 3px 20px;
}

/* Cards are plain flex items so the grid never collides on narrow screens. */

.lq-news-grid .lq-news-card {
	margin-bottom: 0;
}

/* The reference drops the middle column so the three rails read as a
   waterfall rather than three rigid rows. */

.lq-news-grid > .e-con-inner {
	align-items: flex-start;
}

.lq-news-grid .lq-news-card {
	/* Every card starts on the same line and stretches to the row height —
	   the old staggered `margin-top` on the middle column read as a misaligned
	   grid. */
	align-self: stretch;
	margin-top: 0;
}

.lq-news-date {
	color: var(--lq-muted);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   15b. Products overview
   ========================================================================== */

.lq-prod-card {
	background: #fff;
	border: 1px solid var(--lq-line);
	box-sizing: border-box;
	transition: box-shadow 0.3s var(--lq-ease), transform 0.3s var(--lq-ease);
}

.lq-prod-card:hover {
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

.lq-prod-card .elementor-widget-image {
	margin-bottom: 4px;
	width: 100%;
}

.lq-prod-card .elementor-widget-image img {
	height: 120px;
	margin: 0 auto;
	object-fit: contain;
	width: auto;
}

.lq-prod-card .lq-prod-name .elementor-heading-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.09em;
}

.lq-prod-card .elementor-text-editor {
	font-size: 13px;
	line-height: 1.7;
}

.lq-btn-ghost-dark .elementor-button {
	background: transparent;
	border: 1px solid var(--lq-line-strong);
	color: var(--lq-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 32px;
	padding: 3px 20px;
}

.lq-btn-ghost-dark .elementor-button:hover {
	background: var(--lq-red);
	border-color: var(--lq-red);
	color: #fff;
}

/* ==========================================================================
   14b. About page value blocks
   ========================================================================== */

.lq-value-block {
	margin: 0 auto 72px;
}

.lq-value-block .elementor-widget-image img {
	width: 100%;
}

.lq-value-block .lq-value-title .elementor-heading-title {
	/* reference section title on this page: 34/500/51 */
	font-size: 34px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 51px;
}

.lq-value-block .elementor-text-editor {
	font-size: 14.5px;
}

.lq-crumb {
	color: var(--lq-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
}

.lq-crumb a {
	color: var(--lq-muted);
}

.lq-crumb a:hover {
	color: var(--lq-red);
}

/* ==========================================================================
   16. Contact page
   ========================================================================== */

.lq-office .elementor-widget-image img {
	width: 100%;
}

.lq-office h3.elementor-heading-title,
.lq-office .lq-office-name .elementor-heading-title {
	font-size: 19px;
	margin: 22px 0 16px;
}

.lq-office .elementor-text-editor {
	font-size: 13.5px;
	line-height: 1.85;
}

.lq-office .elementor-text-editor strong {
	color: var(--lq-ink);
	display: block;
	font-weight: 600;
}

.lq-office .elementor-text-editor a {
	color: var(--lq-red);
	text-decoration: none;
}

/* ==========================================================================
   17. Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.lq-hero-title .elementor-heading-title {
		font-size: 62px;
	}

	.lq-cat-cell {
		min-height: 232px;
	}
}

@media (max-width: 1024px) {
	.lq-hero-title .elementor-heading-title {
		font-size: 52px;
	}

	.lq-pad {
		padding: 62px 0;
	}

	.lq-cat-aside,
	.lq-pd-aside {
		margin-bottom: 34px;
		position: static;
	}

	.lq-model-list {
		max-height: none;
	}

	.lq-news-grid .elementor-posts-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.lq-pad {
		padding: 46px 0;
	}

	:root {
		--lq-header-h: 68px;
	}

	/* keep the mobile bar to [logo][hamburger]; the rails are hidden by the
	   widget visibility settings, so the row no longer needs 3 equal rails */
	.lq-header .lq-navrow > .e-con-inner > .e-con:first-child,
	.lq-header .lq-navrow > .e-con:first-child {
		display: none;
	}

	.lq-header .lq-navrow > .e-con-inner > .lq-logo,
	.lq-header .lq-navrow > .lq-logo {
		flex: 1 1 auto;
		align-items: flex-start;
	}

	.lq-header .lq-navrow > .e-con-inner > .e-con:last-child,
	.lq-header .lq-navrow > .e-con:last-child {
		flex: 0 0 auto;
	}

	.lq-header .lq-nav-mobile {
		display: block;
	}

	.lq-header .hfe-nav-menu__toggle {
		display: inline-flex;
	}

	.lq-hero {
		min-height: 460px;
	}

	.lq-hero > .e-con-inner {
		padding-top: 120px !important;
	}

	.lq-hero-title .elementor-heading-title {
		font-size: 34px;
	}

	.lq-hero-title .lq-hl {
		padding: 0 12px 3px;
	}

	.lq-side-cta {
		/* 844 - 160 - 100 = the reference's 584px top offset on a phone */
		top: auto !important;
		bottom: 100px;
		right: -70px;
		width: 86px !important;
	}

	.lq-side-cta .elementor-button {
		font-size: 9px;
		height: 80px;
		padding: 14px 10px 16px;
	}

	.lq-sec-title .elementor-heading-title {
		font-size: 26px;
	}

	.lq-band .lq-band-title .elementor-heading-title {
		font-size: 27px;
	}

	.lq-cat-cell {
		min-height: 200px;
	}

	.lq-card {
		min-height: 320px;
	}

	.lq-form-wrap {
		padding: 24px 20px 22px;
	}

	.lq-form-row {
		display: block;
	}

	.lq-form-grid,
	.lq-form-col .lq-form-row {
		grid-template-columns: 1fr;
	}

	/* the reference stretches the send button to the full form width on phones */
	.lq-form-wrap input[type="submit"],
	.lq-form-wrap button[type="submit"],
	.lq-form-wrap .wpcf7-submit {
		float: none;
		min-width: 0;
		width: 100%;
	}

	.lq-news-grid .elementor-posts-container {
		grid-template-columns: 1fr;
	}

	.lq-model-row {
		flex-direction: column;
	}

	.lq-model-row .lq-model-thumb {
		border-bottom: 1px solid var(--lq-line);
		border-right: 0;
		flex-basis: auto;
	}

	.lq-model-row .lq-model-body,
	.lq-model-row .lq-model-specs {
		flex-basis: auto;
		width: 100%;
	}
}

/* ==========================================================================
   18. Elementor / Hello theme nudges
   ========================================================================== */

.elementor-widget-image img {
	display: block;
}

.elementor-button {
	border-radius: 4px;
	transition: all 0.25s var(--lq-ease);
}

.elementor-widget-heading .elementor-heading-title:last-child {
	margin-bottom: 0;
}

.page-id-home .site-main,
.lq-full .site-main {
	padding: 0;
}

.lq-hide-title .entry-header,
.lq-hide-title .page-header {
	display: none;
}

.lq-full .site-content {
	padding: 0;
}

.lq-full .site-main > .page-content {
	max-width: 100%;
	padding: 0;
}

/* ==========================================================================
   19. 1:1 parity pass

   Everything below re-states one measured value from www.hidromek.com/na-EN
   (desktop 1440 and iPhone 390). The widget-level geometry (bar heights,
   flyout width, colours) also lives in the Elementor template so the settings
   panel still shows the same numbers — these rules only make sure nothing in
   the Hello/HFE reset outranks them.
   ========================================================================== */

/* --- top bar: flat #454448, 44px tall, 8px inset ------------------------ */

.lq-topbar,
.lq-header-overlay .lq-topbar,
.lq-header.is-stuck .lq-topbar {
	background: var(--lq-bar);
}

.lq-topbar .lq-lang,
.lq-topbar .elementor-widget-text-editor {
	font-size: 13px;
	letter-spacing: 0.06em;
}

/* --- desktop search: 176x28 outlined pill with the magnifier inside ----- */

/* Elementor writes the widget's own CSS as
   `.elementor-46 .elementor-element.elementor-element-<id> .hfe-search-form__input`
   and inlines it *after* this file with the same four-class weight, so plain
   specificity cannot beat it — these three declarations are pinned instead.
   Everything else on the field is still driven by the Elementor controls. */

.lq-header .lq-topbar .lq-topbar-search .hfe-search-form__container,
.lq-header .lq-topbar .lq-topbar-search .elementor-search-form__container {
	border: 0;
	height: 28px;
	min-height: 28px;
	width: 184px;
}

.lq-header .lq-topbar .lq-topbar-search .hfe-search-form__input {
	background: transparent !important;
	border: 1px solid #e2e2e2;
	border-radius: 3px;
	box-sizing: border-box;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	height: 28px;
	letter-spacing: 0;
	padding: 0 10px 0 30px !important;
	width: 176px !important;
}

.lq-header .lq-topbar .lq-topbar-search .hfe-search-form__input::placeholder {
	color: #fff;
	opacity: 1;
}

/* HFE parks the clear + submit buttons in a 50px tall rail; pull them back
   onto the 28px field and keep only the magnifier, inside on the left. */
.lq-header .lq-topbar .lq-topbar-search #clear-with-button {
	display: none;
}

.lq-header .lq-topbar .lq-topbar-search .hfe-search-submit {
	align-items: center;
	color: #b9b9b9;
	display: flex;
	height: 28px;
	justify-content: center;
	left: 0;
	position: absolute;
	right: auto;
	width: 30px;
}

.lq-header .lq-topbar .lq-topbar-search .hfe-search-submit i,
.lq-header .lq-topbar .lq-topbar-search .hfe-search-submit svg {
	color: #b9b9b9;
	font-size: 14px;
}

/* --- nav rails: 18px/500 caps, 8x15 padding, flush to the bar edges ----- */

.lq-header .lq-navrow {
	min-height: var(--lq-header-h);
	padding: 0;
}

.lq-header .lq-navrow > .e-con-inner {
	max-width: 1440px;
	width: 100%;
}

.lq-nav-left .hfe-nav-menu a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu a.hfe-menu-item {
	line-height: 24px;
	padding: 8px 15px;
	text-transform: uppercase;
}

/* --- floating CTA: 92px rail parked 70px off-screen, slides out on hover - */

.lq-side-cta {
	border-radius: 6px 0 0 6px;
	right: -70px;
	top: 220px;
	width: 92px !important;
}

.lq-side-cta .elementor-button {
	height: 81px;
}

/* ==========================================================================
   20. Phone shell — [logo][hamburger] 60px bar + full-bleed grey drawer
   ========================================================================== */

@media (max-width: 767px) {
	.lq-header {
		background: var(--lq-bar);
	}

	/* the reference drops the social/language/search strip on phones */
	.lq-header .lq-topbar {
		display: none;
	}

	.lq-header .lq-navrow {
		min-height: var(--lq-drawer-h);
		padding: 0 20px;
	}

	.lq-header .hfe-nav-menu__toggle,
	.lq-header .hfe-nav-menu__toggle .hfe-nav-menu-icon {
		color: #fff;
	}

	.lq-nav-mobile .hfe-nav-menu__toggle {
		height: 24px;
		padding: 0;
		width: 28px;
	}

	.lq-nav-mobile .hfe-nav-menu__toggle .hfe-nav-menu-icon {
		width: 28px;
	}

	.lq-nav-mobile .hfe-nav-menu__toggle svg {
		height: 24px;
		width: 28px;
	}

	/* the sheet is open whenever HFE flags the toggle: park the floating rail
	   so it cannot paint over the menu, exactly like the reference */
	body:has(.lq-nav-mobile .hfe-nav-menu__toggle.hfe-active-menu) .lq-side-cta {
		display: none;
	}

	/* full-bleed sheet hanging off the bottom of the bar. HFE ships
	   `.hfe-flyout-wrapper .hfe-side.hfe-flyout-right{width:300px}` and lets
	   its script write `right` inline, so both have to be pinned. */
	.lq-header .lq-nav-mobile .hfe-flyout-wrapper .hfe-side,
	.lq-header .lq-nav-mobile .hfe-flyout-wrapper .hfe-side.hfe-flyout-right {
		background: rgba(127, 127, 127, 0.98);
		bottom: 0 !important;
		height: auto !important;
		left: auto !important;
		max-width: 100vw !important;
		right: 0 !important;
		top: var(--lq-drawer-h) !important;
		width: 100vw !important;
	}

	/* the sheet already covers the page; no dimming layer behind it */
	.lq-nav-mobile .hfe-flyout-overlay {
		background: transparent;
	}

	.lq-nav-mobile .hfe-flyout-content {
		background: rgba(127, 127, 127, 0.98) !important;
		color: #000;
		height: 100%;
		padding: 0 0 24px !important;
	}

	/* HFE's own close button lives inside the sheet, whose translateZ(0) clip
	   makes it impossible to lift into the bar — the reference swaps the
	   hamburger itself for an X, so draw that instead. */
	.lq-nav-mobile .hfe-flyout-close {
		display: none !important;
	}

	.lq-nav-mobile .hfe-nav-menu__toggle.hfe-active-menu svg {
		display: none;
	}

	.lq-nav-mobile .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon {
		height: 24px;
		position: relative;
		width: 28px;
	}

	.lq-nav-mobile .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::before,
	.lq-nav-mobile .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::after {
		background: #fff;
		content: "";
		height: 2px;
		left: 2px;
		position: absolute;
		top: 11px;
		width: 24px;
	}

	.lq-nav-mobile .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::before {
		transform: rotate(45deg);
	}

	.lq-nav-mobile .hfe-nav-menu__toggle.hfe-active-menu .hfe-nav-menu-icon::after {
		transform: rotate(-45deg);
	}

	/* the reference's accordion rows are 46px tall, 20px/500, sentence-flat */
	.lq-nav-mobile .hfe-nav-menu a.hfe-menu-item,
	.lq-nav-mobile .hfe-nav-menu a.hfe-menu-item:visited,
	.lq-nav-mobile .hfe-nav-menu li.current-menu-item > a.hfe-menu-item,
	.lq-nav-mobile .hfe-nav-menu li.current_page_item > a.hfe-menu-item {
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		color: #000 !important;
		font-size: 20px !important;
		font-weight: 500 !important;
		letter-spacing: normal !important;
		line-height: 24px;
		padding: 11px 20px !important;
		text-transform: uppercase;
	}

	.lq-nav-mobile .hfe-nav-menu a.hfe-menu-item:hover,
	.lq-nav-mobile .hfe-nav-menu a.hfe-menu-item:focus {
		color: #000 !important;
	}

	/* nested items (the 13 product categories) sit one step in */
	.lq-nav-mobile .sub-menu a.hfe-menu-item {
		font-size: 15px !important;
		line-height: 20px;
		padding: 9px 20px 9px 36px !important;
		text-transform: none;
	}

	.lq-nav-mobile .sub-arrow {
		color: #000;
	}

	/* HFE outlines the accordion arrow with a dotted border on hover/focus */
	.lq-nav-mobile .hfe-menu-toggle,
	.lq-nav-mobile .hfe-menu-toggle:hover,
	.lq-nav-mobile .hfe-menu-toggle:focus {
		border: 0;
		outline: 0;
	}

	.lq-nav-mobile .hfe-nav-menu__toggle:focus,
	.lq-nav-mobile .hfe-nav-menu a.hfe-menu-item:focus {
		outline: 0;
	}

	/* the drawer carries its own search field, cloned in by the theme script */
	.lq-drawer-search {
		padding: 1px 2px 0;
	}

	.lq-drawer-search .hfe-search-form__container {
		border: 0 !important;
		height: 44px !important;
		min-height: 44px !important;
		width: 100% !important;
	}

	.lq-drawer-search .hfe-search-form__input {
		background: transparent !important;
		border: 1px solid #e2e2e2 !important;
		border-radius: 3px !important;
		box-sizing: border-box;
		color: #fff !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		height: 44px !important;
		letter-spacing: 0.04em;
		padding: 0 20px !important;
		width: 100% !important;
	}

	.lq-drawer-search .hfe-search-form__input::placeholder {
		color: #fff !important;
		opacity: 1 !important;
	}

	/* the reference shows a bare field — submitting works via the keyboard's
	   Go/Search key, so both icon buttons are suppressed */
	.lq-drawer-search button[type="reset"],
	.lq-drawer-search .hfe-search-submit {
		display: none !important;
	}
}

/* ==========================================================================
   21. Widget-default guards

   Elementor paints social icons with each network's brand colour and paints
   "current" nav items with the kit's secondary token. Both showed up as stray
   blue/green/brand-red squares and a green menu label. The kit's globals are
   now the LUANQI palette (Site Settings), and these rules pin the two widgets
   that would otherwise still fall back to a foreign colour.
   ========================================================================== */

.lq-topbar .elementor-social-icon {
	background-color: transparent !important;
	color: #fff !important;
}

.lq-footer .elementor-social-icon {
	background-color: var(--lq-ink) !important;
	color: #fff !important;
}

.lq-topbar .elementor-social-icon:hover,
.lq-footer .elementor-social-icon:hover {
	background-color: var(--lq-red) !important;
	color: #fff !important;
}

.lq-nav-left .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
.lq-nav-left .hfe-nav-menu > li.current-menu-ancestor > a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu > li.current-menu-ancestor > a.hfe-menu-item,
.lq-nav-left .hfe-nav-menu > li.current_page_item > a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu > li.current_page_item > a.hfe-menu-item {
	border-top-color: transparent !important;
	color: var(--lq-red) !important;
}

/* --- services page ------------------------------------------------------ */

/* --- contact page: three equal office columns, like the reference -------- */

.lq-office .elementor-widget-image {
	width: 100%;
}

.lq-office .elementor-widget-image img {
	/* the reference renders every office photo in the same 437×291 box — the
	   natural 3:2 of the file, with an 8px radius */
	aspect-ratio: 3 / 2;
	border-radius: 8px;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* the reference's contact page carries only the breadcrumb + a light 36px
   title — no kicker above it */
body.page-id-36 .lq-page-head .lq-page-kicker {
	display: none;
}

body.page-id-36 .lq-page-head .lq-page-title .elementor-heading-title {
	font-weight: 400;
}

.elementor-widget-heading.lq-office-name .elementor-heading-title {
	color: #000;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 38.4px;
	margin: 18px 0 0;
}

/* Each row is "label / value" stacked, not run together on one line.
   Elementor 4.x drops the content straight into the widget (there is no
   `.elementor-text-editor` wrapper any more), so the class to match is
   `.elementor-widget-text-editor`. */
.lq-office .elementor-widget-text-editor {
	color: #666;
	font-size: 16px;
	font-weight: 300;
	line-height: 25.6px;
	margin: 0 0 12px;
}

.lq-office .elementor-widget-text-editor strong {
	color: #000;
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 25.6px;
}

.lq-office .elementor-widget-text-editor a {
	color: var(--lq-red);
	text-decoration: none;
}

/* the "I agree…" consent line is 14/500/21 on the reference, with no margin */
.lq-form-wrap .wpcf7-acceptance,
.lq-form-wrap .wpcf7-acceptance .wpcf7-list-item-label,
.lq-form-wrap .wpcf7-list-item-label,
.lq-contact .wpcf7-acceptance,
.lq-contact .wpcf7-list-item-label,
.wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7-list-item-label {
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	margin: 0;
}

@media (min-width: 768px) {
	.lq-office {
		/* three ~448px columns with a ~33px gutter inside the 1410px grid.
		   The percentages stay just under a third so rounding can never push
		   the third column onto its own row. */
		width: calc(33.2% - 20px) !important;
	}
}

/* --- plain WordPress pages (Privacy Policy / Conditions / Cookie Policy) --
   These are not Elementor pages, so they render through Hello Elementor's
   default template — give them the site's type scale and a readable measure. */

/* ==========================================================================
   24. Home highlight band + promo cards

   Measured on the reference at 1920: the block caps at 1448 and centres, each
   panel is inset a further 15px (so the visible box is 1418), the two promo
   cards are 694 wide each, every panel carries a 10px radius, and both the
   horizontal and the vertical gutters are 30px.
   ========================================================================== */

/* the band is a page-level boxed container, so it already inherits the 15px
   site gutter — capping it at 1448 leaves the visible panel at 1418 */
.lq-band {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1448px !important;
	border-radius: 10px;
	overflow: hidden;
}

.lq-cards {
	column-gap: 30px;
	margin: 30px auto 0 !important;
	max-width: 1448px !important;
	padding: 0 15px;
	row-gap: 30px;
	width: 100%;
}

.lq-card {
	border-radius: 10px;
	overflow: hidden;
	width: calc(50% - 15px) !important;
}

@media (max-width: 767px) {
	.lq-band {
		border-radius: 10px;
		margin-left: 15px !important;
		margin-right: 15px !important;
		max-width: none;
	}

	.lq-cards {
		padding: 0 15px;
	}

	.lq-card {
		width: 100% !important;
	}
}

body:not(.elementor-page) .page-content {
	margin: 0 auto;
	max-width: 930px;
	padding: 54px 15px 90px;
}

body:not(.elementor-page) .page-content h1 {
	font-size: 36px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 50.4px;
	margin: 0 0 26px;
}

body:not(.elementor-page) .page-content h2 {
	font-size: 24px;
	font-weight: 700;
	line-height: 33.6px;
	margin: 34px 0 12px;
}

body:not(.elementor-page) .page-content p,
body:not(.elementor-page) .page-content li {
	color: #666;
	font-size: 16px;
	font-weight: 300;
	line-height: 25.6px;
	margin: 0 0 14px;
}

body:not(.elementor-page) .page-content a {
	color: var(--lq-red);
}

/* ==========================================================================
   25. Buttons + spec-table rules, matching the reference's stylesheet

   The reference ships one button rule:
     .button{background:#EF1E1C;border-radius:4px;color:#FFF;font-size:16px;
             line-height:32px;min-width:169px;padding:3px 20px}
   with a smaller variant `.button.t{padding:4px 12px 5px;min-width:102px}` and
   an outline variant `.button.ng{border:1px solid #FFF;background:transparent}`.
   ========================================================================== */

.elementor-button {
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 32px;
	min-width: 169px;
	padding: 3px 20px;
}

/* ==========================================================================
   26. Interaction framework — mirrors the reference's rules

   The reference's stylesheet has exactly three hover behaviours:
     .button:hover, body.desktop .button:hover { background:#1A1A1A; color:#FFF }
     .button.ng:hover                          { background:#000;    color:#FFF }
     #subHeader .productGroups li:hover > div  { box-shadow:1px 1px 16px rgba(0,0,0,.16) }
   and it only binds them under `body.desktop`, so a tap on a phone never
   leaves a control stuck in its hover colour. Both parts are reproduced here.
   ========================================================================== */

.elementor-button {
	transition: all 0.2s ease;
}

/* --- hover states (desktop) -------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	/* solid red button -> ink */
	.lq-btn-solid .elementor-button:hover,
	.lq-news-card .lq-news-more .elementor-button:hover {
		background: #1a1a1a;
		color: #fff;
	}

	/* outline button on white -> ink fill */
	.lq-btn-ghost-dark .elementor-button:hover {
		background: #1a1a1a;
		border-color: #1a1a1a;
		color: #fff;
	}

	/* outline button on a photo -> solid black, like `.button.ng:hover` */
	.lq-btn-ghost .elementor-button:hover {
		background: #000;
		border-color: #000;
		color: #fff;
	}

	/* compact outline button in the model rows */
	.lq-model-cta .elementor-button:hover {
		background: var(--lq-red) !important;
		border-color: var(--lq-red) !important;
		color: #fff !important;
	}

	/* grid / card hover is a soft shadow only — no fill, no lift */
	.lq-cat-cell:hover {
		background: #fff;
		box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.16);
		outline: 0;
		transform: none;
	}

	.lq-prod-card:hover {
		border-color: var(--lq-line);
		box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.16);
		transform: none;
	}

	.lq-news-card:hover {
		box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.16);
		transform: none;
	}

	.lq-model-row:hover {
		box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.16);
	}
}

/* --- touch devices: no hover state, exactly like the reference's gate --- */

@media (hover: none), (pointer: coarse) {
	.lq-cat-cell:hover {
		background: #fff;
		box-shadow: none;
		outline-color: #f0f0f0;
		transform: none;
	}

	.lq-prod-card:hover {
		border-color: var(--lq-line);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
		transform: none;
	}

	.lq-news-card:hover,
	.lq-model-row:hover {
		box-shadow: none;
		transform: none;
	}

	.lq-btn-solid .elementor-button:hover,
	.lq-news-card .lq-news-more .elementor-button:hover {
		background: var(--lq-red);
		color: #fff;
	}

	.lq-btn-ghost-dark .elementor-button:hover {
		background: transparent;
		border-color: var(--lq-line-strong);
		color: var(--lq-ink);
	}

	/* touch devices keep the pressed look instead of falling back to the
	   outline: red fill, white type (the client's request) */
	.lq-model-cta .elementor-button:active,
	.lq-model-cta .elementor-button:focus {
		background: var(--lq-red) !important;
		border-color: var(--lq-red) !important;
		color: #fff !important;
	}

	.lq-btn-ghost .elementor-button:hover {
		background: rgba(255, 255, 255, 0.06);
		border-color: #fff;
		color: #fff;
	}
}

/* buttons that sit inside a card or a row use the reference's compact size */
.lq-cat-cell .elementor-button,
.lq-model-cta .elementor-button,
.lq-prod-card .elementor-button,
.lq-news-card .elementor-button,
.lq-service-card .elementor-button,
.lq-award-item .elementor-button {
	min-width: 102px;
	padding: 4px 12px 5px;
}

/* the reference separates spec rows with a dotted rule, not a solid one */
table.lq-spec-table.lq-spec-mini th,
table.lq-spec-table.lq-spec-mini td,
table.lq-spec-table.lq-spec-mini.lq-spec-mini tbody > tr > th,
table.lq-spec-table.lq-spec-mini.lq-spec-mini tbody > tr > td,
.lq-pd-specs .lq-spec-table th,
.lq-pd-specs .lq-spec-table td {
	border-style: dotted;
}

.lq-service-card .elementor-widget-icon {
	text-align: center;
	width: 100%;
}

.lq-service-card .elementor-icon {
	color: var(--lq-red);
}

.lq-service-card .elementor-icon svg {
	fill: currentColor;
	height: 30px;
	width: 30px;
}

.lq-service-card {
	min-height: 340px;
	row-gap: 6px;
}

/* ==========================================================================
   22. Reference type scale + asset spec

   Every number below is the computed value read off www.hidromek.com/na-EN
   with tools/type_audit.py + tools/text_leaves.py. The reference renders the
   same size at 1440 and at 390, so there is no per-breakpoint table here.
   ========================================================================== */

:root {
	--lq-gutter: 15px;
	--lq-content: 1448px;
	--lq-fs-h1: 36px;
	--lq-fs-h2: 24px;
	--lq-fs-h3: 30px;
	--lq-fs-body: 16px;
	--lq-fs-spec: 16px;
	--lq-fs-meta: 14px;
}

/* page-level shells adopt the reference's fluid 1448px / 15px gutter grid.
   Both the custom properties and the longhands are set: Elementor only emits
   the padding shorthand when the element has its own padding control saved. */
.e-con.e-parent.e-con-boxed {
	--padding-left: var(--lq-gutter);
	--padding-right: var(--lq-gutter);
	padding-left: var(--lq-gutter);
	padding-right: var(--lq-gutter);
}

/* --- headings ----------------------------------------------------------- */

.lq-page-head .lq-page-kicker .elementor-heading-title,
.lq-pd-head .lq-pd-cat .elementor-heading-title {
	font-size: var(--lq-fs-h2);
	font-weight: 400;
	line-height: 30px;
	letter-spacing: normal;
}

.lq-page-head .lq-page-title .elementor-heading-title,
.lq-pd-head .lq-pd-model .elementor-heading-title {
	font-size: var(--lq-fs-h1);
	font-weight: 600;
	letter-spacing: normal;
	line-height: 50.4px;
	/* the reference leaves 8px under the page title */
	margin-bottom: 8px;
}

/* Only the product templates use a 600 title; the reference's About / News /
   Contact / Service pages all render it at 400. */
.lq-page-head .lq-page-title .elementor-heading-title {
	font-weight: 400;
}

.lq-page-head--product .lq-page-title .elementor-heading-title {
	font-weight: 600;
}

/* the widget carries the class, so matching it keeps four classes of weight
   and beats the heading typography Elementor inlines after this file */
.elementor-widget-heading.lq-sec-title .elementor-heading-title {
	font-size: var(--lq-fs-h1);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 54px;
}

.elementor-widget-heading.lq-sec-sub .elementor-heading-title {
	color: var(--lq-ink);
	font-size: var(--lq-fs-h2);
	font-weight: 300;
	letter-spacing: normal;
	line-height: 30px;
	/* the reference leaves 40px under "Let Us Reach You" */
	margin-bottom: 40px;
}

.elementor-widget-heading.lq-pd-block-head .elementor-heading-title {
	font-size: var(--lq-fs-h3);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 42px;
}

.lq-pd-aside .lq-pd-aside-name {
	font-size: var(--lq-fs-h2);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 36px;
}

.lq-pd-aside .elementor-text-editor {
	color: #666;
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

.lq-pd-badge {
	border-radius: 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	padding: 2px 8px;
}

/* --- body copy ---------------------------------------------------------- */

body {
	font-size: var(--lq-fs-body);
	font-weight: 300;
	line-height: 1.6;
}

.elementor-widget-text-editor p {
	/* the reference's content paragraphs are 16/400 on a 24px line */
	font-weight: 400;
	line-height: 24px;
}

/* --- spec tables: 16/300 label against a 16/700 value ------------------- */

table.lq-spec-table th,
table.lq-spec-table td,
table.lq-spec-table.lq-spec-mini th,
table.lq-spec-table.lq-spec-mini td,
.lq-pd-specs .lq-spec-table th,
.lq-pd-specs .lq-spec-table td {
	font-size: var(--lq-fs-spec);
	line-height: 25.6px;
}

table.lq-spec-table th,
table.lq-spec-table.lq-spec-mini th,
.lq-pd-specs .lq-spec-table th {
	font-weight: 300;
}

table.lq-spec-table td,
table.lq-spec-table.lq-spec-mini td,
.lq-pd-specs .lq-spec-table td {
	font-weight: 700;
}

.lq-spec-group-title,
.lq-pd-specs h4,
.lq-pd-specs .lq-spec-group {
	font-size: 18px;
	font-weight: 700;
	line-height: 28.8px;
}

/* --- model rows: 24/600 name, 12/600 tag -------------------------------- */

.lq-model-name,
.lq-model-name .elementor-heading-title {
	font-size: 24px;
	font-weight: 600;
	line-height: normal;
}

.lq-model-tag,
.lq-pd-aside .lq-model-tag {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: normal;
	padding: 3px 10px;
}

/* --- sidebar card copy -------------------------------------------------- */

.lq-cat-card .lq-cat-aside-name .elementor-heading-title,
.lq-cat-aside .lq-cat-aside-name .elementor-heading-title {
	color: #666;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 26px;
}

.lq-cat-card .elementor-text-editor,
.lq-cat-aside .elementor-text-editor {
	color: #666;
	/* the *category* page's sidebar copy is 14/500/21 — the 18/400/26 setting
	   belongs to the product detail rail, not here */
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
}

/* --- footer / chrome ---------------------------------------------------- */

.elementor-widget-icon-list.lq-footer-list .elementor-icon-list-text {
	color: #070606;
	font-size: var(--lq-fs-meta);
	font-weight: 300;
	/* the reference's footer links sit on a normal line box */
	line-height: normal;
}

/* the family switcher and the footer lists render as bare <a> children of an
   Elementor icon-list, which Elementor paints with
   `var(--e-global-color-secondary)` — that rule is inlined after this file
   with the same two classes of weight, so these need a third. */
.elementor-widget-icon-list.lq-cat-list .elementor-icon-list-text {
	color: var(--lq-ink);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: normal;
}

.elementor-widget-icon-list.lq-cat-list .elementor-icon-list-item.lq-active .elementor-icon-list-text,
.elementor-widget-icon-list.lq-cat-list .elementor-icon-list-item:hover .elementor-icon-list-text {
	color: var(--lq-red);
}

.lq-footer .elementor-widget-heading .elementor-heading-title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: normal;
	margin-bottom: 12px;
}

.lq-lang {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 25.6px;
}

.lq-crumb,
.elementor-widget-text-editor p.lq-crumb {
	color: #999998;
	font-size: var(--lq-fs-meta);
	font-weight: 500;
	letter-spacing: normal;
	line-height: 21px;
	margin: 0;
}

.lq-footer-bottom .elementor-text-editor,
.lq-footer-bottom .elementor-text-editor p,
.lq-footer-bottom .elementor-widget-text-editor,
.lq-footer-bottom .elementor-widget-text-editor p {
	font-size: 11px;
	font-weight: 300;
	line-height: 16.5px;
}

/* the reference rail link is a 72px-tall hit area */
.lq-nav-left .hfe-nav-menu a.hfe-menu-item,
.lq-nav-right .hfe-nav-menu a.hfe-menu-item {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	height: 72px;
	line-height: 56px;
	padding: 0 15px;
}

/* --- asset spec --------------------------------------------------------- */

/* sidebar family photo: 400×310 (r 1.29) at every breakpoint */
.lq-cat-card .elementor-widget-image img,
.lq-cat-aside .lq-cat-photo img {
	aspect-ratio: 400 / 310;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* model row thumbnail: 209×171 desktop, 220×180 on phones */
.lq-model-row .lq-model-thumb {
	flex: 0 0 209px;
	min-width: 0;
	padding: 0;
}

.lq-model-row .lq-model-thumb img {
	height: 171px;
	max-height: none;
	object-fit: contain;
	width: 100%;
}

/* the reference gives the model copy rail 40% of the row, leaving ~349px
   for the spec sheet */
.lq-model-row .lq-model-body {
	flex: 0 0 40%;
}

/* detail hero: 2870×1854 natural, matches the reference's 930×601 box */
.lq-pd-hero .elementor-widget-image img,
.lq-pd-hero-img img {
	aspect-ratio: 2870 / 1854;
	height: auto;
	max-height: none;
	max-width: 930px;
	object-fit: cover;
	width: 100%;
}

/* the aside photo is the card's full width at the reference's 400×310 */
.lq-pd-aside .elementor-widget-image {
	padding: 0;
}

.lq-pd-aside .elementor-widget-image img {
	aspect-ratio: 400 / 310;
	border-radius: 0;
	height: auto;
	max-height: none;
	object-fit: cover;
	width: 100%;
}

/* award logos 306×30, store badges 150×43 */
.lq-award-item .elementor-widget-image img {
	/* the reference's home award strip renders each badge in a 150×70 box */
	height: 70px;
	margin: 0 auto 14px;
	object-fit: contain;
	width: 150px;
}

.lq-footer .lq-store-badge img,
.lq-store-badge img {
	height: 43px;
	object-fit: contain;
	width: 150px;
}

@media (max-width: 767px) {
	.lq-model-row .lq-model-thumb {
		flex: 0 0 auto;
		width: 100%;
	}

	.lq-model-row .lq-model-thumb img {
		height: 180px;
		width: auto;
	}

	.lq-page-head .lq-page-title .elementor-heading-title,
	.lq-pd-head .lq-pd-model .elementor-heading-title {
		line-height: 1.3;
	}

	.lq-nav-left .hfe-nav-menu a.hfe-menu-item,
	.lq-nav-right .hfe-nav-menu a.hfe-menu-item {
		height: auto;
		line-height: 24px;
		padding: 8px 15px;
	}
}

/* ==========================================================================
   23. Home product grid — card layout

   The section sits inside the site grid (max 1448px, 15px gutters, so wide
   viewports get white space either side) and every family is its own rounded
   card rather than a cell of one continuous table.
   ========================================================================== */

@media (min-width: 768px) {
	.lq-cat-grid {
		background: transparent;
		border-radius: 0;
		/* centre the whole section on the site grid: at 1440 this is still
		   edge-to-edge (matching the reference), wider screens get white space */
		margin-left: auto;
		margin-right: auto;
		max-width: 1448px;
		overflow: visible;
		padding-left: 15px;
		padding-right: 15px;
		width: 100%;
	}

	/* the grid is three full-width rows of four cells, so the gaps live on the
	   row itself (a full container has no .e-con-inner wrapper) */
	.lq-cat-grid > .e-con {
		column-gap: 22px;
		row-gap: 22px;
		width: 100%;
	}

	.lq-cat-cell {
		background: #fff;
		border: 1px solid var(--lq-line);
		border-radius: 10px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
		min-height: 273px;
		outline: 0;
		padding: 35px 18px 30px;
		/* four to a row once the three 22px gaps are taken out of the width */
		width: calc(25% - 16.5px) !important;
	}

	.lq-cat-cell:hover {
		border-color: var(--lq-line-strong);
		box-shadow: 0 16px 38px rgba(0, 0, 0, 0.09);
		outline: 0;
		transform: translateY(-2px);
	}

	.lq-cat-cell .lq-cat-name {
		padding: 0 10px;
		width: 100%;
	}

	.elementor-widget-heading.lq-cat-name .elementor-heading-title {
		box-sizing: border-box;
		color: #0a1d32;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: normal;
		line-height: 28.8px;
		padding: 0;
		text-transform: none;
		width: 100%;
	}

	.elementor-widget-heading.lq-cat-name .elementor-heading-title a {
		display: block;
		padding: 6px 0;
		width: 100%;
	}

	.lq-cat-cell .elementor-widget-image {
		margin: 26px 0 0;
		padding: 0;
		width: 100%;
	}

	.lq-cat-cell .elementor-widget-image img {
		/* keep the art's own 3:1 frame instead of forcing a fixed height, so the
		   cell's image box matches the reference's 360×120 proportion */
		aspect-ratio: 3 / 1;
		height: auto;
		object-fit: contain;
		width: 100%;
	}

	.lq-cat-cell:hover .elementor-widget-image img {
		transform: none;
	}

	/* the /products/ listing uses the same rounded-card grid */
	.lq-prod-grid {
		background: transparent;
	}

	.lq-prod-grid .e-con-inner {
		column-gap: 22px;
		margin: 0 auto;
		max-width: 1448px;
		padding: 0 15px;
		row-gap: 22px;
		width: 100%;
	}

	.lq-prod-card {
		background: #fff;
		border: 1px solid var(--lq-line);
		border-radius: 10px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
		padding: 30px 20px 32px;
		width: calc(25% - 16.5px) !important;
	}

	.lq-prod-card:hover {
		border-color: var(--lq-line-strong);
		box-shadow: 0 16px 38px rgba(0, 0, 0, 0.09);
		transform: translateY(-3px);
	}

	.elementor-widget-heading.lq-prod-name .elementor-heading-title {
		color: #0a1d32;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: normal;
		line-height: 1.5;
		text-transform: none;
	}

	.lq-prod-card .elementor-text-editor {
		font-size: 14px;
		line-height: 21px;
	}

	.lq-prod-card .elementor-widget-image {
		margin-bottom: 14px;
	}

	.lq-prod-card .elementor-widget-image img {
		aspect-ratio: 3 / 1;
		height: auto;
		object-fit: contain;
		width: 100%;
	}
}

/* ==========================================================================
   27. Product lines grid — the reference's ul.productGroups framework
   --------------------------------------------------------------------------
   Four cells per row, no gutters, 1px separators between cells, hover shadow
   only. Rendered by [lq_family_lines] from the product lines, so the backend
   (Products → 产品分类) drives this page.
   ========================================================================== */

.lq-famgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 auto;
	max-width: 1448px;
	padding: 0 15px;
	width: 100%;
}

.lq-famcell {
	border-right: 1px solid #ddd;
	text-align: center;
}

.lq-famcell:nth-child(4n) {
	border-right: 0;
}

.lq-famcell-inner {
	align-items: center;
	border: 1px solid transparent;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 35px 0;
	transition: box-shadow 0.2s ease;
}

.lq-famcell-title {
	height: 36px;
	padding: 0 10px;
}

.lq-famcell-title a {
	color: var(--lq-ink);
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 36px;
	text-align: center;
	text-transform: uppercase;
}

.lq-famcell-sub {
	color: var(--lq-red);
	font-size: 13px;
	font-weight: 600;
	height: 24px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

.lq-famcell-image {
	padding: 0 15px;
	width: 100%;
}

.lq-famcell-image img {
	aspect-ratio: 3 / 1;
	display: block;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	width: 100%;
}

@media (hover: hover) and (pointer: fine) {
	.lq-famcell:hover .lq-famcell-inner {
		box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.16);
	}
}

@media (max-width: 1024px) {
	.lq-famgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.lq-famcell:nth-child(4n) {
		border-right: 1px solid #ddd;
	}

	.lq-famcell:nth-child(3n) {
		border-right: 0;
	}
}

@media (max-width: 767px) {
	.lq-famgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lq-famcell:nth-child(3n) {
		border-right: 1px solid #ddd;
	}

	.lq-famcell:nth-child(2n) {
		border-right: 0;
	}

	.lq-famcell-inner {
		padding: 24px 0;
	}

	.lq-famcell-title a {
		font-size: 15px;
	}
}

/* ==========================================================================
   28. Family-page model rows — the reference's #products li.product framework
   --------------------------------------------------------------------------
   Reference (assets/css/prod/custom/products.css):
     li.product     1px #DDD border, 10px radius, 20px gap between rows
     thumb rail     25% (large-3), info rail 75% (large-9)
     name           24px/600 black + the red .label badge (top:-4px)
     .specs panel   #EEE, 10px padding, one pair per line,
                    border-top dashed 1px #999, label 14/300, value 14/600
   Values copied 1:1 so the rows match the reference.
   ========================================================================== */

.lq-model-row {
	border: 1px solid #ddd;
	border-radius: 10px;
	display: flex;
	margin-bottom: 20px;
	min-height: 0;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.lq-model-row:last-child {
	margin-bottom: 0;
}

.lq-model-row:hover {
	box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.16);
}

.lq-model-row .lq-model-thumb {
	align-items: center;
	background: #fff;
	border-right: 1px solid #ddd;
	display: flex;
	flex: 0 0 25%;
	justify-content: center;
	min-width: 0;
	padding: 18px;
}

.lq-model-row .lq-model-thumb img {
	height: auto;
	max-height: 150px;
	object-fit: contain;
	width: 100%;
}

.lq-model-info {
	display: flex;
	flex: 0 0 75%;
	min-width: 0;
}

.lq-model-row .lq-model-body {
	flex: 0 0 50%;
	justify-content: flex-start;
	padding: 20px 24px 20px 20px;
}

.lq-model-row .lq-model-name {
	color: #000;
	display: block;
	font-size: 24px;
	font-weight: 600;
	line-height: initial;
	margin: 0;
}

.lq-model-row .lq-model-name a {
	color: inherit;
}

.lq-model-row .lq-model-name a:hover {
	text-decoration: underline;
}

.lq-model-row .lq-model-tag {
	background: #cb0000;
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	line-height: initial;
	margin: 0;
	padding: 5px 14px 4px;
	position: relative;
	top: -4px;
}

.lq-model-cta {
	margin-top: 18px;
}

/* parameter panel -------------------------------------------------------- */

.lq-model-row .lq-model-specs {
	background: #eee;
	flex: 0 0 50%;
	margin: 0;
	min-width: 0;
	padding: 10px;
}

.lq-spec-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lq-spec-row {
	border-top: dashed 1px #999;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-top: 6px;
	padding-top: 10px;
}

.lq-spec-row:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.lq-spec-name {
	font-size: 14px;
	font-weight: 300;
	line-height: 22.4px;
}

.lq-spec-value {
	font-size: 14px;
	font-weight: 600;
	line-height: 22.4px;
	text-align: right;
}

/* the reference stacks the rails below the medium breakpoint ------------ */

@media (max-width: 1024px) {
	.lq-model-row {
		flex-direction: column;
	}

	.lq-model-row .lq-model-thumb {
		border-bottom: 1px solid #ddd;
		border-right: 0;
		flex: 0 0 auto;
	}

	.lq-model-info {
		flex: 0 0 auto;
		flex-direction: column;
	}

	.lq-model-row .lq-model-body,
	.lq-model-row .lq-model-specs {
		flex: 0 0 auto;
	}

	.lq-model-row .lq-model-specs {
		margin-top: 10px;
	}
}

/* ==========================================================================
   29. Family-page sidebar switcher, rendered from the product lines
   --------------------------------------------------------------------------
   Same type metrics as the reference list (18/600, 6px vertical padding, no
   boxes, red on hover/active) but generated by [lq_family_lines_nav], and it
   scrolls once the list is longer than the column.
   ========================================================================== */

.lq-cat-nav {
	list-style: none;
	margin: 18px 0 0;
	max-height: 420px;
	overflow-y: auto;
	padding: 0 8px 0 0;
}

.lq-cat-nav-item {
	margin: 0;
}

.lq-cat-nav-item a {
	color: #0a1d32;
	display: block;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: normal;
	padding: 6px 0;
	text-transform: uppercase;
	transition: color 0.25s var(--lq-ease);
}

.lq-cat-nav-item a:hover,
.lq-cat-nav-item.is-active a {
	color: var(--lq-red);
}

.lq-cat-nav::-webkit-scrollbar {
	width: 6px;
}

.lq-cat-nav::-webkit-scrollbar-thumb {
	background: #d5d5d5;
	border-radius: 3px;
}

@media (max-width: 1024px) {
	.lq-cat-nav {
		max-height: 300px;
	}
}

/* ==========================================================================
   30. Detail-page downloads — the reference's #sideBar .buttons .file rows
   --------------------------------------------------------------------------
   Reference: .file { font-size:14px; margin-bottom:2px } with a red PDF badge
   (.type { background:red; color:#fff; font-size:13px; font-weight:700;
   padding:0 6px; border-radius:5px }). A real file downloads; a placeholder URL
   is labelled REQUEST and goes to the contact page instead.
   ========================================================================== */

.lq-pd-docs .lq-pd-file {
	align-items: baseline;
	color: var(--lq-ink);
	display: flex;
	font-size: 14px;
	gap: 8px;
	margin-bottom: 4px;
	text-decoration: none;
}

.lq-pd-docs .lq-pd-file:hover {
	color: #666;
}

.lq-pd-file-type {
	background: red;
	border-radius: 5px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 0 6px;
	white-space: nowrap;
}

.lq-pd-file.is-request .lq-pd-file-type {
	background: #999;
}

.lq-pd-file-name {
	border-bottom: 1px solid transparent;
}

.lq-pd-file:hover .lq-pd-file-name {
	border-bottom-color: currentColor;
}

/* ==========================================================================
   31. Detail page — reference values re-asserted
   --------------------------------------------------------------------------
   Measured against hidromek's product page (1440): #sideBar 450px wide with a
   1px #DDD border, photo 448×347 (400/310), .description 18/400/26px, the
   download row 14/500, the tab header 30/700, the tab body 16/500, the spec
   labels 18/300 and the spec values 16/700. These rules come last so the
   earlier generic rules cannot override them again.
   ========================================================================== */

.lq-product .lq-pd-aside {
	border: 1px solid #ddd;
}

.lq-product .lq-pd-aside-media img {
	aspect-ratio: 400 / 310;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.lq-product .lq-pd-aside-intro,
.lq-product .lq-pd-aside-intro p {
	color: #666;
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
	margin: 0;
}

.lq-product .lq-pd-docs .lq-pd-file {
	font-weight: 500;
}

.lq-product .lq-pd-block-head h2 {
	font-size: 30px;
	font-weight: 700;
}

.lq-product .lq-pd-block-body {
	font-weight: 500;
}

.lq-product .lq-pd-specs .lq-spec-table th {
	font-size: 18px;
	font-weight: 300;
}

.lq-product .lq-pd-specs .lq-spec-table td {
	font-size: 16px;
	font-weight: 700;
}

/* the reference sidebar has no box padding: the photo is flush to the 1px
   border and each text block carries its own padding (#sideBar .description
   10px 23px 32px, .buttons 0 20px 20px …) */
.lq-product .lq-pd-aside {
	overflow: hidden;
	padding: 0;
}

.lq-product .lq-pd-aside-media {
	margin: 0;
	padding: 0;
}

.lq-product .lq-pd-aside-body {
	padding: 0;
}

.lq-product .lq-pd-aside-name {
	padding: 6px 23px 0;
}

.lq-product .lq-pd-aside-intro {
	margin-top: 10px;
	padding: 10px 23px 24px;
}

.lq-product .lq-pd-docs {
	padding: 0 23px 14px;
}

.lq-product .lq-pd-quote {
	padding: 6px 23px 24px;
}

/* the 4-cell spec table is wider than a phone viewport — let it shrink instead
   of pushing the page sideways (desktop values stay untouched) */
@media (max-width: 767px) {
	/* the reference stacks each key/value pair on its own line on a phone; a
	   4-cell table would wrap mid-word, so turn every row into a two-column
	   grid (label | value, then the second pair underneath) */
	.lq-product .lq-pd-specs .lq-spec-table {
		table-layout: auto;
		width: 100%;
	}

	.lq-product .lq-pd-specs .lq-spec-table tr {
		display: grid;
		grid-template-columns: minmax(84px, auto) 1fr;
	}

	.lq-product .lq-pd-specs .lq-spec-table th,
	.lq-product .lq-pd-specs .lq-spec-table td {
		overflow-wrap: break-word;
		text-align: left;
		width: auto;
	}
}
/* ==========================================================================
   32. photo fit guard
   lq_photo_html() tags a photo whose file is far smaller than the CSS box.
   Those are painted at their own resolution (contained, centred) instead of
   being stretched, which is what made small uploads look blurry.
   ========================================================================== */

.lq-photo-native {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.lq-famcell-img.lq-photo-native,
.lq-model-thumb-img.lq-photo-native {
	height: auto;
	width: auto;
}



/* ==========================================================================
   Client revision (hover / press): every button fills brand red #ef1d1c with
   WHITE type. Before this block the outline buttons (.lq-btn-ghost-dark 鈥?   the Services cards and "View All Products") filled red but kept the dark
   ink label, so the text was hard to read inside the red block.
   ========================================================================== */
.elementor-button:hover,
.elementor-button:focus-visible,
.elementor-button:active,
.lq-form-wrap input[type="submit"]:hover,
.lq-form-wrap input[type="submit"]:focus-visible,
.lq-form-wrap input[type="submit"]:active,
.lq-form-wrap button[type="submit"]:hover,
.lq-form-wrap button[type="submit"]:focus-visible,
.lq-form-wrap button[type="submit"]:active,
.wpcf7-submit:hover,
.wpcf7-submit:focus-visible,
.wpcf7-submit:active {
	background: var(--lq-red) !important;
	border-color: var(--lq-red) !important;
	color: #fff !important;
}

/* buttons that are already solid red at rest keep a visible pressed step */
.lq-btn-solid .elementor-button:hover,
.lq-news-card .lq-news-more .elementor-button:hover,
.lq-pd-quote .elementor-button:hover,
.lq-form-wrap input[type="submit"]:hover,
.wpcf7-submit:hover {
	background: var(--lq-red-dark) !important;
	color: #fff !important;
}
/* Contact form SEND only: the reference turns this red control to INK on
   hover / press (client request 2026-10-13) 鈥?other buttons keep the red fill. */
.lq-form-wrap input[type="submit"]:hover,
.lq-form-wrap input[type="submit"]:focus-visible,
.lq-form-wrap input[type="submit"]:active,
.lq-form-wrap button[type="submit"]:hover,
.lq-form-wrap button[type="submit"]:focus-visible,
.lq-form-wrap button[type="submit"]:active,
.wpcf7-submit:hover,
.wpcf7-submit:focus-visible,
.wpcf7-submit:active {
	background: var(--lq-ink) !important;
	border-color: var(--lq-ink) !important;
	color: #fff !important;
}
/* ==========================================================================
   Client revision (change point 1, 2026-10-13)
   1) the photo-card "Learn More" buttons lose their white outline;
   2) every cover image / photo gets a hover zoom.
   ========================================================================== */

/* ---- 1. no white stroke on the photo-card buttons ---------------------- */
.lq-btn-ghost .elementor-button,
.lq-card .elementor-button,
.lq-band .elementor-button {
	background-color: transparent !important;
	border-color: transparent !important;
}
.lq-btn-ghost .elementor-button:hover,
.lq-btn-ghost .elementor-button:focus-visible,
.lq-btn-ghost .elementor-button:active,
.lq-card .elementor-button:hover,
.lq-band .elementor-button:hover {
	background-color: var(--lq-red) !important;
	border-color: var(--lq-red) !important;
	color: #fff !important;
}

/* ---- 2a. Elementor background-image blocks (dark band + promo cards) --- */
.lq-band::before,
.lq-card::before {
	background-image: inherit;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	inset: 0;
	position: absolute;
	transition: transform 0.6s var(--lq-ease);
	z-index: 0;
}
.lq-band:hover::before,
.lq-band:focus-within::before,
.lq-card:hover::before,
.lq-card:focus-within::before {
	transform: scale(1.06);
}

/* ---- 2b. ordinary <img> photos ---------------------------------------- */
.elementor-widget-image { overflow: hidden; }
.elementor-widget-image img {
	transform: scale(1);
	transition: transform 0.55s var(--lq-ease);
}
.elementor-widget-image:hover img,
.lq-band:hover img,
.lq-card:hover img,
.lq-cat-cell:hover .elementor-widget-image img,
.lq-prod-card:hover .elementor-widget-image img,
.lq-news-card:hover .elementor-widget-image img,
.lq-award-item:hover .elementor-widget-image img,
.lq-model-row:hover .elementor-widget-image img {
	transform: scale(1.06);
}

/* the top banner carousel gets a gentler zoom */
.elementor-widget-image-carousel img { transition: transform 0.7s var(--lq-ease); }
.elementor-widget-image-carousel:hover img { transform: scale(1.04); }

/* chrome (header logo) stays still */
.elementor-widget-site-logo img,
.elementor-widget-site-logo:hover img,
header .elementor-widget-image img,
header .elementor-widget-image:hover img {
	transform: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.lq-band::before, .lq-card::before,
	.elementor-widget-image img, .elementor-widget-image-carousel img { transition: none !important; }
	.lq-band:hover::before, .lq-card:hover::before,
	.elementor-widget-image:hover img, .elementor-widget-image-carousel:hover img { transform: none !important; }
}
/* ==========================================================================
   Client revision (change point 2, 2026-10-13)
   The AWARDS logo strip becomes a seamless auto-scrolling carousel. The row is
   duplicated in JS (see functions.php) and translated by exactly one set width,
   so the loop never shows a seam. Hovering pauses it so a badge stays clickable.
   ========================================================================== */
.lq-awards-wrap.lq-marquee,
.lq-awards-wrap.lq-marquee > .e-con-inner {
	overflow: hidden;
}
.lq-awards-wrap.lq-marquee .lq-marquee-track {
	animation: lq-awards-scroll var(--lq-marquee-duration, 40s) linear infinite;
	display: flex;
	flex-wrap: nowrap !important;
	gap: 30px;
	width: max-content;
	will-change: transform;
}
.lq-awards-wrap.lq-marquee .lq-marquee-track > .lq-award-item {
	flex: 0 0 auto !important;
	margin: 0 !important;
	width: 220px !important;
}
.lq-awards-wrap.lq-marquee:hover .lq-marquee-track,
.lq-awards-wrap.lq-marquee:focus-within .lq-marquee-track {
	animation-play-state: paused;
}
@keyframes lq-awards-scroll {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( calc( -1 * var( --lq-marquee-distance, 50% ) ) ); }
}
@media (prefers-reduced-motion: reduce) {
	.lq-awards-wrap.lq-marquee .lq-marquee-track { animation: none !important; }
}


/* ==========================================================================
   Client revision (change point 3): the sidebar downloads become two
   collapsible bars — BROCHURE and CATALOGUE — like the reference. Each one is
   fed by its own media-library PDF slot on the product edit screen; a slot
   without a file asks for the document through the contact form instead.
   ========================================================================== */
.lq-pd-doc-group + .lq-pd-doc-group {
	margin-top: 10px;
}

.lq-pd-docs-head {
	cursor: pointer;
	list-style: none;
}

.lq-pd-docs-head::-webkit-details-marker {
	display: none;
}

.lq-pd-docs-head:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}

.lq-pd-docs-title {
	flex: 1 1 auto;
}

.lq-pd-doc-plus {
	flex: none;
	height: 14px;
	margin-left: 8px;
	position: relative;
	width: 14px;
}

.lq-pd-doc-plus::before,
.lq-pd-doc-plus::after {
	background: currentColor;
	content: "";
	position: absolute;
}

.lq-pd-doc-plus::before {
	height: 2px;
	left: 0;
	right: 0;
	top: 6px;
}

.lq-pd-doc-plus::after {
	bottom: 0;
	left: 6px;
	top: 0;
	width: 2px;
}

/* open group shows a minus instead of a plus */
.lq-pd-doc-group[open] > .lq-pd-docs-head .lq-pd-doc-plus::after {
	display: none;
}

.lq-pd-doc-body {
	padding: 12px 14px 8px;
}

.lq-pd-doc-body .lq-pd-file:last-child {
	margin-bottom: 6px;
}


/* ==========================================================================
   Client revision (change point 4): the model-row parameter panel accepts
   "名称: 数值" as well as "名称 | 数值", and a line without a separator is
   printed as a small group heading instead of being dropped.
   ========================================================================== */
.lq-model-specs .lq-spec-row--group {
	border-top: 0;
	margin-top: 10px;
	padding-top: 0;
}

.lq-model-specs .lq-spec-row--group:first-child {
	margin-top: 0;
}

.lq-model-specs .lq-spec-group-title {
	color: var(--lq-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 22px;
	text-transform: uppercase;
}


/* ==========================================================================
   Client revision (change point 7): the two App Store / Google Play badges in
   the global footer become the WhatsApp and Wechat QR codes, so they need to be
   square (the badge rule pins them to 150x43) and their captions centred.
   ========================================================================== */
/* the two QR codes sit side by side and scale down together so both fit.
   Elementor writes a per-widget rule (three classes deep) for width, hence the
   !important — these two selectors only ever touch the two QR widgets. */
.elementor-element-233eddf {
	gap: 14px 8px !important;
}

.lq-qr-badge {
	flex: 0 1 auto !important;
	max-width: calc(50% - 6px) !important;
	width: auto !important;
}

.lq-qr-badge img {
	height: auto !important;
	max-width: 100% !important;
	object-fit: contain;
	width: 100% !important;
}

.lq-qr-badge .widget-image-caption,
.lq-qr-badge .elementor-image-caption {
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 22px;
	margin-top: 10px;
	text-align: center;
}

.lq-qr-badge .widget-image-caption p,
.lq-qr-badge .elementor-image-caption p {
	margin: 0;
}


/* ==========================================================================
   Client revision (change point 8): the enquiry form must match the reference's
   arrangement — a full-height Message box on the left, Country and City sharing
   one row on the right. The Message box was being squashed to 46px by the
   `.wpcf7-form-control:not(...)` rule (five classes deep), hence !important.
   ========================================================================== */
.lq-form-wrap textarea.wpcf7-textarea,
.lq-form-wrap .wpcf7 textarea {
	height: 148px !important;
	min-height: 148px;
}

.lq-form-wrap .lq-form-row > p {
	display: grid;
	gap: 0 16px;
	grid-template-columns: 1fr 1fr;
	margin: 0;
}

.lq-form-wrap .lq-form-row .wpcf7-form-control-wrap {
	display: block;
}

@media (max-width: 767px) {
	.lq-form-wrap .lq-form-row > p {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   Client revision (change point 9): the PRODUCTS dropdown becomes a full-width
   panel where every product line shows a name and its picture, and the hovered
   cell lifts to white — the reference's mega menu. Elementor writes the panel
   geometry with `.elementor-46 .elementor-element.elementor-element-8124d16 …`
   (three classes), hence the !important on the geometry only.
   ========================================================================== */
@media (min-width: 1025px) {
	.lq-nav-left li.hfe-has-submenu:hover > ul.sub-menu,
	.lq-nav-left li.hfe-has-submenu:focus-within > ul.sub-menu {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		top: var(--lq-panel-top, 116px) !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		border-top: 1px solid var(--lq-line) !important;
		box-shadow: 0 26px 48px rgba(0, 0, 0, 0.10) !important;
		z-index: 9999 !important;
	}

	.lq-nav-left li.hfe-has-submenu > ul.sub-menu > li {
		background: #fafafa;
		display: block;
		margin: 0 !important;
		border-right: 1px solid var(--lq-line);
		border-bottom: 1px solid var(--lq-line);
		transition: background 0.2s var(--lq-ease);
	}

	.lq-nav-left li.hfe-has-submenu > ul.sub-menu > li > a.hfe-sub-menu-item {
		align-items: center;
		background: transparent !important;
		color: var(--lq-ink) !important;
		display: flex;
		flex-direction: column;
		gap: 16px;
		justify-content: flex-start;
		letter-spacing: 0.02em;
		min-height: 176px;
		padding: 24px 16px 20px !important;
		text-align: center;
		text-transform: uppercase;
		font-size: 15px;
		font-weight: 700;
		transition: background 0.2s var(--lq-ease), color 0.2s var(--lq-ease), box-shadow 0.2s var(--lq-ease);
	}

	.lq-nav-left .lq-nav-thumb {
		background: #fff;
		border-radius: 6px;
		display: block;
		padding: 10px 12px;
		width: 100%;
	}

	.lq-nav-left .lq-nav-thumb img {
		display: block;
		height: auto;
		margin: 0 auto;
		max-height: 112px;
		object-fit: contain;
		width: auto;
	}

	/* hover / keyboard focus = the "selected" look from the reference */
	.lq-nav-left li.hfe-has-submenu > ul.sub-menu > li:hover > a.hfe-sub-menu-item,
	.lq-nav-left li.hfe-has-submenu > ul.sub-menu > li > a.hfe-sub-menu-item:focus-visible {
		background: #fff !important;
		box-shadow: 0 22px 38px rgba(0, 0, 0, 0.12);
		color: var(--lq-red) !important;
		position: relative;
		z-index: 2;
	}

	.lq-nav-left li.hfe-has-submenu > ul.sub-menu > li:hover .lq-nav-thumb img,
	.lq-nav-left li.hfe-has-submenu > ul.sub-menu > li > a.hfe-sub-menu-item:focus-visible .lq-nav-thumb img {
		transform: scale(1.04);
	}

	.lq-nav-left .lq-nav-thumb img {
		transition: transform 0.25s var(--lq-ease);
	}

	/* on a short screen the panel scrolls instead of running off the page */
	.lq-nav-left li.hfe-has-submenu:hover > ul.sub-menu {
		max-height: calc(100vh - var(--lq-panel-top, 116px));
		overflow-y: auto;
	}
}

/* the mobile accordion keeps the plain text list */
@media (max-width: 1024px) {
	.lq-nav-thumb {
		display: none !important;
	}
}


/* ==========================================================================
   Client revision (change point 10): the home-page category grid uses the same
   look as the level-1 dropdown panel — one picture + one name per cell, thin
   dividers instead of card boxes, and the hovered cell lifts to white.
   ========================================================================== */
body.home .lq-famgrid {
	background: #fff;
	border-top: 1px solid var(--lq-line);
	display: grid;
	gap: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.home .lq-famcell {
	background: #fafafa;
	border-bottom: 1px solid var(--lq-line);
	border-radius: 0;
	border-right: 1px solid var(--lq-line);
	box-shadow: none;
	margin: 0;
	padding: 0;
	transition: background 0.2s var(--lq-ease), box-shadow 0.2s var(--lq-ease);
}

body.home .lq-famcell:hover {
	background: #fff;
	box-shadow: 0 22px 38px rgba(0, 0, 0, 0.12);
	position: relative;
	z-index: 2;
}

body.home .lq-famcell-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px 18px 26px;
}

body.home .lq-famcell-title,
body.home .lq-famcell-title a {
	color: var(--lq-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	transition: color 0.2s var(--lq-ease);
}

body.home .lq-famcell:hover .lq-famcell-title a {
	color: var(--lq-red);
}

body.home .lq-famcell-img {
	height: auto;
	margin: 0 auto;
	max-height: 120px;
	object-fit: contain;
	width: auto;
}

body.home .lq-famcell .lq-nav-thumb,
body.home .lq-famcell .lq-famcell-sub {
	display: none;
}

@media (max-width: 1024px) {
	body.home .lq-famgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ==========================================================================
   Client revision (change point 11): the home-page category cells use the
   level-1 list look — no card boxes, thin dividers, hovered cell lifts to white.
   ========================================================================== */
body.home .lq-cat-grid {
	border-radius: 0;
}

body.home .lq-cat-grid > .e-con {
	column-gap: 0 !important;
	row-gap: 0 !important;
}

body.home .lq-cat-cell {
	background: #fafafa;
	border: 0;
	border-bottom: 1px solid var(--lq-line);
	border-radius: 0;
	border-right: 1px solid var(--lq-line);
	box-shadow: none;
	outline: 0;
	transform: none;
	width: 25% !important;
}

body.home .lq-cat-cell:hover {
	background: #fff;
	border-color: var(--lq-line);
	box-shadow: 0 22px 38px rgba(0, 0, 0, 0.12);
	outline: 0;
	transform: none;
	z-index: 5;
}

body.home .lq-cat-cell .lq-cat-name .elementor-heading-title {
	color: var(--lq-ink);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.35;
	text-transform: uppercase;
}

body.home .lq-cat-cell:hover .lq-cat-name .elementor-heading-title a {
	color: var(--lq-red);
}

body.home .lq-cat-cell .elementor-widget-image {
	margin: 18px 0 0;
}

body.home .lq-cat-cell .elementor-widget-image img {
	height: auto;
	max-height: 118px;
	object-fit: contain;
	width: auto;
}

body.home .lq-cat-hide {
	display: none !important;
}

@media (max-width: 1024px) {
	body.home .lq-cat-cell {
		width: 50% !important;
	}
}

/* the last leftover cell still carries a second name/art pair - hide it */
body.home .lq-cat-cell > .lq-cat-name ~ .lq-cat-name,
body.home .lq-cat-cell > .lq-cat-art ~ .lq-cat-art {
	display: none !important;
}

/* level-1 heading above the level-2 list in the product sidebar */
.lq-cat-nav-head {
	border-bottom: 1px solid var(--lq-line);
	color: var(--lq-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0;
	padding: 0 0 10px;
	text-transform: uppercase;
}

.lq-cat-nav-head + .lq-cat-nav {
	margin-top: 14px;
}


/* an empty category page still lists what belongs to it */
.lq-cat-plan {
	background: #fafafa;
	border: 1px solid var(--lq-line);
	border-radius: 10px;
	padding: 30px 32px 28px;
}

.lq-cat-plan-note {
	color: var(--lq-body);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 18px;
	max-width: 720px;
}

.lq-cat-plan-list {
	columns: 2;
	gap: 28px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.lq-cat-plan-list li {
	border-bottom: 1px solid var(--lq-line);
	break-inside: avoid;
	color: var(--lq-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 10px 0;
	text-transform: uppercase;
}

.lq-cat-plan-cta {
	margin: 0;
}

@media (max-width: 767px) {
	.lq-cat-plan-list {
		columns: 1;
	}
	.lq-cat-plan {
		padding: 22px 18px;
	}
}

.lq-cat-plan-cta .elementor-button {
	background: var(--lq-red) !important;
	border: 0 !important;
	border-radius: 4px !important;
	color: #fff !important;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 13px 26px !important;
	text-transform: uppercase;
}

.lq-cat-plan-cta .elementor-button:hover,
.lq-cat-plan-cta .elementor-button:focus-visible {
	background: var(--lq-ink) !important;
	color: #fff !important;
}