/* EDD header redesign v18 (2026-10-20; v17 + Spares dropdown rework: appliances, A-Z brands, part types band;  v11 + basket count position in the scrolled bar, homepage product-finder hover flicker fix;  v10 + Cookie-Script floating tab hidden, replaced by a "Cookie settings" footer link;  v9 + 20px gap between the header and the page, as the old header had;  v8 + phone search box stays focusable when closed so iPhones open the keyboard on the first tap;  v7 + phone number and red panel moved right into the side margin;  v3 design, red panel starts 10px further right, no Trade button, Advice centre in the top bar;  v2 + desktop category bar hidden on phones; v1 + menu link layout, hidden SEO menu, search tweaks, phone 179px). Pairs with the new Magento_Theme/templates/html/header.phtml.
   Plain CSS (no Tailwind build). Loaded from Magento_Theme/layout/default_head_blocks.xml.
   To change it, save a NEW file name (edd-header-v2.css) and update the layout line, because
   Cloudflare caches /media for a long time.

   Rule that must not be broken: the header never changes height inside the page. The reserved space is
   the header height plus a 20px gap (184+20 desktop, 67+20 phones). .page-header is
   fixed and the page reserves its full height, so the slim scrolled bar causes no layout shift (CLS). */

.edd-h{--r:#e30613;--rd:#c4050f;--ink:#1d1f21;--nav:#403f3f;--steel:#f2f3f4;--rule:#dadde0;--muted:#4a5056;
  position:relative;font-family:inherit;color:var(--ink);background:#fff}
.edd-h a{text-decoration:none}
.edd-h a:focus-visible,.edd-h button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.edd-h-phone:focus-visible,.edd-h-nav a:focus-visible{outline-color:#fff!important}

/* Fixed header with its height reserved. :has() keeps this to pages using the new header. */
.page-header:has(#header.edd-h){position:fixed!important;top:0;left:0;right:0;z-index:50;background:#fff}
.page-wrapper:has(#header.edd-h){padding-top:179px}
@media (min-width:1024px){.page-wrapper:has(#header.edd-h){padding-top:204px}}

.edd-h nav.navigation.sr-only{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}

.edd-h-wrap{max-width:1260px;margin:0 auto;padding:0 16px;box-sizing:border-box}

/* ---------- Top bar (desktop only) ---------- */
.edd-h-util{display:none}
.edd-h-trust{display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none;font-size:12px;font-weight:600}
.edd-h-trust li{display:flex;align-items:center;gap:6px;margin:0}
.edd-h-trust li>svg{color:var(--r);flex:0 0 auto}
.edd-h-trust a,.edd-h-links a{color:var(--ink)}
.edd-h-trust a:hover,.edd-h-links a:hover{color:var(--r)}
.edd-h-tp{display:flex;align-items:center;gap:7px}
.edd-h-links{display:flex;align-items:center;gap:22px;font-size:12px}
.edd-h-links .edd-h-counter{font-weight:700;color:var(--rd)}

/* ---------- Main row: shared ---------- */
.edd-h-main{position:relative;display:grid;align-items:center;background:#fff;border-bottom:1px solid var(--rule);box-sizing:border-box}
.edd-h-logo{grid-area:logo}
.edd-h-logo>div{padding-left:0!important}
.edd-h-logo a{margin:0!important;display:block}
.edd-h-logo img{display:block;height:auto!important;max-height:none!important;max-width:none!important;transition:none!important}
.edd-h-search{grid-area:search;min-width:0}
.edd-h-cats,.edd-h-msearch{display:none}
.edd-h-icons{grid-area:icons;display:flex;align-items:center}
.edd-h-icon{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:48px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);font-family:inherit;font-size:12px;font-weight:600;line-height:1.2}
.edd-h-icon:hover{color:var(--r)}
.edd-h-lbl{white-space:nowrap}
.edd-h-lbl .price{font:inherit!important;color:inherit!important}
.edd-h-badge{position:absolute;top:-7px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;
  border-radius:9px;background:var(--r);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.edd-h-phone{grid-area:phone;display:flex;color:var(--rd)}
.edd-h-phone-num{font-weight:700;line-height:1;letter-spacing:0;white-space:nowrap}
.edd-h-phone-ico,.edd-h-phone-hrs-m{display:none}

/* Amasty search box, restyled to the pill design */
.edd-h-search>div{width:100%}
.edd-h-search #search_mini_form{width:100%}
.edd-h-search #search{height:50px!important;line-height:46px!important;border:2px solid #c9ced3!important;border-radius:999px!important;
  padding:0 52px 0 22px!important;font-size:15px!important;color:var(--ink)!important;background:#fff!important;box-sizing:border-box!important}
.edd-h-search #search::placeholder{color:#6b7178}
.edd-h-search #search:focus{border-color:var(--ink)!important}
.edd-h-search #search_mini_form button[type=submit]{top:50%!important;left:auto!important;right:14px!important;transform:translateY(-50%)}
.edd-h-search .search-icn{top:50%!important;right:16px!important;transform:translateY(-50%)}

/* ---------- Category bar: shared ---------- */
.edd-h-nav{background:var(--nav)}
.edd-h-parts{display:none}

/* ================= Desktop (1024px and up) ================= */
@media (min-width:1024px){
  .edd-h-util{display:block;height:32px;background:var(--steel)}
  .edd-h-util-in{height:32px;display:flex;align-items:center;justify-content:space-between}

  .edd-h-main{height:96px;grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"logo cats search icons phone";
    padding-left:max(16px,calc((100% - 1228px) / 2))}
  .edd-h-logo{margin-right:32px}
  .edd-h-logo img{width:124px!important}
  .edd-h-icons{gap:14px;margin:0 24px 0 24px}
  .edd-h-phone{align-self:stretch;flex-direction:column;justify-content:center;gap:3px;background:var(--r);color:#fff;
    padding:0 max(16px,calc((100vw - 1228px) / 3)) 0 50px;clip-path:polygon(38px 0,100% 0,100% 100%,0 100%)}
  .edd-h-phone:hover{background:var(--rd);color:#fff}
  .edd-h-phone-num{font-size:40px}
  .edd-h-phone-hrs-d{font-size:12px;font-weight:600;white-space:nowrap}

  .edd-h-nav-in{display:flex;align-items:center;height:56px}
  .edd-h-menu{flex:1 1 auto;min-width:0;padding-right:28px}
  .edd-h-menu .navigation{min-height:0!important;background:transparent!important;width:100%}
  .edd-h-menu div[x-ref="navDesktop"]{background:transparent!important;width:100%}
  .edd-h-menu div[x-ref="navDesktop"] nav{max-width:none!important;padding:0!important;margin:0!important;justify-content:flex-start!important}
  .edd-h-menu div[x-ref="navDesktop"] nav>ul{width:100%;flex-wrap:nowrap!important;justify-content:space-between!important}
  .edd-h-menu div[x-ref="navDesktop"] nav>ul>li{max-width:none!important;flex:0 0 auto!important;background:transparent!important}
  .edd-h-menu div[x-ref="navDesktop"] nav>ul>li>div>a{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px;height:56px;
    padding:0 4px!important;font-size:14px!important;white-space:nowrap;color:#fff!important}
  .edd-h-menu div[x-ref="navDesktop"] nav>ul>li>div>a:hover span{text-decoration:underline;text-underline-offset:4px}
  .edd-h-menu div[x-ref="navDesktop"] .menu-icn{display:inline-flex!important;margin:0!important}
  .edd-h-menu div[x-ref="navDesktop"] .menu-icn figure{width:22px!important;height:22px!important;min-width:22px!important}
  .edd-h-menu div[x-ref="navDesktop"] nav>ul>li>div>a>span:last-child{display:inline!important}
  .edd-h-parts{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:36px;padding:0 18px;border-radius:999px;
    background:#fff;color:var(--rd)!important;font-size:14px;font-weight:800;white-space:nowrap}
  .edd-h-parts:hover{background:#fdecee}

  /* Scrolled: one 64px bar. Categories reopens the category bar underneath. */
  .edd-h.is-scrolled .edd-h-util{display:none}
  .edd-h.is-scrolled .edd-h-main{height:64px}
  .edd-h.is-scrolled .edd-h-logo{margin-right:20px}
  .edd-h.is-scrolled .edd-h-logo img{width:72px!important}
  .edd-h.is-scrolled .edd-h-cats{grid-area:cats;display:inline-flex;align-items:center;gap:8px;height:40px;margin-right:16px;padding:0 16px;
    border:0;border-radius:999px;background:var(--nav);color:#fff;font-family:inherit;font-size:14px;font-weight:700;line-height:1;cursor:pointer}
  .edd-h.is-scrolled .edd-h-search #search{height:42px!important;line-height:38px!important;font-size:14px!important}
  .edd-h.is-scrolled .edd-h-acct,.edd-h.is-scrolled .edd-h-trade{display:none}
  .edd-h.is-scrolled .edd-h-icons{margin:0 26px 0 22px}
  .edd-h.is-scrolled .edd-h-cart{flex-direction:row;gap:8px;font-size:13px;font-weight:700}
  .edd-h.is-scrolled .edd-h-cart .edd-h-badge{top:-8px;left:14px}
  .edd-h.is-scrolled .edd-h-phone{padding-left:42px;clip-path:polygon(26px 0,100% 0,100% 100%,0 100%)}
  .edd-h.is-scrolled .edd-h-phone-num{font-size:30px}
  .edd-h.is-scrolled .edd-h-phone-hrs{display:none}
  .edd-h.is-scrolled .edd-h-nav{display:none}
  .edd-h.is-scrolled.cats-open .edd-h-nav{display:block;box-shadow:0 8px 16px rgba(29,31,33,.18)}
}

/* ================= Phones and tablets (below 1024px) =================
   One clean bar (Harry, 15 Oct): menu, logo, search icon, basket and the red phone panel.
   66px at the top of the page, shrinking to 56px on scroll. Search opens under the bar.
   The bar is fixed with its 66px reserved, so the shrink never moves the page. */
@media (max-width:1023.98px){
  .page-wrapper:has(#header.edd-h){padding-top:87px}
  .edd-h-main{grid-template-columns:48px auto minmax(0,1fr) 44px auto auto;grid-template-rows:66px;
    grid-template-areas:"menu logo . msearch icons phone";transition:grid-template-rows .2s ease}
  .edd-h-logo{margin-left:2px}
  .edd-h-logo img{width:64px!important;transition:width .2s ease!important}
  .edd-h-icons{margin:0}
  .edd-h-acct,.edd-h-trade,.edd-h-icons .edd-h-lbl{display:none}
  .edd-h-icon{width:44px;height:44px;min-width:44px}
  .edd-h-badge{top:3px;left:auto;right:1px}

  .edd-h-msearch{grid-area:msearch;position:relative;z-index:30;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    padding:0;border:0;background:none;color:var(--ink);cursor:pointer}

  .edd-h-phone{align-self:stretch;align-items:center;padding:0 14px 0 32px;background:var(--r);color:#fff;
    clip-path:polygon(22px 0,100% 0,100% 100%,0 100%)}
  .edd-h-phone-ico,.edd-h-phone-hrs{display:none!important}
  .edd-h-phone-num{font-size:22px;transition:font-size .2s ease}

  /* Search: hidden until the icon is tapped, then drops down under the bar */
  /* Closed: 0px tall but still rendered, so the tap can focus the box at once (iOS only opens the
     keyboard for a focus made during the tap itself). Open: 66px, with the results free to drop below. */
  .edd-h-search{display:flex;align-items:center;position:absolute;top:100%;left:0;right:0;height:0;overflow:hidden;
    padding:0 16px;background:var(--steel);border-top:0}
  .edd-h.msearch-open .edd-h-search{height:66px;overflow:visible;border-top:1px solid var(--rule);
    box-shadow:0 8px 16px rgba(29,31,33,.18)}
  .edd-h-search #search{height:46px!important;line-height:42px!important;font-size:16px!important}

  /* Category bar holds only the Amasty hamburger on phones; it sits in the bar */
  .edd-h div[x-ref="navDesktop"],.edd-h-parts{display:none!important}
  .edd-h-nav,.edd-h-nav-in,.edd-h-menu{position:static;height:0;padding:0;background:none}
  .edd-h .-hamburger.-trigger{position:absolute!important;top:15px!important;left:6px!important;width:36px!important;height:36px!important;
    padding:6px!important;box-sizing:border-box;color:var(--ink)!important;z-index:2}
  .edd-h .-hamburger.-trigger svg{width:24px;height:24px}

  /* Scrolled: the same bar, slimmer */
  .edd-h.is-scrolled .edd-h-main{grid-template-rows:56px}
  .edd-h.is-scrolled .edd-h-logo img{width:52px!important}
  .edd-h.is-scrolled .edd-h-phone{padding:0 14px 0 30px;clip-path:polygon(20px 0,100% 0,100% 100%,0 100%)}
  .edd-h.is-scrolled .edd-h-phone-num{font-size:20px}
  .edd-h.is-scrolled .-hamburger.-trigger{top:10px!important}
}
@media (max-width:379px){
  .edd-h-main{grid-template-columns:44px auto minmax(0,1fr) 40px auto auto}
  .edd-h-msearch,.edd-h-icon{width:40px;min-width:40px}
  .edd-h-phone{padding:0 10px 0 28px}
  .edd-h-phone-num{font-size:19px}
  .edd-h.is-scrolled .edd-h-phone-num{font-size:18px}
}

/* Cookie-Script's floating "COOKIE SETTINGS" tab sat over the menu button and logo (top-left).
   Consent can still be changed from the "Cookie settings" link in the footer (CookieScript.instance.show()). */
#cookiescript_badge{display:none!important}

/* Homepage product-finder cards: the shared .edd-btn hover lifts the button (transform), which made the
   button the box for its full-card ::before link, so the link shrank, the hover ended and it looped
   every frame (visible jitter, CLS 0.3-0.7 on the desktop homepage). No lift on these buttons. */
.eddpf .eddpf__cta,.eddpf .eddpf__cta:hover,.edd-home .eddpf .eddpf__cta:hover{transform:none!important}

/* ===== Mega-menu dropdown, option A (Harry, 16 Oct) =====================================================
   Applies only to dropdowns whose Amasty content box holds the .edd-mm block (Header redesign\new\menu\*.html),
   so categories switch over one at a time. Layout: Shop by type | Shop by brand (Amasty's auto list) | help card. */
@media (min-width:1024px){
  .edd-h-menu [x-ref="amMenuSubmenuItemOpen"]:has(.edd-mm){width:1232px!important;max-width:calc(100vw - 32px)!important;left:0!important;
    max-height:80vh!important;overflow-y:auto!important;background:#fff!important;border:0!important;border-radius:0 0 16px 16px!important;
    box-shadow:0 18px 40px rgba(29,31,33,.22)!important}
  .edd-h-menu [x-ref="amMenuSubmenuItemOpen"]:has(.edd-mm) > div{padding:28px!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm){display:grid!important;grid-template-columns:300px minmax(0,1fr) 300px!important;
    grid-template-areas:"types brands help";column-gap:36px!important;align-items:start}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) [data-content="ammenu-content"],
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) [data-content-type="html"],
  .edd-h-menu .edd-mm{display:contents!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) [data-content="ammenu-content"]{padding:0!important}

  /* Shop by brand: Amasty's sub-category list */
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start{grid-area:brands;align-self:stretch;align-content:start;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:2px!important;column-gap:24px!important;
    border-left:1px solid #e3e6e9;padding-left:36px}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start::before{content:"Shop by brand";grid-column:1/-1;
    font-size:15px;font-weight:800;line-height:1.5;color:#1d1f21;margin-bottom:8px}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div{padding:0!important;margin:0!important;min-height:34px;align-items:center!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start a,
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start a *{font-size:14px!important;font-weight:400!important;line-height:1.35!important;
    color:#1d1f21!important;text-transform:none!important;letter-spacing:0!important;padding:0!important;margin:0!important;
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:none!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start a:hover,
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start a:hover *{color:#c4050f!important;text-decoration:underline}
  /* Types that are set up as sub-categories: shown under Shop by type instead */
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/electric-showers.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/mobile-handwash.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/heat-pump-hot-water-cylinders.html"]){display:none!important}

  /* Shop by type */
  #header .edd-mm-types{grid-area:types}
  #header .edd-mm-h{margin:0 0 10px!important;font-size:15px;line-height:1.5;font-weight:800;color:#1d1f21}
  #header .edd-mm-types ul{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:2px}
  #header .edd-mm-types li{margin:0!important;padding:0!important}
  #header .edd-mm-types li a{display:flex!important;align-items:center;gap:10px;padding:7px 10px!important;margin:0!important;border-radius:8px;
    font-size:14px!important;font-weight:600!important;color:#1d1f21!important;text-transform:none!important;line-height:1.3}
  #header .edd-mm-types li a:hover{background:#f2f3f4;color:#c4050f!important}
  #header .edd-mm-types svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:#c4050f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  #header .edd-mm-all{display:inline-block;margin:12px 0 0 10px;font-size:14px;font-weight:800;color:#c4050f!important;
    text-decoration:underline;text-underline-offset:4px;text-transform:none!important}

  /* Help card */
  #header .edd-mm-help{grid-area:help;background:#f2f3f4;border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:10px}
  #header .edd-mm-help p{margin:0!important;font-size:14px;line-height:1.5;color:#4a5056;text-transform:none!important}
  #header .edd-mm-help .edd-mm-q{font-size:17px;font-weight:800;line-height:1.25;color:#1d1f21}
  #header .edd-mm-btn{align-self:flex-start;margin-top:4px;background:#e30613;color:#fff!important;border-radius:999px;padding:11px 20px;
    font-size:14px;font-weight:800;text-transform:none!important}
  #header .edd-mm-btn:hover{background:#c4050f}
  #header .edd-mm-help .edd-mm-call{font-size:13px}
  #header .edd-mm-hrs{white-space:nowrap}
  #header .edd-mm-call a{color:#1d1f21!important;font-weight:800;white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1279px){
  .edd-h-menu [x-ref="amMenuSubmenuItemOpen"]:has(.edd-mm) > div{padding:24px!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm){grid-template-columns:250px minmax(0,1fr) 250px!important;column-gap:24px!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start{column-gap:16px!important;padding-left:24px}
  #header .edd-mm-help{padding:18px}
}

/* ===== v15: the other five dropdowns ===== */
@media (min-width:1024px){
  #header .edd-mm-types ul + .edd-mm-h{margin-top:16px!important}
  /* Spares: groupings that are set up as sub-categories, shown under "Parts by appliance" instead */
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/spares-accessories/hand-dryer-accessories.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/spares-accessories/boiling-tap-parts.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/spares-accessories/diverter-valves.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/spares-accessories/divertor-valves.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/spares-accessories/hvac-and-heating-accessories.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/spares-accessories/catering-accessories.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/spares-accessories/tc-spares-accessories.html"]),
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm) > .grid.content-start > div:has(> a[href*="/spares-accessories/other-parts.html"]){display:none!important}

  /* Brands-only (Water Filters): brand list + help card */
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--brands){grid-template-columns:minmax(0,1fr) 300px!important;grid-template-areas:"brands help"}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--brands) > .grid.content-start{grid-template-columns:repeat(3,minmax(0,1fr))!important;
    border-left:0;padding-left:0}
  #header .edd-mm--brands .edd-mm-all{margin:2px 0 0}

  /* Wide (Spares): two-column parts lists | brands in 3 columns, help as a strip along the bottom */
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--wide){grid-template-columns:280px minmax(0,1fr)!important;grid-template-areas:"types brands" "parts parts" "help help"}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--wide) > .grid.content-start{grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:16px!important;row-gap:0!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--wide) > .grid.content-start::before{content:"Parts by brand";order:-1}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--wide) > .grid.content-start > div{min-height:28px}
  #header .edd-mm--wide .edd-mm-parts{grid-area:parts;margin-top:16px;padding-top:14px;border-top:1px solid #e3e6e9}
  #header .edd-mm--wide .edd-mm-parts .edd-mm-h{margin-bottom:4px!important}
  #header .edd-mm--wide .edd-mm-parts ul{list-style:none!important;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:16px}
  #header .edd-mm--wide .edd-mm-parts li{margin:0!important;padding:0!important}
  #header .edd-mm--wide .edd-mm-parts li a{display:block;padding:4px 0!important;margin:0!important;font-size:13.5px!important;font-weight:400!important;line-height:1.35;
    color:#1d1f21!important;text-transform:none!important}
  #header .edd-mm--wide .edd-mm-parts li a:hover{color:#c4050f!important;text-decoration:underline}
  #header .edd-mm--wide .edd-mm-help{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:20px;row-gap:4px;margin-top:16px;padding:14px 22px}
  #header .edd-mm--wide .edd-mm-help p{flex:0 1 auto}
  #header .edd-mm--wide .edd-mm-help p:nth-child(2){flex:1 1 300px}
  #header .edd-mm--wide .edd-mm-btn{align-self:center;margin:0}
}
@media (min-width:1024px) and (max-width:1279px){
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--brands){grid-template-columns:minmax(0,1fr) 250px!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--wide){grid-template-columns:230px minmax(0,1fr)!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--wide) > .grid.content-start{grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:12px!important}
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--wide) > .grid.content-start a,
  .edd-h-menu .w-full:has(> .grid.content-start):has(.edd-mm--wide) > .grid.content-start a *{font-size:13px!important}
  #header .edd-mm--wide .edd-mm-parts li a{font-size:13px!important}

  /* Header at 1024-1279px: the top bar wrapped onto two lines and the category bar ran under Parts finder */
  .edd-h-trust li:nth-child(3){display:none!important}
  .edd-h-util-in{font-size:12px}
  .edd-h-menu{padding-right:16px}
  .edd-h-menu div[x-ref="navDesktop"] .menu-icn{display:none!important}
  .edd-h-menu div[x-ref="navDesktop"] nav>ul>li>div>a{font-size:13px!important;padding:0 2px!important}
  .edd-h-parts{padding:0 14px;font-size:13px}
}

/* ===== v16: option A in the phone menu (blocks copied into the drawer by header.phtml) ===== */
@media (max-width:1023px){
  .edd-mm-host{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;padding-bottom:14px!important}
  .edd-mm-host > .edd-mm-m{display:contents}
  .edd-mm-host::before{content:"Shop by brand";order:-2;grid-column:1/-1;margin:14px 0 2px;font-size:15px;font-weight:800;color:#1d1f21}
  .edd-mm-host:has(.edd-mm--wide)::before{content:"Parts by brand"}
  /* brands: Amasty's sub-category rows, two to a line and shorter */
  .edd-mm-host > div.flex-col{min-width:0}
  .edd-mm-host > div.flex-col a{padding:9px 0!important;min-height:40px}
  .edd-mm-host > div.flex-col a span{font-size:14px!important;font-weight:400!important;line-height:1.3!important;color:#1d1f21!important}
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/electric-water-heating/electric-showers.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/electric-water-heating/mobile-handwash.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/electric-water-heating/heat-pump-hot-water-cylinders.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/spares-accessories/hand-dryer-accessories.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/spares-accessories/boiling-tap-parts.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/spares-accessories/diverter-valves.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/spares-accessories/divertor-valves.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/spares-accessories/hvac-and-heating-accessories.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/spares-accessories/catering-accessories.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/spares-accessories/tc-spares-accessories.html"]),
  .edd-mm-host > div:not(.edd-mm-m):has(a[href*="/spares-accessories/other-parts.html"]){display:none!important}

  /* shop by type */
  .edd-mm-host .edd-mm-types{order:-3;grid-column:1/-1;padding-top:6px}
  .edd-mm-host .edd-mm-h{margin:8px 0 2px!important;font-size:15px;font-weight:800;line-height:1.4;color:#1d1f21}
  .edd-mm-host .edd-mm-types ul{list-style:none!important;margin:0!important;padding:0!important}
  .edd-mm-host .edd-mm-types li{margin:0!important;padding:0!important}
  .edd-mm-host .edd-mm-types li a{display:flex!important;align-items:center;gap:12px;min-height:44px;padding:8px 0!important;
    font-size:15px!important;font-weight:600!important;line-height:1.3;color:#1d1f21!important;text-decoration:none!important}
  .edd-mm-host .edd-mm-types svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:#c4050f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .edd-mm-host .edd-mm-all{display:inline-block;margin:8px 0 2px;font-size:14px;font-weight:800;color:#c4050f!important;
    text-decoration:underline!important;text-underline-offset:4px}

  /* help card, after the brands */
  .edd-mm-host .edd-mm-help{order:2;grid-column:1/-1;margin-top:14px;padding:16px;border-radius:12px;background:#fff;
    border:1px solid #e3e6e9;display:flex;flex-direction:column;gap:8px}
  .edd-mm-host .edd-mm-help p{margin:0!important;font-size:14px;line-height:1.45;color:#4a5056}
  .edd-mm-host .edd-mm-help .edd-mm-q{font-size:16px;font-weight:800;color:#1d1f21}
  .edd-mm-host .edd-mm-btn{align-self:flex-start;margin-top:2px;padding:12px 20px;border-radius:999px;background:#e30613;
    color:#fff!important;font-size:15px;font-weight:800;text-decoration:none!important}
  .edd-mm-host .edd-mm-call{font-size:13px!important}
  .edd-mm-host .edd-mm-call a{color:#1d1f21!important;font-weight:800;white-space:nowrap}
  .edd-mm-host .edd-mm-hrs{white-space:nowrap}
  /* Spares is a long list on a phone, and people look for parts by the appliance's make: Parts finder, then brands, then types */
  .edd-mm-host .edd-mm--wide .edd-mm-help{order:-4;margin:6px 0 4px}
  .edd-mm-host .edd-mm--wide .edd-mm-types{order:1000;padding-top:10px}
  .edd-mm-host .edd-mm--wide .edd-mm-parts{order:1001;grid-column:1/-1}
  .edd-mm-host .edd-mm-parts ul{list-style:none!important;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .edd-mm-host .edd-mm-parts li{margin:0!important;padding:0!important}
  .edd-mm-host .edd-mm-parts li a{display:flex!important;align-items:center;min-height:40px;padding:8px 0!important;font-size:14px!important;
    font-weight:400!important;line-height:1.3;color:#1d1f21!important;text-decoration:none!important}
}