/*
--------------------------------------
layout
--------------------------------------
*/
.main-header {
  display               : grid;
  grid-template-columns : 25px auto auto auto auto auto 25px;
  align-items           : center;
}

.header-bg {
  grid-column : 1/-1;
  grid-row    : 1/4;
  align-self  : stretch;
  background  : white;
  z-index     : 4;
}

.is-pro .header-bg {
  background : var(--color-tertiary);
}

.header-banner,
.header-infos,
.header-burger,
.header-logo,
.header-actions {
  z-index : 4;
}

.header-search {
  z-index : 3;
}

.header-burger,
.header-logo,
.header-actions {
  padding : 15px 0;
}

.header-banner,
.header-infos {
  grid-column : 1/-1;
}

.header-banner {
  grid-row : 1;
}

.header-infos {
  grid-row : 2;
}

.header-burger,
.header-logo,
.header-actions {
  grid-row : 3;
}

.header-search {
  grid-row : 4;
  padding  : 10px 0;
}

.header-burger {
  grid-column : 2;
}

.header-logo {
  grid-column : 3;
}

.header-actions {
  grid-column : 6;
  grid-row    : 3;
  align-self  : stretch;
}

.header-search {
  grid-column : 2/-2;
}

.header-nav {
  z-index : 5;
}

.header-contact a {
  opacity     : 0.7;
  color       : var(--color-primary);
  font-size   : 15px;
  font-style  : normal;
  font-weight : 500;
  line-height : normal;
}

.is-pro .header-contact a {
  color : var(--color-white-default);
}

.header-contact a:hover {
  opacity : 1;
}

.header-zipcode {
  grid-column   : 5;
  grid-row      : 3;
  z-index       : 5;
  padding-right : calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
  position      : relative;
}

.header-contact {
  grid-column : 4;
  grid-row    : 3;
  z-index     : 4;
  gap         : 10px;
}

.header-actions, .header-zipcode, .header-contact {
  display         : flex;
  align-items     : center;
  justify-content : flex-end;
}

@media (max-width : 375px) {
  .header-logo {
    display : none;
  }
}

@media (max-width : 650px) {

  .header-nav {
    z-index : 6;
  }

  .header-banner_shop-info, .header-zipcode__value, .header-zipcode__arrow {
    display : none !important;
  }

  .header-banner_container .header-banner_container-primary {
    justify-content : flex-end;
  }

  .header-zipcode .header-zipcode__input, .header-zipcode .header-zipcode__input svg {
    width   : 44px;
    height  : 44px;
    padding : 0;
  }

  .header-zipcode {
    padding-right : 0;
  }

  .header-zipcode__popup {
    width : 280px;
    right : -110px;
  }

  .header-zipcode__bg {
    fill : var(--color-secondary);
  }

  .header-zipcode__icon {
    fill : var(--color-white-default);
  }
}

@media (max-width : 920px) {
  .header-contact, .header-banner {
    display : none !important;
  }
}

@media (max-width : 1199px) {
  .header-nav {
    z-index : 6;
  }

  .bwa-menu__top__wrapper {
    background : var(--color-white-default);
    max-width  : 500px;
  }

  .main-header .bwa-menu__top__wrapper .bwa-menu__title[data-depth="0"] {
    justify-content : flex-start;
  }

  .header-banner_container .header-banner_container-primary {
    gap : 20px;
  }

  .header-logo {
    padding : 15px 15px 15px 0;
  }

  .is-pro .icon_for_menu {
    color : var(--color-white-default);
  }

  .icon_for_menu {
    color : var(--color-primary);
  }

  .header-zipcode__popup-overlay {
    z-index : 3 !important;
  }

  .header-search {
    opacity    : 1;
    visibility : visible;
    max-height : 100px;
    transition : opacity 0.3s ease, visibility 0.2s ease, max-height 0.3s ease, padding 0.3s ease;;
    overflow   : hidden;
  }

  .header--is-scrolled .header-search {
    opacity    : 0;
    visibility : hidden;
    max-height : 0;
    padding    : 0;
  }

  .header-search-trigger.js-header-search-trigger {
    display : none;
  }
}

@media (min-width : 1200px) {
  .main-header {
    grid-template-columns : 25px auto 1fr auto auto auto 25px;
  }

  .header-search {
    padding : 15px 0;
  }

  .header-search {
    grid-row : 4;
  }

  .header-banner,
  .header-infos {
    grid-column : 1/-1;
  }

  .header-burger {
    grid-column : 2;
  }

  body[data-is-desktop="true"] .header-burger {
    display : none;
  }

  .header-logo {
    grid-column : 2;
  }

  .header-nav.js-header-nav {
    grid-column : 3;
    grid-row    : 3;
    width       : fit-content;
    height      : 100%;
    display     : flex;
    align-items : center;
  }

  .header-contact {
    grid-column : 4;
    grid-row    : 3;
    z-index     : 4;
    display     : flex;
    gap         : 15px;
    padding     : 0 15px;
  }

  .header-zipcode {
    grid-column     : 5;
    grid-row        : 3;
    z-index         : 6;
    padding         : 0 15px;
    position        : relative;
    display         : flex;
    justify-content : center;
  }

  .header-actions {
    grid-column  : 6;
    padding-left : 10px;
  }

  .header-search-trigger-text {
    display : none;
  }

  .header-search-trigger-icon {
    display             : flex;
    flex-direction      : column;
    align-items         : center;
    text-align          : center;
    background          : var(--color-secondary);
    background-position : left center;
    transition          : background-position .7s ease-in-out, color .6s ease-in-out;
    padding             : 10px;
    border-radius       : 50px;
    color               : var(--color-white-default);
    cursor              : pointer;
    height              : 44px;
    width               : 44px;
  }

  .header-search-trigger-icon:hover, .header-actions .link-icon .form__login:hover {
    background          : var(--gradient-user-context);
    background-size     : 200% 200%;
    background-position : right center;
  }

  .header-search.js-header-search {
    opacity    : 0;
    visibility : hidden;
    transition : opacity 0.5s ease, visibility 0.2s ease, max-height 0.5s ease, padding 0.5s ease;;
    overflow   : hidden;
    max-height : 0;
    padding    : 0;
  }

  .header-search.js-header-search.is-active {
    opacity    : 1;
    max-height : 100px;
    visibility : visible;
    padding    : 15px 0;
  }
}

/*
--------------------------------------
global
--------------------------------------
*/

body[data-is-desktop="true"] .main-header {
  padding-bottom : 0;
}

.header-zipcode__input {
  display         : flex;
  align-items     : center;
  gap             : 5px;
  width           : 175px;
  border-radius   : 50px;
  background      : #F3F7FA;
  padding         : 5px 17px 6px 5px;
  justify-content : space-between;
  cursor          : pointer;
}

.is-pro .header-zipcode__input {
  background : #323A57;
}

.header-zipcode__value {
  color         : var(--color-primary);
  font-size     : 14px;
  font-style    : normal;
  font-weight   : 500;
  line-height   : normal;
  opacity       : 0.7;
  transition    : all 0.3s ease-out;
  max-width     : 93px;
  white-space   : nowrap;
  text-overflow : ellipsis;
  overflow      : hidden;
}

.header-zipcode__input:hover .header-zipcode__value {
  opacity : 1;
}

.is-pro .header-zipcode__value {
  color : var(--color-white-default);
}

.is-pro .header-zipcode__arrow {
  color      : var(--color-white-default);
  transition : all 0.3s ease-out;
}

.header-zipcode__input:hover .header-zipcode__arrow {
  color : var(--color-primary);
}

.is-pro .header-zipcode__input:hover .header-zipcode__arrow {
  color : var(--color-white-default);
}

.header-zipcode__popup-overlay {
  background      : rgba(232, 232, 237, .5);
  width           : 100vw;
  height          : 100vh;
  position        : absolute;
  top             : 100%;
  right           : 0;
  z-index         : 5;
  backdrop-filter : blur(3px);
  transition      : all 0.5s ease-out;
}

/*
--------------------------------------
Search
--------------------------------------
*/
.search-widget {
  width : 100%;
}

.search-widget form {
  position    : relative;
  display     : flex;
  align-items : center;
}


.search-widget input[type=text] {
  border-radius : 30px;
  width         : 100%;
  padding       : 10px;
  padding-left  : 2em;
  color         : var(--color-grey-font-default);
  border        : 1px solid rgba(0, 0, 0, .25);
  transition    : all .3s ease-out;
}

.search-widget form input[type=text]:focus {
  border-color : var(--color-primary);
  outline      : none;
}

.search-widget form button[type=submit] {
  position        : absolute;
  right           : 0;
  height          : 100%;
  display         : flex;
  justify-content : center;
  align-items     : center;
  padding         : 0 15px;
  text-align      : center;
  color           : #fff;
  background      : #323A57;
  border          : 1px solid var(--color-primary);
  border-radius   : 0 30px 30px 0;
}

.search-widget form input[type=text]:focus + button .search {
  color : white;
}

@media (min-width : 1200px) {
  .search-widget form input[type=text] {
    min-height : 42px;
  }
}

.bwa-menu__top__wrapper[data-is-desktop="false"] .bwa-menu__title > svg, .bwa-menu__top__wrapper[data-is-desktop="false"] .bwa-menu__main-item > .bwa-menu__link-title > img {
  width        : 22px;
  margin-right : 5px;
}