main {
  margin-top: 80px;
}

header {
  padding: 20px 0px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background-color: var(--white1);
  transition: all 1s ease;
  max-width: 100%;
}

header.active-scroll {
  box-shadow: 0 0 15px #DCDCDD;
  transition: all 1s ease;
}

.header-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left-side {
  display: flex;
  gap: 42px;
  align-items: center;
  height: 34px;
}

.header-right-side {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
}

/* Header left side links div */
.header-left-side > div > div > ul {
  display: flex;
  gap: 30px;
} 

/* Individual text links */
.header-left-side > div > div > ul a, #brands_button {
  font-family: "OpenSans-SemiBold";
  font-size: 16px;
  font-weight: 600;
  line-height: 21.79px;
  color: var(--black2);
  transition: 0.5s ease all;
  text-align: center;
} 

.header-left-side > div > div > ul > li {
  border-bottom: 1px solid transparent;
  transition: 0.3s ease all;
}

.header-left-side > div > div > ul > li:hover {
  border-bottom: 1px solid var(--blue1);
  transition: 0.3s ease all;
} 

.header-left-side > div > div > ul a:hover {
  color: var(--black1);
  transition: 0.3s ease all;
} 

.header-search-div {
  display: flex;
}

.header-search-div input {
  padding: 10.5px 16px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-left: 1px solid var(--greyBorder);
  border-top: 1px solid var(--greyBorder);
  border-bottom: 1px solid var(--greyBorder);
  border-right: none;
  transition: 0.3s ease all;
  color: var(--black1);
}

.header-search-div input::-webkit-input-placeholder {
  color: var(--grey2);
  opacity: 1;
}

.header-search-div input::-moz-placeholder {
  color: var(--grey2);
  opacity: 1;
}

.header-search-div input:-ms-input-placeholder {
  color: var(--grey2);
  opacity: 1;
}

.header-search-div input::-ms-input-placeholder {
  color: var(--grey2);
  opacity: 1;
}

.header-search-div input::placeholder {
  color: var(--grey2);
  opacity: 1;
}

.header-search-div input::-ms-input-placeholder {
  color: var(--grey2);
}

.header-search-div:hover input, .header-search-div input:focus, .header-search-div input:not(:placeholder-shown) {
  border-left: 1px solid var(--blue1);
  border-top: 1px solid var(--blue1);
  border-bottom: 1px solid var(--blue1);
  transition: 0.3s ease all;
}

.header-search-div {
  height: 40px;
}

.header-search-div button {
  background-color: var(--blue1);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease all;
  border: none;
  cursor: pointer;
}

.header-search-div button:hover {
  background-color: var(--hoverBlue);
  transition: 0.3s ease all;
}

.header-right-side > a, .header-right-side > button {
  width: 40px;
  height: 40px;
  display: flex;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s ease all;
}

.active-header-link {
  background-color: var(--blue2);
}

#user-profile.active-header-link {
  pointer-events: none;
}

.header-right-side > a path, .header-right-side > button path {
  stroke: var(--black2);
  transition: 0.3s ease all;
}

.header-right-side > a:hover path, .header-right-side > button:hover path, .active-header-link path, .active-header-link path, .header-right-side > a.active-header-link path, .header-right-side > button.active-header-link path {
  stroke: var(--blue1);
  transition: 0.3s ease all;
}

.header-right-side > button {
  background-color: transparent;
  border: unset;
}

.header-left-side > div, .header-left-side > div > div, .header-left-side > div > div > ul, .header-left-side > div > div > ul > li {
  height: 100%;
  display: flex;
  align-items: center;
}

.header-left-side > div {
  display: flex;
  gap: 30px;
}

#brands_button {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--black2); 
  border: unset;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: 0.3s ease all;
  cursor: pointer;
  height: 100%;
}

#brands_button:hover::after {
  position: absolute;
  content: "";
  top: 5px;
  bottom: -50px;
  left: -10px;
  right: -10px;
  background-color: transparent;
  pointer-events: auto;
}

#brands_button:hover {
  border-bottom: 1px solid var(--blue1);
  transition: 0.3s ease all;
  color: var(--black1);
}

#brands_button svg {
  transform: scaleY(-1);
  transition: 0.2s ease all;
}

#brands_button:hover svg {
  transform: scaleY(1);
  transition: 0.2s ease all;
}

#brands_button path {
  stroke: var(--black2);
  transition: 0.3s ease all;
}

#brands_button:hover path {
  stroke: var(--black1);
  transition: 0.3s ease all;
}

#brands_list {
  opacity: 0;
  position: absolute;
  width: 100%;
  padding: 12px 50px 0px 50px;
  height: 307px;
  z-index: 1;
  right: 0;
  left: 0;
  top: 81px;
  pointer-events: none;
  transition: 0.5s opacity;
  border-bottom: 1px solid var(--greyBorder);
  background-color: white;
}

#mobile-submenu, #languages-submenu {
  opacity: 0;
  position: absolute;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  background-color: white;
  z-index: 1;
  left: 0;
  top: 108px;
}

.header-right-side #languages-submenu > a:hover {
  border-bottom: 1px solid var(--blue1);
  transition: 0.3s ease all;
}

#brands_list > div {
  background-color: white;
  width: 100%;
  height: 100%;
  padding-bottom: 24px;
}

header:has(#brands_button:hover), header:has(#brands_list:hover) {
  border-bottom: 1px solid var(--greyBorder);
}

header:has(#brands_button:hover) #brands_list {
  opacity: 1;
  transition: 0.5s opacity;
  pointer-events: all;
}

#brands_list:hover {
  pointer-events: all;
  opacity: 1;
  transition: 0.5s opacity;
}

header:has(#brands_list:hover) #brands_button svg {
  transform: scaleY(1);
  transition: 0.2s ease all;
}

header:has(#brands_list:hover) #brands_button {
  border-bottom: 1px solid var(--blue1);
  transition: 0.3s ease all;
  color: var(--black1);
}

header:has(#brands_list:hover) #brands_button path {
  stroke: var(--black2);
  transition: 0.3s ease all;
}

.brands-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  row-gap: 0px;
}

.brands-container > a {
  color: var(--black1);
  padding: 14px 16px 13px 16px;
  border-bottom: 1px solid var(--greyBorder);
  transition: 0.3s ease all;
  cursor: pointer;
  height: fit-content;
}

.brands-container > a:hover {
  background-color: var(--blue2);
  border-bottom: 1px solid var(--blue1);
  transition: 0.3s ease all;
}

#mobile-nav-hamburger, #close-icon {
  display: none;
}

#header-languages-selection {
  position: relative;
}

#header-languages-selection:hover #languages-submenu {
  opacity: 1;
  top: 60px;
  left: unset;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-top: 1px solid var(--blue1);
  padding: 12px;
  pointer-events: all;
}

#languages-submenu {
  display: flex;
  flex-direction: column;
  pointer-events: none;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

#languages-submenu:hover {
  pointer-events: all;
}

#languages-submenu > a {
  padding: 11.5px 20px;
  border-bottom: 1px solid var(--greyBorder);
  cursor: pointer;
}

#languages-submenu > a:hover {
  background-color: var(--blue2);
}

#languages-submenu > a.active-lang {
  border-bottom: 1px solid var(--blue1);
}

#header-languages-selection:hover::after {
  position: absolute;
  content: "";
  top: 5px;
  bottom: -50px;
  left: -10px;
  right: -10px;
  background-color: transparent;
  pointer-events: auto;
}

#brands_go_back {
  display: none;
}

/* Hides items in cart when empty */
#cart-items-count[data-cart-count="0"] {
  display: none;
}

.cart-btn {
  position: relative;
}

#cart-items-count {
  position: absolute;
  top: -10px;
  right: -3px;
  border-radius: 50%;
  color: var(--white1);
  background-color: var(--blue1);
  padding: 0px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}

.header-navigation li.current_page_item {
  border-bottom: 1px solid var(--blue1);
}

#mobile-submenu li.current_page_item a {
  pointer-events: none;
}

@media screen and (max-width:1310px) {
  .header-search-div input {
    max-width: 130px;
  }
}

@media screen and (max-width:1250px) {
  .header-search-div input {
    max-width: 115px;
  }
}

@media screen and (max-width:1230px) {

  #mobile-submenu li.current_page_item a {
    background-color: var(--blue2);
  }

  main {
    margin-top: 125px;
  }

  .header-search-div input {
    max-width: unset;
  }

  #mobile-nav-hamburger {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .opened-submenu #mobile-nav-hamburger {
    background-color: var(--blue2);
    border: 1px solid var(--blue2);
  }

  .opened-submenu #mobile-nav-hamburger:hover {
    border: 1px solid var(--blue1);
  }

  #close-icon path {
    stroke: var(--blue1);
  }

  .opened-submenu #mobile-nav-hamburger #hamburger-icon{
    display: none;
  }

  .opened-submenu #mobile-nav-hamburger #close-icon{
    display: block;
  }

  .header-left-side > div {
    display: none;
  }

  .header-search-div {
    display: none;
  }

  .header-right-side button, .header-right-side a {
    border: 1px solid var(--greyBorder);
    width: 70px;
  }

  .header-right-side button:hover, .header-right-side a:hover {
    border: 1px solid var(--blue1);
    background-color: var(--blue2);
  }

  .active-header-link, .header-right-side > a.active-header-link, .header-right-side > button.active-header-link {
    border: 1px solid var(--blue1);
  }

  .header-left-side {
    width: 100%;
    justify-content: space-between;
    padding-right: 8px;
  }

  header:has(.header-navigation.opened-submenu) .header-right-side > div {
    display: flex;
    order: 1;
  }

  .header-right-side {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    row-gap: 16px;
    flex-wrap: wrap;
    margin-left: 0px;
  }

  .header-navigation {
    flex-wrap: wrap;
    gap: 12px;
  }

  .header-right-side button, .header-right-side a {
    width: 100%;
    flex: 0.25;
  } 
  
  .header-search-div > input, .header-search-div {
    width: 100%;
  }
  
  .header-search-div > button {
    border: 1px solid transparent;
    padding: 11px 26px;
  }

  #mobile-submenu ul {
    list-style-type: none;
  }

  .opened-submenu ~ #mobile-submenu {
    display: flex;
  }

  #mobile-submenu {
    display: none;
    position: initial;
    opacity: 1;
    justify-content: space-between;
    padding-top: 12px;
    flex-direction: column;
    pointer-events: all;
  }

  #cart-items-count {
    top: -13px;
    right: -5px;
    padding: 2.5px 8.5px;
    font-size: unset;
  }

  #header-languages-selection #languages-submenu {
    padding: 12px 0px 0px 0px;
  }

  #header-languages-selection:hover #languages-submenu {
    opacity: 0;
    top: 108px;
    left: 0px;
    height: 100vh;
    width: 100%;
    border-top: none;
    padding: 12px 0px 0px 0px;
    pointer-events: none;
  }

  header:has(.header-navigation.opened-languages-menu) #header-languages-selection #languages-submenu {
    opacity: 1;
    pointer-events: all;
    height: 100vh;
  }

  #header-languages-selection:hover::after {
    position: unset;
    display: none;
    pointer-events: none;
    width: 0px;
    height: 0px;
  }

  .header-left-side {
    padding-right: 0px;
    height: 40px;
  }

  .logo-div {
    width: 156px;
    height: 26px;
  }

  header {
    padding: 16px 0px;
  }

  .header-navigation.opened-languages-menu #header-languages-selection {
    background-color: var(--blue2);
    border: 1px solid var(--blue1);
  }

  .header-navigation.opened-languages-menu #header-languages-selection path {
    stroke: var(--blue1);
  }

  .header-search-div > button:hover {
    background-color: var(--hoverBlue);
  }

  .header-search-div > button svg {
    width: 18px;
    height: 18px;
  }

  header:has(.header-navigation.opened-languages-menu) #languages-submenu, header:has(.header-navigation.opened-languages-menu) #languages-submenu:hover {
    opacity: 1;
    pointer-events: all;
  }

  #languages-submenu {
    display: flex;
    flex-direction: column;
  }

  #mobile-submenu > div > button {
    padding: 16px 20px;
  }

  .header-right-side #languages-submenu > a {
    border: none;
    border-bottom: 1px solid transparent;
    padding: 16px 20px;
    text-align: start;
    transition: 0.3s ease all;
    flex: none;
  }

  .header-right-side #languages-submenu > a.active-lang {
    background-color: var(--blue2);
    pointer-events: none;
  }

  #brands_button_mobile {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    transition: 0.3s ease all;
  }

  #brands_button_mobile svg {
    transform: rotate(90deg);
  }

  #brands_button_mobile:hover {
    background-color: var(--blue2);
    border-bottom: 1px solid var(--blue1);
    transition: 0.3s ease all;
  }

  #mobile-submenu > div > div ul a{
    display: flex;
    width: 100%;
    padding: 16px 20px;
    border-bottom: 1px solid transparent;
    transition: 0.3s ease all;
  }

  #mobile-submenu > div > div ul a:hover {
    background-color: var(--blue2);
    border-bottom: 1px solid var(--blue1);
    transition: 0.3s ease all;
  }

  #header-languages-selection {
    position: unset;
    flex: 0.25;
  }

  .active-header-link {
    color: var(--blue1);
    border: 1px solid var(--blue1);
  }

  #brands_list > div {
    overflow: auto;
    height: calc(100vh - 205px);
    flex-wrap: unset;
    display: flex;
    flex-direction: column;
  }

  .brands-container > a {
    border-bottom: 1px solid transparent;
  }

  #brands_list, #brands_list:hover {
    padding: 0px;
    padding-bottom: 20px;
    padding-top: 12px;
    top: revert;
    border: none;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    transition: none;
    opacity: 0;
    pointer-events: none;
  }

  #brands_list.opened-brands-submenu, #brands_list:hover.opened-brands-submenu {
    opacity: 1;
    z-index: 2;
    pointer-events: all;
    transition: none;
  }

  #brands_go_back {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background-color: var(--blue2);
    color: var(--blue1);
    border: none;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  #brands_go_back svg {
    transform: rotate(270deg);
  }

  #brands_go_back svg path {
    stroke: var(--blue1);
  }

  html:has(.opened-submenu) {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  html:has(.opened-submenu)::-webkit-scrollbar { 
      display: none;
  }
}

@media screen and (max-width:1100px) {

  .header-left-side {
    gap: 21px;
  }

  .header-left-side > div, .header-left-side > div > div > ul {
    gap: 21px;
  }
}

@media screen and (max-width:767px) {
  #cart-items-count {
    padding: 3.5px 8.5px;
  }
}