@-webkit-keyframes slideUp {
  0% {
    transform: translateY(0);
    visibility: visible
  }

  to {
    transform: translateY(-100%);
    visibility: hidden
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
    visibility: visible
  }

  to {
    transform: translateY(-100%);
    visibility: hidden
  }
}

@-webkit-keyframes slideDown {

  0%,
  to {
    transform: translateY(0);
    visibility: visible
  }

  25% {
    transform: translateY(-100%);
    visibility: hidden
  }

  50% {
    transform: translateY(100%);
    visibility: hidden
  }
}

@keyframes slideDown {

  0%,
  to {
    transform: translateY(0);
    visibility: visible
  }

  25% {
    transform: translateY(-100%);
    visibility: hidden
  }

  50% {
    transform: translateY(100%);
    visibility: hidden
  }
}

:root {
  --dark-50: #dad9d8;
  --dark-100: #949493;
  --dark-200: #2c2c2c;
  --dark-300: #1f1e1e;
  --dark-400: #181818;
  --dark-500: #111;
  --dream: #c08dbf;
  --uplift: #ef9286;
  --focus: #fff49e;
  --chill: #a6d9e9
}

.position-relative {
  position: relative
}

.text-left {
  text-align: left
}

.accordion summary[aria-expanded=true] .accordion__title,
.accordion summary[aria-expanded=true] .icon-caret,
.accordion__title:hover {
  color: #dad9d8
}

.accordion summary .icon-caret,
.accordion__title {
  color: #949493;
  color: var(--dark-100)
}

.accordion summary:hover .accordion__title,
.accordion summary:hover .icon-caret {
  color: #dad9d8;
  text-decoration: none
}

.accordion__content {
  color: #dad9d8;
  color: var(--dark-50)
}

.list-payment svg path {
  fill: #949493;
  fill: var(--dark-100)
}

.d-flex {
  display: flex
}

.text-center {
  text-align: center
}

.effect-flip-wrapper,
.secondary-btn {
  align-items: center;
  justify-content: center
}

.secondary-btn {
  padding: 24px 48px;
  color: #949493;
  color: var(--dark-100);
  background-color: transparent;
  display: inline-flex;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  text-decoration: none
}

.secondary-btn::after {
  border-radius: 128px;
  border: 1px solid #949493;
  border: 1px solid var(--dark-100);
  opacity: 1
}

.effect-flip-wrapper {
  width: 120px;
  overflow: hidden;
  position: relative;
  display: flex
}

.effect-flip-wrapper .flip-text {
  overflow: hidden;
  position: absolute;
  visibility: visible;
  transform: translateY(0);
  transition: visibility 0s .4s
}

.effect-flip-wrapper:hover .flip-text {
  -webkit-animation: slideDown .3s ease-in-out forwards;
  animation: slideDown .3s ease-in-out forwards
}

.article-custom-page.custom-bg,
.b2b-custom.custom-bg,
.collection-custom-page.custom-bg,
.contact-custom.custom-bg,
.faq-custom.custom-bg,
.login-custom-page.custom-bg,
.quiz-custom.custom-bg,
.register-custom-page.custom-bg {
  background-color: #111;
  background-color: var(--dark-500)
}

.cart-bg {
  position: relative;
  margin-left: 20px;
  padding: 5px;
  background-color: #dad9d8;
  background-color: var(--dark-50);
  border-radius: 128px
}

.cart-bg svg {
  width: 24px;
  height: 24px
}

#HeaderMenu-products-new-in-shop-all:hover {
  color: #181818;
  color: var(--dark-400)
}

.mega-menu__link p {
  margin: 0
}

.mega-menu__list .button:not([disabled]):hover {
  color: #181818;
  color: var(--dark-400)
}

.header__menu-item span {
  font-size: 15px
}

.header__menu-item.effect-flip-wrapper {
  width: 85px
}

.mobile-menu .menu-drawer__menu.has-submenu.list-menu a,
.mobile-menu .menu-drawer__menu.has-submenu.list-menu summary {
  padding: 32px 3rem
}

.mobile-menu .second-lvl-menu a {
  padding: 20px !important
}