/**
 * Barra de anuncios. Compartida entre la tienda y la vista previa del panel:
 * un solo archivo para que no puedan verse distinto.
 *
 * Los colores y la fuente vienen por style inline desde los ajustes, así que
 * acá sólo está la estructura y el desplazamiento.
 *
 * El bucle es un track duplicado que se mueve hasta -50%: al terminar, la
 * segunda copia está justo donde arrancó la primera y no se ve el salto.
 */
.announce { overflow: hidden; width: 100%; }

.announce__track { display: flex; width: max-content; align-items: center; }

.announce__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: .55rem 1.25rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Separador entre mensajes */
.announce__item::after { content: '•'; margin-left: 1.25rem; opacity: .45; }

.announce--scroll .announce__track { animation: announceScroll linear infinite; }

@keyframes announceScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/**
 * Sin desplazamiento: velocidad 0, o el sistema con "reducir movimiento".
 *
 * Acá NO alcanza con apagar la animación. Si los mensajes no entran en el
 * ancho de pantalla y el contenedor recorta, el texto queda cortado al medio.
 * Por eso la barra pasa a poder deslizarse con el dedo: el usuario ve todo,
 * y el movimiento lo decide él. Con `min-width: max-content` el track nunca
 * se comprime, y `width: 100%` deja que se centre cuando sí entra.
 */
.announce--static { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.announce--static::-webkit-scrollbar { display: none; }
.announce--static { -ms-overflow-style: none; scrollbar-width: none; }

.announce--static .announce__track {
  width: 100%;
  min-width: max-content;
  justify-content: center;
}
.announce--static .announce__item:last-child::after { content: none; }

/* Respaldo por si el JS no llegó a correr: sin él no hay copias duplicadas,
   así que alcanza con tratarla como estática.
   La excepción es data-force-motion="1", cuando la tienda eligió animarla igual. */
@media (prefers-reduced-motion: reduce) {
  .announce--scroll:not([data-force-motion="1"]) { overflow-x: auto; }
  .announce--scroll:not([data-force-motion="1"]) .announce__track {
    animation: none;
    width: 100%;
    min-width: max-content;
    justify-content: center;
  }
}