/** Shopify CDN: Minification failed

Line 87:2 Unexpected "<"

**/
.announcementbarnew-container.hidden {
    display: none !important;
  }

  @media screen and (max-width: 390px) {
    .announcementbarnew-container {
      font-size: 0.9rem;
    }
    .announcementbarnew__close-button {
      top: 1.5px !important;
    }
  }

  .announcementbarnew-slider {
    display: flex;
    flex-direction: row;
    width: 300%;
    animation: scroll-left 21s steps(1, end) infinite;
  }

  .announcementbarnew__message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.33%;
    white-space: normal;
    padding: 0px 30px;
  }

  @media screen and (min-width: 761px) {
    .announcementbarnew__message {
      text-align: center;
      padding-left: 0;
    }
    .ann-close{ top:5px;
    }
  }

  @media screen and (max-width: 760px) {
    .announcementbarnew__message {
      text-align: left;
      padding-left: 1rem;
    }
    .announcementbarnew-slider {
      animation: scroll-left-mobile 12s steps(1, end) infinite;
    }
  }

  @keyframes scroll-left {
    0%, 23.8% { transform: translateX(0); }
    28.5%, 47.6% { transform: translateX(-33.33%); }
    52.3%, 71.4% { transform: translateX(-66.66%); }
    76.1%, 100% { transform: translateX(-100%); }
  }

  @keyframes scroll-left-mobile {
    0%, 24% { transform: translateX(0); }
    30%, 54% { transform: translateX(-33.33%); }
    60%, 84% { transform: translateX(-66.66%); }
    90%, 100% { transform: translateX(-100%); }
  }

  .announcementbarnew__close-button {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 0px;
    z-index: 10;
  }

  @media screen and (min-width: 761px) {
    .announcementbarnew__close-button {
      top: 10px;
      right: 10px;
    }
  }

  <style>
:root{
  /* tarabili */
  --ann-stay: 3800ms;      /* quanto resta visibile il testo */
  --ann-slide: 500ms;      /* durata dello slide */
}

.announcementbarnew-container.hidden{ display:none !important; }

.announcementbarnew-container{
border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
    top: var(--header-height);
    border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
    background-color: rgba(0, 0, 0, .03);
    color: rgba(var(--color-foreground), 1);
    font-size: 1rem;
    position: sticky;
    width: 100%;
    text-align: center;
    overflow: hidden;
    padding: 0.3rem 0;
    z-index: 998;
}
@media (max-width:390px){ .announcementbarnew-container{ font-size:.9rem; } }

.ann-bar{ position: relative; }
.ann-close{
position: absolute;
    right: 10px;
    top: 12px;
    background: transparent;
    border: 0;
    color: #b595ce;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    z-index: 2;
}

.ann-viewport{
  /* altezza controllata da JS; qui solo base */
  height:auto;
  transition: height var(--ann-slide) ease;
}
.ann-track{
  display:flex;
  flex-direction:column;
  transform: translateY(0);         /* animata da JS */
  transition: transform var(--ann-slide) ease;
  will-change: transform;
}
.ann-item{
  display:flex; align-items:center; justify-content:center;
  padding: 6px 42px 6px 30px; /* spazio per la X a destra */
  white-space: normal;
  width:100%;
  box-sizing:border-box;
}
@media (min-width:761px){ .ann-item{ padding-left:0; } }

/* reduce motion = nessuna animazione */
@media (prefers-reduced-motion: reduce){
  .ann-viewport{ transition:none !important; }
  .ann-track{ transition:none !important; }
}
:root{
  --ann-x-w: 40px;   /* larghezza area del bottone X */
  --ann-x-gap: 8px;  /* distacco extra dal testo */
}

/* allarga l’area cliccabile della X e rendila verticale-centrata */
.ann-close{
  position: absolute;
  inset-inline-end: 0;
  inset-block: 0;
  width: var(--ann-x-w);
  display: grid;
  place-items: center;
  padding: 0;        /* niente padding: usiamo la larghezza fissa sopra */
}

/* riserva spazio simmetrico ai lati dell’item = centro perfetto */
.ann-item{
  padding-inline: calc(var(--ann-x-w) + var(--ann-x-gap));
  /* se vuoi tenere anche il padding verticale che avevi: */
  padding-block: 6px;
  text-align: center;
}

/* Durate (puoi tarare) */
:root{
  --ann-slide: 500; /* ms, transizione tra messaggi */
  --ann-stay:  3800;/* ms, tempo di permanenza */
  --ann-side:  44px;/* larghezza colonne laterali per centratura perfetta */
}

/* Layout a 3 colonne simmetriche */
.ann-bar{
  display: grid;
  grid-template-columns: var(--ann-side) 1fr var(--ann-side);
  align-items: center;
  position: relative;
}

/* viewport centrale: altezza animata per messaggi di altezza diversa */
.ann-viewport{
  overflow: hidden;
  transition: height calc(var(--ann-slide) * 1ms) ease;
}

/* track verticale (slide-up) */
.ann-track{ display: block; }
.ann-item{ display:flex; justify-content:center; align-items:center; padding: 6px 12px; }
.ann-item p{ margin:0; text-align:center; font-size:1rem;}

/* bottoni laterali uguali (centro davvero al pixel) */
.ann-ctrl,
.ann-close{
  width: var(--ann-side);
  height: var(--ann-side);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #b595ce;
  cursor: pointer;
}

/* icone pausa/play: di default mostra PAUSA */
.ann-ctrl .icon{ display:block; }
.ann-ctrl .icon-play{ display:none; }
.announcementbarnew-container.is-paused .ann-ctrl .icon-pause{ display:none; }
.announcementbarnew-container.is-paused .ann-ctrl .icon-play{ display:block; }

/* close */
.ann-close{ font-size: 20px; line-height: 1; }

/* Mobile tweak */
@media (max-width: 390px){
  :root{ --ann-side: 38px; }
  .ann-close{ font-size: 18px; }
}

.ann-ctrl{ color:#b595ce; }           /* colore del bottone */
.ann-ctrl .icon{ fill:currentColor; } /* gli SVG prendono il colore */
/* colore principale */
.ann-close{ 
  color:#b595ce; 
  background:transparent; 
  border:0; 
  display:flex; 
  align-items:center; 
  justify-content:center;
  width: 36px; 
  height: 36px;           /* hit area comoda */
  line-height: 0;
  cursor:pointer;
}

/* icona svg a linea */
.ann-close .icon{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* stati */
.ann-close:hover{ color:#a986d6; }
.ann-close:focus-visible{ outline:2px solid #b595ce; outline-offset:2px; }

/* se lo posizioni nell’angolo come prima */
.ann-close{ position:absolute; right:10px; }
/* (adatta i valori per mobile/desktop come già facevi) */


.ann-ctrl{
  justify-content: start;
      margin-left: 5px;
}

/* --- MOBILE: testa a capo e font fluida --- */
@media (max-width: 480px){
  /* font fluida su mobile */
  .announcementbarnew-container{
    font-size: clamp(0.78rem, 3.2vw, 0.88rem);
  }

  /* forza l'andare a capo anche su parole/URL lunghi */
  .ann-item,
  .ann-item p,
  .ann-item a{
    white-space: normal !important;   
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    line-height: 1.45;
  }
}

.announcementbarnew-container a.textunderline{
  font-size:1rem;
  color: #b595ce;
}

  @media screen and (min-width: 761px) {
    .ann-close{ top:3px;
    }
  }