/* ==========================================================================
   Haier blog — header + footer UI/UX
   --------------------------------------------------------------------------
   Loaded LAST (linked just before </body> in test-1.html) so that, at equal
   specificity, these rules win the cascade over the theme and over the
   inline <style id="wp-custom-css"> block.

   `!important` appears here ONLY where the page's own custom CSS already used
   it — between two !important rules the more specific selector wins, so each
   one below is written at least as specific as the rule it replaces.

   To go live: paste this whole file into WordPress →
   Appearance → Customize → Additional CSS (that IS the wp-custom-css block),
   and delete the rules it supersedes — they are listed in section 9.
   ========================================================================== */

:root {
	--haier-blue: #005aaa;
	--text-dark: #292929;
	--text-light: #fff;
	--border-light: #ffffff26;
	--background: #fff;
	--foreground: #171717;
	--site-header-h: 120px;

	/* derived — hairlines on a WHITE surface. --border-light is white-alpha,
	   so it is invisible on the new white header; it is still used, correctly,
	   on the blue footer. */
	--hx-rule: rgba(41, 41, 41, .14);
	--hx-rule-soft: rgba(41, 41, 41, .08);   /* the menu rows in the mobile
	                                            target are a fainter line */
	--hx-muted: rgba(41, 41, 41, .68);
	--hx-tile: #f4f5f7;
	--hx-utility-h: 42px;
	--hx-bar-h: 78px;    /* 42 + 78 = 120px = --site-header-h, exactly */

	/* MEASURED, twice. With the ORIGINAL eleven top-level items this did not
	   work: their labels are 1,260px of text at 15px against 1,107px of room
	   on one line, which is why the site had shrunk its own nav to 9px, and a
	   first attempt here put the nav on a second row to fit it.
	   Regrouped to the mockup's six items the labels are ~416px, so the nav
	   sits beside the logo the way the mockup shows and the header lands on
	   the 120px token above. */
	--hx-header-h: 120px;
}

/* ==========================================================================
   1. The header shell — blue block becomes a white two-row header
   ========================================================================== */

#main-header {
	background: var(--background);
	position: sticky;
	top: 0;
	z-index: 200;
}

/* the page's own rule is
     .head-wrapper, .header-floating .head-wrapper { background:#0c5ca8 !important }
   so this one has to carry !important too, and be at least as specific. */
/* âš ï¸ Deliberately NOT `display:flex`. Making .head-wrapper a flex container
   turns .container into a flex item, and a flex item's automatic minimum size
   is its min-content width — which here is the whole nowrap nav. It then
   ignores max-width entirely: measured at a 1920 viewport the container went
   to 1564px and pushed the action cluster to x=2015, i.e. off the screen.
   .head-wrapper stays a block; the inner .flex does the centring. */
#main-header .head-wrapper,
#main-header.header-floating .head-wrapper {
	background: var(--background) !important;
	padding: 0 !important;
	display: block;
}

/* every text colour in the header was forced to white for the blue block */
#main-header .head-wrapper,
#main-header .head-wrapper a,
#main-header .head-wrapper ul > li > a,
#main-header .head-wrapper .logo-tagline {
	color: var(--text-dark) !important;
}

#main-header .head-wrapper .container,
#main-header .hx-utility-inner {
	max-width: 1500px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 32px;
}

/* One row: logo · nav · actions. `position: relative` so the mega panels can
   span the whole container instead of only the nav's own width. */
#main-header .head-wrapper .flex {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	min-height: var(--hx-bar-h);
	position: relative;
}

#main-header .head-wrapper .flex > .logo {
	order: 1;
}

#main-header .head-wrapper .flex > .mNav {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;           /* the automatic-minimum trap, one level down */
}

#main-header .head-wrapper .flex > .right-wrapper {
	order: 3;
	margin-left: auto;
}

/* ==========================================================================
   2. Utility strip — Store Locator / For Business
   ========================================================================== */

.hx-utility {
	background: var(--background);
	height: var(--hx-utility-h);
	display: flex;
	align-items: flex-start;
}

/* the rule is on the INNER box, not on .hx-utility — the reference insets it
   to the container so it lines up with the nav rule below it, rather than
   running edge to edge across the viewport. */
.hx-utility-inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 28px;
	height: 100%;
	border-bottom: 1px solid var(--hx-rule);
}

.hx-utility a {
	color: var(--text-dark);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2px;
	line-height: 1;
	text-decoration: none;
	transition: color .15s ease;
}

.hx-utility a:hover,
.hx-utility a:focus-visible {
	color: var(--haier-blue);
}

/* ==========================================================================
   3. Logo
   --------------------------------------------------------------------------
   The old asset could not be used: MEASURED, every opaque pixel of
   haier_latest.png is (255,255,255) — a pure-white mark drawn for the blue
   bar, invisible the moment the header turned white.

   A first attempt painted that PNG as a CSS mask filled with --haier-blue.
   It rendered as NOTHING: unlike background-image, mask-image is
   CORS-restricted, and the cross-origin PNG was rejected. Worth remembering —
   it is not a file:// quirk, it would fail from any origin that is not
   shop.haierindia.com.

   The markup now points at the blue SVG wordmark (88x28), which is what the
   reference header uses, so this section is plain sizing.

   WARNING: that SVG is served from store.haier.uat.commerzio.ai, a UAT host.
   Re-host it on shop.haierindia.com before this goes live.
   ========================================================================== */

#main-header .head-wrapper div.logo {
	max-width: none !important;
	flex: 0 0 auto;
	margin-right: 60px;
}

#main-header .head-wrapper .logo a {
	display: inline-block;
	line-height: 0;
}

#main-header .head-wrapper .logo a img {
	display: block;
	height: 28px !important;
	max-height: 28px !important;
	width: auto;
}

/* ==========================================================================
   4. Main navigation
   --------------------------------------------------------------------------
   Replaces: fixed-width items (#menu ul li{width:120px} / {width:106px}) and
   the two media queries that shrank the label to 11px and then to 9px.
   Nothing on a primary nav should be 9px.
   ========================================================================== */

#main-header .mNav {
	position: static;       /* panels anchor to .flex above, so they span the
	                           container rather than just the nav */
	justify-content: flex-start !important;
}

/* `wrap`, not a breakpoint. The first attempt pinned the single-row band to a
   guessed viewport range and two items fell off the screen at 1280px. Letting
   the row wrap on its own means the nav is correct at EVERY width without a
   number that has to be maintained: one line while it fits, two when it does
   not, never a shrunken font. */
#main-header #menu > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	width: 100%;
}

#main-header #menu ul li {
	width: auto;
	padding: 0;
	position: static;       /* so the panel can span the nav */
	vertical-align: middle;
}

#main-header #menu ul li a {
	font-size: 14px !important;
	font-weight: 500;
	letter-spacing: 0 !important;
	line-height: var(--hx-bar-h);
	text-transform: none !important;
	white-space: nowrap;
	padding: 0 16px !important;
	color: var(--text-dark) !important;
	transition: color .15s ease;
}

#main-header #menu > ul > li > a:first-child:not(.mNav.mobile > ul > li > a) {
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

/* the first label lines up with the logo above it */
#main-header #menu > ul > li:first-child > a {
	padding-left: 0 !important;
}

#main-header #menu ul li:hover > a,
#main-header #menu ul li.hover > a,
#main-header #menu ul li.current-menu-item > a {
	color: var(--haier-blue) !important;
}

/* the active item is marked, the way the reference marks "Shop" */
#main-header #menu > ul > li.current-menu-item > a,
#main-header #menu > ul > li.current-menu-ancestor > a,
#main-header #menu > ul > li.hx-active > a {
	color: var(--haier-blue) !important;
	font-weight: 600;
}

/* ==========================================================================
   5. The sub-menus
   --------------------------------------------------------------------------
   Rebuilt to the target: the product panels have TWO zones — a row of
   category tiles, a rule, then the hovered category's sub-products with a
   hairline between each cell. The text menus are plain dropdowns with a
   hairline between rows.

   âš ï¸ DO NOT set `display` on .sub-menu. inertia.js opens and closes it with
   jQuery fadeIn/fadeOut, which writes `display:block` / `display:none` as
   INLINE styles. A `display:flex !important` would beat the inline
   `display:none` too, and the panel would never close again. Everything here
   lays out with inline-block inside a block panel for that reason — and it is
   also why the sub-rows are <div>s and never nested <ul>s, which jQuery would
   fade in on hover and fight this CSS.

   âš ï¸ These selectors use `#menu ul ul` — TWO ids — on purpose. Written as
   `.mNav ul ul` (1 id, 1 class) they LOSE to the nav rule
   `#main-header #menu ul li a` (2 ids): ids are compared first, so 2 beats 1
   no matter how many classes follow. Measured the hard way — the computed
   style on a tile came back `white-space: nowrap; font-size: 14px` and the
   labels ran over each other.
   ========================================================================== */

/* --- the panel box ------------------------------------------------------ */

/* anchored to its OWN item, not to the header row: the target's panels start
   at their nav label and are only as wide as their content needs. */
#main-header #menu > ul > li.hx-mega,
#main-header #menu > ul > li.hx-drop {
	position: relative;
}

#main-header .mNav ul ul {
	top: 100% !important;
	left: 0;
	right: auto;
	margin: 0;
	background: var(--background);
	border: 1px solid var(--hx-rule);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(23, 23, 23, .14);
	text-align: left;
	font-size: 0;          /* kills the whitespace gaps between inline-blocks */
	max-height: calc(100vh - var(--hx-header-h) - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* âš ï¸ The panel's height comes from PADDING-BOTTOM, not min-height, and that is
   the whole point. Zone 2 is absolutely positioned so it adds no height, and a
   `min-height` big enough to hold it BEATS `max-height` — the spec resolves
   min over max — so the scroll cap below never applied and on a 613px-tall
   viewport the panel simply ran off the bottom of the screen with no way to
   reach it. Padding is part of the scrollable content, so it reserves the same
   room and still lets max-height cap and scroll. */
#main-header #menu ul ul.hx-panel {
	position: absolute;
	padding: 24px 24px 314px;
}

/* min-height holds the two zones open: zone-2 top + its rule + two rows of
   product cells + the panel's own bottom padding. Sized so header + panel
   still fits an 813px viewport. */
#main-header #menu ul ul.hx-panel-wide  { width: 978px !important; }

/* the target's single-category panel is narrower AND its one tile is centred
   in it — measured, ours sat 294px left of the panel's middle. */
#main-header #menu ul ul.hx-panel-narrow {
	width: 640px !important;
	text-align: center;
}

/* ...but the products below the rule stay a left-aligned grid, as in the
   target. âš ï¸ NOT `> li.hx-cat > .hx-subs`: on mobile the script lifts this
   block out of its <li> and onto the panel, and the rule stopped matching —
   measured, the last odd product (HD) drifted to the middle of the row
   because the panel's `text-align: center` was inherited again. */
#main-header #menu ul ul.hx-panel-narrow .hx-subs {
	text-align: left;
}

/* a wide panel hanging off a right-hand item would leave the page */
@media (max-width: 1320px) {
	#main-header #menu ul ul.hx-panel-wide { width: min(978px, calc(100vw - 40px)) !important; }
}

/* --- zone 1: the category tiles ----------------------------------------- */

#main-header #menu ul ul.hx-panel > li.hx-cat {
	display: inline-block;
	/* âš ï¸ box-sizing, and 153 not 155. Measured: with content-box the 8px of
	   side padding was ADDED to the width, so a tile occupied 163px and only
	   five fitted in the 923px of panel content instead of six. */
	box-sizing: border-box;
	width: 153px !important;
	margin: 0;
	padding: 0 4px 16px;
	border-bottom: 0;
	vertical-align: top;
}

#main-header #menu ul ul li a.hx-cat-tile {
	display: block;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	text-align: center;
	color: var(--text-dark) !important;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.35;
	white-space: normal;
}

#main-header #menu ul ul li a.hx-cat-tile .hx-cat-img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	padding: 12px;
	background: var(--hx-tile);
	border: 2px solid transparent;
	border-radius: 10px;
	transition: border-color .15s ease, background-color .15s ease;
}

#main-header #menu ul ul li a.hx-cat-tile .hx-cat-img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;   /* the thumbnails are shot on white */
}

#main-header #menu ul ul li a.hx-cat-tile .hx-cat-name {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.3;
}

/* the selected tile — first by default, then whichever is hovered, which is
   exactly how the target marks it */
#main-header #menu ul ul.hx-panel > li.hx-view-all + li.hx-cat > a.hx-cat-tile .hx-cat-img {
	background: var(--background);
	border-color: var(--haier-blue);
}

#main-header #menu ul ul.hx-panel > li.hx-view-all + li.hx-cat > a.hx-cat-tile .hx-cat-name {
	font-weight: 600;
}

/* âš ï¸ The "clear" rule must NOT single out :first-child. Written as
   `.hx-panel:hover > li.hx-cat:first-child`, it scored (2,5,4) while the
   "show the hovered one" rule scored (2,4,4) — so on the FIRST tile, and only
   the first, the clear rule outranked it and hovering Refrigerators blanked
   its own products and its own blue border. Clearing EVERY tile keeps the
   pair at (2,5,4) / (2,6,4), which is the order the logic needs. */
/* âš ï¸ `!important` on the clear/hover pair, because the DEFAULT rule above is
   more specific than they are. It reads `.hx-view-all + li.hx-cat` — an extra
   class AND an extra element over `:hover > li.hx-cat` — so once the "View all
   X" row was added to the panel, the default silently started outranking the
   clear. Symptom: hovering any other category left the FIRST one's tile still
   selected and its products still painted, so two product rows drew on top of
   each other. Both states are forced here; the hovered pair is the more
   specific of the two, so it still wins over the clear. */
#main-header #menu ul ul.hx-panel:hover > li.hx-cat > a.hx-cat-tile .hx-cat-img {
	background: var(--hx-tile) !important;
	border-color: transparent !important;
}

#main-header #menu ul ul.hx-panel:hover > li.hx-cat > a.hx-cat-tile .hx-cat-name {
	font-weight: 500 !important;
	color: var(--text-dark) !important;
}

#main-header #menu ul ul.hx-panel:hover > li.hx-cat:hover > a.hx-cat-tile .hx-cat-img {
	background: var(--background) !important;
	border-color: var(--haier-blue) !important;
}

#main-header #menu ul ul.hx-panel:hover > li.hx-cat:hover > a.hx-cat-tile .hx-cat-name {
	font-weight: 600 !important;
	color: var(--haier-blue) !important;
}

/* --- zone 2: the hovered category's products ---------------------------- */

/* The sub-row lives INSIDE its own <li.hx-cat> even though it is painted
   across the bottom of the panel. That is the whole trick: hovering the
   sub-row keeps its category `:hover`, so moving the mouse from a tile down
   into its products does not make them vanish. */
#main-header #menu ul ul.hx-panel > li.hx-cat > .hx-subs {
	display: none;
	position: absolute;
	left: 24px;
	right: 24px;
	border-top: 1px solid var(--hx-rule);
	padding-top: 20px;
	/* MEASURED: this box did NOT inherit the panel's `font-size: 0`, it came
	   back at 12.8px — so the whitespace between the inline-block cells was a
	   real 4px gap. Five 185px cells plus four 4px gaps is 943 against 928 of
	   room, and the fifth wrapped every time. Set here rather than relied on. */
	font-size: 0;
}

#main-header #menu ul ul.hx-panel-wide  > li.hx-cat > .hx-subs { top: 336px; }
#main-header #menu ul ul.hx-panel-narrow > li.hx-cat > .hx-subs { top: 180px; }

/* same three-step, same specificity trap — see the note above the tile rules */
/* âš ï¸ `.hx-view-all + li.hx-cat`, NOT `:first-child`. The "View all X" row was
   added to the panel later and is now its first child, so `li.hx-cat:first-child`
   silently matched nothing — measured: the default category's products came
   back `display: none` on the desktop mega panel, i.e. an empty lower zone. */
#main-header #menu ul ul.hx-panel > li.hx-view-all + li.hx-cat > .hx-subs { display: block; }
#main-header #menu ul ul.hx-panel:hover > li.hx-cat > .hx-subs { display: none !important; }
#main-header #menu ul ul.hx-panel:hover > li.hx-cat:hover > .hx-subs { display: block !important; }

/* âš ï¸ NO `li` in this selector, and that is load-bearing. On mobile the script
   moves the whole .hx-subs block out of its <li> and onto the panel, so every
   rule written as `ul ul li a.hx-sub-cell` silently stopped matching — the
   cells lost their width, their padding and their image height and rendered as
   one giant column. Nothing may assume these cells sit inside an <li>. */
#main-header #menu ul ul a.hx-sub-cell {
	display: inline-block;
	/* same trap one level down: the 1px divider below is a BORDER, and on
	   content-box it pushed each cell past its share — four 25% cells then
	   needed more than 100% and only three fitted per row. */
	box-sizing: border-box;
	/* 19.98, not 20: five inline-blocks of exactly 20% round UP to more than
	   the line box and the fifth wraps. Measured — the row came back with four
	   cells and the divider then landed on the wrong ones. */
	width: 19.98%;
	padding: 4px 14px 14px !important;
	border: 0;
	border-left: 1px solid var(--hx-rule);
	border-radius: 0;
	text-align: center;
	vertical-align: top;
	color: var(--text-dark) !important;
	font-size: 13px !important;
	font-weight: 400;
	line-height: 1.35;
	white-space: normal;
	transition: color .15s ease;
}

#main-header #menu ul ul .hx-cols-4 .hx-sub-grid > a.hx-sub-cell { width: 24.98%; }

/* the first cell of each ROW must not carry a divider */
/* âš ï¸ counted inside .hx-sub-grid, not inside .hx-subs. The "View all X" link
   is also an <a> and sits first, so counting on .hx-subs shifted every cell by
   one and put the divider down the wrong column — on the desktop panels too. */
#main-header #menu ul ul .hx-cols-5 .hx-sub-grid > a.hx-sub-cell:nth-child(5n + 1),
#main-header #menu ul ul .hx-cols-4 .hx-sub-grid > a.hx-sub-cell:nth-child(4n + 1) {
	border-left-color: transparent;
}

#main-header #menu ul ul a.hx-sub-cell:hover {
	color: var(--haier-blue) !important;
}

#main-header #menu ul ul a.hx-sub-cell .hx-sub-img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 66px;
	margin-bottom: 10px;
}

#main-header #menu ul ul a.hx-sub-cell .hx-sub-img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

#main-header #menu ul ul a.hx-sub-cell .hx-sub-name {
	display: block;
	font-size: 13px;
	line-height: 1.35;
}

/* --- the text dropdowns (About Haier, Support) -------------------------- */

#main-header #menu > ul > li.hx-drop > ul.hx-list {
	width: 246px !important;
	padding: 4px 0;
	min-height: 0;
}

#main-header #menu ul ul.hx-list li {
	display: block;
	width: 100% !important;
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

#main-header #menu ul ul.hx-list li a {
	display: block;
	padding: 13px 22px !important;
	border: 0;
	border-radius: 0;
	text-align: left;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.35;
	color: var(--text-dark) !important;
	white-space: normal;
	transition: color .15s ease, background-color .15s ease;
}

/* the target rules a hairline between rows, not around them */
#main-header #menu ul ul.hx-list li + li > a {
	border-top: 1px solid var(--hx-rule);
}

#main-header #menu ul ul.hx-list li a:hover {
	background: var(--hx-tile);
	color: var(--haier-blue) !important;
}

/* the "View all X" rows belong to the mobile drill-down only */
#main-header #menu .hx-view-all,
#main-header #menu .hx-view-all-link { display: none; }

/* no caret — the target has none, and the page had already blanked it */
#main-header .mNav li.has-sub > a::after {
	content: "" !important;
	margin: 0;
}

/* inertia.js appends <a class="drop-toggle"> to any anchor that has a next
   sibling — every category tile does, because its sub-row follows it. The
   theme hides it with `.mNav .drop-toggle{display:none}`, which LOSES here
   because the rules above are id-based. It rendered as a stray dot. */
#main-header #menu .drop-toggle {
	display: none !important;
}

/* ==========================================================================
   5b. The Shop panel
   --------------------------------------------------------------------------
   Built to the owner's reference: a full-width grey sheet under the header,
   small white category tiles on the left, a capped divider, and a "Discover"
   card on the right.

   Desktop only. The phone version of this panel -- tiles two a row, then
   the Discover list, on grey -- is in section 7c.

   !! Full width WITHOUT 100vw. The panel is positioned against `.flex`,
   which sits inside the 1500px container. 100vw counts the scrollbar and
   would push the right edge 15-17px underneath it. Instead the header is a
   size container, so `cqw` is the header's own width (the viewport minus
   the scrollbar), and the panel is pulled out to it from the centred .flex.

   !! Still no `display` on the <ul> -- see section 5. The two zones are a
   row of inline-block tiles and a right float inside a plain block, and
   the tiles are WordPress's own menu-image markup, untouched: the white
   square is the <img> itself (padding + background + object-fit), so no
   wrapper element is needed.
   ========================================================================== */

@media (min-width: 991px) {
	#main-header { container-type: inline-size; }

	#main-header #menu > ul > li.hx-shop > ul.sub-menu {
		left: calc(50% - 50cqw);
		right: auto;
		width: 100cqw;
		box-sizing: border-box;
		padding: 38px 50px 40px 80px;
		background: var(--hx-tile);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		font-family: "Montserrat", sans-serif;
		text-transform: none;
	}

	/* holds the panel open around the floated Discover card */
	#main-header #menu > ul > li.hx-shop > ul.sub-menu::after {
		content: "";
		display: block;
		clear: both;
	}

	/* --- the category tiles --------------------------------------------- */

	#main-header #menu li.hx-shop > ul > li:not(.hx-discover) {
		display: inline-block;
		vertical-align: top;
		width: 120px !important;
		margin: 0 50px 0 0;
		padding: 0;
		border: 0;
	}

	#main-header #menu li.hx-shop > ul > li > a {
		display: block;
		padding: 0 !important;
		text-align: center;
		font-size: 14px !important;
		font-weight: 500;
		line-height: 19px;
		white-space: normal;
		color: var(--text-dark) !important;
		transition: color .15s ease;
	}

	#main-header #menu li.hx-shop > ul > li > a img {
		display: block;
		box-sizing: border-box;
		width: 120px;
		height: 120px;
		max-width: none;
		padding: 24px;
		background: var(--background);
		border-radius: 10px;
		object-fit: contain;
		transition: box-shadow .15s ease;
	}

	#main-header #menu li.hx-shop > ul > li > a .menu-image-title {
		display: block;
		margin-top: 12px;
		padding: 0;
	}

	/* the rule above carries !important on colour and outranks section 4's
	   hover rule, so the hover has to be restated here */
	#main-header #menu li.hx-shop > ul > li > a:hover {
		color: var(--haier-blue) !important;
	}

	#main-header #menu li.hx-shop > ul > li > a:hover img {
		box-shadow: 0 0 0 1px var(--haier-blue);
	}

	/* --- the divider and the Discover card ------------------------------ */

	#main-header #menu li.hx-shop > ul > li.hx-discover {
		float: right;
		position: relative;
		width: 560px !important;
		box-sizing: border-box;
		margin: 0;
		padding: 0 0 5px 60px;
		border: 0;
	}

	/* a hairline with a short cap at each end, as in the reference */
	#main-header #menu li.hx-shop > ul > li.hx-discover::before {
		--hx-divider: rgba(41, 41, 41, .3);
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -6px;
		width: 13px;
		background:
			linear-gradient(var(--hx-divider), var(--hx-divider)) center / 1px 100% no-repeat,
			linear-gradient(var(--hx-divider), var(--hx-divider)) top / 100% 1px no-repeat,
			linear-gradient(var(--hx-divider), var(--hx-divider)) bottom / 100% 1px no-repeat;
	}

	#main-header #menu .hx-discover-card {
		padding: 34px 34px 47px;
		background: var(--background);
		border-radius: 16px;
		text-align: left;
	}

	#main-header #menu .hx-discover-title {
		margin: 0 0 27px;
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		color: var(--foreground);
	}

	/* section 4's `#main-header #menu ul li a` matches these too -- 78px
	   line-height, 0 16px padding !important, nowrap -- so each is restated */
	#main-header #menu .hx-discover-card a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 14px 0 !important;
		border-bottom: 1px solid var(--hx-rule);
		font-size: 17px !important;
		font-weight: 400;
		line-height: 23px;       /* 14 + 23 + 14 + 1px rule = the reference's 52px row */
		white-space: normal;
		color: var(--text-dark) !important;
		transition: color .15s ease;
	}

	#main-header #menu .hx-discover-title + a {
		border-top: 1px solid var(--hx-rule);
	}

	#main-header #menu .hx-discover-card a:hover {
		color: var(--haier-blue) !important;
	}

	#main-header #menu .hx-discover-card a svg {
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.3;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* ==========================================================================
   5c. Home Appliances, Televisions (li.hx-mega) and About Haier (li.hx-drop)
   --------------------------------------------------------------------------
   Built to the owner's mockup, on the markup WordPress actually outputs:
   top item > ul.sub-menu > category <li> (menu-image <a>) > ul.sub-menu >
   product <li>. The only hooks are the classes on the top-level items, which
   WordPress sets in Menus -> CSS Classes. (Section 5 styles the hand-built
   markup of test-1.html and matches nothing on this page.)

   Each panel opens under its OWN label -- section 5 makes these items
   `position: relative`. Between 991 and 1240px a 980px panel hung off
   "Home Appliances" would run off the right edge, so there the mega panels
   go back to the container's left edge.

   The selected category's products hang BELOW the tile panel (`top: 100%`
   of it) as one card with a rule across it, so the tiles can run to any
   number of rows: the products start wherever the tiles end. The tile panel
   therefore must not scroll (a scroll box would clip them); only the
   products box scrolls, and only when the screen is too short to hold it.

   !! The selected category is a class, `hx-selected`, set by the script at
   the foot of the page -- NOT :hover. The products sit below every tile row,
   so the way down to them crosses other tiles and the gaps between them,
   and with :hover the selection was lost on the way.
   !! inertia.js still fades each product <ul> in and out on hover. Its
   display and opacity are forced here with !important, which beats the
   inline styles jQuery writes, so the class alone decides. Safe on these
   inner lists only: the panel around them still opens and closes as before.
   ========================================================================== */

@media (min-width: 991px) {
	/* --- the panels, under their own label ------------------------------ */

	#main-header #menu > ul > li.hx-mega > ul.sub-menu,
	#main-header #menu > ul > li.hx-drop > ul.sub-menu {
		top: calc(100% - 12px) !important;   /* the mockup's card rises a
		                                        little into the white bar */
		left: 16px;                           /* = the label's own padding,
		                                        so the card starts at its text */
		font-family: "Montserrat", sans-serif;
		text-transform: none;
	}

	#main-header #menu > ul > li.hx-mega > ul.sub-menu {
		box-sizing: border-box;
		width: 980px;
		/* seven 117px tiles + 18px gaps = 945; the last tile's own 18px
		   margin stands in for the rest of the right padding */
		padding: 28px 7px 12px 25px;
		max-height: none;
		overflow: visible;
	}

	/* Televisions has one category: a narrower card, its tile centred */
	#main-header #menu > ul > li.hx-mega-narrow > ul.sub-menu {
		/* width: 640px; */
		padding-right: 25px;
		text-align: center;
	}

	/* --- the category tiles --------------------------------------------- */

	#main-header #menu li.hx-mega > ul > li {
		position: static;          /* so the products anchor to the panel */
		display: inline-block;
		vertical-align: top;
		width: 117px !important;
		margin: 0 18px 9px 0;
		padding: 0;
		border: 0;
	}

	#main-header #menu li.hx-mega-narrow > ul > li { margin-right: 0; }

	#main-header #menu li.hx-mega > ul > li > a {
		display: block;
		padding: 0 !important;
		text-align: center;
		font-size: 13px !important;
		font-weight: 400;
		line-height: 17px;
		white-space: normal;
		color: var(--hx-muted) !important;
		transition: color .15s ease;
	}

	#main-header #menu li.hx-mega > ul > li > a img {
		display: block;
		box-sizing: border-box;
		width: 117px;
		height: 117px;
		max-width: none;
		padding: 18px;
		background: var(--hx-tile);
		border: 2px solid transparent;
		border-radius: 12px;
		object-fit: contain;
		transition: border-color .15s ease, background-color .15s ease;
	}

	#main-header #menu li.hx-mega > ul > li > a .menu-image-title {
		display: block;
		margin-top: 13px;
		padding: 0;
	}

	#main-header #menu li.hx-mega > ul > li > a:hover img {
		border-color: var(--haier-blue);
	}

	#main-header #menu li.hx-mega > ul > li.hx-selected > a {
		color: var(--foreground) !important;
		font-weight: 600;
	}

	#main-header #menu li.hx-mega > ul > li.hx-selected > a img {
		background: var(--background);
		border-color: var(--haier-blue);
	}

	/* --- the selected category's products ------------------------------- */

	#main-header #menu li.hx-mega > ul > li > ul {
		display: none !important;
		opacity: 1 !important;
		position: absolute;
		/* 14px up, so its square top corners cover the panel's rounded
		   bottom ones and the two read as one card. !important because the
		   generic `.mNav ul ul { top: 100% !important }` matches this too. */
		top: calc(100% - 14px) !important;
		left: -1px;
		right: -1px;
		width: auto;
		box-sizing: border-box;
		/* keeps its bottom 16px above the screen edge: `100%` in a height is
		   the tile panel's height, which is also where this box starts */
		max-height: calc(100vh - var(--hx-header-h) - 100% + 10px);
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0;
		padding: 40px 19px 20px;
		/* the rule across the card, inset 20px like the mockup's */
		background:
			linear-gradient(var(--hx-rule), var(--hx-rule)) 19px 14px / calc(100% - 38px) 1px no-repeat,
			var(--background);
		border: 1px solid var(--hx-rule);
		border-top: 0;
		border-radius: 0 0 14px 14px;
		box-shadow: 0 18px 44px rgba(23, 23, 23, .14);
		clip-path: inset(0 -60px -80px);   /* no shadow cast up over the tiles */
		text-align: left;
		font-size: 0;
	}

	/* a flex row, not inline-blocks. A product with no image (QLED, FULL HD,
	   4KUHD) is shorter than one with, and as an inline-block its hairline
	   stopped short -- dividers of three lengths in one panel. Flex stretches
	   every cell to the height of its row. */
	#main-header #menu li.hx-mega > ul > li.hx-selected > ul {
		display: flex !important;
		flex-wrap: wrap;
	}

	/* five to a row, a hairline between cells */
	#main-header #menu li.hx-mega > ul > li > ul > li {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		/* 19.98, not 20: five of exactly 20% round past the line box and
		   the fifth wraps -- measured in section 5 */
		width: 19.98% !important;
		margin: 0;
		padding: 0;
		border: 0;
		border-left: 1px solid var(--hx-rule);
	}

	#main-header #menu li.hx-mega > ul > li > ul > li:nth-child(5n + 1) {
		border-left-color: transparent;
	}

	#main-header #menu li.hx-mega > ul > li > ul > li:nth-child(5n) {
		border-right: 1px solid var(--hx-rule);
	}

	/* the narrow card has room for four */
	#main-header #menu li.hx-mega-narrow > ul > li > ul > li { width: 24.98% !important; }
	#main-header #menu li.hx-mega-narrow > ul > li > ul > li:nth-child(5n + 1) { border-left-color: var(--hx-rule); }
	#main-header #menu li.hx-mega-narrow > ul > li > ul > li:nth-child(5n) { border-right: 0; }
	#main-header #menu li.hx-mega-narrow > ul > li > ul > li:nth-child(4n + 1) { border-left-color: transparent; }
	#main-header #menu li.hx-mega-narrow > ul > li > ul > li:nth-child(4n) { border-right: 1px solid var(--hx-rule); }

	#main-header #menu li.hx-mega > ul > li > ul > li > a {
		flex: 1 0 auto;            /* fills the stretched cell */
		display: flex;
		flex-direction: column;
		padding: 20px 14px 12px !important;
		text-align: center;
		font-size: 12px !important;
		font-weight: 400;
		line-height: 16px;
		white-space: normal;
		color: var(--hx-muted) !important;
		transition: color .15s ease;
	}

	#main-header #menu li.hx-mega > ul > li > ul > li > a:hover {
		color: var(--haier-blue) !important;
	}

	/* no image: the name sits in the middle of the cell, not at the top of
	   an empty one */
	#main-header #menu li.hx-mega > ul > li > ul > li > a:not(:has(img)) {
		justify-content: center;
	}

	#main-header #menu li.hx-mega > ul > li > ul > li > a img {
		display: block;
		width: 100%;
		height: 110px;
		max-width: none;
		padding: 0;
		object-fit: contain;
	}

	#main-header #menu li.hx-mega > ul > li > ul > li > a .menu-image-title {
		display: block;
		margin-top: 10px;
		padding: 0;
	}

	/* --- About Haier: a plain list --------------------------------------- */

	#main-header #menu > ul > li.hx-drop > ul.sub-menu {
		width: 246px;
		padding: 4px 0;
	}

	#main-header #menu li.hx-drop > ul > li {
		display: block;
		width: 100% !important;
		margin: 0;
		padding: 0;
		border: 0;
	}

	#main-header #menu li.hx-drop > ul > li > a {
		display: block;
		padding: 13px 22px !important;
		text-align: left;
		font-size: 14px !important;
		font-weight: 400;
		line-height: 1.35;
		white-space: normal;
		color: var(--text-dark) !important;
		transition: color .15s ease, background-color .15s ease;
	}

	#main-header #menu li.hx-drop > ul > li + li > a {
		border-top: 1px solid var(--hx-rule);
	}

	#main-header #menu li.hx-drop > ul > li > a:hover {
		background: var(--hx-tile);
		color: var(--haier-blue) !important;
	}
}

/* the labels carry 11px of padding here, not 16 (section 7) */
@media (min-width: 991px) and (max-width: 1300px) {
	#main-header #menu > ul > li.hx-mega > ul.sub-menu,
	#main-header #menu > ul > li.hx-drop > ul.sub-menu { left: 11px; }
}

/* too narrow to hang a 980px card off its label: back to the container's
   left edge, and never wider than the container */
@media (min-width: 991px) and (max-width: 1240px) {
	#main-header #menu > ul > li.hx-mega { position: static; }

	#main-header #menu > ul > li.hx-mega > ul.sub-menu {
		left: 0;
		max-width: 100%;
	}
}

/* ==========================================================================
   6. Right cluster — Sign In · search · wishlist · cart
   ========================================================================== */

#main-header .right-wrapper {
	flex: 0 0 auto;
	margin-left: 24px;
}

.hx-actions {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* MEASURED: .search-wrapper already carries `order: 2` from the theme while
   everything else computes to 0, so the magnifier jumped to the END of the
   cluster. All four are ordered explicitly rather than relying on source
   order, which is what the reference shows: Sign In · search · ♡ · bag. */
.hx-actions > .hx-signin        { order: 1; }
.hx-actions > .search-wrapper   { order: 2; }
.hx-actions > .hx-wishlist      { order: 3; }
.hx-actions > .hx-cart          { order: 4; }

.hx-actions a,
.hx-actions .search-block,
.hx-actions .search-block-xs {
	display: flex;
	align-items: center;
	color: var(--text-dark) !important;
	line-height: 1;
	text-decoration: none;
	transition: color .15s ease;
}

.hx-actions a:hover,
.hx-actions .search-block:hover {
	color: var(--haier-blue) !important;
}

.hx-signin {
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

/* the person glyph is the phone-sized form of this link; the desktop target
   shows the words only. âš ï¸ id-scoped, because the generic
   `.hx-actions svg.hx-ico-line { display: block }` above is (0,2,1) and a
   plain `.hx-actions .hx-signin-ico` (0,2,0) loses to it. */
#main-header .hx-actions .hx-signin-ico { display: none; }

/* my own icons are drawn as outlines, to match the reference */
.hx-actions svg.hx-ico-line {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	display: block;
}

/* the THEME's search glyph is a filled path — `.svg-icon path { fill:
   currentcolor }` in style.css — so it must stay filled. Stroking it would
   double the outline and fill the lens. Only the colour changes. */
#main-header .right-wrapper .search-block .svg-icon.ico-search,
#main-header .search-block-xs .svg-icon.ico-search {
	width: 21px;
	height: 21px;
	color: var(--text-dark);
	margin-top: 0;
}

#main-header .search-block .svg-icon.ico-search path,
#main-header .search-block-xs .svg-icon.ico-search path {
	fill: currentcolor;
}

#main-header .search-block:hover .svg-icon.ico-search,
#main-header .search-block-xs:hover .svg-icon.ico-search {
	color: var(--haier-blue);
}

#main-header .search-wrapper {
	padding-left: 0;
}

.hx-cart {
	position: relative;
}

.hx-cart-count {
	position: absolute;
	top: -7px;
	right: -8px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--haier-blue);
	color: var(--text-light);
	font-size: 11px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

/* ==========================================================================
   7. Header — responsive
   --------------------------------------------------------------------------
   The page shrank the nav label to 11px (1050–1250) and 9px (900–1049).
   Both are cancelled; the nav tightens its padding instead, and below the
   theme's own 990px breakpoint the off-canvas mobile menu takes over.
   ========================================================================== */

@media (min-width: 991px) and (max-width: 1300px) {
	#main-header .head-wrapper .container,
	#main-header .hx-utility-inner { padding: 0 20px; }
	#main-header #menu ul li a { padding: 0 11px !important; }
	#main-header .head-wrapper div.logo { margin-right: 24px; }
	.hx-actions { gap: 16px; }
}

/* ==========================================================================
   7b. Mobile
   --------------------------------------------------------------------------
   The block is written at max-width 990px, not 768px, and that is deliberate:
   inertia.js switches the nav to `.mobile` and the theme pins it as a
   full-screen fixed panel at `<= 990` (`if (browserWidth <= 990)`). Cutting
   the styles at 768 would leave 769–990 with a mobile off-canvas wearing
   desktop clothes. 768 is inside this range, so the phone layout is exactly
   what was asked for — it just does not break the tablet on the way there.

   âš ï¸ NO NEW JAVASCRIPT. The drill-down works off the theme's own behaviour:
   inertia.js appends `a.drop-toggle` to every <li> whose link has a next
   sibling, and on click it slideToggles `children('ul')` AND toggles `.open`
   on the <li>. Level 1 (li.hx-mega) has a child <ul>, so the theme animates
   it. Level 2 (li.hx-cat) has a <div>, so the theme animates nothing — but it
   still sets `.open`, and that class is the hook the rules below use.
   ========================================================================== */

@media (max-width: 990px) {
	:root { --site-header-h: auto; }

	/* --- the header bar: hamburger · logo · icons ------------------------ */

	#main-header .head-wrapper { padding: 0 !important; }

	#main-header .head-wrapper .container,
	#main-header .hx-utility-inner { padding: 0 16px; }

	#main-header .head-wrapper .flex { min-height: 62px; }

	/* âš ï¸ MEASURED: the theme positions BOTH of these absolutely on a phone
	   (`header-mobile-align-center`), which takes them out of the flex row —
	   so `order` did nothing and the hamburger painted on top of the logo.
	   They have to be put back in flow before any of this lays out. */
	#main-header .head-wrapper .flex > .logo,
	#main-header .head-wrapper .flex > .menu-block {
		position: static;
		top: auto; left: auto; right: auto; bottom: auto;
		transform: none;
	}

	#main-header .head-wrapper .flex > .menu-block { order: 1; margin-right: 14px; }
	/* MEASURED: the logo box came back 405px wide and, with the header's
	   centred text, that floated the wordmark into the middle of the bar
	   instead of sitting beside the hamburger. */
	#main-header .head-wrapper .flex > .logo {
		order: 2;
		margin-right: 0;
		flex: 0 0 auto;
		width: auto;
		text-align: left;
	}
	#main-header .head-wrapper .flex > .right-wrapper { order: 3; margin-left: auto; }

	.hx-utility { height: 36px; }
	.hx-utility-inner { gap: 20px; }
	.hx-utility a { font-size: 12px; }

	#main-header .head-wrapper .logo a img { height: 26px !important; max-height: 26px !important; }

	#main-header .menu-toggle {
		display: flex;
		align-items: center;
		color: var(--text-dark) !important;
	}
	#main-header .menu-toggle .svg-icon.ico-menu { width: 24px; height: 24px; }
	#main-header .menu-toggle .svg-icon.ico-menu path { fill: currentcolor; }

	/* One magnifier, not two. The theme ships a mobile-only `.search-block-xs`
	   outside the action cluster, and hides the cluster's own search with
	   `hide-xs` — so hiding the duplicate alone left NO search icon at all on
	   a phone. Keep the one that lives in the cluster, drop the stray. */
	#main-header .search-block-xs { display: none !important; }
	#main-header .hx-actions .search-wrapper.hide-xs { display: block !important; }
	#main-header .hx-actions .search-block.hide-xs { display: flex !important; }
	#main-header .hx-actions .svg-icon.ico-search { width: 21px !important; height: 21px !important; }

	.hx-actions { gap: 16px; }
	.hx-signin { font-size: 0; }              /* the word goes, the person stays */
	.hx-actions .hx-signin-text { display: none; }
	#main-header .hx-actions .hx-signin-ico { display: block; }

	/* --- the panel ------------------------------------------------------- */

	/* the theme paints this `var(--color-accent)` and slides it in from the
	   RIGHT at full width; the target is a white sheet from the left */
	/* âš ï¸ `!important` is required here, and only here: the page's own custom CSS
	   carries `.mNav { background: #0c5ca8 !important }` inside its mobile
	   block (test-1.html around line 606). Between two !important rules the
	   more specific selector wins, and #main-header .mNav outranks .mNav. */
	#main-header .mNav.mobile,
	#main-header .mNav {
		background: var(--background) !important;
		/* âš ï¸ position MUST be restated. Section 4 sets `#main-header .mNav
		   { position: static }` so the desktop mega panels can anchor to the
		   header row — and that rule, being id-based, outranks the theme's
		   `@media(max-width:990px){ .mNav{position:fixed} }`. Measured: the
		   panel came back `position: static`, 820px tall, sitting in the page
		   flow instead of sliding over it. */
		position: fixed;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 88%;
		max-width: 380px;
		right: auto;
		left: 0;
		padding-top: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scroll-behavior: smooth;  /* animates the scrollTop the menu script sets */
		z-index: 400;            /* the sticky header sits at 200 */
		box-shadow: 0 0 40px rgba(23, 23, 23, .18);
	}

	#main-header .mNav.menu-hide { transform: translateX(-100%); }
	#main-header .mNav.menu-show { transform: translateX(0); }

	/* the nav's own heading becomes the panel title */
	/* the second selector is the same heading as WordPress prints it */
	#main-header .mNav .hx-menu-title,
	#main-header .mNav > h2.screen-reader-text {
		position: static !important;
		width: auto !important;
		height: auto !important;
		clip: auto !important;
		clip-path: none !important;
		overflow: visible !important;
		display: block;
		margin: 0;
		padding: 22px 22px 20px;
		border-bottom: 1px solid var(--hx-rule-soft);
		color: var(--haier-blue);
		/* stated: an h2 takes the theme's heading face, which rendered as a
		   serif fallback */
		font-family: "Montserrat", sans-serif;
		font-size: 20px;
		font-weight: 600;
	}

	#main-header .mNav .menu-close {
		position: absolute;
		top: 16px;
		right: 16px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin: 0;
		border-radius: 50%;
		background: var(--hx-tile);
		color: var(--text-dark) !important;
	}
	#main-header .mNav .menu-close .svg-icon { width: 16px; height: 16px; }
	#main-header .mNav .menu-close .svg-icon path { fill: currentcolor; }

	/* --- rows, all three levels ------------------------------------------ */

	#main-header .mNav.mobile ul,
	#main-header .mNav.mobile ul ul { background: none; }

	/* the desktop nav row is a flex container; left as one, the <li> stay
	   content-sized flex items and the panel renders as a ragged column with
	   hairlines of six different lengths. */
	/* âš ï¸ ONLY the top-level row. The first version included `#menu ul ul` in
	   this selector and `display: block` then forced EVERY sub-panel open at
	   once — Shop, Home Appliances, Televisions and About Haier all stacked on
	   each other, which is why the category list appeared to repeat itself.
	   The sub-panels are hidden by the theme and opened by its slideToggle;
	   nothing here may set their `display`. */
	#main-header #menu > ul {
		display: block;
		flex-wrap: initial;
		width: auto;
	}

	/* âš ï¸ `!important`, because the desktop panels are pinned with it
	   (`.hx-panel-wide { width: 978px !important }`). Without it the category
	   rows kept their 978px and ran 80px past a 380px panel — measured: row
	   right edge 460 against a panel edge of 380, which is what made the
	   chevrons look out of line. */
	#main-header #menu ul ul,
	#main-header #menu ul ul.hx-panel,
	#main-header #menu ul ul.hx-panel-wide,
	#main-header #menu ul ul.hx-panel-narrow {
		width: auto !important;
		min-width: 0;
		/* âš ï¸ position too. Section 5 pins `.hx-panel` absolute so the desktop
		   mega card can hang off the header; left absolute here it shrink-wraps
		   to its content — measured 312px inside a 380px panel, leaving the
		   category rows short of the right edge. */
		position: static;
		padding-bottom: 0;
	}

	#main-header #menu ul li {
		position: relative;      /* the drop-toggle is absolutely placed in it */
		display: block;
		width: auto !important;
		margin: 0;
		padding: 0;
		border: 0;
	}

	#main-header .mNav.mobile li a,
	#main-header #menu ul li a { color: var(--text-dark) !important; }

	/* section 4 zeroes the first label's left padding so it lines up with the
	   logo on desktop; in the panel that just pushes "Shop" against the edge */
	/* âš ï¸ `:not(.drop-toggle)`. The chevron is ALSO a direct <a> child of the
	   li, so this rule was giving Shop's toggle a 22px left padding — and in a
	   `justify-content: center` box that pushed its arrow 11px right of every
	   other row's. The DOM check missed it because the arrow is a pseudo
	   element: the toggle boxes all ended at the same x, the glyph inside did
	   not. `:first-child` is (2,1,3) and beat the toggle's own
	   `padding: 0 !important` at (2,1,1) on element count. */
	#main-header #menu > ul > li:first-child > a:not(.drop-toggle) { padding-left: 22px !important; }

	#main-header .mNav.mobile > ul > li > a,
	#main-header #menu > ul > li > a {
		padding: 15px 60px 15px 22px !important;
		border-bottom: 1px solid var(--hx-rule-soft);
		font-size: 15px !important;      /* the phone mockup's rows */
		font-weight: 500;
		line-height: 1.4;
		text-align: left;
		white-space: normal;
	}

	/* the open row is the level's header — the target gives it a pale blue
	   band, not just blue text */
	#main-header #menu li.open > a:not(.drop-toggle) {
		background: rgba(0, 90, 170, .07);
		color: var(--haier-blue) !important;
		font-weight: 600;
	}
	/* the open row's <a> already spans the full width (it carries a 60px right
	   padding for the chevron), so the toggle must stay transparent — giving
	   it the same tint painted a second, darker band over the right 58px. */
	#main-header #menu li.open > .drop-toggle { background: transparent; }

	/* "View all Shop" / "View all Refrigerators" */
	#main-header #menu .hx-view-all { display: block; }

	/* the single-category panel would otherwise say "View all Televisions"
	   twice — once for the panel, once for its only category */
	#main-header #menu ul ul.hx-panel-narrow .hx-view-all-link { display: none; }
	#main-header #menu ul ul li.hx-view-all > a {
		display: block;
		padding: 14px 22px !important;
		border: 0;
		border-bottom: 1px solid var(--hx-rule-soft);
		border-radius: 0;
		text-align: left;
		font-size: 15px !important;
		font-weight: 500;
		/* âš ï¸ MEASURED 111px tall. `line-height` is inherited from the desktop
		   nav rule as `var(--hx-bar-h)` = 78px, and 16+16+78 is exactly that.
		   Every row added on mobile has to restate it. */
		line-height: 1.4 !important;
		color: var(--text-dark) !important;
		white-space: normal;
	}
	/* âš ï¸ `!important` on the padding. The nav rule in section 4 is
	   `#main-header #menu ul li a { padding: 0 16px !important }` and it
	   matches this link too — measured, the row came back `0px 16px` and 22px
	   tall against the panel-level row's 50px. Same ids, so the extra class
	   here wins once both are !important. */
	#main-header #menu .hx-view-all-link {
		line-height: 1.4 !important;
		display: block;
		padding: 14px 22px !important;
		margin: 0 -12px 10px;
		font-size: 15px;      /* break out of .hx-subs' side padding so the
		                              row and its rule line up with the others */
		border-bottom: 1px solid var(--hx-rule-soft);
		font-size: 16px;
		font-weight: 500;
		color: var(--text-dark) !important;
		text-decoration: none;
	}

	/* when a category is open the level above it steps out of the way,
	   including its own "View all" */


	/* the chevron. The theme's own is an icon-font <i>; drawn here with
	   borders instead so it cannot depend on a font that may not load. */
	/* âš ï¸ Two ids, to match the desktop rule that hides these
	   (`#main-header #menu .drop-toggle { display:none !important }` in
	   section 5). Written with one id it lost — ids are compared first — and
	   every chevron stayed hidden on mobile. Equal specificity, and this block
	   is later in the file, so this one wins. */
	#main-header #menu .drop-toggle {
		display: flex !important;
		position: absolute;
		top: 0;
		right: 0;
		width: 58px;
		height: 56px;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		align-items: center;
		justify-content: center;
		z-index: 3;
	}
	#main-header #menu .drop-toggle i { display: none !important; }
	#main-header #menu .drop-toggle::after {
		content: "";
		/* âš ï¸ `display` has to be stated. The theme carries
		   `.mNav.mobile li.has-sub > a:after { display: none }` — and the
		   drop-toggle is itself an <a> inside li.has-sub, so that rule hits
		   this arrow. Everything else about it was correct (58x56 box, 2px
		   border, content "") and it still painted nothing. */
		display: block;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--hx-muted);
		border-bottom: 2px solid var(--hx-muted);
		transform: rotate(-45deg);
		transition: transform .2s ease;
	}


	/* --- level 2: the category list -------------------------------------- */

	#main-header #menu ul ul {
		position: static;
		width: auto !important;
		max-width: none;
		max-height: none;
		overflow: visible;
		margin: 0;
		padding: 0 !important;
		background: var(--background);   /* the target's rows are white; only the
		                                    thumbnails are grey */
		border: 0;
		border-radius: 0;
		box-shadow: none;
		text-align: left;
	}

	#main-header #menu ul ul.hx-panel > li.hx-cat {
		display: block;
		box-sizing: border-box;
		width: auto !important;
		padding: 0;
		border-bottom: 1px solid var(--hx-rule-soft);
	}

	#main-header #menu ul ul li a.hx-cat-tile {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 60px 12px 22px !important;
		text-align: left;
		font-size: 15px !important;
	}

	/* the same custom-CSS block hides every sub-menu image on mobile
	   (`.mNav ul ul li a img { display:none }`) — which is exactly the
	   category thumbnails and the product shots the target menu is built on. */
	#main-header #menu ul ul li a.hx-cat-tile .hx-cat-img img,
	#main-header #menu ul ul a.hx-sub-cell .hx-sub-img img {
		display: block !important;
	}

	#main-header #menu ul ul li a.hx-cat-tile .hx-cat-img {
		flex: 0 0 50px;
		width: 50px;
		height: 50px;
		padding: 7px;
		border: 0;
		border-radius: 10px;
		background: var(--hx-tile) !important;
	}

	#main-header #menu ul ul li a.hx-cat-tile .hx-cat-name {
		margin-top: 0;
		font-size: 15px;
		text-align: left;
	}

	/* the desktop "first one is selected / hovered one is selected" pair has
	   no meaning on a touch screen — `.open` decides here */
	#main-header #menu ul ul.hx-panel > li.hx-view-all + li.hx-cat > a.hx-cat-tile .hx-cat-img,
	#main-header #menu ul ul.hx-panel:hover > li.hx-cat > a.hx-cat-tile .hx-cat-img,
	#main-header #menu ul ul.hx-panel:hover > li.hx-cat:hover > a.hx-cat-tile .hx-cat-img {
		background: var(--background);
		border-color: transparent;
	}
	#main-header #menu ul ul.hx-panel > li.hx-view-all + li.hx-cat > a.hx-cat-tile .hx-cat-name,
	#main-header #menu ul ul.hx-panel:hover > li.hx-cat > a.hx-cat-tile .hx-cat-name,
	#main-header #menu ul ul.hx-panel:hover > li.hx-cat:hover > a.hx-cat-tile .hx-cat-name {
		font-weight: 500;
		color: var(--text-dark) !important;
	}
	#main-header #menu ul ul.hx-panel li.hx-cat.open > a.hx-cat-tile .hx-cat-img {
		background: var(--background) !important;
		box-shadow: inset 0 0 0 2px var(--haier-blue);
	}
	#main-header #menu ul ul.hx-panel li.hx-cat.open > a.hx-cat-tile .hx-cat-name {
		font-weight: 600;
		color: var(--haier-blue) !important;
	}

	/* âš ï¸ NOT a drill-down. An earlier pass hid the sibling rows with `:has()`;
	   the target does the opposite — every row stays, the open one just gets
	   the band, and its products are appended at the END of the list. */

	/* the open row becomes the header of the level it opened */
	#main-header #menu li.open > .drop-toggle::after {
		transform: rotate(135deg);        /* points back, not down */
		border-color: var(--haier-blue);
	}

	/* --- level 3: the products, two per row ------------------------------ */

	/* âš ï¸ THIRD time this trap has bitten. The desktop pair
	   `.hx-panel:hover > li.hx-cat:hover > .hx-subs {display:block}` scores
	   (2,5,3); a plain `.hx-cat.open` mobile rule scores (2,4,3) and LOSES —
	   and DevTools device mode still fires :hover, because there is a real
	   mouse. Tapping a category rotated its chevron and showed nothing.
	   Both mobile rules carry !important so they outrank the hover pair, and
	   `.open` is the more specific of the two so it still wins over the hide. */
	#main-header #menu ul ul.hx-panel .hx-subs {
		display: none !important;
	}

	/* `hx-open-subs` is set by the small script at the foot of the page, which
	   also moves this block to the end of the panel — that is where the target
	   puts it, after the whole category list. */
	#main-header #menu ul ul.hx-panel > .hx-subs.hx-open-subs {
		display: block !important;
		position: static;
		top: auto;
		left: auto;
		right: auto;
		padding: 0 12px 4px;
		border-top: 0;
		background: var(--background);
		/* both of these are set on the desktop `.hx-subs` rule, which stops
		   matching once this block is moved out of its <li> — without them the
		   inline-block cells get whitespace gaps back and the last odd cell
		   re-centres. Restated here rather than assumed. */
		font-size: 0;
		text-align: left;
	}

	/* âš ï¸ The per-panel column counts have to be overridden by name. Measured
	   on the Televisions panel: its cells kept the desktop `.hx-cols-4` 25%
	   and rendered FOUR to a row at 85px each. A bare `a.hx-sub-cell` rule is
	   less specific than `.hx-cols-4 .hx-sub-grid > a.hx-sub-cell`. */
	#main-header #menu ul ul .hx-cols-4 .hx-sub-grid > a.hx-sub-cell,
	#main-header #menu ul ul .hx-cols-5 .hx-sub-grid > a.hx-sub-cell,
	#main-header #menu ul ul a.hx-sub-cell {
		width: 50%;
		padding: 6px 10px 16px !important;
		border-left: 0;
	}
	#main-header #menu ul ul .hx-sub-grid > a.hx-sub-cell:nth-child(odd) {
		border-right: 1px solid var(--hx-rule-soft);
	}
	#main-header #menu ul ul a.hx-sub-cell .hx-sub-img { height: 78px; }

	/* --- the text menus (About Haier, Support) --------------------------- */

	#main-header #menu > ul > li.hx-drop > ul.hx-list {
		width: auto !important;
		padding: 0;
		background: var(--hx-tile);
	}
	#main-header #menu ul ul.hx-list li a {
		padding: 15px 22px 15px 32px !important;
		font-size: 15px !important;
		line-height: 1.4 !important;   /* same 78px inheritance as above */
	}
	#main-header #menu ul ul.hx-list li + li > a { border-top: 1px solid var(--hx-rule-soft); }

	/* --- the search sheet ------------------------------------------------ */

	.search-fullscreen .hx-search-inner { padding: 30px 18px 36px; }
	.search-fullscreen .hx-search-logo { height: 30px; margin-bottom: 24px; }
	.search-fullscreen .hx-search-row { gap: 12px; margin-bottom: 22px; }
	.search-fullscreen input.search-full-search-box { height: 50px; font-size: 15px; }
	.search-fullscreen .hx-popular {
		justify-content: flex-start;
		gap: 6px 18px;
		margin-bottom: 26px;
		font-size: 14px;
	}
	.search-fullscreen .hx-reco-title { font-size: 18px; margin-bottom: 22px; }
	.search-fullscreen .hx-reco-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.search-fullscreen .hx-reco-thumb { height: 150px; padding: 14px; margin-bottom: 10px; }
	.search-fullscreen .hx-reco-name { font-size: 14px; }
}

/* ==========================================================================
   7c. Phone menu on the WordPress markup
   --------------------------------------------------------------------------
   7b was written for test-1.html's hand-built menu (hx-panel, hx-cat,
   hx-subs...). Its generic half -- the white sheet, the close button, the
   top-level rows, the chevrons, the pale band on an open row -- matches this
   page's WordPress menu as well and still does that job. What follows is the
   other half, rewritten for what WordPress outputs:
     level 2  ul.sub-menu > li > a (menu-image: <img> + <span>) -- a row with
              a 50px thumbnail; plain text rows under About Haier
     level 3  the category's own ul.sub-menu -- the products, two to a row,
              moved to the END of the panel by the script at the page foot,
              which is where the design puts them
   !! Every anchor restates line-height and white-space. Section 4's
   `#main-header #menu ul li a { line-height: 78px; white-space: nowrap }` is
   not inside a media query and reaches every row of the phone menu.
   ========================================================================== */

@media (max-width: 990px) {
	/* --- level 2: categories, and About Haier's rows --------------------- */

	#main-header #menu > ul > li > ul > li {
		border-bottom: 1px solid var(--hx-rule-soft);
	}

	#main-header #menu > ul > li > ul > li > a:not(.drop-toggle) {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 12px 60px 12px 22px !important;
		border: 0;
		border-radius: 0;
		text-align: left;
		font-size: 15px !important;
		font-weight: 500;
		line-height: 1.4 !important;
		white-space: normal;
	}

	#main-header #menu > ul > li > ul > li > a > img {
		flex: 0 0 50px;
		box-sizing: border-box;
		width: 50px;
		height: 50px;
		padding: 7px;
		background: var(--hx-tile);
		border-radius: 10px;
		object-fit: contain;
	}

	#main-header #menu > ul > li > ul > li > a > .menu-image-title {
		padding: 0;
	}

	/* 7b sizes the chevron box for the 56px top rows; a thumbnail row is 74 */
	#main-header #menu > ul > li > ul > li > .drop-toggle {
		height: 74px;
	}

	/* the open category's thumbnail is framed in blue, as 7b's tiles were */
	#main-header #menu > ul > li > ul > li.open > a > img {
		background: var(--background);
		box-shadow: inset 0 0 0 2px var(--haier-blue);
	}

	/* About Haier: text rows on grey, indented under their parent */
	#main-header #menu > ul > li.hx-drop > ul {
		background: var(--hx-tile);
	}

	#main-header #menu > ul > li.hx-drop > ul > li > a:not(.drop-toggle) {
		padding: 15px 22px 15px 32px !important;
	}

	/* --- level 3: the products ------------------------------------------ */

	/* hidden where they live; the script lifts the open category's list to
	   the end of its panel and marks it .hx-open-subs. !important because the
	   theme's slideToggle writes display on these lists too, and the class
	   alone must decide. */
	#main-header #menu ul ul ul {
		display: none !important;
	}

	#main-header #menu ul ul > ul.hx-open-subs {
		display: flex !important;
		flex-wrap: wrap;
		padding: 4px 12px 8px !important;
		border-bottom: 1px solid var(--hx-rule-soft);
	}

	#main-header #menu ul.hx-open-subs > li {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 50% !important;
	}

	#main-header #menu ul.hx-open-subs > li:nth-child(odd) {
		border-right: 1px solid var(--hx-rule-soft);
	}

	#main-header #menu ul.hx-open-subs > li > a {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		padding: 6px 10px 16px !important;
		text-align: center;
		font-size: 13px !important;
		font-weight: 400;
		line-height: 1.35 !important;
		white-space: normal;
	}

	/* no image: the name sits in the middle of its cell */
	#main-header #menu ul.hx-open-subs > li > a:not(:has(img)) {
		justify-content: center;
	}

	#main-header #menu ul.hx-open-subs > li > a img {
		display: block;
		width: 100%;
		height: 78px;
		margin-bottom: 10px;
		padding: 0;
		object-fit: contain;
	}

	#main-header #menu ul.hx-open-subs > li > a .menu-image-title {
		padding: 0;
	}

	/* the phone mockup sets the whole sheet in Montserrat; the nav otherwise
	   inherits the theme's body face */
	#main-header .mNav.mobile {
		font-family: "Montserrat", sans-serif;
	}

	/* --- Shop: two tiles a row, then the Discover list, all on grey ------ */
	/* Every rule here carries `li.hx-shop`, so it outranks the thumbnail-row
	   rules above, which match Shop's children too. */

	#main-header #menu > ul > li.hx-shop > ul {
		padding: 28px 21px 18px !important;
		background: var(--hx-tile);
	}

	#main-header #menu > ul > li.hx-shop > ul > li {
		border: 0;
	}

	/* the panel is `font-size: 0` (section 5), so these inline-blocks sit
	   two to a row with no whitespace gap between them */
	#main-header #menu > ul > li.hx-shop > ul > li:not(.hx-discover) {
		display: inline-block;
		vertical-align: top;
		width: 50% !important;
		text-align: center;
	}

	#main-header #menu > ul > li.hx-shop > ul > li > a:not(.drop-toggle) {
		display: block;
		padding: 0 !important;
		text-align: center;
		font-size: 13px !important;
		font-weight: 400;
		line-height: 17px !important;
	}

	#main-header #menu > ul > li.hx-shop > ul > li > a > img {
		box-sizing: border-box;
		width: 78px;
		height: 86px;
		margin: 0 auto;
		padding: 12px;
		background: var(--background);
		border-radius: 8px;
		object-fit: contain;
	}

	/* a column wide, not a tile wide: held to the tile's 78px, as the mockup
	   is, "Refrigeration" splits mid-word into "Refrigeratio / n" */
	#main-header #menu > ul > li.hx-shop > ul > li > a > .menu-image-title {
		display: block;
		max-width: 120px;
		margin: 12px auto 0;
	}

	#main-header #menu > ul > li.hx-shop > ul > li.hx-discover {
		display: block;
		padding: 30px 6px 0 7px;
	}

	/* no white card on a phone: the list sits straight on the grey. (The
	   desktop card rules are all inside min-width: 991px.) */
	#main-header #menu .hx-discover-title {
		margin: 0 0 12px;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.3;
		color: var(--foreground);
	}

	/* section 4's `#menu ul li a` (78px line-height, 0 16px padding
	   !important, nowrap) reaches these too */
	#main-header #menu .hx-discover-card a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 0 !important;
		border-bottom: 1px solid var(--hx-rule);
		font-size: 15px !important;
		font-weight: 400;
		line-height: 21px !important;
		white-space: normal;
	}

	#main-header #menu .hx-discover-title + a {
		border-top: 1px solid var(--hx-rule);
	}

	#main-header #menu .hx-discover-card a svg {
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.3;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* ==========================================================================
   8. Footer
   --------------------------------------------------------------------------
   Rebuilt to the supplied design: a WHITE footer with a newsletter block, the
   link columns, the wordmark, and a legal bar. The page's own custom CSS
   paints this blue (`#main-footer { background:#0c5ca8 !important }`) and sets
   `footer .container div { font-size:12px; font-weight:700 }` on every div in
   it — both are overridden below, the first with !important because that is
   how it is written.
   ========================================================================== */

#main-footer,
.v-framed #main-footer,
.footer-floating .canvas-wrapper {
	background: var(--background) !important;
	color: var(--text-dark);
}

/* the blanket 12px/700 the page puts on every div in the footer */
#main-footer div { font-size: 15px; font-weight: 400; }

#main-footer .hx-foot { padding: 0; }

#main-footer .hx-foot-inner {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 32px;
}

#main-footer .hx-foot-top {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	padding-top: 64px;
	padding-bottom: 40px;
}

/* --- newsletter --------------------------------------------------------- */

#main-footer .hx-fnews {
    flex: 0 1 400px;
    margin-right: 50px;
}

#main-footer .hx-fnews-eyebrow {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

#main-footer .hx-fnews-head {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--foreground);
}

#main-footer .hx-fnews-form {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	max-width: 420px;
}

#main-footer .hx-fnews-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 22px;
    border: 1px solid var(--haier-blue);
    border-radius: 999px;
    background: var(--background);
    color: #333;
    font-size: 14px;
    outline: none;
    padding: 16px 20px;
}

#main-footer .hx-fnews-form input::placeholder { color: var(--hx-muted); opacity: 1; }

#main-footer .hx-fnews-form button {
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--haier-blue);
	color: var(--text-light);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity .15s ease;
}

#main-footer .hx-fnews-form button:hover { opacity: .88; }

#main-footer .hx-fnews-form button svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- link columns ------------------------------------------------------- */

/* four columns, and "Business" drops UNDER "Account & Community" — in the
   design it is a second group in that same column, not a fifth column. */
#main-footer .hx-fcols {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 32px;
	align-items: start;
}

#main-footer .hx-fcol { min-width: 0; }

/* "Business" is a SECOND titled group inside the Account column, not a fifth
   column and not a grid row of its own — as a grid row it started after the
   tallest column ended and left a ~110px hole under Account. */
#main-footer .hx-fcol-title-2 { margin-top: 40px !important; }

#main-footer .hx-fcol-title {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
}

#main-footer .hx-fcol-title span { display: inline; }

#main-footer .hx-fcol-links a {
    display: block;
    margin-bottom: 14px;
    font-size: 13px !important;
    line-height: 1.2;
    color: #5c5c5c !important;
    text-decoration: none;
    transition: color .15s ease;
    font-family :inherit !important;
}

#main-footer .hx-fcol-links a:hover {
	color: var(--haier-blue) !important;
	text-decoration: none;
}

/* --- wordmark ----------------------------------------------------------- */

#main-footer .hx-foot-brand { padding-top: 34px; padding-bottom: 26px; }
#main-footer .hx-foot-brand a { display: inline-block; line-height: 0; }
#main-footer .hx-foot-brand img { height: 30px; width: auto; display: block; }

/* --- legal bar ---------------------------------------------------------- */

#main-footer .hx-foot-bottom { border-top: 1px solid var(--hx-rule); }

#main-footer .hx-foot-bottom .hx-foot-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-top: 22px;
	padding-bottom: 34px;
}

#main-footer .hx-fcopy {
    margin: 0 0 8px;
    font-size: 12px;
    color: #979797;
    font-weight: 400;
}

#main-footer .hx-flinks { display: inline; }

#main-footer .hx-flinks a {
    margin-left: 22px;
    font-size: 12px !important;
    font-weight: 500;
    color: var(--text-dark) !important;
    text-decoration: none;
    font-family: inherit !important;
}

#main-footer .hx-flinks a:hover { color: var(--haier-blue) !important; }

#main-footer .hx-fhost{
    font-size: 12px;
    color: #979797;
    font-weight: 400;
}

#main-footer .hx-fsocials {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

#main-footer .hx-fsocial-label {
    margin-right: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);
}

#main-footer a.hx-fsocial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--hx-rule);
	border-radius: 50%;
	color: var(--foreground) !important;
	transition: border-color .15s ease, color .15s ease;
}

#main-footer a.hx-fsocial:hover {
	border-color: var(--haier-blue);
	color: var(--haier-blue) !important;
}

#main-footer a.hx-fsocial svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* the chevron only exists for the mobile accordion */
#main-footer .hx-fcol-title::after { display: none; }

/* ==========================================================================
   8b. Footer — mobile
   --------------------------------------------------------------------------
   The design turns each column into an accordion row. The toggle is the same
   small script as the menu; CSS just reacts to `.open` on the section.
   ========================================================================== */

@media (max-width: 990px) {
	#main-footer .hx-foot-inner { padding: 0 20px; }

	#main-footer .hx-foot-top {
		display: block;
		padding-top: 36px;
		padding-bottom: 8px;
	}

	#main-footer .hx-fnews { margin: 0 0 30px; }
	#main-footer .hx-fnews-head { font-size: 22px; margin-bottom: 22px; }
	#main-footer .hx-fnews-form { max-width: none; gap: 12px; }
	#main-footer .hx-fnews-form input { height: 50px; }
	#main-footer .hx-fnews-form button { flex-basis: 50px; width: 50px; height: 50px; }

	#main-footer .hx-fcols { display: block; }
	#main-footer .hx-fcol-title-2 { margin-top: 0; }

	/* each titled group is its own row, including the second one inside the
	   Account column — which is exactly how the design's mobile footer reads */
	#main-footer .hx-fcol-title { border-top: 1px solid var(--hx-rule-soft); }
	#main-footer .hx-fcol:first-child .hx-fcol-title { border-top: 0; }
	#main-footer .hx-fcols { border-bottom: 1px solid var(--hx-rule-soft); }

	#main-footer .hx-fcol-title {
		margin: 0;
		padding: 18px 34px 18px 0;
		position: relative;
		cursor: pointer;
		font-size: 17px;
	}

	/* the chevron */
	#main-footer .hx-fcol-title::after {
		content: "";
		display: block;
		position: absolute;
		right: 6px;
		top: 50%;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		border-right: 2px solid var(--hx-muted);
		border-bottom: 2px solid var(--hx-muted);
		transform: rotate(45deg);
		transition: transform .2s ease;
	}

	#main-footer .hx-fcol-title.open::after {
		margin-top: -2px;
		transform: rotate(225deg);
	}

	#main-footer .hx-fcol-links { display: none; padding-bottom: 8px; }
	#main-footer .hx-fcol-title.open + .hx-fcol-links { display: block; }

	#main-footer .hx-fcol-links a { margin-bottom: 16px; }

	#main-footer .hx-foot-brand { display: none; }   /* the design has no
	                                                    wordmark on mobile */

	#main-footer .hx-foot-bottom { border-top: 0; }

	/* the design puts the social row ABOVE the copyright on a phone; the DOM
	   has it after, so flex order does the swap without touching the markup */
	#main-footer .hx-foot-bottom .hx-foot-inner {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding-top: 26px;
		padding-bottom: 34px;
	}
	#main-footer .hx-foot-bottom .hx-fsocials { order: 1; }
	#main-footer .hx-foot-bottom .hx-flegal { order: 2; }

	#main-footer .hx-fsocials {
		justify-content: center;
		width: 100%;          /* a column flex item stretches, but this one
		                         carries flex-shrink:0 from the desktop rule */
		margin-bottom: 22px;
	}
	#main-footer .hx-fsocial-label { display: none; }

	#main-footer .hx-fcopy { margin-bottom: 12px; font-size: 13px; }

	#main-footer .hx-flinks { display: block; margin-top: 12px; }

	#main-footer .hx-flinks a {
		margin: 0 10px;
		position: relative;
	}

	#main-footer .hx-flinks a + a::before {
		content: "";
		position: absolute;
		left: -11px;
		top: 3px;
		bottom: 3px;
		border-left: 1px solid var(--hx-rule);
	}

	#main-footer .hx-fhost { font-size: 12px; margin-top: 14px; }
}

/* ==========================================================================
   9. Rules in <style id="wp-custom-css"> that this file supersedes
   --------------------------------------------------------------------------
   Delete these from Additional CSS when this goes live — right now they are
   only being out-ranked, which works but leaves two owners for one look.

     .head-wrapper, .header-floating .head-wrapper { background:#0c5ca8 }
     .head-wrapper, .head-wrapper a, ... { color:white }
     .head-wrapper div.logo { max-width:200px }
     .head-wrapper { padding: 2px 0 }
     #menu ul li { width:120px }   and the later  { width:106px }
     #menu ul li a { font-size:14px; letter-spacing:.8px; padding:4px 7px }
     .mNav ul ul { top:50px; width:1200px }
     .mNav ul ul li { width:280px }
     .mNav ul ul li a / .mNav .sub-menu li a { color:#828282; font-size:12px }
     @media (1050–1250) #menu ul li a { font-size:11px }
     @media (900–1049)  #menu ul li a { font-size:9px }
     .head-wrapper .container, .nav-wrapper .container { margin-left:70px }
     footer .container { margin: 0 0 0 7px }
     footer .container div { font-size:12px; font-weight:700 }
     footer .footer-lists:nth-of-type(1) nav { margin-bottom:13% }
     #main-footer { background:#0c5ca8 }

   DEAD on this page — `.nav-wrapper` does not exist in the markup at all, so
   these three never applied to anything:
     .nav-wrapper { padding:28px 0; background:white }
     .nav-wrapper ul li a { color:#182c4d }
     .header-modern .nav-wrapper { border-bottom:1px solid silver }
   ========================================================================== */

/* ==========================================================================
   10. Full-screen search
   --------------------------------------------------------------------------
   The theme paints this overlay `var(--color-accent)` at `opacity: .92` — the
   purple sheet with the page bleeding through it and one centred
   "Type and Hit Enter.." line. Rebuilt to the mockup: an opaque light sheet,
   logo, a pill field with the close beside it, popular searches, and a
   recommended-products row.

   âš ï¸ The show/hide is inertia.js's, untouched: `.search-full-search-icon`
   adds `.active`, `.search-full-close-icon` removes it, and the width
   animates 0 -> 100vw. Nothing here sets `display` or `width` on
   `.search-fullscreen` itself, so that animation still owns the element.
   ========================================================================== */

/* --- how it opens ------------------------------------------------------
   The theme wipes it in from the LEFT: the sheet is pinned `right: 100%` with
   `transform: translateX(100%)` and `width: 0`, and `.active` animates the
   WIDTH to 100vw. Animating width also means the content reflows on every
   frame of the animation.

   Here it drops from the top instead: the sheet is always full width and is
   moved on the Y axis, which is a transform-only animation (no layout work
   per frame). `visibility` is what keeps the closed sheet out of the tab
   order — it is switched instantly on open and only after the slide on
   close, so the movement stays visible both ways.

   âš ï¸ `width` must be set on BOTH states. `.search-fullscreen.active
   {width:100vw}` is the theme's, and if the closed state kept `width: 0`
   there would be a width animation racing the transform. */
.search-fullscreen {
	background-color: #f5f6f7;
	opacity: 1;
	align-items: flex-start;
	justify-content: center;
	z-index: 300;           /* the header is sticky at 200 */

	left: 0;
	right: auto;
	top: 0;
	width: 100vw;
	/* the theme says `height: 100%`, and measured at a 900px viewport the sheet
	   came out 813px — 87px of the page still showing under it. Pinned to the
	   viewport instead. */
	height: 100vh;

	transform: translateY(-100%);
	visibility: hidden;
	transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .34s;
}

.search-fullscreen.active {
	width: 100vw;
	transform: translateY(0);
	visibility: visible;
	transition: transform .34s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
}

/* the sheet is `overflow: hidden` for the width animation, so the SCROLLING
   has to happen on the inner box — otherwise the product row is unreachable
   on a short screen. */
.search-fullscreen .hx-search-inner {
	width: 100%;
	max-width: 1040px;
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 74px 24px 48px;
	text-align: center;
}

.search-fullscreen .hx-search-logo {
	display: block;
	height: 36px;
	width: auto;
	margin: 0 auto 36px;
}

/* --- the field ---------------------------------------------------------- */

.search-fullscreen .hx-search-row {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 40px;
}

.search-fullscreen .hx-search-row form {
	position: relative;
	flex: 1 1 auto;
	margin: 0;
}

.search-fullscreen .hx-search-glass {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 21px;
	height: 21px;
	fill: none;
	stroke: var(--hx-muted);
	stroke-width: 1.7;
	stroke-linecap: round;
	pointer-events: none;
}

/* the theme centres this input and strips its box; the mockup's field is a
   left-aligned pill */
/* âš ï¸ The theme caps this field: `.search-full-search-box{max-width:600px;
   margin:0 auto 40px}`. Setting `width:100%` alone did nothing visible — the
   field stayed 600px and centred inside its form, which pushed the magnifier
   outside it and stranded the close button ~200px to the right. Both the cap
   and the auto margin have to be cleared too. */
.search-fullscreen input.search-full-search-box {
	width: 100%;
	max-width: none;
	margin: 0;
	height: 54px;
	padding: 0 22px 0 52px;
	border: 1px solid var(--hx-rule);
	border-radius: 999px;
	background: var(--background);
	box-shadow: none;
	color: var(--text-dark);
	font-size: 16px;
	text-align: left;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.search-fullscreen input.search-full-search-box::placeholder {
	color: var(--hx-muted);
	opacity: 1;
}

.search-fullscreen input.search-full-search-box:focus {
	border-color: var(--haier-blue);
	box-shadow: 0 0 0 3px rgba(0, 90, 170, .12);
}

/* the close moves out of the corner and sits beside the field, as drawn */
.search-fullscreen .search-full-close-icon {
	position: static;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--text-dark);
	cursor: pointer;
	opacity: 1;
}

.search-fullscreen .search-full-close-icon:hover {
	color: var(--haier-blue);
}

.search-fullscreen .search-full-close-icon .svg-icon {
	width: 22px;
	height: 22px;
}

.search-fullscreen .search-full-close-icon .svg-icon path {
	fill: currentcolor;
}

/* --- popular searches --------------------------------------------------- */

.search-fullscreen .hx-popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 26px;
	margin-bottom: 28px;
	font-size: 15px;
}

.search-fullscreen .hx-popular-label {
	color: var(--hx-muted);
}

.search-fullscreen .hx-popular a {
	color: var(--text-dark);
	text-decoration: none;
	transition: color .15s ease;
}

.search-fullscreen .hx-popular a:hover {
	color: var(--haier-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- recommended products ----------------------------------------------- */

.search-fullscreen .hx-reco {
	text-align: left;
}

.search-fullscreen .hx-reco-title {
	margin: 0 0 27px;
	font-size: 20px;
	font-weight: 700;
	color: var(--text-dark);
}

.search-fullscreen .hx-reco-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.search-fullscreen .hx-reco-card {
	display: block;
	text-decoration: none;
	color: var(--text-dark);
}

/* the card is the white tile; the NAME sits below it on the sheet, which is
   what the mockup shows */
.search-fullscreen .hx-reco-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 235px;
	padding: 22px;
	margin-bottom: 20px;
	background: var(--background);
	border: 1px solid transparent;
	border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.search-fullscreen .hx-reco-thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	mix-blend-mode: multiply;   /* the thumbnails are shot on white */
}

.search-fullscreen .hx-reco-name {
	display: block;
	font-size: 15px;
	line-height: 1.45;
}

.search-fullscreen .hx-reco-card:hover .hx-reco-thumb {
	border-color: var(--haier-blue);
	box-shadow: 0 6px 20px rgba(23, 23, 23, .08);
}

.search-fullscreen .hx-reco-card:hover .hx-reco-name {
	color: var(--haier-blue);
}

@media (max-width: 900px) {
	.search-fullscreen .hx-search-inner { padding: 34px 18px 36px; }
	.search-fullscreen .hx-search-logo { margin-bottom: 24px; }
	.search-fullscreen .hx-reco-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.search-fullscreen .hx-reco-thumb { height: 170px; padding: 16px; }
	.search-fullscreen input.search-full-search-box { height: 52px; font-size: 15px; }
	.search-fullscreen .hx-popular { margin-bottom: 30px; gap: 8px 18px; font-size: 14px; }
}

/* ==========================================================================
   11. Front-page banner (#frontpage-cta)
   --------------------------------------------------------------------------
   Built from the owner's awards-banner sample, on the theme's own CTA
   section. Its markup is kept: the heading still comes from the Customizer;
   only the breadcrumb and the subtitle are added.

   The theme already sizes this block for a background image
   (`.home-cta .block-wrapper { background-size: cover }`) and, with none set,
   paints `--color-100` under a 40% black overlay -- the plain grey box.

   !! The image is the sample's AWARDS artwork, hosted on a UAT S3 path
   (.../haier/uat/...). Swap in a blog banner and re-host it before this
   goes live; it can equally be set as the CTA background in the Customizer.

   !! `padding: 0 !important`: the page's custom CSS pads this block with
   !important (70px, then 200px at 1601-1920), which pushed the text
   off-centre. And `display: inline` on the breadcrumb link: the same CSS
   hides every link here with `#frontpage-cta a { display: none }` (it is
   meant for the theme's empty button).
   ========================================================================== */

#frontpage-cta .block-wrapper {
	justify-content: center;
	min-height: 340px;
	aspect-ratio: 1920 / 500;       /* keeps the art's own proportions */
	padding: 0 !important;
	background: #0b1f4d url("https://bbadvancedcrm.s3.ap-south-1.amazonaws.com/Ai1Cart/haier/uat/category_images/misc/original/awards-banner_1784185615446_1liqq8.jpg") center / cover no-repeat;
	color: var(--text-light);
	font-family: "Montserrat", sans-serif;
}

/* a lighter wash than the theme's 40% (and the custom CSS's #04070d80) --
   the sample's, enough to keep white text readable on the art */
#frontpage-cta .image-light-overlay::before {
	background: #00000036;
}

#frontpage-cta .text-block {
	position: relative;
	z-index: 5;
	max-width: 820px;
	margin: 0;
	padding: 0 24px;
	text-align: center;
}

#frontpage-cta .section-title {
	margin: 0 0 14px;
	font-family: inherit;
	/* measured off the mockup, not the sample's 40px/700: its cap height is
	   ~0.9 of ours at 40px, and the stroke is lighter */
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--text-light);
}

#frontpage-cta .hx-banner-sub {
	max-width: 572px;
	margin: 0 auto;
	font-size: 14px;                /* the mockup's lines are 22px apart: 14 x 1.6 */
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
}

/* on the header's left edge: the 1500px container and its 32px padding */
#frontpage-cta .hx-banner-crumbs {
	position: absolute;
	top: 24px;
	left: max(32px, calc((100% - 1500px) / 2 + 32px));
	z-index: 5;
	font-size: 14px;
	color: var(--text-light);
	opacity: .9;
}

#frontpage-cta .hx-banner-crumbs a {
	display: inline;
	color: inherit;
	text-decoration: none;
}

#frontpage-cta .hx-banner-crumbs a:hover { text-decoration: underline; }

#frontpage-cta .hx-banner-crumbs span {
	margin: 0 6px;
	opacity: .6;
}

/* the header container's padding is 20px here, 16px on a phone */
@media (min-width: 991px) and (max-width: 1300px) {
	#frontpage-cta .hx-banner-crumbs { left: 20px; }
}

@media (max-width: 990px) {
	#frontpage-cta .hx-banner-crumbs { left: 16px; }
}

@media (max-width: 640px) {
	#frontpage-cta .block-wrapper {
		min-height: 220px;
		aspect-ratio: 4 / 3;              /* the sample's mobile crop */
		background-position: left center; /* crops away the trophy on the right */
	}

	#frontpage-cta .hx-banner-crumbs { top: 20px; }

	#frontpage-cta .text-block { padding: 0 20px; }

	#frontpage-cta .section-title { font-size: 24px; }

	#frontpage-cta .hx-banner-sub { font-size: 13px; }
}

.hx-fnews-msg { margin-top: 8px; font-size: 14px; }
.hx-fnews-msg-success { color: #2e7d32; }
.hx-fnews-msg-error { color: #c62828; }