.announcement-bar-section{
  background-color: rgb(var(--color-background));
  transition: max-height 0.3s ease;
  max-height: auto;
  overflow: hidden;
}
announcement-bar{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  position: relative;
  align-items: center;
  --svg-size:14px;
  --swiper-navigation-top-offset:auto;
}
announcement-bar svg{
  width:var(--svg-size) !important;
  height:var(--svg-size) !important;
}
announcement-bar .announcement-bar-menu-grid{
  display: flex;
  flex-wrap: wrap;
  gap:20px;
  justify-content: flex-end;
  align-items: center;
}
announcement-bar .announcement-bar-left{
  width:100%;
  min-width: 0;
}
announcement-bar .announcement-bar-swiper{
  display: flex;
  align-items: center;
  gap:20px;
}
announcement-bar .swiper-button::after{
  display: none;
}
announcement-bar .swiper-button{
  position: relative;
  display: flex;
  left: auto;
  right: auto;
  width: auto;
  margin:0;
  --swiper-navigation-color:#ffffff;
  opacity:1;
  height: auto;
}

announcement-bar .swiper-control{
  display: flex;
  gap:10px;
  background-color: rgb(var(--color-background));
  z-index: 2;
  order: 0;
}
announcement-bar .swiper-wrapper{
  order: 1;
}
announcement-bar .swiper-slide{
  display: flex;
}
announcement-bar .close-button{
  display: none;
  cursor: pointer;
  padding:10px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 200ms;
  --svg-size:10px;
}
announcement-bar .close-button:hover{
  transform: scale(1.2);
}
announcement-bar .announcement-bar-right .close-button{
  display: inline-flex;
}
announcement-bar.announcement-bar--center{
  grid-template-columns: 1fr;
  justify-items: center;
}
announcement-bar.announcement-bar--center .announcement-bar-left{
  max-width: 100%;
}
announcement-bar.announcement-bar--center .announcement-bar-swiper{
  position:relative;
  width:100%;
  display:block;
  box-sizing:border-box;
  padding-inline:34px;
}
announcement-bar.announcement-bar--center .swiper-wrapper{
  width:100%;
}
announcement-bar.announcement-bar--center .swiper-control{
  position:absolute;
  inset-inline:0;
  top:50%;
  transform:translateY(-50%);
  background-color:transparent;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
  z-index:2;
}
announcement-bar.announcement-bar--center .swiper-button-prev{
  pointer-events:auto;
}
announcement-bar.announcement-bar--center .swiper-button-next{
  pointer-events:auto;
}
announcement-bar.announcement-bar--center .swiper-slide{
  justify-content: center;
  text-align: center;
}
@media(max-width:959px){
  announcement-bar{
    display: flex;
  }
  .announcement-bar-right{
    display: none;
  }
  announcement-bar .swiper-control{
    width: 100%;
    order: 0;
    min-height: 14px;
  }
  announcement-bar .swiper-wrapper{
    order: 0;
  }
  announcement-bar .swiper-slide{
    justify-content: center;
  }
  announcement-bar .announcement-bar-swiper{
    justify-content: center;
    align-items: center;
    width:80%;
  }
  announcement-bar .swiper-button{
    position: absolute;
    display: flex;
    align-items: center;
  }
  announcement-bar .swiper-button-next{
    right: 0;
  }
  announcement-bar .swiper-button-prev{
    left:0;
  }
  announcement-bar .close-button{
    position: absolute;
    display: flex;
    right: 0;
    /* height: 100%; */
    padding:5px;
    align-items: flex-start;
    --svg-size:8px;
  }
  announcement-bar.announcement-bar--center .announcement-bar-swiper{
    width:100%;
    padding-inline:30px;
  }
  announcement-bar.announcement-bar--center .swiper-control{
    width:100%;
    min-height: 0;
  }
  announcement-bar.announcement-bar--center .swiper-button{
    position: relative;
    left:auto;
    right:auto;
  }
}/* Maxcomfi custom announcement bar */
announcement-bar .swiper-control,
announcement-bar .swiper-button,
announcement-bar .swiper-button-next,
announcement-bar .swiper-button-prev,
announcement-bar .announcement-bar-right,
announcement-bar .announcement-bar-menu-grid,
announcement-bar .close-button {
    display: none !important;
}

announcement-bar .announcement-bar-left {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

announcement-bar .announcement-bar-swiper,
announcement-bar .swiper,
announcement-bar .swiper-wrapper,
announcement-bar .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
}

announcement-bar .swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

announcement-bar .swiper-slide * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

announcement-bar a,
announcement-bar p,
announcement-bar span,
announcement-bar div {
    text-align: center;
}

@media screen and (max-width: 768px) {
    .announcement-bar-section .page-width {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    announcement-bar .swiper-slide {
        padding: 6px 12px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    announcement-bar .swiper-slide * {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media screen and (max-width: 390px) {
    announcement-bar .swiper-slide {
        font-size: 11px !important;
    }
}/* Maxcomfi announcement bar - force desktop center */
.announcement-bar-section .page-width {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.announcement-bar-section announcement-bar {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.announcement-bar-section .announcement-bar-left {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.announcement-bar-section .announcement-bar-swiper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.announcement-bar-section .swiper-wrapper {
    width: 100% !important;
    align-items: center !important;
}

.announcement-bar-section .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.announcement-bar-section .swiper-slide * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* hide arrows / right menu / close button */
.announcement-bar-section .swiper-control,
.announcement-bar-section .swiper-button,
.announcement-bar-section .swiper-button-prev,
.announcement-bar-section .swiper-button-next,
.announcement-bar-section .announcement-bar-right,
.announcement-bar-section .announcement-bar-menu-grid,
.announcement-bar-section .close-button {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* mobile */
@media screen and (max-width: 768px) {
    .announcement-bar-section .swiper-slide {
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
    }

    .announcement-bar-section .swiper-slide * {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}