body.admin-bar div.component-promotional-banner {
  top: 32px;
}

body.admin-bar div.component-promotional-banner + header.section {
  top: 76px;
}

div.component-promotional-banner + header.section {
  top: 44px;
}

:root:has(div.component-promotional-banner + header.section) {
  --bottomHeaderPosition: 124px !important;
}

:root:has(div.component-promotional-banner.is-hide + header.section) {
  --bottomHeaderPosition: 80px !important;
}

div.component-promotional-banner.is-hide + header.section {
  top: 0px;
}

body.admin-bar div.component-promotional-banner.is-hide {
  top: -44px;
}

body.admin-bar div.component-promotional-banner.is-hide + header.section {
  top: 23px;
}

header.section {
  transition: 0.3s ease-in-out;
  transition-property: top;
}

div.component-promotional-banner {
  width: 100vw;
  height: 44px;
  background-color: var(--primary);
  position: fixed;
  z-index: 1001;
  transition: 0.3s ease-in-out;
  overflow: hidden;
  transition: 0.3s ease-in-out;
  top: 0px;
}
@media screen and (max-width: 768px) {
  div.component-promotional-banner {
    flex-direction: column;
    height: 36px !important;
  }
}
div.component-promotional-banner.is-hide {
  top: -44px;
}
div.component-promotional-banner a {
  color: var(--dark);
  font-weight: 400;
}
div.component-promotional-banner .container {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--dark);
  font-style: var(--typo-title);
  font-weight: 400;
  width: var(--container-large-width);
}
@media screen and (max-width: 768px) {
  div.component-promotional-banner .container {
    flex-direction: column;
    gap: 2px;
    height: 36px !important;
  }
}
div.component-promotional-banner .container a.text {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  div.component-promotional-banner .container a.text {
    display: flex;
    align-items: center;
  }
}
div.component-promotional-banner .container a.text:after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2019%2019%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M5.70834%204.45581V5.95581H12.1508L4.95834%2013.1483L6.01584%2014.2058L13.2083%207.01331V13.4558H14.7083V4.45581H5.70834Z%22%20fill%3D%22%2354CBFF%22%2F%3E%0A%3C%2Fsvg%3E");
  background-size: contain;
  width: 18px;
  height: 18px;
  display: none;
}
@media screen and (max-width: 768px) {
  div.component-promotional-banner .container a.text:after {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  div.component-promotional-banner {
    font-size: 10px;
  }
}
div.component-promotional-banner .container a {
  color: var(--dark);
  font-weight: 400;
}
div.component-promotional-banner .container a:after {
  filter: brightness(0) invert(0);
}
@media screen and (max-width: 768px) {
  div.component-promotional-banner .container a {
    font-size: 10px;
    display: none;
  }
  div.component-promotional-banner .container a:after {
    width: 10px;
    height: 10px;
  }
}
div.component-promotional-banner .close {
  position: absolute;
  right: 0px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  div.component-promotional-banner .close {
    display: none;
  }
}