/**
 * evolury-reviews — resumo slim acima das tabs + resposta da loja.
 *
 * Princípios:
 *  - SLIM: faixa de densidade alta, sem moldura pesada. O resumo não pode
 *    competir com o preço nem empurrar as abas para fora da primeira tela.
 *  - Tokens com fallback: se o tema define --evo-*, herdamos; senão, neutros.
 *  - Alvos de toque >= 24x24 (WCAG 2.5.8) e foco sempre visível (2.4.7).
 */

/* ══════════════════════════════════════════════════════════════════════════
   PAINEL DE DUAS COLUNAS (avaliações fora da aba, acima das abas)

   O `#reviews` do WooCommerce tem dois filhos diretos — `#comments` e
   `#review_form_wrapper`. Com `display: contents` nele, esses dois viram itens
   do NOSSO grid: a lista vai para a direita e o formulário para a faixa de
   baixo, sem copiar template e sem reimplementar o formulário.
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Tokens no PAINEL, não só no resumo.
 *
 * Eles estavam declarados apenas em `.evo-rv-summary`, então o formulário — que é
 * IRMÃO dela no grid, não descendente — não herdava nada: o botão de envio caía no
 * cinza default do tema e as bordas vinham de outro lugar. Herança de custom
 * property segue a árvore do DOM, não a proximidade visual.
 */
.evo-rv-panel {
  --evo-rv-fg: currentColor;
  --evo-rv-muted: color-mix(in srgb, var(--evo-rv-fg) 62%, transparent);
  --evo-rv-line: color-mix(in srgb, var(--evo-rv-fg) 14%, transparent);
  --evo-rv-track: color-mix(in srgb, var(--evo-rv-fg) 10%, transparent);
  /* Barras do histograma em dourado: mesma cor das estrelas do WC, porque
     representam a mesma coisa. Trocar por accent quebraria essa leitura. */
  --evo-rv-fill: #e0a800;
  /* Ações primárias no accent REAL do tema. `--evo-color-primary` não existe —
     era um palpite meu e caía sempre no fallback fixo. */
  --evo-rv-accent: var(--evo-accent, var(--evolury-accent, #14375f));
  --evo-rv-accent-hover: var(--evo-accent-hover, var(--evo-rv-accent));

  --evo-rv-col: 21rem;      /* largura da coluna do resumo */
  --evo-rv-visible: 3;      /* avaliações visíveis antes de rolar */
  --evo-rv-item-h: 8.5rem;  /* altura estimada por avaliação; o JS refina */
  --evo-rv-panel-gap: clamp(1.5rem, 3vw, 3rem);

  display: grid;
  grid-template-columns: minmax(0, var(--evo-rv-col)) minmax(0, 1fr);
  column-gap: var(--evo-rv-panel-gap);
  row-gap: 1.75rem;
  align-items: start;
  margin: 2.5rem 0 2rem;

  /*
   * O painel é o destino do `#reviews`, e o header do tema é `position: sticky`
   * (97 px medidos na emporio). Sem isto o painel aterrissa ATRÁS dele e o
   * cliente vê o meio da primeira avaliação. Mesma expressão que o tema usa nos
   * alvos de rolagem dele.
   */
  scroll-margin-top: calc(var(--evo-header-height, 80px) + 1.25rem);
}

/*
 * Dissolve o wrapper do WC para que seus filhos participem do grid.
 *
 * Pela CLASSE, e não pelo `#reviews` (mu#692): o id passou para o `<section>` do
 * painel, porque elemento com `display: contents` não gera caixa e o link
 * "(N avaliações)" do WooCommerce não tinha para onde rolar. A classe também é
 * mais robusta — ela sobrevive se a remoção do id do wrapper não casar com uma
 * marcação futura do WC.
 */
.evo-rv-panel > .woocommerce-Reviews {
  display: contents;
}

/* ── Coluna 1: resumo, fixo ao rolar (desktop) ──────────────────────────── */

/*
 * Sem `grid-row` fixo — a colocação automática decide.
 *
 * Os três (aviso de envio, resumo, lista) tinham `grid-row: 1` cravado, o que
 * os empilhava NA MESMA CÉLULA: quando o cliente voltava do envio, o painel
 * "Obrigado pela sua avaliação" ficava por cima do resumo e da lista. Não
 * aparecia no empilhado (mobile), só nas duas colunas.
 *
 * Com a colocação automática o resultado é o certo nos dois casos, sem
 * condicional: o aviso ocupa a linha 1 (largura cheia) e empurra resumo/lista
 * para a linha 2; sem aviso, resumo e lista dividem a linha 1 normalmente.
 */
.evo-rv-panel > .evo-rv-summary {
  grid-column: 1;
  /*
   * `start`, não `center`.
   *
   * O card era centrado verticalmente em relação à lista, e isso não sobrevive
   * ao `sticky`: um item centrado começa no MEIO da própria linha do grid, então
   * com a lista expandida (milhares de px) ele nasceria fora da tela e só
   * passaria a acompanhar depois que a rolagem cruzasse a metade da seção.
   *
   * A perda é menor do que parece: com o recorte de 3 avaliações, card e lista
   * têm altura parecida, e aí `center` e `start` desenham praticamente o mesmo.
   * Centrar só ficava visível quando as alturas divergiam muito — que é
   * exatamente o caso em que agora quem resolve é o `sticky`.
   */
  align-self: start;
  /* No painel o resumo é um card, não uma faixa: as bordas de cima/baixo da
     versão em faixa competiriam com a divisória entre as colunas. */
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--evo-rv-line);
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 3%, transparent);
}

/*
 * Card do resumo acompanhando a rolagem — só onde EXISTEM duas colunas.
 *
 * O corte é 901px porque é onde o painel deixa de empilhar (ver o
 * `@media (max-width: 900px)` adiante). No empilhado, prender o card cobriria a
 * lista com o próprio resumo enquanto o cliente tenta ler as avaliações.
 *
 * O alcance do `sticky` é a LINHA do grid: resumo e `#comments` caem na MESMA
 * linha (a colocação automática os coloca lado a lado), então o card acompanha
 * exatamente a altura da seção e é liberado quando ela termina — sem invadir as
 * abas abaixo. Vale igual quando o aviso de envio empurra os dois para a linha 2.
 *
 * `top` reusa a convenção do próprio tema (`ThemeStyles::galleryTemplateCss`):
 * `--evo-header-height` é medida pelo `header.js`, e o acréscimo só vale quando
 * o header está realmente fixo (`body.evo-header-sticky-on`). Sem isso o card
 * pararia ATRÁS do header.
 */
@media (min-width: 901px) {
  .evo-rv-panel > .evo-rv-summary {
    --evo-rv-sticky-top: 1.5rem;
    position: sticky;
    top: var(--evo-rv-sticky-top);
    /*
     * Guarda para viewport baixa, e não enfeite: um card mais alto que a janela,
     * preso pelo topo, deixa a própria base inalcançável — e é lá que mora o
     * botão "Escrever uma avaliação". A rolagem interna aparece só nesse caso
     * (num notebook de janela curta), nunca na altura normal.
     */
    max-height: calc(100vh - var(--evo-rv-sticky-top) - 1.5rem);
    /*
     * Sem `overscroll-behavior: contain` de propósito. Eu havia posto, e ele
     * faria justamente o que critiquei ao tirar a rolagem da lista: prender a
     * roda do mouse dentro do card, parando a página quando o conteúdo interno
     * acaba. Deixar o encadeamento natural é o certo — o card cede a rolagem
     * para a página no fim, como qualquer coluna lateral bem-comportada.
     */
    overflow-y: auto;
  }

  body.evo-header-sticky-on .evo-rv-panel > .evo-rv-summary {
    --evo-rv-sticky-top: calc(var(--evo-header-height, 80px) + 1rem);
  }
}

/* ── Coluna 2: a lista, com altura de N avaliações ─────────────────────── */

.evo-rv-panel #comments {
  grid-column: 2;
  min-width: 0;
  position: relative;
}

/*
 * A lista NÃO rola por dentro — nem no desktop, nem no mobile.
 *
 * Havia rolagem no desktop e recorte no mobile. Unificado no recorte, e a razão
 * vale nos dois: área de rolagem interna compete com a rolagem da página — a roda
 * do mouse age no lugar errado dependendo de onde está o cursor, e no toque o dedo
 * também. Expandir no lugar não tem essa ambiguidade.
 *
 * Unificar apagou junto: máscara com rastreio de fim, listener de scroll, barra
 * estilizada e a região focável com `aria-label` — que só precisava existir porque
 * havia rolagem.
 */
.evo-rv-panel .commentlist {
  margin: 0;
  overflow: visible;
}

/*
 * Recorte aplicado pelo JS, que mede os itens REAIS (a estimativa em CSS não
 * sobrevive a avaliação com foto ou com resposta da loja).
 *
 * A última avaliação visível sai cortada e esmaecida: é o sinal que se lê sem
 * pensar. Um fade fixo no rodapé caía quase todo em espaço vazio e não comunicava
 * nada — foi a primeira versão, e não funcionava.
 */
.evo-rv-panel .commentlist.is-clamped {
  max-height: var(--evo-rv-clamp, 28rem);
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - var(--evo-rv-fade, 4.5rem)),
    rgba(0, 0, 0, 0.15) calc(100% - var(--evo-rv-fade, 4.5rem) / 3),
    transparent 100%
  );
}
/* Título do WC: some no painel — o resumo à esquerda já diz o que é. */
.evo-rv-panel .woocommerce-Reviews-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Correções no `.comment-text`, que é o cartão desenhado pelo próprio
 * WooCommerce (tem borda e cantos arredondados vindos do CSS dele).
 *
 * ⚠️ SELETOR PESADO DE PROPÓSITO. A regra do WooCommerce é
 * `.woocommerce #reviews #comments ol.commentlist li .comment-text` — dois ids.
 * A primeira tentativa aqui usava só classes e simplesmente não aplicava:
 * o `margin-left: 50px` continuava de pé no navegador, mesmo com a classe no
 * body presente. Precisa empatar em ids para vencer.
 *
 * Dois problemas resolvidos aqui:
 *
 * 1. `margin-left: 50px` — espaço que existia para o gravatar. Removida a
 *    imagem, sobra um buraco à esquerda e o conteúdo comprimido à direita.
 * 2. `padding: 16px 16px 0` — o WC não dá padding EMBAIXO, então o último
 *    elemento do cartão (hoje o botão "foi útil") encosta na borda inferior.
 */
body.evo-rv-no-avatar #reviews #comments ol.commentlist li .comment-text {
  margin-left: 0;
}

/*
 * Rede de segurança para o avatar.
 *
 * A remoção de verdade é no PHP (`ReviewCard::dropGravatar`) — só ela evita a
 * requisição da imagem ao gravatar.com. Esta regra existe porque a remoção
 * depende de CONTEXTO: bastou o gancho errado para o avatar reaparecer apenas
 * na lista reconstruída por AJAX, e o sintoma foi o nome do autor decepado, não
 * um "avatar sobrando" — pista que não aponta para a causa.
 *
 * Qualquer coisa que reintroduza o gravatar (tema, plugin de terceiro, um
 * caminho de render que eu não previ) volta a ter o mesmo desfecho silencioso.
 * Aqui o custo é uma linha; deixar sem defesa custou um bug em produção.
 */
body.evo-rv-no-avatar #reviews #comments ol.commentlist li img.avatar {
  display: none;
}

/*
 * `body` no seletor não é enfeite: a regra do WC é
 * `.woocommerce #reviews #comments ol.commentlist li .comment-text`
 * → 2 ids, 3 classes, 2 elementos. Sem o `body` eu ficava com 2 classes e
 * perdia — o `padding-bottom` simplesmente não aplicava no navegador, mesmo
 * "parecendo" específico o bastante.
 */
body.woocommerce #reviews #comments ol.commentlist li .comment-text {
  padding-bottom: 1rem;
}

/* Cartões com respiro entre si, já que agora vivem numa coluna estreita. */
.evo-rv-panel .commentlist > li {
  padding: 0 0 1.1rem;
  margin: 0 0 1.1rem;
  border-bottom: 1px solid var(--evo-rv-line);
  list-style: none;
}

.evo-rv-panel .commentlist > li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

/* ═══════════════════════════════ MODAL ═══════════════════════════════════

   `<dialog>` nativo. O `showModal()` entrega top layer, `::backdrop`, fundo
   inerte, Esc e foco inicial — exatamente o contrato que o modal do Loox falha em
   produção (sem `role`, sem `aria-modal`, sem `inert`).

   Desktop: card centrado, 560px (o Judge.me usa 568px na coluna do formulário).
   Mobile: BOTTOM SHEET. NN/g avisa que overlay desenhado para desktop cria "efeito
   desorientador" no celular; sheet é o padrão nativo e o gesto de fechar fica onde
   o dedo já está.
   ════════════════════════════════════════════════════════════════════════════ */

/* Formulário sai do fluxo: ele vive dentro do modal (movido pelo JS).
   O `<noscript>` no Panel desfaz isto quando não há JS. */
.evo-rv-panel #review_form_wrapper {
  display: none;
}

.evo-rv-modal {
  /* Centralização EXPLÍCITA. O `<dialog>` centraliza via `inset:0; margin:auto` na
     folha do navegador, mas qualquer reset de tema que zere `margin` em `dialog`
     joga o modal para o canto superior esquerdo — foi o que aconteceu aqui. */
  position: fixed;
  inset: 0;
  margin: auto;

  width: min(560px, calc(100vw - 2rem));
  max-height: min(88vh, 46rem);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: inherit;
  overflow: hidden;
  /* Única sombra do arquivo: aqui é overlay de verdade, e Carbon só proíbe sombra
     em tile de conteúdo. */
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35);
}

.evo-rv-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.evo-rv-modal[open] {
  animation: evo-rv-modal-in 240ms cubic-bezier(0, 0, 0.38, 0.9);
}

.evo-rv-modal[open]::backdrop {
  animation: evo-rv-fade-in 240ms cubic-bezier(0, 0, 0.38, 0.9);
}

@keyframes evo-rv-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes evo-rv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.evo-rv-modal__sheet {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

/* Alça: só existe no sheet do mobile. */
.evo-rv-modal__grip {
  display: none;
}

/* ── Cabeçalho: contexto do produto + fechar ───────────────────────────── */

.evo-rv-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  flex: 0 0 auto;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--evo-rv-line);
}

.evo-rv-modal__ctx {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.evo-rv-modal__thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

.evo-rv-modal__ctx-text {
  min-width: 0;
}

.evo-rv-modal__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
}

.evo-rv-modal__title:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 3px;
  border-radius: 4px;
}

.evo-rv-modal__product {
  margin: 0.1rem 0 0;
  font-size: 0.8125rem;
  color: var(--evo-rv-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 44x44: alvo confortável, e fechar é a ação de escape mais usada. */
.evo-rv-modal__close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -0.35rem -0.35rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.evo-rv-modal__close:hover {
  background: var(--evo-rv-track);
}

.evo-rv-modal__close:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: -2px;
}

/* ── Corpo rolável ─────────────────────────────────────────────────────── */

/*
 * O corpo rola, não o modal inteiro: assim o cabeçalho com o contexto do produto
 * fica fixo. Também é o que responde à ressalva do Carbon sobre upload em modal —
 * as miniaturas não empurram o botão para fora do alcance.
 */
.evo-rv-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  /*
   * FONTE ÚNICA do respiro do corpo. A barra de ações sangra para as bordas com
   * margem negativa, e ela PRECISA casar com este valor — quando os dois eram
   * números soltos, o mobile baixou o padding para 1rem e a margem continuou em
   * 1.25rem: 4px de excesso por lado, barra 8px mais larga que o corpo, e o
   * usuário conseguia ARRASTAR o modal na horizontal. Com a variável, mudar o
   * respiro num lugar move os dois juntos.
   */
  --evo-rv-pad: 1.25rem;
  padding: var(--evo-rv-pad);
  /*
   * Cinto de segurança: modal de formulário não rola na horizontal, ponto. Se
   * algum conteúdo injetado pelo tema ou pelo WP estourar a largura, ele é
   * cortado em vez de virar arrasto lateral. `clip` (e não `hidden`) não cria
   * contexto de rolagem — o `overflow-y: auto` acima segue valendo.
   */
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
}

.evo-rv-modal__body #review_form_wrapper {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/*
 * Dentro do modal o título do WC é redundante (o cabeçalho já diz) — e aqui a
 * disputa é com uma regra MINHA: `.evo-rv-panel #review_form_wrapper
 * .comment-reply-title` (1 id + 2 classes) estilizava o título e vencia este
 * `display:none` de 2 classes. Resultado na tela: título duplicado.
 */
/*
 * ⚠️ Uma classe a mais do que parece necessário, de propósito.
 *
 * `.evo-rv-modal__body #review_form_wrapper .comment-reply-title` EMPATA em
 * especificidade com a regra que estiliza o título no modo sem-JS
 * (`.evo-rv-panel #review_form_wrapper .comment-reply-title`) — 1 id + 2 classes
 * nas duas. Empate se resolve por ordem no arquivo, e a de estilo vem depois, então
 * o título aparecia duas vezes: uma no cabeçalho do modal e outra no corpo.
 */
.evo-rv-modal .evo-rv-modal__body #review_form_wrapper .comment-reply-title {
  display: none;
}

/* ── Rodapé de ações (montado pelo JS) ─────────────────────────────────── */

/*
 * Carbon: em dialog o grupo de botões "deve ocupar a largura do contêiner e
 * sangrar até a borda inferior". E NN/g é explícito que overlay com formulário
 * "precisa de uma opção 'Cancelar' explícita" — sem ela, sair só é possível por
 * gesto que descarta trabalho.
 */
/*
 * Rodapé de ações. Vive DENTRO do `<form>` (ver `mountModal` no reviews.js —
 * fora dele o botão de enviar fica órfão e o modal nunca envia), portanto dentro
 * da área de rolagem. Então quem prende no fim é o `sticky`, não o flex do sheet.
 *
 * As margens negativas sangram até as bordas do corpo, que tem `padding: 1.25rem`
 * — sem elas a barra ficaria "flutuando" com uma faixa branca em volta.
 */
/*
 * CAMPOS DE NOME E E-MAIL — vêm do `comment_form()` do WordPress, não do nosso
 * markup, e por isso não tinham estilo nenhum aqui.
 *
 * POR QUE APARECIAM "ZERADOS": o tema usa Tailwind, cujo Preflight remove borda e
 * fundo de TODO controle de formulário. Não é bug do tema — é o reset padrão, e
 * qualquer tema moderno com reset semelhante produz o mesmo. Por isso a correção
 * pertence a este mu-plugin: o popup precisa ficar legível sob QUALQUER tema, sem
 * depender de o tema estilizar `input` genérico.
 *
 * Espelha o que o `textarea` do comentário já tinha, e não inventa um segundo
 * visual dentro do mesmo formulário.
 */
.evo-rv-modal__body #respond .comment-form-author input,
.evo-rv-modal__body #respond .comment-form-email input,
.evo-rv-modal__body #respond .comment-form-url input {
  width: 100%;
  box-sizing: border-box;
  /*
   * ESPELHA o textarea do comentário (`#review_form_wrapper textarea`, mais
   * abaixo): mesmos tokens, mesmo raio, mesmo foco. Dois visuais diferentes
   * dentro do MESMO formulário é pior que campo sem borda — o usuário lê como
   * dois estados, não como dois campos.
   */
  border: 1px solid var(--evo-rv-line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
  padding: 0.75rem 0.9rem;
  /*
   * 44px é o alvo de toque mínimo (WCAG 2.5.8). Vinham com 24px — metade do que
   * a mão precisa.
   */
  min-height: 44px;
  line-height: 1.35;
  /*
   * 16px LITERAL, e não `1rem` como o textarea vizinho — desvio deliberado. O
   * motivo do valor é impedir o autozoom do iOS no foco, e `1rem` só é 16px
   * enquanto a raiz for 16px. Este popup precisa funcionar sob QUALQUER tema,
   * inclusive um que mexa na raiz.
   */
  font-size: 16px;
}

/*
 * Mesmo foco do textarea: anel por `outline` e borda transparente. Sem
 * `!important` em nada aqui — o seletor (id + duas classes + elemento) já vence
 * o Preflight do Tailwind, que zera o input com especificidade de ELEMENTO. O
 * textarea ao lado é a prova viva de que não precisa: nunca usou.
 */
.evo-rv-modal__body #respond .comment-form-author input:focus-visible,
.evo-rv-modal__body #respond .comment-form-email input:focus-visible,
.evo-rv-modal__body #respond .comment-form-url input:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 1px;
  border-color: transparent;
}

.evo-rv-modal__body #respond .comment-form-author label,
.evo-rv-modal__body #respond .comment-form-email label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/*
 * Nome e e-mail lado a lado no desktop: dois campos curtos empilhados empurram o
 * botão de enviar para fora da primeira dobra.
 *
 * A FOLGA DE 0.6rem NÃO É ESTÉTICA. São dois `<p>` irmãos que o `comment_form()`
 * emite separados por quebra de linha, e `inline-block` transforma esse
 * whitespace num espaço real de ~4px. Com as larguras somando exatos 100%, esse
 * espaço estouraria a linha — recriando, no desktop, o mesmo transbordo
 * horizontal que esta issue veio corrigir no mobile. A folga o absorve.
 */
@media (min-width: 601px) {
  .evo-rv-modal__body #respond .comment-form-author,
  .evo-rv-modal__body #respond .comment-form-email {
    display: inline-block;
    width: calc(50% - 0.6rem);
    vertical-align: top;
  }

  .evo-rv-modal__body #respond .comment-form-author {
    margin-right: 0.6rem;
  }
}

.evo-rv-modal__actions {
  display: flex;
  gap: 0.75rem;
  /*
   * `center`, não o `stretch` default.
   *
   * Com stretch, QUALQUER altura extra dentro da barra estica os botões junto: a
   * regra do Carbon abaixo dava 48px de margem ao `.form-submit`, a linha virava
   * 96px e o Cancelar (raio 999px) esticava para 110×96 — uma bolha. Centrar
   * torna a barra imune a isso, não só ao caso que eu já corrigi.
   */
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 1;
  /* Os 48px do Carbon (respiro entre o último campo e o grupo de botões) moram
     AQUI, na barra inteira — não dentro dela, onde inflavam a altura da linha. */
  /* Sangra exatamente o respiro do corpo — nem mais, nem menos. Ver --evo-rv-pad. */
  margin: 3rem calc(var(--evo-rv-pad, 1.25rem) * -1) calc(var(--evo-rv-pad, 1.25rem) * -1);
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--evo-rv-line);
  background: #fff;
}

/*
 * Zera o respiro do Carbon quando o `.form-submit` está DENTRO da barra.
 *
 * A regra original (`.evo-rv-panel #respond .form-submit`, mais abaixo) é do tempo
 * em que o formulário era inline e o `.form-submit` era o último bloco da coluna.
 * Ela usa `!important`, então preciso de `!important` e de mais especificidade —
 * daí repetir o `#respond`, que também é ancestral da barra.
 */
.evo-rv-panel #respond .evo-rv-modal__actions .form-submit {
  margin: 0 !important;
}

.evo-rv-modal__actions .evo-rv-modal__cancel {
  min-height: 48px;
  padding: 0 1.25rem;
  border: 1px solid var(--evo-rv-line);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.evo-rv-modal__actions .evo-rv-modal__cancel:hover {
  border-color: currentColor;
}

/* O submit real do WC é movido para cá pelo JS e ocupa o espaço restante. */
.evo-rv-modal__actions .form-submit {
  flex: 1 1 auto;
  margin: 0 !important;
}

/*
 * Ao mover para o rodapé, o botão saiu de dentro do `#respond` — então nem a regra
 * do WooCommerce nem a nossa (`.evo-rv-panel #respond input#submit`) casam mais, e
 * ele fica sem fundo nenhum. O estilo tem de ser redeclarado para a nova posição.
 */
.evo-rv-modal__actions #submit {
  width: 100%;
  min-height: 48px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--evo-rv-accent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.evo-rv-modal__actions #submit:hover {
  opacity: 0.9;
}

.evo-rv-modal__actions #submit:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 2px;
}

/* Os tokens vivem em `.evo-rv-panel`; o dialog é filho dela, mas o `showModal`
   promove ao top layer — garantimos os valores aqui também. */
.evo-rv-modal {
  --evo-rv-line: rgba(0, 0, 0, 0.14);
  --evo-rv-track: rgba(0, 0, 0, 0.07);
  --evo-rv-muted: rgba(0, 0, 0, 0.6);
  --evo-rv-fill: #e0a800;
  --evo-rv-accent: var(--evo-accent, var(--evolury-accent, #14375f));
}

/* Painel de agradecimento após o envio. */
.evo-rv-thanks {
  grid-column: 1 / -1;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--evo-rv-fill);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--evo-rv-fill) 10%, transparent);
}

.evo-rv-thanks__title {
  margin: 0 0 0.2rem;
  font-weight: 700;
}

.evo-rv-thanks__text {
  margin: 0;
  font-size: 0.8125rem;
}

/* ── Mobile: bottom sheet ──────────────────────────────────────────────── */

@media (max-width: 640px) {
  .evo-rv-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    /* Bottom sheet: com `inset:0` + `margin:auto` explícitos, colar embaixo é
       zerar a margem inferior e deixar a superior automática. */
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }

  .evo-rv-modal[open] {
    animation: evo-rv-sheet-in 260ms cubic-bezier(0, 0, 0.38, 0.9);
  }

  @keyframes evo-rv-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  .evo-rv-modal__grip {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0.6rem auto 0;
    border-radius: 999px;
    background: var(--evo-rv-track);
  }

  .evo-rv-modal__head {
    padding: 0.75rem 1rem 0.9rem;
  }

  .evo-rv-modal__body,
  .evo-rv-modal__actions {
    padding: 1rem;
  }

  /*
   * Basta mover a variável: a margem negativa da barra é derivada dela, então os
   * dois continuam casados. Era exatamente aqui que a conta quebrava antes.
   */
  .evo-rv-modal__body {
    --evo-rv-pad: 1rem;
  }

  /*
   * Empilhado com o PRIMÁRIO EMBAIXO. Carbon: "se o conteúdo do botão for longo,
   * empilhe verticalmente (com o botão primário embaixo)". No bottom sheet isso
   * também é ergonomia: o primário fica onde o polegar já está.
   *
   * `wrap` e não `wrap-reverse` — o reverse invertia o eixo e jogava o Enviar para
   * cima do Cancelar.
   */
  .evo-rv-modal__actions {
    flex-wrap: wrap;
    /* Área segura do iPhone: sem isto o botão fica atrás da barra do sistema. */
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .evo-rv-modal__actions .evo-rv-modal__cancel,
  .evo-rv-modal__actions .form-submit {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evo-rv-modal[open],
  .evo-rv-modal[open]::backdrop {
    animation: none;
  }
}

/* SC 2.4.11: o header fixo do tema não pode cobrir o alvo da rolagem. */
.evo-rv-panel #review_form_wrapper {
  scroll-margin-top: 6rem;
}

.evo-rv-panel #review_form_wrapper .comment-reply-title {
  /* `inline-block` para o anel de foco abraçar o TEXTO. Em `block` ele
     contornava a largura toda do card, virando uma moldura estranha — e este
     título recebe foco de propósito ao abrir o formulário. */
  display: inline-block;
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.evo-rv-panel #review_form_wrapper .comment-reply-title:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 3px;
}

/* Carbon: 24px entre campos em formulário CONTIDO (card), não os 32px de página. */
.evo-rv-panel #review_form_wrapper .comment-form-rating,
.evo-rv-panel #review_form_wrapper .comment-form-comment,
.evo-rv-panel #review_form_wrapper .evo-rv-upload {
  margin: 0 0 1.5rem;
}

.evo-rv-panel #review_form_wrapper .comment-form-rating label,
.evo-rv-panel #review_form_wrapper .comment-form-comment label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

/*
 * Estrelas: é o primeiro campo e o mais clicado.
 *
 * ⚠️ SÓ ESTILO AQUI. O WooCommerce já implementa a semântica correta —
 * `role="group"` + `role="radio"` + roving tabindex + `aria-checked`
 * (`single-product.js:123-130`). Eu havia escrito um "fixStarsA11y" no JS
 * assumindo que faltava tabindex (achado da pesquisa sobre o Judge.me) e ele
 * sobrescrevia `role="radio"` por `role="button"`, destruindo a semântica de
 * grupo. Removido. Não reintroduzir sem checar o markup do WC primeiro.
 *
 * Área de toque de 42px espelha a medição do Loox (a mais generosa das quatro
 * plataformas) e passa folgado do mínimo AA de 24px (SC 2.5.8).
 *
 * Estados de hover E de foco, ambos: hover sozinho é falha tripla — invisível no
 * toque, invisível para teclado/leitor de tela (4.1.2/1.3.1).
 */
.evo-rv-panel #review_form_wrapper .stars {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1;
}

.evo-rv-panel #review_form_wrapper .stars a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  margin: 0;
  transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms ease;
}

.evo-rv-panel #review_form_wrapper .stars a:hover {
  opacity: 0.8;
}

.evo-rv-panel #review_form_wrapper .stars a:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 2px;
  border-radius: 6px;
}

.evo-rv-panel #review_form_wrapper .stars.selected a {
  transform: scale(1);
}

.evo-rv-panel #review_form_wrapper textarea {
  width: 100%;
  min-height: 7rem;
  /* 16px mínimo: abaixo disso o iOS dá zoom automático no foco. O Judge.me usa
     13px e sofre exatamente esse defeito. */
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--evo-rv-line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
  resize: vertical;
}

.evo-rv-panel #review_form_wrapper textarea:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 1px;
  border-color: transparent;
}

/* Carbon: 48px entre o último campo e o grupo de botões. Via `#respond` porque
   `#review_form_wrapper .form-submit` perdia para a regra do WC. */
.evo-rv-panel #respond .form-submit {
  margin: 3rem 0 0 !important;
}

/*
 * Botão primário. Carbon: em formulário DENTRO da página o grupo de botões é
 * alinhado à esquerda (largura cheia é para dialog/side panel).
 */
/*
 * ⚠️ Seletor com DOIS ids de propósito. A regra do WC é
 * `.woocommerce:where(body:not(...)) #respond input#submit` — o `:where()`
 * contribui ZERO especificidade, mas `#respond` + `#submit` são dois ids. Meu
 * seletor anterior (`#review_form_wrapper .form-submit .submit`) tinha um id só
 * e perdia: o botão continuava com o cinza default do WooCommerce, que não lê
 * como ação primária.
 */
.evo-rv-panel #respond input#submit {
  min-height: 48px;
  padding: 0 2rem;
  border: 0;
  border-radius: 999px;
  /* O azul do tema quando existir; o preto do texto como último recurso —
     nunca o cinza default, que não lê como ação primária. */
  background: var(--evo-rv-accent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.evo-rv-panel #respond input#submit:hover {
  opacity: 0.9;
}

.evo-rv-panel #respond input#submit:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 2px;
}

/* "Cancelar resposta" é do fluxo de comentário aninhado do WP e aqui vira ruído
   dentro do próprio título do formulário ("Escrever uma avaliação Cancelar
   resposta"). Quem fecha o formulário é o CTA. */
.evo-rv-panel #review_form_wrapper #cancel-comment-reply-link {
  display: none;
}

/* Ruído do WP que não faz sentido em avaliação de produto. */
.evo-rv-panel #review_form_wrapper .comment-form-cookies-consent,
.evo-rv-panel #review_form_wrapper .comment-notes {
  font-size: 0.75rem;
  opacity: 0.7;
}

/*
 * Sem avaliação nenhuma: uma coluna só, e a seção do WooCommerce SAI DE CENA.
 *
 * O `#comments` do WC renderiza "Não há avaliações ainda." — que duplicava a
 * mensagem do nosso card ("Este produto ainda não tem avaliações.") e gastava uma
 * faixa inteira de altura para não dizer nada de novo. Removida a seção, o espaço
 * volta para o conteúdo que importa.
 */
.evo-rv-panel--empty {
  grid-template-columns: minmax(0, 1fr);
}

.evo-rv-panel--empty #comments {
  display: none;
}

.evo-rv-panel--empty > .evo-rv-summary,
.evo-rv-panel--empty #review_form_wrapper {
  grid-column: 1;
  grid-row: auto;
}

/* No estado vazio o card não precisa de largura de coluna estreita. */
.evo-rv-panel--empty > .evo-rv-summary {
  max-width: 34rem;
}

/* ── Mobile: uma coluna ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .evo-rv-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .evo-rv-panel > .evo-rv-summary,
  .evo-rv-panel #comments,
  .evo-rv-panel #review_form_wrapper {
    grid-column: 1;
    grid-row: auto;
  }

  /* Mobile: o recorte é o mesmo do desktop; só o padding lateral sai. */
  .evo-rv-panel .commentlist {
    padding-right: 0;
  }
}

.evo-rv-summary {
  --evo-rv-gap: 1.25rem;
  --evo-rv-fg: currentColor;
  --evo-rv-muted: color-mix(in srgb, var(--evo-rv-fg) 62%, transparent);
  --evo-rv-line: color-mix(in srgb, var(--evo-rv-fg) 14%, transparent);
  --evo-rv-track: color-mix(in srgb, var(--evo-rv-fg) 10%, transparent);
  --evo-rv-fill: #e0a800;

  margin: 2rem 0 1.5rem;
  padding: 1.15rem 0 1rem;
  border-top: 1px solid var(--evo-rv-line);
  border-bottom: 1px solid var(--evo-rv-line);
  color: var(--evo-rv-fg);
}

.evo-rv-summary__title {
  margin: 0 0 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--evo-rv-muted);
}

.evo-rv-summary__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--evo-rv-gap);
}

/* ── Nota média ───────────────────────────────────────────────────────── */

.evo-rv-score {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 0 0 auto;
  min-width: 8.5rem;
}

.evo-rv-score__avg {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* O .star-rating vem do WooCommerce; só ajustamos o encaixe. */
.evo-rv-score__stars .star-rating {
  margin: 0.1rem 0;
  float: none;
}

.evo-rv-score__count {
  font-size: 0.8125rem;
  color: var(--evo-rv-muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  align-self: flex-start;
}

.evo-rv-score__count:hover,
.evo-rv-score__count:focus-visible {
  color: var(--evo-rv-fg);
}

/* ── Histograma ───────────────────────────────────────────────────────── */

/*
 * O histograma é um bloco COMPACTO ao lado da nota, não uma faixa que atravessa
 * a página: barra de 900px transmite volume que a loja não tem e desgarra a
 * contagem do fim da barra. `flex: 0 1 <base>` + `margin-right:auto` mantêm a
 * largura sob controle e o conjunto ancorado à esquerda, como Shopee/ML/WoodMart.
 */
.evo-rv-hist {
  flex: 0 1 22rem;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.evo-rv-hist__item {
  margin: 0;
}

.evo-rv-hist__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 24px; /* WCAG 2.5.8 */
  padding: 0 0.25rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.evo-rv-hist--filter .evo-rv-hist__row:not([disabled]) {
  cursor: pointer;
}

.evo-rv-hist--filter .evo-rv-hist__row:not([disabled]):hover {
  background: var(--evo-rv-track);
}

.evo-rv-hist__row:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 1px;
}

.evo-rv-hist__row[disabled] {
  cursor: default;
  opacity: 0.55;
}

.evo-rv-hist__star {
  flex: 0 0 auto;
  width: 2.1rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--evo-rv-muted);
}

.evo-rv-hist__bar {
  flex: 1 1 auto;
  height: 7px;
  min-width: 0;
  border-radius: 999px;
  background: var(--evo-rv-track);
  overflow: hidden;
}

.evo-rv-hist__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--evo-rv-fill);
  transition: width 0.25s ease;
}

.evo-rv-hist__count {
  flex: 0 0 auto;
  min-width: 2.25rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--evo-rv-muted);
}

/* Barra ativa (filtro aplicado). */
.evo-rv-hist__row[aria-pressed="true"] {
  background: var(--evo-rv-track);
}

.evo-rv-hist__row[aria-pressed="true"] .evo-rv-hist__star,
.evo-rv-hist__row[aria-pressed="true"] .evo-rv-hist__count {
  color: var(--evo-rv-fg);
  font-weight: 600;
}

/* ── Sem avaliação ────────────────────────────────────────────────────── */

.evo-rv-summary--empty {
  padding: 0.9rem 0;
}

.evo-rv-summary__none {
  margin: 0;
  font-size: 0.875rem;
  color: var(--evo-rv-muted);
}

.evo-rv-summary__cta {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* ── CTA "Escrever uma avaliação", dentro do card ──────────────────────── */

.evo-rv-summary__cta {
  /* O tema sublinha texto dentro de elementos clicáveis; num botão primário o
     sublinhado lê como link e destoa do resto dos botões da loja. */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;      /* 2.5.5 (AAA) */
  margin-top: 1rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--evo-rv-accent);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* `!important` no width: o CSS de botão do tema define largura automática com
   especificidade maior, e sem isto o CTA fica com 182px no meio do card. */
.evo-rv-summary__cta {
  width: 100% !important;
}

.evo-rv-summary__cta:hover {
  background: var(--evo-rv-accent-hover);
  text-decoration: none;
}

.evo-rv-summary__cta:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 2px;
}

.evo-rv-summary__cta-icon {
  display: inline-flex;
}

/* Aberto, o gatilho fica recolhido — já cumpriu o papel. */
.evo-rv-panel.is-form-open .evo-rv-summary__cta {
  display: none;
}

/* ── Transparência ────────────────────────────────────────────────────── */

/*
 * Transparência: precisa ser legível SEM interação (não vale tooltip nem link),
 * então fica no fluxo.
 *
 * Uma coluna, sempre. Tentei 2 colunas para economizar altura quando o bloco
 * ficava numa faixa larga; no painel de 2 colunas o resumo passou a viver num
 * card de ~21rem, e ali a segunda coluna quebra as frases em 3-4 linhas cada —
 * mais alto E mais difícil de ler que empilhado.
 */
.evo-rv-disclosure {
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--evo-rv-line);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--evo-rv-muted);
}

.evo-rv-disclosure__lead {
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.evo-rv-disclosure__list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
  display: grid;
  gap: 0.2rem;
}

.evo-rv-disclosure__list li {
  margin: 0;
}

/* Afirmação única: sem marcador, sem recuo de lista. */
.evo-rv-disclosure__single {
  margin: 0;
}

/* ── Barra de estado do filtro (injetada pelo JS) ─────────────────────── */

.evo-rv-filterbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--evo-rv-track, rgba(0, 0, 0, 0.05));
  font-size: 0.8125rem;
}

.evo-rv-filterbar__clear {
  min-height: 24px;
  padding: 0 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.evo-rv-list--loading {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.evo-rv-empty {
  margin: 0;
  padding: 1rem 0;
}

.evo-rv-more {
  display: block;
  margin: 0.75rem auto 0;
}

/* "Ver todas" do mobile: link discreto, largura cheia para ser alvo fácil. */
.evo-rv-expand {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0.5rem 0 0;
  padding: 0 1rem;
  border: 1px solid var(--evo-rv-line);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.evo-rv-expand:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 2px;
}

.evo-rv-notice {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border-left: 3px solid #c0392b;
  background: color-mix(in srgb, #c0392b 8%, transparent);
  font-size: 0.8125rem;
}

/* ── Chip de filtro ───────────────────────────────────────────────────── */

.evo-rv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
}

.evo-rv-chip {
  min-height: 28px;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--evo-rv-line);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.evo-rv-chip:hover {
  border-color: currentColor;
}

.evo-rv-chip[aria-pressed="true"] {
  border-color: currentColor;
  background: var(--evo-rv-track);
  font-weight: 600;
}

.evo-rv-chip:focus-visible {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 1px;
}

/* ── Seletor de ordenação ─────────────────────────────────────────────── */

.evo-rv-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
}

/*
 * Na coluna do painel (~21rem) o rótulo e o select não cabem lado a lado e o
 * "Ordenar por" quebra em duas linhas. Empilhados, cabem e ficam alinhados com o
 * resto do card.
 */
.evo-rv-panel .evo-rv-chips {
  display: grid;
  gap: 0.5rem;
}

.evo-rv-panel .evo-rv-sort {
  display: grid;
  gap: 0.25rem;
  justify-items: stretch;
}

.evo-rv-panel .evo-rv-sort__select {
  width: 100%;
}

.evo-rv-panel .evo-rv-chip {
  justify-self: start;
}

.evo-rv-sort__label {
  color: var(--evo-rv-muted, currentColor);
}

.evo-rv-sort__select {
  min-height: 28px;
  padding: 0.1rem 1.5rem 0.1rem 0.5rem;
  border: 1px solid var(--evo-rv-line, rgba(0, 0, 0, 0.14));
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
}

/* ── Voto de utilidade ────────────────────────────────────────────────── */

.evo-rv-helpful {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.7rem 0 0;
  font-size: 0.75rem;
  color: var(--evo-rv-muted, currentColor);
}

.evo-rv-helpful__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 28px; /* > 24px: WCAG 2.5.8 */
  padding: 0.15rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.evo-rv-helpful__btn:hover:not([disabled]) {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.evo-rv-helpful__btn:focus-visible {
  outline: 2px solid var(--evo-rv-fill, #e0a800);
  outline-offset: 1px;
}

/* Votado: some o cursor de ação, mas o estado continua legível (o voto é
   imutável, então o botão desabilitado é a verdade, não um bug). */
.evo-rv-helpful__btn.is-voted,
.evo-rv-helpful__btn[disabled] {
  cursor: default;
  opacity: 0.9;
}

.evo-rv-helpful__btn.is-voted {
  border-color: var(--evo-rv-fill, #e0a800);
  color: var(--evo-rv-fg, currentColor);
  font-weight: 600;
}

.evo-rv-helpful__icon {
  display: inline-flex;
}

.evo-rv-helpful__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.evo-rv-helpful__count[hidden] {
  display: none;
}

/* ── Faixa "fotos de clientes" ────────────────────────────────────────── */

.evo-rv-strip {
  flex: 1 1 12rem;
  min-width: 0;
}

.evo-rv-strip__title {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--evo-rv-muted, currentColor);
}

/* ── Tira de mídia (cartão e faixa) ───────────────────────────────────── */

.evo-rv-media {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

/* Na faixa do resumo não quebra linha: rola na horizontal. */
.evo-rv-media--strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  margin: 0;
  padding-bottom: 0.25rem;
}

.evo-rv-media__item {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
}

.evo-rv-media__open {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--evo-rv-line, rgba(0, 0, 0, 0.12));
  border-radius: 6px;
  background: none;
  overflow: hidden;
  cursor: pointer;
}

.evo-rv-media__open:focus-visible {
  outline: 2px solid var(--evo-rv-fill, #e0a800);
  outline-offset: 2px;
}

.evo-rv-media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evo-rv-media__play {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  pointer-events: none;
}

.evo-rv-media__more {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 44px;
  margin: 0;
}

.evo-rv-media__more a {
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

/* Vídeo dentro do PhotoSwipe. */
.evo-rv-lightbox-video {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.evo-rv-lightbox-video video {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
}

/* ── Campo de upload ──────────────────────────────────────────────────── */

.evo-rv-upload {
  margin: 0 0 1rem;
}

.evo-rv-upload__title {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

/*
 * Área de soltar. O input nativo continua no DOM (focável, é ele que o <label>
 * ativa pelo teclado) mas fica visualmente escondido — o "Procurar… Nenhum
 * arquivo selecionado" é UI do navegador: não estiliza, não traduz e destoa.
 */
.evo-rv-upload__drop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px dashed color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.evo-rv-upload__drop:hover,
.evo-rv-upload__drop:focus-within {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.evo-rv-upload__drop-icon {
  display: inline-flex;
  flex: 0 0 auto;
  opacity: 0.75;
}

.evo-rv-upload__drop-text {
  display: grid;
  gap: 0.1rem;
  font-size: 0.8125rem;
}

/* Escondido só visualmente: continua no fluxo de foco. */
.evo-rv-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evo-rv-upload__drop:focus-within {
  outline: 2px solid var(--evo-rv-fill);
  outline-offset: 2px;
}

.evo-rv-upload__optional {
  font-weight: 400;
  opacity: 0.65;
}

.evo-rv-upload__hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  opacity: 0.72;
}

.evo-rv-upload__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.evo-rv-upload__item {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  overflow: hidden;
}

.evo-rv-upload__item.is-uploading {
  opacity: 0.6;
}

.evo-rv-upload__thumb,
.evo-rv-upload__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evo-rv-upload__thumb.is-video {
  background: #222 center / 40% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.evo-rv-upload__status {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1px 3px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.625rem;
  text-align: center;
}

/* Fechar >= 24x24 (WCAG 2.5.8): o mercado usa ~18px e falha o critério. */
.evo-rv-upload__remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.68);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.evo-rv-upload__errors p {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  border-left: 3px solid #c0392b;
  background: color-mix(in srgb, #c0392b 8%, transparent);
  font-size: 0.8125rem;
}

/* ── Resposta da loja ─────────────────────────────────────────────────── */

/*
 * O item já vem aninhado em <ul class="children"> pelo Walker do WP; aqui só
 * damos a leitura de "resposta", não de "outra avaliação".
 */
.commentlist .evo-rv-reply {
  list-style: none;
}

.commentlist .evo-rv-reply .comment_container {
  border-left: 3px solid var(--evo-rv-fill, #e0a800);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
  padding: 0.75rem 0.9rem;
}

.evo-rv-reply__label {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* A resposta não tem nota — se o tema reservar espaço, recolhe. */
.commentlist .evo-rv-reply .star-rating {
  display: none;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .evo-rv-summary {
    margin: 1.5rem 0 1.25rem;
    padding: 1rem 0 0.9rem;
  }

  .evo-rv-summary__body {
    gap: 0.9rem;
  }

  .evo-rv-score {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1 1 100%;
  }

  .evo-rv-score__avg {
    font-size: 1.75rem;
  }

  .evo-rv-score__count {
    align-self: center;
    margin-left: auto;
  }

  .evo-rv-hist {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evo-rv-hist__fill,
  .evo-rv-list--loading {
    transition: none;
  }
}