#header #customer-menu + nav[aria-label="My Account"] {display:none!important}
#header #customer-menu[aria-expanded="true"] + nav[aria-label="My Account"] {display:block!important}
#header > .container {max-width:980px;width:100%;margin-inline:auto;box-sizing:border-box}
@media (min-width:1024px) {
 #header a[aria-label="Go to Home page"] {flex:0 0 365px;width:365px;min-width:365px}
 #header a[aria-label="Go to Home page"] img {display:block;width:365px!important;height:100px!important;max-width:none!important;object-fit:fill}
}
@media (min-width:641px) and (max-width:1023px) {
 #header a[aria-label="Go to Home page"] img {width:300px;height:82px;max-width:100%;object-fit:fill}
}
@media (max-width:640px) {
 #header > .container {padding-inline:16px}
 #header a[aria-label="Go to Home page"] img {width:220px;height:auto;max-width:100%}
}
@media (min-width:1024px) {
 #header .navigation > div {padding-inline:8px!important}
 #header .navigation nav > ul {flex-wrap:nowrap!important;column-gap:12px!important;white-space:nowrap}
 #header .navigation nav > ul > li {flex:0 0 auto}
}

/* Keep the full-size logo and all utility icons visible with both requested navigation links. */
@media (min-width: 1024px) {
  #header > .container {
    display: flex;
    flex-wrap: wrap !important;
    justify-content: space-between;
    align-items: center;
    row-gap: 0;
  }
  #header > .container > div:first-child {
    order: 1;
  }
  #header > .container > div:last-child {
    order: 2;
    margin-right: 0;
    flex-shrink: 0;
  }
  #header > .container > .navigation {
    order: 3;
    display: flex;
    width: 100%;
    flex-basis: 100%;
    justify-content: center;
  }
  #header > .container > .navigation > div {padding-inline: 0 !important;}
  #header > .container > .navigation nav > ul {
    justify-content: center;
    padding-top: 0;
    padding-bottom: 4px;
    gap: 24px !important;
  }
}

/* v7: tighter, aligned header (logo + icons on one row, nav centered below). */
@media (min-width: 1024px) {
  #header > .container { padding-top: 6px !important; padding-bottom: 0 !important; align-items: center !important; }
  #header a[aria-label="Go to Home page"] { flex: 0 0 300px; width: 300px; min-width: 300px; }
  #header a[aria-label="Go to Home page"] img { width: 300px !important; height: 82px !important; }
  #header > .container > .navigation nav > ul { padding-top: 0 !important; padding-bottom: 8px !important; }
  #header > .container > div:last-child { align-self: center; }
}

/* v8: blue nav bar spanning the full 980px content width (desktop). */
@media (min-width: 1024px) {
  #header > .container > .navigation {
    background: #0b4c7a;
    margin-inline: -24px;
    width: calc(100% + 48px) !important;
    flex: 0 0 calc(100% + 48px) !important;
    max-width: none;
  }
  #header > .container > .navigation nav > ul { padding-top: 4px !important; padding-bottom: 4px !important; gap: 28px !important; }
  #header > .container > .navigation nav > ul > li > a,
  #header > .container > .navigation nav > ul > li > button { color: #fff !important; font-weight: 500; }
  #header > .container > .navigation nav > ul > li > a svg,
  #header > .container > .navigation nav > ul > li > button svg { color: #fff; }
  #header > .container > .navigation nav > ul > li:hover { background: rgba(255,255,255,.12); border-color: #fff !important; }
}

/* v9: first-level items wrap their link in a span that carries the (dark) text color. */
@media (min-width: 1024px) {
  #header > .container > .navigation nav > ul > li > span,
  #header > .container > .navigation nav > ul > li > span > a,
  #header > .container > .navigation nav > ul > li > span svg { color: #fff !important; }
  #header > .container > .navigation nav > ul > li > ul a { color: #111827 !important; }
}

/* v10: same weight for every first-level item. */
@media (min-width: 1024px) {
  #header > .container > .navigation nav > ul > li > span,
  #header > .container > .navigation nav > ul > li > span a,
  #header > .container > .navigation nav > ul > li > a { font-weight: 400 !important; font-size: 15px; }
}

/* v11: logo + icons flush with the nav bar / content edges (no side padding on desktop). */
@media (min-width: 1024px) {
  #header > .container { padding-inline: 0 !important; }
  #header > .container > .navigation { margin-inline: 0 !important; width: 100% !important; flex: 0 0 100% !important; }
}