/* Letreiro contínuo, compartilhado entre a vitrine e as páginas de produto. */
.ticker{
  position:relative;
  width:100%;
  min-width:0;
  overflow:hidden;
  background:#082747;
  color:#fff;
  contain:paint;
}

.ticker-track{
  display:flex !important;
  align-items:center;
  width:max-content !important;
  min-width:max-content;
  gap:0;
  transform:translate3d(0,0,0);
  animation:topdicas-ticker 15s linear infinite !important;
  animation-play-state:running !important;
  will-change:transform;
}

.ticker-set{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  gap:1.05rem;
  padding-right:1.05rem;
  white-space:nowrap;
  font-weight:800;
}

.ticker-set span[aria-hidden="true"],
.ticker-set[aria-hidden="true"] > span:nth-child(even){color:#ffb21e}

/*
  Páginas de produto possuem regras genéricas para spans da faixa superior.
  Estes seletores preservam os dois grupos do letreiro e evitam que o CSS
  responsivo transforme cada frase em uma linha inteira.
*/
.topline .ticker .ticker-set{
  display:inline-flex !important;
  width:auto !important;
}

.topline .ticker .ticker-set > span{
  display:inline !important;
  width:auto !important;
}

.topline .ticker span:before{content:none !important}

/* O letreiro nunca pausa por hover/touch: ele deve funcionar sozinho em todo dispositivo. */
.announcement:hover .ticker-track,
.announcement:focus-within .ticker-track{animation-play-state:running !important}

@keyframes topdicas-ticker{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

@media (max-width:700px){
  .topline .announcement{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    width:100%;
  }

  .topline .ticker{
    display:block;
    min-height:31px;
  }

  .ticker-track{
    min-height:31px;
    animation-duration:17s !important;
  }

  .ticker-set{
    gap:.72rem;
    padding-right:.72rem;
    font-size:.72rem;
    line-height:1.25;
  }

  /* A segunda cópia é necessária para o movimento não parar nem dar salto. */
  .topline .ticker .ticker-set[aria-hidden="true"]{
    display:inline-flex !important;
  }
}