/* EDD header redesign v12 (2026-10-16; 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}