@keyframes animation-header-sticky {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes animation-header-sticky-collapse {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

.theme-sticky-header--sticky {
  display: contents;
}

.theme-sticky-header--sticky .header-section {
  position: sticky;
  inset-block-start: 0;
  z-index: calc(var(--z-index-sticky) - 1);
  animation: animation-header-sticky 0.26s ease-out forwards;
}

.theme-sticky-header--sticky.header-section--transparent .header-section {
  position: fixed;
  inset-block-start: 0;
}

.theme-sticky-header--sticky .header-section::after {
  content: '';
  z-index: -1;
  position: absolute;
  inset-block-end: 0;
  inset-inline: 10%;
  height: 20px;
  border-radius: 100%;
  box-shadow: 0 0 40px rgb(var(--color-border));
  transition: opacity 0.3s ease;
}

.theme-sticky-header--sticky-collapse .header-section {
  animation-name: animation-header-sticky-collapse;
}

.theme-sticky-header--sticky-collapse .header-section::after {
  opacity: 0;
}

.header-section--transparent .header-section {
  position: absolute;
  inset-block-start: auto;
  z-index: calc(var(--z-index-sticky) - 1);
  width: 100%;
}

.header-section--transparent .header-section,
.header-section--transparent .header-section::before {
  transition: background 0.3s ease;
}

.header-section--transparent:not(.theme-sticky-header--sticky) .header-section,
.header-section--transparent:not(.theme-sticky-header--sticky) .header-section::before {
  background: none;
}

.header-section--transparent-color:not(.theme-sticky-header--sticky) .header {
  --header-background-opacity: 0;
  --header-logo-opacity: 0;

  color: rgb(var(--color-transparent));
}

.header-section {
  --header-column-gap: 20px;
  --header-column-gap-mobile: 8px;
  --header-nav-dropdown-menu-z-index: 2;
}

.header {
  --header-logo-opacity: 1;
  --header-background-opacity: 1;
  --header-nav-animation: 0.3s ease;
  --header-nav-animation-delay: 0.1s;

  display: grid;
  column-gap: 16px;
  grid-template: "logo icons" /minmax(0, 1fr) auto;
}

.menu-drawer-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

@media (min-width: 960px) {
  .menu-drawer-button {
    display: none;
  }

  .header--left {
    grid-template: "logo navigation icons" /auto minmax(0, 1fr) auto;
  }

  .header--left-center {
    grid-template: "logo navigation icons" /minmax(0, 1fr) fit-content(70%) minmax(0, 1fr);
  }

  .header--left-drawer {
    grid-template: "logo icons" /minmax(0, 1fr) auto;
  }

  .header--left-drawer .header__menu {
    display: none;
  }

  .header--left-drawer .menu-drawer-button {
    display: flex;
  }

  .header--center-left {
    grid-template: "navigation logo icons" /minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .header--center-split {
    grid-template: "tools navigation logo navigation-split icons" /130px minmax(0, 1fr) auto minmax(0, 1fr) 130px;
  }

  .header--center-split .header__icons--start {
    display: flex;
  }

  .header--center-split .header__icons--start .search-drawer-button {
    order: -1;
  }

  .header--center-split .header__icons--end :is(.search-drawer-button, .comparison-modal-button, .header__menu) {
    display: none;
  }

  .header--center {
    grid-template: "tools logo icons" "navigation navigation navigation" /minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .header--center .header__icons--start {
    display: flex;
  }

  .header--center .header__icons--start .search-drawer-button {
    order: -1;
  }

  .header--center .header__icons--start .menu-toggle-button {
    order: -2;
  }

  .header--center .header__icons--end :is(.search-drawer-button, .comparison-modal-button, .header__menu) {
    display: none;
  }

  .header-nav-scrolled .header--center .header__menu:not(.active) {
    display: none;
  }

  .header-section:not(.header-nav-scrolled) .header--center .menu-toggle-button {
    display: none;
  }

  .header--center-drawer {
    grid-template: "tools logo icons" /minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .header--center-drawer .header__icons--start {
    display: flex;
  }

  .header--center-drawer .header__icons--start .menu-drawer-button {
    display: flex;
  }

  .header--center-drawer .header__icons--start .header__buttons {
    flex-direction: row-reverse;
    column-gap: 32px;
  }

  .header--center-drawer .header__icons--start :is(.search-drawer-button, .comparison-modal-button),
  .header--center-drawer .header__icons--end .header__menu,
  .header--center-drawer .header__menu {
    display: none;
  }

  :is(.header--left, .header--center-split) .header__menu {
    padding-inline: 20px;
  }

  .header--center .header__menu {
    padding-block-start: 32px;
  }
}

@media (max-width: 959px) {
  .mobile\:header--center {
    grid-template: "tools logo icons" /minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .mobile\:header--center .header__icons--start {
    display: flex;
  }

  .mobile\:header--center .header__icons--end :is(.search-drawer-button, .menu-drawer-button) {
    display: none;
  }

  .mobile\:header--center .header__logo {
    text-align: center;
    margin-inline: auto;
  }

  .menu-drawer-button {
    order: -1;
  }
}

.header__logo {
  grid-area: logo;
  max-width: max-content;
}

@media (max-width: 959px) {
  .header__logo {
    max-width: calc(100vw - 192px);
    text-align: start;
    margin-inline-end: auto;
  }
}

@media (pointer: fine) {
  .header__logo :is(a, img) {
    transition: opacity var(--header-nav-animation) var(--header-nav-animation-delay);
  }

  .header__logo a.h3 {
    transition-property: color;
  }
}

.header__logo a,
.header__logo a:hover {
  color: inherit;
  text-decoration: none;
}

.header__logo .has-white-logo .logo {
  opacity: var(--header-logo-opacity);
}

.header__logo .white-logo {
  opacity: calc(1 - var(--header-logo-opacity));
}

.header__menu {
  grid-area: navigation;
  transition: color var(--header-nav-animation) var(--header-nav-animation-delay)
}

.header__menu--split {
  grid-area: navigation-split;
}

.header__icons {
  grid-area: icons;
}

.header__icons--start {
  display: none;
  grid-area: tools;
}

@media (pointer: fine) {
  .header__buttons {
    transition: color var(--header-nav-animation) var(--header-nav-animation-delay)
  }
}

.header__icons--end .header__buttons {
  justify-content: flex-end;
}

.header__buttons {
  margin-inline: -12px;
}

.header__buttons>:is(a, button) {
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 12px;
  white-space: nowrap;
  background: none;
  border: none;
  flex-shrink: 0;
}

.header__buttons .cart-drawer-button .cart-bubble {
  height: 24px;
  min-width: 24px;
  border-radius: 999px;
  color: rgb(var(--color-background));
  background-color: rgb(var(--color-text));
}

.header__buttons .cart-drawer-button .cart-bubble:empty {
  display: none;
}

@media (max-width: 959px) {

  .header__buttons .header__btn,
  .header__buttons .header__btn>* {
    display: inline-flex;
  }

  .header__buttons>:is(a, button) {
    padding-inline: 6px;
  }
}

.header .localization__selector {
  font-size: var(--sort-navigation-size);
  text-transform: var(--sort-navigation-text-transform);
}

.header .localization__selector::before {
  content: none;
}

.header .localization__selector>.icon {
  inset-inline-end: 0;
}

.header .localization__selector>select {
  height: auto;
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 20px;
}

.header-menu__badge {
  font-size: 10px;
  padding: 4px 6px;
  transform: translateY(25%);
  color: rgb(var(--color-tag-text));
  background-color: rgb(var(--color-tag-background));
}

.header-menu__badge::before {
  content: '';
  position: absolute;
  inset-block-end: -5px;
  inset-inline-start: 8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-block-start-width: 5px;
  border-block-end-width: 0;
  border-inline-end-width: 8px;
  border-inline-start-width: 0;
  border-color: transparent;
  border-block-start-color: rgb(var(--color-tag-background));
}

.header-menu__badge--outline {
  box-shadow: inset 0 0 0 2px currentColor;
}

.header-menu__badge--outline::before {
  border-block-start-color: currentColor
}

.nav-drawer__menu .header-menu__badge {
  transform: translate(calc(60% * var(--transform-logical)), 60%);
}

.comparison-modal-button.loading {
  pointer-events: none;
}

.comparison-modal-button.loading .icon-compare {
  animation: animation-circling 1.2s linear infinite;
}

.comparison-modal-button sup {
  margin-inline-start: 3px;
  inset-block-start: -3px;
}