#header {
  --hh-header-gutter: var(--hh-gutter);
  color: var(--hh-text);
  background: var(--hh-bg);
  border-bottom: 1px solid var(--hh-line);
  box-shadow: none;
}

#header a {
  color: inherit;
  text-decoration: none;
}

#header a:hover,
#header a:focus {
  color: var(--hh-terracotta-ink);
  text-decoration: none;
}

.hh-header__inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--hh-max);
  margin-inline: auto;
  padding-inline: var(--hh-header-gutter);
}

.hh-icon {
  display: block;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}

#header .header-nav {
  max-height: none;
  margin: 0;
  border-bottom: 1px solid var(--hh-line);
}

.hh-header-mobile {
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 3.75rem;
  padding-inline: 0.5rem;
}

#header .header-nav .hh-header-mobile__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  color: var(--hh-text);
  background: none;
  border: 0;
  cursor: pointer;
}

.hh-header-mobile__logo {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.hh-header-mobile__logo .logo {
  width: clamp(7.5rem, 38vw, 10rem);
  height: auto;
}

.hh-header-mobile__actions {
  display: flex;
  align-items: center;
}

#header .user-info,
#header .header-nav .user-info {
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

#header .user-info a,
#header .blockcart .header,
#header .blockcart .header > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  justify-content: center;
}

#header .user-info a + a {
  margin-left: 1rem;
}

#header .header-nav .blockcart {
  position: relative;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

#header .header-nav .cart-preview.active {
  background: transparent;
}

#header .header-nav .blockcart .header {
  margin: 0;
}

#header .header-nav .blockcart a,
#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i,
#header .header-nav .blockcart.active a:hover {
  color: inherit;
}

#header .cart-products-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--hh-cream);
  background: var(--hh-terracotta-ink);
  border-radius: 999px;
}

#header .cart-preview.inactive .cart-products-count {
  color: var(--hh-text);
  background: var(--hh-oat);
}

.hh-header-mobile .cart-products-count {
  position: absolute;
  top: 0.25rem;
  right: 0.125rem;
}

#header .header-top {
  padding: 0;
}

.hh-main__row {
  gap: 1rem;
  padding-block: 0.625rem 0.75rem;
}

.hh-main__logo {
  flex: 0 0 auto;
}

.hh-main__logo .logo {
  width: 12.5rem;
  max-width: none;
  height: auto;
}

.hh-main__nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 0;
}

#header .hh-main__nav .menu {
  display: block;
  margin: 0;
  padding: 0;
}

#_desktop_top_menu .top-menu[data-depth="0"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin: 0;
}

#_desktop_top_menu .top-menu[data-depth="0"] > li {
  float: none;
}

#header .header-top a[data-depth="0"],
#header .top-menu a[data-depth="0"] {
  display: inline-block;
  padding: 0.75rem 0.875rem;
  font-family: var(--hh-font-body);
  font-size: 0.9375rem;
  font-weight: 450;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--hh-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

#header .top-menu a[data-depth="0"]:hover,
#header .top-menu a[data-depth="0"]:focus,
#header .top-menu .current > a[data-depth="0"] {
  color: var(--hh-terracotta-ink);
  text-decoration: underline;
  text-decoration-color: var(--hh-terracotta);
}

.top-menu .sub-menu a:hover,
.dropdown:hover .expand-more {
  color: var(--hh-terracotta-ink);
}

#header #search_widget {
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  overflow: visible;
}

#header #search_widget form {
  position: relative;
}

#header #search_widget form i {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--hh-muted);
  transform: translateY(-50%);
}

#header #search_widget form i.search {
  left: 0;
  pointer-events: none;
}

#header #search_widget form i.clear {
  display: none;
  right: 0;
  padding: 0.75rem;
  cursor: pointer;
}

#header #search_widget form input[type=text] {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 2.75rem;
  padding: 0.5rem 2.25rem 0.5rem 1.875rem;
  font-family: var(--hh-font-body);
  font-size: 1rem;
  color: var(--hh-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hh-line);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

#header #search_widget form input[type=text]::placeholder {
  color: var(--hh-muted);
  opacity: 1;
}

#header #search_widget form input[type=text]:hover {
  border-bottom-color: var(--hh-muted);
}

#header #search_widget form input[type=text]:focus {
  color: var(--hh-text);
  background: transparent;
  border-bottom-color: var(--hh-terracotta-ink);
  outline: 2px solid var(--hh-focus);
  outline-offset: 2px;
}

#header #search_widget form input[type=text]:focus:not(:focus-visible) {
  outline: 0;
}

#mobile_top_menu_wrapper {
  display: none;
  padding: 0.5rem var(--hh-header-gutter) 1rem;
  background: var(--hh-bg);
  border-top: 1px solid var(--hh-line);
}

#mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
  display: block;
  min-height: 2.75rem;
  padding: 0.875rem 0;
  font-family: var(--hh-font-heading);
  font-size: 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid var(--hh-line);
}

#mobile_top_menu_wrapper .js-top-menu-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--hh-text);
}

@media (min-width: 768px) {
  #header .header-nav {
    color: var(--hh-cream);
    background: var(--hh-charcoal);
    border-bottom: 0;
  }

  .hh-utility__desktop {
    justify-content: space-between;
    min-height: 2.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .hh-utility__desktop a:hover,
  .hh-utility__desktop a:focus,
  #header .hh-utility__desktop a:hover,
  #header .hh-utility__desktop a:focus {
    color: var(--hh-mustard);
  }

  .hh-utility__desktop {
    --hh-focus: var(--hh-mustard);
  }

  #header .header-nav #_desktop_contact_link,
  #header .header-nav #_desktop_contact_link #contact-link {
    margin: 0;
  }

  .hh-utility__end {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .hh-utility__desktop .hh-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  #header .header-nav .language-selector,
  #header .header-nav .currency-selector {
    margin: 0;
  }

  .hh-main__row {
    gap: clamp(2rem, 4vw, 4rem);
    min-height: 5.5rem;
    padding-block: 1.25rem;
  }

  #header #search_widget {
    flex: 0 1 17rem;
    width: auto;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .hh-main__nav {
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  #_desktop_top_menu .top-menu[data-depth="0"] {
    margin-left: -0.875rem;
  }

  .hh-main__logo .logo {
    width: 11rem;
  }
}