@layer block {

  /* stylelint-disable keyframes-name-pattern */
  /* stylelint-disable no-descending-specificity, comment-empty-line-before, custom-property-pattern, value-no-vendor-prefix, no-duplicate-selectors, property-no-vendor-prefix */
  :root {
    --nav-padding-l1: 1.6rem;
    --nav-padding-l2: 1.6rem 1.6rem 1.6rem calc(1.6rem * 2);
    --nav-padding-l3: 1.6rem 1.6rem 1.6rem calc(1.6rem * 3);
  }

  @keyframes show-banner {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  header.header-wrapper:has(.header.block[data-block-status=loaded]) {
    border-bottom: var(--header-btm-border-size) solid var(--header-border-color);    
  }
  
  header.header-wrapper .banner-container.banner-type-global > :not[data-block-status="loaded"],
  header.header-wrapper .banner-container.banner-type-global > :not[data-section-status="loaded"] {
    display: none;
  }

  header.header-wrapper nav div:is(.nav-tools) svg {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  /* header */
  /* =================================================================================================== */
  header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search) {
    background: var(--clr-white);
    height: calc(var(--nav-height) + var(--search-height));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search) {
      height: var(--nav-height);
      align-items: center;
      grid-template-columns: auto auto max-content;
      padding-inline: var(--gutter-l);
    }
  }

  header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search)::before {
    content: '';
    height: var(--global-banner-height);
    background: var(--global-banner-background);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search) nav {
    grid-area: 1/1/1/span 2;
  }

  @media (min-width: 1024px) {
    header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search) nav {
      grid-area: 1/1/1/1;
    }
  }

  header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search) .nav-tools {
    grid-area: 1/2/1/2;
    justify-self: end;
    margin-inline-end: 6rem;
  }

  @media (min-width: 1024px) {
    header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search) .nav-tools {
      margin-inline-end: 0;
      gap: 0 var(--gutter-s);
      grid-area: 1/3/1/3;
    }
  }

  header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search) form {
    grid-area: 2/1/2/span 2;
  }

  @media (min-width: 1024px) {
    header.header-wrapper .block:not(.banner,.dropin-design,.nav-logo,.nav-menu,.nav-tools,.nav-search) form {
      grid-area: 1/2/1/2;
      margin-inline-end: 3rem;
    }

    header.header-wrapper form .close {
      position: relative;
      border-left: 1px solid var(--input-border-color);
      transition: inherit !important;
      translate: 0 !important;
    }
  }

  /* nav */
  /* =================================================================================================== */
  header.header-wrapper nav .nav-hamburger {
    grid-area: hamburger;
    align-self: center;
    justify-self: center;
    height: 4rem;
    aspect-ratio: 1/1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  header.header-wrapper nav .nav-hamburger .icon {
    line-height: 1;
  }

  header.header-wrapper nav .nav-hamburger .icon::before {
    display: none;
  }

  header.header-wrapper nav .nav-hamburger .icon svg {
    width: 18px;
    height: 18px;
  }

  header.header-wrapper nav[aria-expanded="true"] .nav-menu {
    display: initial;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    background: var(--clr-white);
    max-height: calc(100vh - var(--header-height));
  }

  @media (min-width: 1024px) {
    header.header-wrapper nav[aria-expanded="true"] .nav-menu {
      top: var(--header-height);
    }
  }

  header.header-wrapper nav {
    height: var(--nav-height);
  }

  header.header-wrapper nav > div {
    height: var(--nav-height);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-inline: var(--gutter-m);
  }

  header.header-wrapper nav .nav-menu {
    display: none;
  }

  header.header-wrapper nav .nav-logo .icon {
    display: flex;
    height: calc(var(--nav-height) - 1rem);
  }

  header.header-wrapper nav .nav-menu .sign-in-link-mobile,
  header.header-wrapper nav .nav-menu .locale-switcher,
  .user-menu-item-mobile {
    background-color: var(--clr-neutral-40);
  }

  .menu-nav-dropdown hr {
    border-color: transparent;
  }

  @media (max-width: 1203px) {
    .menu-nav-dropdown hr {
      display: none;
    }
  }

  header.header-wrapper nav .nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;

    @media (max-width: 1023px) {
      position: relative;
    }
  }

  header.header-wrapper nav .nav-menu ul .menu-nav-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #e7ebee;
    padding-inline: var(--gutter-m);
    height: 100%;

    @media (max-width: 1023px) {
      position: relative;
    }
  }

  header.header-wrapper nav .nav-menu ul .menu-nav-category a {
    padding-block: var(--gutter-l);
    display: flex;
    align-items: center;
    width: 100%;
  }

  header.header-wrapper nav .nav-menu ul .menu-nav-category .icon {
    min-width: 14px;
    transition: transform 200ms;
  }

  header.header-wrapper nav .nav-menu ul .menu-nav-dropdown ul > li {
    padding: var(--nav-padding-l2);
    border-bottom: 1px solid #e7ebee;
  }

  @media (width >= 1024px), (min-width: 1024px) {
    header.header-wrapper nav .nav-menu ul .menu-nav-dropdown .m-col-1:has(> ul:first-child) {
      border-right: 1px solid var(--base-border-color);
      margin-inline-end: var(--gutter-m);
    }
  }

  header.header-wrapper nav p.m-expandable-title {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    border-bottom: 1px solid #e7ebee;
    padding: var(--nav-padding-l2);
  }

  header.header-wrapper nav p.m-expandable-title .icon {
    min-width: 14px;
    transition: transform 200ms;
  }

  header.header-wrapper .dropdown-button {
    background: none;
    margin: 0;
    padding: 0;
    width: 100%;
    position: absolute;
    inset: 0;
    height: 100%;
    max-width: unset;
    display: flex;
    justify-content: flex-end;
    padding-inline-end: var(--gutter-m);
    align-items: center;
  }

  header.header-wrapper .dropdown-button > .icon {
    display: block;
    width: 14px;
    height: 14px;
  }

  header.header-wrapper nav .nav-menu ul p.m-expandable-title[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }

  header.header-wrapper nav .nav-menu ul > li.menu-expandable[aria-expanded='true'] > .menu-nav-category .icon {
    transform: rotate(180deg);
  }

  header.header-wrapper nav .nav-menu ul > li:first-child .menu-nav-category {
    border-top: 1px solid #e7ebee;
  }

  header.header-wrapper nav .m-expandable-list > li a {
    display: block;
  }

  @media (max-width: 1023px) {
    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category:not(.menu-nav-no-content) a {
      pointer-events: none;
    }

    header.header-wrapper nav .nav-menu ul .menu-nav-category.menu-nav-no-content,
    header.header-wrapper nav .nav-menu ul .menu-nav-dropdown .m-feat-img li {
      padding: 0;
    }

    header.header-wrapper nav .nav-menu ul .menu-nav-category.menu-nav-no-content a,
    header.header-wrapper nav .nav-menu ul .menu-nav-dropdown .m-feat-img li a:first-of-type {
      padding: 2.05rem 2rem;
      display: block;
    }
  }

  header.header-wrapper nav .nav-menu > ul > li .menu-nav-category > div {
    width: 100%;
  }

  header.header-wrapper nav .nav-menu ul > li *:is(a, p) {
    text-decoration: none;
    color: var(--text-color);
    font-family: var(--body-font-family);
    line-height: 1;
    margin: 0;
    text-transform: capitalize;
    font-weight: var(--fw-semibold);
    font-size: var(--body-font-size-l);

    @media (max-width: 1023px) {
      position: relative;
    }
  }

  header.header-wrapper nav .nav-menu ul > li *:is(a, p):is(:hover, :focus-visible) {
    color: var(--link-hover-color);
  }

  header.header-wrapper nav .nav-menu ul.m-expandable-list > li *:is(a, p) {
    font-size: var(--body-font-size-m);
    font-weight: var(--fw-normal);
  }

  header.header-wrapper nav .nav-menu ul.m-expandable-list > li a:is(:hover, :focus-visible) {
    color: var(--link-hover-color);
    text-decoration: underline;
  }

  header.header-wrapper nav .nav-menu .menu-nav-dropdown {
    display: none;
  }

  header.header-wrapper nav .nav-menu ul > li[aria-expanded="true"] .menu-nav-dropdown {
    display: initial;
  }

  header.header-wrapper nav .nav-menu ul > li[aria-expanded="true"] .menu-nav-category a {
    color: var(--link-hover-color);
  }

  header.header-wrapper nav .nav-menu ul > li[aria-expanded="true"] .menu-nav-category:has(~ .menu-nav-dropdown .m-expandable-title[aria-expanded="true"]) a {
    color: var(--text-color);
  }

  header.header-wrapper nav .nav-menu ul > li[aria-expanded="true"] .menu-nav-category ~ .menu-nav-dropdown .m-expandable-title[aria-expanded="true"] * {
    color: var(--link-hover-color);
  }

  header.header-wrapper nav .m-bg-img {
    display: none;
  }

  header.header-wrapper nav .m-expandable-list {
    display: none;
  }

  header.header-wrapper nav .nav-menu .menu-nav-category > div > em > a {
    color: var(--link-hover-color);
    font-style: normal;
  }

  header.header-wrapper nav[aria-expanded="true"] .nav-menu ul > li .m-expandable-list li {
    padding: var(--nav-padding-l3)
  }

  header.header-wrapper nav p.m-expandable-title[aria-expanded='true'] + .m-expandable-list {
    display: initial;
  }

  header.header-wrapper nav .nav-menu .menu-nav-dropdown *:not(.icon) > img {
    display: none;
  }

  header.header-wrapper nav .linked-picture-desktop {
    visibility: hidden;
  }

  .user-menu,
  .user-menu-link {
    display: none;
  }


  header.header-wrapper nav .nav-menu .item-image-link {
    display: block;
    padding: var(--nav-padding-l2);
    border-bottom: 1px solid #e7ebee;
  }

  @media (min-width: 1024px) {
    header.header-wrapper nav .nav-hamburger {
      display: none;
    }

    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category.menu-nav-no-content a {
      pointer-events: unset;
      width: 100%;
      display: inline-block;
    }

    header.header-wrapper nav .nav-menu ul .menu-nav-category.sign-in-link-mobile,
    header.header-wrapper nav .nav-menu ul .locale-switcher {
      display: none;
    }

    header.header-wrapper nav .linked-picture-desktop {
      visibility: unset;
    }

    header.header-wrapper nav .nav-menu {
      display: flex;
      margin-block-start: auto;
      height: 65%;
    }

    header.header-wrapper nav .nav-menu:has(.menu-expandable[aria-expanded="true"])::after {
      content: '';
      background: var(--backdrop-color);
      backdrop-filter: blur(2px);
      width: 101vw;
      left: 50%;
      top: 0;
      height: 100vh;
      transform: translateX(-50%);
      position: fixed;
      display: block;
      z-index: -1;
    }

    header.header-wrapper nav p.m-expandable-title a:is(:hover, :focus-visible) {
      text-decoration: underline;
      color: var(--link-hover-color);
    }

    header.header-wrapper nav .nav-menu ul {
      display: flex;
    }

    header.header-wrapper nav .nav-menu > ul > li {
      padding: 0;
      margin-bottom: 0;
    }

    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category {
      padding: 0 var(--gutter-s);
      border: none;
    }

    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category a {
      border-bottom: 4px solid transparent;
      color: var(--text-color);
      display: block;
      line-height: 1;
    }

    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category:hover a {
      color: var(--link-hover-color);
    }

    header.header-wrapper nav .nav-menu > ul > li[aria-expanded="true"] .menu-nav-category a {
      border-color: var(--link-hover-color);
      color: var(--link-hover-color);
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .column {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1/ span 2;
      justify-content: flex-start;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .column > :is(p, ul) {
      height: max-content;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .column > :is(p:first-of-type, ul:first-of-type) {
      grid-row: 1;
      grid-column: 1;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .column > .m-expandable-title ~ ul {
      margin-block-start: var(--gutter-xl);
    }

    header.header-wrapper nav .nav-menu ul > li *:is(a, p) {
      padding: 0;
    }

    header.header-wrapper nav .nav-menu ul > li:first-child .menu-nav-category {
      border-top: none;
    }

    header.header-wrapper .dropdown-button {
      display: none;
    }

    header.header-wrapper nav .nav-menu ul .menu-nav-dropdown ul {
      flex-flow: column;
      gap: var(--gutter-m);
    }

    header.header-wrapper nav .nav-menu ul .menu-nav-dropdown ul > li {
      border-bottom: none;
      padding: 0;
    }

    header.header-wrapper nav .nav-menu .menu-expandable[aria-expanded='true'] .menu-nav-dropdown {
      position: absolute;
      top: var(--header-height);
      left: 0;
      right: 0;
      background: var(--clr-white);
      display: grid;
      gap: var(--gutter-s) 0;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      padding: var(--gutter-l) 8%;
      box-sizing: border-box;
      z-index: 5;
      border-top: 1px solid var(--base-border-color);
    }

    header.header-wrapper nav .nav-menu .menu-expandable[aria-expanded='true'][aria-label="Expand the submenu for New!"] .m-col-1 {
      grid-column: 1 / 1;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .empty {
      display: none;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-feat-img p {
      text-align: center;
      display: flex;
      justify-content: center;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-col-featured > p:first-child {
      display: none;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-feat-img a:not(.linked-picture-desktop) {
      display: none;
    }

    header.header-wrapper nav .nav-menu li[aria-label] .menu-nav-dropdown .column li:has(.linked-picture-desktop) a:not(.linked-picture-desktop) {
      display: none;
    }

    header.header-wrapper nav .nav-menu li[aria-label] .menu-nav-dropdown .column li:has(.linked-picture-desktop) a:not(.linked-picture-desktop):has(sub) {
      display: block;
    }

    header.header-wrapper nav .nav-menu li .menu-nav-dropdown .column .item-image-link {
      display: none;
    }

    header.header-wrapper nav .nav-menu li .menu-nav-dropdown .column.item-has-image picture {
      display: block;
      width: 100%;
      height: auto;
    }

    header.header-wrapper nav .nav-menu li .menu-nav-dropdown .column.item-has-image {
      padding: 2rem;
    }

    header.header-wrapper nav .nav-menu li .menu-nav-dropdown .column.item-has-image img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-feat-img img {
      height: 15rem;
      width: auto;
      display: block;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-feat-img picture {
      display: initial;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-expandable-list li {
      padding: 0;
      border: none;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-feat-img ul li {
      flex: 1 1 0;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-feat-img ul li * {
      display: block;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-expandable-title {
      margin-bottom: 1.6rem;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-expandable-title {
      pointer-events: none;
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-expandable-list {
      flex-direction: column;
      gap: 1.6rem;
      text-transform: unset;
      margin-bottom: var(--gutter-m);
    }

    header.header-wrapper nav .nav-menu .menu-nav-dropdown .m-feat-img .m-expandable-list {
      flex-direction: row;
    }

    header.header-wrapper nav p.m-expandable-title {
      border: none;
    }

    /* top level nav */
    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category a {
      font: var(--font-body);
      font-weight: var(--fw-semibold);
      font-size: var(--body-font-size-m);
      text-transform: capitalize;
      pointer-events: unset;
      padding-block: 0 1.3em;
      white-space: nowrap;
    }

    header.header-wrapper nav .nav-logo .icon {
      width: 100%;
    }

    header.header-wrapper nav > div {
      gap: 0 var(--gutter-m);
      justify-content: flex-start;
      align-items: center;
      padding: 0;
    }
  }

  @media (min-width: 1024px) {
    header.header-wrapper nav .nav-menu > ul > li .menu-nav-category {
      padding: 0 var(--gutter-m);
    }
  }

  @media (min-width: 1280px) {
    .user-menu,
    .user-menu-link {
      visibility: initial;
      width: initial;
      height: initial;
      border: unset;
    }
  }

  /* nav tools */
  /* =================================================================================================== */
  header.header-wrapper .nav-tools {
    grid-area: tools;
    display: flex;
    align-items: center;
    align-self: center;
    justify-self: center;
  }

  @media (min-width: 1024px) {
    header.header-wrapper .nav-tools {
      position: relative;
      justify-self: end;
      align-self: end;
    }
  }

  header.header-wrapper .nav-tools button {
    margin: 0;
  }

  header.header-wrapper .nav-tools div.locale-switcher {
    display: none;
  }

  @media (min-width: 1024px) {
    header.header-wrapper .nav-tools div.locale-switcher {
      display: block;
    }

    header.header-wrapper .nav-tools div.locale-switcher a {
      height: 4rem;
      width: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  header.header-wrapper .nav-tools .sign-in-link-desktop {
    display: none;
    font-size: 0;
    width: 4rem;
    box-sizing: border-box;
    aspect-ratio: 1/1;
    color: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    position: relative;
  }

  @media (min-width: 1024px) {
    header.header-wrapper .nav-tools .sign-in-link-desktop {
      display: block;
    }
  }

  header.header-wrapper .nav-tools .sign-in-link-desktop::after {
    content: '';
    background: url('../../icons/sign-in.svg') 50% 40%/43% auto no-repeat;
    display: block;
    height: 4rem;
    width: 4rem;
  }

  header.header-wrapper .nav-tools .sign-in-link-desktop:hover span,
  header.header-wrapper .nav-tools .sign-in-link-desktop:focus-visible span {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 35%);
    width: auto;
    height: auto;
    margin: 0;
    clip: unset;
    font-size: var(--body-font-size-3xs);
    font-weight: var(--fw-semibold);
    color: var(--link-hover-color);
    z-index: 200;
    background: var(--background-color);
  }

  header.header-wrapper .nav-tools .signed-in-link-desktop {
    font-size: 10pt;
    text-decoration: none;
  }

  header.header-wrapper .nav-tools .minicart,
  header.header-wrapper .nav-tools .wishlist {
    font-size: 0;
    width: 4rem;
    box-sizing: border-box;
    aspect-ratio: 1/1;
    color: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
  }

  header.header-wrapper .nav-tools .minicart:focus-visible,
  header.header-wrapper .nav-tools .wishlist:focus-visible {
    outline: var(--focus-ring);
  }

  header.header-wrapper .nav-tools .wishlist {
    background: transparent url('../../icons/favorites-heart.svg') 50% 45%/50% no-repeat;
    filter: brightness(0);
    display: none;
  }

  @media (min-width: 1024px) {
    header.header-wrapper .nav-tools .wishlist {
      display: block;
    }
  }

  header.header-wrapper .nav-tools.logged-out .logged-in-container {
    display: none;
    position: relative;
  }

  header.header-wrapper .nav-tools.logged-in .logged-out-container {
    display: none;
  }

  header.header-wrapper .nav-tools.logged-in .logged-in-container {
    position: relative;
  }

  @media (min-width: 1024px) {
    header.header-wrapper .nav-tools .user-menu-link {
      font-size: 15px;
      text-decoration: none;
      font-family: var(--body-font-family);
      display: flex;
      gap: var(--gutter-xs);
      align-items: center;
      pointer-events: unset;
    }

    header.header-wrapper .nav-tools .user-menu-link::after {
      content: '';
      position: relative;
      width: 12px;
      height: 12px;
      background: url("/icons/chevron-down.svg") no-repeat;
      background-size: cover;
      display: inline-block;
    }

    header.header-wrapper .nav-tools .user-menu-link-open::after {
      content: '';
      position: relative;
      left: 2px;
      top: 3px;
      width: 12px;
      height: 12px;
      background: url("/icons/chevron-up.svg") no-repeat;
      background-size: cover;
      display: inline-block;
    }

    header.header-wrapper .nav-tools .user-menu {
      font-family: var(--body-font-family);
      display: none;
      position: absolute;
      top: 100%;
      right: -1rem;
      width: 10rem;
      border: 1px solid var(--clr-neutral-40);
      box-shadow: 0 0.3em 0.7em #0000001a;
      background-color: #fff;
      z-index: 10000;
      text-align: center;
    }

    header.header-wrapper .nav-tools .user-menu ul {
      list-style: none;
      margin: 0;
      text-align: left;
      padding: var(--gutter-s);
    }

    header.header-wrapper .nav-tools .user-menu ul li:not(:last-child) {
      margin-block-end: var(--gutter-s);
    }

    header.header-wrapper .nav-tools .user-menu ul li a {
      text-decoration: none;
      font-size: var(--body-font-size-xs);
    }

    header.header-wrapper .nav-tools .user-menu ul li a:hover,
    header.header-wrapper .nav-tools .user-menu ul li a:focus-visible {
      text-decoration: underline;
    }

    header.header-wrapper .nav-tools .user-menu-open {
      display: block;
    }
  }

  header.header-wrapper .nav-tools-panel {
    z-index: 100;
    position: absolute;
    box-shadow: 0 2px 5px rgba(0 0 0 / 50%);
    background: var(--background-color);
    top: unset;
    right: 0;
    width: 100%;
    display: none;
    box-sizing: border-box;
  }

  header .nav-tools-panel {
    top: var(--global-banner-height);
  }

  header.header-wrapper .nav-tools-panel--show {
    display: block;
    width: 398px;
    padding: 0;

    @media (max-width: 1023px) {
      max-width: 100%;
    }
  }

  header.header-wrapper .auth-dropin-wrapper:has(.user-name) .nav-tools-panel--show {
    width: max-content;
    padding: 20px;
    right: initial;
  }

  header.header-wrapper .auth-dropin-wrapper:has(.user-name) .nav-tools-panel--show ul {
    margin: 0;
    list-style: none;
    padding: 0;
  }

  header.header-wrapper .auth-dropin-wrapper form.auth-sign-in-form__form .dropin-input-password {
    margin-bottom: 0 !important;
  }

.auth-sign-in-form__form__buttons .auth-sign-in-form__form__buttons__combine {
    display: contents !important;
  }

 .auth-sign-in-form__form__buttons {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto;
    gap: 20px !important;
  }

.auth-sign-in-form__button--forgot {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
  }

  .auth-sign-in-form__button--signup,
  .auth-sign-in-form__button--submit {
    grid-row: 2;
    width: 100%;
    margin: 0 !important;
    border-radius: var(--button-border-radius) !important;
    font-family: var(--body-font-family-bold) !important;
    font-weight: var(--fw-bold) !important;
    font-size: var(--body-font-size-s) !important;
    text-transform: uppercase;
  }

 .auth-sign-in-form__button--signup {
    grid-column: 1;
    background-color: var(--button-cancel-background) !important;;
  }

  .auth-sign-in-form__button--submit {
    grid-column: 2;
    background-color: var(--button-primary-background) !important;
  }

  .auth-sign-in-form__form__buttons .auth-sign-in-form__form__buttons__combine>span {
    display: none;
  }

  header.header-wrapper .nav-tools {
    background: var(--background-color);
  }

  header.header-wrapper .nav-tools-wrapper > button {
    background: transparent;
    padding: 10px;
    border: unset;
    cursor: pointer;
    height: 40px;
    width: 40px;
  }

  header.header-wrapper .auth-dropin-wrapper > button:has(.user-name) {
    width: inherit;
  }

  header.header-wrapper .auth-dropin-wrapper > button:has(.user-name)::after {
    content: '';
    position: relative;
    width: 12px;
    height: 12px;
    background: url("/icons/chevron-down.svg") no-repeat;
    background-size: cover;
    display: inline-block;
  }

  header.header-wrapper .auth-dropin-wrapper:has(.nav-tools-panel--show) > button:has(.user-name)::after {
    background: url("/icons/chevron-up.svg") no-repeat;
    background-size: cover;
  }

  header.header-wrapper .nav-tools button.nav-cart-button {
    background-image: url('../../icons/cart.svg');
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 51;
  }

  header.header-wrapper .nav-tools button.nav-cart-button[data-count]::after {
    content: attr(data-count);
    position: absolute;
    top: 0;
    right: -2px;
    background-color: var(--minicart-data-count-color);
    color: white;
    border-radius: 50%;
    width: 1.75em;
    height: 1.75em;
    display: flex;
    align-items: center;
    font-size: 0.8em;
    justify-content: center;
  }

  header.header-wrapper .nav-tools button.nav-search-button {
    font-size: 0;
    background-image: url('../../icons/search.svg');
    background-repeat: no-repeat;
    background-position: center;
  }


  /* search */
  /* =================================================================================================== */
  body:has(header.header-wrapper form .search-recs:not([hidden])) {
    overflow: hidden;
  }

  header.header-wrapper form:not(.auth-sign-in-form__form) {
    height: var(--search-height);
    display: flex;
    align-items: center;
    padding-inline: var(--gutter-s);
    position: relative;
    margin-block-end: var(--gutter-xs);
    z-index: 1;
  }

  @media (min-width: 1024px) {
    header.header-wrapper form:not(.auth-sign-in-form__form) {
      width: clamp(10rem, 100%, 22vw);
      margin-inline-start: auto;
    }
  }

  header.header-wrapper form .search-button {
    margin: 0;
    font-size: 0 !important;
    width: 4rem;
    aspect-ratio: 1/1;
    border: 0;
    padding: 0;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: var(--gutter-s);
    transform: translate(0, -50%);
    background: url('../../icons/search.svg') center/65% no-repeat;
  }

  header.header-wrapper form .search-button:focus-visible {
    outline: var(--focus-ring);
  }

  header.header-wrapper form input[type="text"] {
    font-family: inherit;
    font-size: var(--body-font-size-m);
    font-weight: var(--fw-medium);
    width: 100%;
    max-width: 100%;
    height: 4rem !important;
    background: var(--clr-white);
    border: 1px solid var(--clr-neutral-70);
    border-radius: .5rem !important;
    padding-inline: var(--gutter-xxl);
    transition: width .3s ease-in-out;
  }

  header.header-wrapper form input[type="text"]::placeholder {
    color: var(--clr-neutral-80);
    opacity: 1;
  }

  header.header-wrapper form:has(.search-recs:not([hidden])) .clear {
    opacity: 1;
    translate: calc(-100% + -6px) 0;
    transition: all .3s ease-in-out 0s;
  }

  header.header-wrapper form .clear {
    position: absolute;
    right: var(--gutter-s);
    top: 50%;
    transform: translate(0, -50%);
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: none;
    border-left: 1px solid var(--input-border-color);
    cursor: pointer;
    opacity: 0;
    z-index: 5;
    padding: 0;
    margin: 0;
    overflow: clip;
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
    transition: none;
    color: transparent;
  }

  header.header-wrapper form:has(.search-recs:not([hidden])) .clear:is(:hover, :focus-visible)::before {
    background: #000 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="%23ffffff"><path fill="%23000000" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M18 6L6 18M6 6l12 12"/></svg>') center/50% no-repeat;
  }

  @media (width >=1024px),
  (min-width: 1024px) {
    header.header-wrapper form .clear {
      display: none;
    }
  }

  header.header-wrapper form .search-recs-backgrd-overlay {
    z-index: -1;
    position: fixed;
    left: 50%;
    right: unset;
    width: 101vw;
    transform: translateX(-50%);
    top: 0;
    background: linear-gradient(to bottom, transparent var(--header-height), var(--backdrop-color) var(--header-height));
    height: 100dvh;
  }

  header.header-wrapper form .search-recs-backgrd-overlay::after {
    content: '';
    display: block;
    position: fixed;
    left: 50%;
    width: 101vw;
    transform: translateX(-50%);
    top: var(--header-height);
    backdrop-filter: var(--backdrop-blur);
    height: calc(100vh - var(--header-height));
  }

  html:has(.search-recs:not([hidden])) {
    overflow: hidden;
  }

  header.header-wrapper form .close {
    font-size: var(--body-font-size-s);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    background: transparent;
    line-height: 4rem;
    translate: calc(100% + 10px);
    transition: translate .3s ease-in-out 0s;
    right: var(--gutter-s);
    border-radius: var(--input-border-radius);
    color: var(--text-color);
    position: absolute;
    opacity: 0;
  }

  header.header-wrapper form:has(.search-recs:not([hidden])) .close {
    transition-delay: .2s;
    translate: none;
    opacity: 1;
  }

  @media (width <= 1023px),
  (max-width: 1023px) {
    header.header-wrapper form .close::before {
      display: none;
    }

    header.header-wrapper form:has(.search-recs:not([hidden])) .clear {
      color: transparent;
    }

    header.header-wrapper form .clear::before {
      content: '';
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="%23000000"><path fill="none" stroke="%23000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>') center/50% no-repeat;
      height: 100%;
      aspect-ratio: 1;
      padding: 0;
      transition: all 0.3s ease;
    }
  }

  header.header-wrapper form:has(.search-recs:not([hidden])) input {
    width: calc(100% - 3rem - var(--gutter-m)) !important;
    transition: width .3s ease-in-out;
  }

  @media (width >= 1024px),
  (min-width: 1024px) {
    header.header-wrapper form:has(.search-recs:not([hidden])) .clear {
      right: var(--gutter-m);
    }

    header.header-wrapper form:has(.search-recs:not([hidden])) input {
      width: 100% !important;
      border: 2px solid var(--base-border-color);
    }
  }

  header.header-wrapper form:has(.search-recs:not([hidden])) > div:last-of-type {
    overflow: hidden;
    overscroll-behavior: contain;
  }

  /* search-recs */
  /* =================================================================================================== */
  .header .search-recs {
    position: absolute;
    top: var(--search-height);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height));
    padding: var(--gutter-m);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    overscroll-behavior: contain;
    overflow: auto;
    border: 0;
    border-radius: 0 0 var(--dialog-border-radius) var(--dialog-border-radius);
  }


  @media (min-width: 600px) {
    .header .search-recs {
      bottom: unset;
      margin-inline: auto;
      width: calc(100% - var(--gutter-xxl));
      border-radius: 0 0 8px 8px;
    }
  }

  @media (min-width: 1024px) {
    .header .search-recs {
      min-width: 38rem;
    }
  }

  .header .search-recs .related-searches {
    order: 1;
  }

  @media (min-width: 600px) {
    .header .search-recs .related-searches .search-recs-title-wrapper {
      padding: 0;
    }
  }

  .header .search-recs .related-searches .search-recs-title-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 0 var(--gutter-m);
    align-items: baseline;
    margin-block-end: var(--spacing-s);
    overflow: hidden;
  }

  .header .search-recs .related-searches .search-recs-title-wrapper a {
    line-height: 1;
    display: block;
    max-width: 55%;
    overflow: clip;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-inline-end: 2rem;
    position: relative;
  }

  .header .search-recs .related-searches .search-recs-title-wrapper a::after {
    content: '';
    mask-image: url('../../icons/arrow-right.svg');
    mask-size: 90%;
    mask-repeat: no-repeat;
    mask-position: center center;
    background: currentColor;
    width: 2rem;
    aspect-ratio: 1/.7;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
  }

  .header .search-recs .related-searches .search-recs-title:not(.chp) {
    display: none;
  }

  .header .search-recs .related-searches .search-recs-title.chp {
    display: block;
    font: var(--body-font-family-bold);
    font-size: var(--body-font-size-s-bold);
    font-weight: var(--fw-bold);
    white-space: nowrap;
  }

  .header .search-recs .related-searches ul li:nth-child(n+6) {
    display: none;
  }

  .header .search-recs .top-results {
    display: initial;
    order: 2;
    padding: 0;
    border: none;
  }

  .header .search-recs .top-results .search-recs-title {
    display: none;
  }

  .header .search-recs .top-results ul {
    margin: 0;
    gap: var(--gutter-m);
  }

  @media (min-width: 640px) and (max-width: 1200px) {
    .header .search-recs .top-results ul {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .header .search-recs .top-results ul a div {
    margin-block-start: var(--gutter-s);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--body-font-size-3xs);
  }

  .header .search-recs .top-results img {
    aspect-ratio: var(--product-image-aspect-ratio);
    object-fit: cover;
  }

  .header .search-recs .categories {
    display: none;
  }

  .header .search-recs ul {
    font-size: var(--body-font-size-xs);
  }

  .header .search-recs ul li {
    padding: 0;
    border: none;
  }

  .header .search-recs .related-searches a,
  .header .search-recs .categories a {
    font-size: var(--body-font-size-xs);
  }


/* =============================================
=            flydown nav animation            =
============================================= */

  @media (width >=1024px),
  (min-width: 1024px) {
    @keyframes subMenuDropIn {
      0% {
        transform: scaleY(0);
      }

      100% {
        transform: scaleY(1);
      }
    }

    header.header-wrapper nav .nav-menu.animated .menu-expandable[aria-expanded] .menu-nav-dropdown .column {
      transform: scaleY(0);
      transform-origin: top;
    }

    header.header-wrapper nav .nav-menu.animated .menu-expandable[aria-expanded='true'] .menu-nav-dropdown .column {
      animation: .3s subMenuDropIn forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    header.header-wrapper nav .nav-menu.animated .menu-expandable[aria-expanded='true'] .menu-nav-dropdown .column.m-col-1 {
      animation-delay: .10s;
    }

    header.header-wrapper nav .nav-menu.animated .menu-expandable[aria-expanded='true'] .menu-nav-dropdown .column.m-col-2 {
      animation-delay: .14s;
    }

    header.header-wrapper nav .nav-menu.animated .menu-expandable[aria-expanded='true'] .menu-nav-dropdown .column.m-col-3 {
      animation-delay: .18s;
    }

    header.header-wrapper nav .nav-menu.animated .menu-expandable[aria-expanded='true'] .menu-nav-dropdown .column.m-col-4 {
      animation-delay: .22s;
    }

    header.header-wrapper nav .nav-menu.animated .menu-expandable[aria-expanded='true'] .menu-nav-dropdown .column.m-col-5 {
      animation-delay: .24s;
    }

    @media (prefers-reduced-motion) {
      header.header-wrapper nav .nav-menu.animated .menu-expandable[aria-expanded='true'] .menu-nav-dropdown .column {
        transform: scaleY(1);
      }
    }
  }

  /* =====  End of flydown nav animation  ====== */
}