/* oferta.css (Sonar): estilos da página de oferta; entra em /oferta.css?v= nas /ofertas/ geradas do Sonar.
   A estrutura é a do Dicas: o layout de src/dicas/css/oferta.css vem copiado tal e qual entre os marcadores
   (scripts/sync-oferta-layout-sonar.mjs, conferido no build) e a pele do Sonar (spec 4.10) vem depois, por cima. */

/* Tokens da home do Sonar (sonar/home.css; o teste oferta-sonar-pele prova a igualdade) e os --of-* que o layout
   copiado lê, ligados a eles. */
:root {
  --s-abyss: #04140f;
  --s-panel: #0a2a1e;
  --s-panel-2: #0d3524;
  --s-line: rgba(116, 255, 103, .22);
  --s-line-soft: rgba(116, 255, 103, .12);
  --s-phosphor: #74ff67;
  --s-phosphor-glow: rgba(116, 255, 103, .35);
  --s-mint: #1df2b2;
  --s-amber: #ffb648;
  --s-amber-ink: #2a1600;
  --s-text: #eafff1;
  --s-muted: #8fb8a5;
  --s-white: #ffffff;
  --s-display: "Chakra Petch", "Source Sans Pro", system-ui, sans-serif;
  --s-text-font: Barlow, "Source Sans Pro", system-ui, sans-serif;

  --of-navy: var(--s-text);
  --of-tinta: var(--s-text);
  --of-slate: var(--s-muted);
  --of-creme: var(--s-abyss);
  --of-laranja: var(--s-phosphor);
  --of-amarelo: var(--s-amber);
  --of-verde: var(--s-phosphor);
  --of-bolha: var(--s-line-soft);
  --of-feat: var(--s-panel);
  --of-linha: var(--s-line);
  --of-fundo: var(--s-abyss);
  --of-display: var(--s-display);
  --of-texto: var(--s-text-font);
  --of-mao: var(--s-display);
  --of-coral: #ff5d5d; /* o vermelho da ponta cara da régua; os contras das abas também */
}

/* <layout do Dicas> gerado de src/dicas/css/oferta.css por scripts/sync-oferta-layout-sonar.mjs; não editar à mão */
/* O molde traz style="background: #ffffff" no <body> (o Sonar ainda depende dele); só o !important passa por cima. */
body {
  background: var(--of-creme) !important;
}

.deal-page-container {
  font-family: var(--of-texto);
  color: var(--of-tinta);
}

/* Colunas: uma abaixo de 1024 px, duas a partir daí (foto ≈ 48%, conteúdo ≈ 52%, spec 4.1) */
.deal-layout.oferta-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 32px;
}

.oferta-colunas .oferta-foto {
  min-width: 0;
}

.oferta-colunas .oferta-foto .deal-img-wrapper {
  position: relative;
  top: auto;
  max-width: 520px;
  max-height: none;
  margin: 0 auto;
}

.oferta-colunas .oferta-foto .deal-img-wrapper:not(.cupom-logo-loja) {
  background: #fff;
  border: 1px solid var(--of-linha);
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
}

.oferta-colunas .oferta-foto #deal-image {
  max-height: 520px;
}

/* Celular (spec 3 e 4.2): preço e botão visíveis sem rolar a 375×812. A foto (a única ou a principal da galeria) tem
   altura fixa desde a primeira pintura, inteira dentro dela; uma foto em pé não empurra o botão para baixo da dobra,
   nem com as miniaturas e um título de duas linhas. O logo da página só cupom já tem a altura dele. */
@media (max-width: 767px) {
  /* O styles.css (até 768 px) põe width: 100%, height: auto e object-fit: contain com !important nessas fotos, e isso
     vence o height: 100% inline do #deal-image e qualquer altura sem !important daqui: sem ele a foto nasce com 0 de
     altura e empurra a página quando carrega. O !important neste seletor, mais forte que o de lá, segura os 240 px. */
  .oferta-colunas .oferta-foto .deal-img-wrapper:not(.cupom-logo-loja) #deal-image,
  .oferta-colunas .oferta-foto .gallery-main img {
    height: 240px !important;
    max-height: 240px;
  }

  /* O styles.css reserva 400 px para a principal da galeria; aqui ela fica com a altura da foto. */
  .oferta-colunas .oferta-foto .gallery-main {
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  .deal-layout.oferta-colunas {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    gap: 32px;
  }

  /* O quadro da foto fica parado enquanto a coluna da direita rola (e cresce com o "Ler mais"). */
  .oferta-colunas .oferta-foto {
    position: sticky;
    top: 100px;
  }

  .oferta-colunas .oferta-foto .deal-img-wrapper {
    max-width: none;
  }

  .oferta-colunas .oferta-foto #deal-image {
    max-height: 560px;
  }
}

/* Coluna do conteúdo. Abaixo de 1024 px a descrição e o histórico descem para depois do compartilhar, para o
   preço e o botão aparecerem sem rolar (spec 4.2). */
.oferta-colunas .oferta-conteudo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 1023px) {
  .oferta-conteudo > #editor-insights {
    order: 1;
    margin-top: 16px;
  }

  .oferta-conteudo > .oferta-hist-lugar {
    order: 2;
  }
}

.oferta-hist-lugar:empty {
  display: none;
}

/* Selo da loja */
.oferta-conteudo .oferta-loja {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--of-navy);
  color: #fff;
  font: 700 0.75rem/1.4 var(--of-display);
  text-decoration: none;
}

.oferta-conteudo .oferta-loja:hover,
.oferta-conteudo .oferta-loja:focus-visible {
  background: #1d3463;
}

/* Título */
.oferta-conteudo .oferta-titulo {
  margin: 10px 0 12px;
  font: 800 1.35rem/1.2 var(--of-display);
  color: var(--of-navy);
}

.oferta-conteudo .oferta-titulo a {
  color: inherit;
  text-decoration: none;
}

.oferta-conteudo .oferta-titulo a:hover {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .oferta-conteudo .oferta-titulo {
    font-size: 1.65rem;
  }
}

/* Linha "Postado por Cecília · há 2 h" */
.oferta-conteudo .oferta-meta {
  justify-content: flex-start;
  gap: 12px;
  margin: 4px 0 14px;
  padding: 0;
  border: 0;
  font-size: 0.85rem;
  color: var(--of-slate);
}

.oferta-conteudo .oferta-assina-nome {
  font: 400 1.25rem/1 var(--of-mao);
  color: var(--of-verde);
}

/* Compartilhar só com ícones */
.oferta-conteudo .oferta-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

/* Descrição e "Ler mais" (spec 4.4). O recorte é em linhas inteiras: o espaço entre parágrafos é uma linha, e o
   teto é 5 ou 6 linhas. Só vale com a classe oferta-js, posta pelo script colado depois do bloco; sem JS a
   descrição aparece inteira e o botão some. */
.oferta-conteudo #editor-insights-content.oferta-desc {
  --desc-lh: 1.6;
  scroll-margin-top: 87px; /* os 75 px do .main-header fixo e um respiro, para o "Ler menos" não parar embaixo dele */
  font-size: 1rem;
  line-height: var(--desc-lh);
  color: var(--of-slate);
}

.oferta-conteudo #editor-insights-content .oferta-desc-texto > * {
  margin: 0;
}

.oferta-conteudo #editor-insights-content .oferta-desc-texto > * + * {
  margin-top: calc(var(--desc-lh) * 1em);
}

.oferta-conteudo #editor-insights-content .oferta-desc-texto li {
  margin: 0;
  line-height: inherit;
}

.oferta-js .oferta-desc--recorte .oferta-desc-texto {
  position: relative;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.oferta-js .oferta-desc--recorte:not(.oferta-desc--aberta) .oferta-desc-texto {
  max-height: calc(var(--desc-lh) * 5em);
}

.oferta-js .oferta-desc--recorte:not(.oferta-desc--aberta) .oferta-desc-texto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--desc-lh) * 1em);
  background: linear-gradient(rgba(254, 249, 243, 0), var(--of-fundo));
  pointer-events: none;
}

@media (min-width: 1024px) {
  .oferta-js .oferta-desc--recorte:not(.oferta-desc--aberta) .oferta-desc-texto {
    max-height: calc(var(--desc-lh) * 6em);
  }
}

.oferta-desc .oferta-lermais {
  display: none;
}

.oferta-js .oferta-desc .oferta-lermais {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 2px 0;
  border: 0;
  background: none;
  font: 800 0.875rem/1.4 var(--of-display);
  color: var(--of-navy);
  cursor: pointer;
}

.oferta-desc .oferta-lermais i {
  display: inline-block;
  font-style: normal;
  transition: transform 0.25s ease;
}

.oferta-desc .oferta-lermais[aria-expanded="true"] i {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .oferta-js .oferta-desc--recorte .oferta-desc-texto,
  .oferta-desc .oferta-lermais i {
    transition: none;
  }
}

/* Votos ao lado do "Postado por" (spec 4.5): os botões e o placar da home, numa pílula branca. */
.oferta-conteudo .oferta-meta {
  flex-wrap: wrap;
}

.oferta-votos .promo-card-reactions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--of-linha);
  border-radius: 999px;
  background: #fff;
}

.oferta-votos [data-reaction] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--of-slate);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.oferta-votos [data-reaction]:disabled {
  cursor: default;
}

/* Até o voto os emojis ficam em cinza, como nos cartões da home. */
.oferta-votos [data-reaction] .home-emoji {
  filter: grayscale(1);
  opacity: 0.7;
}

.oferta-votos [data-reaction][aria-pressed="true"] {
  background: var(--of-bolha);
}

.oferta-votos [data-reaction][aria-pressed="true"] .home-emoji {
  filter: none;
  opacity: 1;
}

.oferta-votos [data-reaction] > * {
  display: inline-block;
}

/* O pulinho do voto: só no clique de quem visita (a classe vem do oferta.js), nunca na carga. */
.oferta-votos [data-reaction].oferta-voto--pulo > * {
  animation: oferta-voto-pulo 0.35s ease;
}

@keyframes oferta-voto-pulo {
  40% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1);
  }
}

.oferta-votos [data-reaction-score] {
  min-width: 28px;
  font: 800 0.875rem/1 var(--of-display);
  text-align: center;
  color: var(--of-verde);
}

/* Preço (spec 4.1, item 5): o atual grande, o antigo riscado, o selo de desconto e a nota pequena embaixo. */
.oferta-conteudo .price-container-braddeals {
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 14px;
}

.oferta-conteudo .price-current-braddeals {
  font: 800 1.75rem/1.1 var(--of-display);
  letter-spacing: -0.02em;
  color: var(--of-navy);
}

.oferta-conteudo .price-old-braddeals {
  font: 400 1.05rem/1.2 var(--of-texto);
  color: #7a8499;
}

.oferta-conteudo .price-save-braddeals {
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff1e8;
  font: 700 0.9rem/1.3 var(--of-texto);
  color: #c2410c;
}

.oferta-preco-nota {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--of-slate);
}

.oferta-preco-nota .price-shipping-braddeals {
  display: inline;
  min-height: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

@media (min-width: 1024px) {
  .oferta-conteudo .price-current-braddeals {
    font-size: 2rem;
  }
}

/* Botão principal em pílula laranja e, colada à direita, a pílula do cupom; os tickets descem para a linha toda. */
.oferta-conteudo .deal-actions-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.oferta-conteudo .btn-get-deal-braddeals.btn-half-width {
  flex: 0 1 auto;
  width: auto;
  min-width: 220px;
  min-height: 0;
  padding: 14px 36px;
  border-radius: 999px;
  background: var(--of-laranja);
  box-shadow: 0 2px 0 rgba(15, 29, 58, 0.18);
  font: 800 1rem/1.2 var(--of-display);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.oferta-conteudo .btn-get-deal-braddeals.btn-half-width:hover {
  background: var(--of-laranja);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.35);
}

.oferta-conteudo .btn-get-deal-braddeals.btn-half-width:active {
  transform: translateY(0);
}

.oferta-conteudo #deal-cupom-section {
  flex: 0 1 auto;
  width: auto;
}

.oferta-conteudo #deal-cupom-section.oferta-cupons--tickets,
.oferta-conteudo #deal-cupom-section.oferta-cupons--instrucao {
  flex-basis: 100%;
}

.oferta-copiar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 6px 14px;
  border: 1.5px solid var(--of-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--of-navy);
  font: 800 0.95rem/1.2 var(--of-display);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.oferta-copiar-textos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.oferta-copiar-rotulo {
  font: 700 0.6rem/1.2 var(--of-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--of-slate);
}

/* O código guarda a classe de sempre (cupom-code-inline); o styles.css o corta em 178 px, aqui ele cabe inteiro. */
.oferta-copiar .cupom-code-inline {
  max-width: none;
  font: inherit;
  letter-spacing: 0.02em;
}

.oferta-copiar.copiado,
.oferta-ticket-codigo.copiado {
  border-color: var(--of-verde);
  background: var(--of-verde);
  color: #fff;
}

.oferta-copiar,
.oferta-ticket-codigo {
  position: relative;
}

/* "Copiado ✓" cobre o conteúdo, que segue no layout (só invisível): a pílula e o ticket não mudam de tamanho. */
.oferta-copiado-texto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  font: 800 0.875rem/1 var(--of-display);
  white-space: nowrap;
}

.oferta-copiar.copiado > .oferta-copiado-texto,
.oferta-ticket-codigo.copiado > .oferta-copiado-texto {
  visibility: visible;
}

.oferta-copiar.copiado > :not(.oferta-copiado-texto),
.oferta-ticket-codigo.copiado > :not(.oferta-copiado-texto) {
  visibility: hidden;
}

/* A região que o leitor de tela ouve: fora da tela, sem ocupar lugar. */
.oferta-copiado-aviso {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tickets (spec 4.3): desconto à esquerda, regras no meio, a pílula do código à direita e o canhoto recortado. */
.oferta-filtro {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.oferta-filtro-rotulo {
  flex: 0 0 auto;
  margin-right: 2px;
  font: 700 0.78rem/1 var(--of-display);
  color: var(--of-slate);
}

.oferta-filtro-opcao {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--of-linha);
  border-radius: 999px;
  background: #fff;
  color: var(--of-tinta);
  font: 600 0.8rem/1.2 var(--of-texto);
  white-space: nowrap;
  cursor: pointer;
}

.oferta-filtro-opcao[aria-pressed="true"] {
  border-color: var(--of-navy);
  background: var(--of-navy);
  color: #fff;
}

.oferta-tickets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oferta-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--of-linha);
  border-radius: 12px;
  background: #fff;
  animation: oferta-ticket-entra 0.4s ease both;
}

.oferta-ticket[hidden] {
  display: none;
}

.oferta-ticket::before,
.oferta-ticket::after {
  content: "";
  position: absolute;
  left: 100px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--of-linha);
  border-radius: 50%;
  background: var(--of-fundo);
}

.oferta-ticket::before {
  top: -8px;
}

.oferta-ticket::after {
  bottom: -8px;
}

/* Entram em sequência, 60 ms entre um e outro; do 6º em diante, junto com o 5º. */
.oferta-ticket:nth-child(2) {
  animation-delay: 0.06s;
}

.oferta-ticket:nth-child(3) {
  animation-delay: 0.12s;
}

.oferta-ticket:nth-child(4) {
  animation-delay: 0.18s;
}

.oferta-ticket:nth-child(n + 5) {
  animation-delay: 0.24s;
}

@keyframes oferta-ticket-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.oferta-ticket-desconto {
  font: 800 1.35rem/1 var(--of-display);
  text-align: center;
  color: var(--of-laranja);
}

.oferta-ticket-desconto small {
  display: block;
  margin-top: 3px;
  font: 700 0.62rem/1 var(--of-texto);
  letter-spacing: 0.06em;
  color: var(--of-slate);
}

.oferta-ticket-corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.oferta-ticket-regra {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--of-slate);
}

.oferta-ticket-selo {
  display: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--of-verde);
  color: #fff;
  font: 800 0.62rem/1.4 var(--of-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oferta-ticket--selo {
  border-color: var(--of-verde);
  box-shadow: 0 0 0 2px var(--of-bolha);
}

.oferta-ticket--selo .oferta-ticket-selo {
  display: inline-block;
}

.oferta-ticket-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1.5px solid var(--of-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--of-navy);
  font: 800 0.875rem/1.2 var(--of-display);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.oferta-ticket-instrucao {
  max-width: 180px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--of-slate);
}

.oferta-conteudo .cupom-instrucao {
  min-height: 0;
  border-radius: 12px;
}

/* Compartilhar: ícones redondos sem título, um traço e a pílula do grupo (spec 4.1, item 7, e 4.6). */
.oferta-conteudo .oferta-social {
  gap: 8px;
}

.oferta-social .btn-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

/* O X é preto; o styles.css ainda pinta o azul antigo com !important. */
.oferta-social .btn-share-twitter {
  background: var(--of-tinta) !important;
}

.oferta-social .btn-share-copy {
  border: 1px solid var(--of-linha);
  background: var(--of-feat) !important;
  color: var(--of-navy);
}

.oferta-social .btn-share-copy.copied {
  background: var(--of-verde) !important;
  color: #fff;
}

.oferta-social-sep {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--of-linha);
}

.oferta-grupo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border: 1px solid rgba(15, 122, 61, 0.25);
  border-radius: 999px;
  background: var(--of-bolha);
  color: var(--of-verde);
  font: 800 0.82rem/1.2 var(--of-display);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.oferta-grupo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
}

.oferta-grupo-icone svg {
  width: 16px;
  height: 16px;
}

.oferta-social .btn-share-icon:hover,
.oferta-grupo:hover {
  transform: translateY(-2px);
}

/* No celular a pílula do grupo vai para uma linha própria, abaixo dos ícones. */
@media (max-width: 767px) {
  .oferta-social-sep {
    flex-basis: 100%;
    height: 0;
    margin: 0;
  }
}

/* Histórico de preço (spec 4.7): régua do verde (barato, à esquerda) ao vermelho (caro, à direita). O marcador
   ocupa a largura da régua e anda por transform: a posição final é o padrão daqui, e a classe de partida, posta
   pelo script só quando vai animar, o leva ao canto caro. O balão se desloca o mesmo tanto dentro de si mesmo,
   para não sair da régua nas pontas. */
.oferta-hist {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--of-linha);
}

.oferta-hist-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
}

.oferta-hist-titulo {
  margin: 0;
  font: 800 0.9rem/1.3 var(--of-display);
  color: var(--of-navy);
}

.oferta-hist-frase {
  font: 600 0.82rem/1.3 var(--of-texto);
  color: var(--of-verde);
}

.oferta-hist--expirada .oferta-hist-frase {
  color: var(--of-slate);
}

.oferta-hist-regua {
  position: relative;
  height: 10px;
  margin: 34px 0 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f7a3d, #ffd23f 45%, #e5484d);
}

.oferta-hist--expirada .oferta-hist-regua {
  filter: grayscale(0.6);
}

.oferta-hist-marcador {
  position: absolute;
  inset: 0;
  transform: translateX(var(--pos));
  pointer-events: none;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.oferta-hist--partida .oferta-hist-marcador {
  transform: translateX(100%);
}

.oferta-hist-ponto {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 4px solid var(--of-navy);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.oferta-hist-balao {
  position: absolute;
  bottom: 18px;
  left: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--of-navy);
  color: #fff;
  font: 700 0.75rem/1.3 var(--of-display);
  white-space: nowrap;
  transform: translateX(calc(var(--pos) * -1));
}

.oferta-hist-extremos {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--of-slate);
}

.oferta-hist-max {
  text-align: right;
}

.oferta-hist-extremos b {
  display: block;
  font: 800 0.875rem/1.3 var(--of-display);
  color: var(--of-tinta);
}

/* Todos os compartilhar iguais: o styles.css antigo estica o WhatsApp (flex: 1 e padding de botão retangular). */
.oferta-social .btn-share-icon.btn-share-whatsapp {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

/* Só cupom (spec 4.3): o "Como usar" no lado da foto e as três abas que um cupom tem, de volta ao cabeçalho de
   abas (o styles.css ainda as empilha sem cabeçalho, do P19). */
.oferta-como-usar {
  max-width: 520px;
  margin: 16px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--of-linha);
  border-radius: 14px;
  background: #fff;
}

.oferta-como-usar-titulo {
  margin: 0 0 10px;
  font: 800 1rem/1.3 var(--of-display);
  color: var(--of-navy);
}

.oferta-como-usar-passos {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--of-slate);
}

/* Celular, só cupom (spec 4.2): o quadro do logo fica baixo e o "Como usar" desce para depois do conteúdo, para o
   título, o preço e o botão aparecerem sem rolar. A coluna da foto some do grid (contents) e seus filhos viram itens. */
@media (max-width: 767.98px) {
  body.deal-is-cupom .oferta-colunas .oferta-foto {
    display: contents;
  }

  body.deal-is-cupom .oferta-colunas .oferta-foto .deal-img-wrapper.cupom-logo-loja {
    width: 100%;
    max-height: 140px;
    aspect-ratio: auto;
    height: 140px;
  }

  body.deal-is-cupom .oferta-colunas .oferta-foto .deal-img-wrapper.cupom-logo-loja .deal-image-link {
    padding: 14px 22%;
  }

  body.deal-is-cupom .oferta-colunas .oferta-foto .oferta-como-usar {
    order: 2;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
  }
}

body.deal-is-cupom .oferta-abas .info-tabs-header {
  display: flex;
}

body.deal-is-cupom .oferta-abas #tab-sobre-oferta.active,
body.deal-is-cupom .oferta-abas #tab-duvidas.active,
body.deal-is-cupom .oferta-abas #tab-sobre-loja.active {
  display: block;
}

body.deal-is-cupom .oferta-abas #tab-duvidas:not(.active),
body.deal-is-cupom .oferta-abas #tab-sobre-loja:not(.active) {
  display: none;
}

body.deal-is-cupom .oferta-abas #tab-sobre-loja {
  margin-top: 0;
}

/* Abas na pele do Dicas: azul-marinho e o sublinhado laranja. */
.oferta-abas .info-tab-btn {
  font-family: var(--of-display);
  font-weight: 700;
  color: var(--of-slate);
}

.oferta-abas .info-tab-btn:hover,
.oferta-abas .info-tab-btn.active {
  color: var(--of-navy);
}

.oferta-abas .info-tab-btn.active {
  border-bottom-color: var(--of-laranja);
}

/* Barra fixa do celular (spec 4.2): presa no rodapé, aparece quando o botão de cima sai pelo alto da tela. O
   espaço dela fica reservado no fim da página, para nada ficar escondido embaixo. */
.oferta-barra,
.oferta-barra-espaco {
  display: none;
}

@media (max-width: 767px) {
  .oferta-barra-espaco {
    display: block;
    height: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  .oferta-barra {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--of-linha);
    background: rgba(254, 249, 243, 0.96);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.25s ease, visibility 0.25s;
  }

  .oferta-barra--visivel {
    visibility: visible;
    transform: translateY(0);
  }

  .oferta-barra-preco {
    font: 800 1.1rem/1 var(--of-display);
    color: var(--of-navy);
    white-space: nowrap;
  }

  .oferta-barra-cta {
    flex: 1;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--of-laranja);
    color: #fff;
    font: 800 0.875rem/1.2 var(--of-display);
    text-align: center;
    text-decoration: none;
  }

  /* Botão e pílula do cupom na largura toda; no ticket, a pílula do código desce para baixo, na largura toda. */
  .oferta-conteudo .btn-get-deal-braddeals.btn-half-width,
  .oferta-conteudo #deal-cupom-section,
  .oferta-copiar {
    flex-basis: 100%;
    width: 100%;
    justify-content: center;
  }

  .oferta-ticket {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
  }

  /* Sem divisória vertical no celular (o código desce para baixo): os recortes do canhoto saem. */
  .oferta-ticket::before,
  .oferta-ticket::after {
    display: none;
  }

  .oferta-ticket-desconto {
    font-size: 1.15rem;
  }

  .oferta-ticket--registro {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .oferta-ticket-codigo,
  .oferta-ticket-codigo-registro,
  .oferta-ticket-instrucao {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* Menos movimento: nada anima, e o marcador e os tickets já nascem no lugar. */
@media (prefers-reduced-motion: reduce) {
  .oferta-votos [data-reaction].oferta-voto--pulo > *,
  .oferta-ticket {
    animation: none;
  }

  .oferta-conteudo .btn-get-deal-braddeals.btn-half-width,
  .oferta-copiar,
  .oferta-ticket-codigo,
  .oferta-votos [data-reaction],
  .oferta-social .btn-share-icon,
  .oferta-grupo,
  .oferta-hist-marcador,
  .oferta-barra {
    transition: none;
  }

  .oferta-conteudo .btn-get-deal-braddeals.btn-half-width:hover,
  .oferta-social .btn-share-icon:hover,
  .oferta-grupo:hover {
    transform: none;
  }
}

/* Oferta expirada (spec 4.8): um registro, não uma ferramenta. A foto já sai cinza (#deal-image.expired). */
.oferta-foto .deal-expired-banner {
  top: 14px;
  right: auto;
  left: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--of-tinta);
  box-shadow: none;
  color: #fff;
  font: 800 0.75rem/1.2 var(--of-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.oferta-aviso-fim {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--of-linha);
  border-radius: 12px;
  background: #f1f3f7;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--of-slate);
}

.oferta-aviso-fim b {
  color: var(--of-tinta);
}

.deal-is-expired .oferta-conteudo .price-current-braddeals {
  font-size: 1.5rem;
  color: #7a8499;
}

.oferta-preco-ultimo {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--of-slate);
}

/* Sem o gerador (oferta.html no Vite dev) o molde ainda traz os dois com display inline; aqui o corpo manda. */
.deal-is-expired #deal-link {
  display: none;
}

.deal-is-expired #pih-primary-cta {
  display: block !important;
}

.deal-is-expired .pih-primary-cta {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

/* O min-width cabe "Ver preços atuais e histórico", o texto mais longo: a troca do cliente não muda a largura. */
.deal-is-expired .pih-primary-cta-btn {
  display: inline-block;
  width: auto;
  min-width: min(100%, 22rem);
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--of-navy);
  font-family: var(--of-display);
  text-align: center;
}

.deal-is-expired .pih-primary-cta-btn:hover {
  background: var(--of-navy);
}

.oferta-ticket--registro {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  filter: grayscale(0.5);
}

/* O código do registro é só texto apagado, sem cara de botão. */
.oferta-ticket-codigo-registro {
  font: 700 0.875rem/1.2 var(--of-display);
  letter-spacing: 0.04em;
  color: #7a8499;
}

/* Preço antigo sem destaque (spec 4.8): o selo de desconto também fica cinza. */
.deal-is-expired .oferta-conteudo .price-save-braddeals {
  background: #eef0f4;
  color: #7a8499;
}

#ofertas-parecidas {
  scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: no-preference) {
  .deal-is-expired .pih-primary-cta-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .deal-is-expired .pih-primary-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 29, 58, 0.3);
  }
}

/* "Mais ofertas" no celular é um trilho que rola de lado (spec 4.2), cartões de ~160 px como o .trilho do mockup. O
   styles.css fixa a lista em coluna com !important e o cartão em grade; aqui o id e o !important passam por cima, só
   abaixo de 768 px. O trilho rola por dentro: a página não ganha rolagem lateral. */
@media (max-width: 767px) {
    #relacionados-container.related-offers-list {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-bottom: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    #relacionados-container .related-offer-card {
        flex: 0 0 160px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 160px;
        min-width: 0;
        padding: 10px;
        scroll-snap-align: start;
    }

    #relacionados-container .related-offer-left,
    #relacionados-container .related-offer-right,
    #relacionados-container .related-offer-header,
    #relacionados-container .related-offer-footer {
        width: 100%;
        min-width: 0;
        gap: 6px;
    }

    #relacionados-container .related-offer-media {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    #relacionados-container .related-offer-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.9rem;
    }

    #relacionados-container .related-offer-store {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* A descrição, o + e as ações ficam na página da oferta; no trilho só entram a foto, o título e o preço. */
    #relacionados-container .related-offer-description,
    #relacionados-container .related-offer-toggle,
    #relacionados-container .related-offer-actions,
    #relacionados-container .related-offer-old-price,
    #relacionados-container .related-offer-benefit {
        display: none;
    }

    #relacionados-container .related-offer-price {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 6px;
        min-width: 0;
        margin: 0;
    }
}
/* </layout do Dicas> */

/* ==========================================================================
   Pele do Sonar (spec 4.10) por cima do layout: fundo abissal, verde fósforo no preço, no botão e no marcador,
   âmbar nos descontos e no selo de encerrada. As regras abaixo repetem o seletor da regra copiada que corrigem.
   ========================================================================== */

.deal-page-container {
  color: var(--s-text);
}

.breadcrumb a,
.breadcrumb-store a {
  color: var(--s-phosphor);
}

.breadcrumb,
.breadcrumb li,
.breadcrumb li:last-child,
.breadcrumb li:not(:last-child)::after {
  color: var(--s-muted);
}

.oferta-colunas .oferta-foto .deal-img-wrapper:not(.cupom-logo-loja) {
  border-color: var(--s-line);
}

.oferta-conteudo .oferta-loja {
  border: 1px solid var(--s-line);
  background: var(--s-panel);
  color: var(--s-phosphor);
}

.oferta-conteudo .oferta-loja:hover,
.oferta-conteudo .oferta-loja:focus-visible {
  background: var(--s-panel-2);
}

.oferta-conteudo .oferta-titulo {
  font-weight: 700;
}

/* A assinatura é "Sonar", na letra dos títulos, não à mão. */
.oferta-conteudo .oferta-assina-nome {
  font: 700 0.95rem/1 var(--s-display);
  letter-spacing: 0.02em;
}

.oferta-js .oferta-desc--recorte:not(.oferta-desc--aberta) .oferta-desc-texto::after {
  background: linear-gradient(rgba(4, 20, 15, 0), var(--of-fundo));
}

.oferta-conteudo #editor-insights-content.oferta-desc a {
  color: var(--s-phosphor);
}

/* O styles.css pinta o negrito e o marca-texto da descrição de azul-escuro (#1f3347), para o fundo claro. */
.oferta-conteudo #editor-insights-content.oferta-desc :is(strong, b, mark) {
  color: var(--s-text);
}

.oferta-conteudo #editor-insights-content.oferta-desc mark {
  background: linear-gradient(180deg, transparent 48%, var(--s-line) 48%);
}

.oferta-js .oferta-desc .oferta-lermais {
  color: var(--s-phosphor);
}

/* Votos: os submarinos da home do Sonar, numa pílula do painel. */
.oferta-votos .promo-card-reactions {
  background: var(--s-panel);
}

.oferta-votos [data-reaction] {
  color: var(--s-muted);
}

.oferta-votos [data-reaction] svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oferta-votos [data-reaction][aria-pressed="true"] {
  color: var(--s-phosphor);
}

.oferta-votos [data-reaction][aria-pressed="true"] svg {
  filter: drop-shadow(0 0 4px var(--s-phosphor-glow));
}

.oferta-votos [data-reaction]:focus-visible {
  outline: 2px solid var(--s-amber);
  outline-offset: -4px;
}

/* Preço em verde fósforo com brilho; desconto em âmbar. */
.oferta-conteudo .price-current-braddeals {
  color: var(--s-phosphor);
  text-shadow: 0 0 18px var(--s-phosphor-glow);
}

.oferta-conteudo .price-old-braddeals,
.oferta-conteudo .deal-installments-braddeals {
  color: var(--s-muted);
}

.oferta-conteudo .price-save-braddeals {
  background: var(--s-amber);
  color: var(--s-amber-ink);
}

/* Botão principal: pílula verde com texto escuro e brilho verde no hover (spec 4.9). */
.oferta-conteudo .btn-get-deal-braddeals.btn-half-width {
  background: var(--s-phosphor);
  box-shadow: none;
  color: var(--s-abyss);
}

.oferta-conteudo .btn-get-deal-braddeals.btn-half-width:hover {
  background: var(--s-phosphor);
  color: var(--s-abyss);
  box-shadow: 0 0 22px rgba(116, 255, 103, 0.45);
}

/* Pílula do cupom e código do ticket: contorno verde; copiado, verde cheio com texto escuro. */
.oferta-copiar,
.oferta-ticket-codigo {
  border-color: var(--s-phosphor);
  background: transparent;
  color: var(--s-phosphor);
}

.oferta-copiar.copiado,
.oferta-ticket-codigo.copiado {
  border-color: var(--s-phosphor);
  background: var(--s-phosphor);
  color: var(--s-abyss);
}

.oferta-conteudo .cupom-instrucao {
  border: 1px solid var(--s-line);
  background: var(--s-panel);
  color: var(--s-muted);
}

.oferta-filtro-opcao {
  border-color: var(--s-line);
  background: var(--s-panel);
  color: var(--s-muted);
}

.oferta-filtro-opcao[aria-pressed="true"] {
  border-color: var(--s-phosphor);
  background: var(--s-phosphor);
  color: var(--s-abyss);
}

.oferta-ticket {
  background: var(--s-panel);
}

.oferta-ticket-desconto {
  color: var(--s-amber);
}

.oferta-ticket-regra b {
  color: var(--s-text);
}

.oferta-ticket-selo {
  background: var(--s-phosphor);
  color: var(--s-abyss);
}

.oferta-ticket--selo {
  box-shadow: 0 0 0 2px var(--s-line-soft), 0 0 18px var(--s-line-soft);
}

/* Compartilhar e grupo. O X preto ganha um fio para não sumir no fundo escuro. */
.oferta-social .btn-share-twitter {
  border: 1px solid var(--s-line);
  background: #000 !important;
}

.oferta-social .btn-share-copy {
  border-color: var(--s-line);
  color: var(--s-phosphor);
}

.oferta-social .btn-share-copy.copied {
  color: var(--s-abyss);
}

/* A pílula do canal é clara, como no Dicas (spec 4.6), com o azul do Telegram. */
.oferta-grupo {
  border-color: rgba(34, 158, 217, 0.35);
  background: #e6f4fb;
  color: #0b4a6b;
}

.oferta-grupo--telegram .oferta-grupo-icone {
  background: #229ed9;
}

/* Histórico: título claro, frase verde e o balão verde com texto escuro. */
.oferta-hist-titulo {
  color: var(--s-text);
}

.oferta-hist-balao {
  background: var(--s-phosphor);
  color: var(--s-abyss);
}

/* Abas: o card do styles.css fica no painel. */
.oferta-abas .info-tabs-container,
.oferta-abas.info-tabs-container {
  border: 1px solid var(--s-line);
  background: var(--s-panel);
  box-shadow: none;
}

.oferta-abas .info-tabs-header {
  border-bottom-color: var(--s-line);
  background: var(--s-abyss);
}

.oferta-abas .info-tab-btn {
  color: var(--s-muted);
}

.oferta-abas .info-tab-btn:hover,
.oferta-abas .info-tab-btn.active {
  background: var(--s-panel);
  color: var(--s-phosphor);
}

.oferta-abas .info-tab-btn.active {
  border-bottom-color: var(--s-phosphor);
}

.oferta-abas .info-tabs-content,
.oferta-abas .info-tabs-content :is(p, li, td, dd, span) {
  color: var(--s-muted);
}

.oferta-abas .info-tabs-content :is(h2, h3, h4, strong, b, dt, th) {
  color: var(--s-text);
}

/* Especificações e Prós e contras: o gerador escreve inline as cores do painel claro do Dicas (o Dicas e o SEO ficam
   como estão). No painel escuro só o !important passa por cima delas: azul e verde viram fósforo, o vermelho vira o
   coral da régua, o #333 do texto vira o texto claro e as linhas #e0e0e0 viram o fio do Sonar. */
.oferta-abas .info-tab-panel h3[style] {
  color: var(--s-phosphor) !important;
}

.oferta-abas .info-tab-panel .spec-table tr {
  border-bottom-color: var(--s-line) !important;
}

.oferta-abas .info-tab-panel .spec-table td {
  color: var(--s-text) !important;
}

.oferta-abas .info-tab-panel .spec-table td:first-child {
  color: var(--s-phosphor) !important;
}

.oferta-abas .info-tab-panel li > span[style] {
  color: var(--s-text) !important;
}

.oferta-abas .info-tab-panel li > span[style]:first-child {
  color: var(--s-phosphor) !important;
}

.oferta-abas .info-tab-panel > div[style*="#4CAF50"] {
  border-left-color: var(--s-phosphor) !important;
  background: var(--s-line-soft) !important;
}

.oferta-abas .info-tab-panel > div[style*="#F44336"] {
  border-left-color: var(--of-coral) !important;
  background: rgba(255, 93, 93, 0.1) !important;
}

.oferta-abas .info-tab-panel > div[style*="#F44336"] :is(h3[style], li > span[style]:first-child) {
  color: var(--of-coral) !important;
}

/* Os códigos citados nas Dúvidas vêm com fundo azul-claro inline. */
.oferta-abas .info-tab-panel code[style] {
  background: var(--s-abyss) !important;
  color: var(--s-phosphor);
}

.oferta-abas .why-worth-it {
  border: 1px solid var(--s-line-soft);
  background: var(--s-abyss);
}

.oferta-abas .faq-question {
  background: var(--s-abyss);
  color: var(--s-text);
}

.oferta-abas .faq-answer {
  background: var(--s-panel);
}

.oferta-abas .faq-icon {
  color: var(--s-phosphor);
}

.oferta-abas .info-tabs-content a {
  color: var(--s-phosphor);
}

.oferta-como-usar,
.oferta-abas .store-about-card {
  border-color: var(--s-line);
  background: var(--s-panel);
}

.oferta-abas .store-about-title {
  color: var(--s-text);
}

.oferta-abas .store-about-description,
.oferta-abas .store-about-list,
.oferta-abas .store-about-list li {
  color: var(--s-muted);
}

/* Barra fixa do celular: o fundo abissal translúcido, o preço verde e a pílula verde. */
@media (max-width: 767px) {
  .oferta-barra {
    border-top-color: var(--s-line);
    background: rgba(4, 20, 15, 0.95);
  }

  .oferta-barra-preco {
    color: var(--s-phosphor);
  }

  .oferta-barra-cta {
    background: var(--s-phosphor);
    color: var(--s-abyss);
  }
}

/* Página do produto e registro da ocorrência: o styles.css do Sonar não tem regra para eles (só o do Dicas tem). A
   pílula vai no painel com contorno e texto fósforo; o registro, apagado, com o link em fósforo. */
.product-page-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: var(--s-panel);
  color: var(--s-phosphor);
  font: 700 0.9rem/1.2 var(--s-display);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.product-page-link a:hover {
  border-color: var(--s-phosphor);
  background: var(--s-phosphor);
  color: var(--s-abyss);
}

.product-page-link a:focus-visible,
.offer-occurrence a:focus-visible {
  outline: 2px solid var(--s-amber);
  outline-offset: 2px;
}

.offer-occurrence {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--s-muted);
}

.offer-occurrence a {
  color: var(--s-phosphor);
  font-weight: 600;
  text-decoration: none;
}

.offer-occurrence a:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .product-page-link a {
    transition: none;
  }
}

/* Expirada: selo âmbar, aviso no painel, preço apagado e o botão em contorno verde (spec 4.8). */
.oferta-foto .deal-expired-banner {
  background: var(--s-amber);
  color: var(--s-amber-ink);
}

.oferta-aviso-fim {
  background: var(--s-panel);
}

.oferta-aviso-fim b {
  color: var(--s-text);
}

.deal-is-expired .oferta-conteudo .price-current-braddeals {
  color: var(--s-muted);
  text-shadow: none;
}

.deal-is-expired .oferta-conteudo .price-save-braddeals {
  background: var(--s-panel-2);
  color: var(--s-muted);
}

.oferta-ticket-codigo-registro {
  color: var(--s-muted);
}

.deal-is-expired .pih-primary-cta-btn {
  border: 2px solid var(--s-phosphor);
  background: transparent;
  color: var(--s-phosphor);
}

.deal-is-expired .pih-primary-cta-btn:hover {
  background: transparent;
  color: var(--s-phosphor);
}

@media (prefers-reduced-motion: no-preference) {
  .deal-is-expired .pih-primary-cta-btn:hover {
    box-shadow: 0 0 22px rgba(116, 255, 103, 0.35);
  }
}

/* "Mais ofertas": os cartões dos relacionados no painel. */
.related-offers-section h2,
#ofertas-parecidas {
  color: var(--s-text);
}

/* O styles.css pinta os cartões de verde-petróleo sobre branco, com regras por largura e pelo cartão aberto
   (.is-expanded); o id do container passa por cima de todas, em qualquer largura. */
#relacionados-container .related-offer-card {
  border-color: var(--s-line);
  background: var(--s-panel);
  box-shadow: none;
  color: var(--s-text);
}

#relacionados-container .related-offer-card :is(.related-offer-left, .related-offer-title-link, .related-offer-title) {
  color: var(--s-text);
}

#relacionados-container .related-offer-card :is(.related-offer-description, .related-offer-time, .related-offer-benefit, .related-offer-old-price) {
  color: var(--s-muted);
}

#relacionados-container .related-offer-card .related-offer-store {
  border: 1px solid var(--s-line);
  background: var(--s-abyss);
  color: var(--s-phosphor);
}

#relacionados-container .related-offer-card :is(.related-offer-price, .related-offer-current) {
  color: var(--s-phosphor);
}

#relacionados-container .related-offer-card .related-offer-savings {
  color: var(--s-amber);
}

#relacionados-container .related-offer-card .related-offer-toggle {
  border-color: var(--s-line);
  background: var(--s-abyss);
  color: var(--s-phosphor);
}

/* "Ver promoção": link fósforo no desktop; no celular o styles.css o faz botão de fundo claro, aqui do painel. */
#relacionados-container .related-offer-card .related-offer-view-link {
  border-color: var(--s-line);
  background: transparent;
  color: var(--s-phosphor);
}

#relacionados-container .related-offer-card .related-offer-primary {
  background: var(--s-phosphor);
  box-shadow: none;
  color: var(--s-abyss);
}

#relacionados-container .related-offer-card .related-offer-coupon {
  border-color: var(--s-phosphor);
  background: transparent;
  color: var(--s-phosphor);
}

#relacionados-container .related-offer-card .related-offer-coupon.copiado {
  border-color: var(--s-phosphor);
  background: var(--s-phosphor);
  color: var(--s-abyss);
}

/* ==========================================================================
   Toque naval no histórico (spec 4.7): a régua vira uma tela de sonar, com marcas de escala a cada 10%, e o
   marcador é o submarino do voto com um pulso em volta. Na expirada o submarino fica cinza e inclinado.
   ========================================================================== */

.oferta-hist-regua {
  height: 8px;
  margin-top: 46px;
  background: linear-gradient(90deg, var(--s-mint), var(--s-phosphor) 35%, var(--s-amber) 70%, var(--of-coral));
}

.oferta-hist-regua::before {
  content: "";
  position: absolute;
  inset: -5px 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--s-line) calc(10% - 1px) 10%);
  pointer-events: none;
}

.oferta-hist-ponto--sub {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--s-phosphor);
  filter: drop-shadow(0 0 6px rgba(116, 255, 103, 0.7));
}

.oferta-hist-ponto--sub svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oferta-hist-ping {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--s-phosphor);
  border-radius: 50%;
  animation: oferta-hist-pulso 2.4s ease-out infinite;
}

@keyframes oferta-hist-pulso {
  from {
    transform: scale(0.4);
    opacity: 0.9;
  }

  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

.oferta-hist-balao {
  bottom: 24px;
}

.oferta-hist-min b::before {
  content: "▲ ";
  font-size: 0.6rem;
  color: var(--s-mint);
}

.oferta-hist-max b::after {
  content: " ▼";
  font-size: 0.6rem;
  color: var(--of-coral);
}

/* Afundado: cinza, sem brilho e sem pulso, com a proa para baixo (o ícone já sobe 18°). */
.oferta-hist--expirada .oferta-hist-ponto--sub {
  color: var(--s-muted);
  filter: none;
  transform: translate(-50%, -50%) rotate(-36deg);
}

.oferta-hist--expirada .oferta-hist-ping {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .oferta-hist-ping {
    display: none;
  }
}

/* ==========================================================================
   Artigos do blog da categoria (spec 4.11): o registro de bordo das páginas de categoria do Sonar.
   As regras de "Regras do blog" são cópia de sonar/categoria.css (o teste oferta-blog-categoria compara uma a
   uma); o gerador põe html.categoria-sonar-fase1 na página que leva o bloco. O bloco lê os tokens abaixo,
   com os mesmos valores dos do :root do topo desta folha.
   ========================================================================== */

/* Tokens que as regras copiadas leem (valores de sonar/categoria.css), sem tocar no fundo da página. */
html.categoria-sonar-fase1 {
  --s-abyss: #04140f;
  --s-panel-2: #0d3524;
  --s-line: rgba(116, 255, 103, .22);
  --s-line-soft: rgba(116, 255, 103, .12);
  --s-phosphor: #74ff67;
  --s-mint: #1df2b2;
  --s-text: #eafff1;
  --s-muted: #8fb8a5;
  --s-display: "Chakra Petch", "Source Sans Pro", system-ui, sans-serif;
  --s-text-font: Barlow, "Source Sans Pro", system-ui, sans-serif;
}

/* Base do bloco (recommendationBlocksCSS, que as páginas de categoria levam inline). */
.expert-tips-section { max-width: 100%; margin: 3rem 0 2rem; padding: 2.5rem 0; border-top: 1px solid #edf2f7; }
.article-group-block__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.article-group-block__title { margin: 0; font-size: 1.35rem; font-weight: 700; color: #0f1d3a; transition: color 0.3s ease; }
.article-group-block__link { color: #0052A3; text-decoration: none; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; }
.article-group-block__link:hover { text-decoration: underline; color: #ff9d2f; }
.article-group-block__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.article-tile { display: flex; flex-direction: column; text-decoration: none; color: #111; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: all .25s ease; height: 100%; }
.article-tile:hover { box-shadow: 0 8px 20px rgba(0,0,0,.06); transform: translateY(-3px); }
.article-tile__image { width: 100%; aspect-ratio: 5/3; overflow: hidden; position: relative; background: #f3f4f6; }
.article-tile__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.article-tile__body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.article-tile__heading { margin: 0 0 .5rem; font-size: 0.98rem; font-weight: 700; line-height: 1.35; color: #0f1d3a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; }
.article-tile:hover .article-tile__heading { color: #ff9d2f; }
.article-tile__lead { margin: 0; font-size: .82rem; color: #475569; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Reserva de altura: a casca nasce oculta e só aparece com artigos; depois de aberta, a seção não encolhe
   enquanto as fotos dos registros carregam. */
html.categoria-sonar-fase1 .expert-tips-section[data-blog-hydration-shell] {
  min-height: 280px;
}

/* Regras do blog (copiadas de sonar/categoria.css) */
/* Títulos de seção: sonar/home.css:96-102. */
html.categoria-sonar-fase1 .home-section-title,
html.categoria-sonar-fase1 .article-group-block__title {
    margin: 0 0 12px;
    font: 700 22px/1.1 var(--s-display);
    letter-spacing: .2px;
    color: var(--s-text);
}

/* O cabeçalho do bloco do blog é flex e centra o título com o link; sem a margem de baixo. */
html.categoria-sonar-fase1 .article-group-block__title {
    margin: 0;
}

/* Ponto de fósforo: sonar/home.css:104-113. O h2 da casca do blog traz só o modificador, sem a classe base. */
html.categoria-sonar-fase1 .home-section-title--sinal::before,
html.categoria-sonar-fase1 .category-kicker--sinal::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 8px 2px 0;
    border-radius: 50%;
    background: var(--s-phosphor);
    box-shadow: 0 0 0 4px rgba(116, 255, 103, .18);
    vertical-align: middle;
}

/* Blog: a seção vira o registro de bordo, um painel no fundo abismo com uma linha por artigo
   (spec §4.4). O desenho vem do mockup categoria-sonar-v1 (leitura B, .log), que é uma miniatura de
   540px: os tamanhos de lá vão multiplicados por ~1,33, o mesmo fator do resto da página (o título
   do cartão de oferta foi de 11,5px no mockup para 16px no ar). A base do bloco (borda de cima,
   margens grandes) é anulada aqui sem mexer em RECOMMENDATION_STYLES. O painel fica na coluna das
   capturas (.category-offers-section: 1260px com 1rem de cada lado); em vez de levar o padding de
   1rem, que o engordaria por dentro, ele encolhe 1rem de cada lado e centra. */
html.categoria-sonar-fase1 .expert-tips-section {
    width: calc(100% - 2rem);
    max-width: calc(1260px - 2rem);
    min-width: 0;
    margin: .75rem auto 1.5rem;
    padding: 16px 18px;
    border: 1px solid var(--s-line);
    border-radius: 14px;
    background: var(--s-abyss);
}

/* Cabeçalho: título e frase empilhados à esquerda, o link "todo o registro" à direita. */
html.categoria-sonar-fase1 .expert-tips-section .article-group-block__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
    margin-bottom: 0;
}

html.categoria-sonar-fase1 .expert-tips-section .article-group-block__title {
    grid-column: 1;
    font: 700 22px/1.1 var(--s-display);
    letter-spacing: 0;
    color: var(--s-text);
}

/* A frase começa depois do ponto de fósforo do título (8px do ponto + 8px de margem + folga). */
html.categoria-sonar-fase1 .expert-tips-section .article-group-block__sub {
    display: block;
    grid-column: 1;
    margin: 4px 0 12px 18px;
    font: 400 14px/1.3 var(--s-text-font);
    color: var(--s-muted);
}

html.categoria-sonar-fase1 .expert-tips-section .article-group-block__link {
    grid-column: 2;
    grid-row: 1 / span 2;
    font: 600 13px var(--s-text-font);
    color: var(--s-mint);
    text-decoration: underline;
    text-underline-offset: 2px;
}

html.categoria-sonar-fase1 .expert-tips-section .article-group-block__tiles {
    display: block;
    min-width: 0;
    max-width: 100%;
}

html.categoria-sonar-fase1 .log-line {
    display: grid;
    grid-template-columns: 84px 72px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--s-line-soft);
    color: inherit;
    text-decoration: none;
}

html.categoria-sonar-fase1 .log-line:first-child {
    border-top: 0;
}

html.categoria-sonar-fase1 .log-data {
    font: 600 13px var(--s-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--s-phosphor);
}

html.categoria-sonar-fase1 .log-img {
    display: block;
    width: 72px;
    height: 54px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--s-panel-2);
}

html.categoria-sonar-fase1 .log-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.categoria-sonar-fase1 .log-corpo {
    min-width: 0;
}

html.categoria-sonar-fase1 .log-titulo {
    margin: 0 0 3px;
    font: 700 16px/1.25 var(--s-display);
    overflow-wrap: anywhere;
    color: var(--s-text);
}

/* O resumo do artigo pode ser longo; duas linhas bastam para a linha do registro. */
html.categoria-sonar-fase1 .log-resumo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    color: var(--s-muted);
}

html.categoria-sonar-fase1 .log-ler {
    font: 600 13px var(--s-text-font);
    color: var(--s-mint);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* Com um só artigo a nota aparece tracejada (o atributo hidden a esconde nos outros casos). */
html.categoria-sonar-fase1 .expert-tips-section[data-artigos="1"] .article-group-block__nota {
    margin: 10px 0 0;
    padding: 8px 10px;
    border: 1px dashed var(--s-line);
    border-radius: 8px;
    font-size: 14px;
    color: var(--s-muted);
}

/* O rótulo "Sonar ·" do aviso sai em negrito (o <b> vem da casca, buildBlogShellHTML), no 600:
   a fonte só carrega 400 e 600. */
html.categoria-sonar-fase1 .article-group-block__nota b {
    font-weight: 600;
    color: var(--s-text);
}

/* Celular: o painel volta à largura toda, como antes do alinhamento com a coluna de 1260px. */
@media (max-width: 768px) {
    html.categoria-sonar-fase1 .expert-tips-section {
        width: auto;
        max-width: 100%;
        margin-inline: 0;
    }
}

/* Celular estreito: as linhas do registro ficam como estão (spec §4.7), com as 4 colunas; só a data e
   a miniatura encolhem para o texto caber (o .log-corpo já tem min-width: 0). */
@media (max-width: 480px) {
    html.categoria-sonar-fase1 .log-line {
        grid-template-columns: 52px 48px 1fr auto;
        gap: 8px;
    }

    html.categoria-sonar-fase1 .log-data {
        font-size: 11px;
    }

    html.categoria-sonar-fase1 .log-img {
        width: 48px;
        height: 36px;
    }

    /* A 375px o texto fica com ~160px; a 15px os títulos reais iam a 4 linhas, a 14px ficam em 3 (os longos passam disso: sem teto de linhas, como no desktop). */
    html.categoria-sonar-fase1 .log-titulo {
        font-size: 14px;
    }

    html.categoria-sonar-fase1 .log-resumo {
        font-size: 13px;
    }
}