.main-header--is-full-screen {
  --container-primary-margin : 4%;
}

.main-header {
  position : relative;
  z-index  : 5;
  color    : var(--color-grey-font-default);
}

.main-header a, .form__login.js-open-login-form .link-icon__text {
  text-decoration : none;
  color           : var(--color-black-default);
}

.form__login.js-open-login-form {
  cursor : pointer;
}

.header-logo h1 {
  margin : 0;
}

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

/*
--------------------------------------
Style général overlay
--------------------------------------
*/
.overlay-global-except-header {
  position         : fixed;
  top              : 0;
  z-index          : 2;
  width            : 100%;
  height           : 100vh;
  background       : rgba(0, 0, 0, 0);
  pointer-events   : none;
  transition       : all 0.3s ease-out 0.2s;
  transform        : scaleY(0);
  transform-origin : top;
}

.overlay-global-except-header--is-show {
  transition     : all 0.3s ease-out;
  pointer-events : all;
  transform      : scaleY(1);
  background     : rgba(0, 0, 0, .4);
}

/*
--------------------------------------
Header template
--------------------------------------
*/
.header-infos {
  background : white;
  padding    : 8px 0;
}

.header-message {
  padding        : 8px 0;
  background     : var(--color-primary);
  color          : white;
  text-align     : center;
  text-transform : uppercase;
}

.infos-links {
  display         : flex;
  justify-content : flex-end;
}

.header-burger {
  cursor : pointer;
}

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

.header-actions > * + * {
  margin-left : calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
}

.header-actions .link-icon a, .header-actions .link-icon .form__login {
  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);
  height              : 44px;
  width               : 44px;
}

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


.header-actions .link-icon__text {
  display : none;
}

.link-icon {
  position : relative;
}

.link-icon .cart-products-count,
.header-actions-footer__cart .cart-products-count {
  background    : var(--color-primary);
  border-radius : 100%;
  width         : 25px;
  line-height   : 25px;
  color         : white;
  text-align    : center;
}

.link-icon .cart-products-count {
  position  : absolute;
  top       : 0;
  right     : 0;
  transform : translate3d(50%, 0, 0);
}


.cart-products-count {
  display : inline-block;
}

/*********************
* Header login form
**********************/
.form__login {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
}

.login-form__open {
  position         : fixed;
  top              : 0;
  bottom           : 0;
  background-color : rgba(0, 0, 0, 0.75);
  box-shadow       : 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  width            : 100%;
  height           : 100%;
  z-index          : 999999;
  display          : none;
}

.login-form__open.active {
  display         : flex;
  align-items     : center;
  justify-content : center;
}

.login-form__container {
  display               : grid;
  grid-template-columns : 1fr;
  width                 : 100%;
  height                : 100%;
}

.login-form__container > * {
  grid-area : 1/1;
}

.login-form__content[data-tab="2"] {
  transform : translate3d(100%, 0, 0);
}

.login-form__content[data-tab="1"] {
  transform : translate3d(-100%, 0, 0);
}

.login-form__content {
  transition      : 0.3s ease;
  opacity         : 0;
  pointer-events  : none;
  visibility      : hidden;
  z-index         : 1;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  align-items     : center;
  height          : 100%;
  margin          : auto;
  position        : absolute;
  width           : 100%;
  overflow        : auto;
}

.login-form__content.active {
  transform      : translate3d(0, 0, 0);
  opacity        : 1;
  visibility     : visible;
  pointer-events : all;
  z-index        : 2;
}

.login-form__content__container {
  max-height : calc(100% - 100px);
}

.login-form__content__margin-bottom {
  height : 50px;
}

.login-form__content__inner {
  padding          : 40px 30px 30px;
  background-color : var(--color-white-default);
  border-radius    : 10px;
  width            : 600px;
}

.login-form__content__inner .title__content {
  text-align  : center;
  font-size   : calc(25px + (30 - 25) * ((100vw - 320px) / (1920 - 320)));;
  line-height : 38px;
}

#login-form .form-control, #customer-form .form-control {
  background-color : transparent;
  border           : none;
}

#customer-form .form-control {
  border-radius : 5px;
  border        : 1px solid #D1D1D1;
  overflow      : hidden;
}

#login-form .form-group-type {
  border-radius : 5px;
  border        : 1px solid #D1D1D1;
  overflow      : hidden;
}

#field-password {
  border-radius : 5px 0 0 5px !important;
}

.register-form__container {
  /*overflow: auto;*/
  /*max-height: calc(100% - 150px);*/
  padding-bottom : 15px;
}

.input-group .input-group-btn > .btn {
  background-color : transparent;
}

.forgot-password a {
  float           : right;
  color           : #566A77;
  font-size       : 13px;
  line-height     : 22px;
  text-decoration : underline;
}

.forgot-password a:hover {
  text-shadow : 0 0 .65px #555, 0 0 .65px #555;
}

#submit-login, button[data-link-action='save-customer'] {
  margin        : 1em 0;
  width         : 100%;
  height        : 50px;
  border-radius : 5px;
}

#submit-login:hover, button[data-link-action='save-customer']:hover {
  background-color : var(--color-white-default);
}

.no-account, .have-account {
  display          : flex;
  align-items      : center;
  justify-content  : center;
  background-color : white;
  height           : 50px;
  font-weight      : 600;
  border-radius    : 5px;
  color            : var(--color-primary);
  border           : 1px solid var(--color-black-default);
  text-transform   : uppercase;
  cursor           : pointer;
}

#customer-form div .form-group:first-child .form-control-label {
  visibility : hidden;
  opacity    : 0;
  display    : none;
}

#customer-form .custom-radio {
  margin-right : 5px;
}

#customer-form .form-group {
  margin : 0 0.5em;
}

#customer-form div .form-group:first-child .form-group-type .radio-inline:first-child {
  margin-right : 3em;
}

.login-form__header {
  display         : flex;
  justify-content : space-between;
}

.help-block .slick-slider .slick-list .slick-track .slick-slide {
  max-width : 500px;
}

.login-form__close.js-login-form-close {
  cursor : pointer;
}

.header-zipcode__popup {
  position        : absolute;
  top             : 100%;
  margin-top      : 15px;
  width           : 310px;
  background      : var(--color-white-default);
  padding         : 20px 35px 35px;
  z-index         : 10;
  border-radius   : 15px;
  box-shadow      : 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  display         : flex;
  justify-content : center;
  transition      : all 0.7s ease-in-out;
  right           : -80px;
}

svg.header-zipcode__popup-arrow {
  position : absolute;
  top      : -23px;
}

.header-zipcode__popup.hidden {
  display : none;
}

.header-zipcode__popup-inner {
  text-align : center;
}

.header-zipcode__popup-inner p {
  margin-top  : 10px;
  color       : var(--color-primary);
  text-align  : center;
  font-size   : 15px;
  font-style  : normal;
  font-weight : 500;
  line-height : normal;
}

.header-zipcode__popup-input, #zipcode-form_commune, #product-zipcode-form_communes, #cart-zipcode-commune, .cart-zipcode-widget__input.zipcode-valid {
  width         : 100%;
  padding       : 10px;
  border        : 1px solid #ccc;
  border-radius : 6px;
  margin-top    : 10px;
  margin-bottom : 10px;
}

#product-zipcode-form_communes {
  margin-bottom : 0;
}

#zipcode-form_commune, #product-zipcode-form_communes, #cart-zipcode-commune {
  -moz-appearance    : none;
  -webkit-appearance : none;
  appearance         : none;
  background         : white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=") no-repeat scroll right .5rem center/1.25rem 1.25rem;
  padding-right      : 2.5rem;
}

.header-zipcode__popup-btn {
  text-transform : initial;
  padding        : 14px 20px;
  width          : 100%;
}

.account-type__container {
  margin      : 10px 0;
  display     : flex;
  flex-wrap   : wrap;
  align-items : center;
  gap         : 10px;
}

.account-type__container a {
  max-height     : 34px;
  height         : 34px;
  text-transform : initial;
  padding        : 5px 1.25rem;
}

.account-type__container a.account-type__btn-pro {
  border     : 1px solid var(--color-secondary);
  color      : var(--color-secondary);
  background : transparent;
}

.account-type__container a.account-type__btn-pro:hover {
  background : var(--color-secondary);
  color      : var(--color-white-default);
}

.account-type__container a.account-type__btn-pro.active {
  background : var(--gradient-pro);
  border     : none;
  color      : var(--color-white-default);
}

.account-type__container a.account-type__btn-user:not(.active) {
  background : transparent;
  border     : 1px solid var(--color-secondary);
  color      : var(--color-secondary);
}

.account-type__container a.account-type__btn-user:not(.active):hover {
  background : var(--color-secondary);
  color      : var(--color-white-default);
}

.account-type__container a .btn-option {
  display     : flex;
  align-items : center;
}

/**
 * User Dropdown Menu Styles
 */

.user-dropdown {
  position : relative;
}

.user-dropdown-menu {
  position      : absolute;
  top           : calc(100% + 10px);
  right         : 0;
  min-width     : 250px;
  padding       : 15px 20px 20px;
  background    : var(--color-white-default);
  border-radius : 12px;
  box-shadow    : 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity       : 0;
  visibility    : hidden;
  transform     : translateY(-10px);
  transition    : all 0.3s ease-in-out;
  z-index       : 100;
  overflow      : hidden;
}

.user-dropdown:hover .user-dropdown-menu {
  opacity    : 1;
  visibility : visible;
  transform  : translateY(0);
}

.user-dropdown-header {
  padding     : 15px 20px 25px;
  color       : var(--color-primary);
  text-align  : center;
  font-size   : 17px;
  font-style  : normal;
  font-weight : 600;
  line-height : normal;
}

.user-dropdown-body {
  display        : flex;
  flex-direction : column;
  gap            : 10px;
}

.user-dropdown-item {
  display         : flex;
  align-items     : center;
  gap             : 12px;
  padding         : 12px 20px;
  color           : var(--color-black-default);
  text-decoration : none;
  font-size       : 14px;
  font-weight     : 500;
  transition      : all 0.2s ease-in-out;
}

.user-dropdown-item:hover {
  background : #f5f5f5;
  color      : var(--color-primary);
}

.header-actions .user-dropdown-menu .user-dropdown-item {
  width           : 100%;
  display         : flex;
  flex-direction  : row;
  align-items     : center;
  justify-content : center;
}

.header-actions .user-dropdown-menu .user-dropdown-item.user-dropdown-item--logout {
  background : none;
  border     : 1px solid var(--color-secondary);
  color      : var(--color-secondary);
  transition : all 0.3s ease-in-out;
}

.header-actions .user-dropdown-menu .user-dropdown-item.user-dropdown-item--logout:hover {
  background : var(--color-secondary);
  color      : var(--color-white-default);
}

.user-dropdown-item svg {
  flex-shrink : 0;
  stroke      : currentColor;
}

.user-dropdown-item--logout {
  border-top : 1px solid rgba(0, 0, 0, 0.05);
  color      : var(--color-danger, #dc3545);
}

.user-dropdown-item--logout:hover {
  background : rgba(220, 53, 69, 0.05);
  color      : var(--color-danger, #dc3545);
}

/* Animation arrow */
.user-dropdown-menu::before {
  content       : '';
  position      : absolute;
  top           : -8px;
  right         : 20px;
  width         : 0;
  height        : 0;
  border-left   : 8px solid transparent;
  border-right  : 8px solid transparent;
  border-bottom : 8px solid var(--color-secondary);
}