/* Whitegoods Help area colours, palette 1 "Clear primaries" (live 2026-10-15), loaded on all four sites.
   Articles #1E40AF · Forum #0891B2 · Engineers #16A34A · Shop #FF6600 · nav bar #000E42 (from the logo).
   Accents (switcher, tag dots, title highlights, menu hover bars, links, arrows, icons) follow the area;
   buttons stay brand orange #FF6600. palette.js sets html.wgh-pal and data-wgh-site. */

html.wgh-pal { --hub-articles: #1E40AF; --hub-forum: #0891B2; --hub-engineers: #16A34A; --hub-shop: #FF6600; --wgh-accent: #1E40AF; }
html.wgh-pal[data-wgh-site="forum"] { --wgh-accent: #0891B2; }
html.wgh-pal[data-wgh-site="engineers"] { --wgh-accent: #16A34A; }
html.wgh-pal[data-wgh-site="shop"] { --wgh-accent: #FF6600; }

/* Site switcher: each area in its own colour */
html.wgh-pal .wgh-hdr .wgh-area.is-articles, html.wgh-pal body .header .wgh-area.is-articles { --area: #1E40AF !important; }
html.wgh-pal .wgh-hdr .wgh-area.is-forum, html.wgh-pal body .header .wgh-area.is-forum { --area: #0891B2 !important; }
html.wgh-pal .wgh-hdr .wgh-area.is-engineers, html.wgh-pal body .header .wgh-area.is-engineers { --area: #16A34A !important; }
html.wgh-pal .wgh-hdr .wgh-area.is-shop, html.wgh-pal body .header .wgh-area.is-shop { --area: #FF6600 !important; }

/* Tag dots and the highlighted words in titles */
html.wgh-pal .wgh-eyebrow::before, html.wgh-pal .wh-mast-eyebrow::before, html.wgh-pal .wh-section-kicker::before,
html.wgh-pal .wh-eyebrow > span[aria-hidden], html.wgh-pal .wh-legal-dot { background: var(--wgh-accent) !important; }
html.wgh-pal h1 span:not(.sr-only):not(.screen-reader-text), html.wgh-pal h1 b, html.wgh-pal h1 u, html.wgh-pal h2 u, html.wgh-pal h2 > span:not(.sr-only):not(.screen-reader-text) { color: var(--wgh-accent) !important; }

/* Nav bar in the logo navy; menu accents in the area colour */
html.wgh-pal body nav.nav-container, html.wgh-pal body nav.container-fluid.nav-container { background: #000E42 !important; }
html.wgh-pal nav.nav-container, html.wgh-pal .wgh-dm, html.wgh-pal .wgh-hdr .wgh-mega { --wh-orange: var(--wgh-accent); --wh-orange-dark: var(--wgh-accent); }
html.wgh-pal body nav.container-fluid.nav-container .menu-main-menu-container > ul.menu > li.menu-item-has-children > ul.sub-menu > li > a:not([href="#"]) { color: var(--wgh-accent); }
html.wgh-pal .wgh-hdr .wgh-mega .wgh-mega-ico { color: var(--wgh-accent) !important; }
html.wgh-pal .wgh-dm-back { color: var(--wgh-accent) !important; }
html.wgh-pal .wgh-dm-all { background: color-mix(in srgb, var(--wgh-accent) 9%, #fff) !important; color: var(--wgh-accent) !important; }
html.wgh-pal .wgh-hdr .wgh-msearch-btn[aria-expanded="true"] { border-color: var(--wgh-accent) !important; color: var(--wgh-accent) !important; }
/* Buttons keep the brand orange */
html.wgh-pal nav.nav-container .wgh-btn-primary, html.wgh-pal body nav.nav-container .wgh-mega-help a.wgh-btn,
html.wgh-pal body nav.nav-container .wgh-mega-help a.wgh-btn:hover, html.wgh-pal .wgh-hdr .wgh-mega .wgh-btn-primary { background: #FF6600 !important; color: #fff !important; }

/* Buttons in each area's colour, one shade deeper so white text reads clearly (option B, 2026-10-15).
   Articles #1E40AF · Forum #0891B2 · Engineers #16A34A · Shop stays #FF6600 (the only brand orange).
   Basket / checkout bits stay orange: they belong to the shop. */
html.wgh-pal { --wgh-btn: #1E40AF; }
html.wgh-pal[data-wgh-site="forum"] { --wgh-btn: #0891B2; }
html.wgh-pal[data-wgh-site="engineers"] { --wgh-btn: #16A34A; }
html.wgh-pal[data-wgh-site="shop"] { --wgh-btn: #FF6600; }
html.wgh-pal { --wh-orange: var(--wgh-btn); --wh-orange-dark: var(--wgh-btn); }
html.wgh-pal[data-wgh-site="engineers"] { --accent: var(--wgh-btn); --accent-dark: var(--wgh-btn); }
html.wgh-pal .wgh-field-search button, html.wgh-pal .wgh-search-btn, html.wgh-pal .wgh-btn-primary, html.wgh-pal .wh-btn-orange,
html.wgh-pal .wh-search-submit, html.wgh-pal .ai-btn-primary, html.wgh-pal .wpcf7-submit, html.wgh-pal .wh-action-primary,
html.wgh-pal .wgh-plate-btn, html.wgh-pal .wh-btn-primary, html.wgh-pal nav.nav-container .wgh-btn-primary, html.wgh-pal body nav.nav-container .wgh-mega-help a.wgh-btn,
html.wgh-pal .wgh-hdr .wgh-mega .wgh-btn-primary, html.wgh-pal .bg-\[\#FF6600\], html.wgh-pal .bg-\[\#ff6600\],
html.wgh-pal .hover\:bg-\[\#ff6600\]:hover, html.wgh-pal .hover\:bg-\[\#FF6600\]:hover { background-color: var(--wgh-btn) !important; border-color: var(--wgh-btn) !important; color: #fff !important; }
html.wgh-pal .bg-\[\#FF6600\]\/10 { background-color: color-mix(in srgb, var(--wgh-btn) 10%, transparent) !important; }
html.wgh-pal .bg-\[\#FF6600\]\/20 { background-color: color-mix(in srgb, var(--wgh-btn) 20%, transparent) !important; }
html.wgh-pal .hover\:border-\[\#FF6600\]:hover { border-color: var(--wgh-btn) !important; }

/* Hero backgrounds (2026-10-15): a light tint of the area colour as the base, a soft orb in the area colour top right
   and a complementary orb bottom left. Replaces the old shared blue/orange washes. Grid lines stay. */
html.wgh-pal { --wgh-orb2: #38BDF8; }
html.wgh-pal[data-wgh-site="forum"] { --wgh-orb2: #3B82F6; }
html.wgh-pal[data-wgh-site="engineers"] { --wgh-orb2: #2FA7E2; }
html.wgh-pal[data-wgh-site="shop"] { --wgh-orb2: #FFB020; }
html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
	background:
		radial-gradient(640px 460px at 92% 6%, color-mix(in srgb, var(--wgh-accent) 24%, transparent), transparent 70%),
		radial-gradient(560px 420px at 4% 96%, color-mix(in srgb, var(--wgh-orb2) 20%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--wgh-accent) 7%, #fff) 0%, color-mix(in srgb, var(--wgh-accent) 3%, #fff) 60%, #fff 100%) !important;
}
/* The old washes (forum / engineers blurred circles, the shop's glow) */
html.wgh-pal .wh-hero-bg > div[aria-hidden] > .rounded-full { display: none !important; }
html.wgh-pal body .hero-home-page::after, html.wgh-pal body .hero-home-page .hero-image { display: none !important; }
@media (max-width: 767px) {
	html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
		background:
			radial-gradient(360px 300px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 22%, transparent), transparent 70%),
			radial-gradient(340px 300px at 0% 70%, color-mix(in srgb, var(--wgh-orb2) 16%, transparent), transparent 70%),
			linear-gradient(180deg, color-mix(in srgb, var(--wgh-accent) 7%, #fff) 0%, color-mix(in srgb, var(--wgh-accent) 3%, #fff) 60%, #fff 100%) !important;
	}
}

/* A button takes the colour of the area it goes to (2026-10-15): links into the shop are orange, into Find an Engineer
   green, into the forum purple, wherever they sit. Buttons that stay on their own site keep that site's colour. */
html.wgh-pal :is(a[href*="whitegoodshelp.co.uk/shop"], a[href^="/shop"]):is(.wgh-btn-primary, .wh-btn-orange, .wh-btn-primary, .wh-action-primary, .wh-sidebar-promo-link, .ai-btn-primary, .bg-\[\#FF6600\]),
html.wgh-pal :is(a[href*="whitegoodshelp.co.uk/shop"], a[href^="/shop"]) :is(button, .wgh-btn-primary, .bg-\[\#FF6600\]) { background-color: #FF6600 !important; border-color: #FF6600 !important; }
html.wgh-pal :is(a[href*="whitegoodshelp.co.uk/engineers"], a[href^="/engineers"]):is(.wgh-btn-primary, .wh-btn-orange, .wh-btn-primary, .wh-action-primary, .wh-sidebar-promo-link, .ai-btn-primary, .bg-\[\#FF6600\]),
html.wgh-pal :is(a[href*="whitegoodshelp.co.uk/engineers"], a[href^="/engineers"]) :is(button, .wgh-btn-primary, .bg-\[\#FF6600\]) { background-color: #16A34A !important; border-color: #16A34A !important; }
html.wgh-pal a[href*="forum.whitegoodshelp.co.uk"]:is(.wgh-btn-primary, .wh-btn-orange, .wh-btn-primary, .wh-action-primary, .wh-sidebar-promo-link, .ai-btn-primary, .bg-\[\#FF6600\]),
html.wgh-pal a[href*="forum.whitegoodshelp.co.uk"] :is(button, .wgh-btn-primary, .bg-\[\#FF6600\]) { background-color: #0891B2 !important; border-color: #0891B2 !important; }

/* Logo preview (wgh_demo=p1 cookie only): the new area logo swapped in by CSS from the first paint, no script, no jump.
   Each image is the same URL on every page, so it's cached after the first view. */
html.wgh-pal :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-articles.webp?v=6"); display: block !important; width: auto !important; height: 60px !important; max-width: none !important; max-height: none !important; aspect-ratio: 1938 / 592 !important; object-fit: contain; }
html.wgh-pal[data-wgh-site="forum"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-forum.webp?v=6"); }
html.wgh-pal[data-wgh-site="engineers"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-engineers.webp?v=6"); }
html.wgh-pal[data-wgh-site="shop"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-shop.webp?v=6"); }
html.wgh-pal .wgh-nl { display: none !important; }
@media (max-width: 991px) { html.wgh-pal :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { height: 44px !important; } }

/* Hero backgrounds, lighter (2026-10-15 v2): mostly white, orbs subtle but visible, so they don't tint the content. */
html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
	background:
		radial-gradient(620px 440px at 96% 0%, color-mix(in srgb, var(--wgh-accent) 13%, transparent), transparent 70%),
		radial-gradient(520px 400px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 10%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--wgh-accent) 2.5%, #fff) 0%, #fff 100%) !important;
}
@media (max-width: 767px) {
	html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
		background:
			radial-gradient(300px 240px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 12%, transparent), transparent 70%),
			radial-gradient(300px 260px at 0% 80%, color-mix(in srgb, var(--wgh-orb2) 8%, transparent), transparent 70%),
			linear-gradient(180deg, color-mix(in srgb, var(--wgh-accent) 2.5%, #fff) 0%, #fff 100%) !important;
	}
}

/* Placeholder text on every field, all four sites (2026-10-15): navy at 60%, no extra fading, so it reads clearly
   (about 5:1) but still looks lighter than typed text. Several themes faded it to ~27%. */
html.wgh-pal ::placeholder { color: rgba(11, 25, 73, 0.6) !important; opacity: 1 !important; }
html.wgh-pal ::-webkit-input-placeholder { color: rgba(11, 25, 73, 0.6) !important; opacity: 1 !important; }
html.wgh-pal .selectize-input input::placeholder { color: rgba(11, 25, 73, 0.6) !important; opacity: 1 !important; }

/* Phones: the line above the drop-down search is centred (2026-10-15) */
@media (max-width: 991px) {
	html.wgh-pal .wgh-dropsearch-hint { text-align: center !important; }
	html.wgh-pal body .header-contents-inner .search-form-container::before { display: block !important; width: 100% !important; text-align: center !important; }
}

/* Removed 2026-11-04: the 38px phone padding that used to sit above the hero tag (added 2026-10-15).
   The tag itself was dropped from every hero on 2026-10-27, so the padding was spacing nothing.
   It did NOT do the same thing everywhere, which is the part worth remembering:
     - engineers listing/location heroes: the band carries py-11 and the rule hit an INNER .grid,
       so the 38px ADDED to it -> 82px of empty wash.
     - engineers home hero: the band has no padding and the .grid carries its own pt-11, so the
       38px REPLACED the real 44px. Here it was load-bearing, not phantom. Zeroing it instead of
       deleting it flattened the home heading against the header (caught by Simon the same day).
     - forum home: sat on the band itself, so it replaced pt-11 -> 38px top against a 44px bottom.
     - articles home / shop home: already beaten by each site own wgh-hero-even rule. No effect.
   Rule of thumb: a padding rule on the band REPLACES the band padding; the same rule on a child
   STACKS on it. Check which one you are looking at before deleting or overriding.
   Every hero is now an even 44px on a phone from its own CSS, with no rule here.
   Backup: palette.css.bak-herotag-20261104 */

/* Trust ticks (2026-10-15): the site's solid green circle-check, no pale disc behind it */
html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li > svg,
html.wgh-pal .wh-hub-hero .wh-hub-hero-trust li > svg.wgh-fa { box-sizing: content-box !important; width: 24px !important; height: 24px !important; padding: 0 !important; border-radius: 0 !important; background: none !important; color: #2fb36a !important; fill: currentColor; }

/* Hero backgrounds v3 (2026-10-15): white, with the colour only in two corner orbs fading in (top right in the area
   colour, bottom left complementary), kept off the content. */
html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
	background:
		radial-gradient(520px 380px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 14%, transparent), transparent 72%),
		radial-gradient(460px 340px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 12%, transparent), transparent 72%),
		#fff !important;
}
@media (max-width: 767px) {
	html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
		background:
			radial-gradient(240px 200px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 13%, transparent), transparent 72%),
			radial-gradient(240px 220px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 10%, transparent), transparent 72%),
			#fff !important;
	}
}

/* Hero orbs v4 (2026-10-15): stronger, still centred on the corners so they fade out before the content. */
html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
	background:
		radial-gradient(640px 460px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 30%, transparent), transparent 72%),
		radial-gradient(560px 420px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 26%, transparent), transparent 72%),
		#fff !important;
}
@media (max-width: 767px) {
	html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
		background:
			radial-gradient(260px 220px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 24%, transparent), transparent 72%),
			radial-gradient(260px 240px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 18%, transparent), transparent 72%),
			#fff !important;
	}
}

/* Find an Engineer: green only on the buttons (2026-10-15). The site-wide accent stays orange for stars and small icons,
   and the business-check pills go neutral, so the panel isn't wall-to-wall green. */
html.wgh-pal[data-wgh-site="engineers"] { --accent: #16A34A; --accent-dark: #138C40; --check-bg: #eef2f8; --check-text: #0B1949; }
html.wgh-pal[data-wgh-site="engineers"] :is(.bg-accent, .wh-action-primary, .wh-btn-primary),
html.wgh-pal[data-wgh-site="engineers"] :is(.hover\:bg-accent-dark, .bg-accent):hover { background-color: var(--wgh-btn) !important; border-color: var(--wgh-btn) !important; color: #fff !important; }
html.wgh-pal[data-wgh-site="engineers"] .bg-accent\/10, html.wgh-pal[data-wgh-site="engineers"] .bg-accent\/\[0\.06\] { background-color: color-mix(in srgb, #16A34A 10%, transparent) !important; }

/* Find an Engineer panel (2026-10-15, v2): check pills back to their green (green means checked); the "View profile"
   buttons in the hero panel go navy instead, so the green is the checks, not four buttons. */
html.wgh-pal[data-wgh-site="engineers"] { --check-bg: #e8f5e9; --check-text: #2e7d32; }
html.wgh-pal[data-wgh-site="engineers"] [data-spot="view"] { background-color: #0B1949 !important; color: #fff !important; }

/* Hero orbs v5 (2026-10-15): more visible again, still centred on the corners. */
html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
	background:
		radial-gradient(660px 480px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 42%, transparent), transparent 72%),
		radial-gradient(580px 440px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 36%, transparent), transparent 72%),
		#fff !important;
}
@media (max-width: 767px) {
	html.wgh-pal .wh-hub-hero, html.wgh-pal .wh-hero-bg, html.wgh-pal body .hero-home-page {
		background:
			radial-gradient(280px 230px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 34%, transparent), transparent 72%),
			radial-gradient(280px 250px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 26%, transparent), transparent 72%),
			#fff !important;
	}
}

/* Logo preview v2 (2026-10-15, wgh_demo=p1 cookie only): the washing-machine logo, 1848x278, "Help" in the area colour.
   48px tall on desktop (about the old logo's width), 27px on phones. */
html.wgh-pal :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-articles.webp?v=6"); height: 48px !important; aspect-ratio: 1848 / 278 !important; }
html.wgh-pal[data-wgh-site="forum"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-forum.webp?v=6"); }
html.wgh-pal[data-wgh-site="engineers"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-engineers.webp?v=6"); }
html.wgh-pal[data-wgh-site="shop"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-shop.webp?v=6"); }
@media (max-width: 991px) { html.wgh-pal :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { height: 27px !important; } }
@media (max-width: 991px) { html.wgh-pal :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { height: 25px !important; } }

/* "Also on Whitegoods Help" links styled like the homepage area tiles (2026-10-15): pale tint of the area colour,
   4px coloured top edge, no grey border. */
html.wgh-pal .wgh-next a { border: 0 !important; border-top: 4px solid var(--c) !important; border-radius: 12px !important; background: color-mix(in srgb, var(--c) 9%, #fff) !important; box-shadow: 0 12px 26px -22px rgba(11, 25, 73, 0.4); }
html.wgh-pal .wgh-next a:hover { background: color-mix(in srgb, var(--c) 13%, #fff) !important; border-color: var(--c) !important; }

/* Header search (2026-10-15 v2): centred between the logo and the tools (equal gaps both sides), which reads as central
   now the logo is wider than the tools. The logo is painted by CSS from the start, so nothing shifts after load. */
@media (min-width: 992px) {
	html.wgh-pal .wgh-main .wgh-in { grid-template-columns: auto minmax(0, 1fr) auto !important; column-gap: 32px !important; }
	html.wgh-pal .wgh-main .wgh-in > .wgh-search { justify-self: center; width: min(100%, 600px) !important; }
	html.wgh-pal body .header .header-contents-inner { grid-template-columns: auto minmax(0, 1fr) auto !important; column-gap: 32px !important; }
	html.wgh-pal body .header .header-contents-inner > .search-form-container { justify-self: center; width: min(100%, 600px) !important; max-width: 600px !important; }
}
@media (min-width: 992px) { html.wgh-pal body .header .header-contents-inner > .buttons-container { min-width: 0 !important; width: auto !important; } }
@media (min-width: 992px) { html.wgh-pal body .header .header-contents-inner > .buttons-container { justify-content: flex-end !important; } html.wgh-pal body .header .header-contents-inner > .buttons-container::before, html.wgh-pal body .header .header-contents-inner > .buttons-container::after { content: none !important; display: none !important; } }
@media (min-width: 992px) { html.wgh-pal body .header .header-contents-inner > .buttons-container > :first-child { margin-left: 0 !important; } }

/* Buttons keep the area colour on hover/focus too (2026-10-15): an older rule turned the menu's "Search help articles"
   button orange on hover. */
html.wgh-pal :is(.wgh-btn-primary, .wgh-mega-help a.wgh-btn, .wh-btn-orange, .wh-btn-primary, .wgh-search-btn, .wgh-field-search button):is(:hover, :focus, :focus-visible, :active),
html.wgh-pal body nav.nav-container .wgh-mega-help a.wgh-btn:is(:hover, :focus, :active) { background: var(--wgh-btn) !important; border-color: var(--wgh-btn) !important; color: #fff !important; filter: brightness(0.94); }

/* Trust facts on desktop (2026-10-15): hairline dividers between the three, as on phones. */
@media (min-width: 768px) {
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) { column-gap: 0 !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li { padding: 4px 26px !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li:first-child { padding-left: 0 !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li:last-child { padding-right: 0 !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li + li { border-left: 1px solid #e1e8f1 !important; border-top: 0 !important; }
}

/* Mega menu: the link under the button in the nav navy (2026-10-15) */
html.wgh-pal body nav.nav-container .wgh-mega-help a.wgh-mega-help-link, html.wgh-pal .wgh-mega-help a.wgh-mega-help-link { color: #000E42 !important; }

/* "Also on Whitegoods Help" as its own full-width strip under the hero (2026-10-15): light grey band edge to edge
   (box-shadow + clip-path, so no sideways scroll), hairline above, even padding. */
html.wgh-pal .wgh-next { position: relative; padding: 26px 0 !important; background: #f4f6fa; box-shadow: 0 0 0 100vmax #f4f6fa; clip-path: inset(0 -100vmax); }
html.wgh-pal .wgh-next::before { content: ""; position: absolute; top: 0; left: -100vmax; right: -100vmax; height: 1px; background: #e3e9f2; }
@media (max-width: 767px) { html.wgh-pal .wgh-next { padding: 22px 0 !important; } }

/* Also-on strip v2 (2026-10-15): white, not grey (grey clashed with the tinted cards); hairline under it.
   It now sits after the hero on every site, so the heroes get their bottom padding back. */
html.wgh-pal .wgh-next { background: #fff !important; box-shadow: 0 0 0 100vmax #fff !important; padding: 28px 0 !important; }
html.wgh-pal .wgh-next::before { content: none !important; }
html.wgh-pal .wgh-next::after { content: ""; position: absolute; bottom: 0; left: -100vmax; right: -100vmax; height: 1px; background: #e3e9f2; }
html.wgh-pal body .hero-home-page { padding-bottom: 80px !important; border-bottom: 1px solid #e3e9f2; }
html.wgh-pal body .wgh-shop-next { margin-top: 0 !important; }
@media (max-width: 991px) { html.wgh-pal body .hero-home-page { padding-bottom: 48px !important; } }
@media (max-width: 767px) { html.wgh-pal .wgh-next { padding: 24px 0 !important; } }

/* Also-on strip v3: hairline drawn with a second shadow (the absolutely-placed line widened the page); the shop's
   floated theme needs the strip to clear the hero. */
html.wgh-pal .wgh-next::after { content: none !important; }
html.wgh-pal .wgh-next { box-shadow: 0 0 0 100vmax #fff, 0 1px 0 100vmax #e3e9f2 !important; clip-path: inset(0 -100vmax -1px) !important; }
html.wgh-pal body .wgh-shop-next { clear: both; float: none !important; display: block; }

/* Mega menus: no link under the button (2026-10-15) */
html.wgh-pal .wgh-mega-help a.wgh-mega-help-link, html.wgh-pal body nav.nav-container .wgh-mega-help a.wgh-mega-help-link { display: none !important; }

/* Also-on cards: the area name is the title (bigger), the line under it lighter, semibold like the shop's
   "How to find your model number" link. */
html.wgh-pal .wgh-next-t small { font-size: 16px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.01em; }
html.wgh-pal .wgh-next-t b { margin-top: 2px !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.35 !important; color: #0B1949 !important; }

/* Account menu: each section in its area colour (2026-10-15) */
html.wgh-pal .wgh-acct-group.is-articles { --grp: #1E40AF !important; --grp-bg: #ebeef8 !important; }
html.wgh-pal .wgh-acct-group.is-forum { --grp: #0891B2 !important; --grp-bg: #e9f5f8 !important; }
html.wgh-pal .wgh-acct-group.is-fae { --grp: #16A34A !important; --grp-bg: #eaf7ef !important; }
html.wgh-pal .wgh-acct-group.is-shop { --grp: #FF6600 !important; --grp-bg: #fff3ea !important; }
html.wgh-pal .wgh-next-t b { font-weight: 500 !important; }
html.wgh-pal .wgh-next-t b { font-size: 13.5px !important; }
@media (max-width: 767px) { html.wgh-pal .wgh-next { gap: 16px !important; } html.wgh-pal .wgh-next-l { margin-bottom: 2px; } }
@media (max-width: 767px) { html.wgh-pal .wgh-next { row-gap: 22px !important; gap: 22px !important; } html.wgh-pal .wgh-next-l { margin-bottom: 4px !important; } }
html.wgh-pal .wgh-next a, html.wgh-pal .wgh-next a:hover { box-shadow: none !important; }

/* ---------- Mega menus, layout A "Clean columns" (2026-10-15), desktop, all four sites ----------
   No boxes round every link: each appliance is a column with a clear title, its two action links as a quiet row,
   then a plain list. Hierarchy from type size and weight, not borders. Help panel tinted in the area colour. */
@media (min-width: 992px) {
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group { padding: 30px 32px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group + .wgh-mega-group { border-left: 1px solid #e6ebf3 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega a.wgh-mega-head { display: flex !important; align-items: center !important; gap: 14px !important; padding: 0 !important; border: 0 !important; background: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-img { width: 52px !important; height: 52px !important; padding: 4px !important; border: 0 !important; border-radius: 12px !important; background: #f6f8fc !important; box-shadow: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-title { font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: #0B1949 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-all { margin-top: 3px !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--wgh-btn) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-all svg { width: 11px !important; height: 11px !important; }
	/* Section labels: the first ("Browse") goes, its two links read as actions; the list keeps its label */
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-label:first-of-type { display: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-label { display: block !important; margin: 22px 0 6px !important; padding: 0 !important; border: 0 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: rgba(11, 25, 73, 0.5) !important; }
	/* Action links: one quiet row under the title, with a rule beneath */
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-parts:not(.is-list) { display: flex !important; flex-wrap: wrap !important; gap: 8px 24px !important; margin: 18px 0 0 !important; padding: 0 0 18px !important; border-bottom: 1px solid #e6ebf3 !important; grid-template-columns: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-parts:not(.is-list) a { display: inline-flex !important; align-items: center !important; gap: 7px !important; width: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; font-size: 15px !important; font-weight: 600 !important; color: #0B1949 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-parts:not(.is-list) a svg { width: 12px !important; height: 12px !important; color: var(--wgh-btn) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-parts:not(.is-list) a:hover span { color: var(--wgh-btn) !important; text-decoration: underline; }
	/* The list: plain lines, no boxes */
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-parts.is-list { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-parts.is-list a { display: block !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 7px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; color: rgba(11, 25, 73, 0.86) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-parts.is-list a svg { display: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-parts.is-list a:hover { color: var(--wgh-btn) !important; text-decoration: underline; }
	/* Help panel: tinted in the area colour, icon in a solid circle */
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help { padding: 30px 28px !important; border-left: 1px solid color-mix(in srgb, var(--wgh-accent) 14%, #fff) !important; background: color-mix(in srgb, var(--wgh-accent) 7%, #fff) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help-icon { width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50% !important; background: var(--wgh-accent) !important; color: #fff !important; box-shadow: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help-icon svg { width: 19px !important; height: 19px !important; color: #fff !important; fill: currentColor; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help-title { margin-top: 16px !important; font-size: 18px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help p { font-size: 14.5px !important; line-height: 1.55 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help a.wgh-btn { width: 100% !important; }
}

/* Menu appliance images: whole appliance, never cropped (desktop mega + phone menus) */
html.wgh-pal :is(.wgh-mega-img, .wgh-dm-item, .wgh-dm-ic, .wgh-dm-img) img { object-fit: contain !important; width: 100% !important; height: 100% !important; }


/* ---------- Mega menus, layout C (2026-10-15, replaces A): start-point tiles, one numbered list, help as a bottom strip ----
   Pure CSS over the existing markup: groups become display:contents and their parts are placed on a grid
   (rows 1+2 = the tile, 3 = list label, 4 = the lists, 5 = the help strip). Desktop only; phones keep their own menus. */
@media (min-width: 992px) {
	html.wgh-pal body nav.nav-container .wgh-mega { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto auto auto !important; column-gap: 18px !important; row-gap: 0 !important; padding: 28px 32px 0 !important; counter-reset: wghm; }
	html.wgh-pal body nav.nav-container .wgh-mega:has(.wgh-mega-group:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega:has(.wgh-mega-group:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-groups, html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group { display: contents !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:nth-child(1) > * { grid-column: 1 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:nth-child(2) > * { grid-column: 2 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:nth-child(3) > * { grid-column: 3 !important; }

	/* The tile: head (row 1) + its actions (row 2), one tinted block with the area-colour top edge */
	html.wgh-pal body nav.nav-container .wgh-mega a.wgh-mega-head { grid-row: 1 !important; display: flex !important; align-items: center !important; gap: 16px !important; margin: 0 !important; padding: 16px 18px 10px !important; border: 0 !important; border-top: 4px solid var(--wgh-accent) !important; border-radius: 14px 14px 0 0 !important; background: color-mix(in srgb, var(--wgh-accent) 8%, #fff) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-img { display: flex !important; align-items: center !important; justify-content: center !important; flex: none !important; width: 56px !important; height: 56px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: hidden !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-img img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-title { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: #0B1949 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-all { margin-top: 2px !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--wgh-btn) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) { grid-row: 2 !important; display: flex !important; flex-wrap: wrap !important; gap: 6px 20px !important; margin: 0 !important; padding: 0 18px 16px 90px !important; border: 0 !important; border-radius: 0 0 14px 14px !important; background: color-mix(in srgb, var(--wgh-accent) 8%, #fff) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a { display: inline-flex !important; align-items: center !important; gap: 6px !important; width: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; font-size: 14px !important; font-weight: 600 !important; color: #0B1949 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a svg { width: 11px !important; height: 11px !important; color: var(--wgh-btn) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a:hover span { color: var(--wgh-btn) !important; text-decoration: underline; }

	/* One list label across the top of the lists; the per-group Browse labels go */
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-label { display: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:nth-child(1) > .wgh-mega-label:last-of-type { display: block !important; grid-row: 3 !important; grid-column: 1 / -1 !important; margin: 24px 0 2px !important; padding: 0 !important; border: 0 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: rgba(11, 25, 73, 0.5) !important; }

	/* The lists: numbered, one continuous count, hairlines between */
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type { grid-row: 4 !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type a { counter-increment: wghm; display: flex !important; gap: 12px !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid #e6ebf3 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; color: rgba(11, 25, 73, 0.86) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type a::before { content: counter(wghm); flex: none; width: 20px; font-weight: 700; color: var(--wgh-accent); }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type a svg { display: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type a:hover span { color: var(--wgh-btn) !important; text-decoration: underline; }

	/* A single appliance: its list runs in two columns */
	html.wgh-pal body nav.nav-container .wgh-mega:not(:has(.wgh-mega-group:nth-child(2))) .wgh-mega-group > .wgh-mega-parts:last-of-type { column-count: 2 !important; column-gap: 40px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type a { break-inside: avoid; }
	/* Help as a slim strip along the bottom */
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help { grid-row: 5 !important; grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; margin: 24px -32px 0 !important; padding: 16px 32px !important; border: 0 !important; border-top: 1px solid color-mix(in srgb, var(--wgh-accent) 14%, #fff) !important; border-radius: 0 !important; background: color-mix(in srgb, var(--wgh-accent) 7%, #fff) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help-icon { flex: none !important; width: 38px !important; height: 38px !important; margin: 0 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help-icon svg { width: 16px !important; height: 16px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help-title { flex: none !important; margin: 0 !important; font-size: 15.5px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help p { flex: 1 !important; margin: 0 !important; font-size: 14.5px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-help a.wgh-btn { flex: none !important; width: auto !important; margin: 0 !important; }
}
@media (min-width: 992px) { html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:not(:has(> .wgh-mega-parts ~ .wgh-mega-parts)) > a.wgh-mega-head { border-radius: 14px !important; padding-bottom: 16px !important; } }

/* Mega menus layout C, shop: "Popular parts" is the list, the brand logos sit in the tile as its bottom row */
@media (min-width: 992px) {
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-label { display: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group:nth-child(1) > .wgh-mega-label:first-of-type { display: block !important; grid-row: 3 !important; grid-column: 1 / -1 !important; margin: 24px 0 2px !important; padding: 0 !important; border: 0 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: rgba(11, 25, 73, 0.5) !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-brands.wgh-mega-brands { grid-row: 2 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 18px !important; column-count: auto !important; margin: 0 !important; padding: 2px 18px 16px 90px !important; border: 0 !important; border-radius: 0 0 14px 14px !important; background: color-mix(in srgb, var(--wgh-accent) 8%, #fff) !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-brands a { counter-increment: none !important; display: inline-flex !important; align-items: center !important; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-brands a::before { content: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-brands img { width: auto !important; height: 22px !important; max-width: 84px !important; object-fit: contain !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts { grid-row: 4 !important; display: block !important; column-count: 2 !important; column-gap: 32px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a { counter-increment: wghm; break-inside: avoid; display: flex !important; gap: 12px !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid #e6ebf3 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; color: rgba(11, 25, 73, 0.86) !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a::before { content: counter(wghm); flex: none; width: 20px; font-weight: 700; color: var(--wgh-accent); }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a svg { display: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a:hover span { color: var(--wgh-btn) !important; text-decoration: underline; }
}

/* Mega menus layout C, exactly as the demo (2026-10-15): the tile is one block (image, title, a muted line of the
   options, arrow on the right); no "All ..." link, no orange link row, no brand logos; one numbered list; help strip. */
@media (min-width: 992px) {
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-all { display: none !important; }
	html.wgh-pal body nav.nav-container .wgh-mega a.wgh-mega-head { position: relative !important; padding: 18px 60px 4px 18px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:not(:has(> .wgh-mega-parts ~ .wgh-mega-parts)) > a.wgh-mega-head { padding-bottom: 18px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega a.wgh-mega-head::after { content: ""; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--wgh-btn); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat; }
	/* The options under the title: one muted line, separated by dots, no arrows */
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) { gap: 0 !important; padding: 0 60px 18px 90px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a { font-size: 14.5px !important; font-weight: 400 !important; color: rgba(11, 25, 73, 0.72) !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a + a::before { content: "\00b7"; margin: 0 7px; color: rgba(11, 25, 73, 0.72); }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a svg { display: none !important; }
	/* Shop: no brand logos; the parts list sits under its own tile, one column (two only when there is a single tile) */
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-brands.wgh-mega-brands { display: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts { column-count: 1 !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega:not(:has(.wgh-mega-group:nth-child(2))) .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts { column-count: 2 !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > a.wgh-mega-head { border-radius: 14px !important; padding-bottom: 18px !important; }
}
@media (min-width: 992px) { html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-title::after { content: "Shop by brand  ·  Find my model"; display: block; margin-top: 3px; font-size: 14.5px; font-weight: 400; letter-spacing: 0; color: rgba(11, 25, 73, 0.72); } }

/* Mega C fixes (2026-10-15): list text left next to its number; the options line tucked under the title; arrow
   centred on the tile; shop shows only the "Popular parts" label. */
@media (min-width: 992px) {
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type a,
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a { justify-content: flex-start !important; text-align: left !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type a span,
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a span { margin: 0 !important; flex: 1 1 auto !important; text-align: left !important; }
	html.wgh-pal body nav.nav-container .wgh-mega a.wgh-mega-head { padding-bottom: 0 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) { margin-top: -18px !important; position: relative; z-index: 1; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:not(:has(> .wgh-mega-parts ~ .wgh-mega-parts)) > a.wgh-mega-head { padding-bottom: 18px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-parts ~ .wgh-mega-parts) > a.wgh-mega-head::after { top: 44px !important; margin-top: 0 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a + a::before { margin: 0 8px 0 2px !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group:nth-child(n) > .wgh-mega-label:last-of-type { display: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group:nth-child(1) > .wgh-mega-label:first-of-type:first-of-type { display: block !important; }
}

/* Mega C tile, as the demo (2026-10-15 v3): the head IS the whole tile (image, title, arrow); the options line is laid
   over the same grid cell, tucked directly under the title. */
@media (min-width: 992px) {
	html.wgh-pal body nav.nav-container .wgh-mega a.wgh-mega-head { grid-row: 1 !important; align-items: center !important; padding: 18px 60px 18px 18px !important; border-radius: 14px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega a.wgh-mega-head::after { top: 50% !important; margin-top: -8px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-parts ~ .wgh-mega-parts) > a.wgh-mega-head > span:last-child { padding-bottom: 24px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) { grid-row: 1 !important; align-self: end !important; margin: 0 !important; padding: 0 60px 20px 90px !important; background: none !important; border-radius: 0 !important; position: relative !important; z-index: 2 !important; pointer-events: none; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a { pointer-events: auto; line-height: 1.3 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a + a::before { margin: 0 6px !important; }
}

/* Footers on all four sites in the nav navy (2026-10-15) */
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand) { background-color: #000E42 !important; }
html.wgh-pal body footer.bg-\[\#0B1949\] { background-color: #000E42 !important; }
@media (min-width: 992px) {
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a { gap: 0 !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:not(:last-of-type) a + a::before { margin: 0 7px !important; }
	html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-img img { width: auto !important; height: 56px !important; max-width: 56px !important; max-height: 56px !important; object-fit: contain !important; }
}

/* The shop theme hides all ::before/::after: show the menu numbers, the tile arrow and the options line */
@media (min-width: 992px) { html.wgh-pal body nav.nav-container .wgh-mega :is(a.wgh-mega-head, .wgh-mega-title, .wgh-mega-parts a)::before, html.wgh-pal body nav.nav-container .wgh-mega :is(a.wgh-mega-head, .wgh-mega-title, .wgh-mega-parts a)::after { visibility: visible !important; } }
@media (min-width: 992px) { html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a + a::before, html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a::before { margin: 0 !important; content: counter(wghm) !important; } }

/* Menu fix (2026-10-15): pseudo-elements inherit the menu's own visibility, so closed menus stay fully hidden and never catch the mouse */
@media (min-width: 992px) { html.wgh-pal body nav.nav-container .wgh-mega :is(a.wgh-mega-head, .wgh-mega-title, .wgh-mega-parts a)::before, html.wgh-pal body nav.nav-container .wgh-mega :is(a.wgh-mega-head, .wgh-mega-title, .wgh-mega-parts a)::after { visibility: inherit !important; } }

/* Shop menu tiles: real "Shop by brand · Find my model" links, placed like the other sites' options line (2026-10-15) */
@media (min-width: 992px) {
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-title::after { content: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-acts.wgh-mega-acts { grid-row: 1 !important; align-self: end !important; display: flex !important; flex-wrap: wrap !important; gap: 0 !important; column-count: auto !important; margin: 0 !important; padding: 0 60px 20px 90px !important; border: 0 !important; border-radius: 0 !important; background: none !important; position: relative !important; z-index: 2 !important; pointer-events: none; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-acts.wgh-mega-acts a { counter-increment: none !important; pointer-events: auto; display: inline-flex !important; align-items: center !important; gap: 0 !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.3 !important; color: rgba(11, 25, 73, 0.72) !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-acts.wgh-mega-acts a::before { content: none !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-acts.wgh-mega-acts a + a::before { content: "\00b7" !important; display: inline !important; width: auto !important; margin: 0 7px !important; font-weight: 400 !important; color: rgba(11, 25, 73, 0.72) !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-acts.wgh-mega-acts a:hover span { color: var(--wgh-btn) !important; text-decoration: underline; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > a.wgh-mega-head > span:last-child { padding-bottom: 24px !important; }
	html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > a.wgh-mega-head::after { top: 44px !important; margin-top: 0 !important; }
}
@media (min-width: 992px) { html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts a:hover span, html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-acts.wgh-mega-acts a:hover span, html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts a:hover span { text-decoration: underline !important; text-underline-offset: 3px; color: var(--wgh-btn) !important; } }

/* Highlighted words in h2/h3 titles in the area colour too (2026-10-15) */
html.wgh-pal :is(h2, h3) u { color: var(--wgh-accent) !important; }

/* Find an Engineer menus in layout C (2026-10-15): groups with brand logos (head + towns + logos) get the shop treatment:
   towns are the numbered list, logos hidden, the tile is image + title + arrow. */
@media (min-width: 992px) {
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-brands { display: none !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-label { display: none !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:nth-child(1):has(> .wgh-mega-brands) > .wgh-mega-label:first-of-type { display: block !important; grid-row: 3 !important; grid-column: 1 / -1 !important; margin: 24px 0 2px !important; padding: 0 !important; border: 0 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: rgba(11, 25, 73, 0.5) !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-parts.wgh-mega-parts { grid-row: 4 !important; align-self: start !important; display: block !important; column-count: 1 !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; position: static !important; pointer-events: auto !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega:not(:has(.wgh-mega-group:nth-child(2))) .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-parts.wgh-mega-parts { column-count: 2 !important; column-gap: 32px !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-parts.wgh-mega-parts a { counter-increment: wghm; break-inside: avoid; display: flex !important; gap: 12px !important; width: auto !important; margin: 0 !important; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid #e6ebf3 !important; border-radius: 0 !important; background: none !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; color: rgba(11, 25, 73, 0.86) !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-parts.wgh-mega-parts a::before,
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-parts.wgh-mega-parts a + a::before { content: counter(wghm) !important; display: block !important; flex: none; width: 20px; margin: 0 !important; font-weight: 700; color: var(--wgh-accent) !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-parts.wgh-mega-parts a svg { display: none !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-parts.wgh-mega-parts a:hover span { color: var(--wgh-btn) !important; text-decoration: underline !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > a.wgh-mega-head { border-radius: 14px !important; padding-bottom: 18px !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > a.wgh-mega-head > span:last-child { padding-bottom: 0 !important; }
	html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > a.wgh-mega-head::after { top: 50% !important; margin-top: -8px !important; }
}
@media (min-width: 992px) { html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts a { justify-content: flex-start !important; text-align: left !important; } html.wgh-pal body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts:last-of-type a span, html.wgh-pal[data-wgh-site="engineers"] body nav.nav-container .wgh-mega .wgh-mega-group:has(> .wgh-mega-brands) > .wgh-mega-parts.wgh-mega-parts a span { margin: 0 !important; flex: 1 1 auto !important; text-align: left !important; } }

/* Also-on strip: label centred above, the three cards full width (2026-10-15) */
@media (min-width: 768px) { html.wgh-pal .wgh-next { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 18px !important; row-gap: 14px !important; } html.wgh-pal .wgh-next-l { grid-column: 1 / -1 !important; padding: 0 !important; text-align: center !important; } }

/* ---------- Phone menus rebuilt to match the desktop menus (layout C), all four sites (2026-10-15) ----------
   White page, no boxed lists. Step 1: plain rows. Step 2: the appliance tiles (tint + coloured top edge) with their two
   options as buttons beneath. Step 3: the appliance as a tile, short sections as buttons, long ones as a numbered list.
   Help strip with a full-width button along the bottom. */
@media (max-width: 991px) {
	html.wgh-pal .wgh-drawer { background: #fff !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-list { margin: 0 20px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-list > li { margin: 0 !important; border: 0 !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-label, html.wgh-pal .wgh-drawer .wgh-dm-sec { padding: 18px 20px 6px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; color: rgba(11, 25, 73, 0.5) !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-title { padding: 18px 20px 12px !important; font-size: 21px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #0B1949 !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-back { min-height: 52px !important; padding: 0 20px !important; border: 0 !important; border-bottom: 1px solid #e6ebf3 !important; background: none !important; font-size: 15px !important; font-weight: 600 !important; color: var(--wgh-btn) !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-back svg { color: var(--wgh-btn) !important; }

	/* Step 1: plain rows */
	html.wgh-pal .wgh-drawer .wgh-dm-row { min-height: 56px !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid #e6ebf3 !important; border-radius: 0 !important; background: none !important; font-size: 16px !important; font-weight: 600 !important; color: #0B1949 !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-list > li:last-child > .wgh-dm-row { border-bottom: 0 !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-row svg { width: 11px !important; height: 11px !important; color: var(--wgh-btn) !important; }

	/* Step 2: the appliance tiles, options as buttons beneath */
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="1"] .wgh-dm-list > li { margin-bottom: 16px !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-item { position: relative !important; display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; min-height: 0 !important; padding: 14px 44px 14px 14px !important; border: 0 !important; border-top: 4px solid var(--wgh-accent) !important; border-radius: 14px !important; background: color-mix(in srgb, var(--wgh-accent) 8%, #fff) !important; text-align: left !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-item .wgh-dm-pic { display: flex !important; align-items: center !important; justify-content: center !important; flex: none !important; width: 52px !important; height: 52px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-item .wgh-dm-pic img { width: auto !important; height: auto !important; max-width: 52px !important; max-height: 52px !important; object-fit: contain !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-item .wgh-dm-pic svg { width: 24px !important; height: 24px !important; color: var(--wgh-accent) !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-item .wgh-dm-txt b { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: #0B1949 !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-item .wgh-dm-txt small { display: none !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-item > svg { position: absolute !important; right: 16px !important; top: 50% !important; width: 11px !important; height: 11px !important; margin-top: -5px !important; color: var(--wgh-btn) !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

	/* Option buttons (step 2) and short sections (step 3) */
	html.wgh-pal .wgh-drawer .wgh-dm-opts a,
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:not(:has(> li:nth-child(3))) .wgh-dm-link { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-height: 0 !important; padding: 12px 14px !important; border: 1px solid #e6ebf3 !important; border-radius: 10px !important; background: #fff !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #0B1949 !important; text-decoration: none !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-opts a svg,
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:not(:has(> li:nth-child(3))) .wgh-dm-link svg { flex: none !important; width: 9px !important; height: 9px !important; color: var(--wgh-btn) !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:not(:has(> li:nth-child(3))) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] .wgh-dm-sec:has(+ ul.wgh-dm-list:not(:has(> li:nth-child(3)))) { display: none !important; }

	/* Step 3: the appliance as a tile (title + View all) */
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] .wgh-dm-title { margin: 18px 20px 0 !important; padding: 16px 16px 4px !important; border-top: 4px solid var(--wgh-accent) !important; border-radius: 14px 14px 0 0 !important; background: color-mix(in srgb, var(--wgh-accent) 8%, #fff) !important; font-size: 18px !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] .wgh-dm-all { display: flex !important; justify-content: flex-start !important; gap: 6px !important; min-height: 0 !important; margin: 0 20px 16px !important; padding: 0 16px 14px !important; border: 0 !important; border-radius: 0 0 14px 14px !important; background: color-mix(in srgb, var(--wgh-accent) 8%, #fff) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--wgh-btn) !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] .wgh-dm-all svg { width: 9px !important; height: 9px !important; color: var(--wgh-btn) !important; }

	/* Step 3: long sections as a numbered list; brand lists hidden as on desktop */
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:has(> li:nth-child(3)) { counter-reset: wghd; }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:has(> li:nth-child(3)) > li { counter-increment: wghd; }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:has(> li:nth-child(3)) .wgh-dm-link { display: flex !important; justify-content: flex-start !important; gap: 12px !important; min-height: 0 !important; padding: 11px 0 !important; border: 0 !important; border-bottom: 1px solid #e6ebf3 !important; border-radius: 0 !important; background: none !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.4 !important; color: rgba(11, 25, 73, 0.86) !important; text-align: left !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:has(> li:nth-child(3)) .wgh-dm-link::before { content: counter(wghd) !important; visibility: inherit !important; display: block !important; flex: none; width: 18px; font-weight: 700; color: var(--wgh-accent); }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:has(> li:nth-child(3)) .wgh-dm-link span { flex: 1 1 auto; text-align: left; }
	html.wgh-pal .wgh-drawer .wgh-dm-panel[data-p="2"] ul.wgh-dm-list:has(> li:nth-child(3)) .wgh-dm-link svg { display: none !important; }
	html.wgh-pal .wgh-drawer :is(.wgh-dm-sec.is-brands, ul.wgh-dm-list.is-brands, .wgh-dm-secw.is-brands) { display: none !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-gap { height: 12px !important; }

	/* Help strip with a full-width button along the bottom */
	html.wgh-pal .wgh-drawer .wgh-dm-help { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 8px; padding: 16px 20px 20px; border-top: 1px solid color-mix(in srgb, var(--wgh-accent) 14%, #fff); background: color-mix(in srgb, var(--wgh-accent) 7%, #fff); }
	html.wgh-pal .wgh-drawer .wgh-dm-help-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--wgh-accent); color: #fff; }
	html.wgh-pal .wgh-drawer .wgh-dm-help-ic svg { width: 15px; height: 15px; color: #fff; fill: currentColor; }
	html.wgh-pal .wgh-drawer .wgh-dm-help b { flex: 1; font-size: 15px; font-weight: 700; color: #0B1949; }
	html.wgh-pal .wgh-drawer .wgh-dm-help a.wgh-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; height: 46px !important; border-radius: 9px !important; font-size: 15px !important; font-weight: 600 !important; }
	html.wgh-pal .wgh-drawer .wgh-dm-help a.wgh-btn svg { width: 14px !important; height: 14px !important; fill: currentColor; }
	html.wgh-pal .wgh-drawer .wgh-d-util { border-top: 0 !important; }
}

/* Shop desktop menu: first 6 parts (phones list up to 10) */
@media (min-width: 992px) { html.wgh-pal[data-wgh-site="shop"] body nav.nav-container .wgh-mega .wgh-mega-group > .wgh-mega-parts.wgh-mega-parts:not(.wgh-mega-acts) a:nth-child(n+7) { display: none !important; } }
html.wgh-pal :is(h1, h2, h3) u { text-decoration: none !important; }

/* Breadcrumbs on phones, every site (2026-10-15): the full trail on one line, swipe sideways, no scrollbar, no back-link variant */
@media (max-width: 767px) {
	html.wgh-pal .wgh-crumbs .wgh-crumbs-back { display: none !important; }
	html.wgh-pal .wgh-crumbs .wgh-crumbs-trail { display: flex !important; flex-wrap: nowrap !important; align-items: center; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	html.wgh-pal .wgh-crumbs .wgh-crumbs-trail::-webkit-scrollbar { display: none; }
	html.wgh-pal .wgh-crumbs .wgh-crumbs-trail > * { flex: none !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; }
}

/* Breadcrumbs: house icon before Home on every site (Font Awesome Free 6.6.0 solid "house", path copied from the official file) (2026-10-15) */
html.wgh-pal { --wgh-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E"); }
html.wgh-pal :is(.wgh-crumbs .wgh-crumbs-trail > a:first-child, .hero-breadcrumbs p#breadcrumbs > span > span:first-child > a) { display: inline-flex !important; align-items: center; gap: 6px; }
html.wgh-pal :is(.wgh-crumbs .wgh-crumbs-trail > a:first-child, .hero-breadcrumbs p#breadcrumbs > span > span:first-child > a)::before { content: "" !important; visibility: visible !important; display: inline-block !important; flex: none; width: 13px; height: 12px; background: currentColor; -webkit-mask: var(--wgh-house) center / contain no-repeat; mask: var(--wgh-house) center / contain no-repeat; }

/* Phone menu help strip: icon + heading centred, button beneath */
@media (max-width: 991px) {
	html.wgh-pal .wgh-drawer .wgh-dm-help { justify-content: center; }
	html.wgh-pal .wgh-drawer .wgh-dm-help b { flex: none; }
}

/* House icon in the area's accent */
html.wgh-pal :is(.wgh-crumbs .wgh-crumbs-trail > a:first-child, .hero-breadcrumbs p#breadcrumbs > span > span:first-child > a)::before { background: var(--wgh-accent) !important; }

/* Breadcrumbs on phones: tighter, same spacing on every site (6px either side of the dash) */
@media (max-width: 767px) {
	html.wgh-pal .wgh-crumbs .wgh-crumbs-trail { column-gap: 6px !important; }
	html.wgh-pal .hero-breadcrumbs p#breadcrumbs > span { column-gap: 6px !important; }
	html.wgh-pal .hero-breadcrumbs p#breadcrumbs > span > b { margin: 0 !important; }
}

/* Articles home "Fault Finder / Help & Advice / Spare Parts Shop" cards in the new colours (2026-10-15):
   the two Articles tools in the Articles blue, the shop card in shop orange. */
html.wgh-pal .wh-hub-more .wh-hub-card:is(:has(.pv-finder), :has(.pv-guide)) .wh-hub-ic { background: #ebeef8 !important; color: #1E40AF !important; }
html.wgh-pal .wh-hub-more .wh-hub-card:is(:has(.pv-finder), :has(.pv-guide)) .wh-hub-ic * { color: #1E40AF !important; }
html.wgh-pal .wh-hub-more .wh-hub-card:is(:has(.pv-finder), :has(.pv-guide)) .wh-btn { background: #1E40AF !important; border-color: #1E40AF !important; color: #fff !important; }
html.wgh-pal .wh-hub-more .wh-hub-card:is(:has(.pv-finder), :has(.pv-guide)) .wh-btn:hover { background: #1a3797 !important; border-color: #1a3797 !important; }
html.wgh-pal .wh-hub-more .pv-finder .appl { background: #ebeef8 !important; color: #1E40AF !important; }
html.wgh-pal .wh-hub-more .pv-finder .bar > * { background: linear-gradient(90deg, #8DB0F2, #1E40AF) !important; }
html.wgh-pal .wh-hub-more .pv-guide .n { background: #ebeef8 !important; color: #1E40AF !important; }

html.wgh-pal .wh-hub-more .wh-hub-card:has(.pv-parts) .wh-hub-ic { background: #fff1e6 !important; color: #FF6600 !important; }
html.wgh-pal .wh-hub-more .wh-hub-card:has(.pv-parts) .wh-hub-ic * { color: #FF6600 !important; }
html.wgh-pal .wh-hub-more .pv-parts .go { background: #FF6600 !important; color: #fff !important; }
html.wgh-pal .wh-hub-more .pv-parts .pv-part-img { background: #fff1e6 !important; color: #FF6600 !important; }
html.wgh-pal .wh-hub-more .pv-parts .pv-part-img * { color: #FF6600 !important; }

/* Articles home featured cards in their destination colours (2026-10-15): Find an Engineer green, Help Forum purple */
html.wgh-pal .wh-hub-card.featured:has(.pv-map) .wh-hub-ic { background: #eaf7ef !important; color: #16A34A !important; }
html.wgh-pal .wh-hub-card.featured:has(.pv-map) .wh-hub-ic * { color: #16A34A !important; }
html.wgh-pal .wh-hub-card.featured:has(.pv-map) .wh-btn { background: #16A34A !important; border-color: #16A34A !important; color: #fff !important; }
html.wgh-pal .wh-hub-card.featured:has(.pv-map) .wh-btn:hover { background: #138c40 !important; border-color: #138c40 !important; }
html.wgh-pal .wh-hub-card.featured:has(.pv-ask) .wh-hub-ic { background: #e9f5f8 !important; color: #0891B2 !important; }
html.wgh-pal .wh-hub-card.featured:has(.pv-ask) .wh-hub-ic * { color: #0891B2 !important; }
html.wgh-pal .wh-hub-card.featured:has(.pv-ask) .wh-btn { background: #0891B2 !important; border-color: #0891B2 !important; color: #fff !important; }
html.wgh-pal .wh-hub-card.featured:has(.pv-ask) .wh-btn:hover { background: #077d99 !important; border-color: #077d99 !important; }

/* Map: pins and moving marker in Engineers green, no orange glow */
html.wgh-pal .pv-map .pv-pin { background: #7fd0b6 !important; box-shadow: 0 2px 4px rgba(11, 25, 73, 0.18) !important; }
html.wgh-pal .pv-map .pv-pin-active { background: #16A34A !important; box-shadow: 0 3px 8px rgba(11, 25, 73, 0.22) !important; }
html.wgh-pal .pv-map .pv-pin-active::before { border-color: #16A34A !important; }

/* Forum: static "Ask a question" preview (replaces the made-up live feed) */
html.wgh-pal .pv-ask .pv-ask-body { padding: 16px 16px 18px; }
html.wgh-pal .pv-ask .pv-ask-lb { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: rgba(11, 25, 73, 0.6); }
html.wgh-pal .pv-ask .pv-ask-in { display: flex; align-items: center; height: 44px; padding: 0 13px; border: 1.5px solid #0891B2; border-radius: 9px; background: #fff; box-shadow: 0 0 0 3px #e9f5f8; font-size: 14px; font-weight: 500; color: #0B1949; white-space: nowrap; overflow: hidden; }
html.wgh-pal .pv-ask .pv-ask-caret { display: inline-block; width: 1.5px; height: 18px; margin-left: 2px; background: #0891B2; animation: wh-caret 1.1s steps(1) infinite; }
@keyframes wh-caret { 50% { opacity: 0; } }
html.wgh-pal .pv-ask .pv-ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
html.wgh-pal .pv-ask .pv-ask-chip { padding: 5px 10px; border-radius: 999px; background: #e9f5f8; font-size: 12px; font-weight: 600; color: #0891B2; white-space: nowrap; }
html.wgh-pal .pv-ask .pv-ask-go { margin-left: auto; padding: 7px 12px; border-radius: 7px; background: #0891B2; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
html.wgh-pal .pv-ask .pv-ask-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef1f7; font-size: 13px; font-weight: 500; color: rgba(11, 25, 73, 0.72); }
html.wgh-pal .pv-ask .pv-ask-foot svg { flex: none; width: 15px; height: 15px; fill: #2fb36a; }
@media (prefers-reduced-motion: reduce) { html.wgh-pal .pv-ask .pv-ask-caret { animation: none; } }
html.wgh-pal .pv-ask .pv-ask-lb { display: none; }
html.wgh-pal .pv-ask .pv-ask-body { padding: 14px 16px; }
html.wgh-pal .pv-ask .pv-ask-foot { padding: 10px 16px; }
html.wgh-pal .pv-ask .pv-ask-foot { padding: 12px 16px; }

/* Forum "Ask a question" preview: typing demo (chip appears, Post question presses), tick green */
html.wgh-pal .pv-ask .pv-ask-foot svg, html.wgh-pal .pv-ask .pv-ask-foot svg * { color: #2fb36a !important; fill: #2fb36a !important; }
html.wgh-pal .pv-ask, html.wgh-pal .pv-ask * { cursor: default; user-select: none; }
html.wgh-pal .pv-ask.is-demo .pv-ask-chip { opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
html.wgh-pal .pv-ask.is-demo .pv-ask-chip.is-on { opacity: 1; transform: none; }
html.wgh-pal .pv-ask .pv-ask-go { transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
html.wgh-pal .pv-ask .pv-ask-go.is-press { transform: scale(.95); background: #077d99; box-shadow: 0 0 0 4px #e9f5f8; }

/* Forum preview: "Question posted" success state over the question box */
html.wgh-pal .pv-ask .pv-ask-body { position: relative; }
html.wgh-pal .pv-ask .pv-ask-ok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 16px; background: #fff; text-align: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
html.wgh-pal .pv-ask.is-ok .pv-ask-ok { opacity: 1; visibility: visible; }
html.wgh-pal .pv-ask .pv-ask-ok svg { width: 26px; height: 26px; margin-bottom: 4px; color: #2fb36a !important; fill: #2fb36a !important; }
html.wgh-pal .pv-ask .pv-ask-ok b { font-size: 15px; font-weight: 700; color: #0B1949; }
html.wgh-pal .pv-ask .pv-ask-ok span { font-size: 12.5px; font-weight: 500; color: rgba(11, 25, 73, 0.66); }

/* Find an Engineer preview: postcode typed into the map, pins and an example "checked engineer" card appear (2026-10-15).
   No firm names or ratings - replaces the made-up companies. */
html.wgh-pal .pv-map .pv-pc { position: absolute; left: 12px; top: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px 0 12px; border: 1.5px solid #16A34A; border-radius: 9px; background: #fff; box-shadow: 0 0 0 3px #eaf7ef; font-size: 14px; font-weight: 600; color: #0B1949; }
html.wgh-pal .pv-map .pv-pc > svg { flex: none; width: 13px; height: 13px; fill: #16A34A; color: #16A34A; }
html.wgh-pal .pv-map .pv-pc-caret { display: inline-block; width: 1.5px; height: 17px; margin-left: -6px; background: #16A34A; animation: wh-caret 1.1s steps(1) infinite; }
html.wgh-pal .pv-map .pv-pc-go { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; margin-left: auto; border-radius: 6px; background: #16A34A; transition: transform .15s ease, background-color .15s ease; }
html.wgh-pal .pv-map .pv-pc-go svg { width: 12px; height: 12px; fill: #fff; color: #fff; }
html.wgh-pal .pv-map .pv-pc-go.is-press { transform: scale(.9); background: #138c40; }
html.wgh-pal .pv-map .pv-map-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #eaf7ef; }
html.wgh-pal .pv-map .pv-map-ic svg { width: 14px; height: 14px; fill: #16A34A; color: #16A34A; }

/* single card, no cycling; the marker still hops between the pins */
html.wgh-pal .pv-map .pv-map-card { opacity: 1 !important; animation: none !important; }
html.wgh-pal .pv-map.is-demo :is(.pv-pin, .pv-pin-active) { opacity: 0; transition: opacity .35s ease; }
html.wgh-pal .pv-map.is-demo .pv-map-card { opacity: 0 !important; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
html.wgh-pal .pv-map.is-demo.is-found :is(.pv-pin, .pv-pin-active) { opacity: 1; }
html.wgh-pal .pv-map.is-demo.is-found .pv-map-card { opacity: 1 !important; transform: none; }
html.wgh-pal .pv-map .pv-pin-active { left: 64% !important; top: 40% !important; animation: none !important; }

/* Find an Engineer preview fixes: card text on two lines, slimmer search, pins and marker clear of the search */
html.wgh-pal .pv-map .pv-map-card .tx { display: block; min-width: 0; line-height: 1.3; }
html.wgh-pal .pv-map .pv-map-card .tx > b { display: block; font-size: 13.5px; }
html.wgh-pal .pv-map .pv-map-card .tx > span { display: block; font-size: 12.5px; white-space: nowrap; }
html.wgh-pal .pv-map .pv-map-card .tx > span > span { display: inline !important; }
html.wgh-pal .pv-map .pv-pc { left: 10px; right: 10px; top: 10px; height: 34px; font-size: 13.5px; box-shadow: none; }
html.wgh-pal .pv-map .pv-pc-go { width: 28px; height: 26px; }
html.wgh-pal .pv-map .pv-pin-active { left: 62% !important; top: 58% !important; }

/* Find an Engineer preview: real listed firm card (logo or initials, name, rating and town), links to the profile */
html.wgh-pal .pv-map a.pv-map-card { display: flex; align-items: center; gap: 10px; padding: 0 13px; text-decoration: none !important; color: inherit; }
html.wgh-pal .pv-map .pv-map-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; overflow: hidden; border: 1px solid #e6ebf3; border-radius: 50%; background: #eaf7ef; font-size: 11.5px; font-weight: 700; color: #16A34A; }
html.wgh-pal .pv-map .pv-map-av img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
html.wgh-pal .pv-map .pv-map-card .tx > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0B1949; }
html.wgh-pal .pv-map .pv-map-card .tx > .pv-map-sub { color: rgba(11, 25, 73, 0.62); }
html.wgh-pal .pv-map a.pv-map-card:hover .tx > b { color: #16A34A; }

/* Find an Engineer preview: a different map per postcode, and a hint/searching state instead of an empty strip */
html.wgh-pal .pv-map .pv-map-canvas::before { top: var(--pm-ry, 58%) !important; transform: rotate(var(--pm-ra, -9deg)) !important; transition: top .5s ease, transform .5s ease; }
html.wgh-pal .pv-map .pv-map-canvas::after { left: var(--pm-rx, 40%) !important; transform: rotate(var(--pm-rb, 7deg)) !important; transition: left .5s ease, transform .5s ease; }
html.wgh-pal .pv-map .pv-map-area { position: absolute; left: var(--pm-ax, 68%); top: var(--pm-ay, 62%); width: var(--pm-aw, 34%); height: var(--pm-ah, 40%); border-radius: 40% 55% 45% 50%; background: var(--pm-ac, #dcefe4); opacity: .85; transition: all .5s ease; }
html.wgh-pal .pv-map .pv-pin { transition: opacity .35s ease, left .5s ease, top .5s ease; }
html.wgh-pal .pv-map .pv-map-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 13px; font-size: 13px; font-weight: 500; color: rgba(11, 25, 73, 0.55); transition: opacity .3s ease; }
html.wgh-pal .pv-map .pv-map-spin { display: none; flex: none; width: 14px; height: 14px; border: 2px solid #cdebd6; border-top-color: #16A34A; border-radius: 50%; animation: wh-spin .8s linear infinite; }
html.wgh-pal .pv-map.is-search .pv-map-spin { display: inline-block; }
html.wgh-pal .pv-map.is-found .pv-map-hint { opacity: 0; }
html.wgh-pal .pv-map:not(.is-demo) .pv-map-hint { display: none; }
@keyframes wh-spin { to { transform: rotate(360deg); } }

/* ---------- Articles home: Browse by topic, You might like, Join the Discussion / Most Popular in the new styling (2026-10-15) ----------
   Tinted tiles with the blue top edge (like the hub tiles), Font Awesome icons in a blue disc, white link rows, no grey shadows,
   no live counts. */
html.wgh-pal .wh-home-link-group-card { border: 0 !important; border-top: 4px solid #1E40AF !important; border-radius: 16px !important; background: #f3f7fe !important; box-shadow: none !important; }
html.wgh-pal .wh-home-link-group-card h3 { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.015em; color: #0B1949 !important; }
html.wgh-pal .wh-home-link-group-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: none !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; background: #1E40AF !important; color: #fff !important; }
html.wgh-pal .wh-home-link-group-icon svg { width: 15px !important; height: 15px !important; color: #fff !important; fill: currentColor; }
html.wgh-pal .wh-home-link-item { border: 1px solid #e2e6f5 !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; transition: border-color .15s ease, color .15s ease; }
html.wgh-pal .wh-home-link-item::after { color: #1E40AF !important; }
html.wgh-pal .wh-home-link-item:hover, html.wgh-pal .wh-home-link-item:focus-visible { border-color: #1E40AF !important; color: #1E40AF !important; }

/* You might like */
html.wgh-pal .wh-latest-posts .wh-post-results-count { display: none !important; }
html.wgh-pal .wh-latest-posts :is(.wh-post-featured, .wh-post-list) { border: 1px solid #e6ebf3 !important; box-shadow: none !important; }
html.wgh-pal .wh-latest-posts .wh-post-category-select { border-color: #e2e6f5 !important; box-shadow: none !important; }
html.wgh-pal .wh-latest-posts .wh-post-category-select:focus { border-color: #1E40AF !important; box-shadow: 0 0 0 3px #ebeef8 !important; outline: 0; }
html.wgh-pal .wh-latest-posts :is(.wh-post-list-content h3 a, .wh-post-featured-content h2 a):hover { color: #1E40AF !important; }

/* Join the Discussion / Most Popular Articles: tinted tiles, no count bubbles, blue arrow on each row */
html.wgh-pal .wh-post-link-column { border: 0 !important; border-top: 4px solid #1E40AF !important; border-radius: 16px !important; background: #f3f7fe !important; box-shadow: none !important; }
html.wgh-pal .wh-post-link-column h3 { font-weight: 700 !important; color: #0B1949 !important; }
html.wgh-pal .wh-post-link-column li { border-color: #e2e6f5 !important; }
html.wgh-pal .wh-post-link-column :is(.wh-post-link-comment-bubble, .wh-post-link-view-bubble) { display: none !important; }
html.wgh-pal .wh-post-link-item { padding-right: 0 !important; }
html.wgh-pal .wh-post-link-item::after { content: "\2192" !important; visibility: visible !important; flex: none; margin-left: auto; padding-left: 14px; font-weight: 600; color: #1E40AF; }
html.wgh-pal .wh-post-link-title { font-weight: 500 !important; }
html.wgh-pal .wh-post-link-item:hover .wh-post-link-title { color: #1E40AF !important; }

/* Gold rating star on the Find an Engineer preview card */
html.wgh-pal .pv-map .pv-star { display: inline-flex; vertical-align: -1px; margin-right: 4px; }
html.wgh-pal .pv-map .pv-star svg { width: 12px; height: 12px; fill: #F5B301; color: #F5B301; }

/* Gold star stays on the rating line */
html.wgh-pal .pv-map .pv-map-card .pv-map-sub { display: flex !important; align-items: center; gap: 4px; }
html.wgh-pal .pv-map .pv-map-card .pv-map-sub .pv-star { display: inline-flex !important; margin: 0; }
html.wgh-pal .pv-map .pv-map-card .pv-map-sub .pv-star svg { display: block; }

/* Link hovers take the area's colour, not the old orange (2026-10-15) */
html.wgh-pal :is(.wgh-crumbs-trail a, .wgh-crumbs-back, .wgh-util a, .wh-post-link-column a, .wh-search-result-card h2 a, .wh-legal-crumbs a, .wh-legal-prose a, .wh-404-topic-links a, .wh-mobile-panel .menu > li > a, .wh-legal-sibling):is(:hover, :focus-visible) { color: var(--wgh-btn) !important; }
html.wgh-pal :is(.wh-sidebar-popular-item:hover, .wh-sidebar-popular-item:focus) .wh-sidebar-popular-title { color: var(--wgh-btn) !important; }
html.wgh-pal .wh-404-topic-links a:is(:hover, :focus) { border-color: color-mix(in srgb, var(--wgh-accent) 45%, #fff) !important; }
html.wgh-pal .wh-search-pagination .page-numbers:hover { color: var(--wgh-btn) !important; border-color: var(--wgh-accent) !important; }

/* ---------- Articles home sections, chosen options (2026-10-15): 1A clean columns, 2B card grid, 3C header band, 4A chevron crumbs ---------- */
html.wgh-pal { --wgh-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E"); }

/* 1A Browse help by topic: white cards, pale-blue icon disc, plain rows with dividers and a blue chevron */
html.wgh-pal .wh-home-link-group-card { padding: 22px 22px 10px !important; border: 1px solid #e6ebf3 !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important; }
html.wgh-pal .wh-home-link-group-card h3 { margin: 0 0 8px !important; }
html.wgh-pal .wh-home-link-group-icon { width: 36px !important; height: 36px !important; background: #ebeef8 !important; color: #1E40AF !important; }
html.wgh-pal .wh-home-link-group-icon svg { color: #1E40AF !important; }
html.wgh-pal .wh-home-link-list { display: block !important; gap: 0 !important; }
html.wgh-pal .wh-home-link-list li { margin: 0 !important; }
html.wgh-pal .wh-home-link-list li + li { border-top: 1px solid #e6ebf3; }
html.wgh-pal .wh-home-link-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px; min-height: 0 !important; padding: 12px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font-size: 15px !important; font-weight: 500 !important; color: #0B1949 !important; }
html.wgh-pal .wh-home-link-item::after { content: "" !important; visibility: visible !important; flex: none; width: 9px; height: 12px; background: #1E40AF; -webkit-mask: var(--wgh-chev) center / contain no-repeat; mask: var(--wgh-chev) center / contain no-repeat; transform: none !important; }
html.wgh-pal .wh-home-link-item:is(:hover, :focus-visible) { color: #1E40AF !important; border: 0 !important; }

/* 3C Join the Discussion / Most Popular: header band, round pictures, counts kept as quiet pills */
html.wgh-pal .wh-post-link-column { padding: 0 !important; overflow: hidden; border: 1px solid #e6ebf3 !important; border-radius: 16px !important; background: #fff !important; box-shadow: none !important; }
html.wgh-pal .wh-plc-band { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-top: 4px solid #1E40AF; background: #f5f8fe; }
html.wgh-pal .wh-plc-disc { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #1E40AF; color: #fff; }
html.wgh-pal .wh-plc-disc svg { width: 15px; height: 15px; color: #fff; fill: currentColor; }
html.wgh-pal .wh-plc-band h3 { margin: 0 !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -0.015em; line-height: 1.25; color: #0B1949 !important; }
html.wgh-pal .wh-plc-band small { display: block; margin-top: 2px; font-size: 13.5px; color: rgba(11, 25, 73, 0.66); }
html.wgh-pal .wh-post-link-column ul { margin: 0 !important; padding: 6px 24px 10px !important; }
html.wgh-pal .wh-post-link-column li { border: 0 !important; }
html.wgh-pal .wh-post-link-column li + li { border-top: 1px solid #e6ebf3 !important; }
html.wgh-pal .wh-post-link-item { display: flex !important; align-items: center !important; gap: 16px !important; padding: 12px 0 !important; }
html.wgh-pal .wh-post-link-item::after { content: none !important; }
html.wgh-pal .wh-post-link-thumb { width: 52px !important; height: 52px !important; flex: none !important; border-radius: 50% !important; overflow: hidden; }
html.wgh-pal .wh-post-link-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50% !important; }
html.wgh-pal .wh-post-link-copy { flex: 1 1 auto; min-width: 0; }
html.wgh-pal .wh-post-link-title { font-size: 15.5px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #0B1949 !important; }
html.wgh-pal .wh-post-link-column :is(.wh-post-link-comment-bubble, .wh-post-link-view-bubble) { display: inline-flex !important; align-items: center; justify-content: center; flex: none; position: static !important; min-width: 40px; height: 26px; margin: 0 !important; padding: 0 9px !important; border: 0 !important; border-radius: 999px !important; background: #ebeef8 !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 700 !important; color: #1E40AF !important; }
html.wgh-pal .wh-post-link-column :is(.wh-post-link-comment-bubble, .wh-post-link-view-bubble)::before,
html.wgh-pal .wh-post-link-column :is(.wh-post-link-comment-bubble, .wh-post-link-view-bubble)::after { content: none !important; display: none !important; }
@media (max-width: 600px) { html.wgh-pal .wh-plc-band { padding: 16px 18px; } html.wgh-pal .wh-post-link-column ul { padding: 4px 18px 8px !important; } }

/* 4A Breadcrumbs: small muted chevron between items, every site */
html.wgh-pal :is(.wgh-crumbs-trail > b, .hero-breadcrumbs p#breadcrumbs > span > b) { display: inline-block !important; flex: none !important; width: 7px !important; height: 10px !important; margin: 0 !important; overflow: hidden; font-size: 0 !important; color: transparent !important; background: rgba(11, 25, 73, 0.35); -webkit-mask: var(--wgh-chev) center / contain no-repeat; mask: var(--wgh-chev) center / contain no-repeat; }
html.wgh-pal .wgh-crumbs-trail { column-gap: 10px !important; }
html.wgh-pal .hero-breadcrumbs p#breadcrumbs > span { display: inline-flex !important; align-items: center; column-gap: 10px !important; }
@media (max-width: 767px) { html.wgh-pal .wgh-crumbs .wgh-crumbs-trail, html.wgh-pal .hero-breadcrumbs p#breadcrumbs > span { column-gap: 8px !important; } }

/* Button hovers: same colour, one shade darker - never switch to another area's colour (2026-10-15) */
html.wgh-pal :is(.wgh-field-search button, .wgh-search-btn, .wgh-btn-primary, .wh-btn-orange, .wh-btn-blue, .wh-btn-navy, .wh-search-submit):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--wgh-btn) 86%, #000) !important; border-color: color-mix(in srgb, var(--wgh-btn) 86%, #000) !important; color: #fff !important; }
html.wgh-pal a:is(.wh-btn, .wgh-btn)[href*="/shop"]:is(:hover, :focus-visible) { background: #DB5800 !important; border-color: #DB5800 !important; color: #fff !important; }
html.wgh-pal a:is(.wh-btn, .wgh-btn)[href*="/engineers"]:is(:hover, :focus-visible) { background: #138C40 !important; border-color: #138C40 !important; color: #fff !important; }
html.wgh-pal a:is(.wh-btn, .wgh-btn)[href*="forum."]:is(:hover, :focus-visible) { background: #077D99 !important; border-color: #077D99 !important; color: #fff !important; }

/* ---------- Article pages: no leftover orange (2026-10-15). Area colour for links, eyebrows, timeline dots, outline buttons
   and call-to-action boxes; anything pointing at the shop keeps the shop orange. ---------- */
html.wgh-pal :is(.entry-content, .wh-basic-page-content) a:not(.wh-btn):not(.wh-review-link):not(.ai-btn) { color: var(--wgh-btn) !important; }
html.wgh-pal :is(.entry-content, .wh-basic-page-content) a:not(.wh-btn):not(.wh-review-link):not(.ai-btn):is(:hover, :focus-visible) { color: color-mix(in srgb, var(--wgh-btn) 80%, #000) !important; }
html.wgh-pal .wh-review-link, html.wgh-pal .wh-review-link:hover { color: var(--wgh-btn) !important; }
html.wgh-pal :is(.wh-section-kicker, .wh-search-overlay-kicker) { color: var(--wgh-accent) !important; }
html.wgh-pal :is(.wh-mast-eyebrow, .wh-section-kicker)::before { background: var(--wgh-accent) !important; }
html.wgh-pal .wh-search-overlay-close:hover { background: var(--wgh-btn) !important; border-color: var(--wgh-btn) !important; }

/* in-article components */
html.wgh-pal .ai-timeline-dot { background: var(--wgh-accent) !important; }
html.wgh-pal .ai-btn-primary { background: var(--wgh-btn) !important; border-color: var(--wgh-btn) !important; color: #fff !important; }
html.wgh-pal .ai-btn-primary:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--wgh-btn) 86%, #000) !important; border-color: color-mix(in srgb, var(--wgh-btn) 86%, #000) !important; }
html.wgh-pal .ai-btn-outline { color: var(--wgh-btn) !important; border-color: color-mix(in srgb, var(--wgh-accent) 40%, #fff) !important; outline-color: var(--wgh-accent) !important; }
html.wgh-pal .ai-btn-outline:is(:hover, :focus-visible) { border-color: var(--wgh-accent) !important; background: color-mix(in srgb, var(--wgh-accent) 7%, #fff) !important; color: var(--wgh-btn) !important; }
html.wgh-pal .ai-cta { background: color-mix(in srgb, var(--wgh-accent) 6%, #fff) !important; border-color: color-mix(in srgb, var(--wgh-accent) 18%, #fff) !important; }
/* destination colours win for shop / engineers / forum links */
html.wgh-pal a.ai-btn-primary[href*="/shop"] { background: #FF6600 !important; border-color: #FF6600 !important; }
html.wgh-pal a.ai-btn-primary[href*="/shop"]:is(:hover, :focus-visible) { background: #DB5800 !important; border-color: #DB5800 !important; }
html.wgh-pal a.ai-btn-primary[href*="/engineers"] { background: #16A34A !important; border-color: #16A34A !important; }
html.wgh-pal a.ai-btn-primary[href*="/engineers"]:is(:hover, :focus-visible) { background: #138C40 !important; border-color: #138C40 !important; }
html.wgh-pal a.ai-btn-primary[href*="forum."] { background: #0891B2 !important; border-color: #0891B2 !important; }
html.wgh-pal a.ai-btn-primary[href*="forum."]:is(:hover, :focus-visible) { background: #077D99 !important; border-color: #077D99 !important; }

/* sidebar promo boxes: tint by where they lead */
html.wgh-pal .wh-sidebar-promo-box::before { background: color-mix(in srgb, var(--wgh-accent) 8%, #fff) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wgh-accent) 18%, #fff) !important; }
html.wgh-pal .wh-sidebar-promo-box:has(a[href*="/shop"])::before { background: #fff6ef !important; box-shadow: inset 0 0 0 1px #ffe0cc !important; }
html.wgh-pal .wh-sidebar-promo-box:has(a[href*="/engineers"])::before { background: #eef8f4 !important; box-shadow: inset 0 0 0 1px #cdebd6 !important; }

/* breadcrumb: a little more room between the house and Home */
html.wgh-pal :is(.wgh-crumbs .wgh-crumbs-trail > a:first-child, .hero-breadcrumbs p#breadcrumbs > span > span:first-child > a) { gap: 9px !important; }
html.wgh-pal .ai-steps li::before { background: var(--wgh-accent) !important; }
html.wgh-pal .ai-alert-warning { background: #FFF8E6 !important; border-left-color: #F2C14E !important; border-color: #F7DC9A !important; }
html.wgh-pal .wh-forum-avatar { background: #ebeef8 !important; color: #1E40AF !important; }
html.wgh-pal .wh-forum-avatar.wh-avatar-orange { background: #eaf7ef !important; color: #16A34A !important; }
html.wgh-pal .wh-comment-item.bypostauthor > .wh-comment-body, html.wgh-pal .bypostauthor .wh-comment-body { background: color-mix(in srgb, var(--wgh-accent) 7%, #fff) !important; }
html.wgh-pal :is(.wh-comment-depth-2, .wh-comment-depth-4, .wh-comment-depth-6, .wh-comment-depth-8) > .wh-comment-body { background: color-mix(in srgb, var(--wgh-accent) 7%, #fff) !important; }

/* Browse help by topic: same header band as Join the Discussion / Most Popular */
html.wgh-pal .wh-home-link-group-card { padding: 0 !important; overflow: hidden; }
html.wgh-pal .wh-home-link-group-card h3 { display: flex !important; align-items: center !important; gap: 14px !important; margin: 0 !important; padding: 18px 24px !important; border-top: 4px solid #1E40AF; background: #f5f8fe; }
html.wgh-pal .wh-home-link-group-icon { width: 36px !important; height: 36px !important; background: #1E40AF !important; color: #fff !important; }
html.wgh-pal .wh-home-link-group-icon svg { color: #fff !important; fill: currentColor; }
html.wgh-pal .wh-hlg-title { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: #0B1949; }
html.wgh-pal .wh-hlg-title small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: rgba(11, 25, 73, 0.66); }
html.wgh-pal .wh-home-link-list { padding: 6px 24px 10px !important; margin: 0 !important; }
@media (max-width: 600px) { html.wgh-pal .wh-home-link-group-card h3 { padding: 16px 18px !important; } html.wgh-pal .wh-home-link-list { padding: 4px 18px 8px !important; } }
html.wgh-pal .wh-hlg-title small { line-height: 21.6px; }

/* Logo preview (wgh_demo=p1): dark-footer logos, white wordmark with "Help" in each area's colour (2026-10-15) */
html.wgh-pal footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-articles.webp?v=6"); width: 300px !important; max-width: 100% !important; height: auto !important; aspect-ratio: 1848 / 278 !important; }
html.wgh-pal[data-wgh-site="forum"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-forum.webp?v=6"); }
html.wgh-pal[data-wgh-site="engineers"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-engineers.webp?v=6"); }
html.wgh-pal[data-wgh-site="shop"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-shop.webp?v=6"); }
@media (max-width: 767px) { html.wgh-pal footer img[src*="logo-footer"] { width: 230px !important; } }

/* ---------- Light footers on every site (2026-10-15): pale background, navy text, area-coloured link hovers.
   Logo: the current dark-text logo; in the logo preview (wgh_demo=p1) the new coloured logo. ---------- */
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) { background: #F5F7FB !important; border-top: 1px solid #e6ebf3 !important; color: rgba(11, 25, 73, 0.72) !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(p, span, li, a, small, div, address) { color: rgba(11, 25, 73, 0.72) !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(.wh-footer-menu-title, .wgh-footer-menu-title, h2, h3, h4, .font-semibold:not(a), .font-bold:not(a)) { color: #0B1949 !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) a:is(:hover, :focus-visible) { color: var(--wgh-btn) !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(.wh-footer-bottom, .wgh-footer-bottom, .border-t, [class*="border-white"]) { border-color: #e3e8f1 !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(.wh-footer-bottom, .wgh-footer-bottom) :is(p, span, a, div) { color: rgba(11, 25, 73, 0.55) !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(.wh-social-link, .wgh-social-link, a[aria-label*="acebook"], a[aria-label*="nstagram"], a[aria-label*="witter"], a[aria-label*="ouTube"]) { background: #fff !important; border: 1px solid #e3e8f1 !important; color: #0B1949 !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(.wh-social-link, .wgh-social-link) svg { color: #0B1949 !important; fill: currentColor; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(.wh-social-link, .wgh-social-link):hover { border-color: var(--wgh-accent) !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(.wh-social-link, .wgh-social-link):hover svg { color: var(--wgh-btn) !important; }

/* footer logo: dark-text logo on the light footer */
html.wgh-pal footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-articles.webp?v=6"); width: 300px !important; max-width: 100% !important; height: auto !important; aspect-ratio: auto !important; }
html.wgh-pal footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-articles.webp?v=6"); aspect-ratio: 1848 / 278 !important; }
html.wgh-pal[data-wgh-site="forum"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-forum.webp?v=6"); }
html.wgh-pal[data-wgh-site="engineers"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-engineers.webp?v=6"); }
html.wgh-pal[data-wgh-site="shop"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-shop.webp?v=6"); }
@media (max-width: 767px) { html.wgh-pal footer img[src*="logo-footer"] { width: 230px !important; } }
html.wgh-pal footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/shop/uploads/2026/10/wgh-logo-600x103.webp"); }
html.wgh-pal footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-articles.webp?v=6"); }
html.wgh-pal[data-wgh-site="forum"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-forum.webp?v=6"); }
html.wgh-pal[data-wgh-site="engineers"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-engineers.webp?v=6"); }
html.wgh-pal[data-wgh-site="shop"] footer img[src*="logo-footer"] { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-shop.webp?v=6"); }
html.wgh-pal:not(.wgh-pal) footer img[src*="logo-footer"] { aspect-ratio: 600 / 103 !important; }

/* Footer: lighter neutral grey, thin top line */
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) { background: #F9FAFB !important; border-top: 1px solid #E5E7EB !important; }
html.wgh-pal body :is(footer.wh-footer, footer.wgh-footer, footer.bg-brand, footer[class*="bg-[#0B1949]"]) :is(.wh-footer-bottom, .wgh-footer-bottom, .border-t, [class*="border-white"]) { border-color: #E5E7EB !important; }

/* Find an Engineer preview: no park/water patch */
html.wgh-pal .pv-map .pv-map-area { display: none !important; }

/* Articles home: "You might like" on its own pale-grey band with hairlines, to separate it from the sections either side */
html.wgh-pal .wh-home-link-groups { padding-bottom: 56px !important; }
html.wgh-pal .wh-latest-posts { padding: 56px 0 60px !important; background: #F7F8FA !important; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; }
html.wgh-pal .wh-latest-posts :is(.wh-post-featured, .wh-post-list) { background: #fff !important; }
html.wgh-pal .wh-latest-posts .wh-post-category-select { background-color: #fff !important; }
html.wgh-pal .wh-post-link-columns { padding-top: 56px !important; }
@media (max-width: 767px) {
	html.wgh-pal .wh-home-link-groups { padding-bottom: 40px !important; }
	html.wgh-pal .wh-latest-posts { padding: 40px 0 44px !important; }
	html.wgh-pal .wh-post-link-columns { padding-top: 40px !important; }
}

/* Discussion / Popular counts: icon says what the number is (eye = views, speech bubble = comments) */
html.wgh-pal { --wgh-ic-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E"); --wgh-ic-comment: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c0 0 0 0 0 0s0 0 0 0s0 0 0 0c0 0 0 0 0 0l.3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z'/%3E%3C/svg%3E"); }
html.wgh-pal .wh-post-link-column :is(.wh-post-link-comment-bubble, .wh-post-link-view-bubble) { gap: 6px; padding: 0 10px !important; }
html.wgh-pal .wh-post-link-column :is(.wh-post-link-comment-bubble, .wh-post-link-view-bubble)::before { content: "" !important; display: inline-block !important; visibility: visible !important; position: static !important; flex: none; width: 13px; height: 12px; border: 0 !important; background: currentColor !important; -webkit-mask: var(--wgh-ic-eye) center / contain no-repeat; mask: var(--wgh-ic-eye) center / contain no-repeat; transform: none !important; }
html.wgh-pal .wh-post-link-column .wh-post-link-comment-bubble::before { -webkit-mask-image: var(--wgh-ic-comment); mask-image: var(--wgh-ic-comment); width: 12px; }

/* "You might like": the whole card / row is clickable (title link stretched over it) */
html.wgh-pal .wh-latest-posts :is(.wh-post-featured, .wh-post-list-item) { position: relative; cursor: pointer; }
html.wgh-pal .wh-latest-posts :is(.wh-post-featured-content h2 a, .wh-post-list-content h3 a)::after { content: ""; position: absolute; inset: 0; z-index: 1; }
html.wgh-pal .wh-latest-posts .wh-post-featured .wh-btn { position: relative; z-index: 2; }
html.wgh-pal .wh-latest-posts :is(.wh-post-featured, .wh-post-list-item):hover :is(h2, h3) a { color: var(--wgh-btn) !important; }

/* ---------- Shared footer, all four sites (2026-10-15): logo + site switcher, a box sending people to another section,
   this site's own link columns, bottom bar. Light grey with a thin top line. ---------- */
.wgh-ft { margin-top: auto; background: #F9FAFB; border-top: 1px solid #E5E7EB; color: rgba(11, 25, 73, 0.72); font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.5; text-align: left; }
.wgh-ft *, .wgh-ft *::before, .wgh-ft *::after { box-sizing: border-box; }
.wgh-ft a { color: inherit; text-decoration: none; }
.wgh-ft .wgh-ft-ic { display: block; flex: none; width: 1em; height: 1em; fill: currentColor; }
.wgh-ft-in { max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.wgh-ft-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 0; border-bottom: 1px solid #E5E7EB; }
.wgh-ft-logo { display: block; flex: none; }
.wgh-ft-logo img { display: block; width: 230px !important; max-width: 100%; height: auto !important; aspect-ratio: 600 / 103; }
html.wgh-pal .wgh-ft-logo img { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-articles.webp?v=6"); aspect-ratio: 1848 / 278; }
html.wgh-pal [data-wgh-ft="forum"] .wgh-ft-logo img { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-forum.webp?v=6"); }
html.wgh-pal [data-wgh-ft="engineers"] .wgh-ft-logo img { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-engineers.webp?v=6"); }
html.wgh-pal [data-wgh-ft="shop"] .wgh-ft-logo img { content: url("https://media.whitegoodshelp.co.uk/wgh-brand/logo-shop.webp?v=6"); }
.wgh-ft-sw { display: flex; gap: 4px; padding: 4px; border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; }
.wgh-ft-sw a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 600; line-height: 1.2; color: #0B1949 !important; white-space: nowrap; transition: background-color .15s ease; }
.wgh-ft-sw a .wgh-ft-ic { width: 15px; height: 15px; color: var(--c); }
.wgh-ft-sw a:hover { background: #F3F4F6; }
.wgh-ft-sw a.is-on { background: var(--c); color: #fff !important; }
.wgh-ft-sw a.is-on .wgh-ft-ic { color: #fff; }
.wgh-ft-sw .s { display: none; }
.wgh-ft-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-top: 40px; }
.wgh-ft-box { display: flex; flex-direction: column; align-items: flex-start; align-self: start; padding: 22px; border: 1px solid #E5E7EB; border-top: 3px solid var(--fa); border-radius: 14px; background: #fff; }
.wgh-ft-bd { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 50%; background: var(--ft); color: var(--fa); }
.wgh-ft-bd .wgh-ft-ic { width: 17px; height: 17px; }
.wgh-ft-kick { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fa); }
.wgh-ft-box b { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #0B1949; }
.wgh-ft-box p { margin: 6px 0 16px; font-size: 14.5px; line-height: 1.55; color: rgba(11, 25, 73, 0.68); }
.wgh-ft-btn { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 9px; background: var(--fb); color: #fff !important; font-size: 15px; font-weight: 600; transition: background-color .15s ease; }
.wgh-ft-btn .wgh-ft-ic { width: 13px; height: 13px; transition: transform .15s ease; }
.wgh-ft-btn:hover { background: color-mix(in srgb, var(--fb) 86%, #000); }
.wgh-ft-btn:hover .wgh-ft-ic { transform: translateX(3px); }
.wgh-ft-col h4 { margin: 0 0 16px; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: #0B1949; }
.wgh-ft-col ul { list-style: none; margin: 0; padding: 0; }
.wgh-ft-col li { margin: 0 0 11px; padding: 0; line-height: 1.4; list-style: none; }
.wgh-ft-col li::before, .wgh-ft-col li::marker { content: none; }
.wgh-ft-col li a, .wgh-ft-col li button { display: inline; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 400; color: rgba(11, 25, 73, 0.72) !important; cursor: pointer; transition: color .15s ease; }
.wgh-ft-col li a:hover, .wgh-ft-col li button:hover { color: var(--wgh-btn, #0B1949) !important; }
.wgh-ft-bot { display: flex; align-items: center; gap: 14px 24px; margin-top: 44px; padding: 20px 0 26px; border-top: 1px solid #E5E7EB; font-size: 13.5px; color: rgba(11, 25, 73, 0.55); }
.wgh-ft-cp { flex: 1; min-width: 0; }
.wgh-ft-cp > span { display: block; }
.wgh-ft-note { margin-top: 4px; font-size: 12.5px; color: rgba(11, 25, 73, 0.5); }
.wgh-ft-pay img { display: block; height: 26px; width: auto; }
.wgh-ft-soc { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border: 1px solid #E5E7EB; border-radius: 50%; background: #fff; color: #0B1949 !important; }
.wgh-ft-soc .wgh-ft-ic { width: 15px; height: 15px; }
.wgh-ft-soc:hover { border-color: var(--wgh-accent, #0B1949); color: var(--wgh-btn, #0B1949) !important; }
@media (max-width: 1100px) {
	.wgh-ft-top { flex-direction: column; align-items: flex-start; }
	.wgh-ft-grid { grid-template-columns: repeat(3, 1fr); }
	.wgh-ft-box { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
	.wgh-ft-box .wgh-ft-bd { margin: 0; }
	.wgh-ft-box p { flex-basis: 100%; margin: 0 0 6px; }
}
@media (max-width: 767px) {
	.wgh-ft-top { align-items: stretch; gap: 18px; padding: 26px 0 22px; }
	.wgh-ft-logo img { width: 200px !important; }
	.wgh-ft-sw { display: grid; grid-template-columns: repeat(4, 1fr); }
	.wgh-ft-sw a { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; font-size: 12.5px; }
	.wgh-ft-sw .l { display: none; }
	.wgh-ft-sw .s { display: inline; }
	.wgh-ft-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 26px; }
	.wgh-ft-box { display: flex; flex-direction: column; align-items: flex-start; }
	.wgh-ft-box .wgh-ft-bd { margin-bottom: 10px; }
	.wgh-ft-btn { width: 100%; justify-content: center; }
	.wgh-ft-bot { flex-wrap: wrap; margin-top: 32px; }
	.wgh-ft-cp { flex-basis: 100%; }
}

/* One Inter everywhere (2026-10-15): the same variable Inter file the React sites use, under a name every site
   recognises; WordPress sites render it with the same antialiased smoothing as the React sites. */
@font-face { font-family: "WGH Inter"; src: url("fonts/inter-latin.woff2") format("woff2"), url("fonts/inter-variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
html.wgh-pal body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.wgh-ft, .wgh-ft :is(a, b, p, span, h4, li, button, small) { font-family: "WGH Inter", "InterLocal", "Inter", inter, system-ui, sans-serif !important; }

/* Shared footer: column headings are buttons (fold-outs on phones, plain headings on desktop); label hidden on desktop */
.wgh-ft-lab { display: none; }
.wgh-ft .wgh-ft-colbtn { display: block; width: auto; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; line-height: inherit; letter-spacing: 0; text-align: left; text-transform: none; color: #0B1949 !important; cursor: default; pointer-events: none; box-shadow: none; }
.wgh-ft .wgh-ft-colbtn .wgh-ft-ic { display: none; }
.wgh-ft-cp .wgh-ft-note { margin-top: 6px; }

/* Phones (layout M4): box first, then the site switcher, fold-out link groups, centred logo, centred bottom bar */
@media (max-width: 767px) {
	.wgh-ft .wgh-ft-in { display: flex; flex-direction: column; }
	.wgh-ft .wgh-ft-top, .wgh-ft .wgh-ft-grid { display: contents; }
	.wgh-ft .wgh-ft-box { order: 1; margin-top: 26px; flex-direction: column; align-items: flex-start; }
	.wgh-ft .wgh-ft-lab { display: block; order: 2; margin: 26px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(11, 25, 73, 0.5); }
	.wgh-ft .wgh-ft-sw { order: 3; }
	.wgh-ft .wgh-ft-col { order: 4; border-bottom: 1px solid #E5E7EB; }
	.wgh-ft .wgh-ft-grid > .wgh-ft-col:nth-child(2) { margin-top: 22px; border-top: 1px solid #E5E7EB; }
	.wgh-ft .wgh-ft-col h4 { margin: 0; }
	.wgh-ft .wgh-ft-colbtn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; font-size: 15.5px; cursor: pointer; pointer-events: auto; }
	.wgh-ft .wgh-ft-colbtn .wgh-ft-ic { display: block; width: 13px; height: 13px; color: rgba(11, 25, 73, 0.45); transition: transform .2s ease; }
	.wgh-ft .wgh-ft-col.is-open .wgh-ft-colbtn .wgh-ft-ic { transform: rotate(180deg); }
	.wgh-ft .wgh-ft-col ul { display: none; padding: 0 0 14px; }
	.wgh-ft .wgh-ft-col.is-open ul { display: block; }
	.wgh-ft .wgh-ft-col li { margin: 0; }
	.wgh-ft .wgh-ft-col li a, .wgh-ft .wgh-ft-col li button { display: block; padding: 9px 0; }
	.wgh-ft .wgh-ft-logo { order: 5; margin: 32px auto 0; }
	.wgh-ft .wgh-ft-logo img { width: 260px !important; }
	.wgh-ft .wgh-ft-bot { order: 6; flex-direction: column; align-items: center; gap: 16px; margin-top: 26px; text-align: center; }
	.wgh-ft .wgh-ft-cp { flex: none; }
	.wgh-ft .wgh-ft-cp .wgh-ft-note { margin-top: 10px; }
	.wgh-ft .wgh-ft-btn { width: 100%; justify-content: center; }
}

/* Footer payment logos: small strip, not giant tiles */
.wgh-ft .wgh-ft-pay { flex: none; }
.wgh-ft .wgh-ft-pay img { display: block !important; width: auto !important; max-width: 260px !important; height: 26px !important; object-fit: contain; }
@media (max-width: 767px) { .wgh-ft .wgh-ft-pay img { height: 24px !important; max-width: 100% !important; } }
.wgh-ft .wgh-ft-pay img { height: 40px !important; max-width: 420px !important; }
@media (max-width: 767px) { .wgh-ft .wgh-ft-pay img { height: 32px !important; max-width: 100% !important; } }


/* Sign-in / sign-up buttons are never "forum" links (their fallback URL is the forum's sign-in page): they keep the
   current area's colour, one shade deeper on hover. Checkout sign-in card icon in the area colour. */
html.wgh-pal a[data-wgh-auth].wgh-btn-outline:is(:hover, :focus-visible) { background: var(--wgh-btn) !important; border-color: var(--wgh-btn) !important; color: #fff !important; }
html.wgh-pal a[data-wgh-auth]:is(.wgh-btn-primary, .wh-btn-orange):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--wgh-btn) 86%, #000) !important; border-color: color-mix(in srgb, var(--wgh-btn) 86%, #000) !important; color: #fff !important; }
html.wgh-pal .wgh-co-signin .wgh-help-ic { background: color-mix(in srgb, var(--wgh-accent) 12%, #fff) !important; color: var(--wgh-accent) !important; }

/* Signed-out account button, all sites (2026-10-15): the same round avatar, now a white circle with a thin grey border and
   the Font Awesome user icon in navy, so it suits every area. (Replaces the earlier "Account / Sign in" card.) */
html.wgh-pal [aria-label="Sign in or create an account"] { border: 1px solid #DEE2EA !important; border-radius: 50% !important; background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20448%20512'%3E%3Cpath%20fill%3D'%230B1949'%20d%3D'M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z'%2F%3E%3C%2Fsvg%3E") no-repeat center / 17px 17px !important; box-shadow: none !important; }
html.wgh-pal [aria-label="Sign in or create an account"] > svg { opacity: 0 !important; }
html.wgh-pal [aria-label="Sign in or create an account"]:hover, html.wgh-pal [aria-label="Sign in or create an account"]:focus-visible { border-color: var(--wgh-accent, #0B1949) !important; }

/* Signed-out avatar, option C (2026-10-15): pale circle in the area tint, Font Awesome user icon in the area colour,
   no border; a thin ring in the area colour on hover. */
html.wgh-pal [aria-label="Sign in or create an account"] { border: 0 !important; border-radius: 50% !important; background: #ebeef8 url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20448%20512'%3E%3Cpath%20fill%3D'%231E40AF'%20d%3D'M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z'%2F%3E%3C%2Fsvg%3E") no-repeat center / 18px 18px !important; box-shadow: none !important; transition: box-shadow .15s ease !important; }
html.wgh-pal [aria-label="Sign in or create an account"] > svg { opacity: 0 !important; }
html.wgh-pal [aria-label="Sign in or create an account"]:hover, html.wgh-pal [aria-label="Sign in or create an account"]:focus-visible { box-shadow: inset 0 0 0 2px var(--wgh-accent, #1E40AF) !important; }
html.wgh-pal[data-wgh-site="articles"] [aria-label="Sign in or create an account"] { background-color: #ebeef8 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20448%20512'%3E%3Cpath%20fill%3D'%231E40AF'%20d%3D'M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z'%2F%3E%3C%2Fsvg%3E") !important; }
html.wgh-pal[data-wgh-site="forum"] [aria-label="Sign in or create an account"] { background-color: #e9f5f8 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20448%20512'%3E%3Cpath%20fill%3D'%230891B2'%20d%3D'M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z'%2F%3E%3C%2Fsvg%3E") !important; }
html.wgh-pal[data-wgh-site="engineers"] [aria-label="Sign in or create an account"] { background-color: #eaf7ef !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20448%20512'%3E%3Cpath%20fill%3D'%2316A34A'%20d%3D'M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z'%2F%3E%3C%2Fsvg%3E") !important; }
html.wgh-pal[data-wgh-site="shop"] [aria-label="Sign in or create an account"] { background-color: #fff1e6 !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20448%20512'%3E%3Cpath%20fill%3D'%23FF6600'%20d%3D'M224%20256A128%20128%200%201%200%20224%200a128%20128%200%201%200%200%20256zm-45.7%2048C79.8%20304%200%20383.8%200%20482.3C0%20498.7%2013.3%20512%2029.7%20512l388.6%200c16.4%200%2029.7-13.3%2029.7-29.7C448%20383.8%20368.2%20304%20269.7%20304l-91.4%200z'%2F%3E%3C%2Fsvg%3E") !important; }

/* Footer logo a little bigger on desktop and tablet (phones stay 260px) */
@media (min-width: 768px) { .wgh-ft .wgh-ft-logo img { width: 270px !important; } }

/* Articles home: the three tool cards stack on tablets instead of running off the screen */
html.wgh-pal .wh-hub-more > .wh-hub-card { min-width: 0; }
@media (max-width: 991px) { html.wgh-pal .wh-hub-more { grid-template-columns: minmax(0, 1fr) !important; } }

/* Signed-out avatar: a soft 1px ring before hover */
html.wgh-pal [aria-label="Sign in or create an account"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wgh-accent, #1E40AF) 30%, #fff) !important; }
html.wgh-pal [aria-label="Sign in or create an account"]:hover, html.wgh-pal [aria-label="Sign in or create an account"]:focus-visible { box-shadow: inset 0 0 0 2px var(--wgh-accent, #1E40AF) !important; }

/* Bands on the hero background (2026-10-15): the Engineers reviews wall and the Forum categories use the same white +
   corner glows as their hero (each area's own accent and second orb), with the hero grid (.wh-grid-lines) on top. */
html.wgh-pal .wh-band-hero {
	background:
		radial-gradient(640px 460px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 30%, transparent), transparent 72%),
		radial-gradient(560px 420px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 26%, transparent), transparent 72%),
		#fff !important;
	border-color: #e3e9f2 !important;
}
@media (max-width: 767px) {
	html.wgh-pal .wh-band-hero {
		background:
			radial-gradient(260px 220px at 100% 0%, color-mix(in srgb, var(--wgh-accent) 24%, transparent), transparent 72%),
			radial-gradient(260px 240px at 0% 100%, color-mix(in srgb, var(--wgh-orb2) 18%, transparent), transparent 72%),
			#fff !important;
	}
}

/* Signed-out avatar on the forum: its own blue gradient person sat on top of the shared circle; hide it like the svg. */
html.wgh-pal [aria-label="Sign in or create an account"] > span { opacity: 0 !important; background: none !important; }
/* Phones: the forum header's photo-avatar ring (white + navy edge + drop shadow) also caught the signed-out circle while
   Clerk loads; the signed-out circle keeps the soft area-tinted ring everywhere. */
@media (max-width: 991px) {
	html.wgh-pal .wgh-acct-slot button[aria-label="Sign in or create an account"], html.wgh-pal .wgh-acct-slot button[aria-label="Sign in or create an account"]:has(.wgh-av-pre) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wgh-accent, #1E40AF) 30%, #fff) !important; }
	html.wgh-pal .wgh-acct-slot button[aria-label="Sign in or create an account"]:hover { box-shadow: inset 0 0 0 2px var(--wgh-accent, #1E40AF) !important; }
}

/* Hero trust bar on phones (2026-10-16) (and tablets / small laptops up to 1279px): the three items in a row, each with its tick above and the text centred,
   thin dividers between, instead of a stacked list. All four sites. */
@media (max-width: 1279px) {
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; float: none !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 2px 4px !important; text-align: center !important; border: 0 !important; float: none !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li + li { border-left: 1px solid #e1e8f1 !important; border-top: 0 !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li > svg { width: 26px !important; height: 26px !important; margin: 0 !important; flex: none !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li > span { display: block !important; min-width: 0; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li b { display: block !important; font-size: 13.5px !important; line-height: 1.25 !important; text-wrap: balance; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li small { display: block !important; margin-top: 3px !important; font-size: 12px !important; line-height: 1.35 !important; text-wrap: balance; }
}

/* Hero trust bar on wide desktop (2026-10-16): always one row of three. Items can shrink and their small line
   wraps to two lines when space is tight, instead of the third item dropping to a new row. */
@media (min-width: 1280px) {
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) { display: flex !important; flex-wrap: nowrap !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li { flex: 0 1 auto !important; min-width: 0 !important; padding: 4px 20px !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li:first-child { padding-left: 0 !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li:last-child { padding-right: 0 !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li > span { min-width: 0 !important; }
	html.wgh-pal :is(.wgh-trust, .wh-hub-hero-trust) li small { text-wrap: balance; }
}

/* Section headings and their subtext, the same on every site (2026-10-16): Find an Engineer's sizes - heading 36px
   desktop / 27.2px phone, subtext 16.8px on 1.625 in navy at 78%. Shop used 40px / 20px, Articles 40px / 15.7px. */
html.wgh-pal :is(.wh-section-heading, .wh-posts-toolbar-title, .title-row) :is(h2, h3) { font-size: clamp(1.7rem, 2.6vw, 2.25rem) !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; }
html.wgh-pal :is(.wh-section-heading p, .title-row .wgh-section-sub, .title-row p) { font-size: 16.8px !important; line-height: 1.625 !important; color: rgba(11, 25, 73, 0.78) !important; }

/* Articles home "Whitegoods Help" panel on phones (2026-10-16): one area per row, laid out like the "Also on
   Whitegoods Help" rows - icon left, title (in the area colour) and line in the middle, arrow on the right. */
@media (max-width: 767px) {
	html.wgh-pal .wh-hub-hero-panel { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
	html.wgh-pal .wh-hub-hero-panel > .wh-hub-hero-panel-head { grid-column: 1 / -1; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ic t go" "ic s go"; column-gap: 14px; row-gap: 2px; align-items: center; min-height: 0 !important; padding: 14px 16px !important; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area .wh-hub-area-ic { grid-area: ic; width: 44px !important; height: 44px !important; margin: 0 !important; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area > b { grid-area: t; margin: 0 !important; font-size: 16.5px !important; line-height: 1.25 !important; color: var(--c, currentColor) !important; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area > small { grid-area: s; margin: 0 !important; font-size: 14px !important; line-height: 1.35 !important; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area .wh-hub-area-go { grid-area: go; margin: 0 !important; font-size: 0 !important; gap: 0 !important; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area .wh-hub-area-go svg { width: 16px !important; height: 16px !important; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area.is-articles { --c: #1E40AF; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area.is-forum { --c: #0891B2; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area.is-engineers { --c: #16A34A; }
	html.wgh-pal .wh-hub-hero-panel .wh-hub-area.is-shop { --c: #FF6600; }
}

/* Touch screens (menu.js adds html.wgh-tap-menus): category menus open on tap only, never on hover or focus. */
html.wgh-tap-menus body nav.nav-container li.wgh-has-mega:hover:not(.is-open) > .wgh-mega,
html.wgh-tap-menus body nav.nav-container li.wgh-has-mega:focus-within:not(.is-open) > .wgh-mega { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
html.wgh-tap-menus body nav.nav-container li.wgh-has-mega.is-open > .wgh-mega { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; transition-delay: 0s !important; }
html.wgh-tap-menus body nav.container-fluid.nav-container .menu-main-menu-container > ul.menu > li.wgh-has-mega.is-open > a::after { transform: rotate(180deg) !important; }
/* Articles ask box: the Engineers & owners reply line centred, at every width. */
html.wgh-pal .pv-ask-foot { justify-content: center !important; text-align: center !important; }

/* Articles ask box demo (2026-10-16): a mouse pointer glides onto "Post question" and clicks it. */
html.wgh-pal .pv-ask { position: relative; }
html.wgh-pal .pv-ask .pv-ask-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 15px; height: 22px; pointer-events: none; opacity: 0; transition: transform .75s cubic-bezier(.45, 0, .2, 1), opacity .2s ease; filter: drop-shadow(0 2px 3px rgba(11, 25, 73, .35)); }
html.wgh-pal .pv-ask .pv-ask-cursor.is-on { opacity: 1; }
html.wgh-pal .pv-ask .pv-ask-cursor svg { display: block; width: 15px; height: 22px; overflow: visible; fill: #0B1949; stroke: #fff; stroke-width: 34px; paint-order: stroke; stroke-linejoin: round; transform-origin: 10% 8%; transition: transform .12s ease; }
html.wgh-pal .pv-ask .pv-ask-cursor.is-click svg { transform: scale(.82); }
html.wgh-pal .pv-ask .pv-ask-cursor::before { content: ""; position: absolute; left: -10px; top: -9px; width: 20px; height: 20px; border-radius: 50%; background: rgba(8, 145, 178, .35); opacity: 0; transform: scale(0); }
html.wgh-pal .pv-ask .pv-ask-cursor.is-click::before { animation: wgh-pv-click .45s ease-out; }
@keyframes wgh-pv-click { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.7); } }

/* New area logos (2026-10-16, v5): the washing machine and speech bubble rise a little above the wordmark, so the
   wordmark ("Whitegoods Help" + tagline) sits slightly below the middle of the image: 58% of the way down
   (Articles, Forum, Engineers) and 59% (Shop). Wherever the logo is centred against something beside it (the header
   buttons, the footer area switch), it gets a negative top margin of (2 x 0.58 - 1) of its height, so whatever centres
   it now centres the wordmark exactly; the bubble simply rises into the space above.
   Same widths as before: about 319px in the desktop header, 166px on phones, 230px in the footer. */
html.wgh-pal :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { --wgh-lh: 66px; --wgh-lift: 0.160; height: var(--wgh-lh) !important; width: auto !important; max-width: none !important; aspect-ratio: 959 / 200 !important; object-fit: contain; margin-top: calc(var(--wgh-lh) * var(--wgh-lift) * -1) !important; margin-bottom: 0 !important; }
html.wgh-pal[data-wgh-site="forum"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { --wgh-lift: 0.161; aspect-ratio: 967 / 200 !important; }
html.wgh-pal[data-wgh-site="engineers"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { --wgh-lift: 0.157; aspect-ratio: 969 / 200 !important; }
html.wgh-pal[data-wgh-site="shop"] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { --wgh-lift: 0.187; aspect-ratio: 966 / 200 !important; }
@media (max-width: 991px) { html.wgh-pal :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { --wgh-lh: 34.4px; } }
html.wgh-pal :is(.wgh-hdr .wgh-logo, body .header a#logo-main) { overflow: visible !important; }

/* Footer: the logo sits beside the area switch and is centred against it, so it takes the same lift. */
html.wgh-pal .wgh-ft-logo img { --wgh-fh: 47.6px; --wgh-lift: 0.160; width: auto !important; height: var(--wgh-fh) !important; aspect-ratio: 959 / 200 !important; max-width: 100%; object-fit: contain; margin-top: calc(var(--wgh-fh) * var(--wgh-lift) * -1) !important; }
html.wgh-pal [data-wgh-ft="forum"] .wgh-ft-logo img { --wgh-lift: 0.161; aspect-ratio: 967 / 200 !important; }
html.wgh-pal [data-wgh-ft="engineers"] .wgh-ft-logo img { --wgh-lift: 0.157; aspect-ratio: 969 / 200 !important; }
html.wgh-pal [data-wgh-ft="shop"] .wgh-ft-logo img { --wgh-lift: 0.187; aspect-ratio: 966 / 200 !important; }
html.wgh-pal footer img[src*="logo-footer"] { aspect-ratio: 959 / 200 !important; }
/* Shop header: the logo link had fixed heights at some widths, so the logo was not centred as a whole; it now takes the logo own height. */
html.wgh-pal body .header a#logo-main { display: block !important; margin-top: 0 !important; margin-bottom: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; line-height: 0 !important; }

/* Logos v6 (2026-10-16): the four area logos are now identical apart from colour (959 x 200, wordmark centre 58% of
   the way down), so every area uses the same size and the same lift. */
html.wgh-pal[data-wgh-site] :is(.wgh-hdr .wgh-logo > img, body .header a#logo-main > img) { --wgh-lift: 0.160; aspect-ratio: 959 / 200 !important; }
html.wgh-pal [data-wgh-ft] .wgh-ft-logo img, html.wgh-pal .wgh-ft-logo img { --wgh-lift: 0.160; aspect-ratio: 959 / 200 !important; }
/* Footer logo a little bigger (2026-10-16): 60px tall on desktop, 52px on phones (was 47.6px). */
html.wgh-pal [data-wgh-ft] .wgh-ft-logo img, html.wgh-pal .wgh-ft-logo img { --wgh-fh: 60px; }
@media (max-width: 767px) { html.wgh-pal [data-wgh-ft] .wgh-ft-logo img, html.wgh-pal .wgh-ft-logo img { --wgh-fh: 52px; } }
html.wgh-pal .wgh-ft-logo { max-width: none !important; }

/* 404 page, all four areas (2026-10-16): one central "oops" card between each site's own header and footer, in the
   area colour. Markup: section.wgh-404 > .wgh-404-card (icon, code, h1, p, form.wgh-404-search, .wgh-404-links). */
html.wgh-pal { --w4c: #1E40AF; --w4h: #1A3797; --w4t: #EBEEF8; }
html.wgh-pal[data-wgh-site="forum"] { --w4c: #0891B2; --w4h: #077D99; --w4t: #E9F5F8; }
html.wgh-pal[data-wgh-site="engineers"] { --w4c: #16A34A; --w4h: #138C40; --w4t: #EAF7EF; }
html.wgh-pal[data-wgh-site="shop"] { --w4c: #FF6600; --w4h: #E65C00; --w4t: #FFF1E6; }
html.wgh-pal body.error404 { display: block !important; }
html.wgh-pal .wgh-404 { display: flex; align-items: center; justify-content: center; min-height: 0; margin: 0; padding: 128px 20px; background: #F5F7FB; }
html.wgh-pal .wgh-404-card { width: 100%; max-width: 560px; padding: 44px 40px 40px; border: 1px solid #E3E7EF; border-radius: 20px; background: #fff; box-shadow: 0 24px 50px -30px rgba(11, 25, 73, 0.25); text-align: center; }
html.wgh-pal .wgh-404-card > * { float: none !important; }
html.wgh-pal .wgh-404-ic { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 0 18px; border-radius: 18px; background: var(--w4t); color: var(--w4c); }
html.wgh-pal .wgh-404-ic svg { width: 30px; height: 30px; }
html.wgh-pal .wgh-404-code { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--w4c); }
html.wgh-pal .wgh-404-card h1 { margin: 0 0 12px !important; padding: 0 !important; font-size: 30px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #0B1949 !important; text-wrap: balance; }
html.wgh-pal .wgh-404-card p { margin: 0 auto 24px !important; max-width: 420px; font-size: 16.8px !important; line-height: 1.6 !important; color: rgba(11, 25, 73, 0.72) !important; text-wrap: pretty; }
html.wgh-pal .wgh-404-search { position: relative; display: flex !important; gap: 8px; width: 100% !important; margin: 0 0 16px !important; padding: 0 !important; }
html.wgh-pal .wgh-404-fic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); display: flex; color: var(--w4c); pointer-events: none; }
html.wgh-pal .wgh-404-fic svg { width: 16px; height: 16px; }
html.wgh-pal .wgh-404-search input[type="search"] { flex: 1 1 auto; min-width: 0; width: auto !important; height: 50px !important; margin: 0 !important; padding: 0 14px 0 42px !important; border: 1px solid #DEE2EA !important; border-radius: 10px !important; background: #F6F8FC !important; box-shadow: none !important; font: inherit; font-size: 16px !important; color: #0B1949 !important; -webkit-appearance: none; appearance: none; }
html.wgh-pal .wgh-404-search input[type="search"]::placeholder { text-transform: none !important; color: rgba(11, 25, 73, 0.5); }
html.wgh-pal .wgh-404-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
html.wgh-pal .wgh-404-search input[type="search"]:focus { outline: none !important; border-color: var(--w4c) !important; background: #fff !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--w4c) 18%, transparent) !important; }
html.wgh-pal .wgh-404-search button { flex: none; height: 50px !important; margin: 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 10px !important; background: var(--w4c) !important; color: #fff !important; font: inherit; font-size: 15.5px !important; font-weight: 600 !important; cursor: pointer; }
html.wgh-pal .wgh-404-search button:hover { background: var(--w4h) !important; }
html.wgh-pal .wgh-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; clear: both; }
html.wgh-pal .wgh-404-links a { display: inline-flex !important; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 18px !important; border-radius: 10px !important; font-size: 15.5px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; transition: background-color .15s, border-color .15s; }
html.wgh-pal .wgh-404-links a svg { width: 15px; height: 15px; flex: none; }
html.wgh-pal .wgh-404-links .wgh-404-b1 { background: var(--w4c) !important; color: #fff !important; border: 1px solid var(--w4c) !important; }
html.wgh-pal .wgh-404-links .wgh-404-b1:hover { background: var(--w4h) !important; border-color: var(--w4h) !important; }
html.wgh-pal .wgh-404-links .wgh-404-b2 { background: #fff !important; color: var(--w4c) !important; border: 1px solid #DEE2EA !important; }
html.wgh-pal .wgh-404-links .wgh-404-b2:hover { border-color: var(--w4c) !important; }
@media (max-width: 767px) {
	html.wgh-pal .wgh-404 { min-height: 0; padding: 64px 20px; }
	html.wgh-pal .wgh-404-card { padding: 32px 22px 26px; border-radius: 16px; }
	html.wgh-pal .wgh-404-card h1 { font-size: 26px !important; }
	html.wgh-pal .wgh-404-links { flex-direction: column; }
	html.wgh-pal .wgh-404-links a { width: 100%; }
}

/* Site rail (2026-10-20, menu.js): the four sites on the left edge of desktop pages once the site bar has scrolled
   away. Icons only; hover (or keyboard focus) slides the names out. The current site is filled in its colour; the
   shop icon shows the basket count on the other sites. */
.wgh-rail { position: fixed; left: 0; top: 50%; z-index: 9990; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; margin: 0; background: #fff; border: 1px solid #e2e8f0; border-left: 0; border-radius: 0 16px 16px 0; box-shadow: 0 10px 30px rgba(11, 25, 73, .12); transform: translate(-110%, -50%); opacity: 0; visibility: hidden; transition: transform .35s ease, opacity .35s, visibility 0s .35s; font-family: "WGH Inter", "InterLocal", Inter, system-ui, sans-serif; box-sizing: border-box; }
.wgh-rail.is-on { transform: translate(0, -50%); opacity: 1; visibility: visible; transition: transform .35s ease, opacity .35s, visibility 0s; }
.wgh-rail .wgh-rail-a { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 11px; text-decoration: none !important; color: #0B1949 !important; font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; overflow: hidden; background: transparent; transition: width .3s ease, padding .3s, background-color .2s; }
.wgh-rail .wgh-rail-a svg { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; color: var(--c); fill: currentColor; }
.wgh-rail .wgh-rail-t { display: block; max-width: 0; opacity: 0; overflow: hidden; text-align: left; transition: max-width .3s ease, opacity .2s, margin .3s; }
.wgh-rail .wgh-rail-t small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: #FF6600; }
.wgh-rail:hover .wgh-rail-a, .wgh-rail:focus-within .wgh-rail-a { width: 214px; justify-content: flex-start; padding: 0 13px; }
.wgh-rail:hover .wgh-rail-t, .wgh-rail:focus-within .wgh-rail-t { max-width: 170px; opacity: 1; margin-left: 10px; }
.wgh-rail .wgh-rail-a:hover, .wgh-rail .wgh-rail-a:focus-visible { background: #f1f5fb; outline: none; }
.wgh-rail .wgh-rail-a.is-here { background: var(--c); color: #fff !important; }
.wgh-rail .wgh-rail-a.is-here svg { color: #fff; }
.wgh-rail .wgh-rail-n { position: absolute; top: 3px; left: 25px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #FF6600; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.wgh-rail .wgh-rail-n { transition: opacity .2s; }
.wgh-rail:hover .wgh-rail-n, .wgh-rail:focus-within .wgh-rail-n { opacity: 0; } /* open: the line under the name says it */
@media (max-width: 991.98px), print { .wgh-rail { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .wgh-rail, .wgh-rail .wgh-rail-a, .wgh-rail .wgh-rail-t { transition: none; } }

/* Phones (2026-10-21): the footer help box (icon, label, title, text) centred on every site; the button stays full width. */
@media (max-width: 767px) {
	.wgh-ft .wgh-ft-box { align-items: center; text-align: center; }
	.wgh-ft .wgh-ft-box .wgh-ft-btn { align-self: stretch; justify-content: center; }
}